/* =====================================
VL24 FEATURE STRIP — 2026 PREMIUM GOLD
===================================== */

/* SECTION */
.feature-strip{
  position:relative;
  overflow:hidden;
  padding:38px 0;

  /* luxury dark base */
  background:
    radial-gradient(circle at 50% 0%, rgba(212,175,55,.08), transparent 70%),
    linear-gradient(180deg,#121214 0%,#0a0a0c 100%);
}

/* GOLD TOP LINE */
.feature-strip::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:1px;

  background:
    linear-gradient(90deg,
      transparent,
      rgba(212,175,55,.8),
      transparent);
}

/* GOLD BOTTOM LINE */
.feature-strip::after{
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:1px;

  background:
    linear-gradient(90deg,
      transparent,
      rgba(212,175,55,.8),
      transparent);
}

/* VIEWPORT */
.feature-strip__viewport{
  overflow:hidden;
  width:100%;
}

.feature-strip__track{
  display:flex;
  flex-wrap:nowrap; /* ⭐ oluline */
  align-items:center;

  gap:70px;

  width:max-content;
  white-space:nowrap;

}

.feature-strip__item{
  display:inline-flex; /* ⭐ oluline */
  align-items:center;
  gap:1px;

  flex:0 0 auto;
  white-space:nowrap;
}

.feature-strip__text{
  white-space:nowrap;
}


.feature-strip__svg{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  width:28px;
  height:28px;

  border-radius:999px;

  background:linear-gradient(
    180deg,
    #fff6cc 0%,
    #f0d97a 20%,
    #d4af37 45%,
    #f7e8a8 65%,
    #b8922c 100%
  );

  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;

  -webkit-mask-position:center;
  mask-position:center;

  -webkit-mask-size:contain;
  mask-size:contain;
}

.feature-strip__svg svg{
  display:block;
  width:100%;
  height:100%;

  /* remove original colors */
  fill:#000;
  stroke:#000;
}

/* IMAGE fallback */
.feature-strip__img{
  width:28px;
  height:auto;
}

.feature-strip__text{
  font-family:"Space Grotesk", sans-serif;
  font-weight:500;
  font-size:14px;
  letter-spacing:.06em;

  background:linear-gradient(
    180deg,
    #fff3c4 0%,
    #e8c86a 25%,
    #d4af37 50%,
    #f6e7a3 75%,
    #b8962e 100%
  );

  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;

  text-shadow:
    0 1px 0 rgba(255,255,255,.15),
    0 0 12px rgba(212,175,55,.2);
}

/* =====================================
DESKTOP
===================================== */

@media(min-width:1024px){

  .feature-strip{
    padding:30px 0;
  }

  .feature-strip__track{
    gap:110px;
  }

  .feature-strip__svg svg{
    width:32px;
    height:32px;
  }

  .feature-strip__text{
    font-size:15px;
  }
}

/* =====================================
MOBILE
===================================== */

@media(max-width:768px){

  .feature-strip{
    padding:24px 0;
  }

  .feature-strip__track{
    gap:50px;

  }

  .feature-strip__svg svg{
    width:24px;
    height:24px;
  }

  .feature-strip__text{
    font-size:13px;
  }
}

/* vertical divider */
.feature-strip__item:not(:last-child)::after{
  content:"";
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);

  width:1px;
  height:26px;

  background:linear-gradient(
    180deg,
    transparent,
    rgba(212,175,55,.8),
    transparent
  );
}

/* =====================================
FEATURE STRIP — REAL SPEED CONTROL
(same speed on mobile/desktop)
===================================== */

/* ⭐ muuda ainult seda */
:root{
  --feature-strip-speed: 30s; /* 60s = ok, 120s = premium slow */
}

/* scroll */
.feature-strip__track{
  animation: vl24FeatureMove var(--feature-strip-speed) linear infinite;
  will-change: transform;
}

/* pause */
.feature-strip:hover .feature-strip__track{
  animation-play-state: paused;
}

/* move fixed distance */
@keyframes vl24FeatureMove{
  from{ transform:translateX(0); }
  to{ transform:translateX(-2000px); } /* ⭐ fixed distance = sama kiirus igal seadmel */
}