@charset "utf-8";

@font-face {
  font-family: "Benzin";
  src: url("/fonts/Benzin-ExtraBold.woff") format("woff"),
    url("/fonts/Benzin-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Benzin";
  src: url("/fonts/Benzin-Medium.woff") format("woff"),
    url("/fonts/Benzin-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Lufga";
  src: url("/fonts/Lufga-Regular.woff") format("woff"),
    url("/fonts/Lufga-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --font: "Lufga", -apple-system, system-ui, "sans-serif";
  --fontTitle: "Benzin", -apple-system, system-ui, "sans-serif";
  --bgBody: #000000;
  --white: #fff;
  --black: #000;
  --gray: #ffffff40;
  --blue: #5aa9ff;
  --violet: #bb69ff;
  --purple: #bb69ff00;
  --dark: #333333;
  --dark2: #1d1d24;
  --bgBlock: #0e0e10;
  --strokeBlock: #3333334d;
  --gradient: linear-gradient(90.58deg, #00bfff 0%, #bb69ff 100%);
  font-size: 0.833333vw;
  --side1: clamp(10px, 4.0625rem, 65px);
  --side2: clamp(10px, 3.4375rem, 55px);
  --side: calc(var(--side1) + var(--side2));
  --stroke: #16161d;
  --header: clamp(60px, 9.625rem, 154px);
}

@media only screen and (min-width: 1920px) {
  :root {
    --side1: calc((100vw - 1790px) / 2);
  }
}

html,
body {
  height: 100%;
  box-sizing: border-box;
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased;
  font-optical-sizing: auto;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  background: var(--bgBody);
  font: normal 16px var(--font);
  color: var(--white);
  -webkit-text-size-adjust: none;
  display: flex;
  flex-direction: column;
}

*,
::after,
::before,
::backdrop,
::file-selector-button {
  margin: 0;
  padding: 0;
}

*,
::after,
::before,
::backdrop,
::file-selector-button {
  box-sizing: border-box;
  border: 0 solid;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

ol,
ul,
menu {
  list-style: none;
}

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  vertical-align: middle;
}

img,
video {
  max-width: 100%;
  height: auto;
}

*,
*:before,
*:after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

header,
nav,
section,
article,
aside,
footer,
menu,
time,
figure,
figcaption,
main {
  display: block;
}

img,
svg,
picture {
  border: 0;
  outline: none;
  vertical-align: top;
}

svg {
  fill: currentColor;
}

a {
  color: #009;
  text-decoration: underline;
  outline: none;
  cursor: pointer;
}

a:hover {
  text-decoration: none;
}

strong {
  font-weight: bold;
}

.btn {
  appearance: none;
  position: relative;
  flex: 0 0 auto;
  max-width: 100%;
  cursor: pointer;
  outline: none;
  border: 0;
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--white);
  height: clamp(32px, 4.5625rem, 73px);
  padding: 0 clamp(12px, 1.25rem, 20px);
  font: normal clamp(12px, 1.375rem, 22px) / 1.5 var(--font);
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  background: var(--gradient);
  border-radius: 100px;
}

.btn-white {
  color: var(--dark);
  background: var(--white);
}

.btn-small {
  height: clamp(24px, 3.125rem, 50px);
}

.btn-medium {
  height: clamp(32px, 3.9375rem, 63px);
  font-size: clamp(12px, 1.625rem, 26px);
}

.btn img {
  flex: 0 0 auto;
  width: clamp(16px, 2rem, 32px);
  height: clamp(16px, 2rem, 32px);
  object-fit: contain;
  object-position: center;
}

.o-letter {
  display: inline-block;
  position: relative;
}

.o-letter img {
  position: absolute;
  top: 39%;
  left: 50%;
  width: 0.716666em;
  height: 0.716666em;
  transform: translateX(-50%) translateY(-50%);
}

.nowrap {
  white-space: nowrap;
}

.mainwrap {
  flex: 0 0 auto;
  width: 100%;
  min-height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
}

.lines-bg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  pointer-events: none;
  z-index: 20;
}

.lines-bg:before,
.lines-bg:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1.5px;
  background-color: var(--stroke);
}

.lines-bg:before {
  left: var(--side1);
  transform: translateX(-50%);
}

.lines-bg:after {
  right: var(--side1);
  transform: translateX(50%);
}

.lines-cross {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  font-size: clamp(12px, 1.375rem, 22px);
  width: 1em;
  height: 1em;
  color: var(--white);
  transform: translate3d(-50%, -50%, 0);
  z-index: 20;
}

.lines-cross:before,
.lines-cross:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.5px;
  border-radius: 1px;
  background-color: currentColor;
}

