/* ==========================================================================
   ТРК-25 — дизайн-система
   Цвета взяты с логотипа, формы «парус / лист» — с флага-баннера:
   один угол сильно скруглён по эллипсу, соседние почти прямые.
   ========================================================================== */

:root {
  /* --- Цвет: бренд ---------------------------------------------------- */
  --c-navy:        #1E3A55;   /* основной, буквы логотипа */
  --c-navy-700:    #173048;
  --c-navy-800:    #122740;
  --c-navy-900:    #0D1F33;   /* тёмные подложки, футер */
  --c-navy-950:    #081626;
  --c-blue:        #0C487F;   /* синяя полоса триколора */
  --c-blue-500:    #1D62A8;   /* синий на тёмном фоне / hover */
  --c-blue-300:    #7FA8D6;
  --c-red:         #C0332C;   /* красная полоса триколора, акцент/CTA */
  --c-red-600:     #A82A24;   /* hover CTA */
  --c-red-400:     #E0544C;
  --c-white:       #FFFFFF;

  /* --- Цвет: нейтральные ---------------------------------------------- */
  --c-bg:          #F4F6F8;   /* фон страницы */
  --c-surface:     #FFFFFF;   /* карточки */
  --c-line:        #DCE3EA;
  --c-text:        #13263A;
  --c-text-muted:  #5B6B7C;

  /* на тёмном */
  --c-on-dark:        #FFFFFF;
  --c-on-dark-muted:  rgba(255, 255, 255, .64);
  --c-on-dark-faint:  rgba(255, 255, 255, .42);
  --c-on-dark-line:   rgba(255, 255, 255, .12);
  --c-on-dark-fill:   rgba(255, 255, 255, .06);

  /* триколор — фирменный градиент для полос и клиньев */
  --g-tricolor: linear-gradient(90deg, var(--c-white) 0 33.33%, var(--c-blue) 33.33% 66.66%, var(--c-red) 66.66% 100%);

  /* --- Типографика ---------------------------------------------------- */
  --f-display: "Montserrat", "Segoe UI", Arial, sans-serif;  /* заголовки, цифры */
  --f-text:    "Manrope", "Segoe UI", Arial, sans-serif;     /* текст, интерфейс */

  --fs-xs:   .8125rem;   /* 13 */
  --fs-sm:   .9375rem;   /* 15 */
  --fs-base: 1rem;       /* 16 */
  --fs-md:   1.125rem;   /* 18 */
  --fs-lg:   clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
  --fs-xl:   clamp(1.625rem, 1.3rem + 1.4vw, 2.25rem);
  --fs-2xl:  clamp(2rem, 1.5rem + 2.4vw, 3.25rem);
  --fs-3xl:  clamp(2.5rem, 1.6rem + 4vw, 4.5rem);

  /* --- Отступы (шаг 4px) ---------------------------------------------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px;

  --container: 1320px;
  --gutter: clamp(16px, 3vw, 32px);

  /* --- Формы: несимметричные скругления ------------------------------- *
   * Порядок в border-radius: TL TR BR BL / (вертикальные радиусы).
   * «Парус» — большой эллипс в верхнем-левом углу (как у флага-баннера).
   * «Лист»  — большие эллипсы по диагонали TL+BR, маленькие TR+BL.
   * ------------------------------------------------------------------- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 28px;
  --r-xl: clamp(56px, 8vw, 140px);
  --r-xl-v: clamp(44px, 6vw, 110px);   /* вертикальная ось эллипса */

  --shape-sail:  var(--r-xl) var(--r-lg) var(--r-lg) var(--r-lg) / var(--r-xl-v) var(--r-lg) var(--r-lg) var(--r-lg);
  --shape-leaf:  var(--r-xl) var(--r-lg) var(--r-xl) var(--r-lg) / var(--r-xl-v) var(--r-lg) var(--r-xl-v) var(--r-lg);
  --shape-card:  40px 12px 40px 12px / 32px 12px 32px 12px;   /* карточки */
  --shape-btn:   18px 6px 18px 6px;                            /* кнопки */
  --shape-chip:  12px 4px 12px 4px;                            /* чипы, иконки */
  --shape-bubble: 18px 18px 18px 4px;                          /* «облачко» с хвостиком */

  /* --- Тени / движение ------------------------------------------------ */
  --shadow-sm: 0 1px 2px rgba(13, 31, 51, .06), 0 2px 8px rgba(13, 31, 51, .06);
  --shadow-md: 0 8px 24px rgba(13, 31, 51, .10);
  --shadow-lg: 0 24px 60px rgba(13, 31, 51, .18);

  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --t-fast: .18s;
  --t-base: .32s;
}

