/**
 * TechHub — Figma desktop 1920, mobile 390.
 * Mobile (<1024): calc(100vw * N / 390), capped at Figma px.
 */

.home-v2 .v2-section--techhub,
.v2-section--techhub {
  position: relative;
  z-index: 310;
  padding: 0;
  overflow: hidden;
}

.v2-section--techhub .v2-techhub__heading-line.v2-techhub__heading-line--mobile {
  display: none;
}

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

  .v2-section--techhub .v2-techhub__heading-line.v2-techhub__heading-line--mobile {
    display: block;
  }
}

.v2-techhub__stage {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  min-height: 100svh;
  min-height: 100dvh;
  height: auto;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding-inline: var(--container-pad);
  box-sizing: border-box;
  background-image: var(--v2-techhub-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.v2-techhub__video,
.v2-techhub__video-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.v2-techhub__video {
  z-index: -2;
  display: block;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}

.v2-techhub__video-overlay {
  z-index: -1;
  background: rgba(100, 219, 105, 0.2);
  pointer-events: none;
}

.v2-techhub__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  width: 100%;
  flex: 1 1 auto;
  align-self: stretch;
  min-height: 0;
}

.v2-techhub__top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.v2-techhub__top .v2-descriptor {
  margin: 0;
  display: flex;
  align-items: center;
  line-height: 1;
  color: rgba(255, 255, 255, 0.4);
}

.v2-techhub__top .v2-descriptor__dot {
  background: #ffffff;
}

.v2-techhub__heading {
  margin: 0;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  color: #ffffff;
}

.v2-techhub__heading-line {
  display: block;
}

.v2-techhub__text {
  align-self: center;
  margin: 0;
  font-weight: 400;
  letter-spacing: 0;
  text-align: center;
  color: #ffffff;
}

.v2-techhub__text-br-desktop {
  display: none;
}

@media (max-width: 1023px) {
  .v2-section--techhub {
    --v2-techhub-fs-12: calc(100vw * 12 / 390);
    --v2-techhub-fs-14: calc(100vw * 14 / 390);
    --v2-techhub-fs-36: calc(100vw * 36 / 390);
    --v2-techhub-gap-10: calc(100vw * 10 / 390);
    --v2-techhub-gap-15: calc(100vw * 15 / 390);
    --v2-techhub-dot: calc(100vw * 6 / 390);
    --v2-techhub-content: calc(100vw * 350 / 390);
    --v2-techhub-pad-20: calc(100vw * 20 / 390);
    --v2-techhub-header-height: calc(100vw * 70 / 390);
    --v2-techhub-mobile-height: calc(100vh - var(--v2-techhub-header-height));
  }

  .v2-section--techhub .v2-techhub__stage {
    min-height: var(--v2-techhub-mobile-height);
    height: var(--v2-techhub-mobile-height);
    padding-block: var(--v2-techhub-pad-20);
  }

  @supports (height: 100svh) {
    .v2-section--techhub {
      --v2-techhub-mobile-height: calc(100svh - var(--v2-techhub-header-height));
    }
  }

  .v2-section--techhub .v2-techhub__inner {
    max-width: none;
  }

  .v2-section--techhub .v2-techhub__top {
    gap: var(--v2-techhub-gap-15);
    overflow: visible;
  }

  .v2-section--techhub .v2-techhub__top .v2-descriptor,
  .v2-section--techhub .v2-techhub__top .v2-descriptor__text {
    gap: var(--v2-techhub-gap-10);
    font-size: var(--v2-techhub-fs-12);
    font-weight: 400;
    line-height: 1;
    color: rgba(255, 255, 255, 0.4);
  }

  .v2-section--techhub .v2-techhub__top .v2-descriptor__dot {
    width: var(--v2-techhub-dot);
    height: var(--v2-techhub-dot);
  }

  .v2-section--techhub .v2-techhub__heading,
  .v2-section--techhub .v2-techhub__heading-line {
    max-width: var(--v2-techhub-content);
    font-size: var(--v2-techhub-fs-36);
    font-weight: 500;
    line-height: 1;
    color: #ffffff;
    overflow: visible;
  }

  .v2-section--techhub .v2-techhub__heading-line {
    white-space: nowrap;
  }

  .v2-section--techhub .v2-techhub__text {
    width: 100%;
    max-width: var(--v2-techhub-content);
    font-size: var(--v2-techhub-fs-14);
    font-weight: 400;
    line-height: 1.2;
    color: #ffffff;
  }

  .is-lang-uk .v2-section--techhub .v2-techhub__text {
    max-width: calc(100vw * 360 / 390);
    font-size: calc(100vw * 13 / 390);
    line-height: 1.25;
  }

  .is-lang-uk .v2-section--techhub .v2-techhub__text-br {
    display: none;
  }
}

@media (min-width: 1024px) {
  .v2-techhub__stage {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    padding-block: clamp(24px, 2.604vw, 50px);
    padding-inline: clamp(20px, 3.125vw, 60px);
  }

  .v2-techhub__inner {
    max-width: min(93.75vw, 1800px);
  }

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

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

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

  .v2-techhub__heading,
  .v2-techhub__heading-line {
    max-width: min(44.792vw, 860px);
    font-size: clamp(36px, 4.688vw, 90px);
  }

  .v2-techhub__heading-line {
    white-space: nowrap;
  }

  .v2-techhub__text {
    max-width: min(60.4167vw, 1160px);
    font-size: clamp(14px, 0.938vw, 18px);
    line-height: 1.22;
  }

  .v2-techhub__text-br {
    display: none;
  }

  .v2-techhub__text-br-desktop {
    display: inline;
  }

  .v2-techhub__text-space {
    display: none;
  }
}