*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  width: 100%;
  min-height: max(100vh, calc(var(--browser-layout-width) * 1.05));
  background: #010102;
  overflow-x: hidden;
  overflow-y: auto;
}

html {
  --browser-layout-width: 100vw;
  --browser-layout-scale: 1;
  --home-artboard-scale: var(--browser-layout-scale);
}

body {
  font-family: "SF Pro Display", "SF Pro Rounded", "Circe", Arial, sans-serif;
  color: #ffffff;
}

a {
  color: inherit;
  text-decoration: none;
}

.figma-page {
  position: relative;
  width: 100%;
  min-height: max(100vh, calc(var(--browser-layout-width) * 1.05));
  margin: 0 auto;
  overflow: hidden;
  background: #010102;
}

.figma-artboard {
  position: absolute;
  left: var(--browser-artboard-left, max(0px, calc((100vw - 1920px) / 2)));
  top: 0;
  width: 1920px;
  height: 1940px;
  transform: scale(var(--home-artboard-scale, 1));
  transform-origin: top left;
  pointer-events: auto;
  background: #010102;
}

.gradient-field {
  position: absolute;
  width: 1920px;
  height: 2374px;
  left: -2px;
  top: -225.53px;
  transform: none;
  pointer-events: none;
  background-image: url("/static/image/main_fon.png?v=4");
  background-image: -webkit-image-set(
    url("/static/image/main_fon.webp?v=1") 1x,
    url("/static/image/main_fon.png?v=4") 1x
  );
  background-image: image-set(
    url("/static/image/main_fon.webp?v=1") type("image/webp"),
    url("/static/image/main_fon.png?v=4") type("image/png")
  );
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  contain: paint;
}

@media (min-width: 768px) and (max-width: 1199px) {
  html,
  body,
  .figma-page {
    min-height: max(100vh, var(--home-tablet-page-height, 1440px));
  }

  .figma-page {
    overflow-x: hidden;
    overflow-x: clip;
    overflow-y: visible;
  }

  .figma-artboard {
    position: absolute;
    left: var(--home-tablet-left, 0px);
    width: 1024px;
    height: 1440px;
    transform: scale(var(--home-artboard-scale, var(--home-tablet-scale, 1)));
    transform-origin: top left;
    overflow: hidden;
    overflow: clip;
  }

  .gradient-field {
    left: -159px;
    top: -161px;
    width: 1341px;
    height: 1658.09px;
    transform: none;
    background-image: url("/static/image/main_fon.png?v=4");
    background-image: -webkit-image-set(
      url("/static/image/main_fon.webp?v=1") 1x,
      url("/static/image/main_fon.png?v=4") 1x
    );
    background-image: image-set(
      url("/static/image/main_fon.webp?v=1") type("image/webp"),
      url("/static/image/main_fon.png?v=4") type("image/png")
    );
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    mix-blend-mode: normal;
  }
}

@media (max-width: 767px) {
  html,
  body {
    min-height: max(100vh, var(--home-mobile-page-height, 949px));
  }

  .figma-page {
    width: 100vw;
    min-height: max(100vh, var(--home-mobile-page-height, 949px));
    overflow-x: hidden;
    overflow-x: clip;
    overflow-y: visible;
    border-radius: 0;
  }

  .figma-artboard {
    position: absolute;
    left: 0;
    width: 375px;
    height: var(--home-mobile-artboard-height, 949px);
    transform: scale(var(--home-artboard-scale, 1));
    transform-origin: top left;
    border-radius: 0;
    overflow: hidden;
    overflow: clip;
  }

  .gradient-field {
    width: 692.46px;
    height: 856px;
    left: -159px;
    top: 1px;
    transform: none;
  }
}