.hero {
  --top-gap: 20rem;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: min(100svh, 1600px);
  display: flex;
  position: relative;
  overflow-x: clip;
}

.hero .hero-container {
  width: 100%;
  height: auto;
  min-height: min(100svh, 1600px);
  padding: var(--top-gap) 0 0;
  grid-template-rows: auto 1fr;
  justify-items: center;
  gap: 5rem;
  display: grid;
  position: relative;
}

.hero .hero-lines {
  left: 0;
  top: var(--top-gap);
  pointer-events: none;
  width: 100vw;
  height: auto;
  position: absolute;
  transform: translate(0%);
}

.hero .hero-heading {
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  width: 70rem;
  display: flex;
}

.hero .hero-heading .hero-title {
  color: #0f172a;
  letter-spacing: -3.2px;
  text-align: center;
  font-family: Manrope;
  font-size: max(40px, min(7.5rem + 5px, 150px));
  font-weight: 500;
  line-height: 100%;
}

.hero .hero-heading .hero-desc, .hero .hero-floating p {
  color: gray;
  text-align: center;
  letter-spacing: -.18px;
  font-size: max(12px, min(1.6rem + 2px, 40px));
  font-weight: 500;
}

.hero .hero-heading .hero-title, .hero .hero-heading .hero-desc, .hero .hero-heading .hero-actions, .hero .hero-meta > img, .hero .hero-markers, .hero .hero-floating, .hero .hero-lines {
  opacity: 0;
  visibility: hidden;
}

.hero .hero-floating {
  width: 48rem;
  position: absolute;
  bottom: 6rem;
  left: 50%;
  transform: translate(-50%);
}

.hero .hero-meta {
  aspect-ratio: 1920 / 614;
  align-self: end;
  width: 100%;
  position: relative;
}

.hero .hero-meta img {
  object-position: center top;
}

.hero .hero-markers {
  pointer-events: none;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.hero .hero-marker {
  aspect-ratio: 1;
  width: 3rem;
  position: absolute;
  transform: translate(-50%, -50%);
}

.hero .hero-marker.is--1 {
  top: 36.3%;
  left: 7.6%;
}

.hero .hero-marker.is--2 {
  top: 12%;
  left: 31%;
}

.hero .hero-marker.is--3 {
  top: 37%;
  left: 36.5%;
}

.hero .hero-marker.is--4 {
  top: 20.1%;
  left: 55%;
}

.hero .hero-marker.is--5 {
  top: 19.6%;
  left: 76.3%;
}

.hero .hero-marker.is--6 {
  top: 43.9%;
  left: 91.5%;
}

@media (orientation: portrait) {
  .hero {
    --top-gap: 20rem;
    height: 100svh;
    min-height: 0;
  }

  .hero .hero-container {
    height: 100%;
    min-height: 0;
  }

  .hero .hero-meta {
    align-self: stretch;
  }

  .hero .hero-container {
    padding: var(--top-gap) 0 0;
    grid-template-rows: auto auto;
    gap: 10rem;
  }

  .hero .hero-lines {
    top: 15rem;
  }

  .hero .hero-heading {
    gap: 1.5rem;
    width: 34rem;
  }

  .hero .hero-heading .hero-title {
    letter-spacing: 0;
    font-size: 3.5rem;
  }

  .hero .hero-heading .hero-desc, .hero .hero-floating p {
    width: 27rem;
    font-size: 1.2rem;
  }

  .hero .hero-heading .hero-title, .hero .hero-heading .hero-desc, .hero .hero-heading .hero-actions, .hero .hero-meta > img {
    opacity: 0;
    visibility: hidden;
  }

  .hero .hero-floating {
    width: 33rem;
    position: absolute;
    bottom: 6rem;
    left: 50%;
  }

  .hero .hero-floating p {
    width: 100%;
  }

  .hero .hero-meta {
    aspect-ratio: auto;
    width: 100%;
    height: 100vmin;
    position: relative;
    overflow: hidden;
  }

  .hero .hero-meta img {
    object-position: center 0;
    object-fit: contain;
    width: 140%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%);
  }

  .hero .hero-marker {
    width: 1.5rem;
  }

  .hero .hero-marker.is--1 {
    top: 15.3%;
  }

  .hero .hero-marker.is--2 {
    top: 5%;
  }

  .hero .hero-marker.is--3 {
    top: 16%;
  }

  .hero .hero-marker.is--4 {
    top: 12.1%;
  }

  .hero .hero-marker.is--5 {
    top: 10%;
  }

  .hero .hero-marker.is--6 {
    top: 15.9%;
  }
}

