/* ============================================
   ГЛОБАЛЬНЫЕ ПЕРЕМЕННЫЕ И СБРОС
   ============================================ */
:root {
  /* Цвета бренда */
  --qj-red: #ff2b45;
  --qj-dark-red: #d6001c;
  --qj-black: #1a1a1a;
  --qj-white: #ffffff;
  /* Текст */
  --text-main: #0f172a;
  --text-secondary: #475569;
  --text-muted: #757575;
  /* Фоны */
  --bg-light: #f8fafc;
  --bg-white: #ffffff;
  --bg-dark: #1f2937;
  /* Границы */
  --border-light: rgba(15, 23, 42, 0.08);
  --border-white: rgba(255,255,255,0.08);
  /* Акценты */
  --accent-light: #fff1f2;
  /* Тени */
  --shadow-sm: 0 10px 24px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 10px 30px rgba(15, 23, 42, 0.05);
  --shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.08);
  /* Радиусы */
  --radius-sm: 18px;
  --radius-md: 22px;
  --radius-lg: 28px;
  --radius-xl: 32px;
}
/* Сброс box-sizing для всех элементов */
.hp-header, .hp-header *,
.hp-moto-hero, .hp-moto-hero *,
.hp-moto-block, .hp-moto-block *,
.hp-finance, .hp-finance *,
.ms-block, .ms-block *,
.hp-warranty, .hp-warranty *,
.mc-gear, .mc-gear *,
.hp-brand, .hp-brand *,
.hp-contacts, .hp-contacts * {
  box-sizing: border-box !important;
}
/* ============================================
   БЛОК 1A: HEADER (фиксированный)
   ============================================ */
.hp-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
}

.hp-header__container {
  max-width: 1480px;
  margin: 0 auto;
  padding: 12px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* Левая часть: три логотипа в ряд */
.hp-header__logos {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
}

.hp-header__logo-link {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: opacity 0.25s ease;
}

.hp-header__logo-link:hover {
  opacity: 0.75;
}

.hp-header__logo-img {
  display: block;
  object-fit: contain;
}

/* Benelli — круглая эмблема */
.hp-header__logo-img--benelli {
  height: 50px;
  width: auto;
  max-width: 50px;
}

/* QJMOTOR — прямоугольный логотип */
.hp-header__logo-img--qjmotor {
  height: 50px;
  width: auto;
  max-width: 92px;
}

/* RIFT — широкий логотип */
.hp-header__logo-img--rift {
  height: 40px;
  width: auto;
  max-width: 80px;
}

/* Центр: навигация */
.hp-header__nav {
  flex: 1;
  display: flex;
  justify-content: center;
}

.hp-header__menu {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hp-header__link {
  position: relative;
  color: #1a1a1a;
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: color 0.25s ease;
  white-space: nowrap;
}

.hp-header__link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: #ff2b45;
  transition: width 0.25s ease;
}

.hp-header__link:hover {
  color: #ff2b45;
}

.hp-header__link:hover::after {
  width: 100%;
}

/* Правая часть: CTA */
.hp-header__cta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* CTA внутри мобильного меню скрыт на десктопе */
.hp-header__cta--mobile {
  display: none;
}

.hp-header__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 24px;
  background: #ff2b45;
  color: #ffffff !important;
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 6px;
  transition: all 0.25s ease;
  white-space: nowrap;
}

.hp-header__btn:hover {
  background: #d6001c;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 43, 69, 0.3);
}

/* === УЛУЧШЕННЫЙ БЛОК ТЕЛЕФОНА === */
.hp-header__phones-dropdown {
  position: relative;
}

.hp-header__phone-main {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  background: #f8fafc;
  border: 2px solid rgba(0, 0, 0, 0.08);
  border-radius: 6px;
  color: #1a1a1a;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
  white-space: nowrap;
}

.hp-header__phone-main:hover {
  border-color: #ff2b45;
  background: #fff1f2;
  color: #ff2b45;
}

.hp-header__phone-main svg:first-child {
  flex-shrink: 0;
  color: #ff2b45;
}

.hp-header__phone-toggle {
  background: none;
  border: none;
  padding: 0;
}

.hp-header__phone-arrow {
  transition: transform 0.3s ease;
  flex-shrink: 0;
  margin-left: 2px;
}

.hp-header__phones-list {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  padding: 8px 0;
  min-width: 220px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease;
  z-index: 1000;
}

.hp-header__phones-dropdown.is-open .hp-header__phones-list {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.hp-header__phone-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  color: #1a1a1a;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.hp-header__phone-item:hover {
  background: #f8fafc;
  color: #ff2b45;
}

.hp-header__phone-item svg {
  flex-shrink: 0;
  color: #ff2b45;
}

/* Бургер-меню — скрыто на десктопе */
.hp-header__burger {
  display: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  position: relative;
  z-index: 10001;
  flex-shrink: 0;
}

.hp-header__burger span {
  display: block;
  width: 24px;
  height: 2px;
  background: #1a1a1a;
  margin: 5px auto;
  transition: all 0.3s ease;
}

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

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

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

/* Планшеты */
@media (max-width: 1200px) {
  .hp-header__container {
    padding: 12px 24px;
    gap: 24px;
  }

  .hp-header__logos {
    gap: 16px;
  }

  .hp-header__logo-img--benelli {
    height: 44px;
    max-width: 44px;
  }

  .hp-header__logo-img--qjmotor {
    height: 44px;
    max-width: 81px;
  }

  .hp-header__logo-img--rift {
    height: 36px;
    max-width: 72px;
  }

  .hp-header__menu {
    gap: 16px;
  }

  .hp-header__link {
    font-size: 12px;
  }

  .hp-header__btn {
    padding: 8px 18px;
    font-size: 11px;
  }

  .hp-header__phone-main {
    padding: 8px 14px;
    font-size: 12px;
  }
}

/* Мобильная навигация */
@media (max-width: 1024px) {
  .hp-header__container {
    padding: 10px 20px;
  }

  .hp-header__burger {
    display: block;
  }

  /* Скрываем CTA в правой части шапки */
  .hp-header__container > .hp-header__cta {
    display: none;
  }

  .hp-header__nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 90px 24px 32px;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 10000;
  }

  .hp-header__nav.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .hp-header__menu {
    flex-direction: column;
    gap: 24px;
  }

  .hp-header__link {
    font-size: 18px;
  }

  .hp-header__cta--mobile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 100%;
  }

  .hp-header__cta--mobile .hp-header__btn {
    padding: 14px 32px;
    font-size: 13px;
    width: 100%;
    max-width: 320px;
  }

  .hp-header__cta--mobile .hp-header__phones-dropdown {
    width: 100%;
    max-width: 320px;
  }

  .hp-header__cta--mobile .hp-header__phone-main {
    width: 100%;
    justify-content: center;
  }

  .hp-header__cta--mobile .hp-header__phones-list {
    position: static;
    width: 100%;
    transform: none;
    margin-top: 12px;
    max-height: 0;
    overflow: hidden;
    padding: 0;
    opacity: 1;
    visibility: visible;
  }

  .hp-header__cta--mobile .hp-header__phones-dropdown.is-open .hp-header__phones-list {
    max-height: 300px;
    padding: 8px 0;
  }

  .hp-header__cta--mobile .hp-header__phone-item {
    justify-content: center;
  }
}

/* Маленькие мобильные экраны */
@media (max-width: 640px) {
  .hp-header__container {
    padding: 10px 16px;
  }

  .hp-header__logos {
    gap: 12px;
  }

  .hp-header__logo-img--benelli {
    height: 36px;
    max-width: 36px;
  }

  .hp-header__logo-img--qjmotor {
    height: 36px;
    max-width: 66px;
  }

  .hp-header__logo-img--rift {
    height: 30px;
    max-width: 60px;
  }
}
/* ============================================
   БЛОК 1B: HERO (главный экран)
   ============================================ */
.hp-moto-hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  background: #111111;
  font-family: Arial, sans-serif;
  padding-top: 74px; /* компенсация header */
}

.hp-moto-hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: brightness(0.85);
  z-index: 0;
}

.hp-moto-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(0,0,0,0.75) 0%,
    rgba(0,0,0,0.45) 50%,
    rgba(0,0,0,0.20) 100%
  );
  z-index: 1;
}

.hp-moto-hero__content {
  position: relative;
  z-index: 2;
  min-height: calc(100vh - 74px);
}

.hp-moto-hero__main {
  min-height: calc(100vh - 74px);
  display: grid;
  grid-template-columns: 1fr 480px;
  gap: 60px;
  align-items: center;
  padding: 80px 60px;
  max-width: 1480px;
  margin: 0 auto;
}

/* === ЛЕВАЯ ЧАСТЬ: Контент === */
.hp-moto-hero__brand {
  max-width: 720px;
}

.hp-moto-hero__logos {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-bottom: 36px;
  flex-wrap: nowrap;
}

.hp-moto-hero__logo-wrap {
  display: flex;
  align-items: center;
}

.hp-moto-hero__logo-img {
  display: block;
  width: auto;
  height: 80px;
  max-width: 200px;
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3));
}

.hp-moto-hero__logo-img--secondary {
  height: 70px;
  max-width: 150px;
}

.hp-moto-hero__title {
  color: #ffffff;
  font-size: 48px;
  line-height: 1.2;
  font-weight: 700;
  margin: 0 0 32px;
  text-shadow: 0 4px 16px rgba(0,0,0,0.4);
}

/* УТП (преимущества) */
.hp-moto-hero__benefits {
  list-style: none;
  margin: 0 0 36px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hp-moto-hero__benefit {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  color: #ffffff;
  font-size: 16px;
  line-height: 1.5;
  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.hp-moto-hero__benefit svg {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin-top: 2px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

.hp-moto-hero__benefit strong {
  font-weight: 700;
}

/* CTA кнопки */
.hp-moto-hero__actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.hp-moto-hero__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 48px;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  margin-top: 8px;
}

.hp-moto-hero__btn--primary {
  background: var(--qj-red);
  color: #ffffff !important;
  border: 2px solid var(--qj-red);
}

.hp-moto-hero__btn--primary:hover {
  background: var(--qj-dark-red);
  border-color: var(--qj-dark-red);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 43, 69, 0.5);
}

.hp-moto-hero__btn--secondary {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  color: #ffffff !important;
  border: 2px solid rgba(255, 255, 255, 0.4);
}

.hp-moto-hero__btn--secondary:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.6);
  transform: translateY(-2px);
}

/* === ПРАВАЯ ЧАСТЬ: Форма === */
.hp-moto-hero__form-wrapper {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.hp-moto-hero__form {
  width: 100%;
  max-width: 420px;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(20px);
  border-radius: 24px;
  padding: 40px 36px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

.hp-moto-hero__form-title {
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 12px;
  color: var(--text-main);
}

.hp-moto-hero__form-subtitle {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0 0 28px;
}

.hp-moto-hero__form-fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hp-moto-hero__input {
  width: 100%;
  padding: 16px 20px;
  font-size: 15px;
  border: 2px solid rgba(15, 23, 42, 0.1);
  border-radius: 10px;
  transition: all 0.25s ease;
  background: #ffffff;
  color: var(--text-main);
  font-family: inherit;
}

.hp-moto-hero__input:focus {
  outline: none;
  border-color: var(--qj-red);
  box-shadow: 0 0 0 4px rgba(255, 43, 69, 0.1);
}

.hp-moto-hero__form-btn {
  width: 100%;
  padding: 16px 32px;
  background: var(--qj-red);
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 8px;
}

.hp-moto-hero__form-btn:hover {
  background: var(--qj-dark-red);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255, 43, 69, 0.35);
}

.hp-moto-hero__form-note {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-secondary);
  text-align: center;
  margin: 12px 0 0;
}

.hp-moto-hero__form-note a {
  color: var(--qj-red);
  text-decoration: underline;
}

