@font-face {
  font-family: LumaInter;
  src: url('/assets/concept/inter-semibold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

.feature-design {
  --feature-night: #08090c;
  --feature-paper: #f3f3f5;
  --feature-ink: #17171b;
  --feature-muted: #77777f;
  --feature-violet: #8271ff;
  background: var(--feature-night);
}

.feature-design .features-main {
  overflow: clip;
  color: var(--feature-ink);
  background: var(--feature-paper);
}

.feature-design .features-main h1,
.feature-design .features-main h2,
.feature-design .features-main h3 {
  margin: 0;
  font-family: LumaInter, Inter, Arial, sans-serif;
  font-weight: 600;
  letter-spacing: -.065em;
  text-wrap: balance;
  overflow-wrap: normal;
  hyphens: auto;
}

.feature-design .features-main p,
.feature-design .features-main ul,
.feature-design .features-main figure {
  margin: 0;
}

.feature-design .features-main p {
  text-wrap: pretty;
}

.feature-design .features-main img {
  display: block;
  width: 100%;
  height: auto;
}

.feature-design .features-hero {
  min-height: calc(100svh - 84px);
  padding: clamp(82px, 9vw, 165px) 4vw clamp(70px, 9vw, 150px);
  color: #fff;
  background:
    radial-gradient(circle at 76% 15%, rgba(130, 113, 255, .13), transparent 29%),
    var(--feature-night);
}

.feature-design .features-hero-copy {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(280px, .55fr);
  align-items: end;
  gap: 5vw;
  max-width: 1800px;
  margin: 0 auto clamp(60px, 7vw, 120px);
}

.feature-design .features-hero h1 {
  max-width: 1320px;
  font-size: clamp(64px, 8.5vw, 174px);
  line-height: .91;
}

.feature-design .features-main .gradient-text {
  color: var(--feature-violet);
  background: none;
  -webkit-text-fill-color: currentColor;
}

.feature-design .features-hero-intro {
  max-width: 470px;
  padding-bottom: .6vw;
}

.feature-design .features-hero-copy > *,
.feature-design .feature-chapter-heading > *,
.feature-design .feature-handheld-copy,
.feature-design .feature-final > div {
  min-width: 0;
}

.feature-design .features-hero-intro > p {
  color: #b9b9c2;
  font-size: clamp(17px, 1.18vw, 22px);
  line-height: 1.55;
}

.feature-design .feature-hero-actions {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 32px;
}

.feature-design .features-main .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 14px 25px;
  border: 0;
  border-radius: 999px;
  color: var(--feature-night);
  background: #fff;
  box-shadow: none;
  font-size: 14px;
  font-weight: 700;
}

.feature-design .feature-text-link {
  color: #d7d7dd;
  font-size: 14px;
  font-weight: 600;
}

.feature-design .features-hero-composition {
  position: relative;
  width: min(92vw, 1780px);
  margin: auto;
  padding-inline-end: min(9vw, 150px);
}

.feature-design .feature-frame,
.feature-design .feature-phone,
.feature-design .feature-pair-tv {
  position: relative;
  overflow: hidden;
  background: #111218;
  box-shadow: 0 35px 100px rgba(0, 0, 0, .28);
}

.feature-design .feature-frame {
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: clamp(12px, 1.4vw, 24px);
}

.feature-design .feature-frame > .screenshot-link {
  overflow: hidden;
}

.feature-design .feature-frame > .screenshot-link > img {
  transform: scale(var(--camera-scale, 1));
  transform-origin: 50% 50%;
}

.feature-design .feature-frame-desktop {
  aspect-ratio: 16 / 9;
}

.feature-design .feature-frame-desktop img,
.feature-design .feature-frame-live img,
.feature-design .feature-chapter > .feature-frame img {
  height: 100%;
  object-fit: cover;
}

.feature-design .feature-phone {
  aspect-ratio: 1080 / 2400;
  padding: 5px;
  border: 1px solid #464650;
  border-radius: clamp(22px, 2.5vw, 44px);
}

.feature-design .feature-phone img,
.feature-design .feature-phone .screenshot-link {
  height: 100%;
}

.feature-design .feature-phone img {
  border-radius: inherit;
  object-fit: cover;
}

.feature-design .feature-hero-phone {
  position: absolute;
  right: 0;
  bottom: -7%;
  width: clamp(150px, 17vw, 310px);
  transform: rotate(3deg);
  box-shadow: 0 40px 80px rgba(0, 0, 0, .5);
}

.feature-design .feature-chapter {
  padding: clamp(110px, 12vw, 220px) 4vw clamp(100px, 11vw, 190px);
}

.feature-design .feature-chapter-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, .55fr);
  align-items: end;
  gap: 7vw;
  max-width: 1800px;
  margin: 0 auto clamp(60px, 7vw, 120px);
}

