* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  background: #0C0C0C;
  color: #fff;
  font-family: 'Ubuntu', sans-serif;
}

.container {
  overflow: hidden;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 97px 57px min-content min-content min-content;
  grid-template-areas:
      "a"
      "b"
      "c"
      "left"
      "d";
  align-items: start;
  padding: 47px 30px;
  padding-bottom: 0;
  gap: 0 98px;
}

.left {
  grid-area: left;
}

/* === VIDEO IN LEFT BLOCK === */
.videoContainer {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.videoContainer video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 24px 44.6px 0 rgba(78, 63, 228, 0.25);
  display: block;
}

/* BLOCK AREAS */
.block-a { grid-area: a; }
.block-b { grid-area: b; }
.block-c { grid-area: c; }
.block-d { grid-area: d; }

/* TEXT */
.block-a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-transform: uppercase;
  font-family: 'Unbounded', sans-serif;
  font-weight: 700;
  font-size: 39px;
}

.name-bottom {
  display: flex;
}

.name-bottom-right {
  position: relative;
  font-size: 12px;
  margin: 9px 0 0 20px;
  max-height: fit-content;
  transition: color 0.3s ease;
  cursor: pointer;
}

.name-bottom-right:hover {
  color: #4A3BDF;
}

.name-custom-tooltip {
  position: absolute;
  bottom: -370%;
  left: -40%;
  transform: translateX(-50%);
  margin-bottom: 8px;
  background: linear-gradient(180deg, #2D2B2B 0%, #1A1A1A 100%);
  color: #828287;
  font-family: 'Ubuntu', sans-serif;
  font-size: 13px;
  font-weight: 400;
  padding: 12px;
  border-radius: 8px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 10;
  text-transform: none;
}

.name-bottom-right:hover .name-custom-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(-4px);
}

.block-b {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 13px;
  color: #828287;
  margin-top: 18px;
}

.no-cardboard {
  position: relative;
  transition: color 0.3s ease;
  cursor: pointer;
}

.no-cardboard:hover {
  color: #4A3BDF;
}

.no-cardboard-tooltip {
  position: absolute;
  bottom: -520%;
  left: -60%;
  transform: translateX(-50%);
  margin-bottom: 8px;
  background: linear-gradient(180deg, #2D2B2B 0%, #1A1A1A 100%);
  color: #828287;
  font-family: 'Ubuntu', sans-serif;
  font-size: 13px;
  font-weight: 400;
  padding: 12px;
  border-radius: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 10;
  text-transform: none;
  width: 250px;
}

.no-cardboard:hover .no-cardboard-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(-4px);
}

.hello-bottom .highlight {
  color: #ffffff;
}

.block-c {
  margin: 62px 0 72px;
}

.block-d {
  margin-top: 30px;
}

.footer {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12px;
  color: #828287;
}

.footer a {
  color: #828287;
  text-decoration: none;
}

.footer a:hover {
  color: #4A3BDF;
}

/* === MEDIA QUERIES === */

@media (min-width: 460px) {
  .no-cardboard-tooltip {
    bottom: -420%;
    left: 10%;
    white-space: nowrap;
    width: auto;
  }
}

@media (min-width: 744px) {
  .container {
    grid-template-columns: 1fr;
    grid-template-areas:
      "a"
      "b"
      "c"
      "left"
      "d";
    grid-template-rows: 175px 78px min-content min-content min-content;
    padding: 69px 30px 0;
  }

  .block-a {
    font-size: 72px;
    padding: 0 44px;
  }

  .name-bottom-right {
    font-size: 20px;
  }

  .block-b {
    font-size: 20px;
    padding: 0 44px;
    margin-top: 27px;
  }

  .block-c {
    margin: 89px 0 96px 44px;
  }

  .name-custom-tooltip {
    bottom: -230%;
    left: 40%;
  }

  .no-cardboard-tooltip {
    bottom: -250%;
  }

  .videoContainer video {
    height: 404px;
    object-position: top center;
  }

  .block-d {
    margin-top: 43px;
  }
}

@media (min-width: 1280px) {
  .container {
    grid-template-columns: auto 1fr;
    grid-template-rows: 163px 49px min-content min-content;
    grid-template-areas:
    "left a"
    "left b"
    "left c"
    "left d";
    padding-top: 56px;
    padding-left: 80px;
  }

  .videoContainer video {
    width: 447px;
    height: 569px;
    margin: 0 0 75px;
    object-position: center center;
  }

  .block-a {
    font-size: 59px;
    padding: 0;
  }

  .name-bottom-right {
    font-size: 16px;
  }

  .block-b {
    gap: 3px;
    font-size: 14px;
    padding: 0;
  }

  .block-c {
    margin: 69px 0 44px;
  }

  .name-custom-tooltip {
    bottom: -280%;
  }

  .no-cardboard-tooltip {
    bottom: -360%;
  }
}

@media (min-width: 1440px) {
  .container {
    gap: 0 91px;
    grid-template-rows: 255px 73px min-content min-content;
    padding-left: 77px;
    padding-top: 76px;
  }

  .videoContainer video {
    width: 567px;
    height: 832px;
  }

  .block-a {
    font-size: 72px;
    margin-top: 67px;
  }

  .name-bottom-right {
    font-size: 20px;
  }

  .block-b {
    font-size: 20px;
    margin-top: 19px;
  }

  .block-c {
    margin: 118px 0 44px;
  }

  .name-custom-tooltip {
    bottom: -230%;
  }

  .no-cardboard-tooltip {
    bottom: -260%;
  }

  .block-d {
    margin-top: 95px;
  }
}

@media (min-width: 1920px) {
  .container {
    grid-template-rows: 271px 75px min-content min-content;
    gap: 0 146px;
    padding: 70px 30px 0 100px;
  }

  .videoContainer video {
    width: 845px;
    height: 832px;
  }

  .block-a {
    margin-top: 81px;
  }

  .block-d {
    margin-top: 114px;
  }
}