/* === АДАПТИВ === */
@media (max-width: 1200px) {
  .hp-moto-hero__main {
    grid-template-columns: 1fr 400px;
    gap: 40px;
    padding: 60px 40px;
  }
  
  .hp-moto-hero__title {
    font-size: 40px;
  }
  
  .hp-moto-hero__form {
    max-width: 100%;
  }
}

@media (max-width: 1024px) {
  .hp-moto-hero {
    padding-top: 66px;
  }
  
  .hp-moto-hero__main {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 50px 32px;
    min-height: auto;
  }
  
  .hp-moto-hero__content {
    min-height: auto;
  }
  
  .hp-moto-hero__form-wrapper {
    justify-content: center;
  }
  
  .hp-moto-hero__form {
    max-width: 480px;
  }
}

@media (max-width: 768px) {
  .hp-moto-hero__title {
    font-size: 32px;
  }
  
  .hp-moto-hero__logos {
    gap: 20px;
    margin-bottom: 28px;
  }
  
  .hp-moto-hero__logo-img {
    height: 60px;
    max-width: 150px;
  }
  
  .hp-moto-hero__logo-img--secondary {
    height: 52px;
    max-width: 120px;
  }
  
  .hp-moto-hero__benefit {
    font-size: 15px;
  }
  
  .hp-moto-hero__actions {
    flex-direction: column;
    width: 100%;
  }
  
  .hp-moto-hero__btn {
    width: 100%;
    padding: 16px 32px;
  }
}

@media (max-width: 640px) {
  .hp-moto-hero {
    padding-top: 60px;
  }
  
  .hp-moto-hero__main {
    padding: 40px 16px;
  }
  
  .hp-moto-hero__title {
    font-size: 26px;
    margin-bottom: 24px;
  }
  
  .hp-moto-hero__benefits {
    gap: 14px;
    margin-bottom: 28px;
  }
  
  .hp-moto-hero__benefit {
    font-size: 14px;
  }
  
  .hp-moto-hero__form {
    padding: 32px 24px;
  }
  
  .hp-moto-hero__form-title {
    font-size: 24px;
  }
  
  .hp-moto-hero__form-subtitle {
    font-size: 14px;
  }
}
/* ============================================
   БЛОК 2: КАТАЛОГ МОТОЦИКЛОВ
   ============================================ */
.hp-moto-block {
  --moto-bg: #ffffff;
  --moto-accent: var(--qj-red);
  --moto-text-main: var(--text-main);
  --moto-text-sub: var(--text-secondary);
  --moto-border: var(--border-light);
  font-family: var(--t-headline-font), sans-serif;
  padding: 60px 0;
  width: 100% !important;
  background: var(--moto-bg);
}
.hp-moto-block__container {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
  width: 100% !important;
  position: relative !important;
}
.hp-moto-menu {
  display: flex !important;
  justify-content: center;
  gap: 20px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}
.hp-moto-menu__item {
  cursor: pointer;
  padding: 5px 10px;
  border: none;
  background: none;
  font-size: 14px;
  text-transform: uppercase;
  color: var(--moto-text-sub);
}
.hp-moto-menu__item.active {
  color: var(--moto-accent);
  font-weight: 700;
  border-bottom: 2px solid var(--moto-accent);
}
.hp-moto-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 30px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  position: relative !important;
}
.hp-moto-grid .hp-moto-item {
  flex: 0 0 calc(33.333% - 20px) !important;
  max-width: calc(33.333% - 20px) !important;
  display: flex !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}
.hp-moto-card {
  border: 1px solid var(--moto-border);
  background: #ffffff !important;
  display: flex !important;
  flex-direction: column !important;
  transition: 0.3s;
  position: relative !important;
  width: 100% !important;
  overflow: hidden !important;
}
.hp-moto-card:hover {
  border-color: var(--moto-accent);
}
.hp-moto-card__img-wrap {
  width: 100% !important;
  height: 220px !important;
  background: #f8f8f8;
  position: relative !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}
.hp-moto-card__img-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}
.hp-moto-card__content {
  padding: 20px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  flex-grow: 1 !important;
  background: #ffffff !important;
}
.hp-moto-card__title {
  font-size: 18px !important;
  font-weight: 700 !important;
  margin: 0 !important;
  line-height: 1.3 !important;
  color: var(--moto-text-main) !important;
}
.hp-moto-card__price {
  font-size: 18px !important;
  font-weight: bold !important;
  color: var(--moto-accent) !important;
}
.hp-moto-btn {
  margin-top: auto !important;
  padding: 12px;
  cursor: pointer;
  background: white;
  border: 2px solid #000;
  font-weight: 800;
  text-transform: uppercase;
  transition: 0.3s;
  text-decoration: none;
  color: #000;
  text-align: center;
  display: block !important;
  width: 100% !important;
  flex-shrink: 0 !important;
}
.hp-moto-btn:hover {
  background: var(--moto-accent);
  border-color: var(--moto-accent);
  color: white;
}
/* Слайдер в карточках */
.hp-slider {
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
  overflow: hidden !important;
  display: block !important;
}
.hp-slider-track {
  display: flex !important;
  flex-direction: row !important;
  height: 100% !important;
  width: 100% !important;
  transition: transform 0.4s ease !important;
  will-change: transform;
}
.hp-slider-slide {
  min-width: 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}
.hp-slider-slide img {
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  display: block !important;
  pointer-events: none !important;
}
.hp-slider-btn {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: rgba(0,0,0,0.5) !important;
  color: #ffffff !important;
  border: none !important;
  width: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 50 !important;
  font-size: 18px !important;
  border-radius: 4px !important;
  user-select: none !important;
}
.hp-slider-btn:hover {
  background: rgba(0, 0, 0, 0.8) !important;
}
.hp-slider-btn--prev {
  left: 8px !important;
  right: auto !important;
}
.hp-slider-btn--next {
  right: 8px !important;
  left: auto !important;
}
/* Кружки выбора цвета */
.hp-colors-container {
  margin-top: 5px !important;
  margin-bottom: 15px !important;
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}
.hp-color-circle {
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  border: 1px solid #eee !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  transition: outline 0.2s ease;
}
.hp-color-circle.active {
  outline: 2px solid var(--qj-red) !important;
  outline-offset: 1px !important;
}
/* Модальное окно */
.hp-modal {
  display: none;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(0,0,0,0.8) !important;
  z-index: 999999 !important;
  padding: 40px 20px;
  overflow-y: auto !important;
}
.hp-modal--active {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}
.hp-modal__wrapper {
  max-width: 900px;
  width: 100% !important;
  margin: auto !important;
  background: #fff;
  position: relative;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  border-radius: 4px;
}
.hp-modal__content-area {
  padding: 30px;
}
.hp-modal__tabs {
  display: flex;
  border-bottom: 2px solid #eee;
  margin-top: 20px;
}
.hp-modal__tab {
  padding: 12px 24px;
  cursor: pointer;
  background: none;
  border: none;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  color: #666;
  transition: color 0.2s;
}
.hp-modal__tab.active {
  color: var(--qj-red);
  border-bottom: 2px solid var(--qj-red);
}
.hp-modal__specs-content {
  padding-top: 20px;
}
/* ============================================
   БЛОК 3: ФИНАНСИРОВАНИЕ
   ============================================ */
.hp-finance {
  --bg: var(--bg-light);
  --card: var(--bg-white);
  --text: var(--text-main);
  --text-soft: var(--text-secondary);
  --accent: var(--qj-red);
  --accent-light: var(--accent-light);
  --border: var(--border-light);
  
  background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
  padding: 90px 20px;
  font-family: Arial, sans-serif;
  color: var(--text);
}

.hp-finance__container {
  max-width: 1280px;
  margin: 0 auto;
}

/* Заголовок */
.hp-finance__header {
  text-align: center;
  margin-bottom: 60px;
}

.hp-finance__title {
  margin: 0 0 20px;
  font-size: 52px;
  line-height: 1.1;
  font-weight: 700;
}

.hp-finance__lead {
  max-width: 760px;
  margin: 0 auto;
  color: var(--text-soft);
  font-size: 20px;
  line-height: 1.7;
}

/* Опции финансирования */
.hp-finance__options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 50px;
}

.hp-finance__option {
  position: relative;
  background: var(--card);
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px 28px;
  transition: all 0.3s ease;
}

.hp-finance__option:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(255, 43, 69, 0.3);
}

.hp-finance__option--featured {
  border-color: var(--accent);
  background: linear-gradient(135deg, #fff7f7 0%, #ffffff 100%);
}

.hp-finance__option-badge {
  position: absolute;
  top: -12px;
  right: 28px;
  padding: 6px 16px;
  background: var(--accent);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 20px;
}

.hp-finance__option-icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-light);
  color: var(--accent);
  border-radius: 50%;
  margin-bottom: 24px;
}

.hp-finance__option-title {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 20px;
  color: var(--text);
}

.hp-finance__option-rate {
  margin-bottom: 20px;
}

.hp-finance__option-number {
  display: block;
  font-size: 42px;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 8px;
}

.hp-finance__option-period {
  display: block;
  font-size: 14px;
  color: var(--text-soft);
  font-weight: 600;
}

.hp-finance__option-features {
  list-style: none;
  margin: 0 0 24px 0;
  padding: 0;
}

.hp-finance__option-features li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 10px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-soft);
}

.hp-finance__option-features li:before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
  font-size: 16px;
}

.hp-finance__option-features li:last-child {
  margin-bottom: 0;
}

.hp-finance__option-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 24px;
  background: transparent;
  border: 2px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text);
  cursor: pointer;
  transition: all 0.3s ease;
}

.hp-finance__option-btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
}

.hp-finance__option-btn svg {
  transition: transform 0.3s ease;
}

.hp-finance__option.is-active .hp-finance__option-btn svg {
  transform: rotate(45deg);
}

/* Детали (раскрывающиеся) */
.hp-finance__option-details {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, margin 0.4s ease;
}

.hp-finance__option.is-active .hp-finance__option-details {
  max-height: 600px;
  margin-top: 24px;
}

.hp-finance__option-details p {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-soft);
}

.hp-finance__option-details ul {
  margin: 0 0 16px 0;
  padding: 0 0 0 20px;
  list-style: disc;
}

.hp-finance__option-details ul li {
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-soft);
}

.hp-finance__option-note {
  padding: 12px 16px;
  background: rgba(15, 23, 42, 0.04);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  font-size: 13px !important;
  line-height: 1.6 !important;
  color: var(--text-soft) !important;
  margin-top: 16px !important;
}

/* CTA: Рассчитать платёж */
.hp-finance__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 50px 40px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--qj-dark-red) 100%);
  border-radius: var(--radius-xl);
  margin-bottom: 50px;
  box-shadow: 0 12px 32px rgba(255, 43, 69, 0.25);
}

.hp-finance__cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 18px 48px;
  background: #ffffff;
  color: var(--accent) !important;
  text-decoration: none;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 8px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.hp-finance__cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.hp-finance__cta-text {
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
}

/* Дополнительные опции */
.hp-finance__extra {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-bottom: 60px;
}

.hp-finance__extra-item {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 28px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: all 0.3s ease;
}

.hp-finance__extra-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--accent);
}

.hp-finance__extra-icon {
  font-size: 48px;
  flex-shrink: 0;
}

.hp-finance__extra-title {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--text);
}

.hp-finance__extra-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-soft);
}

/* Шаги получения */
.hp-finance__steps {
  padding: 50px 40px;
  background: var(--card);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
}

.hp-finance__steps-title {
  font-size: 32px;
  font-weight: 700;
  margin: 0 0 40px;
  text-align: center;
  color: var(--text);
}

.hp-finance__steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.hp-finance__step {
  text-align: center;
}

.hp-finance__step-number {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  background: linear-gradient(135deg, var(--accent-light) 0%, #ffe4e6 100%);
  color: var(--accent);
  font-size: 24px;
  font-weight: 700;
  border-radius: 50%;
  border: 3px solid var(--accent);
}

.hp-finance__step-title {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 10px;
  color: var(--text);
}

.hp-finance__step-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-soft);
}