/* --- База ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--f-text);
  font-size: var(--fs-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

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

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: fixed; left: 16px; top: -60px; z-index: 1000;
  padding: 10px 16px; border-radius: var(--shape-chip);
  background: var(--c-navy); color: #fff; text-decoration: none; font-weight: 600;
}
.skip-link:focus { top: 16px; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap;
}

:focus-visible {
  outline: 2px solid var(--c-blue-500);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --- Кнопки -------------------------------------------------------------- */
.btn {
  --btn-bg: var(--c-red);
  --btn-bg-hover: var(--c-red-600);
  --btn-fg: var(--c-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 52px;
  padding: 0 var(--s-6);
  border: 0;
  border-radius: var(--shape-btn);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--f-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--t-fast), transform var(--t-base) var(--ease-out), border-radius var(--t-base) var(--ease-out), box-shadow var(--t-base);
}
.btn:hover {
  background: var(--btn-bg-hover);
  transform: translateY(-2px);
  border-radius: 6px 18px 6px 18px;   /* лист «переворачивается» */
  box-shadow: 0 10px 24px rgba(192, 51, 44, .32);
}
.btn svg { width: 18px; height: 18px; }

.btn--sm { min-height: 44px; padding: 0 var(--s-5); font-size: 14px; }
.btn--blue  { --btn-bg: var(--c-blue);  --btn-bg-hover: var(--c-blue-500); }
.btn--ghost { --btn-bg: transparent; --btn-bg-hover: var(--c-on-dark-fill); box-shadow: inset 0 0 0 1.5px var(--c-on-dark-line); }
.btn--ghost:hover { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.4); }

/* --- Иконка-кнопка (мессенджеры) ----------------------------------------- */
.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--shape-chip);
  background: var(--c-on-dark-fill);
  box-shadow: inset 0 0 0 1px var(--c-on-dark-line);
  color: var(--c-on-dark);
  transition: background-color var(--t-fast), transform var(--t-base) var(--ease-out), border-radius var(--t-base) var(--ease-out);
}
.icon-btn svg { width: 22px; height: 22px; }
.icon-btn:hover {
  background: var(--c-blue);
  transform: translateY(-2px);
  border-radius: 4px 12px 4px 12px;
}

/* --- Облачко-бейдж (как «Новый авто на Изи!» в референсе) ---------------- */
.bubble {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 8px 16px;
  border-radius: var(--shape-bubble);
  box-shadow: inset 0 0 0 1.5px var(--c-red-400);
  color: var(--c-white);
  font-family: var(--f-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.2;
}
.bubble b { color: var(--c-red-400); }

/* --- Флаг-чип ----------------------------------------------------------- */
.flag-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 6px;
  border-radius: var(--shape-chip);
  background: var(--c-on-dark-fill);
  box-shadow: inset 0 0 0 1px var(--c-on-dark-line);
  color: var(--c-on-dark);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--t-fast), transform var(--t-base) var(--ease-out);
}
.flag-chip img {
  width: 30px;
  height: 20px;
  border-radius: 5px 2px 5px 2px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.08);
}
.flag-chip:hover { background: rgba(255,255,255,.12); transform: translateY(-2px); }

/* --- Ссылка с «полосой триколора» при наведении ------------------------- */
.link-tri {
  position: relative;
  text-decoration: none;
  transition: color var(--t-fast);
}
.link-tri::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 2px;
  background: var(--g-tricolor);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-base) var(--ease-out);
}
.link-tri:hover::after,
.link-tri:focus-visible::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ==========================================================================
   Секции
   ========================================================================== */
