/**
 * System section — Figma desktop 1920.
 * Bg: full section width, starts below heading accent, ends at section bottom.
 */

.home-v2 .v2-section.v2-section--system,
.v2-section--system {
  position: relative;
  padding-top: 0;
  padding-bottom: 0;
}

.v2-section--system .v2-system__heading-line.v2-system__heading-line--mobile {
  display: none;
}

@media (max-width: 1023px) {
  .v2-section--system .v2-system__heading-line--desktop {
    display: none;
  }

  .v2-section--system .v2-system__heading-line.v2-system__heading-line--mobile {
    display: block;
  }

  .is-lang-uk .v2-section--system .v2-system__heading {
    font-size: calc(100vw * 30 / 390);
  }

  .is-lang-uk .v2-section--system .v2-system__title {
    font-size: clamp(18px, calc(100vw * 20 / 390), 20px);
    line-height: 1.04;
  }

  .is-lang-uk .v2-section--system .v2-system__label {
    font-size: clamp(11px, calc(100vw * 13 / 390), 13px);
  }

  .is-lang-uk .v2-section--system .v2-chip {
    padding: calc(100vw * 5 / 390) calc(100vw * 12 / 390);
    font-size: clamp(11px, calc(100vw * 13 / 390), 13px);
  }
}

.v2-system__header-wrap {
  position: relative;
  z-index: 2;
  background-color: #f5f5f5;
}

.v2-system__header {
  display: flex;
  flex-direction: column;
  gap: calc(100vw * 15 / 390); /* descriptor → title, 15 / 390 */
  margin: 0;
}

.v2-system__header .v2-descriptor {
  margin: 0;
  gap: 10px;
  font-size: 12px;
  line-height: 1;
  color: rgba(32, 32, 32, 0.4);
}

.v2-system__header .v2-descriptor__dot {
  width: 6px;
  height: 6px;
  background: #44b949;
}

.v2-system__heading {
  margin: 0;
  max-width: calc(100vw * 335 / 390); /* 335 / 390 */
  font-size: calc(100vw * 36 / 390);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0;
  color: #202020;
}

.v2-system__heading-line,
.v2-system__heading-accent {
  display: block;
  white-space: nowrap;
}

.v2-system__heading-accent {
  color: #64db69;
}

/* Stage begins exactly under "Performance Growth" — bg fills stage only */
.v2-system__stage {
  position: relative;
  width: 100%;
  padding-bottom: 0;
  background-color: #f5f5f5;
}

.v2-system__video-wrap,
.v2-system__video-layer,
.v2-system__video-moving {
  display: none;
}

.v2-system__content {
  position: relative;
}

.v2-system__col {
  display: flex;
  flex-direction: column;
  gap: calc(100vw * 40 / 390);
}

.v2-system__col.v2-system__col--center {
  display: none;
}

.v2-system__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(100vw * 40 / 390);
  padding-top: calc(100vw * 30 / 390);
}

.v2-system__card {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 1.25vw, 24px);
}

.v2-system__card-head {
  display: flex;
  align-items: center;
  gap: clamp(16px, 1.25vw, 24px);
}

.v2-system__icon {
  display: block;
  flex-shrink: 0;
  width: calc(100vw * 50 / 390);
  height: calc(100vw * 50 / 390);
  object-fit: contain;
}

.v2-system__title {
  margin: 0;
  max-width: none;
  font-size: calc(100vw * 22 / 390);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  color: #202020;
}

.v2-system__line {
  width: 100%;
  max-width: none;
  height: 0;
  margin: 0;
  border: 0;
  border-top: 1px solid rgba(32, 32, 32, 0.08);
}

.v2-system__includes {
  display: flex;
  flex-direction: column;
  gap: calc(100vw * 12 / 390);
}

.v2-system__label {
  margin: 0;
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: rgba(32, 32, 32, 0.3);
  white-space: nowrap;
}

.v2-system__tags {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(8px, 0.521vw, 10px);
}

.v2-system__tags--mobile {
  display: none;
}

.v2-system__tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: inherit;
}

.v2-section--system .v2-chip {
  padding: 6px 14px;
  border: 1px dotted rgba(32, 32, 32, 0.1);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.04);
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  color: rgba(32, 32, 32, 0.4);
}

@media (max-width: 1023px) {
  .v2-system__tags--desktop {
    display: none;
  }

  .v2-system__tags--mobile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(100vw * 6 / 390);
  }

  .v2-system__tag-row {
    gap: calc(100vw * 6 / 390);
  }

  .v2-section--system .v2-chip {
    width: max-content;
    padding: calc(100vw * 6 / 390) calc(100vw * 14 / 390);
    font-size: calc(100vw * 14 / 390);
    white-space: nowrap;
  }
}

