.landing {
  width: 100dvw;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
}

.landing > section {
  width: 100%;
  max-width: 1248px;
}

.heading {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  justify-content: space-between;
  align-items: center;
  margin: 5rem 0;
}


@media (max-width: 768px) {
  .heading {
    grid-template-columns: 1fr;
    gap: 5rem;
  }
}

/*.landing-page-content {*/
/*  margin: 4rem auto;*/
/*  color: #ffffff;*/
/*  display: flex;*/
/*  flex-direction: row;*/
/*  justify-content: space-between;*/


/*  .content-text {*/
/*    flex-basis: 3;*/
/*    & > h1 {*/
/*      font-size: 64px;*/
/*    }*/
/*    & > h1:hover {*/
/*      text-decoration-line: underline;*/
/*    }*/
/*    & > p {*/
/*      font-size: 20px;*/
/*      margin-bottom: 1rem;*/
/*    }*/

/*    & button {*/
/*      background-color: white;*/
/*      border-radius: 100px;*/
/*      !*width: 10rem;*!*/
/*      color: black;*/
/*      padding: 10px 20px;*/
/*      text-align: center;*/
/*      display: inline-block;*/
/*      cursor: pointer;*/
/*      transition: background-color 0.3s ease;*/
/*    }*/

/*    & button:hover {*/
/*      color: white;*/
/*      background-color: #80868b; !* 鼠标悬停时的背景颜色 *!*/
/*    }*/
/*  }*/
/*}*/

@media (max-width: 768px) {
  .landing-page-content {
    margin: 4rem auto;
    flex-direction: column-reverse;
  }
}


@media (max-width: 768px) {
  .landing-page-content {
    margin: 4rem auto;
    padding: 0 1rem;
    color: #ffffff;


    .content-text {
      width: 100%;
      & h1 {
        font-size: 64px;
      }

      & p {
        font-size: 20px;
      }
    }
  }
}




.back {
  width: 100%;
  height: 100%;
  --color: #E1E1E1;
  background-color: #F3F3F3;
  background-image: linear-gradient(0deg, transparent 24%, var(--color) 25%, var(--color) 26%, transparent 27%,transparent 74%, var(--color) 75%, var(--color) 76%, transparent 77%,transparent),
  linear-gradient(90deg, transparent 24%, var(--color) 25%, var(--color) 26%, transparent 27%,transparent 74%, var(--color) 75%, var(--color) 76%, transparent 77%,transparent);
  background-size: 30px 30px;
}


.cyan-gradient-background {
  --a: oklch(90% 0.05 200);
  --a-shape: ellipse 30% 23% at 30% 56%;
  --b: oklch(94% 0.09 175);
  --b-shape: ellipse 30% 30% at 71% 42%;
  --c: oklch(96% 0.06 218);
  --c-shape: ellipse 40% 25% at 50% 72%;
  background: radial-gradient(var(--a-shape), var(--a), transparent),
  radial-gradient(var(--b-shape), var(--b), transparent),
  radial-gradient(var(--c-shape), var(--c), transparent);
}

@media (max-width: 768px) {
  .cyan-gradient-background {
    --a-shape: circle 250px at 26% 65%;
    --b-shape: circle 250px at 73% 64%;
    --c-shape: circle 250px at 50% 70%;
  }
}

.dark .cyan-gradient-background  {
  --a: oklch(25% 0.1 200);
  --b: oklch(27% 0.1 175);
  --c: oklch(26% 0.08 218);
}




.mobile-only {
  display: none;
}

@media (max-width: 768px) {
  .mobile-only {
    display: initial;
  }
  .pc-only {
    display: none;
  }
}

.typography {
  font-family: 'Noto Sans SC', sans-serif;
}

.typography h1 {
  font-size: 2.25rem;
  line-height: 2.5rem;
  scroll-margin: 5rem;
  font-weight: 800;
  letter-spacing: -0.025em;
}
.typography h2 {
  scroll-margin: 5rem;
  border-bottom-width: 1px;
  padding-bottom: 0.5rem;
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 600;
  letter-spacing: -0.025em;
}
.typography h2:first-child {
  margin-top: 0;
}
.typography h3 {
  font-size: 1.2rem;
}
.typography h4 {
  font-size: 1rem;
}
.typography p {
  line-height: 1.75rem;
}
.typography p:not(:first-child) {
  margin-top: 1.5rem;
}
.typography blockquote {
  margin-top: 1.5rem;
  padding-left: 1.5rem;
  border-left-width: 2px;
  font-style: italic;
}
@media (min-width: 1024px) {
  .typography h1 {
    font-size: 3rem;
    line-height: 1;
  }
}

.stack-list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 1rem;
  row-gap: 0.5rem;
  margin: 1rem auto;
}

@media (max-width: 1024px) {
  .stack-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1rem;
    row-gap: 0.5rem;
    margin: 0 0.4rem;
  }
}