/* Адаптив */
@media (max-width: 1200px) {
  .hp-finance__options {
    grid-template-columns: 1fr;
  }
  
  .hp-finance__steps-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 1024px) {
  .hp-finance {
    padding: 70px 20px;
  }
  
  .hp-finance__title {
    font-size: 42px;
  }
  
  .hp-finance__extra {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .hp-finance {
    padding: 60px 16px;
  }
  
  .hp-finance__header {
    margin-bottom: 40px;
  }
  
  .hp-finance__title {
    font-size: 32px;
  }
  
  .hp-finance__lead {
    font-size: 16px;
  }
  
  .hp-finance__option {
    padding: 28px 20px;
  }
  
  .hp-finance__option-number {
    font-size: 36px;
  }
  
  .hp-finance__cta {
    padding: 36px 24px;
  }
  
  .hp-finance__cta-btn {
    width: 100%;
    padding: 16px 32px;
  }
  
  .hp-finance__steps {
    padding: 36px 24px;
  }
  
  .hp-finance__steps-title {
    font-size: 24px;
    margin-bottom: 28px;
  }
  
  .hp-finance__steps-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}
/* ============================================
   БЛОК 4: СЕРВИС
   ============================================ */
.ms-block {
  background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
  padding: 90px 20px;
}

.ms-container {
  max-width: 1280px;
  margin: 0 auto;
}

.ms-split {
  display: grid;
  grid-template-columns: 480px 1fr;
  gap: 80px;
  align-items: flex-start;
}

/* ===== ЛЕВАЯ ЧАСТЬ: КОНТЕНТ ===== */
.ms-content {
  position: sticky;
  top: 100px;
}

.ms-label {
  display: inline-block;
  margin-bottom: 16px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--qj-red);
}

.ms-title {
  font-size: 52px;
  line-height: 1.1;
  font-weight: 700;
  margin: 0 0 24px;
  color: var(--qj-black);
}

.ms-text {
  font-size: 18px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 0 0 36px;
}

.ms-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 40px;
  background: var(--qj-red);
  color: #ffffff !important;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.ms-btn:hover {
  background: var(--qj-dark-red);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255, 43, 69, 0.35);
}

/* ===== ПРАВАЯ ЧАСТЬ: УСЛУГИ-АККОРДЕОН ===== */
.ms-services {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ms-service {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.ms-service:hover {
  border-color: rgba(255, 43, 69, 0.2);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.ms-service.is-active {
  border-color: var(--qj-red);
}

/* Заголовок услуги (кликабельный) */
.ms-service__header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  cursor: pointer;
  user-select: none;
  transition: background 0.2s ease;
}

.ms-service__header:hover {
  background: rgba(248, 250, 252, 0.8);
}

.ms-service__icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 100%);
  color: var(--qj-red);
  border-radius: 50%;
  transition: all 0.3s ease;
}

.ms-service__icon svg {
  width: 22px;
  height: 22px;
  display: block;
}

.ms-service:hover .ms-service__icon {
  background: linear-gradient(135deg, #ffe4e6 0%, #fecdd3 100%);
  transform: rotate(5deg) scale(1.05);
}

.ms-service.is-active .ms-service__icon {
  background: var(--qj-red);
  color: #ffffff;
  transform: rotate(0deg) scale(1);
}

.ms-service__title {
  flex: 1;
  font-size: 17px;
  font-weight: 700;
  margin: 0;
  color: var(--qj-black);
  line-height: 1.3;
}

.ms-service__toggle {
  width: 32px;
  height: 32px;
  border: none;
  background: rgba(255, 43, 69, 0.1);
  color: var(--qj-red);
  font-size: 24px;
  font-weight: 300;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.25s ease;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.ms-service__toggle:hover {
  background: rgba(255, 43, 69, 0.15);
  transform: rotate(90deg);
}

.ms-service.is-active .ms-service__toggle {
  background: var(--qj-red);
  color: #ffffff;
  transform: rotate(45deg);
}

/* Тело услуги (раскрывающееся) */
.ms-service__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.4s ease;
}

.ms-service.is-active .ms-service__body {
  max-height: 500px;
  padding: 0 24px 24px 72px;
}

.ms-service__body p {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-secondary);
}

.ms-service__body ul {
  margin: 0;
  padding: 0 0 0 20px;
  list-style: none;
}

.ms-service__body ul li {
  position: relative;
  padding-left: 16px;
  margin-bottom: 10px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.ms-service__body ul li:before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--qj-red);
  font-weight: 700;
}

.ms-service__body ul li:last-child {
  margin-bottom: 0;
}

/* ===== АДАПТИВ ===== */
@media (max-width: 1200px) {
  .ms-split {
    grid-template-columns: 420px 1fr;
    gap: 60px;
  }
  
  .ms-title {
    font-size: 42px;
  }
}

@media (max-width: 1024px) {
  .ms-split {
    grid-template-columns: 1fr;
    gap: 50px;
  }
  
  .ms-content {
    position: relative;
    top: auto;
  }
  
  .ms-text {
    font-size: 17px;
  }
}

@media (max-width: 640px) {
  .ms-block {
    padding: 60px 16px;
  }
  
  .ms-title {
    font-size: 32px;
  }
  
  .ms-text {
    font-size: 16px;
    margin-bottom: 28px;
  }
  
  .ms-btn {
    width: 100%;
    padding: 14px 32px;
  }
  
  .ms-service__header {
    padding: 16px 20px;
    gap: 12px;
  }
  
  .ms-service__icon {
    width: 38px;
    height: 38px;
  }
  
  .ms-service__icon svg {
    width: 20px;
    height: 20px;
  }
  
  .ms-service__title {
    font-size: 15px;
  }
  
  .ms-service__toggle {
    width: 28px;
    height: 28px;
    font-size: 20px;
  }
  
  .ms-service.is-active .ms-service__body {
    padding: 0 20px 20px 60px;
  }
  
  .ms-service__body p,
  .ms-service__body ul li {
    font-size: 14px;
  }
}
/* ============================================
   БЛОК 5: ГАРАНТИЯ
   ============================================ */
.hp-warranty {
  --bg: var(--bg-light);
  --card-bg: var(--bg-white);
  --text-main: var(--text-main);
  --text-secondary: var(--text-secondary);
  --accent: var(--qj-dark-red);
  --accent-light: var(--accent-light);
  --border: var(--border-light);
  --radius: var(--radius-md);
  
  padding: 90px 20px;
  background: var(--bg);
  font-family: Arial, sans-serif;
  color: var(--text-main);
}

.hp-warranty__container {
  max-width: 1280px;
  margin: 0 auto;
}

.hp-warranty__header {
  text-align: center;
  margin-bottom: 60px;
}

.hp-warranty__subtitle {
  display: inline-block;
  margin-bottom: 16px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

.hp-warranty__title {
  margin: 0 0 24px;
  font-size: 52px;
  line-height: 1.1;
  font-weight: 700;
  color: var(--text-main);
}

.hp-warranty__lead {
  max-width: 760px;
  margin: 0 auto;
  font-size: 20px;
  line-height: 1.7;
  color: var(--text-secondary);
}

.hp-warranty__lead strong {
  color: var(--accent);
  font-weight: 700;
}

.hp-warranty__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 50px;
}

.hp-warranty__card {
  position: relative;
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 36px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
}

.hp-warranty__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.hp-warranty__card--accent {
  background: linear-gradient(135deg, #fff7f7 0%, #fff1f2 100%);
  border-left: 4px solid var(--accent);
}

.hp-warranty__icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  background: var(--accent-light);
  color: var(--accent);
}

.hp-warranty__icon svg {
  width: 32px;
  height: 32px;
}

.hp-warranty__card-title {
  margin: 0 0 16px;
  font-size: 22px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--text-main);
}

.hp-warranty__text {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-secondary);
}

.hp-warranty__text strong {
  color: var(--accent);
  font-weight: 700;
}

/* Списки в карточках */
.hp-warranty__list {
  margin: 0;
  padding: 0 0 0 20px;
  list-style: none;
}

.hp-warranty__list li {
  position: relative;
  padding-left: 8px;
  margin-bottom: 12px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.hp-warranty__list li:before {
  content: '✓';
  position: absolute;
  left: -20px;
  color: var(--accent);
  font-weight: 700;
  font-size: 16px;
}

.hp-warranty__list li:last-child {
  margin-bottom: 0;
}

/* Полный список (без галочек, с точками) */
.hp-warranty__list--full li:before {
  content: '•';
  font-size: 20px;
  line-height: 1;
}

/* Footer блока */
.hp-warranty__footer {
  text-align: center;
  padding: 50px 40px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--qj-dark-red) 100%);
  border-radius: var(--radius-xl);
  box-shadow: 0 12px 32px rgba(255, 43, 69, 0.25);
}

.hp-warranty__footer-text {
  margin: 0 0 24px;
  font-size: 20px;
  font-weight: 600;
  color: #ffffff;
}

.hp-warranty__footer-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 40px;
  background: #ffffff;
  color: var(--accent) !important;
  text-decoration: none;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 8px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.hp-warranty__footer-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* Адаптив для планшетов */
@media (max-width: 1024px) {
  .hp-warranty {
    padding: 70px 20px;
  }
  
  .hp-warranty__title {
    font-size: 42px;
  }
  
  .hp-warranty__grid {
    grid-template-columns: 1fr;
  }
  
  .hp-warranty__card {
    padding: 32px;
  }
}

/* Адаптив для мобильных */
@media (max-width: 640px) {
  .hp-warranty {
    padding: 60px 16px;
  }
  
  .hp-warranty__header {
    margin-bottom: 40px;
  }
  
  .hp-warranty__title {
    font-size: 32px;
  }
  
  .hp-warranty__lead {
    font-size: 16px;
    line-height: 1.6;
  }
  
  .hp-warranty__card {
    padding: 28px 20px;
    border-radius: 16px;
  }
  
  .hp-warranty__icon {
    width: 54px;
    height: 54px;
    margin-bottom: 20px;
  }
  
  .hp-warranty__icon svg {
    width: 28px;
    height: 28px;
  }
  
  .hp-warranty__card-title {
    font-size: 20px;
    margin-bottom: 14px;
  }
  
  .hp-warranty__text,
  .hp-warranty__list li {
    font-size: 15px;
  }
  
  .hp-warranty__footer {
    padding: 36px 24px;
  }
  
  .hp-warranty__footer-text {
    font-size: 18px;
  }
  
  .hp-warranty__footer-btn {
    width: 100%;
    padding: 14px 32px;
  }
}
/* ============================================
   БЛОК 6: МОТОЭКИПИРОВКА
   ============================================ */
.mc-gear {
  --mc-bg: var(--bg-white);
  --mc-text: var(--qj-black);
  --mc-accent: var(--qj-red);
  --mc-border: var(--border-light);
  
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  color: var(--mc-text);
  padding: 90px 20px;
}

.mc-gear__container {
  max-width: 1280px;
  margin: 0 auto;
}

.mc-gear__split {
  display: grid;
  grid-template-columns: 520px 1fr;
  gap: 80px;
  align-items: center;
}

/* Левая часть: контент */
.mc-gear__content {
  max-width: 520px;
}

.mc-gear__label {
  display: inline-block;
  margin-bottom: 16px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mc-accent);
}

.mc-gear__title {
  font-size: 52px;
  line-height: 1.1;
  font-weight: 700;
  margin: 0 0 24px;
  color: var(--mc-text);
}

.mc-gear__text {
  font-size: 18px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 0 0 36px;
}

/* Преимущества */
.mc-gear__benefits {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 36px;
}

.mc-gear__benefit {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.mc-gear__benefit-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-light);
  color: var(--mc-accent);
  border-radius: 50%;
}

.mc-gear__benefit-title {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--mc-text);
}

.mc-gear__benefit-text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
}

