@media (min-width: 1920px) {
  .screen {
    background-color: #ffffff;
    width: 100%;
    min-width: 1920px;
    min-height: 1080px;
    position: relative;
  }

  .screen .image {
    position: absolute;
    top: 0;
    left: 1px;
    width: 1919px;
    height: 1080px;
    aspect-ratio: 1;
    object-fit: cover;
  }

  .screen .img {
    position: absolute;
    top: 0;
    left: 0;
    width: 1920px;
    height: 1078px;
    aspect-ratio: 1.78;
    object-fit: cover;
  }

  .screen .image-2 {
    position: absolute;
    top: 10px;
    left: 0;
    width: 500px;
    height: 1048px;
    aspect-ratio: 1;
    object-fit: cover;
  }

  .screen .image-3 {
    position: absolute;
    top: 680px;
    left: 705px;
    width: 242px;
    height: 242px;
    aspect-ratio: 1;
    object-fit: cover;
  }

  .screen .image-4 {
    position: absolute;
    top: 189px;
    left: 489px;
    width: 242px;
    height: 242px;
    aspect-ratio: 1;
    object-fit: cover;
  }

  .screen .view {
    position: absolute;
    top: calc(50.00% - 143px);
    left: calc(50.00% - 778px);
    width: 813px;
    height: 400px;
    background-color: #7366bdb2;
    border-radius: 406.5px / 200px;
    filter: blur(100px);
  }

  .screen .div {
    position: absolute;
    top: calc(50.00% - 266px);
    left: calc(50.00% - 777px);
    width: 169px;
    height: 157px;
    background-color: #7366bdb2;
    border-radius: 84.5px / 78.5px;
    filter: blur(100px);
  }

  .screen .image-5 {
    position: absolute;
    top: 0;
    left: 349px;
    width: 1571px;
    height: 1080px;
    aspect-ratio: 1;
    object-fit: cover;
  }

  .screen .image--tablet,
  .screen .img--tablet,
  .screen .image-2--tablet,
  .screen .image-3--tablet,
  .screen .image-4--tablet,
  .screen .image-5--tablet,
  .screen .element-6 {
    display: none;
  }

  .screen .logo {
    position: absolute;
    top: 61px;
    left: 203px;
    width: 172px;
    height: 61px;
    display: flex;
    gap: 3.8px;
    aspect-ratio: 2.82;
  }

  .screen .png {
    margin-top: 0;
    width: 60.84px;
    height: 60.84px;
    aspect-ratio: 1;
  }

  .screen .twexel {
    margin-top: 16.2px;
    width: 106.91px;
    height: 28.08px;
  }

  .screen .menu {
    display: inline-flex;
    align-items: center;
    gap: 44px;
    position: absolute;
    top: 82px;
    left: 441px;
  }

  .screen .button {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: flex-end;
    position: relative;
    flex: 0 0 auto;
  }

  .screen .text-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    margin-top: -1px;
    font-family: "Manrope", Helvetica;
    font-weight: 500;
    color: #000000;
    font-size: 20px;
    text-align: center;
    letter-spacing: 0;
    line-height: 20px;
    white-space: nowrap;
  }

  .screen .button-2 {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    position: relative;
    flex: 0 0 auto;
  }

  .screen .arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 13px;
    padding: 0;
    flex-shrink: 0;
    position: relative;
  }

  .screen .vector {
    display: block;
    width: 5px;
    height: 3.75px;
    margin: 0;
  }

  .screen .div-wrapper {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
    flex: 0 0 auto;
  }

  .screen .RU {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    position: relative;
    flex: 0 0 auto;
    cursor: pointer;
  }

  .screen .view-2 {
    display: inline-flex;
    height: 71px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px 26px;
    position: absolute;
    top: 690px;
    left: 1139px;
    background-color: #43328a;
    border-radius: 10px;
    box-shadow: 0px 4px 4px #00000040;
  }

  .screen .text-wrapper-2 {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    margin-top: -1.5px;
    font-family: var(--big-btn-1920px-font-family);
    font-weight: var(--big-btn-1920px-font-weight);
    color: var(--white);
    font-size: var(--big-btn-1920px-font-size);
    text-align: center;
    letter-spacing: var(--big-btn-1920px-letter-spacing);
    line-height: var(--big-btn-1920px-line-height);
    white-space: nowrap;
    font-style: var(--big-btn-1920px-font-style);
  }

  .screen .image-6 {
    position: absolute;
    top: 378px;
    left: 994px;
    width: 690px;
    height: 99px;
  }

  .screen .hero-title {
    position: absolute;
    top: 356px;
    left: 947px;
    width: 783px;
    height: 131px;
    margin: 0;
    display: block;
    font-family: "Barlow Condensed", Helvetica, sans-serif;
    font-weight: 600;
    color: #000000;
    font-size: 48px;
    letter-spacing: -1.44px;
    line-height: 52.8px;
    text-align: center;
  }

  .screen .hero-title__accent {
    font-weight: 700;
    background: linear-gradient(
      90deg,
      rgba(84, 69, 196, 1) 0%,
      rgba(106, 60, 153, 1) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }

  .screen .view-3 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px 24px;
    position: absolute;
    top: 64px;
    left: 1541px;
    background-color: #43328a;
    border-radius: 10px;
  }

  .screen .text-wrapper-3 {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    margin-top: -1px;
    font-family: "Manrope", Helvetica;
    font-weight: 400;
    color: var(--white);
    font-size: 20px;
    text-align: center;
    letter-spacing: 0;
    line-height: 20px;
    white-space: nowrap;
  }

  .screen .text-wrapper-4 {
    position: absolute;
    top: 506px;
    left: 1196px;
    width: 146px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Manrope", Helvetica;
    font-weight: 600;
    color: #1b1b1b;
    font-size: 24px;
    text-align: center;
    letter-spacing: -0.72px;
    line-height: 26.4px;
  }

  .screen .view-4 {
    display: flex;
    width: 154px;
    height: 34px;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 12px;
    position: absolute;
    top: 511px;
    left: 1342px;
    border-radius: 7px;
    background: linear-gradient(
      90deg,
      rgba(84, 69, 196, 1) 0%,
      rgba(106, 60, 153, 1) 100%
    );
  }

  .screen .text-wrapper-5 {
    position: relative;
    width: fit-content;
    margin-top: -1px;
    margin-left: -4px;
    margin-right: -4px;
    font-family: "Manrope", Helvetica;
    font-weight: 700;
    color: var(--white);
    font-size: 18px;
    letter-spacing: 0;
    line-height: 18px;
    white-space: nowrap;
  }

  .screen .view-5 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px 24px;
    position: absolute;
    top: 64px;
    left: 1431px;
    border-radius: 10px;
    border: 1px solid;
    border-color: #43328a;
  }

  .screen .text-wrapper-6 {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    margin-top: -1px;
    font-family: "Manrope", Helvetica;
    font-weight: 600;
    color: #43328a;
    font-size: 20px;
    text-align: center;
    letter-spacing: 0;
    line-height: 20px;
    white-space: nowrap;
  }

  .screen .element {
    position: absolute;
    top: 317px;
    left: 220px;
    width: 328px;
    height: 518px;
    aspect-ratio: 0.6;
    object-fit: cover;
  }

  .screen .element-2 {
    position: absolute;
    top: 631px;
    left: 386px;
    width: 326px;
    height: 186px;
    aspect-ratio: 1.96;
  }

  .screen .element-3 {
    position: absolute;
    top: 446px;
    left: 475px;
    width: 513px;
    height: 278px;
    aspect-ratio: 1.99;
    object-fit: cover;
  }

  .screen .element-4 {
    position: absolute;
    top: 356px;
    left: 374px;
    width: 280px;
    height: 116px;
    aspect-ratio: 3.16;
    object-fit: cover;
  }

  .screen .element-5 {
    position: absolute;
    top: 288px;
    left: 723px;
    width: 185px;
    height: 205px;
    aspect-ratio: 0.88;
  }

  .screen .right-down {
    top: 805px;
    left: 501px;
    width: 81px;
    height: 81px;
    position: absolute;
    aspect-ratio: 1;
    object-fit: cover;
  }

  .screen .right-down-2 {
    top: 376px;
    left: 654px;
    width: 76px;
    height: 76px;
    position: absolute;
    aspect-ratio: 1;
    object-fit: cover;
  }

  .screen .p {
    position: absolute;
    top: 255px;
    left: 483px;
    width: 250px;
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%);
    -webkit-background-clip: text !important;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    font-family: "Qanelas-SemiBold", Helvetica;
    font-weight: 600;
    color: transparent;
    font-size: 20px;
    text-align: center;
    letter-spacing: -0.6px;
    line-height: 22px;
  }

  .screen .text-wrapper-7 {
    position: absolute;
    top: 749px;
    left: 692px;
    width: 250px;
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%);
    -webkit-background-clip: text !important;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    font-family: "Qanelas-SemiBold", Helvetica;
    font-weight: 600;
    color: transparent;
    font-size: 20px;
    text-align: center;
    letter-spacing: -0.6px;
    line-height: 22px;
  }

  .screen .logo,
  .screen .menu button,
  .screen .menu a.button,
  .screen .menu a.div-wrapper,
  .screen .view-2,
  .screen .view-3,
  .screen .view-5 {
    cursor: pointer;
  }

  .screen .logo {
    color: inherit;
  }

  .screen .menu a.button,
  .screen .menu a.div-wrapper {
    color: inherit;
    text-decoration: none;
  }

  .screen .view-2,
  .screen .view-3,
  .screen .view-5 {
    font: inherit;
    border: 0;
    appearance: none;
    -webkit-appearance: none;
  }

  .screen .view-5 {
    background-color: transparent;
    border: 1px solid #43328a;
  }

  .screen .logo:focus-visible,
  .screen .menu button:focus-visible,
  .screen .menu a.button:focus-visible,
  .screen .menu a.div-wrapper:focus-visible,
  .screen .view-2:focus-visible,
  .screen .view-3:focus-visible,
  .screen .view-5:focus-visible {
    outline: 2px solid #4a90e2;
    outline-offset: 3px;
  }

  .screen .hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
  }

  .screen > header:not(.site-header),
  .screen .hero-content,
  .screen .section-visual,
  .screen .section-copy,
  .screen .hero-badge-row {
    display: contents;
  }

  .screen .logo {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
  }

  .screen .view-2,
  .screen .view-3,
  .screen .view-5 {
    font: inherit;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
  }

  .screen .view-2,
  .screen .view-3 {
    border: 0;
  }

  .screen .view-5 {
    border: 1px solid #43328a;
    background-color: transparent;
  }

  .screen .logo:focus-visible,
  .screen .menu button:focus-visible,
  .screen .menu a.button:focus-visible,
  .screen .menu a.div-wrapper:focus-visible,
  .screen .view-2:focus-visible,
  .screen .view-3:focus-visible,
  .screen .view-5:focus-visible {
    outline: 2px solid #4a90e2;
    outline-offset: 3px;
  }
}

