html,
body,
a,
button,
input {
  outline: 0 none;
  border: 0;
  text-decoration: none;
}

img, video {
  max-width: 100%;
  height: auto;
  border: 0 none;
  vertical-align: bottom;
}

a {
  color: #4c4c52;
  transition: all .25s;
}

a:hover {
  color: var(--brand-color);
  transition: all .25s;
}

button {
  background-color: transparent;
  cursor: pointer;
}

.home-main{
  display: block;
  min-height: 400px;
  flex-grow: 1;
}
.home-section {
  box-sizing: border-box;
  height: calc(100vh - 68px);
  text-align: center;
  flex-direction: column;
  align-items: center;
  padding-top: 0;
  padding-bottom: 32px;
  display: flex;
}
.home-text {
  display: grid;
  grid-template-rows: 130px 1fr 88px;
}

.home-logo{
  width: 392px;
  height: 295px;
  position: relative;
  margin: 0 auto;
  .image-bg {
      position: absolute;
      top: 50%;
      left: 50%;
      border-radius: 50%;
      width: 220px;
      height: 220px;
      background-image: var(--vp-home-hero-image-background-image);
      transform: translate(-50%, -50%);
      -webkit-mask: url(https://m.hellobike.com/resource/helloyun/13459/tOd8H_logo.png?x-oss-process=image/quality,q_80) no-repeat center 100% / 100%;
      mask: url(https://m.hellobike.com/resource/helloyun/13459/tOd8H_logo.png?x-oss-process=image/quality,q_80) no-repeat center 100% / 100%;
  }
  .logo-bg {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 320px;
      height: 320px;
      transform: translate(-50%, -50%);
      background-image: var(--vp-home-hero-image-background-image);
      filter: var(--vp-home-hero-image-filter);
      opacity: .45;
      transition: opacity 1s ease;
  }
}

.home-title {
  line-height: 56px;
  font-size: 48px;
  margin: 0 auto;
  font-weight: 700;
  white-space: pre-wrap;
  letter-spacing: -.4px;
  text-align: center;
}

.home-subtitle2{
  padding-top: 12px;
  font-size: 20px;
  margin: 0 auto;
  font-weight: 500;
  white-space: pre-wrap;
  color: #9999a0;
  display: flex;
  justify-content: center;
  font-size: 38px;
}


.text-grad {
  --brand-gradient: var(--vp-home-hero-image-background-image);
  // --brand-gradient: linear-gradient(180deg,#9dbcff,#0da6e9);
  -webkit-background-clip: text;
  background-image: var(--brand-gradient);
  color: transparent;
}




.actions{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding-top: 32px;
}

.get-started{
  min-width: 120px;
  background-color: var(--vp-button-brand-bg);
  color: #fff;
  border-radius: 26px;
  font-size: 14px;
  display: inline-block;
  border: 1px solid transparent;
  text-align: center;
  font-weight: 600;
  white-space: nowrap;
  padding: 1rem 1.25rem;
  line-height: 112%;

  &:hover{
    opacity: .85;
    color: var(--mute-light);
  }
}

.scroll-down {
  transition: opacity .2s ease-in;
  position: relative;
  cursor: pointer;
  color: var(--scroll-down-dark-color, var(--text-font-color));

  &:hover {
    text-decoration: underline;
  }
  .arrow {
    box-sizing: border-box;
    margin-left: -12px;
    font-size: 50px;
    animation: 1.5s infinite anim-arrow;
    position: absolute;
    left: 50%;

    span {
      display: flex;
      width: 25px;
      height: 30px;
      background-image: var(--arrow-dark-mode-icon, var(--arrow-light-mode-icon));
      background-repeat: no-repeat;
      background-size: 100%;
    }
  }
}

@keyframes anim-arrow {
  0% {
      opacity: 0;
      transform: translateY(0px)
  }

  50% {
      opacity: 1
  }

  to {
      opacity: 0;
      transform: translateY(20px)
  }
}

.we-believe,
.what-we-do,
.advantage {
  padding-top: 175px;
  padding-bottom: 175px;
  border-top: 1px solid rgba(35, 39, 47, .1);
}
.advantage {
  background-image: var(--advantage-bg);
}
.we-believe {
  background-image: var(--we-believe-bg);
}
.what-we-do{
  background-image: var(--what-we-do-bg);
}
.wrap {
  padding-left: 90px;
  padding-right: 90px;
  max-width: 1024px;
  margin: 0 auto;
  h2 {
    margin-top: 0;
    margin-bottom: 30px;
    font-size: 2rem;
    display: flex;
    align-items: center;
    font-weight: 800;
  }
  .down-icon {
    margin-left: 20px;
    margin-top: 10px;
  }
  p{
    line-height: 1.3;
    font-size: 1.6rem;
  }
}

.box-group {
  display: grid;
  grid-column-gap: 1em;
  grid-row-gap: 5em;

  grid-template-columns: repeat(6, 1fr);
  grid-template-areas:
    "one one two two three three"
    "what what what how how how";

  >div {
    padding: 2em 1.4em;
    display: flex;
    flex-direction: column;
    border-bottom: none;
    border-radius: 6px;
    h2 {
      padding: 0;
      margin: 0 0 0.5em 0;
      font-size: 30px;
      color: #fff;
      text-align: left;
    }

  }
  .box1,
  .box2,
  .box3 {
    p{
      font-size: 18px;
      color: #fff;
    }
  }
  .box1 {
    background-color: #ae46fb;
    grid-area: one / one / one / one;
  }
  .box2 {
    background-color: #40b3ff;
    grid-area: two / two / two / two;
  }
  .box3 {
    background-color: #676778;
    grid-area: three / three / three / three;
  }
  .what {
    grid-area: what / what / how / how;
    >div {
      padding: 0;
    }
    p{
      font-size: 19px;
      margin: 0 0 10px 0;
    }
    a {
      color: #0da6e9;
      text-decoration-line: underline;
    }
    a:hover {
      color: #bcc0ff;
    }
  }
  .how {
    grid-area: how;

    .bash-code {
      grid-area: start;
      display: flex;
      flex-direction: column;
      min-width: 0;

      background-color: #141f31;
      background-color: #f6fafd;

      border: 1px solid rgba(68, 68, 68, .12);
      border-radius: 4px;
    }

    pre {
      padding: 20px;
    }

    .language-bash {
      margin: 0 0 1em 0; min-width: 0; min-height: 0
    }
  }
}

.footer-container {
  margin-left: auto;
  margin-right: auto;
  div {
    display: flex;
    padding: 2.5rem 0;
    justify-content: center;
    background: var(--footer-bg, #fff);
    font-size: 12px;
  }
}

.paragraph {
  display: flex;
  color: var(--text-font-color);
  place-items: center;
  justify-content: center;
  font-size: 13px;
}

.install-btn {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: #fff;
  border: 1px solid #ced6e0;
  font-family: "__Roboto_Mono_0db19d","__Roboto_Mono_Fallback_0db19d",Courier New,Courier,monospace;
  color: #001a3a;
  transition: border-color .2s ease-out;
  text-align: center;
  padding: 1rem 1.25rem;
  border-radius: 100px;
  font-size: 16px;
  line-height: 112%;

  &:hover {
    border-color: #92a0b3;
  }

  .cta-icon {
    position: relative;
  }

  svg {
    display: block;
    // vertical-align: middle;
  }

  .copy {
    opacity: 1;
    transition: opacity .2s ease-out,transform .2s ease-out;
  }

  .copy.icon-copied {
    opacity: 0;
    transform: translateY(100%);
  }

  .checkmark.icon-copied {
    opacity: 1;
    transform: translateY(100%);
  }

  .checkmark {
    position: absolute;
    bottom: 100%;
    opacity: 0;
    transform: translateY(0);
    transition: opacity .2s ease-out,transform .2s ease-out;
  }
}