/**
 * Services — Platform Ecosystem scroll wheel (Figma 1800×1000 @1920).
 */

.home-v2 .v2-section--services-ecosystem,
.v2-section--services-ecosystem {
  padding-top: calc(100vw * 80 / 390);
  padding-bottom: clamp(48px, 6.25vw, 120px);
}

@media (min-width: 1024px) {
  .page-services .v2-section--services-ecosystem {
    padding-top: 40px;
    padding-bottom: 60px;
  }

  .page-services .v2-section--client-impact {
    padding-top: 160px;
    padding-bottom: calc(100vw * 120 / 1920);
  }

  .page-services .v2-services-ecosystem__stage {
    height: calc(100dvh - clamp(32px, calc(100vw * 40 / 1920), 40px));
    min-height: 620px;
    max-height: none;
  }
}

@media (min-width: 1024px) {
  body.is-ecosystem-pinned .v2-header {
    transform: translateY(-100%);
  }
}

.v2-services-ecosystem__track {
  position: relative;
}

.v2-services-ecosystem__stage {
  --eco-stage-radius: clamp(12px, calc(100vw * 20 / 1920), 20px);
  --eco-wheel-size: clamp(620px, calc(100vw * 1667 / 1920), 1667px);
  --eco-icon-size: clamp(48px, calc(100vw * 60 / 1920), 60px);
  --eco-wheel-apex: clamp(96px, calc(100vw * 150 / 1920), 150px);
  --eco-node-offset: clamp(28px, calc(100vw * 50 / 1920), 50px);
  position: relative;
  display: block;
  width: 100%;
  min-height: clamp(676px, calc(100vw * 1300 / 1920), 1300px);
  padding: clamp(20px, calc(100vw * 40 / 1920), 40px);
  border-radius: var(--eco-stage-radius);
  background: #202020;
  overflow: hidden;
}

.v2-services-ecosystem__intro {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: clamp(16px, calc(100vw * 20 / 1920), 20px);
  max-width: min(calc(100vw * 1066 / 1920), 1066px);
}

.v2-services-ecosystem__descriptor {
  display: flex;
  align-items: center;
  gap: clamp(10px, calc(100vw * 15 / 1920), 15px);
  margin: 0;
  font-size: clamp(16px, calc(100vw * 20 / 1920), 20px);
  font-weight: 400;
  line-height: 1;
  color: rgba(255, 255, 255, 0.6);
}

.v2-services-ecosystem__descriptor-dot {
  width: clamp(8px, calc(100vw * 10 / 1920), 10px);
  height: clamp(8px, calc(100vw * 10 / 1920), 10px);
  border-radius: 50%;
  background: #64db69;
  flex-shrink: 0;
}

.v2-services-ecosystem__heading {
  margin: 0;
  font-size: clamp(36px, calc(100vw * 90 / 1920), 90px);
  font-weight: 500;
  line-height: 1;
  color: #ffffff;
}

.v2-services-ecosystem__heading-line {
  display: block;
}

.v2-services-ecosystem__lead {
  margin: 0;
  max-width: min(calc(100vw * 420 / 1920), 420px);
  font-size: clamp(16px, calc(100vw * 20 / 1920), 20px);
  font-weight: 400;
  line-height: 1.2;
  color: #ffffff;
}

.v2-services-ecosystem__lead-line {
  display: block;
}

.v2-services-ecosystem__wheel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: clamp(170px, calc(100vw * 300 / 1920), 300px);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 0;
  padding-bottom: clamp(16px, calc(100vw * 24 / 1920), 24px);
}

.v2-services-ecosystem__wheel-viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.v2-services-ecosystem__wheel-rotator {
  position: absolute;
  left: 50%;
  top: var(--eco-wheel-apex);
  width: var(--eco-wheel-size);
  height: var(--eco-wheel-size);
  margin-left: calc(var(--eco-wheel-size) * -0.5);
  transform-origin: 50% 50%;
  will-change: transform;
}

.v2-services-ecosystem__ring {
  position: absolute;
  inset: 0;
  border: 1px dotted #757575;
  border-radius: 50%;
}

.v2-services-ecosystem__slot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--eco-icon-size);
  height: var(--eco-icon-size);
  margin: calc(var(--eco-icon-size) * -0.5) 0 0 calc(var(--eco-icon-size) * -0.5);
  transform: rotate(var(--slot-angle)) translateY(calc((var(--eco-wheel-size) * -0.5) - var(--eco-node-offset)));
  transform-origin: center center;
  opacity: 0.35;
  transition: opacity 0.32s ease;
}

.v2-services-ecosystem__slot.is-active {
  opacity: 1;
}

