.app-showcase {
  position: relative;
  overflow: hidden;
  padding: 112px 0;
  color: #fff;
  background: radial-gradient(circle at 82% 48%, #7d43ed 0, #4623ac 35%, #201343 71%, #171027 100%);
}

.app-layout {
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  gap: 34px;
  align-items: center;
}

.app-copy { position: relative; z-index: 2; }
.app-copy .eyebrow { color: #e8c9ff; }
.app-copy h2 { font-size: clamp(60px, 6.7vw, 94px); margin-bottom: 26px; }
.app-copy h2 em { color: #ffc1e9; }
.app-copy > p { max-width: 470px; color: #e4d7f6; font-size: 17px; line-height: 1.65; }
.app-copy > p.app-lead { color: #fff; font-size: 22px; font-weight: 600; line-height: 1.42; }
.app-copy .button { margin-top: 23px; }

.app-details { list-style: none; margin: 35px 0 0; padding: 0; max-width: 445px; }
.app-details li { display: flex; align-items: baseline; gap: 15px; padding: 12px 0; border-top: 1px solid #d9c8fb42; font-size: 14px; }
.app-details li::before { content: '↗'; color: #ffbfdf; font-size: 18px; line-height: 1; }

.app-visual { min-width: 0; height: 655px; position: relative; }
.app-visual::before {
  content: '';
  position: absolute;
  inset: 10% 2% 0;
  border-radius: 50%;
  background: radial-gradient(circle, #e48dff66 0, #b781ff22 40%, transparent 69%);
  filter: blur(12px);
}
.app-phone {
  position: absolute;
  width: 47%;
  max-width: 290px;
  overflow: hidden;
  border: 8px solid #242033;
  border-radius: 42px;
  background: #141025;
  box-shadow: 0 27px 55px #0b062e8c, 0 0 0 1px #dac9ff55;
}
.app-phone img { width: 100%; height: auto; display: block; }
.app-phone::after {
  content: '';
  position: absolute;
  width: 25%;
  height: 12px;
  top: 0;
  left: 37.5%;
  border-radius: 0 0 10px 10px;
  background: #242033;
}
.app-phone-first { left: 8%; top: 0; z-index: 2; transform: rotate(-5deg); }
.app-phone-second { right: 0; top: 68px; transform: rotate(7deg); }

@media (max-width: 900px) {
  .app-layout { grid-template-columns: 1fr; }
  .app-copy > p { max-width: 650px; }
  .app-visual { max-width: 650px; width: 100%; margin: 25px auto 0; height: 660px; }
}

@media (max-width: 600px) {
  .app-showcase { padding: 78px 0 55px; }
  .app-copy h2 { font-size: clamp(54px, 13vw, 70px); }
  .app-copy > p { font-size: 15px; }
  .app-copy > p.app-lead { font-size: 19px; }
  .app-details { margin-top: 25px; }
  .app-visual { height: min(140vw, 535px); margin-top: 40px; }
  .app-phone { width: 67%; border-width: 5px; border-radius: 25px; }
  .app-phone::after { height: 7px; }
  .app-phone-first { left: 0; }
  .app-phone-second { width: 54%; right: 0; top: 55px; }
}