.sy-app {
  --sx: 100cqw;
  container-type: inline-size;
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 1080;
  margin: -1px 0 0;
  overflow: hidden;
  background: #fff;
  color: #2f2018;
}

.sy-app__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sy-app__eyebrow,
.sy-app__title,
.sy-app__sub,
.sy-app__intro,
.sy-app__feat {
  position: absolute;
  z-index: 1;
  margin: 0;
}

.sy-app__eyebrow {
  left: calc(var(--sx) * 98 / 1920);
  top: calc(var(--sx) * 137 / 1920);
  font-family: "SVN-Gilroy", Manrope, sans-serif;
  font-weight: 400;
  font-size: calc(var(--sx) * 36 / 1920);
  line-height: calc(var(--sx) * 38 / 1920);
  letter-spacing: -0.03em;
  color: #a28b7e;
}

.sy-app__title {
  left: calc(var(--sx) * 98 / 1920);
  top: calc(var(--sx) * 216 / 1920);
  max-width: calc(var(--sx) * 800 / 1920);
  font-family: "SVN-Gilroy", Manrope, sans-serif;
  font-weight: 500;
  font-size: calc(var(--sx) * 64 / 1920);
  line-height: calc(var(--sx) * 69 / 1920);
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: #2f2018;
}

.sy-app__sub {
  left: calc(var(--sx) * 98 / 1920);
  top: calc(var(--sx) * 288 / 1920);
  font-family: "SVN-Gilroy", Manrope, sans-serif;
  font-weight: 500;
  font-size: calc(var(--sx) * 36 / 1920);
  line-height: calc(var(--sx) * 38 / 1920);
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: #2f2018;
  white-space: nowrap;
}

.sy-app__intro {
  left: calc(var(--sx) * 98 / 1920);
  top: calc(var(--sx) * 356 / 1920);
  width: calc(var(--sx) * 480 / 1920);
  font-family: "SVN-Gilroy", Manrope, sans-serif;
  font-weight: 500;
  font-size: calc(var(--sx) * 24 / 1920);
  line-height: calc(var(--sx) * 34 / 1920);
  letter-spacing: -0.03em;
  color: rgba(47, 32, 24, 0.3);
}

.sy-app__feat {
  left: calc(var(--sx) * 98 / 1920);
  width: calc(var(--sx) * 700 / 1920);
}

.sy-app__feat h3,
.sy-app__feat p,
.sy-app__rule {
  position: absolute;
  left: 0;
  margin: 0;
}

.sy-app__feat h3 {
  top: 0;
  font-family: "SVN-Gilroy", Manrope, sans-serif;
  font-weight: 700;
  font-size: calc(var(--sx) * 24 / 1920);
  line-height: calc(var(--sx) * 25 / 1920);
  letter-spacing: 0;
  text-transform: uppercase;
  color: #2f2018;
  white-space: nowrap;
}

.sy-app__feat p {
  font-family: "SVN-Gilroy", Manrope, sans-serif;
  font-weight: 500;
  font-size: calc(var(--sx) * 20 / 1920);
  line-height: calc(var(--sx) * 21 / 1920);
  letter-spacing: -0.03em;
  color: rgba(47, 32, 24, 0.3);
  white-space: nowrap;
}

.sy-app__rule {
  width: calc(var(--sx) * 615 / 1920);
  height: 1px;
  background: rgba(47, 32, 24, 0.12);
}

.sy-app__feat:nth-of-type(1) { top: calc(var(--sx) * 665 / 1920); }
.sy-app__feat:nth-of-type(1) p { top: calc(var(--sx) * 31 / 1920); }
.sy-app__feat:nth-of-type(1) .sy-app__rule { top: calc(var(--sx) * 66 / 1920); }

.sy-app__feat:nth-of-type(2) { top: calc(var(--sx) * 769 / 1920); }
.sy-app__feat:nth-of-type(2) p { top: calc(var(--sx) * 31 / 1920); }
.sy-app__feat:nth-of-type(2) .sy-app__rule { top: calc(var(--sx) * 66 / 1920); }

.sy-app__feat:nth-of-type(3) { top: calc(var(--sx) * 877 / 1920); }
.sy-app__feat:nth-of-type(3) p { top: calc(var(--sx) * 27 / 1920); }
.sy-app__feat:nth-of-type(3) .sy-app__rule { top: calc(var(--sx) * 65 / 1920); }

.sy-app__shadow {
  position: absolute;
  z-index: 1;
  left: calc(var(--sx) * 888 / 1920);
  top: calc(var(--sx) * 865 / 1920);
  width: calc(var(--sx) * 572 / 1920);
  height: calc(var(--sx) * 96 / 1920);
  background: radial-gradient(50% 50% at 50% 50%, rgba(5, 1, 11, 0.35) 35%, rgba(17, 0, 39, 0) 100%);
  filter: blur(41px);
  pointer-events: none;
}

.sy-app__phone--left,
.sy-app__phone--right {
  position: absolute;
  object-fit: fill;
  pointer-events: none;
}

.sy-app__phone--left {
  z-index: 3;
  left: calc(var(--sx) * 821 / 1920);
  top: calc(var(--sx) * 35 / 1920);
  width: calc(var(--sx) * 563 / 1920);
  height: calc(var(--sx) * 937 / 1920);
}

.sy-app__phone--right {
  z-index: 2;
  left: calc(var(--sx) * 1374 / 1920);
  top: calc(var(--sx) * 378 / 1920);
  width: calc(var(--sx) * 507 / 1920);
  height: calc(var(--sx) * 702 / 1920);
}