.lines-cross:before {
  transform: translateY(-50%);
}

.lines-cross:after {
  transform: translateY(-50%) rotate(-90deg);
}

.header {
  flex: 0 0 auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header);
  padding: clamp(8px, 1.625rem, 26px) var(--side) 0 var(--side);
  border-bottom: 1.5px solid var(--stroke);
  position: relative;
}

.header .logo,
.header .app {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  text-decoration: none;
  color: var(--white);
  font: 500 clamp(16px, 1.5rem, 24px) / 1.225 var(--fontTitle);
  gap: 0.42em;
}

.header .app:hover {
  opacity: 0.7;
}

.header .app {
  cursor: pointer;
  transition: 0.2s;
}

.header .logo img,
.header .app img {
  flex: 0 0 auto;
  height: clamp(32px, 3.75rem, 60px);
  width: auto;
}

.header .lines-cross {
  top: calc(100% + 0.75px);
  left: var(--side1);
  color: var(--blue);
}

.content {
  flex: 1 0 auto;
  width: 100%;
}

.hero {
  border-bottom: 1.5px solid var(--stroke);
}

.hero .top {
  overflow: hidden;
  padding: 64px var(--side) clamp(24px, 2.1875rem, 35px) var(--side);
  font: 800 clamp(47px, 7.5rem, 120px) / 1 var(--fontTitle);
  text-align: center;
}

.hero .wrap {
  position: relative;
  display: inline-block;
  text-align: left;
  flex: 0 0 auto;
  z-index: 2;
}

.hero .title {
  font: inherit;
  text-transform: uppercase;
  margin: 0;
  display: inline-flex;
  flex-direction: column;
}

.hero .title > *:nth-child(2) {
  text-align: right;
}