.text {
  justify-content: center;
  height: 180svh;
  display: flex;
  position: relative;
  overflow-x: clip;
}

.text .text-container {
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100svh;
  display: flex;
  position: sticky;
  top: 0;
}

.text .text-container .text-heading {
  isolation: isolate;
  width: 135rem;
  position: relative;
  transform: translateY(-20%);
}

.text .text-container .text-heading .text-title {
  color: #8e8e8e;
  letter-spacing: -3.2px;
  text-align: center;
  font-size: max(40px, min(7.5rem + 5px, 140px));
  line-height: 100%;
}

.text .text-glow__wrap {
  aspect-ratio: 1;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  justify-content: center;
  align-items: center;
  width: 105vw;
  display: flex;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@media (orientation: landscape) and (height <= 900px) {
  .text .text-container .text-heading {
    transform: translate(0);
  }
}

@media (orientation: portrait) {
  .text {
    height: 150svh;
  }

  .text .text-container .text-heading {
    width: 39rem;
    transform: translateY(-20%);
  }

  .text .text-container .text-heading .text-title {
    letter-spacing: -1.4px;
    font-size: 3.5rem;
  }

  .text .text-glow__wrap {
    width: 104rem;
  }
}

.trust {
  justify-content: center;
  padding: 20svh 0 30svh;
  display: flex;
  position: relative;
  overflow-x: clip;
}

.trust .trust-container {
  justify-content: center;
  width: 100%;
  display: flex;
}

.trust .trust-content {
  width: 145rem;
  position: relative;
}

.trust .trust-content .trust-content__sticky {
  flex-direction: column;
  gap: 12rem;
  display: flex;
  position: relative;
}

.trust .trust-content .trust-path {
  --trust-trail: 59;
  width: 19rem;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 53rem;
}

.trust .trust-content .trust-path svg {
  width: 100%;
  height: 100%;
  display: block;
}

.trust .trust-content .trust-line {
  display: none;
}

.trust .trust-content .trust-item {
  flex-direction: column;
  gap: 2rem;
  width: 50rem;
  display: flex;
}

.trust .trust-content .trust-item.is--right {
  margin-left: 66rem;
}

.trust .trust-content .trust-item.is--left {
  width: 42rem;
  margin-left: 0;
}

.trust .trust-content .trust-item.is--far {
  width: 68rem;
  margin-left: 84rem;
}

.trust .trust-content .trust-item.is--far .trust-item__desc {
  width: 54rem;
}

.trust .trust-item__title {
  color: var(--black);
  letter-spacing: -1.6px;
  font-size: max(20px, min(5.5rem + 4px, 94px));
  font-weight: 500;
  line-height: 1;
}

.trust .trust-item__title.is--stat {
  letter-spacing: -2.4px;
  font-size: max(25px, min(7.5rem + 5px, 120px));
}

.trust .trust-item__desc {
  color: gray;
  letter-spacing: -.18px;
  font-size: max(12px, min(1.6rem + 2px, 40px));
  font-weight: 500;
}

@media (orientation: portrait) {
  .trust {
    padding: 6svh 0 18svh;
  }

  .trust .trust-content {
    width: 39rem;
  }

  .trust .trust-content .trust-content__sticky {
    gap: 10rem;
    padding-left: 3rem;
  }

  .trust .trust-content .trust-path {
    display: none;
  }

  .trust .trust-content .trust-line {
    background: #8e8e8e70;
    width: .2rem;
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
  }

  .trust .trust-content .trust-line .trust-line__fill {
    opacity: .68;
    transform-origin: top;
    background: #176ff0;
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    transform: scaleY(0);
  }

  .trust .trust-content .trust-line .trust-line__trail {
    background: #176ff0;
    border-radius: .2rem;
    width: .4rem;
    height: 7rem;
    display: block;
    position: absolute;
    top: 0;
    left: -.1rem;
  }

  .trust .trust-content .trust-item {
    gap: 1rem;
    width: 29rem;
  }

  .trust .trust-content .trust-item.is--right, .trust .trust-content .trust-item.is--left, .trust .trust-content .trust-item.is--far {
    width: 32rem;
    margin-left: 0;
  }

  .trust .trust-content .trust-item.is--far .trust-item__desc {
    width: 100%;
  }

  .trust .trust-item__title, .trust .trust-item__title.is--stat {
    letter-spacing: -1.4px;
    font-size: 3.5rem;
  }

  .trust .trust-item__desc {
    letter-spacing: 0;
    font-size: 1.2rem;
  }
}