#videoContainer {
  --cardsBgColor: #f2f4fc;
  position: relative;
  isolation: isolate;
  min-height: 100dvh;
}
@media (orientation: portrait) {
  #videoContainer .video {
    display: none;
  }
}

section#first,
section#second,
section#cards {
  min-height: 100dvh;
}

@media (orientation: landscape) {
  section#first,
  section#second,
  section#cards {
    min-height: 0;
    height: 100dvh;
  }
}

section#first {
  padding-block-start: calc(var(--headerHeight) + 3vh);
  overflow: hidden;
}

@media (orientation: landscape) {
  section#first {
    padding-block-start: calc(var(--headerHeight) + 12vh);
    overflow: unset;
  }
}

section#first .inner .head .info {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 720rem;
}

@media (orientation: landscape) {
  section#first .inner .head .info {
    display: block;
  }

  section#first .inner .head .info .edescription {
    margin-block-end: 36rem;
  }

  section#first .inner .head .info .btn {
    font-size: 17rem;
    padding-inline: 24rem;
    padding-block: 12rem;
    min-width: 184rem;
  }
}

section#second {
  padding-block: calc(var(--headerHeight) + 3vh) 0;
  overflow: hidden;
}

@media (orientation: landscape) {
  section#second {
    padding-block-start: 12vh;
    padding-block-end: 12vh;
    overflow: unset;
  }
}

/* @media (orientation: landscape) {
    section#second .inner .head .text {
      background: var(--color-bg);
    }
  } */

section#second .inner .head .etitle .text .silentLink {
  opacity: unset !important;
}

@media (max-width: 1024px) {
  section#second .inner .head .etitle {
    margin-block-end: 0;
  }
}

section#first,
section#second {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 36rem;
}

@media (orientation: landscape) {
  section#first,
  section#second {
    display: block;
  }
}

section#first .mobile-image,
section#second .mobile-image {
  width: 100%;
  margin-block-start: auto;
  flex-shrink: 0;
}

@media (orientation: landscape) {
  section#first .mobile-image,
  section#second .mobile-image {
    display: none;
  }
}

section#cards {
  display: flex;
  align-items: center;
  background: var(--cardsBgColor);
  padding-block: calc(var(--headerHeight) + 3vh) 12vh;
}

@media (orientation: landscape) {
  section#cards {
    padding-block: 3.5vh 7vh;
  }
}

@media (min-width: 1024px) {
  section#cards {
    padding-block: 11rem 74rem;
  }
}

/* @media (min-width: 1441px) {
    section#cards {
      padding-block: 0vh 7vh;
    }
  }

  @media (min-width: 2561px) {
    section#cards {
      padding-block: 2vh 7vh;
    }
  } */

section#cards :where(.etitle, .edescription) {
  text-align: center;
  color: var(--color-black);
}

section#cards .edescription {
  margin-block-end: 86rem;
}

@media (orientation: landscape) {
  section#cards .etitle {
    color: var(--color-black);
    display: flex;
    justify-content: center;
    max-width: 1120rem;
    margin-inline: auto;
    text-wrap: balance;
    min-height: 104rem;
  }

  section#cards .edescription {
    margin-block-end: 64rem;
  }
}

section#cards .inner {
  --sectionPadding: 29rem;
}

@media (orientation: landscape) {
  section#cards .inner {
    --sectionPadding: 46rem 42rem;
    padding-inline: var(--sectionPadding);
  }
}

section#cards .table {
  --borderWidth: 10rem;
  border: var(--borderWidth) solid transparent;
  border-image-repeat: round;
  position: relative;
  isolation: isolate;
  border-radius: 20rem;
  font-family: 'Roboto';
}

section#cards .table .content {
  position: relative;
  z-index: 1;
  background: #edf1fb;
  border-radius: inherit;
  margin-inline-start: -7rem;
  margin-inline-end: -8rem;
  margin-block-end: -7rem;
  margin-block-start: -5rem;
  padding-inline: 18rem;
}

section#cards .table .content table {
  font-size: 14rem;
  line-height: 125%;
  font-weight: 400;
  color: rgba(107, 109, 128, 0.64);
  width: 100%;
}

section#cards .table .content table thead tr th:not(:last-child),
section#cards .table .content table tbody tr td:not(:last-child) {
  padding-inline-end: 36rem;
}

section#cards .table .content table thead tr th {
  height: 46rem;
  vertical-align: middle;
  padding-block-start: 4rem;
}

