/* Tool Park — кнопки под слоганом на главной: разделы ↔ «для кого», смена каждые 10 секунд. */
.hero-pills{display:grid;margin-top:8px;max-width:600px}
.hero-pill-set{grid-area:1/1;display:flex;flex-wrap:wrap;align-content:flex-start;gap:8px;margin:0;padding:0;list-style:none}
/* Без JS оба набора видны друг под другом */
.hero-pills:not(.is-ready) .hero-pill-set--who{grid-area:auto;margin-top:8px}
.hero-pill{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:8px 16px;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(255,255,255,.06);color:#f5f5f6;font-size:15px;line-height:22px;font-weight:500;text-decoration:none;white-space:nowrap;transition:background-color .2s var(--tp-ease-out,ease),border-color .2s var(--tp-ease-out,ease),color .2s var(--tp-ease-out,ease),transform .2s var(--tp-ease-out,ease)}
.hero-pill .icon{width:16px;height:16px}
.hero-pill--who{border-color:rgba(240,25,56,.55);background:rgba(240,25,56,.12)}
@media (hover:hover) and (pointer:fine){
  .hero-pill:hover{background:#fff;border-color:#fff;color:#0b0b0d;transform:translateY(-1px)}
  .hero-pill--who:hover{background:var(--red,#f01938);border-color:var(--red,#f01938);color:#fff}
}
.hero-pill:focus-visible{outline:3px solid var(--red,#f01938);outline-offset:3px}

/* С JS: показан один набор, кнопки появляются по очереди */
.hero-pills.is-ready .hero-pill-set{visibility:hidden}
.hero-pills.is-ready .hero-pill-set.is-active{visibility:visible}
@media (prefers-reduced-motion:no-preference){
  .hero-pills.is-ready .hero-pill-set.is-active li{animation:tp-pill-in .42s var(--tp-ease-out,cubic-bezier(.23,1,.32,1)) both;animation-delay:calc(var(--i,0) * 70ms)}
  .hero-pills.is-ready .hero-pill-set.is-leaving{visibility:visible}
  .hero-pills.is-ready .hero-pill-set.is-leaving li{animation:tp-pill-out .26s ease-in both;animation-delay:calc(var(--i,0) * 30ms)}
}
@keyframes tp-pill-in{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
@keyframes tp-pill-out{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-6px) scale(.98)}}

@media (max-width:760px){
  .hero-pill{min-height:36px;padding:6px 14px;font-size:14px}
}