.mc-gear__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 40px;
  background: var(--mc-accent);
  color: #ffffff !important;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.mc-gear__btn:hover {
  background: var(--qj-dark-red);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255, 43, 69, 0.35);
}

/* Правая часть: визуал */
.mc-gear__visual {
  position: relative;
}

.mc-gear__categories {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.mc-gear__category {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: #ffffff;
  border: 1px solid var(--mc-border);
  transition: all 0.3s ease;
  aspect-ratio: 1;
}

.mc-gear__category:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--mc-accent);
}

.mc-gear__category-img {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.mc-gear__category-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.mc-gear__category:hover .mc-gear__category-img img {
  transform: scale(1.08);
}

.mc-gear__category-name {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px;
  background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%);
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 0.05em;
}

/* Бейдж */
.mc-gear__badge {
  position: absolute;
  top: -20px;
  right: 40px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: var(--mc-accent);
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  border-radius: 30px;
  box-shadow: 0 8px 24px rgba(255, 43, 69, 0.4);
  animation: pulse 2s ease-in-out infinite;
}

.mc-gear__badge svg {
  flex-shrink: 0;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* Адаптив */
@media (max-width: 1200px) {
  .mc-gear__split {
    grid-template-columns: 460px 1fr;
    gap: 60px;
  }
  
  .mc-gear__title {
    font-size: 42px;
  }
}

@media (max-width: 1024px) {
  .mc-gear {
    padding: 70px 20px;
  }
  
  .mc-gear__split {
    grid-template-columns: 1fr;
    gap: 50px;
  }
  
  .mc-gear__content {
    max-width: 100%;
  }
  
  .mc-gear__badge {
    position: static;
    margin: 24px auto 0;
    width: fit-content;
  }
}

@media (max-width: 640px) {
  .mc-gear {
    padding: 60px 16px;
  }
  
  .mc-gear__title {
    font-size: 32px;
  }
  
  .mc-gear__text {
    font-size: 16px;
  }
  
  .mc-gear__benefits {
    gap: 16px;
    margin-bottom: 28px;
  }
  
  .mc-gear__benefit-icon {
    width: 40px;
    height: 40px;
  }
  
  .mc-gear__benefit-title {
    font-size: 16px;
  }
  
  .mc-gear__benefit-text {
    font-size: 14px;
  }
  
  .mc-gear__btn {
    width: 100%;
    padding: 14px 32px;
  }
  
  .mc-gear__categories {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  
  .mc-gear__category-name {
    font-size: 13px;
    padding: 12px 8px;
  }
  
  .mc-gear__badge {
    font-size: 13px;
    padding: 10px 20px;
  }
}
/* ============================================
   БЛОК 7: О НАС
   ============================================ */
.hp-brand {
  --bg: var(--bg-light);
  --card: var(--bg-white);
  --text: var(--text-main);
  --text-soft: var(--text-secondary);
  --accent: var(--qj-dark-red);
  --border: var(--border-light);
  
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  padding: 90px 20px;
  font-family: Arial, sans-serif;
  color: var(--text);
}

.hp-brand__container {
  max-width: 1280px;
  margin: 0 auto;
}

/* Заголовок */
.hp-brand__header {
  text-align: center;
  margin-bottom: 60px;
}

.hp-brand__subtitle {
  display: inline-block;
  margin-bottom: 16px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.hp-brand__title {
  margin: 0 0 20px;
  font-size: 52px;
  line-height: 1;
  font-weight: 700;
}

.hp-brand__lead {
  max-width: 800px;
  margin: 0 auto;
  color: var(--text-soft);
  font-size: 20px;
  line-height: 1.7;
}

.hp-brand__lead strong {
  color: var(--accent);
  font-weight: 700;
}

/* Split секция */
.hp-brand__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  margin-bottom: 60px;
}

/* Левая часть: Контент */
.hp-brand__fact {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 28px;
  background: var(--accent-light);
  border-left: 4px solid var(--accent);
  border-radius: 12px;
  margin-bottom: 32px;
}

.hp-brand__fact-number {
  font-size: 24px;
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
}

.hp-brand__fact-text {
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  font-weight: 600;
}

.hp-brand__content-title {
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 20px;
  color: var(--text);
}

.hp-brand__text {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-soft);
}

.hp-brand__text:last-of-type {
  margin-bottom: 32px;
}

/* Три бренда */
.hp-brand__brands {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hp-brand__brand-item {
  padding: 20px 24px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: all 0.3s ease;
}

.hp-brand__brand-item:hover {
  border-color: var(--accent);
  transform: translateX(4px);
  box-shadow: var(--shadow-sm);
}

.hp-brand__brand-name {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--accent);
}

.hp-brand__brand-desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-soft);
  margin: 0;
}

/* Правая часть: Фото */
.hp-brand__photos {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hp-brand__photo {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid var(--border);
}

.hp-brand__photo--large {
  aspect-ratio: 16/10;
}

.hp-brand__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.hp-brand__photo:hover img {
  transform: scale(1.05);
}

.hp-brand__photo-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 16px;
  background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 100%);
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
}

.hp-brand__photo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.hp-brand__photo-grid .hp-brand__photo {
  aspect-ratio: 1;
}

/* Производитель (компактный блок внизу) */
.hp-brand__manufacturer {
  padding: 40px 48px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

.hp-brand__manufacturer-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--accent-light);
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 20px;
  margin-bottom: 20px;
}

.hp-brand__manufacturer-title {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 28px;
  color: var(--text);
}

.hp-brand__manufacturer-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

.hp-brand__stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hp-brand__stat-number {
  font-size: 32px;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
  white-space: nowrap;
}

.hp-brand__stat-label {
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-soft);
}

/* Адаптив */
@media (max-width: 1024px) {
  .hp-brand {
    padding: 70px 20px;
  }
  
  .hp-brand__title {
    font-size: 42px;
  }
  
  .hp-brand__lead {
    font-size: 18px;
  }
  
  .hp-brand__split {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  
  .hp-brand__manufacturer-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}

@media (max-width: 640px) {
  .hp-brand {
    padding: 60px 16px;
  }
  
  .hp-brand__header {
    margin-bottom: 40px;
  }
  
  .hp-brand__title {
    font-size: 32px;
  }
  
  .hp-brand__lead {
    font-size: 16px;
  }
  
  .hp-brand__fact {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 16px 20px;
  }
  
  .hp-brand__fact-number {
    font-size: 20px;
  }
  
  .hp-brand__fact-text {
    font-size: 14px;
  }
  
  .hp-brand__content-title {
    font-size: 24px;
  }
  
  .hp-brand__text {
    font-size: 15px;
  }
  
  .hp-brand__brand-item {
    padding: 16px 20px;
  }
  
  .hp-brand__brand-name {
    font-size: 16px;
  }
  
  .hp-brand__brand-desc {
    font-size: 13px;
  }
  
  .hp-brand__photo-grid {
    grid-template-columns: 1fr;
  }
  
  .hp-brand__manufacturer {
    padding: 28px 24px;
  }
  
  .hp-brand__manufacturer-title {
    font-size: 20px;
    margin-bottom: 20px;
  }
  
  .hp-brand__manufacturer-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  
  .hp-brand__stat-number {
    font-size: 24px;
  }
  
  .hp-brand__stat-label {
    font-size: 12px;
  }
}
/* ============================================
   FOOTER
   ============================================ */
.hp-footer {
  --footer-bg: #1f2937;
  --footer-text: #cbd5e1;
  --footer-text-light: #94a3b8;
  --footer-accent: var(--qj-red);
  --footer-border: rgba(255, 255, 255, 0.08);
  
  background: linear-gradient(180deg, #374151 0%, #1f2937 100%);
  color: var(--footer-text);
  padding: 80px 20px 0;
  font-family: Arial, sans-serif;
}

.hp-footer__container {
  max-width: 1480px;
  margin: 0 auto;
}

/* Верхняя часть */
.hp-footer__top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.2fr 1.3fr;
  gap: 60px;
  padding-bottom: 60px;
  border-bottom: 1px solid var(--footer-border);
  margin-bottom: 32px;
}

/* Колонка с брендом */
.hp-footer__col--brand {
  max-width: 380px;
}

.hp-footer__logos {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.hp-footer__logo {
  height: 40px;
  width: auto;
  max-width: 40px;
  object-fit: contain;
  opacity: 0.9;
  transition: opacity 0.3s ease;
}

.hp-footer__logo:hover {
  opacity: 1;
}

.hp-footer__logo--main {
  height: 40px;
  max-width: 74px;
}

.hp-footer__desc {
  margin: 0 0 24px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--footer-text-light);
}

/* Социальные сети */
.hp-footer__socials {
  display: flex;
  gap: 12px;
}

.hp-footer__social {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 50%;
  color: var(--footer-text);
  text-decoration: none;
  transition: all 0.3s ease;
}

.hp-footer__social:hover {
  background: var(--footer-accent);
  color: #ffffff;
  transform: translateY(-2px);
}

/* Заголовки колонок */
.hp-footer__col-title {
  margin: 0 0 20px;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #ffffff;
}

/* Навигация */
.hp-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hp-footer__link {
  color: var(--footer-text-light);
  text-decoration: none;
  font-size: 14px;
  transition: color 0.25s ease;
  display: inline-block;
}

.hp-footer__link:hover {
  color: var(--footer-accent);
  padding-left: 4px;
}

/* Контакты */
.hp-footer__contacts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.hp-footer__contacts li {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hp-footer__contact-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--footer-text-light);
}

.hp-footer__contact-value {
  font-size: 14px;
  color: var(--footer-text);
  text-decoration: none;
  transition: color 0.25s ease;
}

.hp-footer__contact-value--address {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.hp-footer__contact-value--address::after {
  content: '→';
  font-size: 16px;
  opacity: 0;
  transform: translateX(-4px);
  transition: all 0.25s ease;
}

.hp-footer__contact-value--address:hover::after {
  opacity: 1;
  transform: translateX(0);
}

a.hp-footer__contact-value:hover {
  color: var(--footer-accent);
}

/* Быстрые действия */
.hp-footer__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hp-footer__action-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--footer-border);
  border-radius: 8px;
  color: var(--footer-text);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.hp-footer__action-btn:hover {
  background: rgba(255, 43, 69, 0.12);
  border-color: var(--footer-accent);
  color: var(--footer-accent);
  transform: translateX(4px);
}

.hp-footer__action-btn svg {
  flex-shrink: 0;
}

/* Нижняя часть */
.hp-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 28px 0;
  font-size: 13px;
  color: var(--footer-text-light);
}

.hp-footer__copy {
  font-weight: 600;
}

.hp-footer__legal {
  display: flex;
  gap: 24px;
}

.hp-footer__legal-link {
  color: var(--footer-text-light);
  text-decoration: none;
  transition: color 0.25s ease;
}

.hp-footer__legal-link:hover {
  color: var(--footer-accent);
}

.hp-footer__rnp {
  font-size: 12px;
  opacity: 0.8;
}

/* Адаптив */
@media (max-width: 1200px) {
  .hp-footer__top {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
  }
  
  .hp-footer__col--brand {
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .hp-footer {
    padding: 60px 20px 0;
  }
  
  .hp-footer__top {
    grid-template-columns: 1fr;
    gap: 40px;
    padding-bottom: 40px;
    margin-bottom: 24px;
  }
  
  .hp-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 24px 0;
  }
  
  .hp-footer__legal {
    flex-direction: column;
    gap: 12px;
  }
}

