/* =========================
   Tools stage — 1 row on desktop / 2 rows on mobile
========================= */

.tools-stage{
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid rgba(148,163,184,.22);
  padding: 18px 14px;
  min-height: 160px;

  background:
    radial-gradient(1200px 320px at 12% 0%, rgba(29,78,216,.30), transparent 58%),
    radial-gradient(900px 280px at 92% 20%, rgba(139,94,60,.20), transparent 62%),
    linear-gradient(180deg, rgba(2,7,25,.80), rgba(10,10,18,.72));
  box-shadow:
    0 18px 55px rgba(0,0,0,.45),
    0 0 0 2px rgba(29,78,216,.10) inset;
}

.tools-stage::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: linear-gradient(
    90deg,
    rgba(0,0,0,.62),
    transparent 18%,
    transparent 82%,
    rgba(0,0,0,.62)
  );
  opacity:.78;
}

/* трек — 1 ряд по умолчанию */
.tools-track{
  position: relative;
  width: 100%;
  height: 118px;
  z-index: 1;
}

/* мобилка: 2 ряда (высоту увеличиваем) */
@media (max-width: 560px){
  .tools-stage{ min-height: 210px; }
  .tools-track{ height: 170px; }
}

.tool-chip{
  position: absolute;
  left: 0;
  top: 0;
  transform: translate3d(0,0,0);
  will-change: transform, opacity;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 10px 14px;     /* ⬅️ мобильный размер (оставляем) */
  border-radius: 999px;
  font-weight: 800;
  font-size: 13px;        /* ⬅️ мобильный размер (оставляем) */
  letter-spacing: .25px;
  white-space: nowrap;
  user-select: none;
  pointer-events: none;

  color: rgba(255,255,255,.95);
  border: 1px solid rgba(148,163,184,.24);
  background:
    radial-gradient(120px 60px at 30% 20%, rgba(255,255,255,.12), transparent 60%),
    linear-gradient(180deg, rgba(29,78,216,.22), rgba(0,0,0,.26));
  box-shadow:
    0 10px 30px rgba(0,0,0,.35),
    0 0 0 2px rgba(29,78,216,.10) inset,
    0 0 22px rgba(29,78,216,.08);

  opacity: 1;
}

/* ПК: делаем крупнее, мобилку не трогаем */
@media (min-width: 900px){
  .tools-track{ height: 132px; }
  .tool-chip{
    padding: 12px 18px;
    font-size: 15px;
    box-shadow:
      0 14px 38px rgba(0,0,0,.40),
      0 0 0 2px rgba(29,78,216,.12) inset,
      0 0 26px rgba(29,78,216,.10);
  }
}

/* Вне видимости — статично и мягко */
.tools-stage.is-idle .tool-chip{
  transition: transform 520ms ease, opacity 520ms ease;
}

/* Центровая надпись */
.tools-center{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 2;

  font-size: clamp(30px, 4.2vw, 66px);
  font-weight: 950;
  letter-spacing: .6px;
  text-align: center;

  color: rgba(255,255,255,.94);
  text-shadow:
    0 12px 40px rgba(0,0,0,.55),
    0 0 46px rgba(29,78,216,.22);

  opacity: 0;
  transform: scale(.92);
  filter: blur(2px);

  will-change: opacity, transform, filter;
}