section#cards .table .content table tbody tr.standart td {
  background: linear-gradient(
    270.82deg,
    #ffffff -109.42%,
    #a6a4c9 8.65%,
    #8682cd 99.29%
  );

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

section#cards .table .content table tbody tr.silver td {
  background: linear-gradient(
      0deg,
      rgba(209, 209, 209, 0.5),
      rgba(209, 209, 209, 0.5)
    ),
    linear-gradient(
      270deg,
      rgba(231, 231, 231, 0) 0%,
      rgba(236, 236, 236, 0.8) 67.5%,
      rgba(231, 231, 231, 0) 100%
    ),
    linear-gradient(
      270deg,
      #30373d 0%,
      #282f39 31%,
      #5e6671 62.5%,
      #323941 100%
    );

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

section#cards .table .content table tbody tr.silver td:last-child {
  background: linear-gradient(
      0deg,
      rgba(209, 209, 209, 0.5),
      rgba(209, 209, 209, 0.5)
    ),
    linear-gradient(
      270deg,
      rgba(231, 231, 231, 0) 0%,
      rgba(236, 236, 236, 0.8) 67.5%,
      rgba(231, 231, 231, 0) 100%
    ),
    linear-gradient(
      270deg,
      #30373d 0%,
      #282f39 31%,
      #5e6671 62.5%,
      #323941 100%
    );

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

section#cards .table .content table tbody tr.gold td {
  background: linear-gradient(275.83deg, #fff0d3 -33.28%, #d26c00 95.37%);

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

section#cards .table .content table tbody tr.platinum td {
  background: linear-gradient(
      90deg,
      rgba(178, 153, 154, 0.8) 0%,
      rgba(180, 179, 183, 0.8) 46%,
      rgba(177, 176, 181, 0.8) 73%,
      rgba(155, 197, 224, 0.8) 100%
    ),
    linear-gradient(
      270deg,
      #30373d 0%,
      #282f39 31%,
      #5e6671 62.5%,
      #323941 100%
    );

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

section#cards .table .content table tbody tr.black td {
  background: linear-gradient(
    270deg,
    #30373d 0%,
    #282f39 31%,
    #5e6671 62.5%,
    #323941 100%
  );

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

section#cards .table .content table tbody tr td {
  height: 68rem;
  vertical-align: middle;
  font-size: 16rem;
  line-height: 125%;
  font-weight: 500;
  border-block-start: 1rem solid rgba(0, 0, 0, 0.05);
  padding-block: 8rem;
}

#cards .head.observe.visible ~ .table .bg .big,
#cards .head.observe.visible ~ .table .bg .small {
  scale: 1 1;
}

section#cards .table .bg {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 0;
  translate: -50% -11%;
  pointer-events: none;
  display: grid;
  align-items: center;
  z-index: -1;
}

section#cards .table .bg .big,
section#cards .table .bg .small {
  position: relative;
  grid-area: 1/1;
  scale: 0.5 0.5;
  transition: scale 2s ease;
}

section#cards .table .bg .big {
  z-index: 1;
  width: 504rem;
}

section#cards .table .bg .small {
  z-index: 2;
  width: 428rem;
  translate: 9% -12%;
  transition-delay: 0.25s;
}

@media (orientation: landscape) {
  section#cards .table {
    display: none;
  }
}

section#cards .items {
  display: none;
}

@media (orientation: landscape) {
  section#cards .items {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-inline: 0;
    gap: 0;
    width: 100%;
    margin-inline: 0;
  }
}

section#cards .card {
  display: grid;
  width: 248rem;
  isolation: isolate;
  aspect-ratio: 0.6294416243654822 / 1;
  flex-shrink: 0;
}

section#cards .card .info {
  display: flex;
  flex-direction: column;
  gap: 12rem;
  grid-area: 1 / 1;
  padding-inline: 30rem;
  padding-block-start: 30rem;
  padding-block-end: 70%;
}

section#cards .card .img {
  display: block;
  width: 100%;
  grid-area: 1 / 1;
  z-index: -1;
  pointer-events: none;
  user-select: none;
}

section#cards .card {
  --cardTextColor: var(--color-black);
}

section#cards .card.invert {
  --cardTextColor: var(--color-font);
}

section#cards .card :where(.price, .commission) .label {
  font-size: 16rem;
  font-weight: 400;
  line-height: 125%;
  color: hsl(from var(--cardTextColor) h s l / 64%);
}

section#cards .card :where(.price, .commission) .value {
  font-size: 28rem;
  font-weight: 500;
  line-height: 125%;
  color: hsl(from var(--cardTextColor) h s l / 96%);
}

