main > .app-promo {
    position: relative;
    scroll-margin-top: 6.5rem;
    isolation: isolate;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 1.5rem;
    overflow: hidden;
    padding: clamp(1.6rem, 4vw, 3.5rem);
    color: #fff;
    border-color: rgba(164, 185, 255, .3);
    background: radial-gradient(ellipse at 85% 28%, #4660a0 0%, transparent 55%), linear-gradient(125deg, #111e3b, #1c2a50 55%, #29386c);
    box-shadow: 0 28px 70px rgba(31, 46, 86, .2), inset 0 1px 0 rgba(255, 255, 255, .15);
}
.app-promo::before { content: ""; position: absolute; z-index: -1; width: 32rem; height: 32rem; right: -12rem; bottom: -22rem; border-radius: 50%; background: #6f60ff; filter: blur(85px); opacity: .5; pointer-events: none; }
.app-promo-copy { position: relative; z-index: 2; min-width: 0; }
.app-promo .app-promo-eyebrow { margin: 0 0 1rem; color: #b7ccff; font-size: .85rem; font-weight: 750; }
.app-promo h2 { max-width: 15ch; margin: 0 0 1.2rem; font-size: clamp(2.1rem, 3.8vw, 3.35rem); line-height: 1.06; }
.app-promo-lead { max-width: 43ch; margin: 0; color: #d5def0; font-size: 1rem; }
.app-promo-platforms { display: flex; gap: .7rem; margin: 1.5rem 0; }
.app-promo-platforms > span { display: inline-flex; gap: .55rem; align-items: center; min-height: 2.7rem; padding: .5rem .85rem; border: 1px solid rgba(220, 232, 255, .2); border-radius: .8rem; background: rgba(255, 255, 255, .08); font-size: .95rem; font-weight: 650; }
.app-promo-platforms img { display: block; object-fit: contain; }
.app-promo .app-promo-action { display: inline-flex; justify-content: center; gap: 1.3rem; align-items: center; padding: 1rem 1.25rem; color: #fff; background: linear-gradient(110deg, #356df3, #7357ef); border-color: rgba(191, 201, 255, .4); text-decoration: none; }
.app-promo-action > span { font-size: 1.3rem; }
.app-promo .app-promo-note { max-width: 36ch; margin: .9rem 0 0; color: #aabbdc; font-size: .8rem; line-height: 1.6; }
.app-promo-visual { position: relative; min-width: 0; text-align: center; }
.app-promo-preview-label { display: inline-block; padding: .5rem .8rem; border: 1px solid rgba(218, 229, 255, .18); border-radius: 2rem; color: #d5def0; background: rgba(255, 255, 255, .05); font-size: .75rem; }
.app-promo-devices { position: relative; height: 450px; max-width: 500px; margin: .75rem auto 0; }
.app-promo-devices::after { content: ""; position: absolute; left: 8%; right: 4%; bottom: 0; height: 28px; border-radius: 50%; background: rgba(4, 11, 28, .6); filter: blur(15px); }
.app-promo-phone { position: absolute; z-index: 1; width: 168px; aspect-ratio: 700 / 1570; padding: 6px; border: 1px solid #9aa7ba; border-radius: 29px; background: linear-gradient(100deg, #788599, #0c111b 7%, #222c3b 90%, #acb6c4); box-shadow: 5px 12px 22px rgba(3, 9, 24, .45), inset 0 0 0 2px #111925; transform-origin: center 70%; }
.app-promo-phone::before { content: ""; position: absolute; right: -3px; top: 22%; width: 2px; height: 35px; border-radius: 2px; background: #8c98ac; }
.app-promo-phone::after { content: ""; position: absolute; bottom: 10px; left: 35%; width: 30%; height: 3px; border-radius: 2px; background: rgba(14, 21, 36, .6); }
.app-promo-screen { display: flex; flex-direction: column; width: 100%; height: 100%; overflow: hidden; border-radius: 23px; background: #fff; }
.app-promo-screen > img { display: block; width: 100%; height: 0; flex: 1; min-height: 0; object-fit: cover; object-position: top center; }
.app-promo-statusbar { display: flex; flex-shrink: 0; justify-content: space-between; align-items: center; height: 21px; padding: 4px 10px 2px; color: #182137; background: #fff; font-size: 7px; font-weight: 750; line-height: 1; }
.app-promo-statusbar > span:last-child { display: flex; align-items: center; gap: 3px; font-size: 5px; }
.app-promo-camera { position: absolute; top: 12px; left: calc(50% - 4px); width: 8px; height: 8px; border-radius: 50%; background: #080e19; box-shadow: inset 0 0 0 2px #202b3c; }
.app-promo-phone--restaurant { left: 3%; top: 51px; transform: rotate(-13deg); }
.app-promo-phone--grocery { right: 1%; top: 50px; transform: rotate(13deg); }
.app-promo-phone--store { z-index: 2; width: 193px; top: 15px; left: calc(50% - 96.5px); transform: rotate(-3deg); }
.app-promo-phone--store .app-promo-camera { top: 12px; left: 38%; width: 24%; height: 8px; border-radius: 8px; }
.app-promo-template-caption { position: relative; z-index: 2; margin: .5rem 0 0; color: #b8c8e6; font-size: .8rem; }
@media (max-width: 980px) and (min-width: 701px) {
    .app-promo-devices { height: 375px; }
    .app-promo-phone { width: 137px; border-radius: 25px; }
    .app-promo-phone--store { width: 160px; left: calc(50% - 80px); }
    .app-promo-screen { border-radius: 19px; }
}
@media (max-width: 700px) {
    main > .app-promo { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
    .app-promo h2 { max-width: 17ch; font-size: clamp(2rem, 7.5vw, 3rem); }
    .app-promo-lead { max-width: 48ch; }
    .app-promo-devices { height: 405px; max-width: 390px; }
    .app-promo-phone { width: 150px; border-radius: 26px; }
    .app-promo-phone--store { width: 175px; left: calc(50% - 87.5px); }
    .app-promo-screen { border-radius: 20px; }
    .app-promo-phone--restaurant { left: 0; }
    .app-promo-phone--grocery { right: 0; }
    .app-promo .app-promo-note { max-width: 44ch; }
}
@media (max-width: 380px) {
    .app-promo-devices { height: 355px; }
    .app-promo-phone { width: 125px; }
    .app-promo-phone--store { width: 150px; left: calc(50% - 75px); }
    .app-promo .app-promo-action { width: 100%; gap: .6rem; font-size: .9rem; }
}