:root { color-scheme: light; font-family: "Outfit", system-ui, sans-serif; }
* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body { background: #f8f4f1; color: #222; }
.app-landing { position: relative; isolation: isolate; display: grid; min-height: 100vh; place-items: center; overflow: hidden; padding: 48px clamp(32px, 6vw, 96px); background: radial-gradient(circle at 82% 18%, rgba(227,27,70,.12), transparent 28%), radial-gradient(circle at 12% 88%, rgba(255,196,92,.18), transparent 26%), linear-gradient(135deg,#fffdfb 0%,#f8f3ef 100%); }
.app-landing::before, .app-landing::after { position: absolute; z-index: -1; width: 280px; height: 280px; border: 1px solid rgba(227,27,70,.12); border-radius: 50%; content: ""; }
.app-landing::before { top: -150px; right: 8%; }
.app-landing::after { bottom: -190px; left: 5%; width: 360px; height: 360px; }
.app-landing__card { display: grid; grid-template-columns: minmax(0,1.08fr) minmax(360px,.92fr); align-items: center; gap: clamp(48px,7vw,112px); width: min(1180px,100%); }
.app-landing__copy { max-width: 650px; }
.app-landing__logo { display: block; width: auto; height: 58px; margin-bottom: 34px; object-fit: contain; }
.app-landing__kicker { margin: 0 0 14px; color: #e31b46; font-size: 20px; font-weight: 600; letter-spacing: .04em; }
.app-landing h1 { max-width: 640px; margin: 0; font-size: clamp(42px,4.2vw,66px); font-weight: 700; letter-spacing: -.015em; line-height: 1.02; }
.app-landing__description { max-width: 620px; margin: 24px 0 30px; color: #655f5d; font-size: clamp(17px,1.4vw,20px); font-weight: 600; line-height: 1.55; }
.app-landing__button { display: inline-flex; min-height: 58px; align-items: center; justify-content: center; gap: 12px; padding: 0 25px; border-radius: 14px; background: #e31b46; box-shadow: 0 16px 34px rgba(227,27,70,.24); color: #fff; font-size: 16px; font-weight: 700; text-decoration: none; transition: .16s ease; }
.app-landing__button:hover, .app-landing__button:focus-visible { background: #c9163c; box-shadow: 0 19px 38px rgba(227,27,70,.3); transform: translateY(-2px); }
.app-landing__play { font-size: 22px; }
.app-landing__footer { margin: 30px 0 0; color: #978f8b; font-size: 13px; font-weight: 700; }
.app-landing__visual { position: relative; display: flex; min-height: 560px; align-items: center; justify-content: center; }
.app-landing__phone { position: relative; width: 282px; height: 548px; overflow: hidden; padding: 12px; border: 7px solid #242122; border-radius: 44px; background: #242122; box-shadow: 0 34px 70px rgba(54,38,42,.22); transform: rotate(4deg); }
.app-landing__phone > img { display: block; width: 100%; height: 100%; border-radius: 31px; object-fit: cover; object-position: top; }
.app-landing__speaker { position: absolute; top: 12px; left: 50%; z-index: 2; width: 76px; height: 19px; border-radius: 0 0 13px 13px; background: #242122; transform: translateX(-50%); }
.app-landing__qr-card { position: absolute; right: 0; bottom: 28px; width: 210px; padding: 16px 16px 14px; border: 1px solid rgba(33,27,29,.07); border-radius: 20px; background: rgba(255,255,255,.96); box-shadow: 0 22px 48px rgba(54,38,42,.16); text-align: center; }
.app-landing__qr { display: block; width: 174px; height: 174px; margin: 0 auto; border-radius: 8px; }
.app-landing__qr-card p { margin: 9px 0 0; color: #756d6a; font-size: 12px; font-weight: 700; line-height: 1.4; }
@media (max-width: 1050px) { .app-landing__card { grid-template-columns: minmax(0,1fr) 340px; gap: 36px; } .app-landing__visual { min-height: 500px; } .app-landing__phone { width: 240px; height: 470px; } .app-landing__qr-card { right: -10px; width: 176px; } .app-landing__qr { width: 142px; height: 142px; } }
@media (max-width: 768px) { .app-landing { padding: 38px 22px 48px; overflow: visible; } .app-landing__card { grid-template-columns: 1fr; gap: 30px; } .app-landing__copy { text-align: center; } .app-landing__logo { height: 48px; margin: 0 auto 28px; } .app-landing h1 { font-size: clamp(36px,11vw,52px); } .app-landing__description { margin-inline: auto; } .app-landing__visual { min-height: 500px; } .app-landing__qr-card { right: max(0px,calc(50% - 190px)); } }
@media (max-width: 430px) { .app-landing__phone { width: 220px; height: 440px; } .app-landing__qr-card { right: 0; bottom: 8px; width: 152px; padding: 12px; } .app-landing__qr { width: 126px; height: 126px; } }
@media (prefers-reduced-motion: reduce) { .app-landing__button { transition: none; } }