@media (max-width: 640px) {
  .hp-footer {
    padding: 50px 16px 0;
  }
  
  .hp-footer__logos {
    gap: 12px;
    margin-bottom: 20px;
  }
  
  .hp-footer__logo {
    height: 32px;
    max-width: 32px;
  }
  
  .hp-footer__logo--main {
    height: 32px;
    max-width: 59px;
  }
  
  .hp-footer__desc {
    font-size: 13px;
  }
  
  .hp-footer__socials {
    gap: 10px;
  }
  
  .hp-footer__social {
    width: 36px;
    height: 36px;
  }
  
  .hp-footer__col-title {
    font-size: 14px;
    margin-bottom: 16px;
  }
  
  .hp-footer__action-btn {
    padding: 10px 14px;
    font-size: 12px;
  }
  
  .hp-footer__bottom {
    font-size: 12px;
  }
  
  .hp-footer__rnp {
    font-size: 11px;
  }
}
/* ============================================
   АДАПТИВНЫЕ СТИЛИ — TABLET (до 1024px)
   ============================================ */
@media (max-width: 1024px) {
  .hp-moto-hero__main {
    padding: 120px 32px 80px;
  }
  .hp-moto-hero__title {
    font-size: 32px;
  }
  .hp-moto-hero__logo-img {
    max-height: 130px;
    max-width: 260px;
  }
  .hp-moto-hero__logo-img--secondary {
    max-height: 100px;
    max-width: 220px;
  }
  /* Каталог */
  .hp-moto-grid .hp-moto-item {
    flex: 0 0 calc(50% - 15px) !important;
    max-width: calc(50% - 15px) !important;
  }
  /* Финансы */
  .hp-finance {
    padding: 70px 20px;
  }
  .hp-finance__title {
    font-size: 42px;
  }
  .hp-finance__company {
    flex-direction: column;
    align-items: flex-start;
  }
  .hp-finance__grid,
  .hp-finance__programs {
    grid-template-columns: 1fr;
  }
  /* Сервис */
  .ms-container {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  /* Гарантия */
  .hp-warranty {
    padding: 70px 20px;
  }
  .hp-warranty__title {
    font-size: 42px;
  }
  .hp-warranty__grid {
    grid-template-columns: 1fr;
  }
  .hp-warranty__card {
    padding: 32px;
  }
  /* Экипировка */
  .mc-gear__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  /* О бренде */
  .hp-brand__hero,
  .hp-brand__grid,
  .hp-brand__global {
    grid-template-columns: 1fr;
  }
  .hp-brand__title {
    font-size: 52px;
  }
  /* Контакты */
  .hp-contacts__grid {
    grid-template-columns: 1fr;
  }
  .hp-contacts__title {
    font-size: 48px;
  }
}
/* ============================================
   АДАПТИВНЫЕ СТИЛИ — MOBILE (до 768px)
   ============================================ */
@media (max-width: 768px) {
  /* Hero */
  .hp-moto-hero__main {
    padding: 110px 16px 60px;
  }
  .hp-moto-hero__logos {
    flex-wrap: wrap;
    gap: 16px 24px;
    margin-bottom: 30px;
  }
  .hp-moto-hero__logo-wrap {
    display: flex;
    align-items: center;
  }
  .hp-moto-hero__logo-img {
    height: 48px !important;
    max-width: 160px !important;
  }
  .hp-moto-hero__logo-img--secondary {
    height: 42px !important;
    max-width: 110px !important;
  }
  .hp-moto-hero__logo-wrap:nth-child(3) .hp-moto-hero__logo-img {
    height: 34px !important;
    max-width: 110px !important;
  }
  .hp-moto-hero__title {
    font-size: 22px;
    line-height: 1.35;
    padding-left: 14px;
    max-width: 100%;
  }
  /* Модалка */
  .hp-modal--active {
    align-items: flex-start !important;
  }
}
/* ============================================
   АДАПТИВНЫЕ СТИЛИ — SMALL MOBILE (до 640px)
   ============================================ */
@media (max-width: 640px) {
  /* Каталог */
  .hp-moto-grid .hp-moto-item {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  /* Финансы */
  .hp-finance {
    padding: 56px 16px;
  }
  .hp-finance__header {
    margin-bottom: 42px;
  }
  .hp-finance__title {
    font-size: 34px;
  }
  .hp-finance__lead {
    font-size: 16px;
    line-height: 1.6;
  }
  .hp-finance__section {
    padding: 24px 20px;
    border-radius: 20px;
  }
  .hp-finance__company-title {
    font-size: 24px;
  }
  .hp-finance__company-text,
  .hp-finance__text,
  .hp-finance__program-text {
    font-size: 15px;
  }
  .hp-finance__program-title {
    font-size: 22px;
  }
  .hp-finance__logo {
    width: 150px;
  }
  /* Гарантия */
  .hp-warranty {
    padding: 56px 16px;
  }
  .hp-warranty__header {
    margin-bottom: 42px;
  }
  .hp-warranty__title {
    font-size: 32px;
  }
  .hp-warranty__lead {
    font-size: 16px;
    line-height: 1.6;
  }
  .hp-warranty__card {
    padding: 24px 20px;
    border-radius: 16px;
  }
  .hp-warranty__icon {
    width: 44px;
    height: 44px;
    margin-bottom: 18px;
    font-size: 15px;
  }
  .hp-warranty__card-title {
    font-size: 20px;
    margin-bottom: 14px;
  }
  .hp-warranty__text {
    font-size: 15px;
    line-height: 1.7;
  }
  /* Экипировка */
  .mc-gear__grid {
    grid-template-columns: 1fr;
  }
  .mc-gear__title {
    font-size: 28px;
  }
  .mc-gear__header {
    margin-bottom: 40px;
  }
  /* О бренде */
  .hp-brand {
    padding: 60px 16px;
  }
  .hp-brand__hero {
    gap: 28px;
    margin-bottom: 42px;
  }
  .hp-brand__title {
    font-size: 38px;
  }
  .hp-brand__lead {
    font-size: 17px;
    line-height: 1.7;
  }
  .hp-brand__grid {
    gap: 20px;
    margin-bottom: 42px;
  }
  .hp-brand__card,
  .hp-brand__global {
    padding: 24px 20px;
    border-radius: var(--radius-md);
  }
  .hp-brand__card-title {
    font-size: 26px;
  }
  .hp-brand__global-title {
    font-size: 30px;
  }
  .hp-brand__text,
  .hp-brand__global-text,
  .hp-brand__timeline-text {
    font-size: 15px;
    line-height: 1.8;
  }
  .hp-brand__stat {
    padding: 22px;
  }
  .hp-brand__stat-number {
    font-size: 32px;
  }
  /* Контакты */
  .hp-contacts {
    padding: 60px 16px;
  }
  .hp-contacts__header {
    margin-bottom: 42px;
  }
  .hp-contacts__title {
    font-size: 38px;
  }
  .hp-contacts__lead {
    font-size: 17px;
    line-height: 1.7;
  }
  .hp-contacts__card,
  .hp-contacts__socials-wrapper {
    padding: 24px 20px;
    border-radius: var(--radius-md);
  }
  .hp-contacts__socials-title {
    font-size: 26px;
  }
  .hp-contacts__social {
    padding: 16px;
  }
  .hp-contacts__social-name {
    font-size: 18px;
  }
  .hp-contacts__map-title {
    font-size: 24px;
  }
  .hp-contacts__map-overlay {
    padding: 24px;
  }
  .hp-contacts__phone-number {
    font-size: 16px;
  }
  .hp-contacts__operator-wrap {
    width: 68px;
    height: 34px;
  }
}
/* Корректировка отступа главного экрана под высоту фиксированной шапки */
.hp-moto-hero {
  padding-top: 74px;
}
@media (max-width: 1024px) {
  .hp-moto-hero {
    padding-top: 66px;
  }
}
@media (max-width: 640px) {
  .hp-moto-hero {
    padding-top: 60px;
  }
}

/* ============================================
   POPUP: Калькулятор платежа
   ============================================ */
.hp-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all 0.3s ease;
}

.hp-popup.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.hp-popup__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
}

.hp-popup__content {
  position: relative;
  z-index: 1;
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  background: #ffffff;
  border-radius: 24px;
  padding: 48px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  margin: 20px;
}

.hp-popup__close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.05);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.25s ease;
  color: var(--text-main);
}

.hp-popup__close:hover {
  background: rgba(0, 0, 0, 0.1);
  transform: rotate(90deg);
}

.hp-popup__title {
  font-size: 32px;
  font-weight: 700;
  margin: 0 0 12px;
  color: var(--text-main);
}

.hp-popup__subtitle {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0 0 32px;
}

/* Форма калькулятора */
.hp-calc-form__field {
  margin-bottom: 24px;
}

.hp-calc-form__label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main);
}

.hp-calc-form__input,
.hp-calc-form__select {
  width: 100%;
  padding: 14px 16px;
  font-size: 15px;
  border: 2px solid rgba(15, 23, 42, 0.1);
  border-radius: 8px;
  transition: all 0.25s ease;
  background: #ffffff;
  color: var(--text-main);
  font-family: inherit;
}

.hp-calc-form__input:focus,
.hp-calc-form__select:focus {
  outline: none;
  border-color: var(--qj-red);
  box-shadow: 0 0 0 4px rgba(255, 43, 69, 0.1);
}

.hp-calc-form__submit {
  width: 100%;
  padding: 16px 32px;
  background: var(--qj-red);
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-bottom: 16px;
}

.hp-calc-form__submit:hover {
  background: var(--qj-dark-red);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255, 43, 69, 0.35);
}

.hp-calc-form__note {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary);
  text-align: center;
  margin: 0;
}

.hp-calc-form__note a {
  color: var(--qj-red);
  text-decoration: underline;
}

/* Адаптив */
@media (max-width: 640px) {
  .hp-popup__content {
    padding: 32px 24px;
    margin: 16px;
    border-radius: 16px;
  }
  
  .hp-popup__title {
    font-size: 24px;
  }
  
  .hp-popup__subtitle {
    font-size: 15px;
  }
}  
/* ==================== MODEL PAGE ==================== */
.hp-model-page {
  padding: 80px 0 60px !important;
  background: #fff !important;
  width: 100% !important;
  min-height: auto !important;
  margin: 0 !important;
}

.hp-model-page * {
  box-sizing: border-box !important;
}

.hp-model-page__container {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
  width: 100% !important;
}

/* Хлебные крошки */
.hp-model-page__breadcrumbs {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 30px !important;
  font-size: 14px !important;
  color: #666 !important;
}

.hp-model-page__breadcrumbs a {
  color: #666 !important;
  text-decoration: none !important;
  transition: color 0.2s !important;
}

.hp-model-page__breadcrumbs a:hover {
  color: #ff2b45 !important;
}

/* Hero секция */
.hp-model-page__hero {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 60px !important;
  margin-bottom: 60px !important;
  width: 100% !important;
}

/* Галерея */
.hp-model-page__gallery {
  display: flex !important;
  flex-direction: column !important;
  gap: 15px !important;
  width: 100% !important;
}

.hp-model-gallery__main {
  width: 100% !important;
  height: 500px !important;
  background: #f8f8f8 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.hp-model-gallery__main img {
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  display: block !important;
}

.hp-model-gallery__thumbs {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)) !important;
  gap: 10px !important;
}