.feature-design .feature-chapter h2 {
  font-size: clamp(62px, 7.5vw, 154px);
  line-height: .94;
}

.feature-design .feature-chapter-heading p {
  max-width: 520px;
  padding-bottom: .5vw;
  color: var(--feature-muted);
  font-size: clamp(18px, 1.25vw, 23px);
  line-height: 1.55;
}

.feature-design .feature-chapter > .feature-frame {
  width: min(92vw, 1780px);
  aspect-ratio: 16 / 9;
  margin: auto;
}

.feature-design figcaption {
  position: absolute;
  right: 18px;
  bottom: 15px;
  z-index: 2;
  padding: 8px 11px;
  border-radius: 8px;
  color: rgba(255, 255, 255, .78);
  background: rgba(8, 9, 12, .74);
  font-size: 11px;
  line-height: 1.3;
  backdrop-filter: blur(12px);
}

.feature-design .feature-points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  max-width: 1800px;
  padding: 0;
  margin: clamp(45px, 5vw, 85px) auto 0;
  list-style: none;
}

.feature-design .feature-points li {
  padding-top: 18px;
  border-top: 1px solid rgba(23, 23, 27, .24);
  color: #55555d;
  font-size: clamp(14px, 1vw, 17px);
  line-height: 1.45;
}

.feature-design .feature-live,
.feature-design .feature-cinema {
  color: #fff;
  background: var(--feature-night);
}

.feature-design .feature-live .feature-chapter-heading p,
.feature-design .feature-cinema .feature-chapter-heading p {
  color: #aaaab4;
}

.feature-design .feature-live .feature-points li,
.feature-design .feature-cinema .feature-points li {
  border-color: rgba(255, 255, 255, .2);
  color: #d1d1d7;
}

.feature-design .feature-tv {
  background: var(--feature-paper);
}

.feature-design .feature-cinema {
  background:
    radial-gradient(circle at 18% 30%, rgba(130, 113, 255, .1), transparent 25%),
    var(--feature-night);
}

.feature-design .feature-handheld {
  color: var(--feature-ink);
  background: var(--feature-paper);
}

.feature-design .feature-mobile,
.feature-design .feature-profiles {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, .72fr);
  align-items: center;
  gap: 7vw;
  min-height: 1050px;
  padding: clamp(110px, 12vw, 210px) max(5vw, calc((100vw - 1800px) / 2));
}

.feature-design .feature-handheld-copy h2 {
  max-width: 1100px;
  font-size: clamp(61px, 6.8vw, 138px);
  line-height: .94;
}

.feature-design .feature-handheld-copy > p {
  max-width: 600px;
  margin-top: 35px;
  color: var(--feature-muted);
  font-size: clamp(18px, 1.25vw, 23px);
  line-height: 1.55;
}

.feature-design .feature-handheld .feature-points {
  margin-top: clamp(46px, 5vw, 80px);
}

.feature-design .feature-mobile-phone {
  justify-self: center;
  width: min(27vw, 400px);
  max-height: 760px;
}

