:root {
  --orange: #EF8700;

  --icon-truck: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 76 64' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='2' y1='22' x2='18' y2='22'/%3E%3Cline x1='6' y1='30' x2='18' y2='30'/%3E%3Cline x1='10' y1='38' x2='18' y2='38'/%3E%3Crect x='18' y='14' width='30' height='26' rx='2'/%3E%3Cpath d='M48 20h10l8 10v10H48V20z'/%3E%3Cpath d='M50 22h7l5 7H50V22z' fill='rgba(255,255,255,0.2)' stroke='white' stroke-width='2'/%3E%3Ccircle cx='28' cy='44' r='5'/%3E%3Ccircle cx='58' cy='44' r='5'/%3E%3Cline x1='33' y1='40' x2='48' y2='40'/%3E%3C/svg%3E");
  --icon-headset: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 32C12 19.85 21.85 10 34 10s22 9.85 22 22'/%3E%3Crect x='8' y='30' width='10' height='16' rx='3'/%3E%3Crect x='48' y='30' width='10' height='16' rx='3'/%3E%3Cpath d='M58 46v4a6 6 0 01-6 6H36'/%3E%3Ccircle cx='34' cy='56' r='3' fill='white' stroke='white'/%3E%3C/svg%3E");
  --icon-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M24 5L10 11v11c0 10 6 18 14 21 8-3 14-11 14-21V11L24 5z'/%3E%3Cpath d='M18 24l4 4 8-10'/%3E%3C/svg%3E");
  --icon-battery: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='15' y='10' width='18' height='28' rx='3'/%3E%3Crect x='21' y='5' width='6' height='5' rx='1' fill='white' stroke='white'/%3E%3Cpath d='M24 16l-4 9h4l-2 8 6-11h-4l2-6z' fill='white' stroke='white'/%3E%3C/svg%3E");
}
body {margin-top: 0;}
.advantages-banner-wrapper * { box-sizing: border-box; margin: 0; padding: 0; }

.advantages-banner-wrapper {
  width: 100%;
  background: var(--orange);
  overflow: hidden;
  font-family: Arial, sans-serif;
}

/* -- shared -- */
.b-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 7px 40px;
}

.b-icon {
  width: 50px;
  height: 50px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}
.i-truck   { background-image: var(--icon-truck); }
.i-head    { background-image: var(--icon-headset); }
.i-shield  { background-image: var(--icon-shield); }
.i-battery { background-image: var(--icon-battery); }

.b-label strong {
  display: block;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}
.b-label span {
  display: block;
  color: rgba(255,255,255,0.88);
  font-size: 13px;
  margin-top: 3px;
  white-space: nowrap;
}

.b-divider {
  width: 1.5px;
  min-height: 48px;
  align-self: stretch;
  background: rgba(255,255,255,0.35);
  flex-shrink: 0;
}

/* -- DESKTOP =900px -- */
.b-desktop {
  display: flex;
  align-items: stretch;
  justify-content: center;
  max-width: 1920px;
  margin: 0 auto;
}
.b-desktop .b-item + .b-item {
  border-left: 1.5px solid rgba(255,255,255,0.35);
}

.b-tablet, .b-mobile { display: none; }

/* -- TABLET 500–899px -- */
@media (min-width: 500px) and (max-width: 899px) {
  .b-desktop { display: none; }
  .b-tablet  { display: block; position: relative; }

  .b-track-wrap { overflow: hidden; width: 100%; }

  .b-track {
    display: flex;
    width: 200%;
    transition: transform 0.38s cubic-bezier(.4,0,.2,1);
  }

  .b-tablet .b-slide {
    width: 50%;
    flex: 0 0 50%;
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding-right: 28px;
  }

  .b-tablet .b-item {
    flex: 1;
    justify-content: center;
    max-width: 320px;
    padding: 7px 15px;
  }

  .b-tablet .b-dots {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
  }
  .b-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: rgba(255,255,255,0.4);
    border: none; padding: 0; cursor: pointer;
    transition: background .2s;
  }
  .b-dot.on { background: #fff; }
}

/* -- MOBILE <500px -- */
@media (max-width: 499px) {
  .b-desktop { display: none; }
  .b-mobile  { display: block; position: relative; }

  .b-track-wrap { overflow: hidden; width: 100%; }

  .b-track {
    display: flex;
    transition: transform 0.38s cubic-bezier(.4,0,.2,1);
  }

  .b-mobile .b-slide {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 7px 36px 7px 20px;
  }

  .b-mobile .b-dots {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
  }
  .b-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: rgba(255,255,255,0.4);
    border: none; padding: 0; cursor: pointer;
    transition: background .2s;
  }
  .b-dot.on { background: #fff; }
}