.v2-services-ecosystem__slot-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: transparent;
  transition: background-color 0.32s ease;
  will-change: transform;
}

.v2-services-ecosystem__slot.is-active .v2-services-ecosystem__slot-icon {
  background: #64db69;
}

.v2-services-ecosystem__slot-icon img {
  display: block;
  width: clamp(24px, calc(100vw * 36 / 1920), 36px);
  height: clamp(24px, calc(100vw * 36 / 1920), 36px);
  object-fit: contain;
  opacity: 0.6;
  transform: scale(0.84);
  transition: opacity 0.32s ease, transform 0.32s ease;
}

.v2-services-ecosystem__slot.is-active .v2-services-ecosystem__slot-icon img {
  opacity: 1;
  transform: scale(1);
}

.v2-services-ecosystem__marker {
  position: relative;
  z-index: 2;
  display: block;
  width: clamp(9px, calc(100vw * 11 / 1920), 11px);
  height: clamp(9px, calc(100vw * 11 / 1920), 11px);
  margin-top: var(--eco-wheel-apex);
  border-radius: 50%;
  background: #64db69;
}

.v2-services-ecosystem__details {
  position: relative;
  z-index: 2;
  width: min(100%, calc(100vw * 360 / 1920));
  max-width: 360px;
  min-height: clamp(125px, calc(100vw * 156 / 1920), 156px);
  margin-top: clamp(50px, calc(100vw * 83 / 1920), 83px);
  text-align: center;
}

.v2-services-ecosystem__details::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: calc(100% + clamp(5px, calc(100vw * 8 / 1920), 8px));
  width: 1px;
  height: clamp(24px, calc(100vw * 40 / 1920), 40px);
  border-left: 1px dashed #757575;
  transform: translateX(-0.5px);
}

.v2-services-ecosystem__detail {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, calc(100vw * 10 / 1920), 10px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(0, 12px, 0);
  transition:
    opacity 0.26s ease,
    transform 0.38s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0.38s;
}

.v2-services-ecosystem__detail.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(0, 0, 0);
  transition-delay: 0.08s, 0.08s, 0s;
}

.v2-services-ecosystem__detail-name {
  margin: 0;
  font-size: clamp(24px, calc(100vw * 32 / 1920), 32px);
  font-weight: 500;
  line-height: 1;
  color: #ffffff;
}

.v2-services-ecosystem__detail-subtitle {
  margin: 0;
  font-size: clamp(16px, calc(100vw * 20 / 1920), 20px);
  font-weight: 500;
  line-height: 1;
  color: #ffffff;
}

.v2-services-ecosystem__detail-body {
  margin: 0;
  font-size: clamp(14px, calc(100vw * 18 / 1920), 18px);
  font-weight: 400;
  line-height: 1.22;
  color: rgba(255, 255, 255, 0.6);
}

.v2-services-ecosystem__detail-body-line {
  display: block;
}

@media (min-width: 1024px) {
  .v2-services-ecosystem__lead-line,
  .v2-services-ecosystem__detail-body-line {
    white-space: nowrap;
  }

  .is-lang-uk .v2-services-ecosystem__intro {
    max-width: min(calc(100vw * 1120 / 1920), 1120px);
  }

  .is-lang-uk .v2-services-ecosystem__heading {
    font-size: calc(100vw * 66 / 1920);
    line-height: 1.02;
  }

  .is-lang-uk .v2-services-ecosystem__lead {
    max-width: min(calc(100vw * 760 / 1920), 760px);
    font-size: calc(100vw * 18 / 1920);
  }
}

.v2-services-ecosystem__footer {
  position: relative;
  z-index: 2;
  margin: auto 0 0;
  padding-top: clamp(26px, calc(100vw * 36 / 1920), 36px);
  max-width: min(calc(100vw * 432 / 1920), 432px);
  font-size: clamp(20px, calc(100vw * 32 / 1920), 32px);
  font-weight: 500;
  line-height: 1;
  text-align: center;
  color: #ffffff;
}

.v2-services-ecosystem__heading[data-animation='letters'] .split-line {
  width: fit-content;
  max-width: 100%;
  overflow: visible;
}