.hp-model-gallery__thumb {
  height: 100px !important;
  background: #f8f8f8 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  cursor: pointer !important;
  border: 2px solid transparent !important;
  transition: border-color 0.2s !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.hp-model-gallery__thumb:hover,
.hp-model-gallery__thumb.active {
  border-color: #ff2b45 !important;
}

.hp-model-gallery__thumb img {
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}

/* Информация о модели */
.hp-model-page__info {
  display: flex !important;
  flex-direction: column !important;
}

.hp-model-page__category {
  display: inline-block !important;
  padding: 6px 16px !important;
  background: #f0f0f0 !important;
  color: #ff2b45 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  border-radius: 20px !important;
  align-self: flex-start !important;
  margin: 0 0 15px 0 !important;
  line-height: 1.2 !important;
}

.hp-model-page__title {
  font-size: 36px !important;
  font-weight: 700 !important;
  margin: 0 0 15px 0 !important;
  line-height: 1.2 !important;
  color: #1a1a1a !important;
}

.hp-model-page__price {
  font-size: 32px !important;
  font-weight: 700 !important;
  color: #ff2b45 !important;
  margin: 0 0 20px 0 !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
}

.hp-model-page__description {
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: #666 !important;
  margin: 0 0 25px 0 !important;
}

/* Выбор цвета */
.hp-model-page__colors {
  margin: 0 0 30px 0 !important;
}

.hp-model-page__colors-label {
  display: block !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  margin: 0 0 10px 0 !important;
  color: #333 !important;
}

.hp-model-page__colors-list {
  display: flex !important;
  gap: 12px !important;
}

.hp-model-page__color {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  border: 3px solid transparent !important;
  transition: all 0.2s !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
}

.hp-model-page__color:hover,
.hp-model-page__color.active {
  border-color: #ff2b45 !important;
  transform: scale(1.1) !important;
}

/* Кнопки действий */
.hp-model-page__actions {
  display: flex !important;
  gap: 15px !important;
  margin: 0 0 30px 0 !important;
}

.hp-model-page__btn {
  padding: 16px 32px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  text-align: center !important;
  transition: all 0.3s !important;
  white-space: nowrap !important;
  display: inline-block !important;
}

.hp-model-page__btn--primary {
  background: #ff2b45 !important;
  color: #fff !important;
  border: none !important;
}

.hp-model-page__btn--primary:hover {
  background: #d6001c !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(255, 43, 69, 0.3) !important;
}

.hp-model-page__btn--secondary {
  background: transparent !important;
  color: #ff2b45 !important;
  border: 2px solid #ff2b45 !important;
}

.hp-model-page__btn--secondary:hover {
  background: #ff2b45 !important;
  color: #fff !important;
}

/* Особенности */
.hp-model-page__features {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}

.hp-model-page__feature {
  display: flex !important;
  align-items: center !important;
}

.hp-model-page__feature-text {
  font-size: 14px !important;
  color: #333 !important;
  font-weight: 500 !important;
}

/* Секция характеристик */
.hp-model-page__specs {
  margin: 0 0 60px 0 !important;
}

.hp-model-page__section-title {
  font-size: 32px !important;
  font-weight: 700 !important;
  margin: 0 0 30px 0 !important;
  color: #1a1a1a !important;
}

.hp-model-specs__tabs {
  display: flex !important;
  gap: 10px !important;
  margin: 0 0 30px 0 !important;
  border-bottom: 2px solid #eee !important;
}

.hp-model-specs__tab {
  padding: 12px 24px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  background: transparent !important;
  border: none !important;
  color: #666 !important;
  cursor: pointer !important;
  border-bottom: 3px solid transparent !important;
  margin: 0 0 -2px 0 !important;
  transition: all 0.2s !important;
}

.hp-model-specs__tab:hover,
.hp-model-specs__tab.active {
  color: #ff2b45 !important;
  border-bottom-color: #ff2b45 !important;
}

.hp-model-specs__content {
  display: none !important;
}

.hp-model-specs__content.active {
  display: block !important;
}

.hp-model-specs__table {
  background: #f8f8f8 !important;
  border-radius: 8px !important;
  padding: 10px !important;
}

.hp-model-specs__row {
  display: flex !important;
  justify-content: space-between !important;
  padding: 15px 20px !important;
  background: #fff !important;
  margin: 0 0 2px 0 !important;
  border-radius: 6px !important;
}

.hp-model-specs__row:last-child {
  margin-bottom: 0 !important;
}

.hp-model-specs__label {
  font-weight: 600 !important;
  color: #333 !important;
}

.hp-model-specs__value {
  color: #666 !important;
  text-align: right !important;
}

/* CTA секция */
.hp-model-page__cta {
  text-align: center !important;
  padding: 60px 40px !important;
  background: linear-gradient(135deg, #ff2b45 0%, #d6001c 100%) !important;
  border-radius: 16px !important;
  color: #fff !important;
}

.hp-model-page__cta-title {
  font-size: 32px !important;
  font-weight: 700 !important;
  margin: 0 0 15px 0 !important;
  color: #fff !important;
}

.hp-model-page__cta-text {
  font-size: 18px !important;
  margin: 0 0 30px 0 !important;
  opacity: 0.95 !important;
  color: #fff !important;
}

.hp-model-page__cta-btn {
  display: inline-block !important;
  padding: 16px 40px !important;
  background: #fff !important;
  color: #ff2b45 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  transition: all 0.3s !important;
}

.hp-model-page__cta-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,0.2) !important;
}

/* ========== АДАПТИВ ========== */

@media (max-width: 1024px) {
  .hp-model-page__hero {
    gap: 40px !important;
  }
  
  .hp-model-page__title {
    font-size: 28px !important;
  }
  
  .hp-model-page__price {
    font-size: 26px !important;
  }
}

@media (max-width: 768px) {
  .hp-model-page__hero {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }
  
  .hp-model-gallery__main {
    height: 350px !important;
  }
  
  .hp-model-page__actions {
    flex-direction: column !important;
  }
  
  .hp-model-page__btn {
    width: 100% !important;
  }
  
  .hp-model-page__features {
    grid-template-columns: 1fr !important;
  }
  
  .hp-model-specs__tabs {
    overflow-x: auto !important;
  }
  
  .hp-model-specs__tab {
    white-space: nowrap !important;
  }
  
  .hp-model-specs__row {
    flex-direction: column !important;
    gap: 8px !important;
  }
  
  .hp-model-specs__value {
    text-align: left !important;
  }
}

@media (max-width: 640px) {
  .hp-model-page {
    padding: 60px 0 40px !important;
  }
  
  .hp-model-page__title {
    font-size: 24px !important;
  }
  
  .hp-model-page__price {
    font-size: 22px !important;
  }
  
  .hp-model-page__section-title {
    font-size: 24px !important;
  }
  
  .hp-model-page__cta {
    padding: 40px 20px !important;
  }
  
  .hp-model-page__cta-title {
    font-size: 24px !important;
  }
  
  .hp-model-page__cta-text {
    font-size: 16px !important;
  }
}

/* ============================================
   БЛОК: SHOWCASE SLIDER (горизонтальный)
   ============================================ */
.hp-showcase-slider {
  --slider-bg: #ffffff;
  --slider-card-bg: #ffffff;
  --slider-text: var(--text-main, #1a1a1a);
  --slider-text-soft: var(--text-secondary, #666);
  --slider-accent: var(--qj-red, #ff2b45);
  --slider-border: var(--border-light, rgba(0,0,0,0.08));
  
  background: var(--slider-bg);
  padding: 90px 0;
  font-family: Arial, sans-serif;
  color: var(--slider-text);
  overflow: hidden; /* только здесь, не в wrapper */
}

.hp-showcase-slider__container {
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 40px;
}

/* === ЗАГОЛОВОК === */
.hp-showcase-slider__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 50px;
  gap: 40px;
}

.hp-showcase-slider__header-content {
  flex: 1;
}

.hp-showcase-slider__subtitle {
  display: inline-block;
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--slider-accent);
}

.hp-showcase-slider__title {
  font-size: 48px;
  line-height: 1.1;
  font-weight: 700;
  margin: 0;
  color: var(--slider-text);
}

/* === КНОПКА ТЕСТ-ДРАЙВА (справа от заголовка) === */
.hp-showcase-slider__test-drive-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  background: transparent;
  border: 2px solid var(--slider-accent);
  color: var(--slider-accent) !important;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 8px;
  transition: all 0.3s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.hp-showcase-slider__test-drive-btn:hover {
  background: var(--slider-accent);
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 43, 69, 0.3);
}

.hp-showcase-slider__test-drive-btn svg {
  flex-shrink: 0;
}

/* === ТРЕК СЛАЙДЕРА === */
.hp-showcase-slider__track-wrapper {
  overflow: visible !important; /* ВАЖНО: не обрезаем */
  margin: 0 -40px; /* компенсируем padding контейнера */
  padding: 20px 40px 30px; /* отступы для тени и hover-эффекта */
  margin-bottom: 20px;
}

.hp-showcase-slider__track {
  display: flex;
  gap: 24px;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

/* === КАРТОЧКА === */
.hp-showcase-slider__card {
  flex: 0 0 320px;
  width: 320px;
  min-width: 320px; /* ВАЖНО */
  max-width: 320px;
  background: var(--slider-card-bg);
  border: 1px solid var(--slider-border);
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
}

.hp-showcase-slider__card:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.15);
  border-color: var(--slider-accent);
}

/* Изображение */
.hp-showcase-slider__image {
  position: relative;
  width: 100%;
  height: 220px;
  background: linear-gradient(135deg, #f8fafc 0%, #f0f0f0 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow: hidden;
}

.hp-showcase-slider__image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform 0.4s ease;
}

.hp-showcase-slider__card:hover .hp-showcase-slider__image img {
  transform: scale(1.08);
}

/* Бейдж */
.hp-showcase-slider__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 6px 12px;
  background: var(--slider-accent);
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 16px;
  z-index: 2;
}

.hp-showcase-slider__badge--new {
  background: #10b981;
}

/* Контент */
.hp-showcase-slider__content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.hp-showcase-slider__category {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--slider-text-soft);
  margin-bottom: 8px;
  display: block;
}

.hp-showcase-slider__name {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 12px;
  line-height: 1.3;
  color: var(--slider-text);
  min-height: 48px;
}

.hp-showcase-slider__price {
  font-size: 22px;
  font-weight: 700;
  color: var(--slider-accent);
  margin-bottom: 14px;
  white-space: nowrap;
}

/* Кружочки цветов */
.hp-showcase-slider__colors {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  min-height: 22px;
}

.hp-showcase-slider__color {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.hp-showcase-slider__color:hover {
  transform: scale(1.15);
}

/* Кнопка "Подробнее" */
.hp-showcase-slider__btn {
  width: 100% !important;
  padding: 14px 20px !important;
  background: transparent !important;
  color: var(--slider-text) !important;
  border: 2px solid var(--slider-border) !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  text-decoration: none !important;
  text-align: center !important;
  transition: all 0.3s ease !important;
  margin-top: auto !important;
  display: block !important;
  box-sizing: border-box !important;
}

.hp-showcase-slider__btn:hover {
  background: var(--slider-accent) !important;
  border-color: var(--slider-accent) !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(255, 43, 69, 0.25) !important;
}

/* === СТРЕЛКИ НАВИГАЦИИ (под слайдером) === */
.hp-showcase-slider__nav {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 50px;
}

.hp-showcase-slider__arrow {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--slider-card-bg);
  border: 2px solid var(--slider-border);
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
  color: var(--slider-text);
}

.hp-showcase-slider__arrow:hover:not(:disabled) {
  background: var(--slider-accent);
  border-color: var(--slider-accent);
  color: #ffffff;
  transform: scale(1.05);
}

.hp-showcase-slider__arrow:disabled {
  cursor: not-allowed;
  opacity: 0.3;
}

/* === ФУТЕР: Кнопка каталога === */
.hp-showcase-slider__footer {
  text-align: center;
}

.hp-showcase-slider__catalog-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 18px 48px;
  background: var(--slider-accent);
  color: #ffffff !important;
  text-decoration: none;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 8px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 16px rgba(255, 43, 69, 0.2);
}

