@font-face {
  font-family: "Space Grotesk";
  src: url("/fonts/SpaceGrotesk-VariableFont_wght.ttf")
    format("truetype-variations");
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/Inter-VariableFont_opsz_wght.ttf")
    format("truetype-variations");
  font-weight: 300 900;
  font-display: swap;
}

/* Reset and Base Styles */

:root {
  --color-black: #000;
  --color-white: #fff;
  --color-text: #a9a9a9;
  --color-text-2: #878787;
  --color-text-3: #cacaca;
  --color-text-4: #868686;
  --color-text-btn: #fffcfa;
  --color-purple-1: #6628fd;
  --color-purple-2: #6729ff;
  --color-purple-3: #1a059f;
  --color-lime: #a6ff29;
  --color-border-1: #3d3c3c;

  --gradient-btn: linear-gradient(90deg, #6729ff 0%, #1a059f 100%);
}

html {
  box-sizing: border-box;
  scroll-behavior: smooth;
  scroll-padding-top: 50px;
}

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

body {
  overflow-x: clip;
  background: var(--color-black);
  margin: 0;
  font-family: "Space Grotesk", sans-serif;
  font-style: normal;
  font-size: 18px;
  font-weight: 400;
  color: var(--color-text);
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
li {
  margin: 0;
  font-weight: 400;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

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

button {
  margin: 0;
  padding: 0;
  border: none;
  cursor: pointer;
  background-color: transparent;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

.container {
  max-width: 1280px;
  margin: 0 auto;
}

/* #region Start Page */

.start-page {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background: var(--color-black);
  padding: 65px 0 0;

  .cookie-wrapper {
    position: relative;
    margin: 0 auto 160px;
    border-radius: 30px;
    border: 1px solid var(--color-purple-1);
    background: var(--color-black);
    box-shadow: 0 4px 63.4px 0 rgba(0, 0, 0, 0.5);
    width: 100%;
    max-width: 1062px;
    padding: 76px 50px;
  }

  h1 {
    color: var(--color-purple-1);
    text-align: center;
    font-family: "Space Grotesk";
    font-size: 46px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -1px;
    margin-bottom: 18px;
  }

  .cookie-content {
    p {
      line-height: 1.6;
      letter-spacing: -0.5px;
      margin-bottom: 30px;
    }
    .text-link {
      color: var(--color-lime);
      text-decoration-line: underline;
      text-decoration-style: solid;
      text-decoration-skip-ink: none;
      text-decoration-thickness: auto;
      text-underline-offset: auto;
      text-underline-position: from-font;
      text-decoration-color: #a6ff2970;
      transition: all 0.3s ease;
    }
    .text-link:hover {
      text-decoration-color: var(--color-lime);
    }
    .btn-link {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 16px;
      border-radius: 54px;
      background: var(--gradient-btn);
      max-width: 434px;
      margin: 0 auto;
      color: var(--color-text-btn);
      font-size: 20px;
      font-weight: 700;
      line-height: 1.2;
      text-transform: uppercase;
    }
  }

  .close-btn {
    position: absolute;
    top: 26px;
    right: 26px;
  }
  .cookie-logo {
    position: absolute;
    top: -53px;
    left: 50%;
    transform: translateX(-50%);
  }

  .links {
    display: flex;
    gap: 30px;
    align-items: center;
    justify-content: end;

    a {
      color: #878787;
      font-size: 20px;
      font-weight: 400;
      letter-spacing: -0.6px;
    }

    a:hover {
      color: var(--color-text);
    }
  }
}

/* #endregion */

/* #region Header*/
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 30px 0 100px;

  .reg-btn {
    display: flex;
    padding: 8px 40px;
    justify-content: center;
    align-items: center;
    border-radius: 32px;
    border: 1px solid var(--color-lime);
    color: var(--color-lime);
    font-size: 22px;
    font-weight: 500;
    text-transform: uppercase;
  }
}

/* #endregion */

/* #region Home Page */
.home {
  .hero {
    padding: 30px 0 0;
    background-image: url("/img/rectangles.png");
    background-repeat: no-repeat;
    background-position: center top;
    .container {
      position: relative;
    }
    .container::before {
      content: "";
      width: 563px;
      height: 652px;
      transform: rotate(-105deg);
      position: absolute;
      left: -75px;
      top: -480px;
      border-radius: 652px;
      opacity: 0.2;
      background: #644ff0;
      filter: blur(111px);
    }

    .header {
      margin: 0 0 50px;
    }
    .hero-content {
      padding: 0 0 45px;
      margin: 0 0 120px;
      display: flex;
      align-items: center;
      gap: 52px;
      .content {
        h1 {
          color: var(--color-text-3);
          font-size: 46px;
          line-height: 1.2;
          letter-spacing: -1.5px;
          text-transform: uppercase;
          margin-bottom: 25px;
          span {
            color: var(--color-purple-2);
          }
        }
        p {
          color: var(--color-text-4);
          line-height: 1.6;
          letter-spacing: -0.5px;
          margin-bottom: 18px;
        }
      }
    }
    .form-block {
      flex-shrink: 0;
      width: 100%;
      max-width: 514px;
      padding: 43px 40px;
      border-radius: 16px;
      border: 1px solid rgba(103, 41, 255, 0.6);
      background: rgba(0, 0, 0, 0.2);
      box-shadow: 0 4px 21px 0 #3e2db5;
      .form-wrapper {
        width: 100%;

        margin-bottom: 22px;
      }
      p {
        color: #7b7a7a;
        font-family: "Inter";
        font-size: 12px;
        font-style: normal;
        font-weight: 300;
        line-height: 20px;
        .form-link {
          color: #6839ff;
          text-decoration-line: underline;
          text-decoration-style: solid;
          text-decoration-skip-ink: auto;
          text-decoration-thickness: auto;
          text-underline-offset: auto;
          text-underline-position: from-font;
        }
      }
    }
  }
  .main {
    .future {
      margin-bottom: 150px;
      h2 {
        color: var(--color-lime);
        text-align: center;
        font-size: 36px;
        line-height: 1.2;
        letter-spacing: -1px;
        text-transform: uppercase;
        margin-bottom: 22px;
      }
      h3 {
        color: var(--color-text-3);
        text-align: center;
        font-size: 36px;
        font-weight: 700;
        line-height: 1.2;
        letter-spacing: -1px;
        margin-bottom: 80px;
      }
      .slider-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, 1fr);
        gap: 24px;
      }

      .slider-controls {
        width: 100%;
        max-width: 340px;
        margin: 0 auto;
        display: none;
        justify-content: space-between;
      }
      .card {
        position: relative;
        overflow: clip;
        display: flex;
        padding: 25px 22px;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        border-radius: 15px;
        border: 1px solid #343434;
        background: rgba(0, 0, 0, 0.2);

        h4 {
          margin-bottom: 6px;
          font-size: 20px;
          font-weight: 700;
          line-height: 1.6;
          letter-spacing: -0.6px;
          background: var(--gradient-btn);
          background-clip: text;
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
        p {
          text-align: center;
          line-height: 1.6;
          letter-spacing: -0.5px;
        }
      }
      .card::before {
        content: "";
        width: 100%;
        height: 116px;
        background: #2d01ae;
        filter: blur(63px);
        position: absolute;
        z-index: -1;
        left: 50%;
        top: 115px;
        transform: translateX(-50%);
      }
    }
    .pave {
      margin-bottom: 150px;
      display: flex;
      align-items: center;
      gap: 46px;
      .content {
        display: flex;
        flex-direction: column;
        gap: 16px;
        h2 {
          color: var(--color-text-3);
          font-size: 36px;
          font-weight: 700;
          line-height: 1.2;
          letter-spacing: -1px;
          margin-bottom: 4px;
          span {
            color: var(--color-lime);
          }
        }
        p {
          line-height: 1.6;
          letter-spacing: -0.5px;
        }
      }
      img {
        width: 100%;
        max-width: 605px;
      }
    }
    .how-work {
      margin-bottom: 150px;
      h2 {
        color: var(--color-text-3);
        text-align: center;
        font-size: 36px;
        font-weight: 700;
        line-height: 1.2;
        letter-spacing: -1px;
        margin-bottom: 80px;
      }
      .wrapper {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
      }
      .left-block,
      .right-block {
        position: relative;
        display: flex;
        padding: 47px 44px;
        flex-direction: column;
        gap: 16px;
        border-radius: 25px;
      }
      .left-block {
        border: 1px solid var(--color-lime);
        background: rgba(33, 32, 33, 0.2);
        .item {
          display: flex;
          flex-direction: column;
          gap: 10px;
          h3 {
            color: var(--color-lime);
            font-size: 27px;
            font-weight: 700;
            line-height: 1.6;
            letter-spacing: -1px;
          }
          span {
            line-height: 1.6;
            letter-spacing: -0.5px;
          }
        }
      }
      .right-block {
        border: 1px solid var(--color-purple-1);
        background: rgba(33, 32, 33, 0.2);
        .item {
          display: flex;
          align-items: center;
          gap: 8px;
          span {
            letter-spacing: -0.5px;
          }
        }
      }
      .left-block::after,
      .right-block::after {
        content: "";
        width: 80%;
        height: 70%;
        filter: blur(108px);
        position: absolute;
        z-index: -1;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
      .left-block::after {
        background: #2c4b00;
      }
      .right-block::after {
        background: #2d01ae;
      }
    }
    .started {
      h2 {
        color: var(--color-lime);
        font-family: "Inter";
        font-size: 36px;
        font-weight: 400;
        line-height: 1.2;
        letter-spacing: -1px;
        text-transform: uppercase;
        margin-bottom: 22px;
      }
      h3 {
        color: var(--color-text-3);
        font-size: 36px;
        font-weight: 700;
        line-height: 1.2;
        letter-spacing: -1px;
        margin-bottom: 80px;
      }
      .steps {
        margin-bottom: 150px;
        display: flex;
        gap: 24px;
        justify-content: space-between;

        .step {
          display: flex;
          align-items: center;
          flex-direction: column;
          gap: 10px;
          max-width: 411px;
          padding-top: 16px;

          span {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-shrink: 0;
            width: 103px;
            height: 103px;
            color: var(--color-purple-1);
            font-size: 40px;
            font-weight: 700;
            line-height: 1.6;
            letter-spacing: -1.2px;
            border-radius: 67px;
            border: 1px solid var(--color-purple-1);
            background: var(--color-black);
            box-shadow: 0 4px 40px 0 rgba(0, 0, 0, 0.6);
            margin-bottom: 36px;
          }
          span::after {
            content: "";
            width: 135px;
            height: 135px;
            border-radius: 50%;
            background: rgba(102, 40, 253, 0.2);
            position: absolute;
            z-index: -1;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
          }
          h4 {
            color: var(--color-purple-1);
            text-align: center;
            font-size: 22px;
            font-weight: 700;
            line-height: 1.6;
            letter-spacing: -0.6px;
          }
          p {
            text-align: center;
            line-height: 1.6;
            letter-spacing: -0.5px;
          }
        }
      }
    }
    .marquee {
      width: var(100% + 160px);
      margin: 0 -80px 150px;
      overflow: hidden;
      background: #100729;
      padding: 30px 80px;
      .content {
        display: flex;
        flex-direction: row;
        gap: 20px;
        width: max-content;
        animation: scroll 20s linear infinite;
        .item {
          flex-shrink: 0;
          display: flex;
          align-items: center;
          gap: 20px;
          .item-text {
            display: flex;
            align-items: center;
            flex-direction: column;
            gap: 14px;
            h4 {
              color: var(--color-lime);
              font-size: 22px;
              font-weight: 500;
              line-height: 1.6;
              letter-spacing: -0.6px;
            }
            span {
              font-size: 22px;
              font-weight: 300;
              line-height: 1.6;
              letter-spacing: -0.6px;
            }
          }
        }
      }
    }
    .overview {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 24px;
      margin-bottom: 150px;
      h2 {
        color: var(--color-white);
        font-size: 36px;
        font-weight: 700;
        line-height: 1.2;
        letter-spacing: -1px;
        span {
          color: var(--color-lime);
        }
      }
      h3 {
        color: var(--color-lime);
        font-size: 27px;
        font-weight: 700;
        line-height: 1.6;
        letter-spacing: -0.8px;
      }
      p {
        line-height: 1.6;
        letter-spacing: -0.5px;
      }
      .left-block {
        display: flex;
        flex-direction: column;
        gap: 20px;
        .item {
          display: flex;
          flex-direction: column;
          gap: 16px;
        }
      }
      .right-block {
        display: flex;
        flex-direction: column;
        gap: 20px;
        .item {
          display: flex;
          flex-direction: column;
          gap: 16px;
        }
      }
    }
    .testimonials {
      margin-bottom: 150px;
      h2 {
        color: var(--color-lime);
        font-size: 36px;
        line-height: 1.2;
        letter-spacing: -1px;
        text-transform: uppercase;
        margin-bottom: 18px;
      }
      h3 {
        color: var(--color-text-3);
        font-size: 36px;
        font-weight: 700;
        line-height: 1.2;
        letter-spacing: -1px;
        margin-bottom: 80px;
      }
      .viewport {
        overflow: hidden;
        margin-right: -80px;
      }

      .slider-track {
        display: flex;
        gap: 25px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        scrollbar-width: none;
        margin-bottom: 50px;
      }

      .slider-track::-webkit-scrollbar {
        display: none;
      }

      .slide {
        min-width: 519px;
        min-height: 650px;
        scroll-snap-align: start;
        border-radius: 16px;

        display: flex;
        flex-direction: column;
      }

      .slide-video-wrapp {
        position: relative;
        min-height: 252px;
        border-radius: 16px 16px 0 0;
        background: #232323;
        cursor: pointer;
        video {
          display: block;
          width: 100%;
          height: 100%;
          object-fit: cover;
          object-position: top;
        }
      }

      .slide-video-wrapp::before {
        content: "";
        position: absolute;
        top: calc(50% - 15px);
        left: calc(50% - 15px);
        display: block;
        width: 0;
        height: 0;
        border-top: 15px solid transparent;
        border-bottom: 15px solid transparent;
        border-left: 30px solid #fff;
        z-index: 10;
        pointer-events: none;
        transition: opacity 0.3s ease;
      }

      .slide-video-wrapp.is-playing::before {
        opacity: 0;
        visibility: hidden;
      }
      .slide-content {
        flex-grow: 1;
        position: relative;
        padding: 33px 30px 50px;
        overflow-x: clip;
        border-left: 1px solid var(--color-border-1);
        border-right: 1px solid var(--color-border-1);
        border-bottom: 1px solid var(--color-border-1);
        border-radius: 0 0 16px 16px;
        h3 {
          font-size: 22px;
          font-weight: 700;
          line-height: 1.6;
          letter-spacing: -0.6px;
          background: var(--gradient-btn);
          background-clip: text;
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          margin-bottom: 16px;
        }
        p {
          line-height: 1.6;
          letter-spacing: -0.5px;
        }
      }
      .slide-content::before {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        z-index: -1;
        width: 100%;
        height: 100%;
        background: #21017e;
        filter: blur(108px);
      }
      .controls {
        display: flex;

        width: 100%;
        max-width: 340px;
        margin: 0 auto;
        justify-content: space-between;
      }
    }
    .reviews {
      margin-bottom: 150px;
      .sliders {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
      }
      .slider-controls {
        display: none;
        width: 100%;
        max-width: 340px;
        margin: 0 auto;
        justify-content: space-between;
      }
      .card {
        padding: 36px;
        border-radius: 16px;
        border: 1px solid #555;
      }
      .card:last-child {
        grid-column: 1 / -1;
      }
      .card-wrap {
        display: flex;
        align-items: center;
        gap: 18px;
        margin-bottom: 16px;
        h3 {
          color: var(--color-lime);
          font-size: 22px;
          font-weight: 700;
          line-height: 1.6;
          letter-spacing: -0.6px;
        }
      }
    }
    .faq {
      max-width: 1062px;
      margin: 0 auto 150px;
      h2 {
        color: var(--color-lime);
        text-align: center;
        font-size: 36px;
        line-height: 1.2;
        letter-spacing: -1px;
        text-transform: uppercase;
        margin-bottom: 18px;
      }
      .h3 {
        display: block;
        color: var(--color-text-3);
        text-align: center;
        font-size: 36px;
        font-weight: 700;
        line-height: 1.2;
        letter-spacing: -1px;
        margin-bottom: 80px;
      }
      .list {
        display: flex;
        flex-direction: column;
        gap: 20px;
      }
      .item {
        padding: 25px 35px;
        border-radius: 10px;
        border: 1px solid var(--color-purple-1);
        transition: all 0.2s ease-out;
        min-height: 78px;
        overflow: hidden;
      }
      .label {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 17px;

        h3 {
          color: var(--color-purple-1);
          font-size: 25px;
          letter-spacing: -0.75px;
          text-transform: uppercase;
        }
      }

      .content {
        height: 0;
        line-height: 1.6;
        letter-spacing: -0.5px;
      }
      .icon {
        transition: 0.2s ease-in-out;
        cursor: pointer;
        transform-origin: center;
      }

      #accordion .content {
        overflow: hidden;
        border-width: 0;
      }
      #accordion .item.active {
        min-height: 162px;
        border-color: var(--color-lime);
      }
      #accordion .item.active .label h3 {
        color: var(--color-lime);
      }
      #accordion .item.active .content {
        height: 100%;
        margin-top: 20px;
      }
      #accordion .item.active .icon {
        transform: rotate(90deg);
        svg {
          path {
            fill: #a6ff29;
          }
        }
      }
    }
    .advantages {
      margin-bottom: 150px;
      h2 {
        color: var(--color-text-3);
        text-align: center;
        font-size: 36px;
        font-weight: 700;
        line-height: 1.2;
        letter-spacing: -1px;
        margin-bottom: 22px;
        span {
          color: var(--color-lime);
        }
      }
      .subtitle {
        max-width: 845px;
        margin: 0 auto 80px;
        text-align: center;
        font-weight: 700;
        line-height: 1.6;
        letter-spacing: -0.5px;
      }
      .cards {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
        gap: 24px;
      }
      .card {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 24px;
        padding: 40px 39px;
        border-radius: 25px;
        border: 1px solid #6527fd;
        background: rgba(33, 32, 33, 0.2);
        p {
          position: relative;

          line-height: 1.6;
          letter-spacing: -0.5px;
          text-align: center;
        }
        p::before {
          content: "";
          position: absolute;
          z-index: -1;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
          background: #2b048c;
          filter: blur(34px);
        }
      }

      .card-header {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        h3 {
          color: var(--color-purple-1);
          font-size: 22px;
          font-weight: 700;
          line-height: 1.6;
          letter-spacing: -0.6px;
        }
      }
    }
    .contact {
      margin-bottom: 150px;
      display: flex;
      gap: 78px;
      .content {
        display: flex;
        flex-direction: column;
        gap: 16px;
        h2 {
          color: var(--color-lime);
          font-size: 36px;
          line-height: 1.2;
          letter-spacing: -1px;
          text-transform: uppercase;
          margin-bottom: 2px;
        }
        h3 {
          color: var(--color-text-3);
          font-size: 36px;
          font-weight: 700;
          line-height: 1.2;
          letter-spacing: -1px;
          margin-bottom: 6px;
        }
        h4 {
          color: var(--color-lime);
          font-size: 22px;
          font-weight: 700;
          line-height: 1.6;
          letter-spacing: -0.6px;
          margin-bottom: 4px;
        }
        p {
          line-height: 1.6;
          letter-spacing: -0.5px;
        }
      }
      .photo {
        flex-shrink: 0;
        max-width: 570px;
      }
    }
  }
}
/* #endregion */