@media (max-width: 1919px) {
  .screen {
    min-width: 0;
    width: 100%;
    max-width: none;
    margin-inline: 0;
    aspect-ratio: 1440 / 904;
    height: auto;
    min-height: 0;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    container-type: inline-size;
    container-name: hero;
    background-color: #ffffff;
  }

  .screen .hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
  }

  .screen .hero-content,
  .screen .section-visual,
  .screen .section-copy {
    display: contents;
  }

  .screen .hero-badge-row {
    display: flex;
    align-items: center;
    gap: 0;
    position: absolute;
    left: calc(872 / 1440 * 100%);
    top: calc(433 / 904 * 100%);
    z-index: 2;
    white-space: nowrap;
  }

  .screen .image,
  .screen .img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
  }

  .screen .image-2 {
    position: absolute;
    top: calc(-89 / 904 * 100%);
    left: calc(-642 / 1440 * 100%);
    width: calc(1048 / 1440 * 100%);
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    z-index: 0;
  }

  .screen .image-3 {
    position: absolute;
    left: calc(328 / 1440 * 100%);
    top: calc(173 / 904 * 100%);
    width: calc(203 / 1440 * 100%);
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    z-index: 0;
  }

  .screen .image-4 {
    position: absolute;
    left: calc(506 / 1440 * 100%);
    top: calc(600 / 904 * 100%);
    width: calc(203 / 1440 * 100%);
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    z-index: 0;
  }

  .screen .view {
    position: absolute;
    left: calc(58 / 1440 * 100%);
    top: calc(290 / 904 * 100%);
    width: calc(645 / 1440 * 100%);
    height: calc(371 / 904 * 100%);
    background-color: #7366bdb2;
    border-radius: 50%;
    filter: blur(100px);
    z-index: 0;
  }

  .screen .div {
    display: none;
  }

  .screen .image-5 {
    position: absolute;
    left: calc(361 / 1440 * 100%);
    top: calc(-18 / 904 * 100%);
    width: calc(1361 / 1440 * 100%);
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    z-index: 0;
  }

  .screen .image--tablet,
  .screen .img--tablet,
  .screen .image-2--tablet,
  .screen .image-3--tablet,
  .screen .image-4--tablet,
  .screen .image-5--tablet,
  .screen .element-6 {
    display: none;
  }

  .screen > header {
    display: flex;
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: auto;
    min-height: 0;
    align-items: center;
    justify-content: space-between;
    gap: clamp(24px, 8.33vw, 120px);
    padding: 40px clamp(24px, 6.94vw, 100px) 30px;
    box-sizing: border-box;
  }

  .screen .header-actions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    margin-left: 0;
  }

  .screen .logo {
    position: relative;
    top: auto;
    left: auto;
    width: 142px;
    height: 50px;
    aspect-ratio: auto;
    display: flex;
    align-items: flex-start;
    gap: 4px;
    flex-shrink: 0;
    text-decoration: none;
    color: inherit;
    z-index: 3;
  }

  .screen .png {
    margin-top: 0;
    width: 50px;
    height: 50px;
    aspect-ratio: 1;
    flex-shrink: 0;
    object-fit: contain;
  }

  .screen .twexel {
    margin-top: 14px;
    width: 89px;
    height: 23px;
    flex-shrink: 0;
    object-fit: contain;
  }

  .screen .menu {
    display: inline-flex;
    position: relative;
    top: auto;
    left: auto;
    align-items: center;
    gap: 20px;
    flex: 1 1 auto;
    justify-content: center;
    min-width: 0;
    z-index: 3;
  }

  .screen .button,
  .screen .button-2,
  .screen .platforms-switch__btn,
  .screen .features-switch__btn,
  .screen .div-wrapper,
  .screen .RU,
  .screen .lang-switch__btn {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    top: auto;
    left: auto;
    flex: 0 0 auto;
    cursor: pointer;
  }

  .screen .button-2,
  .screen .features-switch__btn,
  .screen .RU,
  .screen .lang-switch__btn {
    gap: 2px;
  }

  .screen .text-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    margin: 0;
    font-family: "Manrope", Helvetica;
    font-weight: 500;
    color: #000;
    font-size: 16px;
    line-height: 16px;
    text-align: center;
    letter-spacing: 0;
    white-space: nowrap;
  }

  .screen .arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 13px;
    padding: 0;
    flex-shrink: 0;
  }

  .screen .vector {
    display: block;
    width: 5px;
    height: 3.75px;
  }

  .screen .view-3,
  .screen .view-5 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 10px;
    position: relative;
    top: auto;
    left: auto;
    z-index: 3;
    cursor: pointer;
    font: inherit;
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
    flex-shrink: 0;
  }

  .screen .view-3 {
    background-color: #43328a;
    border: 0;
  }

  .screen .view-5 {
    background: transparent;
    border: 1px solid #b3afd6;
  }

  .screen .text-wrapper-3,
  .screen .text-wrapper-6 {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    font-family: "Manrope", Helvetica;
    font-weight: 500;
    font-size: 16px;
    line-height: 16px;
    white-space: nowrap;
  }

  .screen .text-wrapper-3 { color: #fff; }
  .screen .text-wrapper-6 { color: #43328a; }

  .screen .element {
    position: absolute;
    left: calc(126 / 1440 * 100%);
    top: calc(304 / 904 * 100%);
    width: calc(242 / 1440 * 100%);
    height: auto;
    aspect-ratio: 242 / 402;
    object-fit: cover;
    z-index: 1;
  }

  .screen .element-2 {
    position: absolute;
    left: calc(261 / 1440 * 100%);
    top: calc(572 / 904 * 100%);
    width: calc(240 / 1440 * 100%);
    height: auto;
    aspect-ratio: 240 / 123;
    z-index: 1;
  }

  .screen .element-3 {
    position: absolute;
    left: calc(333 / 1440 * 100%);
    top: calc(414 / 904 * 100%);
    width: calc(395 / 1440 * 100%);
    height: auto;
    aspect-ratio: 395 / 199;
    object-fit: cover;
    z-index: 1;
  }

  .screen .element-4 {
    position: absolute;
    left: calc(250 / 1440 * 100%);
    top: calc(334 / 904 * 100%);
    width: calc(203 / 1440 * 100%);
    height: auto;
    aspect-ratio: 203 / 64;
    object-fit: cover;
    z-index: 2;
  }

  .screen .element-5 {
    position: absolute;
    left: calc(538 / 1440 * 100%);
    top: calc(278 / 904 * 100%);
    width: calc(122 / 1440 * 100%);
    height: auto;
    aspect-ratio: 122 / 138;
    z-index: 2;
  }

  .screen .right-down {
    position: absolute;
    left: calc(340 / 1440 * 100%);
    top: calc(703 / 904 * 100%);
    width: calc(68 / 1440 * 100%);
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    z-index: 2;
  }

  .screen .right-down-2 {
    position: absolute;
    left: calc(465 / 1440 * 100%);
    top: calc(335 / 904 * 100%);
    width: calc(64 / 1440 * 100%);
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    z-index: 2;
  }

  .screen .p,
  .screen .text-wrapper-7 {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    background: linear-gradient(90deg, #000 0%);
    -webkit-background-clip: text !important;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: "Qanelas-SemiBold", Helvetica;
    font-weight: 600;
    font-size: 16px;
    letter-spacing: -0.48px;
    line-height: 17.6px;
    text-align: center;
    z-index: 2;
  }

  .screen .p {
    left: calc(326 / 1440 * 100%);
    top: calc(229 / 904 * 100%);
    width: calc(205 / 1440 * 100%);
  }

  .screen .text-wrapper-7 {
    left: calc(498 / 1440 * 100%);
    top: calc(654 / 904 * 100%);
    width: calc(205 / 1440 * 100%);
  }

  .screen .hero-title {
    position: absolute;
    left: calc(707 / 1440 * 100%);
    top: calc(288 / 904 * 100%);
    width: calc(634 / 1440 * 100%);
    margin: 0;
    font-family: "Barlow Condensed", Helvetica, sans-serif;
    font-weight: 600;
    color: #000;
    font-size: 40px;
    letter-spacing: -1.2px;
    line-height: 44px;
    text-align: center;
    z-index: 2;
  }

  .screen .hero-title__accent {
    font-weight: 700;
    background: linear-gradient(90deg, rgba(84,69,196,1) 0%, rgba(106,60,153,1) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }

  .screen .text-wrapper-4 {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Manrope", Helvetica;
    font-weight: 600;
    color: #1b1b1b;
    font-size: 24px;
    letter-spacing: -0.72px;
    line-height: 26.4px;
    text-align: center;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .screen .view-4 {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    min-width: 154px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 12px;
    box-sizing: border-box;
    border-radius: 7px;
    background: linear-gradient(90deg, rgba(84,69,196,1) 0%, rgba(106,60,153,1) 100%);
    flex-shrink: 0;
  }

  .screen .text-wrapper-5 {
    font-family: "Manrope", Helvetica;
    font-weight: 700;
    color: #fff;
    font-size: 18px;
    line-height: 18px;
    white-space: nowrap;
  }

  .screen .view-2 {
    position: absolute;
    left: calc(869 / 1440 * 100%);
    top: calc(572 / 904 * 100%);
    width: calc(321 / 1440 * 100%);
    height: 61px;
    min-height: 61px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 23px;
    box-sizing: border-box;
    background-color: #43328a;
    border: 0;
    border-radius: 10px;
    box-shadow: 0 4px 4px #00000040;
    cursor: pointer;
    font: inherit;
    appearance: none;
    -webkit-appearance: none;
    z-index: 2;
  }

  .screen .text-wrapper-2 {
    font-family: "Manrope", Helvetica;
    font-weight: 600;
    color: #fff;
    font-size: 18px;
    line-height: 18px;
    white-space: nowrap;
  }

  .screen .logo:focus-visible,
  .screen .menu button:focus-visible,
  .screen .menu a.button:focus-visible,
  .screen .menu a.div-wrapper:focus-visible,
  .screen .view-2:focus-visible,
  .screen .view-3:focus-visible,
  .screen .view-5:focus-visible {
    outline: 2px solid #4a90e2;
    outline-offset: 3px;
  }

  @media (max-width: 1023px) {
    .screen {
      aspect-ratio: 768 / 847;
      max-width: 100%;
      margin-inline: auto;
      height: auto;
      overflow: hidden;
    }

    .screen > header {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      z-index: 3;
      align-items: center;
      justify-content: flex-start;
      padding: 30px 48px;
      gap: 0;
      min-height: 104px;
      box-sizing: border-box;
    }

    .screen .menu {
      display: contents;
    }

    .screen .menu > .button,
    .screen .menu > .platforms-switch,
    .screen .menu > .div-wrapper {
      display: none;
    }

    .screen .logo {
      margin-right: auto;
      flex-shrink: 0;
    }

    .screen .lang-switch {
      display: inline-flex;
      align-items: center;
      position: relative;
      z-index: 4;
      margin-right: 25px;
      flex-shrink: 0;
      order: 2;
    }

    .screen .header-actions {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      flex-shrink: 0;
      margin-left: 0;
      order: 3;
    }

    .screen .header-actions .view-3 {
      display: none;
    }

    .screen .logo {
      width: 99px;
      height: 35px;
    }

    .screen .png {
      width: 35px;
      height: 35px;
    }

    .screen .twexel {
      margin-top: 9px;
      width: 62px;
      height: 16px;
    }

    .screen .view-5 {
      padding: 14px 20px;
      border-radius: 7px;
      height: 44px;
      box-sizing: border-box;
    }

    .screen .text-wrapper-6 {
      font-size: 16px;
      line-height: 16px;
    }

    .screen .lang-switch .text-wrapper {
      font-size: 16px;
      line-height: 16px;
    }

    .screen .image,
    .screen .img,
    .screen .image-2,
    .screen .image-3,
    .screen .image-4,
    .screen .image-5 {
      display: none;
    }

    .screen .image--tablet,
    .screen .img--tablet,
    .screen .image-2--tablet,
    .screen .image-3--tablet,
    .screen .image-4--tablet,
    .screen .image-5--tablet {
      display: block;
      position: absolute;
      inset: auto;
      height: auto;
      object-fit: cover;
      pointer-events: none;
      user-select: none;
    }

    .screen .image--tablet {
      top: 0;
      left: calc(-133 / 768 * 100%);
      width: calc(1784 / 768 * 100%);
      aspect-ratio: 1784 / 1000;
      opacity: 0.3;
      z-index: 0;
    }

    .screen .img--tablet {
      top: calc(-607 / 847 * 100%);
      left: calc(1 / 768 * 100%);
      width: calc(1650 / 768 * 100%);
      aspect-ratio: 1;
      opacity: 0.3;
      z-index: 0;
    }

    .screen .image-2--tablet {
      top: 0;
      left: calc(-524 / 768 * 100%);
      width: calc(845 / 768 * 100%);
      aspect-ratio: 1;
      opacity: 0.02;
      z-index: 0;
    }

    .screen .image-3--tablet {
      left: calc(349 / 768 * 100%);
      top: calc(322 / 847 * 100%);
      width: calc(127 / 768 * 100%);
      aspect-ratio: 1;
      opacity: 0.4;
      z-index: 1;
    }

    .screen .image-4--tablet {
      left: calc(467 / 768 * 100%);
      top: calc(593 / 847 * 100%);
      width: calc(137 / 768 * 100%);
      aspect-ratio: 1;
      opacity: 0.4;
      z-index: 1;
    }

    .screen .view {
      display: block;
      inset: auto;
      left: calc(128 / 768 * 100%);
      top: calc(414 / 847 * 100%);
      width: calc(512 / 768 * 100%);
      height: calc(250 / 847 * 100%);
      border-radius: 50%;
      filter: blur(200px);
      background-color: rgba(115, 102, 189, 0.7);
      opacity: 1;
      z-index: 0;
    }

    .screen .div {
      display: none;
    }

    .screen .image-5--tablet {
      left: calc(361 / 768 * 100%);
      top: calc(-18 / 847 * 100%);
      width: calc(1361 / 768 * 100%);
      aspect-ratio: 1;
      opacity: 0.05;
      z-index: 0;
    }

    .screen .hero-content,
    .screen .section-visual,
    .screen .section-copy {
      display: contents;
    }

    .screen .hero-title {
      position: absolute;
      left: 50%;
      top: calc(143 / 847 * 100%);
      width: calc(416 / 768 * 100%);
      max-width: 416px;
      transform: translateX(-50%);
      margin: 0;
      font-family: "Barlow Condensed", Helvetica, sans-serif;
      font-weight: 600;
      font-size: 30px;
      letter-spacing: -0.9px;
      line-height: 33px;
      text-align: center;
      color: #000;
      z-index: 2;
      white-space: normal;
    }

    .screen .hero-title__accent {
      font-weight: 700;
    }

    .screen .hero-badge-row {
      display: flex;
      position: absolute;
      left: calc(237 / 768 * 100%);
      top: calc(259 / 847 * 100%);
      align-items: center;
      justify-content: flex-start;
      gap: 0;
      z-index: 2;
      white-space: nowrap;
    }

    .screen .text-wrapper-4 {
      position: relative;
      left: auto;
      top: auto;
      margin: 0;
      font-family: "Manrope", Helvetica;
      font-weight: 600;
      font-size: 22px;
      letter-spacing: -0.66px;
      line-height: 24.2px;
      color: #1b1b1b;
      white-space: nowrap;
    }

    .screen .view-4 {
      position: relative;
      left: auto;
      top: auto;
      width: auto;
      min-width: 0;
      height: 34px;
      padding: 8px;
      box-sizing: border-box;
    }

    .screen .text-wrapper-5 {
      font-size: 18px;
      line-height: 18px;
      font-weight: 700;
    }

    .screen .element {
      display: block;
      position: absolute;
      left: calc(151 / 768 * 100%);
      top: calc(387 / 847 * 100%);
      width: calc(182 / 768 * 100%);
      height: auto;
      aspect-ratio: 182 / 302;
      object-fit: cover;
      z-index: 1;
    }

    .screen .element-2 {
      display: block;
      position: absolute;
      left: calc(261 / 768 * 100%);
      top: calc(583 / 847 * 100%);
      width: calc(183 / 768 * 100%);
      height: auto;
      aspect-ratio: 183 / 93;
      object-fit: cover;
      z-index: 1;
    }

    .screen .element-3 {
      display: block;
      position: absolute;
      left: calc(328 / 768 * 100%);
      top: calc(468 / 847 * 100%);
      width: calc(296 / 768 * 100%);
      height: auto;
      aspect-ratio: 296 / 149;
      object-fit: cover;
      z-index: 1;
    }

    .screen .element-4 {
      display: block;
      position: absolute;
      left: calc(278 / 768 * 100%);
      top: calc(411 / 847 * 100%);
      width: calc(153 / 768 * 100%);
      height: auto;
      aspect-ratio: 153 / 49;
      object-fit: cover;
      z-index: 2;
    }

    .screen .element-5 {
      display: block;
      position: absolute;
      left: calc(503 / 768 * 100%);
      top: calc(372 / 847 * 100%);
      width: calc(92 / 768 * 100%);
      height: auto;
      aspect-ratio: 92 / 104;
      object-fit: cover;
      z-index: 2;
    }

    .screen .element-6 {
      display: block;
      position: absolute;
      left: calc(500 / 768 * 100%);
      top: calc(499 / 847 * 100%);
      width: calc(223 / 768 * 100%);
      height: auto;
      aspect-ratio: 223 / 224;
      object-fit: cover;
      border-radius: 10px;
      z-index: 2;
    }

    .screen .right-down {
      display: block;
      position: absolute;
      left: calc(319 / 768 * 100%);
      top: calc(681 / 847 * 100%);
      width: calc(40.5 / 768 * 100%);
      height: auto;
      aspect-ratio: 1;
      object-fit: cover;
      opacity: 0.6;
      z-index: 2;
    }

    .screen .right-down-2 {
      display: block;
      position: absolute;
      left: calc(459 / 768 * 100%);
      top: calc(421 / 847 * 100%);
      width: calc(37.9 / 768 * 100%);
      height: auto;
      aspect-ratio: 1;
      object-fit: cover;
      opacity: 0.6;
      z-index: 2;
    }

    .screen .p {
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      left: calc(336 / 768 * 100%);
      top: calc(349 / 847 * 100%);
      width: calc(158 / 768 * 100%);
      margin: 0;
      font-family: "Qanelas-SemiBold", "Manrope", Helvetica, sans-serif;
      font-weight: 600;
      font-size: 14px;
      letter-spacing: -0.42px;
      line-height: 15.4px;
      text-align: center;
      color: #000;
      background: none;
      -webkit-text-fill-color: #000;
      z-index: 3;
    }

    .screen .text-wrapper-7 {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: absolute;
      left: calc(474 / 768 * 100%);
      top: calc(609 / 847 * 100%);
      width: calc(121 / 768 * 100%);
      height: calc(78 / 847 * 100%);
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: "Qanelas-SemiBold", "Manrope", Helvetica, sans-serif;
      font-weight: 600;
      font-size: 14px;
      letter-spacing: -0.42px;
      line-height: 15.4px;
      text-align: center;
      color: #000;
      background: none;
      -webkit-text-fill-color: #000;
      z-index: 3;
    }

    .screen .view-2 {
      position: absolute;
      left: calc(224 / 768 * 100%);
      top: calc(748 / 847 * 100%);
      width: calc(321 / 768 * 100%);
      height: 58px;
      min-height: 58px;
      padding: 0 22px;
      box-sizing: border-box;
      z-index: 2;
    }

    .screen .text-wrapper-2 {
      font-size: 18px;
      line-height: 18px;
      white-space: nowrap;
    }
  }

  @media (max-width: 480px) {
    .screen > header {
      padding: 16px 12px 8px;
    }

    .screen .hero-title {
      font-size: 26px;
      line-height: 30px;
    }

    .screen .text-wrapper-4 {
      font-size: 18px;
      line-height: 20px;
    }

    .screen .view-2 {
      height: 52px;
      min-height: 52px;
    }

    .screen .text-wrapper-2 {
      font-size: 15px;
      white-space: normal;
      text-align: center;
    }
  }
}
/* Auth/CTA as links */
a.view-3,
a.view-5 {
  text-decoration: none;
  color: inherit;
  box-sizing: border-box;
}