@media (max-width: 1023px) {
  .v2-section--services-ecosystem {
    --eco-mobile-vw: min(100vw, 430px);
    --eco-mobile-header-height: calc(var(--eco-mobile-vw) * 70 / 390);
    --eco-mobile-stage-height: calc(100vh - var(--eco-mobile-header-height));
  }

  @supports (height: 100svh) {
    .v2-section--services-ecosystem {
      --eco-mobile-stage-height: calc(100svh - var(--eco-mobile-header-height));
    }
  }

  .home-v2 .v2-section--services-ecosystem,
  .v2-section--services-ecosystem {
    padding-top: calc(var(--eco-mobile-vw) * 80 / 390);
    padding-bottom: calc(var(--eco-mobile-vw) * 40 / 390);
  }

  .page-services .v2-section--client-impact {
    padding-top: calc(100vw * 120 / 390);
    padding-bottom: 0;
  }

  .v2-services-ecosystem__stage {
    --eco-stage-radius: calc(var(--eco-mobile-vw) * 12 / 390);
    --eco-wheel-size: calc(var(--eco-mobile-vw) * 524 / 390);
    --eco-icon-size: calc(var(--eco-mobile-vw) * 40 / 390);
    --eco-wheel-apex: calc(var(--eco-mobile-vw) * 6 / 390);
    --eco-node-offset: calc(var(--eco-mobile-vw) * -40 / 390);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    box-sizing: border-box;
    height: var(--eco-mobile-stage-height);
    min-height: var(--eco-mobile-stage-height);
    max-height: var(--eco-mobile-stage-height);
    padding: calc(var(--eco-mobile-vw) * 20 / 390);
    touch-action: pan-y;
  }

  .v2-services-ecosystem__intro {
    flex-shrink: 0;
    gap: calc(var(--eco-mobile-vw) * 15 / 390);
    max-width: none;
  }

  .v2-services-ecosystem__descriptor {
    gap: calc(var(--eco-mobile-vw) * 10 / 390);
    font-size: calc(var(--eco-mobile-vw) * 12 / 390);
  }

  .v2-services-ecosystem__descriptor-dot {
    width: calc(var(--eco-mobile-vw) * 6 / 390);
    height: calc(var(--eco-mobile-vw) * 6 / 390);
    background: #ffffff;
  }

  .v2-services-ecosystem__heading {
    max-width: 100%;
    font-size: calc(var(--eco-mobile-vw) * 36 / 390);
    line-height: 1.05;
  }

  .v2-services-ecosystem__lead {
    max-width: calc(var(--eco-mobile-vw) * 310 / 390);
    font-size: calc(var(--eco-mobile-vw) * 14 / 390);
    line-height: 1.2;
    color: rgba(255, 255, 255, 0.6);
  }

  .v2-services-ecosystem__wheel {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 0;
    margin-top: calc(var(--eco-mobile-vw) * 60 / 390);
    padding-bottom: 0;
  }

  .v2-services-ecosystem__wheel-viewport {
    position: absolute;
    inset: 0 auto auto 50%;
    width: calc(100% + var(--eco-mobile-vw) * 40 / 390);
    height: calc(var(--eco-mobile-vw) * 168 / 390);
    transform: translateX(-50%);
    overflow: hidden;
  }

  .v2-services-ecosystem__slot-icon img {
    width: calc(var(--eco-mobile-vw) * 28 / 390);
    height: calc(var(--eco-mobile-vw) * 28 / 390);
  }

  .v2-services-ecosystem__marker {
    width: calc(var(--eco-mobile-vw) * 10 / 390);
    height: calc(var(--eco-mobile-vw) * 10 / 390);
    margin-top: var(--eco-wheel-apex);
    flex-shrink: 0;
  }

  .v2-services-ecosystem__details {
    width: 100%;
    max-width: calc(var(--eco-mobile-vw) * 310 / 390);
    min-height: calc(var(--eco-mobile-vw) * 96 / 390);
    margin-top: calc(var(--eco-mobile-vw) * 135 / 390);
    flex-shrink: 0;
  }

  .v2-services-ecosystem__details::before {
    bottom: calc(100% + var(--eco-mobile-vw) * 10 / 390);
    height: calc(var(--eco-mobile-vw) * 38 / 390);
  }

  .v2-services-ecosystem__detail {
    gap: calc(var(--eco-mobile-vw) * 8 / 390);
  }

  .v2-services-ecosystem__detail-name {
    font-size: calc(var(--eco-mobile-vw) * 24 / 390);
  }

  .v2-services-ecosystem__detail-subtitle {
    font-size: calc(var(--eco-mobile-vw) * 16 / 390);
  }

  .v2-services-ecosystem__detail-body {
    font-size: calc(var(--eco-mobile-vw) * 14 / 390);
    line-height: 1.22;
  }

  .v2-services-ecosystem__footer {
    margin-top: auto;
    padding-top: calc(var(--eco-mobile-vw) * 12 / 390);
    max-width: calc(var(--eco-mobile-vw) * 310 / 390);
    font-size: calc(var(--eco-mobile-vw) * 18 / 390);
    line-height: 1.1;
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
  }
}