@charset "utf-8";

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  color: #111727;
  background: #f3f9ff;
  font-family: Roboto, Helvetica Neue, PingFang SC, Microsoft YaHei, Helvetica,
    Arial, sans-serif;
}

a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

img {
  width: 100%;
  display: block;
}

.flex {
  display: flex;
}

.space-between {
  justify-content: space-between;
}

.items-center {
  align-items: center;
}

/* ---------- Navigation ---------- */

header {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  height: 1.04rem;
  background: #1d4ed8;
  z-index: 10;
}

nav {
  height: 100%;
  padding: 0 2.6rem;
}

.app-icon {
  width: 0.56rem;
  height: 0.56rem;
  flex: none;
  background: #fff;
  border-radius: 0.12rem;
  overflow: hidden;
}

.brand-name {
  margin-left: 0.16rem;
  font-size: 0.24rem;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
}

.link {
  flex: none;
  padding: 0.12rem 0.12rem;
  min-width: 1.72rem;
  text-align: center;
  font-size: 0.18rem;
  font-weight: 500;
  color: #fff;
  border-radius: 1rem;
  white-space: nowrap;
}

/* ---------- Hero ---------- */

.hero {
  padding-top: 0.76rem;
  background: linear-gradient(180deg, #fff 0%, #9acbff 100%);
  overflow: hidden;
}

.hero-copy {
  text-align: center;
  padding: 0 2.6rem;
}

h1 {
  font-size: 0.48rem;
  font-weight: 700;
  color: #111727;
  line-height: 1.3;
}

.hero-sub {
  margin-top: 0.2rem;
  font-size: 0.24rem;
  font-weight: 500;
  color: #5e6982;
  line-height: 1.4;
}

.hero-shot {
  width: 16.42rem;
  margin: 0.56rem auto 0;
}

/* ---------- Feature sections ---------- */

.feature {
  overflow: hidden;
}

.feature-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 1.2rem 0.6rem 2.6rem;
}

.feature-scan {
  background: #f3f9ff;
}

.feature-scan h2{
  width: 6.7rem;
}

.feature-convert {
  background: linear-gradient(180deg, #f3f9ff 0%, #ceedff 100%);
}

.feature-convert .feature-inner{
  padding: 0.6rem 2.6rem 0.6rem 2.2rem;
}

.feature-copy {
  width: 6.4rem;
  flex: none;
  position: relative;
}

.feature-icon {
  width: 0.48rem;
  height: 0.48rem;
  margin-bottom: 0.28rem;
}

h2 {
  font-size: 0.36rem;
  font-weight: 700;
  color: #111727;
  line-height: 1.35;
}

.feature-desc {
  margin-top: 0.28rem;
  font-size: 0.22rem;
  font-weight: 400;
  color: #5e6982;
  line-height: 1.5;
}

.feature-formats {
  margin-top: 0.28rem;
}

.formats-1 {
  width: 2.08rem;
}

.formats-2 {
  width: 4.4rem;
  position: absolute;
  right: 0;
}

.feature-shot {
  width: 8.8rem;
  flex: none;
}

/* ---------- Mobile ---------- */

@media screen and (max-width: 640px) {
  header {
    height: 1.12rem;
  }

  nav {
    padding: 0 0.32rem;
  }

  .app-icon {
    width: 0.64rem;
    height: 0.64rem;
    border-radius: 0.14rem;
  }

  .brand-name {
    margin-left: 0.16rem;
    font-size: 0.26rem;
    white-space: normal;
  }

  .link {
    min-width: auto;
    padding: 0.12rem 0.2rem;
    font-size: 0.22rem;
    border: 1px solid rgba(255, 255, 255, 0.6);
  }

  .hero {
    padding-top: 0.6rem;
  }

  .hero-copy {
    padding: 0 0.4rem;
  }

  h1 {
    font-size: 0.52rem;
  }

  .hero-sub {
    margin-top: 0.2rem;
    font-size: 0.28rem;
  }

  .hero-shot {
    width: 100%;
    margin-top: 0.5rem;
  }

  .feature-inner {
    flex-direction: column;
    align-items: center;
    padding: 0.7rem 0.4rem;
    gap: 0.4rem;
  }

  /* keep copy above the illustration in both sections */
  .feature-copy {
    order: 1;
    width: 100%;
    text-align: center;
  }

  .feature-shot {
    order: 2;
    width: 100%;
    max-width: 6.2rem;
  }

  .feature-icon {
    width: 0.6rem;
    height: 0.6rem;
    margin: 0 auto 0.24rem;
  }

  h2 {
    font-size: 0.44rem;
  }

  .feature-desc {
    margin-top: 0.24rem;
    font-size: 0.26rem;
  }

  .feature-desc br {
    display: none;
  }

  .feature-formats {
    margin: 0.32rem auto 0;
  }

  .formats-1 {
    width: 2.8rem;
  }

  .formats-2 {
    width: 5rem;
    margin-left: 0;
  }
}