.hero .title > *:nth-child(3) {
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero .wrap li {
  display: flex;
  align-items: center;
  height: clamp(32px, 4.5625rem, 73px);
  position: absolute;
  transform: translateY(-58%);
  padding: 0 clamp(16px, 2.1875rem, 35px);
}

.hero .wrap li:nth-child(1) {
  top: 0.5lh;
  right: 0;
  border-radius: 0.3em 0.04em 0.3em 0.3em;
  color: var(--white);
  background-color: var(--blue);
}

.hero .wrap li:nth-child(2) {
  top: 1.5lh;
  left: 0;
  border-radius: 0.3em 0.3em 0.3em 0.04em;
  color: var(--white);
  background: var(--gradient);
  min-width: 2.5em;
  justify-content: center;
}

.hero .wrap li:nth-child(3) {
  top: 3.5lh;
  right: 0;
  border-radius: 0.3em 0.3em 0.04em 0.3em;
  color: var(--dark);
  background-color: var(--white);
}

@media only screen and (max-width: 1023px) {
  .hero .title > * > *:not(.o-letter) {
    display: inline-block;
    vertical-align: middle;
    font-size: 80%;
  }

  .hero .wrap li:nth-child(3) img {
    display: none;
  }
}

.hero .wrap li > * {
  font: normal clamp(12px, 1.375rem, 22px) / 1.5 var(--font);
  display: flex;
  align-items: center;
  gap: 0.5em;
  flex: 0 0 auto;
}

.hero .wrap li img {
  flex: 0 0 auto;
  width: clamp(16px, 2rem, 32px);
  height: clamp(16px, 2rem, 32px);
  object-fit: contain;
  object-position: center;
}

.hero .image {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 150%;
  max-width: 800px;
  aspect-ratio: 3840/2160;
  margin-top: clamp(24px, 2rem, 32px);
}

.hero .image > * {
  width: 100%;
  height: 100%;
}

@media only screen and (orientation: landscape) {
  .hero .top {
    display: flex;
    align-items: center;
  }

  .hero .image {
    left: auto;
    flex: 0 0 auto;
    width: 82.5%;
    max-width: none;
    transform: translateX(-12.5%);
    margin: 0;
  }
}

.hero .bottom {
  position: relative;
  border-top: 1.5px solid var(--stroke);
  padding: clamp(16px, 1.875rem, 30px) var(--side);
}

.hero .bottom .lines-cross {
  top: -0.75px;
  left: calc(100% - var(--side1));
}

.benefits {
  border-bottom: 1.5px solid var(--stroke);
  position: relative;
}

.benefits > .lines-cross {
  top: calc(100% + 0.75px);
  left: var(--side1);
}

.benefits .title {
  position: relative;
  border-bottom: 1.5px solid var(--stroke);
  text-align: center;
  font: 800 clamp(40px, 15.25rem, 244px) / 1 var(--fontTitle);
  text-transform: uppercase;
  padding: clamp(64px, 9.5rem, 152px) var(--side1) 0 var(--side1);
}

.benefits .title .lines-cross {
  top: calc(100% + 0.75px);
  left: calc(100% - var(--side1));
}

.benefits .list {
  display: grid;
  grid-template-columns: 100%;
  gap: 10px;
  padding: clamp(24px, 3.125rem, 50px) var(--side);
}

@media only screen and (max-width: 639px) {
  .benefits .list {
    display: flex;
    flex-direction: column;
  }

  .benefits .list li {
    max-width: clamp(320px, 68rem, 630px);
    margin-left: auto;
    margin-right: auto;
  }
}

@media only screen and (min-width: 640px) and (max-width: 1023px) {
  .benefits .list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media only screen and (min-width: 1024px) {
  .benefits .list {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media only screen and (max-width: 1023px) {
  .benefits .list br {
    display: none;
  }
}

.benefits .list li {
  color: var(--gray);
  font-size: clamp(12px, 1.375rem, 22px);
  line-height: 1.5;
  text-align: center;
  padding: clamp(24px, 3.5625rem, 57px) clamp(16px, 2.75rem, 44px)
    clamp(16px, 2.75rem, 44px) clamp(16px, 2.75rem, 44px);
  background-color: var(--bgBlock);
  border: 2px solid var(--strokeBlock);
  border-radius: clamp(16px, 2.5rem, 40px);
  text-wrap: balance;
  width: 100%;
}

.benefits .icon {
  position: relative;
  font-size: clamp(80px, 8.75rem, 140px);
  width: 1em;
  height: 1em;
  margin: 0 auto clamp(16px, 3rem, 48px) auto;
  padding: 0.035em;
}

.benefits .icon > span {
  position: absolute;
}

.benefits .icon .t,
.benefits .icon .b {
  height: 1px;
  width: 142.85%;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(
    to right,
    color-mix(in srgb, var(--white) 0%, transparent) 0%,
    color-mix(in srgb, var(--white) 10%, transparent) 20%,
    color-mix(in srgb, var(--white) 10%, transparent) 80%,
    color-mix(in srgb, var(--white) 0%, transparent) 100%
  );
}

.benefits .icon .t {
  top: 0;
}

.benefits .icon .b {
  bottom: 0;
}

.benefits .icon .l,
.benefits .icon .r {
  width: 1px;
  height: 142.85%;
  top: 50%;
  transform: translateY(-50%);
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--white) 0%, transparent) 0%,
    color-mix(in srgb, var(--white) 10%, transparent) 20%,
    color-mix(in srgb, var(--white) 10%, transparent) 80%,
    color-mix(in srgb, var(--white) 0%, transparent) 100%
  );
}

.benefits .icon .l {
  left: 0;
}

.benefits .icon .r {
  right: 0;
}

.benefits .icon > div {
  width: 100%;
  height: 100%;
  border: 0.035em solid color-mix(in srgb, var(--white) 7%, transparent);
  border-radius: 0.2em;
  overflow: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
  display: flex;
  align-items: center;
  justify-content: center;
}

.benefits .icon .color {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 1;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}

.benefits li:nth-child(4n-3) .icon .color {
  background-image: url(/img/benefits/1.png);
}

.benefits li:nth-child(4n-2) .icon .color {
  background-image: url(/img/benefits/2.png);
}

.benefits li:nth-child(4n-1) .icon .color {
  background-image: url(/img/benefits/3.png);
}

.benefits li:nth-child(4n) .icon .color {
  background-image: url(/img/benefits/4.png);
}

@media (pointer: fine) {
  .benefits .icon .color {
    transition: filter 0.4s ease;
    filter: grayscale(100%);
  }

  .benefits li:hover .icon .color {
    filter: grayscale(0%);
  }
}

.benefits .icon img {
  flex: 0 0 auto;
  width: clamp(24px, 2.5rem, 40px);
  height: clamp(24px, 2.5rem, 40px);
  object-fit: contain;
  object-position: center;
  position: relative;
  z-index: 2;
}

.benefits .title-small {
  color: var(--white);
  font-weight: normal;
  font-size: clamp(16px, 1.875rem, 30px);
  line-height: 1.5;
  margin-bottom: 10px;
}

.how-it-works {
  position: relative;
  padding: clamp(64px, 10rem, 160px) var(--side);
  text-align: center;
  border-bottom: 1.5px solid var(--stroke);
}

.how-it-works .svg {
  position: absolute;
  width: 0;
  height: 0;
}

.how-it-works .lines-cross {
  top: calc(100% + 0.75px);
  left: calc(100% - var(--side1));
}

.how-it-works .title {
  font: 800 clamp(47px, 7.5rem, 120px) / 1 var(--fontTitle);
  text-transform: uppercase;
  margin-bottom: clamp(16px, 3rem, 48px);
}

.how-it-works .title .color {
  color: var(--violet);
}

.how-it-works .wrap {
  position: relative;
}

.how-it-works .wrap .bg {
  pointer-events: none;
}

.how-it-works .wrap .bg:not(.ready) {
  opacity: 0;
}

.how-it-works .wrap .bg > * {
  position: absolute;
  backface-visibility: hidden;
}

.how-it-works .wrap .bg > * > * {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
}

.how-it-works .wrap .bg > * > *:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  aspect-ratio: 1/1;

  background-image: radial-gradient(
      circle at 15% 25%,
      var(--blue) 0%,
      transparent 27%
    ),
    radial-gradient(circle at 85% 75%, var(--blue) 0%, transparent 24%),
    radial-gradient(circle at 50% 10%, var(--violet) 0%, transparent 21%),
    radial-gradient(circle at 70% 60%, var(--blue) 5%, transparent 22%),
    radial-gradient(circle at 30% 90%, var(--purple) 0%, transparent 19%),
    radial-gradient(ellipse at 90% 40%, var(--blue) 0%, transparent 25%),
    linear-gradient(160deg in oklch, var(--blue) 0%, transparent 52%),
    linear-gradient(
      75deg in oklch,
      var(--blue) 0%,
      var(--purple) 25%,
      transparent 67%
    ),
    linear-gradient(
      200deg in oklch,
      var(--blue) 0%,
      var(--violet) 30%,
      transparent 82%,
      var(--purple) 100%
    );
}