/* #region Policy Page*/

.policy {
  .main {
    margin-bottom: 150px;
    .content {
      max-width: 870px;
      display: flex;
      flex-direction: column;
      gap: 30px;
      h1,
      h2 {
        margin-bottom: 17px;
      }
      h1 {
        color: var(--color-purple-1);
        font-size: 46px;
        font-weight: 700;
        line-height: 1.2;
        letter-spacing: -1.4px;
      }
      h2 {
        color: var(--color-text-3);
        font-size: 27px;
        font-weight: 700;
        line-height: 1.6;
        letter-spacing: -0.8px;
      }
      p {
        line-height: 1.6;
        letter-spacing: -0.5px;
      }
      ul {
        list-style: disc;
        padding-left: 25px;
        li::marker {
          font-size: 15px;
        }
        li {
          line-height: 1.6;
          letter-spacing: -0.5px;
        }
      }
    }
    .place {
      a {
        color: var(--color-lime);
        line-height: 1.6;
        letter-spacing: -0.5px;
        text-decoration-line: underline;
        text-decoration-style: solid;
        text-decoration-skip-ink: none;
        text-decoration-thickness: auto;
        text-underline-offset: auto;
        text-underline-position: from-font;
      }
    }
    .wrapper {
      display: flex;
      align-items: stretch;
      gap: 24px;
      .left,
      .right {
        position: relative;
        max-width: 470px;
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding: 47px 44px;
        border-radius: 25px;
        border: 1px solid var(--color-lime);
        background: rgba(33, 32, 33, 0.2);
        h3 {
          color: var(--color-lime);
          font-size: 27px;
          font-weight: 700;
          line-height: 1.6;
          letter-spacing: -0.8px;
        }
      }
      .left::before,
      .right::before {
        content: "";
        position: absolute;
        z-index: -1;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        filter: blur(108px);
      }
      .left::before {
        width: 315px;
        height: 303px;
        border: 1px solid var(--color-lime);
        background: #2c4b00;
      }
      .right::before {
        width: 133px;
        height: 301px;
        background: #2d01ae;
      }
      .right {
        border-color: var(--color-purple-1);
        h3 {
          color: var(--color-purple-1);
          font-family: "Inter";
        }
      }
    }
    .place-2 {
      display: flex;
      flex-direction: column;
      gap: 18px;
    }
  }
}
/* #endregion */