@media (min-width: 1024px) {
  .home-v2 .v2-section.v2-section--system,
  .v2-section--system {
    padding-top: clamp(48px, 6vw, 120px);
  }

  .v2-system__header {
    gap: calc(100vw * 20 / 1920);
  }

  .v2-system__header .v2-descriptor {
    gap: 13px;
    font-size: clamp(16px, 1.042vw, 20px);
  }

  .v2-system__header .v2-descriptor__dot {
    width: 10px;
    height: 10px;
  }

  .v2-system__heading {
    max-width: min(57.55vw, 1105px);
    font-size: clamp(36px, 4.688vw, 90px);
    line-height: 1;
  }

  .v2-system__heading-line,
  .v2-system__heading-accent {
    white-space: normal;
  }

  .v2-system__stage {
    --v2-system-video-start: calc(100vw * 80 / 1920);
    --v2-system-video-scale: 2.97;
    --v2-system-video-layout-scale: 2.2;
    --v2-system-video-pull: calc(100vw * -200 / 1920);
    --v2-system-video-tail: calc(100vw * 160 / 1920);
    position: relative;
    overflow: visible;
    padding-bottom: clamp(48px, 6vw, 120px);
  }

  .v2-system__content-layer {
    position: relative;
    z-index: 2;
  }

  .v2-system__layout-wrap {
    position: relative;
    z-index: 2;
  }

  .v2-system__video-layer {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: calc(-1 * var(--v2-system-video-tail));
    left: 0;
    z-index: 1;
    overflow: visible;
    pointer-events: none;
  }

  .v2-system__video-layer-wrap {
    position: relative;
    height: 100%;
    overflow: visible;
  }

  .v2-system__video-grid {
    display: grid;
    grid-template-columns:
      minmax(0, calc(100vw * 662 / 1920))
      minmax(0, 1fr)
      minmax(0, calc(100vw * 662 / 1920));
    column-gap: calc(100vw * 60 / 1920);
    box-sizing: border-box;
    height: 100%;
    padding-top: calc(100vw * 80 / 1920);
  }

  .v2-system__video-slot {
    grid-column: 2;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-width: 0;
    margin-top: var(--v2-system-video-pull);
    overflow: visible;
  }

  .v2-system__video-sticky {
    position: sticky;
    top: var(--v2-system-video-start);
    bottom: 0;
    z-index: 0;
    width: calc(100vw * 520 / 1920);
    max-width: none;
    flex: 0 0 auto;
    margin-inline: 0;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
  }

  .v2-system__video-sticky.is-ready {
    opacity: 1;
    visibility: visible;
  }

  .v2-system__video-box {
    height: var(--video-scaled-height, auto);
    overflow: visible;
  }

  .v2-system__video {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center top;
    transform: scale(var(--v2-system-video-scale));
    transform-origin: center top;
  }

  .v2-system__layout {
    position: relative;
    grid-template-columns:
      minmax(0, calc(100vw * 662 / 1920))
      minmax(0, 1fr)
      minmax(0, calc(100vw * 662 / 1920));
    column-gap: calc(100vw * 60 / 1920);
    align-items: stretch;
    row-gap: calc(100vw * 60 / 1920);
    padding-top: calc(100vw * 80 / 1920);
  }

  .v2-system__col--left,
  .v2-system__col--right {
    position: relative;
    z-index: 2;
  }

  .v2-system__col.v2-system__col--center {
    display: block;
    position: relative;
    min-width: 0;
    min-height: 0;
    z-index: 1;
    align-self: stretch;
    overflow: visible;
  }

  .v2-system__col {
    gap: calc(100vw * 86 / 1920);
  }

  .v2-system__card {
    gap: clamp(14px, 1.042vw, 20px);
  }

  .v2-system__card-head {
    align-items: flex-start;
    gap: calc(100vw * 24 / 1920);
  }

  .v2-system__icon {
    width: calc(100vw * 90 / 1920);
    height: calc(100vw * 90 / 1920);
  }

  .v2-system__title {
    max-width: calc(100vw * 662 / 1920);
    font-size: calc(100vw * 38 / 1920);
    line-height: 1;
  }

  .v2-system__title-line {
    display: inline;
  }

  .v2-system__line {
    max-width: calc(100vw * 662 / 1920);
  }

  .v2-system__label {
    font-size: calc(100vw * 14 / 1920);
  }

  .v2-system__includes {
    flex-direction: row;
    align-items: flex-start;
    gap: calc(100vw * 20 / 1920);
  }

  .v2-system__col--left .v2-system__includes,
  .v2-system__col--right .v2-system__includes {
    justify-content: flex-start;
  }

  .v2-system__tags {
    flex: 1 1 auto;
    min-width: 0;
    gap: calc(100vw * 10 / 1920);
    align-content: flex-start;
  }

  .v2-system__tags--desktop.has-rows {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: calc(100vw * 6 / 1920);
  }

  .v2-system__tags--desktop.has-rows .v2-system__tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: calc(100vw * 10 / 1920);
  }

  .v2-section--system .v2-chip {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: calc(100vw * 6 / 1920) calc(100vw * 20 / 1920);
    font-size: calc(100vw * 18 / 1920);
  }

  .is-lang-uk .v2-section--system .v2-system__title {
    font-size: clamp(24px, calc(100vw * 32 / 1920), 32px);
    line-height: 1.04;
  }

  .is-lang-uk .v2-section--system .v2-system__label {
    font-size: clamp(11px, calc(100vw * 13 / 1920), 13px);
  }

  .is-lang-uk .v2-section--system .v2-chip {
    padding: calc(100vw * 5 / 1920) calc(100vw * 16 / 1920);
    font-size: clamp(12px, calc(100vw * 16 / 1920), 16px);
  }
}