section#cards .card :where(.price, .commission) .value .amount {
  white-space: nowrap;
}

@media (orientation: landscape) {
  :root:has(#videoContainer) {
    --sectionsVideoDuration: calc(var(--videoDuration) * 1s);
    --sectionsVideoHalfDuration: calc(var(--sectionsVideoDuration) / 2);
    --cardsAnimationDelay: calc(var(--sectionsVideoDuration) / 4);
  }

  #wrapper:has(#videoContainer) #header {
    transition: translate var(--sectionsVideoDuration) ease;
    margin-block-end: calc(var(--headerHeight) * -1);
  }

  :root:not(.animate-to-section-0):has(
      #videoContainer > section#first:not(.active)
    )
    #header,
  :root.animate-from-section-0 #header {
    translate: 0 -100%;
  }

  #wrapper:has(#videoContainer) {
    overflow: hidden;
  }

  section#first .head,
  section#second .head,
  section#cards .head {
    transition-property: opacity, translate;
    transition-timing-function: ease, ease;
    transition-duration: var(--sectionsVideoHalfDuration);
  }

  :root.animate-from-section-0 section#first .head,
  :root.animate-from-section-1 section#second .head,
  :root.animate-from-section-2 section#cards .head {
    opacity: 0;
  }

  :root.animate-from-section-0 section#first .head,
  :root.animate-from-section-1 section#second .head {
    translate: 0 -100dvh;
  }

  :root.animate-from-section-1.animate-to-section-0 section#second .head {
    translate: 0 100dvh;
  }

  :root.animate-to-section-0 section#first .head,
  :root.animate-to-section-1 section#second .head,
  :root.animate-to-section-2 section#cards .head {
    transition-timing-function: cubic-bezier(0, 0, 0.13, 0.97);
    transition-duration: 0.5s;
  }

  :root.animate-to-section-0 section#first .head {
    transition-delay: calc(var(--sectionsVideoHalfDuration) / 2);
  }

  :root.animate-to-section-0 section#first:not(.active) .head,
  :root.animate-to-section-1 section#second:not(.active) .head,
  :root.animate-to-section-2 section#cards:not(.active) .head {
    translate: 0 30rem;
    opacity: 0;
  }

  section#cards .card .img {
    transition: opacity cubic-bezier(0, 0, 0.13, 0.97) 0.5s;
  }

  :root:not(.animate-from-section-2.animate-to-section-1)
    section#cards
    .card
    .img {
    transition-delay: var(--cardsAnimationDelay);
  }

  :root.animate-from-section-2 section#cards .card .img,
  section#cards:not(.active) .card .img {
    opacity: 0;
  }

  section#cards .card .info {
    --delayOffset: 0.15s;
    transition-property: opacity, translate;
    transition-timing-function: cubic-bezier(0, 0, 0.13, 0.97),
      cubic-bezier(0, 0, 0.13, 0.97);
    transition-duration: 0.5s;
    transition-delay: var(--cardsAnimationDelay);
  }

  section#cards .card:nth-child(1) .info {
    transition-delay: calc(var(--cardsAnimationDelay) + var(--delayOffset));
  }

  section#cards .card:nth-child(2) .info {
    transition-delay: calc(var(--cardsAnimationDelay) + var(--delayOffset) * 2);
  }

  section#cards .card:nth-child(3) .info {
    transition-delay: calc(var(--cardsAnimationDelay) + var(--delayOffset) * 3);
  }

  section#cards .card:nth-child(4) .info {
    transition-delay: calc(var(--cardsAnimationDelay) + var(--delayOffset) * 4);
  }

  section#cards .card:nth-child(5) .info {
    transition-delay: calc(var(--cardsAnimationDelay) + var(--delayOffset) * 5);
  }

  :root.animate-from-section-2 section#cards.active .card .info,
  section#cards:not(.active) .card .info {
    translate: 0 15rem;
    opacity: 0;
  }

  :root.animate-from-section-2 section#cards.active .card .info {
    --cardsAnimationDelay: 0s;
    translate: 0 -15rem;
  }

  section#cards {
    background: transparent;
  }

  #videoContainer {
    display: grid;
  }

  #videoContainer > section {
    grid-area: 1/1;
  }

  #videoContainer > section:not(.active) {
    visibility: hidden;
  }

  #videoContainer video {
    display: block;
    width: 100%;
  }

  #videoContainer .video {
    visibility: visible;
    pointer-events: none;
    position: absolute;
    width: 102%;
    display: block;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    height: 100%;
    z-index: -1;
    translate: -50% -50%;
  }

  @media (min-aspect-ratio: 21 / 9) {
    #videoContainer .video {
      width: 100%;
    }
  }

  #videoContainer video {
    position: absolute;
    width: 100%;
    z-index: 1;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    opacity: 0;
    translate: -50% -50%;
    transform-origin: 50% 50%;
    transition: translate var(--sectionsVideoHalfDuration, 1.5s) ease,
      filter var(--sectionsVideoHalfDuration, 1.5s) ease,
      opacity var(--sectionsVideoHalfDuration, 1.5s) ease;
  }

  #videoContainer video[src] {
    transition: translate var(--sectionsVideoHalfDuration, 1.5s) ease,
      opacity var(--sectionsVideoHalfDuration, 1.5s) ease,
      scale var(--sectionsVideoHalfDuration, 1.5s) ease;
  }

  :root[class*='animate-'] #videoContainer video[src] {
    transition: translate var(--sectionsVideoHalfDuration, 1.5s) ease,
      scale var(--sectionsVideoHalfDuration, 1.5s) ease;
  }

  #videoContainer video:not([src]).preparation:not(.active),
  #videoContainer video:not([src]).active.out {
    opacity: 0;
  }

  #videoContainer video.preparation {
    transform-origin: 50% 100%;
  }

  #videoContainer
    video:not([src]):where(.active, .in, .preparation:not(.active)) {
    transition-delay: var(--cardsAnimationDelay), var(--cardsAnimationDelay),
      var(--cardsAnimationDelay);
  }

  #videoContainer video.preparation {
    translate: -52% -44%;
    scale: 0.95 0.95;
    transition: none;
    opacity: 0;
  }

  #videoContainer video[data-thumb-path][data-poster-path],
  #videoContainer video[poster][data-poster-path] {
    filter: blur(16rem);
  }

  #videoContainer video:not([src]).cards-video-end,
  #videoContainer video:not([src]).cards-video-start {
    visibility: hidden;
  }

  :root.animate-from-section-1.animate-to-section-2
    #videoContainer:has(
      video:not([src]):is(.cards-video-end, .cards-video-start)
    )
    section#cards
    .card
    .img {
    transition-delay: 0s;
  }

  :root.animate-from-section-2.animate-to-section-1
    #videoContainer:has(
      video:not([src]):is(.cards-video-end, .cards-video-start)
    )
    section#cards
    .card
    .img {
    transition-delay: var(--cardsAnimationDelay);
  }

  #videoContainer:has(video:not([src]):is(.cards-video-end, .cards-video-start))
    section#cards
    .card
    .info {
    --cardsAnimationDelay: 0.05s;
  }

  #videoContainer video[src].active,
  #videoContainer video:not([src]):is(.active, .in) {
    opacity: 1;
  }

  :root:not(.animate-from-section-2.animate-to-section-1)
    #videoContainer:has(section#cards.active.current)
    video:is(.cards-video-start, .cards-video-end) {
    opacity: 0;
  }

  :root.animate-from-section-1.animate-to-section-2
    #videoContainer
    video.cards-video-start,
  #videoContainer:not(:has(section#second.active)) video.cards-video-end,
  #videoContainer:not(:has(section#second.active)) video.cards-video-start {
    scale: 0.755 0.75;
    translate: -50% -48%;
  }

  @media (min-aspect-ratio: 21 / 9) {
    :root.animate-from-section-1.animate-to-section-2
      #videoContainer
      video.cards-video-start,
    #videoContainer:not(:has(section#second.active)) video.cards-video-end,
    #videoContainer:not(:has(section#second.active)) video.cards-video-start {
      scale: 0.584 0.57;
      translate: -50% -48%;
    }
  }

  :root.animate-from-section-1.animate-to-section-2 #videoContainer {
    transition: background calc(var(--sectionsVideoDuration) * 21 / 100) linear;
    transition-delay: calc(
      var(--sectionsVideoDuration) * 30.52439342551526 / 100
    );
  }

  :root.animate-from-section-2.animate-to-section-1 #videoContainer {
    transition: background calc(var(--sectionsVideoDuration) * 29 / 100) linear;
    transition-delay: calc(
      var(--sectionsVideoDuration) * 41.74276024002087 / 100
    );
  }

  :root.animate-from-section-1.animate-to-section-2 #videoContainer,
  :root:not(.animate-from-section-2.animate-to-section-1)
    #videoContainer:has(section#cards.active) {
    background: var(--cardsBgColor);
  }
}