.feature-design .feature-profiles {
  grid-template-columns: minmax(340px, .82fr) minmax(0, 1.18fr);
  border-top: 1px solid #d1d1d7;
}

.feature-design .feature-profiles .feature-handheld-copy {
  order: 2;
}

.feature-design .feature-screen-pair {
  position: relative;
  min-height: min(46vw, 760px);
  direction: ltr;
}

.feature-design .feature-pair-tv {
  position: absolute;
  top: 7%;
  right: 0;
  width: 92%;
  aspect-ratio: 16 / 9;
  border: 1px solid #d5d5da;
  border-radius: clamp(12px, 1.4vw, 22px);
}

.feature-design .feature-pair-tv img {
  height: 100%;
  object-fit: cover;
}

.feature-design .feature-pair-phone {
  position: absolute;
  left: 0;
  bottom: 0;
  width: min(16vw, 240px);
  box-shadow: 0 35px 80px rgba(20, 16, 35, .25);
}

.feature-design .feature-arsenal {
  padding: clamp(110px, 12vw, 220px) max(5vw, calc((100vw - 1800px) / 2));
  color: #fff;
  background: var(--feature-night);
}

.feature-design .feature-arsenal > h2 {
  max-width: 1400px;
  margin-bottom: clamp(80px, 10vw, 180px);
  font-size: clamp(62px, 7.7vw, 158px);
  line-height: .93;
}

.feature-design .feature-index {
  border-bottom: 1px solid rgba(255, 255, 255, .2);
}

.feature-design .feature-index article {
  display: grid;
  grid-template-columns: minmax(280px, .9fr) minmax(320px, 1.1fr);
  gap: 8vw;
  align-items: start;
  padding: clamp(33px, 4vw, 66px) 0;
  border-top: 1px solid rgba(255, 255, 255, .2);
}

.feature-design .feature-index h3 {
  font-size: clamp(32px, 3.5vw, 67px);
  line-height: 1;
}

.feature-design .feature-index p {
  max-width: 680px;
  color: #aaaab4;
  font-size: clamp(17px, 1.25vw, 23px);
  line-height: 1.55;
}

.feature-design .feature-final {
  display: grid;
  grid-template-columns: minmax(220px, .5fr) minmax(0, 1.5fr);
  align-items: center;
  gap: 8vw;
  min-height: 82svh;
  padding: clamp(100px, 12vw, 220px) max(5vw, calc((100vw - 1800px) / 2));
  color: var(--feature-ink);
  background: var(--feature-paper);
}

.feature-design .feature-final > img {
  width: min(24vw, 390px);
  border-radius: 25%;
}

.feature-design .feature-final h2 {
  max-width: 1220px;
  font-size: clamp(62px, 7.3vw, 148px);
  line-height: .94;
}

.feature-design .feature-final p {
  max-width: 600px;
  margin: 35px 0;
  color: #5f5f68;
  font-size: clamp(18px, 1.2vw, 22px);
  line-height: 1.55;
}

.feature-design .feature-final .btn {
  color: #fff;
  background: var(--feature-ink);
}

