/*------------------------------------------------------- Start BETA -------------------------------------------------------*/
/* ===== BETA (scoped, premium) ===== */
/* ===== BETA panel (scoped, matches site style) ===== */
/* ===== BETA MINI (scoped, premium & compact) ===== */
.beta-mini{ --brand:#D67940; }
.beta-mini *{ box-sizing:border-box; }

.beta-mini .beta-mini__panel{
  display:flex; align-items:center; gap:10px;
  max-width:760px; margin:12px auto; padding:10px 12px;

  background:#fff;
  border:2px solid var(--brand);
  border-radius:12px;
  box-shadow:0 6px 18px rgba(0,0,0,.12);

  min-width:0; overflow:hidden;
}

/* Невеликий бренд-чип */
.beta-mini .beta-mini__chip{
  display:inline-grid; place-items:center;
  padding:4px 9px; border-radius:999px;
  color:var(--brand);
  background: rgba(214,121,64,.10);
  border:1px solid rgba(214,121,64,.35);
  font-weight:900; font-size:12px; letter-spacing:.4px; text-transform:uppercase;
  position:relative; line-height:1;
}
/* Тонкий «пульс» точки — живой, но ненавязчивый */
.beta-mini .beta-mini__chip::after{
  content:""; position:absolute; right:-6px; top:50%;
  width:6px; height:6px; border-radius:50%; background:var(--brand);
  transform:translateY(-50%); opacity:.5;
  animation:betaMiniPulse 1.6s ease-in-out infinite;
}

@keyframes betaMiniPulse{
  0%,100%{ transform:translateY(-50%) scale(.9); opacity:.4; }
  50%    { transform:translateY(-50%) scale(1.15); opacity:1; }
}

/* Текст */
.beta-mini .beta-mini__text{
  color:#2b2b2b; font-size:14px; line-height:1.35; min-width:0;
}
.beta-mini .beta-mini__text strong{ color:#1f1f1f; font-weight:800; }

/* Лінк — у бренд-стилі, без агрессии */
.beta-mini .beta-mini__link{
  color:var(--brand); font-weight:800; text-decoration:none;
  border-bottom:1px dashed currentColor; margin-left:6px;
}
.beta-mini .beta-mini__link:hover{ border-bottom-style:solid; }
.beta-mini .beta-mini__link:focus-visible{
  outline:3px solid color-mix(in oklab, var(--brand) 55%, #fff);
  outline-offset:2px; border-bottom-style:solid;
}

/* Мобільно та дрібні екрани — ще компактніше */
@media (max-width:520px){
  .beta-mini .beta-mini__panel{ padding:9px 10px; gap:8px; }
  .beta-mini .beta-mini__text{ font-size:13.5px; }
}

/* Поважаємо prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  .beta-mini .beta-mini__chip::after{ animation:none !important; }
}

/*------------------------------------------------------- End Reset -------------------------------------------------------*/
/*------------------------------------------------------- services.css -------------------------------------------------------*/
/* цвет только для .services */
.services { --brand: #D67940; }
.services * { box-sizing: border-box; }

/* Обгортка */
.services .slider-wrap {
  padding: 30px 40px;
  text-align: center;
  max-width: 1000px;
  margin: 0 auto;
  min-width: 0;
}

/* адаптив */
@media (max-width: 768px) {
  .services .slider-wrap { padding: 20px 16px; }
}

/* Swiper */
.services .service-swiper { width: 100%; overflow: hidden; }
.services .swiper-wrapper { box-sizing: content-box !important; }
.services .service-swiper .swiper-slide { padding: 0 !important; min-width: 0; }

/* Баннер (базово) */
.services .banner {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 14 / 7;
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  cursor: grab;
  user-select: none;
  background-image:
    linear-gradient(120deg, rgba(214,121,64,.82), rgba(0,0,0,.38)),
    repeating-linear-gradient(45deg, #f2f2f2 0, #f2f2f2 10px, #ececec 10px, #ececec 20px);
  background-size: cover;
  background-position: center;
  
}
.services .banner:active { cursor: grabbing; }

.services .banner h3 {
  color: #fff;
  margin: 0 12px 6px;
  font-weight: 800;
  letter-spacing: .2px;
  text-shadow: 0 2px 8px rgba(0,0,0,.35);
  font-size: clamp(18px, 3.6vw, 28px);
}
.services .banner p {
  color: #fff;
  margin: 0 12px;
  opacity: .95;
  text-shadow: 0 2px 6px rgba(0,0,0,.3);
  font-size: clamp(13px, 2.6vw, 18px);
}
.services .banner .tag {
  position: absolute; inset: 12px auto auto 12px;
  background: rgba(255,255,255,.9);
  color: var(--brand);
  padding: 6px 10px; border-radius: 999px; font-weight: 700; font-size: 12px;
}

/* Пагинация */
.services .service-pagination { position: relative; margin-top: 14px; }
.services .service-swiper .swiper-pagination-bullet {
  width: 9px; height: 9px; opacity: 1;
  background: rgba(214,121,64,.35);
}
.services .service-swiper .swiper-pagination-bullet-active { background: var(--brand); }

/* Фокус */
.services .banner:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }

/* Мобилка (как и было) */
@media (max-width: 468px) {
  .services .banner { aspect-ratio: 5 / 3; }
  .services .banner .tag { font-size: 10px; padding: 2px 4px; }
}

/* >>> ПК версия — сделать баннер немного ниже по высоте <<< */
@media (min-width: 992px) { /* desktop */
  .services .banner { aspect-ratio: 2 / 1; } /* было 16/9, стало чуть ниже */
}

/*------------------------------------------------------- End services.css -------------------------------------------------------*/

/*------------------------------------------------------- divider.css -------------------------------------------------------*/
/* ===== Divider (simple, scoped) ===== */
.drive-sep{ --brand:#D67940; padding:12px 16px; }
.drive-sep .drive-sep__wrap{
  max-width:1000px; margin:0 auto; display:flex; align-items:center; gap:12px;
}
.drive-sep .drive-sep__rule{
  flex:1 1 auto; height:1px; background:#e7e7e7;
}

.drive-sep .drive-sep__label{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:999px;
  background:#fff; color:#222; line-height:1;
  border:1px solid #e9e9e9;
  font-weight:800; letter-spacing:.2px;
  box-shadow:0 2px 6px rgba(0,0,0,.06);
  white-space:nowrap;
}
.drive-sep .drive-sep__plus{
  margin-left:6px; color:var(--brand); font-weight:900;
}

/* деликатный hover только для десктопа */
@media (hover:hover) and (pointer:fine){
  .drive-sep .drive-sep__label{
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  }
  .drive-sep .drive-sep__label:hover{
    transform: translateY(-1px);
    box-shadow:0 4px 12px rgba(0,0,0,.08);
    border-color:#e2e2e2;
  }
}

/* мобилка — компактнее */
@media (max-width:520px){
  .drive-sep{ padding:10px 12px; }
  .drive-sep .drive-sep__wrap{ gap:10px; }
  .drive-sep .drive-sep__label{ padding:7px 12px; }
}

/*------------------------------------------------------- End divider -------------------------------------------------------*/



/*------------------------------------------------------- drive.css -------------------------------------------------------*/
/* ===== DRIVE (scoped) ===== */
.drive{
  --brand:#D67940;
  --radius:16px;
  --shadow:0 10px 24px rgba(0,0,0,.16);
}
.drive *{ box-sizing:border-box; }

.drive .drive__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  max-width:1000px;
  margin:24px auto;
  padding:0 16px;
}
@media (max-width:768px){
  .drive .drive__grid{ grid-template-columns:1fr; }
}

/* Кнопка-карточка */
.drive .drive__btn{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  border-radius:var(--radius);
  overflow:hidden;
  text-decoration:none;
  min-height:260px;               /* ПК: солидная высота */
  color:#fff;
  box-shadow:var(--shadow);
  transform:translateZ(0);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  background-image:
    linear-gradient(120deg, rgba(214,121,64,.78), rgba(0,0,0,.28)),  /* бренд-оверлей */
    var(--bg);                                                      /* твоя картинка */
  background-size:cover;
  background-position:center;
}
@media (min-width:992px){ .drive .drive__btn{ aspect-ratio:21/9; min-height:auto; } }
@media (max-width:480px){ .drive .drive__btn{ aspect-ratio:4/2; min-height:auto; } }

.drive .drive__btn:hover{
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(0,0,0,.2);
  border-color: color-mix(in oklab, var(--brand) 85%, #fff);
}

/* Лёгкий «блик» на ховер */
.drive .drive__btn::after{
  content:"";
  position:absolute; inset:-20% -40% auto -40%;
  height:200%;
  background: linear-gradient(95deg, rgba(255,255,255,.25), rgba(255,255,255,0) 60%);
  transform: translateX(-60%);
  mix-blend-mode: soft-light;
  transition: transform .9s ease;
  pointer-events:none;
}
.drive .drive__btn:hover::after{ transform: translateX(40%); }

/* Тег-плашка */
.drive .drive__tag{
  position:absolute; top:14px; left:14px;
  background: rgba(255,255,255,.92);
  color: var(--brand);
  font-weight:800;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
}

/* Титры — как на примере */
.drive .drive__title{
  margin:0 20px 6px;
  font-weight:900;
  letter-spacing:.2px;
  text-shadow:0 2px 8px rgba(0,0,0,.35);
  font-size: clamp(20px, 3.2vw, 28px);
}
.drive .drive__sub{
  margin:0 20px;
  font-weight:700;
  opacity:.98;
  text-shadow:0 2px 6px rgba(0,0,0,.3);
  font-size: clamp(14px, 2.4vw, 18px);
}

/* Уважать системное “меньше анимаций” */
@media (prefers-reduced-motion: reduce){
  .drive .drive__btn,
  .drive .drive__btn::after{ transition:none !important; }
}
/*------------------------------------------------------- End drive.css -------------------------------------------------------*/




/*------------------------------------------------------- drive.css -------------------------------------------------------*/
/* ===== WHY-US (4 в ряд на всех ширинах) ===== */
/* ===== WHY ROTOR (scoped) ===== */
.why-rotor{ --brand:#D67940; }
.why-rotor *{ box-sizing:border-box; }
.why-rotor .why-rotor__sr{ position:absolute; left:-9999px; }

/* Панель на всю ширину, без бордеров */
.why-rotor{
  background: linear-gradient(90deg, rgba(214,121,64,.07), rgba(214,121,64,.03));
  padding: 14px 0;
}
.why-rotor .why-rotor__inner{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: center;
}

/* Иконка слева — фирменный “чип” */
.why-rotor .why-rotor__icon{
  display: grid; place-items: center;
  width: clamp(56px, 8vw, 72px);
  height: clamp(56px, 8vw, 72px);
  border-radius: 16px;
  color: var(--brand);
  background: rgba(214,121,64,.10);
  border: 1px solid rgba(214,121,64,.35);
  font-size: clamp(22px, 3vw, 28px);
  will-change: transform, opacity;
}

/* Текст справа */
.why-rotor .why-rotor__text{ min-width:0; }
.why-rotor .why-rotor__title{
  font-weight: 900;
  color: #1f1f1f;
  letter-spacing: .2px;
  font-size: clamp(18px, 2.6vw, 24px);
  line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.why-rotor .why-rotor__sub{
  margin-top: 2px;
  color: #2b2b2b;
  font-weight: 700;
  opacity: .95;
  font-size: clamp(13px, 2vw, 16px);
  line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Анимации входа/выхода (иконка + текст синхронно) */
@keyframes wr-fade-up-in{
  from{ opacity:0; transform: translateY(6px) scale(.98); }
  to  { opacity:1; transform: translateY(0)   scale(1); }
}
@keyframes wr-fade-up-out{
  from{ opacity:1; transform: translateY(0)   scale(1); }
  to  { opacity:0; transform: translateY(-6px) scale(.98); }
}
@keyframes wr-icon-spin-in{
  from{ opacity:0; transform: rotate(-10deg) scale(.9); }
  to  { opacity:1; transform: rotate(0deg) scale(1); }
}
@keyframes wr-icon-spin-out{
  from{ opacity:1; transform: rotate(0deg) scale(1); }
  to  { opacity:0; transform: rotate(10deg) scale(.9); }
}

.why-rotor .is-entering .why-rotor__title,
.why-rotor .is-entering .why-rotor__sub{
  animation: wr-fade-up-in .36s ease both;
}
.why-rotor .is-exiting .why-rotor__title,
.why-rotor .is-exiting .why-rotor__sub{
  animation: wr-fade-up-out .26s ease both;
}
.why-rotor .icon-enter{ animation: wr-icon-spin-in .36s ease both; }
.why-rotor .icon-exit { animation: wr-icon-spin-out .26s ease both; }

/* Компакт на узких экранах */
@media (max-width:520px){
  .why-rotor{ padding: 12px 0; }
  .why-rotor .why-rotor__inner{ gap:12px; }
  .why-rotor .why-rotor__icon{ border-radius: 12px; }
}

/* Если у пользователя “меньше анимаций” — просто меняем контент без эффектов */
@media (prefers-reduced-motion: reduce){
  .why-rotor .is-entering .why-rotor__title,
  .why-rotor .is-entering .why-rotor__sub,
  .why-rotor .is-exiting .why-rotor__title,
  .why-rotor .is-exiting .why-rotor__sub,
  .why-rotor .icon-enter,
  .why-rotor .icon-exit{ animation: none !important; }
}

/*------------------------------------------------------- End drive.css -------------------------------------------------------*/

/* ===== WHY-US (scoped) ===== */
.why-us{ --brand:#D67940; }
.why-us *{ box-sizing:border-box; }
.why-us .why-us__sr{ position:absolute; left:-9999px; }

/* Layout */
.why-us{ background: linear-gradient(90deg, rgba(214,121,64,.07), rgba(214,121,64,.03)); }
.why-us .why-us__inner{
  max-width:1100px; margin:0 auto; padding:14px 16px;
  display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 380px);
  gap:18px; align-items:stretch;
}
@media (max-width:860px){
  .why-us .why-us__inner{ grid-template-columns:1fr; }
}

/* Rotor */
.why-us .why-us__rotor-wrap{
  display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:center;
  padding:16px; border-radius:16px;
  background:#fff; box-shadow:0 10px 24px rgba(0,0,0,.12);
}
.why-us .why-us__icon{
  display:grid; place-items:center;
  width:clamp(60px,8vw,74px); height:clamp(60px,8vw,74px);
  border-radius:16px;
  color:var(--brand);
  background:rgba(214,121,64,.10);
  border:1px solid rgba(214,121,64,.35);
  font-size:clamp(24px,3vw,28px);
  will-change:transform,opacity;
}
.why-us .why-us__text{ min-width:0; }
.why-us .why-us__title{
  font-weight:900; color:#1f1f1f; letter-spacing:.2px;
  font-size:clamp(18px,2.4vw,24px); line-height:1.15;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.why-us .why-us__sub{
  margin-top:2px; color:#2b2b2b; font-weight:700; opacity:.95;
  font-size:clamp(13px,2vw,16px); line-height:1.25;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Animations */
@keyframes wr-fade-in{ from{opacity:0; transform:translateY(6px) scale(.98);} to{opacity:1; transform:translateY(0) scale(1);} }
@keyframes wr-fade-out{ from{opacity:1; transform:translateY(0) scale(1);} to{opacity:0; transform:translateY(-6px) scale(.98);} }
@keyframes wr-icon-in{ from{opacity:0; transform:rotate(-10deg) scale(.9);} to{opacity:1; transform:rotate(0) scale(1);} }
@keyframes wr-icon-out{ from{opacity:1; transform:rotate(0) scale(1);} to{opacity:0; transform:rotate(10deg) scale(.9);} }

.why-us .is-entering .why-us__title,
.why-us .is-entering .why-us__sub{ animation:wr-fade-in .36s ease both; }
.why-us .is-exiting .why-us__title,
.why-us .is-exiting .why-us__sub{ animation:wr-fade-out .26s ease both; }
.why-us .icon-enter{ animation:wr-icon-in .36s ease both; }
.why-us .icon-exit{  animation:wr-icon-out .26s ease both; }

/* Stats column */
.why-us .why-us__stats-title{
  margin:0 0 8px; font-weight:900; font-size:clamp(16px,2vw,18px); color:#1f1f1f; text-align:left;
}
.why-us .why-us__stats{ display:grid; align-content:start; gap:10px; }
.why-us .stat-box{
  background:#fff;  border-radius:12px;
  box-shadow:0 6px 18px rgba(0,0,0,.12);
  padding:12px 14px; min-width:0;
}
.why-us .stat-label{
  margin:0 0 4px; font-size:12px; font-weight:800; letter-spacing:.3px; color:#6a6a6a;
}
.why-us .stat-value{
  margin:0;align-items:center; gap:8px;
  font-weight:900; color:#1f1f1f; line-height:1;
  font-size:clamp(18px,3vw,24px);
}
.why-us .stat-value i{ color:var(--brand); font-size:clamp(16px,2.6vw,18px); }

/* Flip-tween эффект при обновлении числа */
.why-us .flip{ animation:whyFlip .5s ease; }
@keyframes whyFlip{
  0%{ transform:translateY(0) rotateX(0); opacity:.9; }
  50%{ transform:translateY(-2px) rotateX(20deg); opacity:1; }
  100%{ transform:translateY(0) rotateX(0); opacity:1; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .why-us .is-entering .why-us__title,
  .why-us .is-entering .why-us__sub,
  .why-us .is-exiting .why-us__title,
  .why-us .is-exiting .why-us__sub,
  .why-us .icon-enter,
  .why-us .icon-exit,
  .why-us .flip{ animation:none !important; }
}


/* ==== additions for socials inside .why-us ==== */

/* двухколоночный макет */
.why-us .why-us__inner{
  max-width:1100px; margin:0 auto; padding:14px 16px;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,380px);
  gap:18px; align-items:start;
}
@media (max-width:860px){ .why-us .why-us__inner{ grid-template-columns:1fr; } }

/* левая колонка: ротатор + соцсети */
.why-us .why-us__left{ display:grid; gap:14px; align-content:start; }

/* socials */
.why-us .why-us__socials{ display:none; }
@media (min-width:861px){ .why-us .why-us__socials{ display:block; } }

.why-us .why-us__socials-title{
  margin:2px 0 10px; font-weight:900; font-size:16px; color:#1f1f1f;
}

.why-us .why-us__socials-list{
  display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:12px;
}

.why-us .why-us__social{
  display:flex; align-items:center; gap:10px;
  background:#fff; border:2px solid var(--brand); border-radius:12px;
  box-shadow:0 6px 18px rgba(0,0,0,.12);
  padding:10px 12px; text-decoration:none; min-width:0;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.why-us .why-us__social:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 24px rgba(0,0,0,.16);
  border-color: color-mix(in oklab, var(--brand) 85%, #fff);
}
.why-us .why-us__social-img{
  width:30px; height:30px; border-radius:8px; object-fit:contain; flex:0 0 auto;
  background:#fff; border:1px solid rgba(214,121,64,.28);
}
.why-us .why-us__social-label{
  font-weight:800; color:#1f1f1f; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* мягкая “подсветка”, бегущая по плиткам */
.why-us .is-active{ position:relative; }
.why-us .is-active::after{
  content:""; position:absolute; inset:-2px; border-radius:12px;
  box-shadow:0 0 0 2px color-mix(in oklab, var(--brand) 75%, #fff);
  pointer-events:none;
}
/*----------------------------------------------------------------------- servicesbuttons.css -------------------------------------------------------*/
/* === SERVICE THEME === */
.service{
  --brand:#D67940;
  --radius:16px;
  --shadow:0 10px 24px rgba(0,0,0,.16);
}
.service *{ box-sizing:border-box; }

.service .service__grid{
  display:grid;
  grid-template-columns:1fr 1fr;   /* ПК: две колонки */
  gap:16px;
  max-width:1000px;
  margin:24px auto;
  padding:0 16px;
}
@media (max-width:768px){
  .service .service__grid{ grid-template-columns:1fr; } /* Мобилка: одна колонка */
}

/* Карточка-кнопка */
.service .service__btn{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  border-radius:var(--radius);
  overflow:hidden;
  text-decoration:none;
  min-height:260px;
  color:#fff;
  box-shadow:var(--shadow);
  transform:translateZ(0);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease, background-position .25s ease;
  background-image:
    linear-gradient(120deg, color-mix(in oklab, var(--brand) 72%, rgba(0,0,0,.0)), rgba(0,0,0,.38)),
    var(--bg);
  background-size:cover;
  background-position:center;
  border:1px solid transparent;
  padding-bottom:18px;
}
@media (min-width:992px){ .service .service__btn{ aspect-ratio:21/9; min-height:auto; } }
@media (max-width:480px){ .service .service__btn{ aspect-ratio:4/2; min-height:auto; } }

.service .service__btn:hover{
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(0,0,0,.2);
  border-color: color-mix(in oklab, var(--brand) 85%, #fff);
  background-position:center 8%;
}

/* Блик */
.service .service__btn::after{
  content:"";
  position:absolute; inset:-20% -40% auto -40%;
  height:200%;
  background: linear-gradient(95deg, rgba(255,255,255,.25), rgba(255,255,255,0) 60%);
  transform: translateX(-60%);
  mix-blend-mode: soft-light;
  transition: transform .9s ease;
  pointer-events:none;
}
.service .service__btn:hover::after{ transform: translateX(40%); }

/* Тег */
.service .service__tag{
  position:absolute; top:14px; left:14px;
  background: rgba(255,255,255,.92);
  color: var(--brand);
  font-weight:800;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
}

/* Тексты */
.service .service__title{
  margin:0 20px 6px;
  font-weight:900;
  letter-spacing:.2px;
  text-shadow:0 2px 8px rgba(0,0,0,.35);
  font-size: clamp(20px, 3.2vw, 28px);
}
.service .service__sub{
  margin:0 20px 6px;
  font-weight:700;
  opacity:.98;
  text-shadow:0 2px 6px rgba(0,0,0,.3);
  font-size: clamp(14px, 2.4vw, 18px);
}

/* Меньше анимаций — уважаем системную настройку */
@media (prefers-reduced-motion: reduce){
  .service .service__btn,
  .service .service__btn::after{ transition:none !important; }
}

/* === Пер-сервисные стили (фон/акцент) === */
.service .service_bus    { --bg:url('img/bus.png');   --brand:#2F80ED; }
.service .service_baggage{ --bg:url('img/truck.png'); --brand:#27AE60; }
.service .service_post   { --bg:url('img/post.png');  --brand:#D67940; }
.service .service_automarket  { --bg:url('img/automarket.png'); --brand:#A855F7; }

/*------------------------------------------------------- End servicesbuttons.css -------------------------------------------------------*/


/*------------------------------------------------------- market_index start.css -------------------------------------------------------*/
/* ======= THEME ======= */
    .market{
      --brand:#D67940;
      --radius:16px;
      --shadow:0 10px 24px rgba(0,0,0,.16);
    }
    .market *{ box-sizing:border-box; }

    /* ======= LAYOUT ======= */
    .market .market__wrap{
      max-width:1100px; margin:0 auto; padding:24px 16px;
    }
    .market .market__head{
      text-align:center; margin:14px auto 6px;
    }
    .market .market__title{
      margin:0 0 6px; font-size:clamp(28px,4.5vw,40px); font-weight:900; letter-spacing:.2px; color:#D67940;
    }
    .market .market__tagline{
      margin:0; color:#4b5563; font-size:clamp(14px,2.4vw,18px); font-weight:700;
    }

    /* ======= GRID (2 колонки на ПК, 1 — моб.) ======= */
    .market .market__grid{
      display:grid; grid-template-columns:1fr 1fr;
      gap:16px; margin:24px auto; padding:0;
    }
    @media (max-width:768px){ .market .market__grid{ grid-template-columns:1fr; } }

    /* ======= CARD BUTTON ======= */
    .market .market__btn{
      position:relative; display:flex; flex-direction:column; justify-content:flex-end;
      min-height:260px; border-radius:var(--radius); overflow:hidden; text-decoration:none; color:#fff;
      box-shadow:var(--shadow); transform:translateZ(0);
      transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease, background-position .25s ease;
      border:1px solid transparent; padding-bottom:18px;
      background-image:
        linear-gradient(120deg, color-mix(in oklab, var(--brand) 72%, rgba(0,0,0,0)), rgba(0,0,0,.38)),
        var(--bg);
      background-size:cover; background-position:center;
    }
    @media (min-width:992px){ .market .market__btn{ aspect-ratio:21/9; min-height:auto; } }
    @media (max-width:480px){ .market .market__btn{ aspect-ratio:4/2;  min-height:auto; } }

    .market .market__btn:hover{
      transform:translateY(-3px);
      box-shadow:0 14px 30px rgba(0,0,0,.20);
      border-color:color-mix(in oklab, var(--brand) 85%, #fff);
      background-position:center 8%;
    }

    /* БЛИК */
    .market .market__btn::after{
      content:""; position:absolute; inset:-20% -40% auto -40%; height:200%;
      background:linear-gradient(95deg, rgba(255,255,255,.25), rgba(255,255,255,0) 60%);
      transform:translateX(-60%); mix-blend-mode:soft-light; transition:transform .9s ease; pointer-events:none;
    }
    .market .market__btn:hover::after{ transform:translateX(40%); }

    /* TAG */
    .market .market__tag{
      position:absolute; top:14px; left:14px;
      background:rgba(255,255,255,.92); color:var(--brand);
      font-weight:800; padding:6px 10px; border-radius:999px; font-size:12px;
    }

    /* TEXTS */
    .market .market__btn .market__title{
      margin:0 20px 6px; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.35);
      font-weight:900; font-size:clamp(20px,3.2vw,28px);
    }
    .market .market__btn .market__sub{
      margin:0 20px 6px; color:#fff; text-shadow:0 2px 6px rgba(0,0,0,.30);
      font-weight:700; opacity:.98; font-size:clamp(14px,2.4vw,18px);
    }

    /* Уважение настроек по motion */
    @media (prefers-reduced-motion:reduce){
      .market .market__btn, .market .market__btn::after{ transition:none !important; }
    }

    /* ======= PER-BUTTON THEMES ======= */
    .market .market_auto   { --bg:url('/img/market_auto.png');   --brand:#2F80ED; }
    .market .market_spares { --bg:url('/img/market_spares.png'); --brand:#A855F7; }

    /*------------------------------------------------------- End market_index start.css -------------------------------------------------------*/