.hp-showcase-slider__catalog-btn:hover {
  background: var(--qj-dark-red, #d6001c);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255, 43, 69, 0.35);
}

.hp-showcase-slider__catalog-btn svg {
  transition: transform 0.3s ease;
}

.hp-showcase-slider__catalog-btn:hover svg {
  transform: translateX(4px);
}

/* === АДАПТИВ === */

@media (max-width: 1400px) {
  .hp-showcase-slider__card {
    flex: 0 0 300px;
    width: 300px;
    min-width: 300px;
    max-width: 300px;
  }
}

@media (max-width: 1024px) {
  .hp-showcase-slider {
    padding: 70px 0;
  }
  
  .hp-showcase-slider__container {
    padding: 0 24px;
  }
  
  .hp-showcase-slider__track-wrapper {
    margin: 0 -24px;
    padding: 20px 24px 30px;
  }
  
  .hp-showcase-slider__header {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 40px;
    gap: 24px;
  }
  
  .hp-showcase-slider__title {
    font-size: 38px;
  }
  
  .hp-showcase-slider__test-drive-btn {
    align-self: flex-start;
  }
  
  .hp-showcase-slider__card {
    flex: 0 0 280px;
    width: 280px;
    min-width: 280px;
    max-width: 280px;
  }
}

@media (max-width: 768px) {
  .hp-showcase-slider__container {
    padding: 0 16px;
  }
  
  .hp-showcase-slider__track-wrapper {
    margin: 0 -16px;
    padding: 20px 16px 30px;
  }
  
  .hp-showcase-slider__title {
    font-size: 32px;
  }
  
  .hp-showcase-slider__test-drive-btn {
    width: 100%;
    justify-content: center;
  }
  
  .hp-showcase-slider__arrow {
    width: 44px;
    height: 44px;
  }
  
  .hp-showcase-slider__card {
    flex: 0 0 260px;
    width: 260px;
    min-width: 260px;
    max-width: 260px;
  }
  
  .hp-showcase-slider__image {
    height: 180px;
  }
  
  .hp-showcase-slider__name {
    font-size: 16px;
    min-height: 42px;
  }
  
  .hp-showcase-slider__price {
    font-size: 20px;
  }
}

@media (max-width: 640px) {
  .hp-showcase-slider {
    padding: 60px 0;
  }
  
  .hp-showcase-slider__title {
    font-size: 26px;
  }
  
  .hp-showcase-slider__test-drive-btn {
    padding: 12px 20px;
    font-size: 12px;
  }
  
  .hp-showcase-slider__nav {
    gap: 8px;
    margin-bottom: 40px;
  }
  
  .hp-showcase-slider__arrow {
    width: 40px;
    height: 40px;
  }
  
  .hp-showcase-slider__card {
    flex: 0 0 240px;
    width: 240px;
    min-width: 240px;
    max-width: 240px;
  }
  
  .hp-showcase-slider__catalog-btn {
    width: 100%;
    padding: 16px 32px;
    font-size: 14px;
  }
}
/* ============================================
   СТРАНИЦА КАТАЛОГА
   ============================================ */
.hp-catalog {
  --catalog-bg: #ffffff;
  --catalog-text: var(--text-main, #1a1a1a);
  --catalog-text-soft: var(--text-secondary, #666);
  --catalog-accent: var(--qj-red, #ff2b45);
  --catalog-border: var(--border-light, rgba(0,0,0,0.08));
  
  background: var(--catalog-bg);
  padding: 120px 0 90px;
  min-height: 100vh;
}

.hp-catalog__container {
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 40px;
}

/* === ЗАГОЛОВОК === */
.hp-catalog__header {
  margin-bottom: 50px;
}

.hp-catalog__breadcrumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  font-size: 14px;
  color: var(--catalog-text-soft);
}

.hp-catalog__breadcrumbs a {
  color: var(--catalog-text-soft);
  text-decoration: none;
  transition: color 0.2s;
}

.hp-catalog__breadcrumbs a:hover {
  color: var(--catalog-accent);
}

.hp-catalog__title {
  font-size: 52px;
  font-weight: 700;
  margin: 0 0 16px;
  line-height: 1.1;
  color: var(--catalog-text);
}

.hp-catalog__lead {
  font-size: 20px;
  line-height: 1.6;
  color: var(--catalog-text-soft);
  margin: 0;
}

/* === ФИЛЬТРЫ === */
.hp-catalog__filters {
  background: #f8fafc;
  border: 1px solid var(--catalog-border);
  border-radius: 16px;
  padding: 32px;
  margin-bottom: 50px;
  overflow: visible !important; /* Важно */
}

.hp-catalog__filter-group {
  margin-bottom: 32px;
}

/* Заголовок с кнопкой */
.hp-catalog__filter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 20px;
}

.hp-catalog__filter-title {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  color: var(--catalog-text);
}

/* Кнопка тест-драйва */
.hp-catalog__test-drive-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: transparent;
  border: 2px solid var(--catalog-accent);
  color: var(--catalog-accent) !important;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 8px;
  transition: all 0.3s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.hp-catalog__test-drive-btn:hover {
  background: var(--catalog-accent);
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 43, 69, 0.3);
}

.hp-catalog__test-drive-btn svg {
  flex-shrink: 0;
}

.hp-catalog__filter-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hp-catalog__filter-btn {
  padding: 10px 24px;
  background: #ffffff;
  border: 2px solid var(--catalog-border);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--catalog-text);
  cursor: pointer;
  transition: all 0.25s ease;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.hp-catalog__filter-btn:hover {
  border-color: var(--catalog-accent);
  color: var(--catalog-accent);
}

.hp-catalog__filter-btn.active {
  background: var(--catalog-accent);
  border-color: var(--catalog-accent);
  color: #ffffff;
}

/* Дополнительные фильтры */
.hp-catalog__advanced-filters {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--catalog-border);
  margin-bottom: 24px;
}

.hp-catalog__filter-col {
  display: flex;
  flex-direction: column;
  min-width: 0; /* Важно для предотвращения переполнения */
}

.hp-catalog__filter-subtitle {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--catalog-text);
  margin: 0 0 16px;
}

.hp-catalog__filter-checkboxes {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hp-catalog__checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  min-width: 0; /* Важно */
}

.hp-catalog__checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: var(--catalog-accent);
}

.hp-catalog__checkbox span {
  font-size: 14px;
  color: var(--catalog-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hp-catalog__sort-select {
  width: 100%;
  padding: 12px 16px;
  font-size: 14px;
  border: 2px solid var(--catalog-border);
  border-radius: 8px;
  background: #ffffff;
  color: var(--catalog-text);
  cursor: pointer;
  transition: border-color 0.25s ease;
  box-sizing: border-box !important;
}

.hp-catalog__sort-select:focus {
  outline: none;
  border-color: var(--catalog-accent);
}

/* Действия с фильтрами */
.hp-catalog__filter-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 24px;
  border-top: 1px solid var(--catalog-border);
}

.hp-catalog__reset-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: transparent;
  border: 2px solid var(--catalog-border);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--catalog-text);
  cursor: pointer;
  transition: all 0.25s ease;
}

.hp-catalog__reset-btn:hover {
  border-color: var(--catalog-accent);
  color: var(--catalog-accent);
}

.hp-catalog__results-count {
  font-size: 14px;
  font-weight: 600;
  color: var(--catalog-text-soft);
  white-space: nowrap;
}

/* === СЕТКА МОДЕЛЕЙ === */
.hp-catalog__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  margin-bottom: 60px;
  overflow: visible !important; /* Важно */
}

/* === КАРТОЧКА === */
.hp-catalog__card {
  background: #ffffff;
  border: 1px solid var(--catalog-border);
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.hp-catalog__card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
  border-color: var(--catalog-accent);
}

.hp-catalog__card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.hp-catalog__card-image {
  position: relative;
  width: 100%;
  height: 220px;
  background: linear-gradient(135deg, #f8fafc 0%, #f0f0f0 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow: hidden;
}

.hp-catalog__card-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform 0.4s ease;
}

.hp-catalog__card:hover .hp-catalog__card-image img {
  transform: scale(1.08);
}

.hp-catalog__card-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 6px 12px;
  background: var(--catalog-accent);
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 16px;
  z-index: 2;
}

.hp-catalog__card-badge--new {
  background: #10b981;
}

.hp-catalog__card-content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
  box-sizing: border-box !important;
}

.hp-catalog__card-category {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--catalog-text-soft);
  margin-bottom: 8px;
  display: block;
}

.hp-catalog__card-title {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 12px;
  line-height: 1.3;
  color: var(--catalog-text);
  min-height: 48px;
}

.hp-catalog__card-price {
  font-size: 22px;
  font-weight: 700;
  color: var(--catalog-accent);
  margin-bottom: 14px;
  white-space: nowrap;
}

.hp-catalog__card-colors {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  min-height: 22px;
  flex-wrap: wrap;
}

.hp-catalog__card-color {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
}

.hp-catalog__card-btn {
  width: 100% !important;
  padding: 14px 20px !important;
  background: transparent !important;
  color: var(--catalog-text) !important;
  border: 2px solid var(--catalog-border) !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  text-align: center !important;
  transition: all 0.3s ease !important;
  margin-top: auto !important;
  display: block !important;
  box-sizing: border-box !important;
}

.hp-catalog__card:hover .hp-catalog__card-btn {
  background: var(--catalog-accent) !important;
  border-color: var(--catalog-accent) !important;
  color: #ffffff !important;
}

/* === ПУСТОЕ СОСТОЯНИЕ === */
.hp-catalog__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  text-align: center;
}

.hp-catalog__empty svg {
  margin-bottom: 24px;
}

.hp-catalog__empty h3 {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 12px;
  color: var(--catalog-text);
}

.hp-catalog__empty p {
  font-size: 16px;
  color: var(--catalog-text-soft);
  margin: 0 0 28px;
}

/* === АДАПТИВ === */

@media (max-width: 1400px) {
  .hp-catalog__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 1024px) {
  .hp-catalog {
    padding: 100px 0 70px;
  }
  
  .hp-catalog__container {
    padding: 0 24px;
  }
  
  .hp-catalog__title {
    font-size: 42px;
  }
  
  .hp-catalog__filter-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  
  .hp-catalog__test-drive-btn {
    width: 100%;
    justify-content: center;
  }
  
  .hp-catalog__advanced-filters {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
  
  .hp-catalog__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}

@media (max-width: 768px) {
  .hp-catalog__title {
    font-size: 32px;
  }
  
  .hp-catalog__lead {
    font-size: 16px;
  }
  
  .hp-catalog__filters {
    padding: 24px;
  }
  
  .hp-catalog__advanced-filters {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .hp-catalog__filter-actions {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .hp-catalog__grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

@media (max-width: 640px) {
  .hp-catalog {
    padding: 80px 0 60px;
  }
  
  .hp-catalog__container {
    padding: 0 16px;
  }
  
  .hp-catalog__title {
    font-size: 26px;
  }
  
  .hp-catalog__filters {
    padding: 20px;
  }
  
  .hp-catalog__test-drive-btn {
    font-size: 11px;
    padding: 8px 16px;
  }
  
  .hp-catalog__reset-btn {
    width: 100%;
    justify-content: center;
  }
  
  .hp-catalog__results-count {
    width: 100%;
    text-align: center;
  }
}
/* ============================================
   КАЛЬКУЛЯТОР В БЛОКЕ ФИНАНСИРОВАНИЯ
   ============================================ */

/* Кнопка открытия калькулятора */
.hp-finance__calc-toggle {
  text-align: center;
  margin: 50px 0 0;
}

.hp-finance__calc-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 40px;
  background: var(--qj-red);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all 0.3s ease;
}

.hp-finance__calc-btn:hover {
  background: var(--qj-dark-red);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255, 43, 69, 0.35);
}

.hp-finance__calc-arrow {
  transition: transform 0.3s ease;
}

/* Контейнер калькулятора */
.hp-finance__calculator {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: all 0.4s ease;
  margin-top: 0;
}

.hp-finance__calculator.is-open {
  max-height: 1200px;
  opacity: 1;
  margin-top: 40px;
}

.hp-calc {
  background: #ffffff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 40px;
  box-shadow: var(--shadow-lg);
}

/* Поля калькулятора */
.hp-calc__field {
  margin-bottom: 32px;
}

.hp-calc__label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-main);
}

.hp-calc__value {
  color: var(--qj-red);
  font-weight: 700;
}

/* Кнопки программ */
.hp-calc__programs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.hp-calc__program-btn {
  padding: 14px 20px;
  background: #f8fafc;
  border: 2px solid var(--border-light);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main);
  cursor: pointer;
  transition: all 0.25s ease;
}