/* #region Footer */
.footer {
  border-top: 1px solid var(--color-purple-1);
  padding: 80px 0;
  .header {
    margin: 0 0 30px;
  }
  .links {
    display: flex;
    align-items: center;
    gap: 60px;
    margin-bottom: 40px;
    a {
      color: var(--color-purple-1);
      font-family: "Space Grotesk";
      font-size: 16px;
      font-style: normal;
      font-weight: 400;
      line-height: 1.4;
      letter-spacing: -0.64px;
    }
  }
  .footer-content {
    max-width: 740px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    p {
      font-size: 14px;
      line-height: 1.4;
      letter-spacing: -0.5px;
    }
  }
}
/* #endregion */

/* #region Responsive */

@media (max-width: 1440px) {
  .container {
    padding: 0 30px;
  }
  .start-page {
    padding: 60px 0 0;
    .cookie-wrapper {
      padding: 76px 30px;
      margin: 0 auto 100px;
    }
  }
  .home {
    .hero {
      .container::before {
        left: -250px;
      }
      .hero-content {
        flex-direction: column;
      }
    }
    .main {
      .future {
        margin-bottom: 120px;
        .slider-container {
          display: flex;
          overflow-x: auto;
          scroll-snap-type: x mandatory;
          scroll-behavior: smooth;
          gap: 0;
          -webkit-overflow-scrolling: touch;
        }

        .slider-container::-webkit-scrollbar {
          display: none;
        }

        .card {
          min-width: 100%;
          scroll-snap-align: start;
          box-sizing: border-box;
          margin-bottom: 40px;
        }
        .card::before {
          width: 100%;
          height: 103px;
          top: 100px;
        }

        .slider-controls {
          display: flex;
        }
      }
      .pave {
        margin-bottom: 120px;
        flex-direction: column;
        img {
          max-width: 684px;
        }
      }
      .how-work {
        margin-bottom: 120px;
        .wrapper {
          grid-template-columns: 1fr;
        }
      }
      .started {
        .steps {
          margin-bottom: 120px;
          flex-wrap: wrap;
          justify-content: center;
          gap: 24px 16px;
          .step {
            max-width: 330px;
          }
        }
      }
      .marquee {
        margin: 0 -80px 120px;
      }
      .overview {
        margin-bottom: 120px;
        grid-template-columns: 1fr;
      }
      .testimonials {
        margin-bottom: 120px;
        .slide {
          min-width: 100%;
          scroll-snap-align: center;
        }
        .viewport {
          margin-right: 0;
        }
        .slide-video-wrapp {
          min-height: 285px;
        }
      }
      .reviews {
        margin-bottom: 120px;
        .sliders {
          grid-template-columns: repeat(2, 1fr);
          gap: 16px;
        }
        .card:last-child {
          grid-column: auto;
        }
      }
      .faq {
        margin: 0 auto 120px;
      }
      .advantages {
        margin-bottom: 120px;
        .cards {
          grid-template-columns: 1fr;
          grid-template-rows: repeat(4, 1fr);
        }
      }
      .contact {
        margin-bottom: 260px;
        flex-direction: column;
        .photo {
          max-width: none;
          width: auto;
          margin: 0 auto;
        }
      }
    }
  }
  .policy {
    margin-bottom: 120px;
    .main {
      .wrapper {
        flex-direction: column;
      }
    }
  }
}

