@charset "UTF-8";

.home .hero {
  min-height: 100vh;
  min-height: 100svh;
}

.hero {
  position: relative;
  min-height: calc(100vh - 140px);
  min-height: calc(100svh - 140px);
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: var(--sp) 0;
  color: var(--secondary-1);
  background: var(--secondary-2);
  overflow: hidden;
}

.hero__container {
  position: relative;
  z-index: 3;
}

.hero__content {
  width: 100%;
  max-width: 527px;
}

.hero__uptitle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.hero__uptitle svg {
  display: block;
  width: auto;
  max-height: 23px;
}

.hero__subtitle {
  position: relative;
  margin-top: 16px;
  text-transform: uppercase;
  letter-spacing: -0.2px;
  overflow: hidden;
  --duration: 3s;
  /* час для одного span */
  --total: calc(var(--duration) * var(--count));
}

.hero__subtitle::before {
  content: "box";
  color: transparent;
}

.hero__subtitle span {
  position: absolute;
  left: 0;
  bottom: 0;
  opacity: 0;
  transform: translateY(100%);
}

.hero__subtitle span:first-child {
  opacity: 1;
  transform: translateY(0);
}

.hero__subtitle.is-animated span {
  -webkit-animation: hero-fade-up var(--total) linear infinite;
  animation: hero-fade-up var(--total) linear infinite;
  -webkit-animation-delay: calc(var(--i) / var(--count) * var(--total));
  animation-delay: calc(var(--i) / var(--count) * var(--total));
}

.hero__subtitle.is-animated span:first-child {
  -webkit-animation-name: hero-fade-up-first;
  animation-name: hero-fade-up-first;
}

@-webkit-keyframes hero-fade-up {
  /* кожен span займає свою частину загального часу */
  0% {
    transform: translateY(100%);
    opacity: 0;
  }

  5% {
    opacity: 1;
  }

  20% {
    transform: translateY(0);
    opacity: 1;
  }

  30% {
    opacity: 1;
  }

  40% {
    opacity: 0;
  }

  100% {
    opacity: 0;
    transform: translateY(0);
  }
}

@keyframes hero-fade-up {
  /* кожен span займає свою частину загального часу */
  0% {
    transform: translateY(100%);
    opacity: 0;
  }

  5% {
    opacity: 1;
  }

  20% {
    transform: translateY(0);
    opacity: 1;
  }

  30% {
    opacity: 1;
  }

  40% {
    opacity: 0;
  }

  100% {
    opacity: 0;
    transform: translateY(0);
  }
}

@-webkit-keyframes hero-fade-up-first {
  0% {
    transform: translateY(0);
    opacity: 1;
  }

  20% {
    transform: translateY(0);
    opacity: 1;
  }

  30% {
    opacity: 1;
  }

  40% {
    opacity: 0;
  }

  100% {
    opacity: 0;
    transform: translateY(0);
  }
}

@keyframes hero-fade-up-first {
  0% {
    transform: translateY(0);
    opacity: 1;
  }

  20% {
    transform: translateY(0);
    opacity: 1;
  }

  30% {
    opacity: 1;
  }

  40% {
    opacity: 0;
  }

  100% {
    opacity: 0;
    transform: translateY(0);
  }
}

.hero__text {
  width: 100%;
  max-width: 410px;
  margin-top: 8px;
  font-weight: 500;
  line-height: 130%;
  font-size: var(--s);
}

.hero__buttons {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
}