.hp-calc__program-btn:hover {
  border-color: var(--qj-red);
  background: #fff1f2;
}

.hp-calc__program-btn.active {
  background: var(--qj-red);
  border-color: var(--qj-red);
  color: #ffffff;
}

/* Ползунки */
.hp-calc__slider {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(to right, var(--qj-red) 0%, #f8fafc 0%);
  outline: none;
  -webkit-appearance: none;
  margin: 12px 0;
}

.hp-calc__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--qj-red);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(255, 43, 69, 0.4);
  transition: all 0.2s ease;
}

.hp-calc__slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  box-shadow: 0 4px 12px rgba(255, 43, 69, 0.5);
}

.hp-calc__slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--qj-red);
  cursor: pointer;
  border: none;
  box-shadow: 0 2px 8px rgba(255, 43, 69, 0.4);
}

.hp-calc__range-labels {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 8px;
}

/* Кнопки срока */
.hp-calc__terms {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.hp-calc__term-btn {
  padding: 12px;
  background: #f8fafc;
  border: 2px solid var(--border-light);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-main);
  cursor: pointer;
  transition: all 0.25s ease;
}

.hp-calc__term-btn:hover {
  border-color: var(--qj-red);
  background: #fff1f2;
}

.hp-calc__term-btn.active {
  background: var(--qj-red);
  border-color: var(--qj-red);
  color: #ffffff;
}

/* Результат */
.hp-calc__result {
  background: linear-gradient(135deg, #fff7f7 0%, #ffffff 100%);
  border: 2px solid var(--qj-red);
  border-radius: var(--radius-md);
  padding: 28px;
  margin: 32px 0;
}

.hp-calc__result-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.hp-calc__result-row:last-of-type {
  border-bottom: none;
}

.hp-calc__result-row--main {
  padding-top: 20px;
}

.hp-calc__result-label {
  font-size: 15px;
  color: var(--text-secondary);
}

.hp-calc__result-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-main);
}

.hp-calc__result-value--big {
  font-size: 32px;
  color: var(--qj-red);
}

.hp-calc__result-note {
  margin: 16px 0 0;
  font-size: 13px;
  color: var(--text-secondary);
  font-style: italic;
}

/* CTA внутри калькулятора */
.hp-calc__cta {
  text-align: center;
  padding-top: 8px;
}

.hp-calc__cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 48px;
  background: var(--qj-red);
  color: #ffffff !important;
  text-decoration: none;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.hp-calc__cta-btn:hover {
  background: var(--qj-dark-red);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255, 43, 69, 0.35);
}

.hp-calc__cta-note {
  display: block;
  margin-top: 12px;
  font-size: 14px;
  color: var(--text-secondary);
}

/* Адаптив для калькулятора */
@media (max-width: 1024px) {
  .hp-calc__programs {
    grid-template-columns: 1fr;
  }
  
  .hp-calc__terms {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 640px) {
  .hp-calc {
    padding: 24px 20px;
  }
  
  .hp-calc__field {
    margin-bottom: 28px;
  }
  
  .hp-calc__label {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .hp-calc__terms {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .hp-calc__result {
    padding: 20px;
  }
  
  .hp-calc__result-value--big {
    font-size: 26px;
  }
  
  .hp-calc__cta-btn {
    width: 100%;
    justify-content: center;
  }
  
  .hp-finance__calc-btn {
    width: 100%;
    justify-content: center;
  }
}
/* ============================================
   БЛОК TRADE-IN
   ============================================ */
.hp-tradein {
  background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
  padding: 90px 20px;
}

.hp-tradein__container {
  max-width: 1200px;
  margin: 0 auto;
}

/* Заголовок */
.hp-tradein__header {
  text-align: center;
  margin-bottom: 50px;
}

.hp-tradein__label {
  display: inline-block;
  margin-bottom: 16px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--qj-red);
}

.hp-tradein__title {
  font-size: 52px;
  line-height: 1.1;
  font-weight: 700;
  margin: 0 0 20px;
  color: var(--text-main);
}

.hp-tradein__lead {
  font-size: 20px;
  line-height: 1.7;
  color: var(--text-secondary);
  max-width: 700px;
  margin: 0 auto;
}

/* Вводный текст */
.hp-tradein__intro {
  background: #ffffff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 32px;
  margin-bottom: 32px;
  box-shadow: var(--shadow-sm);
}

.hp-tradein__intro p {
  margin: 0 0 16px;
  font-size: 17px;
  line-height: 1.8;
  color: var(--text-secondary);
}

.hp-tradein__intro p:last-child {
  margin-bottom: 0;
}

/* Табы */
.hp-tradein__tabs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}

.hp-tradein__tab {
  padding: 16px 24px;
  background: #ffffff;
  border: 2px solid var(--border-light);
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-main);
  cursor: pointer;
  transition: all 0.3s ease;
}

.hp-tradein__tab:hover {
  border-color: var(--qj-red);
  background: #fff1f2;
}

.hp-tradein__tab.active {
  background: var(--qj-red);
  border-color: var(--qj-red);
  color: #ffffff;
}

/* Панели табов */
.hp-tradein__panel {
  display: none;
}

.hp-tradein__panel.active {
  display: block;
  animation: fadeIn 0.4s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Таб 1: О программе + CTA */
.hp-tradein__info-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 32px;
}

.hp-tradein__info {
  background: #ffffff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 32px;
}

.hp-tradein__info-title {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 16px;
  color: var(--text-main);
}

.hp-tradein__info p {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-secondary);
}

.hp-tradein__process {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--border-light);
}

.hp-tradein__process h4 {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 16px;
  color: var(--text-main);
}

.hp-tradein__process ul {
  margin: 0;
  padding: 0 0 0 20px;
  list-style: none;
}

.hp-tradein__process li {
  position: relative;
  padding-left: 8px;
  margin-bottom: 12px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.hp-tradein__process li:before {
  content: '✓';
  position: absolute;
  left: -16px;
  color: var(--qj-red);
  font-weight: 700;
}

/* CTA карточка */
.hp-tradein__cta-card {
  background: linear-gradient(135deg, #fff7f7 0%, #ffffff 100%);
  border: 2px solid var(--qj-red);
  border-radius: var(--radius-lg);
  padding: 40px 32px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.hp-tradein__cta-icon {
  margin-bottom: 24px;
}

.hp-tradein__cta-title {
  font-size: 26px;
  font-weight: 700;
  margin: 0 0 16px;
  color: var(--text-main);
}

.hp-tradein__cta-text {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0 0 28px;
}

.hp-tradein__cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 40px;
  background: var(--qj-red);
  color: #ffffff !important;
  text-decoration: none;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.hp-tradein__cta-btn:hover {
  background: var(--qj-dark-red);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255, 43, 69, 0.35);
}

/* Таб 2: Как работает */
.hp-tradein__steps {
  background: #ffffff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 40px;
}

.hp-tradein__step {
  display: flex;
  gap: 24px;
  margin-bottom: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--border-light);
}

.hp-tradein__step:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.hp-tradein__step-number {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 100%);
  color: var(--qj-red);
  font-size: 24px;
  font-weight: 700;
  border-radius: 50%;
}

.hp-tradein__step-content {
  flex: 1;
}

.hp-tradein__step-title {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 12px;
  color: var(--text-main);
}

.hp-tradein__step-text {
  margin: 0 0 12px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-secondary);
}

.hp-tradein__step-link {
  display: inline-flex;
  align-items: center;
  color: var(--qj-red);
  font-weight: 600;
  text-decoration: none;
  transition: gap 0.2s ease;
}

.hp-tradein__step-link:hover {
  gap: 8px;
}

/* CTA в табе 2 */
.hp-tradein__cta {
  text-align: center;
  margin-top: 32px;
}

.hp-tradein__cta-btn-alt {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 48px;
  background: var(--qj-red);
  color: #ffffff !important;
  text-decoration: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: all 0.3s ease;
}

.hp-tradein__cta-btn-alt:hover {
  background: var(--qj-dark-red);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255, 43, 69, 0.35);
}

/* Адаптив */
@media (max-width: 1024px) {
  .hp-tradein__info-grid {
    grid-template-columns: 1fr;
  }
  
  .hp-tradein__title {
    font-size: 42px;
  }
}

@media (max-width: 640px) {
  .hp-tradein {
    padding: 60px 16px;
  }
  
  .hp-tradein__title {
    font-size: 32px;
  }
  
  .hp-tradein__lead {
    font-size: 17px;
  }
  
  .hp-tradein__intro {
    padding: 24px 20px;
  }
  
  .hp-tradein__tabs {
    grid-template-columns: 1fr;
  }
  
  .hp-tradein__info,
  .hp-tradein__cta-card,
  .hp-tradein__steps {
    padding: 24px 20px;
  }
  
  .hp-tradein__step {
    flex-direction: column;
    gap: 16px;
  }
  
  .hp-tradein__step-number {
    width: 48px;
    height: 48px;
    font-size: 20px;
  }
}
/* ============================================
   ПРОМО-БЛОК TRADE-IN (главная страница)
   ============================================ */
.hp-tradein-promo {
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
  padding: 70px 20px;
  position: relative;
  overflow: hidden;
}

.hp-tradein-promo::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(255, 43, 69, 0.15) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.hp-tradein-promo__container {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.hp-tradein-promo__content {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 60px;
  align-items: center;
}

/* Левая часть: текст */
.hp-tradein-promo__label {
  display: inline-block;
  padding: 6px 16px;
  background: rgba(255, 43, 69, 0.15);
  color: var(--qj-red);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 20px;
  margin-bottom: 20px;
}

.hp-tradein-promo__title {
  font-size: 48px;
  line-height: 1.1;
  font-weight: 700;
  margin: 0 0 20px;
  color: #ffffff;
}

.hp-tradein-promo__description {
  font-size: 18px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.8);
  margin: 0 0 32px;
  max-width: 600px;
}

.hp-tradein-promo__features {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hp-tradein-promo__feature {
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 16px;
  font-weight: 600;
}

.hp-tradein-promo__feature svg {
  flex-shrink: 0;
  color: var(--qj-red);
}

/* Правая часть: CTA */
.hp-tradein-promo__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  padding: 40px 32px;
}

.hp-tradein-promo__icon {
  margin-bottom: 8px;
}

.hp-tradein-promo__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 40px;
  background: var(--qj-red);
  color: #ffffff !important;
  text-decoration: none;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 8px;
  transition: all 0.3s ease;
  width: 100%;
  justify-content: center;
}

.hp-tradein-promo__btn:hover {
  background: var(--qj-dark-red);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255, 43, 69, 0.4);
}

.hp-tradein-promo__btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 36px;
  background: transparent;
  color: #ffffff !important;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  transition: all 0.3s ease;
  width: 100%;
}

.hp-tradein-promo__btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.5);
}

/* Адаптив */
@media (max-width: 1024px) {
  .hp-tradein-promo__content {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  
  .hp-tradein-promo__title {
    font-size: 38px;
  }
  
  .hp-tradein-promo__description {
    font-size: 17px;
  }
  
  .hp-tradein-promo__cta {
    max-width: 400px;
    margin: 0 auto;
  }
}

@media (max-width: 640px) {
  .hp-tradein-promo {
    padding: 50px 16px;
  }
  
  .hp-tradein-promo__title {
    font-size: 28px;
  }
  
  .hp-tradein-promo__description {
    font-size: 16px;
    margin-bottom: 24px;
  }
  
  .hp-tradein-promo__features {
    gap: 12px;
  }
  
  .hp-tradein-promo__feature {
    font-size: 14px;
  }
  
  .hp-tradein-promo__cta {
    padding: 32px 24px;
  }
  
  .hp-tradein-promo__icon svg {
    width: 64px;
    height: 64px;
  }
  
  .hp-tradein-promo__btn,
  .hp-tradein-promo__btn-secondary {
    padding: 14px 28px;
    font-size: 13px;
  }
}