@media (max-width: 744px) {
  .container {
    padding: 0 20px;
  }

  .start-page {
    padding: 76px 0 0;
    .cookie-wrapper {
      padding: 60px 30px;
      margin: 0 auto 60px;
    }
    h1 {
      font-size: 26px;
    }
    .cookie-content {
      p {
        font-size: 16px;
      }
    }
    .links {
      justify-content: center;
      flex-wrap: wrap;
      gap: 30px 20px;
    }
  }
  .header {
    flex-direction: column;
    gap: 22px;
    margin: 30px 0 50px;
    .logo {
      max-width: 280px;
    }
  }
  .home {
    .hero {
      .container::before {
        width: 114px;
        height: 551px;
        left: -70px;
        top: -390px;
        transform: rotate(-37deg);
        background: linear-gradient(
          180deg,
          #644ff0 24%,
          rgba(100, 79, 240, 0.45) 91%
        );
        filter: blur(57px);
      }
      .hero-content {
        margin: 0 0 25px;
        gap: 22px;
        .content {
          h1 {
            font-size: 36px;
          }
          p {
            font-size: 16px;
          }
        }
      }
    }
    .main {
      .future {
        margin-bottom: 100px;
        h2 {
          font-size: 26px;
        }
        h3 {
          font-size: 26px;
          margin-bottom: 50px;
        }
        .card::before {
          height: 150px;
        }
      }
      .pave {
        margin-bottom: 100px;
        .content {
          h2 {
            font-size: 26px;
          }
          p {
            font-size: 16px;
          }
        }
      }
      .how-work {
        margin-bottom: 100px;
      }
      .started {
        h2,
        h3 {
          font-size: 26px;
          letter-spacing: 0.8px;
        }
        h3 {
          margin-bottom: 50px;
        }
        .steps {
          margin-bottom: 100px;
          .step {
            p {
              font-size: 16px;
            }
            span {
              margin-bottom: 22px;
            }
          }
        }
      }
      .marquee {
        margin: 0 -80px 100px;
        .content {
          .item {
            .item-text {
              h4 {
                font-size: 20px;
              }
              span {
                font-size: 16px;
              }
            }
          }
        }
      }
      .overview {
        margin-bottom: 100px;
        h2 {
          font-size: 26px;
        }
        h3 {
          font-size: 20px;
        }
        p {
          font-size: 16px;
        }
      }
      .testimonials {
        margin-bottom: 100px;
        .slider-track {
          margin-bottom: 30px;
        }
        .slide-video-wrapp {
          min-height: 163px;
        }
        h2 {
          font-size: 26px;
        }
        h3 {
          font-size: 26px;
          margin-bottom: 50px;
        }
        .slide-content {
          p {
            font-size: 16px;
          }
        }
      }
      .reviews {
        margin-bottom: 100px;
        .sliders {
          display: flex;
          overflow-x: auto;
          scroll-snap-type: x mandatory;
          scroll-behavior: smooth;
          gap: 0;
          -webkit-overflow-scrolling: touch;
        }
        .sliders::-webkit-scrollbar {
          display: none;
        }
        .card {
          min-width: 100%;
          scroll-snap-align: start;
          box-sizing: border-box;
          margin-bottom: 30px;
          padding: 36px 20px;
          p {
            font-size: 16px;
          }
        }
        .slider-controls {
          display: flex;
        }
        .card-wrap {
          h3 {
            font-size: 20px;
          }
        }
      }
      .faq {
        margin: 0 auto 100px;
        h2 {
          font-size: 26px;
        }
        .h3 {
          font-size: 26px;
          margin-bottom: 50px;
        }
        .label {
          h3 {
            font-size: 20px;
          }
        }
      }
      .advantages {
        margin-bottom: 100px;
        .cards {
          grid-template-rows: auto;
        }
        h2 {
          font-size: 26px;
        }

        .subtitle {
          font-size: 16px;
          margin-bottom: 50px;
        }
        .card-header {
          flex-direction: column;
          align-items: center;
          h3 {
            text-align: center;
          }
        }
        .card {
          p {
            font-size: 16px;
          }
        }
      }
      .contact {
        margin-bottom: 130px;
        .content {
          h2,
          h3 {
            font-size: 26px;
            line-height: 1.4;
          }
          h4 {
            font-size: 20px;
            line-height: 1.4;
          }
          p {
            line-height: 1.4;
          }
        }
      }
    }
  }
  .policy {
    margin-bottom: 100px;
    .main {
      .content {
        h1 {
          font-size: 36px;
          letter-spacing: -1px;
        }
        h2 {
          font-size: 20px;
          letter-spacing: -0.6px;
        }
        p {
          font-size: 16px;
          letter-spacing: -0.5px;
          line-height: 1.4;
        }
        ul {
          li {
            font-size: 16px;
            letter-spacing: -0.5px;
            line-height: 1.4;
          }
        }
      }
      .wrapper {
        gap: 16px;
        .left,
        .right {
          padding: 47px 20px;
          h3 {
            font-size: 20px;
            letter-spacing: -0.6px;
          }
          span {
            font-size: 16px;
          }
        }

        .left::before {
          width: 210px;
          height: 303px;
        }
        .right::before {
          width: 120px;
          height: 301px;
        }
        .right {
          h3 {
            color: var(--color-purple-1);
            font-family: "Inter";
          }
        }
      }
    }
  }

  .footer {
    .header {
      align-items: start;
      gap: 40px;
    }
    .links {
      flex-direction: column;
      gap: 40px;
      align-items: start;
    }
  }
}

/* #endregion */

@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}