.section { padding-block: clamp(56px, 8vw, 112px); }

.section-head {
  display: grid;
  gap: var(--s-4);
  max-width: 760px;
  margin-bottom: clamp(32px, 4vw, 56px);
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  margin: 0;
  font-family: var(--f-display);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-red);
}
.eyebrow::before {             /* мини-триколор перед надзаголовком */
  content: "";
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--g-tricolor);
  box-shadow: 0 0 0 1px var(--c-line);
}
.section-title {
  margin: 0;
  font-family: var(--f-display);
  font-size: var(--fs-2xl);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--c-navy);
}
.section-lead {
  margin: 0;
  font-size: var(--fs-md);
  color: var(--c-text-muted);
}

/* Светлая карточка */
.card {
  background: var(--c-surface);
  border-radius: var(--shape-card);
  box-shadow: var(--shadow-sm);
}

/* Кнопка-«пилюля» с иконкой для светлого фона (мессенджеры) */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 18px 0 14px;
  border-radius: var(--shape-chip);
  background: var(--c-bg);
  box-shadow: inset 0 0 0 1px var(--c-line);
  color: var(--c-navy);
  font-weight: 600;
  font-size: var(--fs-sm);
  text-decoration: none;
  transition: background-color var(--t-fast), color var(--t-fast), transform var(--t-base) var(--ease-out), border-radius var(--t-base) var(--ease-out);
}
.pill svg { width: 22px; height: 22px; color: var(--c-blue); transition: color var(--t-fast); }
.pill:hover {
  background: var(--c-navy);
  color: var(--c-white);
  transform: translateY(-2px);
  border-radius: 4px 12px 4px 12px;
}
.pill:hover svg { color: var(--c-white); }

/* ==========================================================================
   Формы (на тёмном фоне)
   ========================================================================== */
.field { display: grid; gap: var(--s-2); }
.field__label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--c-on-dark-muted);
}
.input {
  width: 100%;
  min-height: 56px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--shape-chip);
  background: rgba(255, 255, 255, .08);
  box-shadow: inset 0 0 0 1px var(--c-on-dark-line);
  color: var(--c-white);
  font: 500 var(--fs-base)/1.2 var(--f-text);
  transition: box-shadow var(--t-fast), background-color var(--t-fast);
}
.input::placeholder { color: var(--c-on-dark-faint); }
.input:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); }
.input:focus { outline: none; background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 2px var(--c-blue-300); }
.input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--c-red-400); }

/* Выбор-«чипы» (радио) */
.choices { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choice span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 56px;
  padding: 0 16px;
  border-radius: var(--shape-chip);
  background: rgba(255, 255, 255, .08);
  box-shadow: inset 0 0 0 1px var(--c-on-dark-line);
  color: var(--c-on-dark-muted);
  font-size: var(--fs-sm);
  font-weight: 600;
  transition: background-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
}
.choice span svg { width: 18px; height: 18px; }
.choice input:hover + span { color: var(--c-white); }
.choice input:checked + span { background: var(--c-blue); color: var(--c-white); box-shadow: none; }
.choice input:focus-visible + span { outline: 2px solid var(--c-blue-300); outline-offset: 2px; }

/* Чекбокс согласия */
.check {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--c-on-dark-muted);
  cursor: pointer;
}
.check input {
  appearance: none;
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  border-radius: 6px 2px 6px 2px;
  background: rgba(255,255,255,.08);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.35);
  cursor: pointer;
  display: grid;
  place-content: center;
  transition: background-color var(--t-fast);
}
.check input::after {
  content: "";
  width: 10px;
  height: 6px;
  border: 2px solid var(--c-white);
  border-top: 0;
  border-right: 0;
  transform: rotate(-45deg) scale(0);
  margin-top: -2px;
  transition: transform var(--t-fast) var(--ease-out);
}
.check input:checked { background: var(--c-red); box-shadow: none; }
.check input:checked::after { transform: rotate(-45deg) scale(1); }
.check a { color: var(--c-white); }

/* ловушка для ботов */
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }