@charset "UTF-8";
@import "global.css";

/* Header */
.header__wrapper {
  gap: 17.7rem;
  align-items: flex-start;
  padding: 3rem 0;
  font-family: var(--ff-stem);
  font-size: 1.6rem;
  line-height: 150%;
  letter-spacing: 0.032rem;
  text-transform: uppercase;
}
.header svg {
  width: 100%;
  height: 100%;
}
.header__logo {
  margin: 0.6rem 0 0;
  width: 10.1rem;
  height: 10.7rem;
}
.header__content {
  flex-grow: 1;
}
.header__navigation {
  gap: 4rem;
  padding: 1.7rem 0;
  list-style-type: none;
}
.header__contacts {
  gap: 4rem;
}
.header__contacts .button {
  padding: 1.8rem 2rem 1.4rem;
  font-family: var(--ff-stem);
}
.header__tg {
  width: 2.4rem;
  height: 2.4rem;
}
.header__toggle {
  display: none;
}


/* Breadcrumbs */
.breadcrumbs__wrapper {
  padding: 4.4rem 0 0;
}
.breadcrumbs__list {
  gap: 4.7rem;
  list-style-type: none;
}
.breadcrumbs__item {
  position: relative;
  font-family: var(--ff-uncage);
  font-size: 1.6rem;
  line-height: 150%;
  letter-spacing: 0.032rem;
  color: var(--color-grey-400);
}
.breadcrumbs__item:not(:last-child)::after {
  content: "/";
  position: absolute;
  top: 0;
  right: -2.7rem;
}
.breadcrumbs__item a {
  color: inherit;
}


/* Hero */
.hero__slider {
  position: relative;
  height: 80.3rem;
}
.hero__slide {
  position: relative;
  padding: 4.4rem 0 8rem;
}
.hero__slide-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
  justify-items: start;
}
.hero__counter {
  font-family: var(--ff-uncage);
  font-size: 1.6rem;
  line-height: 150%;
  letter-spacing: 0.032rem;
  color: var(--color-grey-400);
}
.hero__slide-content p {
  font-family: var(--ff-uncage);
  font-size: 6rem;
  line-height: 120%;
  text-transform: uppercase;
}
.hero__slide-content p span {
  font-size: 11rem;
  line-height: 120%;
}
.hero__buttons {
  position: absolute;
  bottom: 8rem;
  left: 8rem;
  display: none;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}
.hero__slider.swiper-initialized .hero__buttons {
  display: grid;
}
.hero__slide-image {
  position: absolute;
  top: 0;
  left: 0;
  z-index: var(--z-index--1);
  width: 100%;
  height: 100%;
}
.hero__slide-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* Location */
.location {
  background-color: var(--color-grey-700);
  color: var(--color-default-white);
}
.location__wrapper {
  padding: 8rem 0;
}
.location__wrapper,
.location__content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8rem;
}
.location__top {
  display: grid;
  grid-template-columns: 0.9fr 1fr;
  gap: 8rem;
  align-items: start;
}
.location__content-text {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  max-width: 64.6rem;
  font-weight: 400;
  font-size: 2.2rem;
  line-height: 150%;
}
.location__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
.location__item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.2rem;
  padding: 3rem;
}
.location__item:nth-child(1) {
  grid-column: span 2;
}
.location__item:nth-child(1),
.location__item:nth-child(5) {
  background-color: var(--color-default-white);
  color: var(--color-grey-700);
}
.location__item:nth-child(2) {
  background-color: var(--color-grey-600);
}
.location__item:nth-child(3) {
  background-color: var(--color-orange);
}
.location__item:nth-child(4) {
  background-color: var(--color-grey-500);
}
.location__item span {
  font-family: var(--ff-uncage);
  line-height: 120%;
}
.location__item span:first-child {
  font-size: 1.6rem;
}
.location__item span:last-child {
  font-size: 4rem;
}
.location__map {
  width: 100%;
  height: 46.7rem;
}
.location__map iframe {
  width: 100%;
  height: 100%;
  border: none;
  filter: grayscale(100%);
}


/* Infrastructure */
.infrastructure {
  background-color: var(--color-default-white);
}
.infrastructure__wrapper {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: start;
}
.infrastructure__content {
  position: sticky;
  top: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8rem;
  padding: 8rem 8rem 8rem 0;
}
.infrastructure__content-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 5rem;
}
.infrastructure__content-top span {
  font-family: var(--ff-uncage);
  font-size: 6rem;
  line-height: 120%;
}
.infrastructure__content-top p {
  font-size: 2.2rem;
  line-height: 150%;
}
.infrastructure__content-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
.infrastructure__content-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  padding: 3rem 2.5rem 3rem 3rem;
  background-color: var(--color-grey-100);
}
.infrastructure__content-item svg {
  width: 3.4rem;
  height: 3.4rem;
}
.infrastructure__content-item p {
  font-size: 2rem;
  line-height: 150%;
}
.infrastructure__list {
  display: grid;
  grid-template-columns: 1fr;
  border-left: 1px solid var(--color-grey-300);
}
.infrastructure__item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  padding: 8rem 8rem 7.9rem;
  font-family: var(--ff-uncage);
}
.infrastructure__item::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: calc(100% + 8rem);
  height: 1px;
  background-color: var(--color-grey-300);
}
.infrastructure__item div {
  gap: 2rem;
  align-items: flex-start;
}
.infrastructure__item span:first-child,
.infrastructure__item div span:only-child {
  font-weight: 400;
  font-size: 8rem;
  line-height: 120%;
}
.infrastructure__item span:last-child {
  margin: 0.5rem 0 0;
  font-size: 4rem;
  line-height: 120%;
}
.infrastructure__item div span:only-child {
  margin: 0;
}
.infrastructure__item p {
  font-size: 1.6rem;
  line-height: 120%;
}


/* Layout */
.layout {
  background-color: var(--color-grey-700);
  font-family: var(--ff-uncage);
  color: var(--color-default-white);
}
.layout__wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8rem;
  padding: 8rem 0 0;
}
.layout__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
}
.layout__top span {
  font-size: 6rem;
  line-height: 120%;
}
.layout__tabs {
  gap: 4.7rem;
  list-style-type: none;
  font-size: 1.6rem;
  line-height: 120%;
}
.layout__tab {
  position: relative;
  cursor: pointer;
}
.layout__tab:not(:last-child)::after {
  content: "/";
  position: absolute;
  right: -2.7rem;
  color: var(--color-default-white);
}
.layout__tab.is-active {
  color: var(--color-orange);
  text-decoration: underline;
}
.layout__tab-content {
  display: none;
}
.layout__tab-content.is-active {
  display: block;
}
.layout__panorama {
  position: relative;
  width: 100vw;
  max-width: 172.8rem;
  height: 93.8rem;
  margin: 0 -8rem;
}
.layout__panorama img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.layout__panorama-boxes {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.layout__panorama-boxes path {
  color: transparent;
  cursor: pointer;

  transition: var(--easy);
  -moz-transition: var(--easy);
  -o-transition: var(--easy);
  -webkit-transition: var(--easy);
}
.layout__panorama-boxes path.is-open {
  color: rgba(240, 121, 61, 0.8);
}
.layout__panorama-point {
  position: absolute;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  box-shadow: 0 0 0 6px rgba(23, 23, 23, 0.6);
  background-color: var(--color-orange);
  font-family: var(--ff-uncage);
  font-size: 1.6rem;
  line-height: 100%;
  color: var(--color-default-white);
  pointer-events: none;
}
.layout__panorama-point:nth-child(1) {
  top: 23.2rem;
  left: calc(50% - 27.6rem);
}
.layout__panorama-point:nth-child(2) {
  top: 25.5rem;
  left: calc(50% - 21.5rem);
}
.layout__panorama-point:nth-child(3) {
  top: 27.2rem;
  left: calc(50% - 15.6rem);
}
.layout__panorama-point:nth-child(4) {
  top: 28.5rem;
  left: calc(50% - 11.2rem);
}
.layout__panorama-point:nth-child(5) {
  top: 29.6rem;
  left: calc(50% - 6.6rem);
}
.layout__panorama-point:nth-child(6) {
  top: 30.9rem;
  left: calc(50% - 2.1rem);
}
.layout__panorama-point:nth-child(7) {
  top: 32.1rem;
  left: calc(50% + 2.6rem);
}
.layout__panorama-point:nth-child(8) {
  top: 33.4rem;
  left: calc(50% + 8.2rem);
}
.layout__panorama-point:nth-child(9) {
  top: 34.6rem;
  left: calc(50% + 12.7rem);
}
.layout__panorama-point:nth-child(10) {
  top: 35.6rem;
  left: calc(50% + 17.3rem);
}
.layout__panorama-point:nth-child(11) {
  top: 38rem;
  left: calc(50% + 21.3rem);
}
.layout__panorama-point:nth-child(12) {
  top: 39.3rem;
  left: calc(50% + 26.5rem);
}
.layout__panorama-point:nth-child(13) {
  top: 40.9rem;
  left: calc(50% + 31.4rem);
}
.layout__panorama-point:nth-child(14) {
  top: 42.3rem;
  left: calc(50% + 36.7rem);
}
.layout__panorama-point:nth-child(15) {
  top: 43.9rem;
  left: calc(50% + 42.2rem);
}
.layout__panorama-point:nth-child(16) {
  top: 45.6rem;
  left: calc(50% + 47.5rem);
}
.layout__panorama:has(.layout__panorama-boxes path:nth-child(1).is-open) .layout__panorama-point:nth-child(1),
.layout__panorama:has(.layout__panorama-boxes path:nth-child(2).is-open) .layout__panorama-point:nth-child(2),
.layout__panorama:has(.layout__panorama-boxes path:nth-child(3).is-open) .layout__panorama-point:nth-child(3),
.layout__panorama:has(.layout__panorama-boxes path:nth-child(4).is-open) .layout__panorama-point:nth-child(4),
.layout__panorama:has(.layout__panorama-boxes path:nth-child(5).is-open) .layout__panorama-point:nth-child(5),
.layout__panorama:has(.layout__panorama-boxes path:nth-child(6).is-open) .layout__panorama-point:nth-child(6),
.layout__panorama:has(.layout__panorama-boxes path:nth-child(7).is-open) .layout__panorama-point:nth-child(7),
.layout__panorama:has(.layout__panorama-boxes path:nth-child(8).is-open) .layout__panorama-point:nth-child(8),
.layout__panorama:has(.layout__panorama-boxes path:nth-child(9).is-open) .layout__panorama-point:nth-child(9),
.layout__panorama:has(.layout__panorama-boxes path:nth-child(10).is-open) .layout__panorama-point:nth-child(10),
.layout__panorama:has(.layout__panorama-boxes path:nth-child(11).is-open) .layout__panorama-point:nth-child(11),
.layout__panorama:has(.layout__panorama-boxes path:nth-child(12).is-open) .layout__panorama-point:nth-child(12),
.layout__panorama:has(.layout__panorama-boxes path:nth-child(13).is-open) .layout__panorama-point:nth-child(13),
.layout__panorama:has(.layout__panorama-boxes path:nth-child(14).is-open) .layout__panorama-point:nth-child(14),
.layout__panorama:has(.layout__panorama-boxes path:nth-child(15).is-open) .layout__panorama-point:nth-child(15),
.layout__panorama:has(.layout__panorama-boxes path:nth-child(16).is-open) .layout__panorama-point:nth-child(16) {
  background-color: var(--color-default-white);
  color: var(--color-grey-700);
}
.layout__panorama-info {
  position: absolute;
  top: 34.3rem;
  left: 76.5rem;
  z-index: var(--z-index-1);
  display: none;
  grid-template-columns: 1fr;
  gap: 3rem;
  width: 33.7rem;
  padding: 3rem;
  background-color: rgba(23, 23, 23, 0.8);
  -webkit-backdrop-filter: blur(1.4rem);
  backdrop-filter: blur(1.4rem);
  transform: translateX(-100%);
  font-family: var(--ff-uncage);
  color: var(--color-default-white);
}
.layout__panorama-info.is-open {
  display: grid;
}
.layout__panorama-info::after {
  content: "";
  position: absolute;
  top: -2.15rem;
  right: -2.15rem;
  width: 3.6rem;
  height: 3.6rem;
  transform: rotate(270deg);
  opacity: 0.8;
  background-image: url('../img/svg/triangle.svg');
  background-repeat: no-repeat;
  background-size: 100%;
}
.layout__panorama-info-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
.layout__panorama-info-content-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  justify-items: start;
}
.layout__panorama-info-name {
  font-size: 2.2rem;
  line-height: 120%;
}
.layout__panorama-info-size {
  font-size: 4rem;
  line-height: 120%
}
.layout__panorama-info-status {
  padding: 0.6rem 0.6rem 0.4rem 0.6rem;
  font-size: 1.2rem;
  line-height: 120%
}
.layout__panorama-info-status:not(.is-available) {
  background-color: var(--color-red);
}
.layout__panorama-info-status.is-available {
  background-color: var(--color-green);
}
.layout__panorama-info-status:empty {
  display: none;
}
.layout__panorama-info-content-bottom {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.8rem;
  font-size: 1.6rem;
  line-height: 120%;
}
.layout__panorama-info-content-bottom .only-desk {
  display: inline-block;
}
.layout__panorama-info-close {
  position: absolute;
  top: 3rem;
  right: 3rem;
  width: 1.8rem;
  height: 1.8rem;
  padding: 0;
  border: none;
  background-color: transparent;
  cursor: pointer;
}
.layout__panorama-info-close::before,
.layout__panorama-info-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 2px;
  background-color: var(--color-default-white);
}
.layout__panorama-info-close::before {
  transform: translateX(-50%) translateY(-50%) rotate(45deg);
}
.layout__panorama-info-close::after {
  transform: translateX(-50%) translateY(-50%) rotate(-45deg);
}
.layout__panorama-info-link svg {
  flex-shrink: 0;
}
.layout__panorama-info-link {
  padding: 1.6rem 3.6rem 1.2rem;
}
.layout__list-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  padding: 0 0 8rem;
}
.layout__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
}
.layout__item:nth-child(n+8) {
  display: none;
}
.layout__list.is-open .layout__item:nth-child(n+8) {
  display: grid;
}
.layout__item {
  display: grid;
  grid-template-columns: repeat(7, auto);
  justify-content: space-between;
  padding: 3rem;
  font-family: var(--ff-uncage);
  font-size: 1.6rem;
  line-height: 120%;
  text-transform: uppercase;
}
.layout__item:first-child {
  padding: 2rem 3rem;
}
.layout__item:not(:first-child) {
  background-color: var(--color-default-white);
  color: var(--color-grey-700);
}
.layout__item span:nth-child(1) {
  width: 16rem;
}
.layout__item span:nth-child(2) {
  width: 15.8rem;
}
.layout__item span:nth-child(3) {
  width: 16.3rem;
}
.layout__item span:nth-child(4) {
  width: 19.8rem;
}
.layout__item span:nth-child(5) {
  width: 15.5rem;
}
.layout__item span:nth-child(6) {
  width: 12.8rem;
}
.layout__item span:nth-child(7) {
  width: 18rem;
}
.layout__item span:not(:first-child, :last-child) {
  text-align: center;
}
.layout__item span:last-child:not(button span) {
  text-align: right;
}
.layout__item a {
  color: var(--color-orange);
  text-decoration: underline;
}
.layout__list-wrapper .button {
  justify-self: center;
}
.layout__list-wrapper .button.is-open::before {
  content: "Скрыть";
}
.layout__list-wrapper .button.is-open span {
  display: none;
}
.layout__panorama-finger {
  position: absolute;
  top: 34.8rem;
  left: 76rem;
  width: 11.9rem;
  height: 11.9rem;
  color: var(--color-default-white);
  animation: finger 2s infinite ease-in-out;
}


/* Visualization */
.visualization {
  background-color: var(--color-default-white);
}
.visualization__wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8rem;
  padding: 8rem 0 0;
  font-family: var(--ff-uncage);
}
.visualization__title {
  font-size: 6rem;
  line-height: 120%;
  color: var(--color-grey-600);
}
.visualization__cut {
  position: relative;
  width: 100vw;
  max-width: 172.8rem;
  height: 81.5rem;
  margin: 0 -8rem;
}
.visualization__cut img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.visualization__cut-point {
  position: absolute;
}
.visualization__cut-point:nth-child(1) {
  top: 22.6rem;
  left: calc(50% - 18.6rem);
}
.visualization__cut-point:nth-child(2) {
  top: 24.2rem;
  left: calc(50% - 10rem);
}
.visualization__cut-point:nth-child(3) {
  top: 24.2rem;
  left: calc(50% + 6.1rem);
}
.visualization__cut-point:nth-child(4) {
  top: 17.1rem;
  left: calc(50% + 8.3rem);
}
.visualization__cut-point:nth-child(5) {
  top: 22.6rem;
  left: calc(50% + 15.4rem);
}
.visualization__cut-point::before {
  content: attr(data-cut-content);
  position: absolute;
  bottom: calc(100% + 2.2rem);
  left: calc(100% + 2.2rem);
  z-index: var(--z-index-1);
  padding: 2rem;
  background-color: rgba(23, 23, 23, 0.6);
  -webkit-backdrop-filter: blur(1.4rem);
  backdrop-filter: blur(1.4rem);
  font-size: 1.6rem;
  line-height: 120%;
  color: var(--color-default-white);
  white-space: nowrap;

  opacity: 0;
  visibility: hidden;

  transition: var(--easy);
  -moz-transition: var(--easy);
  -o-transition: var(--easy);
  -webkit-transition: var(--easy);
}
.visualization__cut-point::after {
  content: "";
  position: absolute;
  bottom: calc(100% + 1px);
  left: calc(100% + 1px);
  width: 3.6rem;
  height: 3.6rem;
  background-image: url('../img/svg/triangle.svg');
  background-repeat: no-repeat;
  background-size: 100%;
  transform: scaleX(-1);

  opacity: 0;
  visibility: hidden;

  transition: var(--easy);
  -moz-transition: var(--easy);
  -o-transition: var(--easy);
  -webkit-transition: var(--easy);
}
.visualization__cut-point-inner {
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  box-shadow: 0 0 0 6px rgba(23, 23, 23, 0.6);
  background-color: var(--color-orange);
  font-size: 1.6rem;
  line-height: 100%;
  color: var(--color-default-white);
  cursor: pointer;
}
.visualization__cut-point:nth-child(1) .visualization__cut-point-inner,
.visualization__cut-point:nth-child(5) .visualization__cut-point-inner {
  animation: pulse 4s infinite;
}
.visualization__cut-point:nth-child(4) .visualization__cut-point-inner {
  animation: pulse 4s infinite;
  animation-delay: 1s;
}
.visualization__cut-point:nth-child(2) .visualization__cut-point-inner,
.visualization__cut-point:nth-child(3) .visualization__cut-point-inner {
  animation: pulse 4s infinite;
  animation-delay: 2s;
}


/* Quiz */
.quiz {
  position: relative;
}
.quiz__wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8rem;
  align-content: start;
  padding: 16rem 0;
  font-family: var(--ff-uncage);
  color: var(--color-default-white);
}
.quiz__title {
  font-size: 6rem;
  line-height: 120%;
  text-align: center;
}
.quiz__item {
  display: none;
  grid-template-columns: 1fr;
  gap: 4rem;
  justify-items: center;
}
.quiz__item.is-active {
  display: grid;
}
.quiz__item.to-show {
  animation: 0.4s toShow ease-in-out both;
}
.quiz__item.to-hide {
  position: absolute;
  left: 50%;
  width: 100%;
  animation: 0.4s toHide ease-in-out both;
}
.quiz__item p {
  font-size: 2.6rem;
  line-height: 120%;
  text-align: center;
}
.quiz__options {
  display: grid;
  gap: 1rem;
}
.quiz__options--2 {
  grid-template-columns: repeat(2, 1fr);
}
.quiz__options--3 {
  grid-template-columns: repeat(3, 1fr);
}
.quiz__option {
  position: relative;
  min-width: 38.45rem;
  padding: 6.2rem 3rem 3rem;
  background-color: var(--color-grey-600);
  font-family: var(--ff-uncage);
  font-size: 4rem;
  line-height: 120%;
  color: var(--color-default-white);
  cursor: pointer;
}
.quiz__option::after {
  content: "";
  position: absolute;
  top: 3rem;
  left: 3rem;
  width: 1rem;
  height: 1rem;
  background-color: var(--color-orange);

  transition: var(--easy);
  -moz-transition: var(--easy);
  -o-transition: var(--easy);
  -webkit-transition: var(--easy);
}
.quiz__option:has(input:checked) {
  background-color: var(--color-orange);
}
.quiz__option:has(input:checked)::after {
  background-color: var(--color-default-white);
}
.quiz__form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  width: 45rem;
}
.quiz__form .button {
  margin: 1rem 0 0;
}
.quiz__image-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  z-index: var(--z-index--1);
  width: 100%;
  height: 100%;
}
.quiz__image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* Investor */
.investor__wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16rem;
  padding: 8rem 0;
}
.investor__top {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: start;
  font-family: var(--ff-uncage);
}
.investor__top::after {
  content: "";
  position: absolute;
  bottom: -8rem;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 1px;
  background-color: var(--color-grey-300);
}
.investor__top-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8rem;
  max-width: 70rem;
}
.investor__top-content span {
  font-size: 6rem;
  line-height: 120%;
}
.investor__top-content p {
  font-size: 1.2rem;
  line-height: 150%;
  letter-spacing: 0.024rem;
  color: var(--color-grey-400);
}
.investor__top-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
.investor__top-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.2rem;
  padding: 3rem;
}
.investor__top-item:nth-child(1) {
  background-color: var(--color-grey-600);
}
.investor__top-item:nth-child(2) {
  background-color: var(--color-orange);
}
.investor__top-item:nth-child(3) {
  background-color: var(--color-grey-500);
}
.investor__top-item:nth-child(4) {
  background-color: var(--color-default-white);
}
.investor__top-item:not(:last-child) {
  color: var(--color-default-white);
}
.investor__top-item span {
  text-transform: uppercase;
}
.investor__top-item span:first-child {
  font-size: 1.6rem;
  line-height: 140%;
}
.investor__top-item span:last-child {
  font-size: 1.6rem;
  line-height: 120%;
}
.investor__top-item span:last-child span {
  font-size: 4rem;
  line-height: 120%;
}
.investor__bottom {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: start;
}
.investor__bottom-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8rem;
}
.investor__bottom-content span {
  font-family: var(--ff-uncage);
  font-size: 6rem;
  line-height: 120%;
}
.investor__bottom-content p {
  font-size: 2.2rem;
  line-height: 150%;
}
.investor__faq-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
}
.investor__faq-item {
  background-color: var(--color-default-white);
}
.investor__faq-item-top {
  position: relative;
  gap: 2rem;
  padding: 3.5rem 3rem 3rem 5.5rem;
  cursor: pointer;
}
.investor__faq-item-top::before {
  content: "";
  position: absolute;
  top: 4.1rem;
  left: 3rem;
  width: 1rem;
  height: 1rem;
  background-color: var(--color-orange);
}
.investor__faq-item-top span {
  font-family: var(--ff-uncage);
  font-size: 2.6rem;
  line-height: 120%;
}
.investor__faq-item-top button {
  position: relative;
  width: 1.8rem;
  height: 1.8rem;
  padding: 0;
  border: none;
  background-color: transparent;
}
.investor__faq-item-top button::before,
.investor__faq-item-top button::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 1px;
  background-color: var(--color-grey-700);

  transition: var(--easy);
  -moz-transition: var(--easy);
  -o-transition: var(--easy);
  -webkit-transition: var(--easy);
}
.investor__faq-item-top button::before {
  transform: translateX(-50%) translateY(-50%);
}
.investor__faq-item-top button::after {
  transform: translateX(-50%) translateY(-50%) rotate(90deg);
}
.investor__faq-item.is-open .investor__faq-item-top button::after {
  transform: translateX(-50%) translateY(-50%) rotate(180deg);
}
.investor__faq-item-bottom {
  max-height: 0;
  overflow: hidden;
}
.investor__faq-item.is-open .investor__faq-item-bottom {
  max-height: 200rem;
}
.investor__faq-item-bottom-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  padding: 0 3rem 3rem;
  font-size: 2rem;
  line-height: 150%;
}


/* Card */
.card__wrapper {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: start;
  padding: 8rem 0 23.3rem;
}
.card__gallery {
  position: sticky;
  top: 0;
  padding: 7.4rem 8rem 0;
}
.card__slider {
  position: relative;
  width: 100%;
}
.card__slide {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8rem;
  justify-items: center;
}
.card__slide-image {
  width: 100%;
  aspect-ratio: 1/1;
  background-color: var(--color-grey-100);
}
.card__slide-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card__slide-footnote {
  padding: 1.4rem 1.6rem 1.2rem;
  background-color: var(--color-grey-600);
  font-family: var(--ff-uncage);
  font-size: 1.6rem;
  line-height: 150%;
  letter-spacing: 0.032rem;
  color: var(--color-default-white);
}
.card__slider:not(.swiper-initialized) .button-arrow {
  display: none;
}
.card__slider.swiper-initialized {
  width: 62.4rem;
}
.card__slider.swiper-initialized .button-arrow {
  position: absolute;
  top: 28.2rem;
}
.card__slider.swiper-initialized .button-arrow-prev {
  left: 1rem;
}
.card__slider.swiper-initialized .button-arrow-next {
  right: 1rem;
}
.card__content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 5rem;
  padding: 8rem;
  background-color: var(--color-default-white);
  font-family: var(--ff-uncage);
}
.card__content h1 span:last-child {
  color: var(--color-grey-500);
}
.card__deadline {
  position: relative;
  padding: 0.5rem 0 0 2.5rem;
  font-size: 2.6rem;
  line-height: 120%
}
.card__deadline::before {
  content: "";
  position: absolute;
  top: 1.2rem;
  left: 0;
  width: 1rem;
  height: 1rem;
  background-color: var(--color-orange);
}
.card__specifications-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  list-style-type: none;
  font-size: 1.6rem;
  line-height: 120%;
}
.card__specifications-item {
  display: grid;
  grid-template-columns: max-content auto;
  justify-content: space-between;
  padding: 0 0 1.9rem;
  border-bottom: 1px solid var(--color-grey-300);
}
.card__specifications-item-side-left {
  color: var(--color-grey-500);
}
.card__specifications-item-side-right {
  text-align: right;
}
.card__specifications-item-side-right span {
  color: var(--color-grey-400);
}
.card__buttons {
  gap: 2rem;
}
.card__buttons .button {
  flex-grow: 1;
}
.card__buttons .button.booked,
.card__buttons .button.sold {
  background-color: var(--color-red);
  pointer-events: none;
}
.card__buttons .button.booked span,
.card__buttons .button.booked svg,
.card__buttons .button.sold span,
.card__buttons .button.sold svg {
  display: none;
}
.card__buttons .button.booked::before {
  content: "Забронировано";
}
.card__buttons .button.sold::before {
  content: "Продано";
}
.button-show-price::after,
.button-show-conditionals::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 208px;
  height: 208px;
  background-image: url(../img/svg/flicker.svg);
  background-repeat: no-repeat;
  background-size: 100%;
  animation: flickering 2s linear infinite;
}
.button-show-price,
.button-show-conditionals {
  position: relative;
}
.button-show-conditionals {
  justify-self: center;
  width: 51.6rem;
}
.card__buttons .button {
  text-wrap: nowrap;
}

/* Conditions */
.conditions {
  background-color: var(--color-default-white);
}
.conditions__wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8rem;
  padding: 8rem 0 9.8rem;
}
.conditions__wrapper h2 {
  font-size: 6rem;
  line-height: 120%;
  letter-spacing: 0;
  color: var(--color-grey-700);
}
.conditions__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  font-family: var(--ff-uncage);
}
.conditions__item {
  display: flex;
  flex-direction: column;
}
.conditions__item:nth-child(1) {
  background-color: var(--color-grey-200);
}
.conditions__item:nth-child(1) .conditions__item-top {
  border-bottom: 1px solid var(--color-grey-300);
}
.conditions__item:nth-child(2) {
  background-color: var(--color-grey-500);
  color: var(--color-default-white);
}
.conditions__item:nth-child(2) .conditions__item-top {
  border-bottom: 1px solid var(--color-grey-400);
}
.conditions__item:nth-child(3) {
  background-color: var(--color-grey-600);
  color: var(--color-default-white);
}
.conditions__item:nth-child(3) .conditions__item-top {
  border-bottom: 1px solid var(--color-grey-500);
}
.conditions__item-top,
.conditions__item-bottom {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
  padding: 5rem;
}
.conditions__item-top > span,
.conditions__item-top-block span:last-child,
.conditions__item-bottom-block > span,
.conditions__item-bottom-block-inner span:last-child {
  font-size: 1.6rem;
  line-height: 120%;
}
.conditions__item-top-block {
  display: grid;
  grid-template-columns: 1fr;
}
.conditions__item-top-block span:first-child {
  font-size: 6rem;
  line-height: 120%;
}
.conditions__item-bottom {
  flex-grow: 1;
  align-content: space-between;
}
.conditions__item-bottom-block {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
}
.conditions__item-bottom-block-inner {
  display: flex;
  justify-content: space-between;
  gap: 2rem 4rem;
  flex-wrap: wrap;
}
.conditions__item-bottom-block-inner div {
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
}
.conditions__item:nth-child(2) .conditions__item-bottom-block-inner div:last-child {
  max-width: 50%;
}
.conditions__item-bottom-block-inner span:first-child {
  font-size: 4rem;
  line-height: 120%;
}


/* Page */
.page__wrapper {
  padding: 2rem 0 8rem;
}
.page__content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  padding: 8rem;
  background-color: var(--color-default-white);
  font-size: 2rem;
  line-height: 150%;
}
.page__content h1 {
  margin: 0 0 3rem;
}
.page__content h2:not(h1 + h2),
.page__content h3:not(h2 + h3) {
  margin: 3rem 0 0;
}
.page__content h2 {
  font-size: 4rem;
  line-height: 120%;
  letter-spacing: 0;
  color: var(--color-grey-700);
}
.page__content h3 {
  font-family: var(--ff-stem);
  font-size: 2.6rem;
  line-height: 120%;
}
.page__content ul,
.page__content ol {
  padding: 0 0 0 3rem;
}
.page__content a {
  text-decoration: underline;
}
.page__cookie input {
  width: 2rem;
  height: 2rem;
  margin: 0 1rem 0 0;
}


/* Error */
.error__wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  justify-items: center;
  padding: 9.3rem 0 16.1rem;
}
.error__wrapper span {
  font-family: var(--ff-uncage);
  font-weight: 400;
  font-size: 37rem;
  line-height: 120%;
  color: var(--color-grey-300);
}
.error__wrapper div {
  font-weight: 400;
  font-size: 2.2rem;
  line-height: 150%;
  color: var(--color-grey-400);
  text-align: center;
}
.error__wrapper a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2rem;
}


/* Cookie */
.cookie {
  position: fixed;
  bottom: 2rem;
  left: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-index-10);
  gap: 2rem;
  width: calc(100vw - 4rem);
  max-width: 172.8rem;
  padding: 3rem;
  background-color: var(--color-grey-700);
  color: var(--color-default-white);
}
.cookie.is-closed {
  display: none;
}
.cookie p {
  font-size: 1.6rem;
  line-height: 180%;
}
.cookie a {
  display: inline;
  color: inherit;
  text-decoration: underline;
}
.cookie__buttons {
  display: grid;
  grid-template-columns: repeat(2, 27.7rem);
  gap: 1rem;
}
.cookie__buttons .button-secondary {
  color: var(--color-default-white);
}
.cookie:not(.is-closed) + .tg-button {
  display: none;
}


/* Footer */
.footer {
  background-color: var(--color-grey-700);
  color: var(--color-default-white);
}
.footer__wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  font-weight: 400;
  font-size: 2.2rem;
  line-height: 150%;
}
.footer__block:not(:last-child) {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  justify-items: start;
}
.footer__block:nth-child(1) {
  padding: 8rem 8rem 8rem 0;
  border-right: 1px solid var(--color-grey-500);
}
.footer__block:nth-child(2) {
  padding: 8rem 0 8rem 8rem;
}
.footer__block:last-child {
  position: relative;
  grid-column: span 2;
  padding: 7.3rem 0 8rem;
}
.footer__block:last-child::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 1px;
  background-color: var(--color-grey-500);
}
.footer__block span {
  font-family: var(--ff-uncage);
  font-size: 8rem;
  line-height: 120%;
}
.footer__block a {
  color: var(--color-default-white);
}
.footer__block button {
  padding: 0;
  border: none;
  background-color: transparent;
  font-weight: 400;
  font-size: 2.2rem;
  line-height: 150%;
  color: var(--color-default-white);
  text-decoration: underline;
  cursor: pointer;
}
.footer__block p {
  font-size: 1.6rem;
}
.footer__block:last-child p:first-child {
  color: var(--color-grey-400);
}
.footer__block p a {
  text-decoration: underline;
}
.footer__block__link-center {
  margin-right: 9rem;
}

.tg-button {
  font-family: var(--ff-uncage);
  color: var(--color-default-white);
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 150%;
  letter-spacing: 0.032rem;
  position: fixed;
  right: -12rem;
  bottom: -1rem;
  z-index: var(--z-index-5);
  transform: translateX(-50%) translateY(-50%);
  background: #27A7E7;
  padding: 2.4rem 3.6rem 2.2rem;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.tg-button svg {
  width: 2.4rem;
  height: 2.4rem;
  margin-bottom: 0.4rem;
}

.cameras__title {
  font-size: 6rem;
  line-height: 120%;
  text-align: center;
}
.cameras__wrapper {
  position: relative;
  z-index: var(--z-index-5);
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  padding: 16rem 0;
  font-family: var(--ff-uncage);
  color: var(--color-default-white);
  justify-items: center;
}

.cameras::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  background: linear-gradient(0deg, rgba(23, 23, 23, 0.40) 0%, rgba(23, 23, 23, 0.80) 79.17%);
  z-index: 2;
}
.cameras__wrapper p {
  font-size: 2.6rem;
  line-height: 120%;
  text-align: center;
}
.cameras__wrapper .button {
  width: fit-content;
  z-index: 2;
}
.cameras {
  position: relative;
}
/* .cameras__image-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  z-index: var(--z-index--1);
  width: 100%;
  height: 100%;
} */
.cameras__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: var(--z-index-1);
}
.cameras__video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cameras-text {
  padding: 8rem 0;
  font-family: var(--ff-uncage);
  background-color: var(--color-default-white);
}
.cameras-text__title {
  font-size: 6rem;
  line-height: 120%;
  color: var(--color-grey-600);
}

.form-new__title {
  font-size: 4rem;
  font-weight: 500;
  font-family: var(--ff-uncage);
}
.form-new__text {
  font-size: 2.2rem;
  font-weight: 500;
}
.form-new__wrapper {
  display: grid;
  gap: 2rem;
}

.form__tg-button {
  font-family: var(--ff-uncage);
  color: var(--color-default-white);
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 150%;
  letter-spacing: 0.032rem;
  z-index: var(--z-index-5);
  background: #27A7E7;
  padding: 2.4rem 3.6rem 2.2rem;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
.form__tg-button svg {
  width: 2.4rem;
  height: 2.4rem;
  margin-bottom: 0.4rem;
}
.form__success-text {
  font-size: 2.2rem;
  font-weight: 500;
}
.form__success {
  display: grid;
  gap: 2rem;
  font-family: "NT Somic";
}

/* Hover */
@media (min-width: 1024px) {
  @media (hover: hover) {
    .header__navigation a:hover,
    .header__contacts a:hover,
    .footer__block a:hover,
    .footer__block button:hover,
    .page__content a:hover {
      color: var(--color-grey-400);
    }
    .breadcrumbs__item a:hover,
    .error__wrapper a:hover {
      color: var(--color-grey-700);
    }
    .cookie__buttons .button-secondary:hover {
      color: var(--color-orange);
    }
    .layout__panorama-boxes path:hover {
      color: rgba(240, 121, 61, 0.8);
    }
    .quiz__option:hover {
      background-color: var(--color-orange);
    }
    .quiz__option:hover::after {
      background-color: var(--color-default-white);
    }
    .layout__panorama:has(.layout__panorama-boxes path:nth-child(1):hover) .layout__panorama-point:nth-child(1),
    .layout__panorama:has(.layout__panorama-boxes path:nth-child(2):hover) .layout__panorama-point:nth-child(2),
    .layout__panorama:has(.layout__panorama-boxes path:nth-child(3):hover) .layout__panorama-point:nth-child(3),
    .layout__panorama:has(.layout__panorama-boxes path:nth-child(4):hover) .layout__panorama-point:nth-child(4),
    .layout__panorama:has(.layout__panorama-boxes path:nth-child(5):hover) .layout__panorama-point:nth-child(5),
    .layout__panorama:has(.layout__panorama-boxes path:nth-child(6):hover) .layout__panorama-point:nth-child(6),
    .layout__panorama:has(.layout__panorama-boxes path:nth-child(7):hover) .layout__panorama-point:nth-child(7),
    .layout__panorama:has(.layout__panorama-boxes path:nth-child(8):hover) .layout__panorama-point:nth-child(8),
    .layout__panorama:has(.layout__panorama-boxes path:nth-child(9):hover) .layout__panorama-point:nth-child(9),
    .layout__panorama:has(.layout__panorama-boxes path:nth-child(10):hover) .layout__panorama-point:nth-child(10),
    .layout__panorama:has(.layout__panorama-boxes path:nth-child(11):hover) .layout__panorama-point:nth-child(11),
    .layout__panorama:has(.layout__panorama-boxes path:nth-child(12):hover) .layout__panorama-point:nth-child(12),
    .layout__panorama:has(.layout__panorama-boxes path:nth-child(13):hover) .layout__panorama-point:nth-child(13),
    .layout__panorama:has(.layout__panorama-boxes path:nth-child(14):hover) .layout__panorama-point:nth-child(14),
    .layout__panorama:has(.layout__panorama-boxes path:nth-child(15):hover) .layout__panorama-point:nth-child(15),
    .layout__panorama:has(.layout__panorama-boxes path:nth-child(16):hover) .layout__panorama-point:nth-child(16),
    .layout__panorama:has(.layout__panorama-boxes path:nth-child(17):hover) .layout__panorama-point:nth-child(17) {
      background-color: var(--color-default-white);
      color: var(--color-grey-700);
    }
    .visualization__cut-point:hover::before {
      opacity: 1;
      visibility: visible;
    }
    .visualization__cut-point:hover::after {
      opacity: 0.6;
      visibility: visible;
    }
    .visualization__cut-point:hover .visualization__cut-point-inner {
      background-color: var(--color-default-white);
      color: var(--color-grey-700);
    }
    .quiz__form .button:hover {
      border: 1px solid var(--color-orange);
      background-color: var(--color-default-white);
      color: var(--color-orange);
    }
  }
}


/* Animation */
@keyframes toShow {
  0% {
    transform: translateY(2rem);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes toHide {
  0% {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateX(-50%) translateY(2rem);
    opacity: 0;
  }
}
@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  20% {
    transform: scale(1.2);
  }
  40% {
    transform: scale(1);
  }
}
@keyframes finger {
  0% {
    transform: translateY(0);
  }
  20% {
    transform: translateY(-4px);
  }
  30% {
    transform: translateY(0);
  }
  45% {
    transform: translateY(-4px);
  }
  60% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(0);
  }
}


/* Resize */
@media (min-width: 1729px) {
  /* Hero */
  .hero__buttons {
    left: calc(50% - 78.4rem);
  }

  /* Layout */
  .layout__panorama {
    margin: 0 0 8rem;
  }

  /* Visualization */
  .visualization__cut {
    margin: 0 0 8rem;
  }

  /* Cookie */
  .cookie {
    left: 50%;
    transform: translateX(-50%);
  }

  .tg-button { 
  }
}

@keyframes flickering {
  0% {
    left: -50%;
  }
  30%, 100% {
    left: 100%;
  }
}