.services {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: clamp(56px, calc(180 * var(--u)), 180px);
  background: var(--color-black);
  color: var(--color-bg);
}

.services__stage {
  position: relative;
  container-type: inline-size;
  width: 100%;
  max-width: 600px;
  aspect-ratio: 440 / 460;
}

.services__cloud {
  position: absolute;
  inset: 0;
}

.services__icon {
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: var(--w);
  height: auto;
  opacity: 0;
  scale: 0.3;
  transition:
    opacity 0.6s ease calc(var(--i) * 30ms),
    scale 1s var(--ease-back) calc(var(--i) * 30ms);
  animation: services-float calc(4.6s + var(--i) * 0.11s) var(--ease-in-out) calc(var(--i) * -0.37s) infinite alternate;
}

.services_visible .services__icon,
.no-js .services__icon {
  opacity: 1;
  scale: 1;
}

/* «30+ Сервисов» — SVG по геометрии макета: заливка белая 10 % (сквозь цифры видны иконки)
   и внешняя белая обводка со скруглёнными углами. Обводка рисуется под маской «всё, кроме букв»,
   иначе её внутренняя половина закрашивает цифры */
.services__title {
  position: absolute;
  top: 70.65%;
  left: 20.2%;
  width: 59.55%;
  pointer-events: none;
}

.services__sticker {
  display: block;
  width: 100%;
  overflow: visible;
}

/* Копии через <use> наследуют стиль только от самого <use>, поэтому шрифт задаём ему */
.services__sticker use {
  font-family: var(--font-display);
  font-weight: 800;
  text-anchor: middle;
}

.services__sticker-count {
  font-size: 100px;
  letter-spacing: 2px;
  stroke-width: 24px;
}

.services__sticker-label {
  font-size: 16px;
  stroke-width: 16px;
}

.services__sticker-stroke {
  fill: var(--color-white);
  stroke: var(--color-white);
  stroke-linejoin: round;
}

.services__sticker-fill {
  fill: rgb(255 255 255 / 0.1);
  stroke: none;
}

.services__text {
  position: relative;
  margin-top: clamp(-8px, calc(-5 * var(--u)), 0px);
  padding-inline: 20px;
  font-size: var(--fs-body);
  line-height: 1.35;
  letter-spacing: 0.02em;
  text-align: center;
}

@keyframes services-float {
  from {
    translate: 0 -2.5%;
  }

  to {
    translate: 0 2.5%;
  }
}

/* Белое внутреннее свечение по краям чёрной формы, как в макете; верх и низ прячут соседние блоки.
   Верх секции на 80 px уходит под скруглённый низ преимуществ, а облако иконок выходит
   выше сцены — отступ сверху держит все иконки на виду */
@media (max-width: 767px) {
  .services {
    margin-top: calc(-80 * var(--u));
    padding-top: calc(100 * var(--u));
    box-shadow: inset 0 0 calc(110 * var(--u)) calc(10 * var(--u)) var(--color-white);
  }
}

@media (min-width: 768px) {
  .services {
    justify-content: center;
    padding: 24px 24px 48px;
    overflow: hidden;
  }
}

/* На ПК плитка вытянута по соседней с устройствами — облако растёт на всю её ширину */
@media (min-width: 1024px) {
  .services__stage {
    max-width: 680px;
  }
}