.hero__telegram {
  display: flex;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  width: 57px;
  aspect-ratio: 1;
  border-radius: 50%;
  transition: var(--transition);
  background: var(--secondary-1, #fff) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='16' viewBox='0 0 18 16' fill='none'%3E%3Cpath d='M1.23723 6.88797C6.06998 4.63021 9.29181 3.1417 10.9027 2.42245C15.5076 0.368853 16.4632 0.0121885 17.0874 0.000105283C17.2247 -0.00225581 17.5303 0.0341325 17.7297 0.207048C17.8954 0.35288 17.9421 0.550101 17.9654 0.688573C17.9861 0.826905 18.0146 1.14218 17.9913 1.38829C17.7426 4.19938 16.6627 11.021 16.1136 14.1696C15.8831 15.5018 15.4247 15.9485 14.9818 15.9921C14.0184 16.0871 13.288 15.3099 12.3557 14.6546C10.8975 13.6288 10.074 12.9904 8.65728 11.9896C7.02047 10.8329 8.08233 10.1971 9.01469 9.15823C9.25814 8.88629 13.5004 4.74882 13.5807 4.37355C13.591 4.3266 13.6014 4.1516 13.503 4.05938C13.4072 3.96688 13.2647 3.99855 13.1611 4.02355C13.0135 4.0591 10.6852 5.71131 6.16839 8.9799C5.50797 9.46712 4.9097 9.70462 4.371 9.69212C3.78051 9.67851 2.64095 9.33323 1.79405 9.03823C0.758096 8.67629 -0.0680822 8.48491 0.00443497 7.87019C0.0406935 7.55019 0.452487 7.22269 1.23723 6.88797Z' fill='%231E3D7A'/%3E%3C/svg%3E") center no-repeat;
  font-size: 0;
}

.hero__bg::before {
  content: "";
  inset: 0;
  position: absolute;
  background: linear-gradient(270deg, rgba(56, 57, 56, 0) -2.92%, rgba(56, 57, 56, 0.68) 43.82%, #383938 101.77%);
  z-index: 2;
}

.hero__bg,
.hero__bg img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.hero__bg img {
  -o-object-fit: cover;
  object-fit: cover;
  z-index: 1;
}

.hero.is-style-blue-mask {
  background: var(--primary-1);
}

.hero.is-style-blue-mask .hero__bg {
  left: 50%;
  top: 50%;
  transform: translateY(-50%);
  width: 770px;
  height: 510px;
}

.hero.is-style-blue-mask .hero__bg::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  z-index: 12;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='770' height='510' viewBox='0 0 770 510' fill='none'%3E%3Cpath d='M770 510H0V0H770V510ZM55.0391 7C49.8281 7 46.0442 7.95161 43.4062 9.47559C41.0818 11.0969 38.9085 16.0575 37.3408 24.0449L18.918 103.38C16.1288 114.21 19.6861 119.722 29.6973 119.722H144.47L59.8174 488.422C57.3416 498.398 61.6877 503.295 72.7041 503.295C109.019 503.414 145.346 503.533 181.661 503.641H285.2C293.189 503.641 298.638 502.29 301.579 499.75C304.239 497.21 307.277 493.232 310.736 488.152L351.766 406.493C369.496 371.517 387.216 336.541 404.946 301.575L430.937 248.44L478.354 144.073H484.053L482.917 246.301V301.575C484.398 336.551 485.879 371.528 487.36 406.493L490.453 491.644C491.037 496.81 493.026 500.149 496.334 501.619C499.729 502.938 504.075 503.641 509.156 503.641H611.475C616.675 503.641 619.831 501.987 620.999 498.744C622.253 495.35 622.589 492.561 622.47 490.173L592.825 119.722H714.02C723.447 119.722 729.577 114.21 732.453 103.38L750.886 24.0449C752.442 16.0577 752.442 11.097 750.583 9.47559H750.562C749.005 7.94078 745.232 7 739.566 7H55.0391ZM199.348 446.215L274.335 119.722H374.545L199.348 446.215Z' fill='%231E3D7A'/%3E%3C/svg%3E") center/cover no-repeat;
}

@media (max-width: 1260px) {
  .hero {
    min-height: calc(100vh - 75px);
  }

  .hero__uptitle svg {
    max-height: 20px;
  }

  .hero__subtitle {
    margin-top: 8px;
  }

  .hero__telegram {
    display: none;
  }

  .hero__bg::before {
    background: linear-gradient(270deg, rgba(56, 57, 56, 0) -27.8%, rgba(56, 57, 56, 0.68) 30.02%, #383938 101.68%);
  }

  .hero.is-style-blue-mask {
    padding-bottom: 534px;
  }

  .hero.is-style-blue-mask .hero__bg {
    bottom: 90px;
    top: auto;
    transform: translate(-48%, 0%);
    width: 670px;
    height: 380px;
  }
}

@media (max-width: 760px) {
  .home .hero {
    min-height: 812px;
  }

  .hero {
    justify-content: flex-start;
    min-height: 735px;
    padding-top: 100px;
  }

  .hero__bg::before {
    background: linear-gradient(0deg, rgba(56, 57, 56, 0) -3.65%, rgba(56, 57, 56, 0.68) 60.26%, #383938 124.16%);
  }

  .hero.is-style-blue-mask {
    padding-bottom: 414px;
  }

  .hero.is-style-blue-mask .hero__bg {
    bottom: 64px;
    top: auto;
    transform: translate(-48%, 0%);
    width: 430px;
    height: 291px;
  }
}