.how-it-works .wrap .bg > *:after {
  content: "";
  position: absolute;
  top: -0.015873em;
  left: -0.015873em;
  bottom: 0;
  right: 0;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  box-shadow: 0 0 0 10px var(--bgBody);
}

@keyframes how-it-works {
  from {
    transform: translate3d(-50%, -50%, 0) rotate(0deg);
  }

  to {
    transform: translate3d(-50%, -50%, 0) rotate(360deg);
  }
}

.how-it-works ol {
  counter-reset: how;
}

.how-it-works li {
  width: 1em;
  height: 0.444em;
  position: absolute;
  border-radius: 0.063em;
  border: 1.5px dashed color-mix(in srgb, var(--dark) 70%, transparent);

  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;

  display: flex;
  align-items: center;
  z-index: 2;
}

.how-it-works li:nth-child(1) {
  background-image: url(/img/how-it-works/bg1.png);
}

.how-it-works li:nth-child(2) {
  background-image: url(/img/how-it-works/bg2.png);
}

.how-it-works li:nth-child(3) {
  background-image: url(/img/how-it-works/bg3.png);
}

.how-it-works li:before {
  content: counter(how, decimal-leading-zero);
  counter-increment: how;
  font: 800 0.0317em/1 var(--fontTitle);
  position: absolute;
  width: 3.5em;
  height: 3.5em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.how-it-works .text {
  font: normal min(0.047em, clamp(16px, 1.875rem, 30px)) / 1.5 var(--font);
  margin-left: 55.555%;
  padding-right: 2em;
  text-wrap: balance;
  text-align: left;
}

.how-it-works li:nth-child(2) .text {
  margin-left: 60%;
}

.how-it-works .text .btn {
  display: inline-flex;
  margin-top: clamp(12px, 1.25rem, 20px);
}

@media only screen and (orientation: landscape) {
  .how-it-works .wrap {
    width: 2.682em;
    height: 1.063492em;
    font-size: min(39.375rem, 630px);
  }

  .how-it-works .wrap .bg > * > *:before {
    width: 300%;
  }

  .how-it-works .bg .l {
    width: 0.768253em;
    height: 0.679365em;
    top: 0.201587em;
    left: 0.533333em;
  }

  .how-it-works .bg .l > *:before {
    animation: how-it-works 4s linear infinite;
    top: 0;
    left: 0;
  }

  .how-it-works .bg .l:after {
    background-image: url(/img/how-it-works/landscape-left.svg);
    width: 0.8em;
    height: 0.711111em;
  }

  .how-it-works .bg .r {
    width: 0.71746em;
    height: 0.628571em;
    top: 0.238095em;
    right: 0.611111em;
  }

  .how-it-works .bg .r > *:before {
    animation: how-it-works 4s linear infinite;
    top: 0;
    left: 100%;
  }

  .how-it-works .bg .r:after {
    background-image: url(/img/how-it-works/landscape-right.svg);
    width: 0.749206em;
    height: 0.660317em;
  }

  .how-it-works li:nth-child(1) {
    top: 0;
    left: 0;
  }

  .how-it-works li:nth-child(1):before {
    top: 6.4em;
    left: 100%;
    margin-left: 5.95em;
  }

  .how-it-works li:nth-child(2) {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }

  .how-it-works li:nth-child(2):before {
    top: 0.95em;
    left: -9.65em;
  }

  .how-it-works li:nth-child(3) {
    top: 0;
    right: 0;
  }

  .how-it-works li:nth-child(3):before {
    top: 11.225em;
    left: -10.325em;
  }
}

@media only screen and (orientation: portrait) {
  .how-it-works .wrap {
    width: 1em;
    height: 1.682539em;
    margin: 0 auto;
    font-size: clamp(320px, 68rem, 630px);
  }

  .how-it-works .wrap .bg > * > *:before {
    height: 120%;
  }

  .how-it-works .bg .l {
    width: 0.249em;
    height: 0.709em;
    top: 0.167em;
    right: 100%;
    margin-right: 0.048em;
  }

  .how-it-works .bg .l > *:before {
    animation: how-it-works 4s linear infinite reverse;
  }

  .how-it-works .bg .l:after {
    background-image: url(/img/how-it-works/portrait-left.svg);
    width: 0.280952em;
    height: 0.741269em;
  }

  .how-it-works .bg .r {
    width: 0.251em;
    height: 0.652em;
    bottom: 0.211em;
    left: 100%;
    margin-left: 0.048em;
  }

  .how-it-works .bg .r > *:before {
    animation: how-it-works 4s linear infinite;
  }

  .how-it-works .bg .r:after {
    background-image: url(/img/how-it-works/portrait-right.svg);
    width: 0.282539em;
    height: 0.684126em;
  }

  .how-it-works li {
    left: 0;
  }

  .how-it-works li:nth-child(1) {
    top: 0;
    left: 0;
  }

  .how-it-works li:nth-child(1):before {
    top: 5.35em;
    left: -9.35em;
  }

  .how-it-works li:nth-child(2) {
    top: 50%;
    transform: translateY(-50%);
  }

  .how-it-works li:nth-child(2):before {
    top: 0.15em;
    left: -9.35em;
  }

  .how-it-works li:nth-child(3) {
    bottom: 0;
  }

  .how-it-works li:nth-child(3):before {
    top: -0.6em;
    right: -9.35em;
  }

  @media only screen and (max-width: 559px) {
    .how-it-works .bg {
      display: none;
    }

    .how-it-works li {
      position: relative;
      top: auto !important;
      left: auto !important;
      right: auto !important;
      bottom: auto !important;
      transform: translateZ(0) !important;
      margin-top: 0.2em;
    }

    .how-it-works li:before {
      right: auto !important;
      bottom: auto !important;
      left: 50% !important;
      top: -3.4em !important;
      transform: translate3d(-50%, -50%, 0);
      border: 2px solid var(--stroke);
      border-radius: 50%;
    }

    .how-it-works .wrap {
      aspect-ratio: unset;
    }
  }
}

.team {
  position: relative;
  border-bottom: 1.5px solid var(--stroke);
  text-align: center;
}

.team .inner {
  overflow: hidden;
  padding: clamp(64px, 10rem, 160px) var(--side);
  position: relative;
  display: flex;
  flex-direction: column;
}

.team .lines-cross {
  top: calc(100% + 0.75px);
  left: var(--side1);
}

.team .wrap {
  position: relative;
}

.team .image {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150%;
  aspect-ratio: 3840/2160;
  transform: translate3d(-50%, -50%, 0);
}

.team .image > * {
  width: 100%;
  height: 100%;
}

.team .title {
  font: 800 clamp(47px, 11.875rem, 190px) / 1 var(--fontTitle);
  text-transform: uppercase;
  margin-bottom: clamp(24px, 3.125rem, 50px);
  position: relative;
}

.team .title .color {
  display: inline-block;
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.team .list {
  margin: 0 auto;
  width: 100%;
  max-width: clamp(320px, 68rem, 630px);
  font: normal clamp(12px, 1.625rem, 26px) / 1.35 var(--font);
  color: var(--gray);
  text-wrap: balance;
}

.team .list li {
  border: 1.5px dashed color-mix(in srgb, var(--white) 10%, transparent);
  background-color: color-mix(in srgb, var(--bgBlock) 50%, transparent);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: clamp(16px, 2.5rem, 40px);
  padding: clamp(24px, 3.125rem, 50px);
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.team .list li:has(.title-bold) {
  justify-content: center;
}

.team .list li > img {
  display: block;
  width: clamp(16px, 2rem, 32px);
  height: clamp(16px, 2rem, 32px);
  margin: 0 auto clamp(10px, 1.25rem, 20px) auto;
  object-fit: contain;
  object-position: center;
}

.team .list li:nth-child(2) .btn {
  align-self: center;
  min-width: min(9em, 100%);
}

.team .title-small {
  color: var(--white);
  font-weight: normal;
  font-size: clamp(16px, 2.25rem, 36px);
  line-height: 1.2;
  margin-bottom: 10px;
}

.team .title-small .color {
  color: var(--blue);
}

.team .title-bold {
  font: 800 clamp(32px, 5.625rem, 90px) / 1 var(--fontTitle);

  color: var(--white);
}

@media only screen and (max-width: 767px) {
  .team .inner {
    min-height: 75vw;
    justify-content: center;
  }

  .team .list {
    display: grid;
    grid-template-columns: 100%;
    gap: clamp(24px, 3.125rem, 50px);
  }

  @media only screen and (orientation: landscape) {
    .team .list {
      grid-template-columns: repeat(3, 1fr);
      max-width: none;
    }
  }
}

@media only screen and (min-width: 768px) {
  .team .inner {
    padding-top: clamp(24px, 3.125rem, 50px);
    padding-bottom: clamp(24px, 3.125rem, 50px);
  }

  .team .wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1676/940;
    min-height: 480px;
  }

  .team .image {
    width: auto;
    height: 95%;
  }

  .team .title {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin: 0;
    transform: translateY(-35%);
  }

  .team .list li {
    position: absolute;
    background-color: color-mix(in srgb, var(--bgBlock) 10%, transparent);
  }

  .team .list li:nth-child(1) {
    top: 0;
    left: 0;
    max-width: min(39.375rem, 630px);
  }

  .team .list li:nth-child(2) {
    top: 5%;
    right: 0;
  }

  .team .list li:nth-child(2) .title-small {
    max-width: 6.61em;
  }

  .team .list li:nth-child(3) {
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    max-width: min(23.75rem, 380px);
  }

  .team .list li:nth-child(3) .text {
    width: 9.5em;
  }
}

.roadmap {
  border-bottom: 1.5px solid var(--stroke);
  padding: clamp(64px, 9.375rem, 150px) var(--side) clamp(64px, 6.25rem, 100px)
    var(--side);
}

.roadmap .title {
  font: 800 clamp(46px, 7.5rem, 120px) / 1 var(--fontTitle);
  text-transform: uppercase;
  margin-bottom: clamp(24px, 3.125rem, 50px);
  text-align: center;
}

.roadmap .title .color {
  display: inline-block;
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.roadmap .list {
  display: grid;

  gap: calc(clamp(10px, 1.25rem, 20px) + clamp(24px, 3.75rem, 60px)) 0;
  padding-left: clamp(10px, 1.25rem, 20px);
}

.roadmap .list > li {
  position: relative;
}

.roadmap .list > li:before {
  content: "";
  position: absolute;
  top: calc(clamp(32px, 5.3125rem, 85px) / 2);
  left: calc(clamp(10px, 1.25rem, 20px) * -1);
  border-top-left-radius: clamp(16px, 1.875rem, 30px);
  border-bottom-left-radius: clamp(16px, 1.875rem, 30px);
  right: 0;
  height: calc(
    clamp(32px, 5.3125rem, 85px) / 2 + clamp(16px, 2.5rem, 40px) +
      (clamp(12px, 1.375rem, 22px) * 1.5 + clamp(4px, 0.875rem, 14px) * 2 + 2px) /
      2
  );
  border: 2px solid var(--stroke);
  border-right-width: 0;
  width: calc(clamp(10px, 1.25rem, 20px) + clamp(24px, 3.75rem, 60px));
}

.roadmap .list > li:after {
  content: "";
  position: absolute;
  top: calc(clamp(32px, 5.3125rem, 85px) / 2);
  left: 0;
  width: 100%;
  border-style: solid;
  border-width: 2px 0 0 0;
  border-color: var(--stroke);
}

.roadmap .list .date {
  display: inline-flex;
  align-items: center;
  vertical-align: top;
  height: clamp(32px, 5.3125rem, 85px);
  margin-bottom: clamp(16px, 2.5rem, 40px);
  padding: 0 clamp(20px, 2.5rem, 40px);
  border-radius: 100px;
  background: var(--gradient);
  color: var(--white);
  position: relative;
  z-index: 2;

  font-weight: normal;
  font-size: clamp(16px, 1.875rem, 30px);
  line-height: 1.5;
}

.roadmap .list ul {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(4px, 0.875rem, 14px);
  position: relative;
  padding-left: clamp(24px, 3.75rem, 60px);
}

.roadmap .list ul li {
  font-size: clamp(12px, 1.375rem, 22px);
  line-height: 1.5;
  border: 2px solid var(--stroke);
  padding: clamp(4px, 0.875rem, 14px) clamp(20px, 2.5rem, 40px);
  background-color: var(--bgBody);
  border-radius: 100px;
  z-index: 2;
  position: relative;
}

@media only screen and (max-width: 639px) {
  .roadmap .list {
    grid-template-columns: 100%;
    padding-left: clamp(10px, 1.25rem, 20px);
    margin-left: auto;
    margin-right: auto;
    max-width: clamp(320px, 68rem, 630px);
  }

  .roadmap .list > li:after {
    display: none;
  }
}

@media only screen and (min-width: 640px) and (max-width: 767px) {
  .roadmap .list {
    grid-template-columns: repeat(2, 1fr);
    padding-left: clamp(10px, 1.25rem, 20px);
  }

  .roadmap .list > li:nth-child(even):after,
  .roadmap .list > li:last-child:after {
    display: none;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
  .roadmap .list {
    grid-template-columns: repeat(3, 1fr);
  }

  .roadmap .list > li:nth-child(3n):after,
  .roadmap .list > li:last-child:after {
    display: none;
  }
}

@media only screen and (min-width: 1024px) {
  .roadmap .list {
    grid-template-columns: repeat(4, 1fr);
    padding-left: 0;
  }

  .roadmap .list li:nth-child(4):after {
    height: calc(
      100% + clamp(10px, 1.25rem, 20px) + clamp(24px, 3.75rem, 60px)
    );
    border-right-width: 2px;
    border-bottom-width: 2px;
    border-top-right-radius: clamp(16px, 1.875rem, 30px);
    border-bottom-right-radius: clamp(16px, 1.875rem, 30px);
    width: 80%;
  }

  .roadmap .list li:nth-child(5) {
    grid-column: 4/5;
  }

  .roadmap .list li:nth-child(5):after {
    display: none;
  }

  .roadmap .list ul {
    padding-left: 0;
    left: clamp(24px, 3.75rem, 60px);
  }
}

.mint {
  position: relative;
  z-index: 30;
  background-color: var(--bgBody);
  padding: clamp(10px, 1.25rem, 20px);
  border-bottom: 1.5px solid var(--stroke);
}

.mint .bg {
  background-color: #f3f3f3;
  border-radius: clamp(16px, 1.875rem, 30px);
  backface-visibility: hidden;
  position: relative;
  overflow: hidden;
  text-align: center;
  color: var(--dark2);
  padding: clamp(32px, 6.125rem, 98px) clamp(24px, 6.5625rem, 105px);
  margin: 0 auto;
  max-width: 1880px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mint .bg-text {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%) translateY(-45%);
  white-space: nowrap;
  color: var(--black);
  font: 800 clamp(50px, 18.75rem, 300px) / 1 var(--fontTitle);
  text-transform: uppercase;
  mix-blend-mode: soft-light;
}

.mint .wrap {
  display: inline-block;
  text-align: left;
  position: relative;
  font: 800 clamp(47px, 9.375rem, 150px) / 1 var(--fontTitle);
}

.mint .title {
  font: inherit;
  text-transform: uppercase;
  margin: 0;
  display: inline-flex;
  flex-direction: column;
}

.mint .title > *:nth-child(2),
.mint .title > *:nth-child(3) {
  display: inline-block;
  vertical-align: top;
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.mint .title > * > span {
  color: var(--dark2);
}

.mint .text {
  position: absolute;
  top: 0.05em;
  right: 0;
  color: var(--dark);

  width: 2.85em;
  min-width: 170px;
}

.mint .text > * {
  font: normal clamp(12px, 1.5625rem, 25px) / 1.35 var(--font);
  max-width: 15.5em;
}

@media only screen and (max-width: 767px) {
  .mint .wrap {
    text-align: center;
  }

  .mint .text {
    position: relative;
    top: auto;
    right: auto;
    text-align: center;
    margin: 0 auto;
  }
}

.mint .image {
  position: absolute;
  top: 50%;
  left: 50%;

  transform: translateX(-50%) translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1/1;
}

.mint .image > * {
  width: auto;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  max-width: none;
  max-height: none;
}

.mint .btn {
  min-width: min(20.227272em, 100%);
}

@media only screen and (orientation: landscape) {
  .mint .bg {
    align-items: flex-start;
  }

  .mint .image {
    left: 75%;
    height: 100%;
  }

  .mint .image > * {
    height: 100%;
  }
}

@media only screen and (orientation: portrait) {
  .mint .bg {
    align-items: center;
    padding-bottom: 50vw;
  }

  .mint .image {
    width: 100%;
    top: 75%;
  }

  .mint .image > * {
    opacity: 0.5;
    height: 100%;
    transform: translateX(-50%) translateY(-50%) rotate(90deg);
  }
}

.footer {
  padding: 0 var(--side1);
}

.footer-logo {
  padding: clamp(32px, 6.25rem, 100px) clamp(10px, 8rem, 128px)
    clamp(24px, 5rem, 80px) clamp(10px, 8rem, 128px);
}

.footer-menu {
  padding: clamp(32px, 8rem, 128px) clamp(10px, 8rem, 128px)
    clamp(24px, 5rem, 80px) clamp(10px, 8rem, 128px);
  font: normal clamp(20px, 1.875rem, 30px) / 1.35 var(--font);
  color: var(--white);
}

.footer-menu a {
  text-decoration: none;
  color: inherit;
  transition: color 0.4s ease;
}

.footer-menu a:hover {
  color: var(--white);
}

.footer-menu > ul {
  display: flex;

  justify-content: center;
  flex-wrap: wrap;
  gap: 3em;
}

.footer-menu ul ul {
  flex: 0 0 auto;
  max-width: 100%;
  color: var(--gray);
  margin-top: 1em;
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 0.666em;
}

.footer-menu ul ul li {
  font-size: 83%;
}

@media only screen and (orientation: portrait) {
  .footer-logo {
    border-bottom: 1.5px solid var(--stroke);
  }
}

@media only screen and (orientation: landscape) {
  .footer {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }

  .footer-logo {
    border-right: 1.5px solid var(--stroke);
  }

  .footer-menu {
    padding-left: clamp(10px, 10.3125rem, 165px);
    padding-right: clamp(10px, 10.3125rem, 165px);
  }
}

.footer .logo {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--white);
  font: 500 clamp(16px, 2.125rem, 34px) / 1.225 var(--fontTitle);
  gap: 0.42em;
}

.footer .logo img {
  flex: 0 0 auto;
  height: clamp(32px, 6.25rem, 100px);
  width: auto;
}