/* ============================================================
   steps.css — компонент темы Kremlin Group
   Сгенерировано split-css.py из dist/css/style.css
   ============================================================ */


.section-steps {
  background-color: #4a0000
}

.section-steps__header {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: .9375rem
}

.header-steps__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .9375rem
}

.header-steps__label {
  font-size: .6875rem;
  text-transform: uppercase;
  color: #D4AF37;
  font-weight: 800;
  letter-spacing: .0625rem
}

.header-steps__title {
  letter-spacing: -.0625rem;
  font-weight: 800;
  font-family: Manrope,sans-serif
}

.header-steps__cta {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end
}

.body-steps {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 1.5625rem
}

.body-steps>.body-steps__item {
  opacity: 0;
  -webkit-transform: translate3d(0,1.25rem,0);
  transform: translate3d(0,1.25rem,0);
  transition: opacity .8s cubic-bezier(.33,1,.68,1),-webkit-transform .8s cubic-bezier(.33,1,.68,1);
  transition: opacity .8s cubic-bezier(.33,1,.68,1),transform .8s cubic-bezier(.33,1,.68,1);
  transition: opacity .8s cubic-bezier(.33,1,.68,1),transform .8s cubic-bezier(.33,1,.68,1),-webkit-transform .8s cubic-bezier(.33,1,.68,1)
}

.body-steps._watcher-view>.body-steps__item {
  opacity: 1;
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0)
}

.body-steps._watcher-view>.body-steps__item:nth-child(1) {
  transition-delay: 0s
}

.body-steps._watcher-view>.body-steps__item:nth-child(2) {
  transition-delay: .15s
}

.body-steps._watcher-view>.body-steps__item:nth-child(3) {
  transition-delay: .3s
}

.body-steps._watcher-view>.body-steps__item:nth-child(4) {
  transition-delay: .45s
}

.body-steps._watcher-view>.body-steps__item:nth-child(5) {
  transition-delay: .6s
}

.body-steps._watcher-view>.body-steps__item:nth-child(6) {
  transition-delay: .75s
}

.body-steps__item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .9375rem
}

.body-steps__item::before {
  content: "";
  position: absolute;
  top: 1.875rem;
  left: 4.5625rem;
  right: -1.0625rem;
  height: .3125rem;
  border-radius: .1875rem;
  clip-path: inset(0 100% 0 0 round .1875rem);
  transition: clip-path 1.1s cubic-bezier(.65,0,.35,1);
  z-index: 1;
  pointer-events: none
}

.body-steps__item:nth-child(1)::before {
  background: linear-gradient(90deg,#d4af37,#b4872a);
  box-shadow: 0 0 .5rem rgba(190,147,46,.55),0 0 1.25rem rgba(190,147,46,.25)
}

.body-steps__item:nth-child(2)::before {
  background: linear-gradient(90deg,#b4872a,#8f581c);
  box-shadow: 0 0 .5rem rgba(166,117,37,.55),0 0 1.25rem rgba(166,117,37,.25)
}

.body-steps__item:nth-child(3)::before {
  background: linear-gradient(90deg,#8f581c,#4a0000);
  box-shadow: 0 0 .5rem rgba(96,28,9,.5),0 0 1.25rem rgba(96,28,9,.25)
}

.body-steps__item:nth-child(4)::before {
  background: linear-gradient(90deg,#4a0000,#4a0000);
  box-shadow: 0 0 .5rem rgba(74,0,0,.5),0 0 1.25rem rgba(74,0,0,.25)
}

.body-steps._watcher-view>.body-steps__item::before {
  clip-path: inset(0 0 0 0 round .1875rem)
}

.body-steps._watcher-view>.body-steps__item:last-child::before {
  clip-path: inset(0 15% 0 0 round .1875rem)
}

.body-steps._watcher-view>.body-steps__item:nth-child(1)::before {
  transition-delay: .5s
}

.body-steps._watcher-view>.body-steps__item:nth-child(2)::before {
  transition-delay: 1.5s
}

.body-steps._watcher-view>.body-steps__item:nth-child(3)::before {
  transition-delay: 2.5s
}

.body-steps._watcher-view>.body-steps__item:nth-child(4)::before {
  transition-delay: 3.5s
}

.body-steps__value {
  flex: 0 0 4.0625rem;
  width: 4.0625rem;
  height: 4.0625rem;
  font-family: Manrope,sans-serif;
  font-weight: 800;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 1rem;
  overflow: hidden;
  background: rgba(207,225,255,.5);
  border: .0625rem solid rgba(207,225,255,.5)
}

.body-steps__value--active {
  background: rgba(212,175,55,.75);
  color: #1a1c1c
}

.body-steps__title {
  font-weight: 800;
  font-family: Manrope,sans-serif
}

.body-steps__description {
  font-size: .875rem;
  line-height: 1.5;
  opacity: .85;
  font-weight: 500
}

@media (min-width:91.875em) {
.section-steps__container {
    padding-top: 6.25rem
  }
  .section-steps__container {
    padding-bottom: 6.25rem
  }
  .section-steps__header:not(:last-child) {
    margin-bottom: 4.6875rem
  }
  .header-steps__title {
    font-size: 2.5rem
  }
  .body-steps__value {
    font-size: 1.375rem
  }
  .body-steps__title {
    font-size: 1.375rem
  }
}

@media (max-width:20em) {
.section-steps__container {
    padding-top: 3.125rem
  }
  .section-steps__container {
    padding-bottom: 3.125rem
  }
  .section-steps__header:not(:last-child) {
    margin-bottom: 2.1875rem
  }
  .header-steps__title {
    font-size: 1.75rem
  }
  .body-steps__value {
    font-size: 1rem
  }
  .body-steps__title {
    font-size: 1.125rem
  }
}

@media (max-width:61.99875em) {
.body-steps {
    grid-template-columns: repeat(2,1fr)
  }
  .body-steps._watcher-view>.body-steps__item:nth-child(2)::before {
    clip-path: inset(0 15% 0 0 round .1875rem)
  }
}

@media (max-width:47.99875em) {
.section-steps__header {
    grid-template-columns: 1fr
  }
  .header-steps__cta {
    justify-content: flex-start
  }
}

@media (max-width:29.99875em) {
.body-steps__item::before {
    left: 3.75rem;
    top: 1.375rem;
    height: .1875rem
  }
  .body-steps__value {
    flex: 0 0 3.125rem;
    width: 3.125rem;
    height: 3.125rem
  }
}

@media (min-width:20em)and (max-width:91.875em) {
.section-steps__container {
    padding-top: clamp(3.125rem ,2.2554347826rem + 4.347826087vw ,6.25rem)
  }
  .section-steps__container {
    padding-bottom: clamp(3.125rem ,2.2554347826rem + 4.347826087vw ,6.25rem)
  }
  .section-steps__header:not(:last-child) {
    margin-bottom: clamp(2.1875rem ,1.4918478261rem + 3.4782608696vw ,4.6875rem)
  }
  .header-steps__title {
    font-size: clamp(1.75rem ,1.5413043478rem + 1.0434782609vw ,2.5rem)
  }
  .body-steps__value {
    font-size: clamp(1rem ,.8956521739rem + .5217391304vw ,1.375rem)
  }
  .body-steps__title {
    font-size: clamp(1.125rem ,1.0554347826rem + .347826087vw ,1.375rem)
  }
}

@media (prefers-reduced-motion:reduce) {
.body-steps>.body-steps__item {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
    transition: none
  }
  .body-steps>.body-steps__item::before {
    clip-path: inset(0 0 0 0 round .1875rem);
    transition: none
  }
}