@media (max-width: 1000px) {
  .feature-design .features-hero-copy,
  .feature-design .feature-chapter-heading {
    grid-template-columns: 1fr;
    gap: 35px;
  }

  .feature-design .features-hero-intro,
  .feature-design .feature-chapter-heading p {
    max-width: 620px;
  }

  .feature-design .feature-mobile,
  .feature-design .feature-profiles {
    min-height: 850px;
  }

  .feature-design .feature-handheld .feature-points {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .feature-design .feature-handheld .feature-points li {
    padding-top: 13px;
  }
}

@media (max-width: 900px) {
  .feature-design .features-hero {
    padding-top: 166px;
  }

  .feature-design .feature-mobile,
  .feature-design .feature-profiles {
    display: flex;
    min-height: 0;
    padding: 110px 5vw;
    flex-direction: column;
    gap: 70px;
  }

  .feature-design .feature-handheld-copy {
    width: 100%;
  }

  .feature-design .feature-mobile-phone {
    width: min(50vw, 360px);
    max-height: none;
  }

  .feature-design .feature-profiles .feature-handheld-copy {
    order: 0;
  }

  .feature-design .feature-screen-pair {
    width: 100%;
    min-height: min(68vw, 650px);
  }

  .feature-design .feature-pair-phone {
    width: min(24vw, 210px);
  }
}

@media (max-width: 700px) {
  .feature-design .features-hero {
    min-height: 0;
    padding: 166px 20px 90px;
  }

  .feature-design .features-hero-copy {
    margin-bottom: 55px;
  }

  .feature-design .features-hero h1 {
    font-size: clamp(49px, 15vw, 76px);
    line-height: .96;
  }

  .feature-design .feature-hero-actions {
    align-items: flex-start;
    flex-direction: column;
    gap: 20px;
  }

  .feature-design .features-hero-composition {
    width: 118%;
    margin-inline-start: -9%;
    padding: 0 12% 24% 0;
  }

  .feature-design .feature-frame {
    border-radius: 12px;
  }

  .feature-design .feature-hero-phone {
    right: 1%;
    bottom: 0;
    width: 27%;
    padding: 3px;
    border-radius: 18px;
  }

  .feature-design .feature-chapter {
    padding: 95px 20px 90px;
  }

  .feature-design .feature-chapter h2,
  .feature-design .feature-handheld-copy h2,
  .feature-design .feature-arsenal > h2,
  .feature-design .feature-final h2 {
    font-size: clamp(48px, 13vw, 70px);
    line-height: .98;
  }

  .feature-design .feature-chapter-heading {
    grid-template-columns: minmax(0, 1fr);
    margin-bottom: 48px;
  }

  .feature-design .feature-chapter > .feature-frame {
    width: 136%;
    margin-inline-start: -18%;
  }

  .feature-design figcaption {
    right: 8px;
    bottom: 8px;
    max-width: calc(100% - 16px);
    padding: 6px 8px;
    font-size: 9px;
  }

  .feature-design .feature-points {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 43px;
  }

  .feature-design .feature-points li {
    padding-top: 13px;
  }

  .feature-design .feature-mobile,
  .feature-design .feature-profiles {
    display: flex;
    min-height: 0;
    padding: 100px 20px;
    flex-direction: column;
    gap: 60px;
  }

  .feature-design .feature-handheld-copy {
    width: 100%;
  }

  .feature-design .feature-chapter h2,
  .feature-design .feature-handheld-copy h2 {
    font-size: clamp(43px, 13vw, 70px);
  }

  .feature-design .feature-mobile-phone {
    width: min(72vw, 330px);
    max-height: none;
  }

  .feature-design .feature-profiles .feature-handheld-copy {
    order: 0;
  }

  .feature-design .feature-screen-pair {
    width: 115%;
    min-height: 102vw;
    margin-inline-start: -7.5%;
  }

  .feature-design .feature-pair-tv {
    width: 100%;
  }

  .feature-design .feature-pair-phone {
    width: 31%;
    border-radius: 18px;
  }

  .feature-design .feature-arsenal {
    padding: 105px 20px 115px;
  }

  .feature-design .feature-arsenal > h2 {
    margin-bottom: 80px;
  }

  .feature-design .feature-index article {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 34px 0 39px;
  }

  .feature-design .feature-index h3 {
    font-size: clamp(32px, 10vw, 44px);
  }

  .feature-design .feature-final {
    display: flex;
    min-height: 0;
    padding: 105px 20px 120px;
    flex-direction: column;
    align-items: flex-start;
    gap: 50px;
  }

  .feature-design .feature-final > img {
    width: 105px;
  }
}

@media (max-width: 380px) {
  html[lang="de"] .feature-design .feature-chapter h2,
  html[lang="de"] .feature-design .feature-handheld-copy h2 {
    font-size: 39px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .feature-design .feature-frame > .screenshot-link > img {
    transform: none !important;
  }
}