.landing-kicker { margin: 0 0 16px; color: var(--green); font-size: 0.72rem; font-weight: 900; letter-spacing: .14em; }
.landing-kicker-light { color: #ffc9c2; }

.app-intro { position: relative; overflow: clip; padding: 9.5rem 0 8.5rem; background: radial-gradient(circle at 80% 58%, rgba(244,81,64,.11), transparent 26%), linear-gradient(180deg, #f6f7f9 0%, #fafbfc 18%, #fff 48%, #fff 100%); }
.app-intro::after { content: ""; position: absolute; right: -10%; bottom: -16rem; width: 46rem; height: 46rem; border: 1px solid rgba(244,81,64,.1); border-radius: 50%; pointer-events: none; }
.app-intro.is-pinned { padding: 0; }
.app-intro.is-pinned .app-intro-sticky { position: sticky; top: calc(var(--hdr, 0px) / var(--fit, 1)); height: calc((100vh - var(--hdr, 0px)) / var(--fit, 1)); zoom: var(--fit, 1); display: flex; align-items: center; overflow: hidden; }
.app-intro-grid { position: relative; z-index: 1; min-height: 43rem; display: grid; grid-template-columns: minmax(0, .92fr) minmax(31rem, 1.08fr); gap: 3.5rem; align-items: center; }
.app-intro-copy { padding-left: 4rem; }
.app-intro-copy h2, .app-journey-heading h2, .app-core-heading h2, .app-reviews-heading h2 { margin: 0; color: #202226; font-size: clamp(2.65rem, 4vw, 4.1rem); line-height: 1.19; letter-spacing: -.07em; }
.app-intro-copy h2 strong, .app-journey-heading h2 strong, .app-core-heading h2 strong, .app-reviews-heading h2 strong { color: var(--green); }
.app-intro-list { width: min(100%, 31.5rem); margin-top: 3.15rem; border-top: 1px solid #e6e8eb; }
.app-intro-list button { width: 100%; min-height: 4.7rem; padding: .75rem 0; border: 0; border-bottom: 1px solid #e6e8eb; display: grid; gap: .28rem; background: transparent; color: #c4c7cc; text-align: left; cursor: pointer; transition: color .24s ease, padding-left .24s ease; }
.app-intro-list button strong { font-size: 1.12rem; letter-spacing: -.04em; }
.app-intro-list button span { display: none; max-width: 27rem; color: #737881; font-size: .86rem; font-weight: 500; line-height: 1.6; }
.app-intro-list button.is-active { min-height: 8.35rem; padding-left: 1.2rem; color: #24272d; }
.app-intro-list button.is-active strong::before { content: ""; display: inline-block; width: .42rem; height: .42rem; margin: 0 .55rem .14rem -1.2rem; border-radius: 50%; background: var(--green); }
.app-intro-list button.is-active span { display: block; }
.app-intro-list button:focus-visible { outline: 2px solid var(--green); outline-offset: -3px; }
.app-intro-device { position: relative; justify-self: end; width: 24rem; height: 48.06rem; margin-right: 4.5rem; padding: .62rem; overflow: visible; border: .32rem solid transparent; border-radius: 3.42rem; background: linear-gradient(135deg, #050608 0%, #151a20 49%, #050608 100%) padding-box, linear-gradient(112deg, #f8fbff 0%, #7f8996 11%, #f4f7fa 28%, #4b5561 50%, #f8fbff 72%, #7b8591 88%, #fcfdff 100%) border-box; box-shadow: .92rem 1.25rem 0 #8994a0, 1.95rem 2.5rem 5rem rgba(29,34,42,.25), inset .12rem .12rem .25rem rgba(255,255,255,.16), inset -.22rem -.25rem .35rem rgba(0,0,0,.75); transform: rotate(7deg) perspective(1000px) rotateY(-4deg); }
.app-intro-device::before { content: ""; position: absolute; z-index: 3; inset: .62rem; border-radius: 2.47rem; background: linear-gradient(130deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.07) 13%, transparent 31%, transparent 74%, rgba(255,255,255,.08) 100%); pointer-events: none; }
.app-intro-device::after { content: ""; position: absolute; z-index: 5; top: 8.1rem; right: -.56rem; width: .44rem; height: 4.15rem; border: 1px solid rgba(21,29,38,.74); border-left-color: rgba(255,255,255,.78); border-radius: 0 .34rem .34rem 0; background: linear-gradient(90deg, #4b5663 0%, #eef3f7 49%, #737f8d 100%); box-shadow: 0 5.05rem 0 -.03rem #aab4bd, 0 5.05rem 0 .04rem rgba(24,32,41,.7), 0 10.1rem 0 -.03rem #aab4bd, 0 10.1rem 0 .04rem rgba(24,32,41,.7); pointer-events: none; }
.phone-status { display: none; }
.app-intro-device img { position: absolute; inset: .62rem; width: calc(100% - 1.24rem); height: calc(100% - 1.24rem); border-radius: 2.47rem; background: #fff; object-fit: contain; object-position: center; opacity: 0; transform: translateY(1.4rem); transition: opacity .38s ease, transform .38s ease; }
.app-intro-device img.is-active { opacity: 1; transform: translateY(0); }
.intro-device-glow { position: absolute; z-index: -1; right: -10rem; bottom: -9rem; width: 31rem; height: 31rem; border-radius: 50%; background: radial-gradient(circle, rgba(244,81,64,.2), transparent 66%); }

.app-journey { padding: 8.5rem 0 1rem; background: #f7f8fa; }
.app-journey-heading { margin-bottom: 4.6rem; padding-left: 4rem; }
.app-journey-grid { display: grid; grid-template-columns: minmax(26rem, .95fr) minmax(0, 1.05fr); gap: 8rem; align-items: start; }
.journey-phone-stage { position: sticky; top: 6.4rem; display: grid; justify-items: center; gap: 1rem; padding-top: 1.5rem; }
.journey-phone-frame { position: relative; width: 22.7rem; height: 45.5rem; padding: .58rem; overflow: visible; border: .3rem solid transparent; border-radius: 3.28rem; background: linear-gradient(135deg, #050608 0%, #151a20 49%, #050608 100%) padding-box, linear-gradient(112deg, #f8fbff 0%, #7f8996 11%, #f4f7fa 28%, #4b5561 50%, #f8fbff 72%, #7b8591 88%, #fcfdff 100%) border-box; box-shadow: .78rem 1.1rem 0 #8994a0, 1.65rem 2.15rem 4.4rem rgba(31,35,40,.22), inset .12rem .12rem .25rem rgba(255,255,255,.16), inset -.22rem -.25rem .35rem rgba(0,0,0,.75); transform: perspective(1000px) rotateY(-3deg); }
.journey-phone-frame::before { content: ""; position: absolute; z-index: 3; inset: .58rem; border-radius: 2.4rem; background: linear-gradient(130deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.07) 13%, transparent 31%, transparent 74%, rgba(255,255,255,.08) 100%); pointer-events: none; }
.journey-phone-frame::after { content: ""; position: absolute; z-index: 5; top: 7.6rem; right: -.52rem; width: .4rem; height: 3.85rem; border: 1px solid rgba(21,29,38,.74); border-left-color: rgba(255,255,255,.78); border-radius: 0 .32rem .32rem 0; background: linear-gradient(90deg, #4b5663 0%, #eef3f7 49%, #737f8d 100%); box-shadow: 0 4.7rem 0 -.03rem #aab4bd, 0 4.7rem 0 .04rem rgba(24,32,41,.7), 0 9.4rem 0 -.03rem #aab4bd, 0 9.4rem 0 .04rem rgba(24,32,41,.7); pointer-events: none; }
.journey-phone-frame img { position: absolute; inset: .58rem; width: calc(100% - 1.16rem); height: calc(100% - 1.16rem); border-radius: 2.4rem; background: #fff; object-fit: contain; object-position: center; opacity: 0; transform: scale(.98); transition: opacity .42s ease, transform .42s ease; }
.journey-phone-frame img.is-active { opacity: 1; transform: scale(1); }
.journey-screen-caption { min-height: 2.3rem; padding: .56rem .85rem; border: 1px solid #e3e6e9; border-radius: 99rem; display: flex; align-items: center; gap: .55rem; background: #fff; box-shadow: 0 .7rem 1.6rem rgba(36,38,42,.06); }
.journey-screen-caption span { color: var(--green); font-size: .72rem; font-weight: 900; }
.journey-screen-caption strong { color: #525861; font-size: .75rem; font-weight: 750; }
.journey-steps { padding-bottom: 8rem; }
.journey-steps article { min-height: 76vh; padding: 6.5rem 2rem 3rem 0; border-top: 1px solid #e2e5e8; color: #c9cdd2; transition: color .3s ease; }
.journey-steps article:last-child { border-bottom: 1px solid #e2e5e8; }
.journey-steps article > span { display: block; margin-bottom: 1.05rem; color: inherit; font-size: .8rem; font-weight: 900; letter-spacing: .12em; }
.journey-steps h3 { margin: 0; font-size: clamp(2rem, 3.4vw, 3.25rem); line-height: 1.19; letter-spacing: -.07em; }
.journey-steps p { max-width: 31rem; margin: 1.45rem 0 1.55rem; color: inherit; font-size: 1rem; line-height: 1.75; }
.journey-chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.journey-chips i { padding: .45rem .68rem; border: 1px solid currentColor; border-radius: 99rem; color: inherit; font-size: .75rem; font-style: normal; font-weight: 750; }
.journey-steps article.is-active { color: #262a30; }
.journey-steps article.is-active > span { color: var(--green); }
.journey-steps article.is-active p { color: #6b7179; }
.journey-steps article.is-active .journey-chips i { border-color: #f6c8c2; background: #fff0ed; color: #d9493e; }
.journey-steps article.is-passed { color: #a9aeb5; }

.app-core-features { overflow: clip; min-height: 0; padding: 8.5rem 0 8rem; background: #fff; }
.app-core-features.is-pinned { padding: 0; }
.app-core-features.is-pinned .app-feature-sticky { position: sticky; top: calc(var(--hdr, 0px) / var(--fit, 1)); height: calc((100vh - var(--hdr, 0px)) / var(--fit, 1)); zoom: var(--fit, 1); display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.app-core-features.is-pinned .app-core-heading { margin-bottom: 1.4rem; }
.app-core-features.is-pinned .app-feature-window { overflow: hidden; scrollbar-gutter: auto; }
.app-core-features.is-pinned .app-feature-track { will-change: transform; }
.app-reviews.is-pinned { padding: 0; }
.app-reviews.is-pinned .app-feature-sticky { position: sticky; top: calc(var(--hdr, 0px) / var(--fit, 1)); height: calc((100vh - var(--hdr, 0px)) / var(--fit, 1)); zoom: var(--fit, 1); display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.app-reviews.is-pinned .app-reviews-heading { margin-bottom: 1.4rem; }
.app-reviews.is-pinned .app-review-track { animation: none; padding-right: max(3rem, calc((100vw - 1180px) / 2 + 4rem)); }
.app-core-heading { width: min(100% - 6rem, 1180px); margin: 0 auto 3.2rem; padding-left: 4rem; display: flex; align-items: end; justify-content: space-between; gap: 2rem; }
.app-core-heading h2 { font-size: clamp(2.4rem, 3.6vw, 3.65rem); }
.app-core-heading > p { margin: 0 0 .35rem; color: #858a92; font-size: .93rem; line-height: 1.65; text-align: right; }
.app-feature-window { width: 100%; overflow-x: auto; overflow-y: hidden; padding: .8rem 0 1.15rem; scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: #a9afb7 #edf0f2; }
.app-feature-window::-webkit-scrollbar { height: .62rem; }
.app-feature-window::-webkit-scrollbar-track { margin: 0 max(1.5rem, calc((100vw - 1240px) / 2)); border-radius: 99rem; background: #edf0f2; }
.app-feature-window::-webkit-scrollbar-thumb { border: .13rem solid #edf0f2; border-radius: 99rem; background: #9ea5ae; }
.app-feature-window::-webkit-scrollbar-thumb:hover { background: #777f89; }
.app-feature-track { display: flex; gap: 1.35rem; width: max-content; min-width: 100%; padding: 1rem max(3rem, calc((100vw - 1240px) / 2)) 2.3rem; }
.app-feature-card { flex: 0 0 25.8rem; width: 25.8rem; height: 34.4rem; aspect-ratio: 3 / 4; padding: .7rem .7rem 1.8rem; overflow: hidden; border: .62rem solid #fff; border-radius: 2.35rem; display: grid; grid-template-rows: 23.25rem auto auto; align-content: start; background: #fff; color: #202226; cursor: default; box-shadow: 0 .85rem 2.4rem rgba(31,37,45,.045), inset 0 0 0 1px #e9edf2; }
.app-feature-card:hover { box-shadow: 0 .85rem 2.4rem rgba(31,37,45,.045), inset 0 0 0 1px #e9edf2; transform: none; }
.app-feature-screen { position: relative; width: 19.6rem; height: 23.25rem; justify-self: center; margin: 0; overflow: hidden; border: 0; border-radius: 1.75rem; background: linear-gradient(145deg, #edf3fa 0%, #dce5f0 100%); box-shadow: none; transform: none; }
.app-feature-screen::before { content: ""; position: absolute; z-index: 2; inset: 0; border-radius: inherit; background: linear-gradient(180deg, transparent 33%, rgba(255,255,255,.12) 50%, rgba(255,255,255,.72) 76%, #fff 100%); pointer-events: none; }
.app-feature-screen::after { content: ""; position: absolute; z-index: 3; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.7); pointer-events: none; }
.app-feature-screen img { display: block; width: 100%; height: 100%; border-radius: inherit; background: #e8eef5; object-fit: cover; object-position: center 21%; transform: scale(1.02); }
.app-feature-card p { margin: 1.55rem 2.42rem .36rem; color: #747a82; font-size: .84rem; font-weight: 750; }
.app-feature-card strong { max-width: 19rem; margin: 0 2.42rem; font-size: 1.12rem; line-height: 1.48; letter-spacing: -.045em; }

.app-reviews { overflow: clip; padding: 8.5rem 0 9rem; background: #f7f8fa; }
.app-reviews-heading { width: min(100% - 6rem, 1180px); margin: 0 auto 3.2rem; padding-left: 4rem; }
.app-reviews-heading h2 { font-size: clamp(2.4rem, 3.6vw, 3.65rem); }
.app-reviews-heading > p:last-child { max-width: 33rem; margin: 1.4rem 0 0; color: #838990; font-size: .88rem; line-height: 1.65; }
.app-review-window { width: 100%; overflow: hidden; }
.app-review-track { display: flex; gap: 1rem; width: max-content; padding: 1rem 0 1rem max(3rem, calc((100vw - 1180px) / 2 + 4rem)); will-change: transform; animation: review-marquee 32s linear infinite; }
.app-review-window:hover .app-review-track { animation-play-state: paused; }
.app-review-card { width: 25rem; min-height: 15rem; padding: 1.7rem; border: 1px solid #e5e8eb; border-radius: 1.4rem; display: flex; flex-direction: column; background: #fff; box-shadow: 0 .8rem 2rem rgba(30,36,44,.05); }
.app-review-card > header { margin-bottom: 1rem; color: #8a9098; font-size: .88rem; font-weight: 600; }.app-review-card > header strong { color: #30343a; font-size: 1rem; font-weight: 800; letter-spacing: -.02em; }.app-review-card > time { margin-top: auto; padding-top: .9rem; border-top: 1px solid #edf0f2; color: #a0a5ac; font-size: .82rem; }
.app-review-card blockquote { word-break: keep-all; overflow-wrap: break-word; text-wrap: balance; margin: 0 0 1.2rem; color: #30343a; font-size: 1.23rem; font-weight: 720; line-height: 1.62; letter-spacing: -.048em; }
.app-review-card blockquote strong { color: var(--green); font-weight: 900; }
.app-review-card p { margin: auto 0 0; padding-top: .9rem; border-top: 1px solid #edf0f2; color: #a0a5ac; font-size: .82rem; }.app-review-card p strong { color: #454b53; font-size: .9rem; }

footer.app-landing-footer { position: relative; min-height: 100vh; overflow: hidden; display: flex; flex-direction: column; background: radial-gradient(circle at 81% 4%, rgba(244,81,64,.5), transparent 25%), linear-gradient(135deg, #25272b 0%, #202226 52%, #462823 100%); color: #fff; }
.app-landing-footer-glow { position: absolute; left: -10rem; bottom: -17rem; width: 42rem; height: 42rem; border-radius: 50%; background: radial-gradient(circle, rgba(244,81,64,.3), transparent 66%); }
.app-landing-cta { position: relative; z-index: 1; min-height: calc(100vh - 16rem); flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 31rem; gap: 4rem; align-items: center; padding: 6.6rem 4rem 5.2rem; }
.app-landing-cta-copy h2 { margin: 0; font-size: clamp(2.6rem, 4vw, 4.25rem); line-height: 1.18; letter-spacing: -.075em; }.app-landing-cta-copy h2 strong { color: #ff8071; }
.app-landing-cta-copy > p:not(.landing-kicker) { margin: 1.5rem 0 1.85rem; color: #c7cbd1; font-size: 1rem; line-height: 1.75; }
.landing-store-links { display: flex; align-items: center; gap: .7rem; }.landing-store-links a { min-width: 9.6rem; min-height: 3.15rem; padding: 0 1rem; border-radius: .75rem; display: inline-flex; align-items: center; justify-content: center; gap: .55rem; background: #fff; color: #272a2f; font-size: .86rem; font-weight: 850; }.landing-store-links a:first-child { background: #111214; color: #fff; }.landing-store-links a:first-child img { filter: invert(1); mix-blend-mode: screen; }.landing-store-links a:nth-child(2) img { mix-blend-mode: multiply; }.landing-store-links a:hover { color: #272a2f; transform: translateY(-.15rem); }.landing-store-links a:first-child:hover { color: #fff; }.landing-store-links .landing-qr-link { min-width: 0; width: 7.6rem; height: 7.6rem; padding: .5rem; border-radius: 1.1rem; overflow: hidden; background: #fff; }.landing-qr-link img { width: 100%; height: 100%; object-fit: contain; }
.app-landing-cta-visual { position: relative; align-self: center; height: 29rem; }
.cta-phone { position: absolute; bottom: 0; width: 13.6rem; height: 27.8rem; padding: .4rem; overflow: visible; border: .2rem solid transparent; border-radius: 2.02rem; background: linear-gradient(135deg, #050608 0%, #151a20 49%, #050608 100%) padding-box, linear-gradient(112deg, #f8fbff 0%, #7f8996 11%, #f4f7fa 28%, #4b5561 50%, #f8fbff 72%, #7b8591 88%, #fcfdff 100%) border-box; box-shadow: none; }.cta-phone::before { content: ""; position: absolute; z-index: 3; inset: .4rem; border-radius: 1.4rem; background: linear-gradient(130deg, rgba(255,255,255,.3), transparent 28%, transparent 74%, rgba(255,255,255,.08)); pointer-events: none; }.cta-phone::after { content: ""; position: absolute; z-index: 5; top: 4.2rem; right: -.34rem; width: .27rem; height: 2.15rem; border: 1px solid rgba(21,29,38,.74); border-left-color: rgba(255,255,255,.78); border-radius: 0 .22rem .22rem 0; background: linear-gradient(90deg, #4b5663, #eef3f7 49%, #737f8d); box-shadow: 0 2.7rem 0 -.02rem #aab4bd, 0 2.7rem 0 .02rem rgba(24,32,41,.7), 0 5.4rem 0 -.02rem #aab4bd, 0 5.4rem 0 .02rem rgba(24,32,41,.7); }.cta-phone img { display: block; width: 100%; height: 100%; border-radius: 1.4rem; background: #fff; object-fit: contain; object-position: center; }.cta-phone-back { right: 3.5rem; transform: rotate(8deg) perspective(800px) rotateY(-4deg); opacity: .82; }.cta-phone-front { right: 8.4rem; transform: rotate(-7deg) perspective(800px) rotateY(-4deg); }

/* App screenshots use a Lotto Time red top edge instead of a visible white gap. */
.app-intro-device::before { background: linear-gradient(180deg, #f45140 0 .48rem, transparent .48rem), linear-gradient(130deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.07) 13%, transparent 31%, transparent 74%, rgba(255,255,255,.08) 100%); }
.journey-phone-frame::before { background: linear-gradient(180deg, #f45140 0 .45rem, transparent .45rem), linear-gradient(130deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.07) 13%, transparent 31%, transparent 74%, rgba(255,255,255,.08) 100%); }
.app-feature-screen::before { background: linear-gradient(180deg, #f45140 0 .34rem, transparent .34rem), linear-gradient(180deg, transparent 33%, rgba(255,255,255,.12) 50%, rgba(255,255,255,.72) 76%, #fff 100%); }
.cta-phone::before { background: linear-gradient(180deg, #f45140 0 .3rem, transparent .3rem), linear-gradient(130deg, rgba(255,255,255,.3), transparent 28%, transparent 74%, rgba(255,255,255,.08)); }
.cta-qr { position: absolute; right: 0; top: 4.3rem; width: 9.4rem; padding: .6rem; border-radius: 1rem; display: grid; gap: .3rem; justify-items: center; background: #fff; color: #3b4047; box-shadow: 0 1rem 2rem rgba(0,0,0,.18); }.cta-qr img { width: 7.1rem; height: 7.1rem; }.cta-qr span { font-size: .62rem; font-weight: 800; }
.app-footer-info { position: relative; z-index: 1; min-height: 16rem; padding: 3.2rem 4rem 4rem; border-top: 1px solid rgba(255,255,255,.15); display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }.app-footer-brand img { width: 10.5rem; height: auto; }.app-footer-brand p { margin: 1rem 0 0; color: #b8bdc4; font-size: .83rem; line-height: 1.65; }.app-footer-links { display: flex; justify-content: flex-end; align-items: start; gap: 1.3rem; }.app-footer-links a { color: #eef0f3; font-size: .85rem; font-weight: 750; }.app-footer-links a:hover { color: #ff998d; }.app-footer-meta { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr minmax(18rem, .9fr); gap: 2.5rem; padding-top: 1.8rem; border-top: 1px solid rgba(255,255,255,.1); }.app-footer-meta p { margin: 0; color: #91979f; font-size: .72rem; line-height: 1.75; }.app-footer-company-detail { display: grid; gap: .22rem; }.app-footer-company-detail span { color: #7f858d; }.app-footer-company-detail strong, .app-footer-company-detail a { color: #d9dde2; font-weight: 750; }.app-footer-company-detail i { display: inline-block; width: 1px; height: .6rem; margin: 0 .55rem; background: rgba(255,255,255,.25); }.app-footer-notice { display: grid; gap: .55rem; }.app-footer-wordmark { position: absolute; z-index: 0; right: -1rem; bottom: -5.2rem; margin: 0; color: rgba(255,255,255,.035); font-size: clamp(7rem, 17vw, 18rem); font-weight: 900; letter-spacing: -.12em; white-space: nowrap; }

@media (max-width: 1220px) {
  .app-intro-copy, .app-journey-heading, .app-core-heading, .app-reviews-heading { padding-left: 1.5rem; }.app-intro-device { margin-right: 1.5rem; transform: rotate(4deg) scale(.88); }.app-journey-grid { gap: 4rem; }.app-core-heading, .app-reviews-heading { width: calc(100% - 3rem); }.app-feature-track { padding-left: 3rem; padding-right: 3rem; }.app-landing-cta { padding-left: 1.5rem; padding-right: 1.5rem; grid-template-columns: minmax(0, 1fr) 27rem; }.app-footer-info { padding-left: 1.5rem; padding-right: 1.5rem; }
}

@media (max-width: 980px) {
  .app-intro { padding-top: 6rem; }.app-intro-grid { grid-template-columns: 1fr .82fr; gap: 1rem; }.app-intro-copy h2 { font-size: 2.65rem; }.app-intro-device { justify-self: center; width: 20rem; height: 39.94rem; margin: 0; }.app-journey-grid { grid-template-columns: 20rem minmax(0, 1fr); gap: 2.5rem; }.journey-phone-frame { width: 19rem; height: 37.91rem; }.app-landing-cta { grid-template-columns: 1fr 22rem; }.app-landing-cta-visual { transform: scale(.82); transform-origin: bottom right; }
}

@media (max-width: 899px) {
  .app-core-features { padding: 4.6rem 0; }
  .app-core-heading { width: min(100% - 2rem, 42rem); margin-bottom: 1.8rem; padding-left: 0; }
  .app-core-heading h2 { font-size: clamp(2rem, 9vw, 2.7rem); }
  .app-feature-window { width: 100%; padding: .25rem 0 1rem; }
  .app-feature-track { gap: 1rem; padding: .25rem 1rem 1.85rem; }
  .app-feature-card { flex-basis: 22rem; width: 22rem; height: 29.34rem; padding: .6rem .6rem 1.35rem; border-width: .5rem; border-radius: 1.9rem; grid-template-rows: 19.6rem auto auto; }
  .app-feature-screen { width: 16.5rem; height: 19.6rem; border-radius: 1.35rem; }
  .app-feature-card p { margin: 1.05rem 1.7rem .28rem; font-size: .78rem; }
  .app-feature-card strong { margin: 0 1.7rem; font-size: 1rem; line-height: 1.42; }
}

@keyframes feature-marquee { to { transform: translateX(calc(-50% - .68rem)); } }
@keyframes review-marquee { to { transform: translateX(calc(-50% - .5rem)); } }
@media (prefers-reduced-motion: reduce) { .app-intro-device img, .journey-phone-frame img, .app-review-track, .app-feature-track, .app-feature-card { transition: none; }.app-review-track { animation: none; }.app-feature-track { animation: none; } }

/* One consistent, screen-safe silver chassis for every promotional phone. */
.silver-phone {
  --phone-radius: 3.3rem;
  --screen-radius: 2.55rem;
  --side-depth: .68rem;
  --button-width: .34rem;
  position: relative;
  padding: 0;
  overflow: visible;
  isolation: isolate;
  border: .31rem solid transparent;
  border-radius: var(--phone-radius);
  background:
    linear-gradient(145deg, #03070d 0%, #11161f 46%, #050911 100%) padding-box,
    linear-gradient(111deg, #f7fbff 0%, #697480 5%, #d9e1e9 11%, #fff 18%, #9aa5b1 27%, #f3f7fb 36%, #59636f 49%, #ebf1f6 62%, #687582 76%, #fcfeff 88%, #788390 100%) border-box;
  box-shadow:
    .07rem .04rem 0 #fff,
    .17rem .12rem 0 #48525e,
    .34rem .27rem 0 #e4eaf0,
    .52rem .43rem 0 #85919e,
    var(--side-depth) .56rem 0 #c4ced8,
    calc(var(--side-depth) + .09rem) .64rem 0 #3e4855,
    1.3rem 2.2rem 3.3rem rgba(20, 28, 38, .19),
    inset .12rem .1rem .18rem rgba(255,255,255,.3),
    inset -.18rem -.16rem .28rem rgba(0,0,0,.74);
  backface-visibility: hidden;
}
.silver-phone::before {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 2.55% 2.8%;
  border-radius: var(--screen-radius);
  background: linear-gradient(114deg, rgba(255,255,255,.17) 0%, rgba(255,255,255,.04) 13%, transparent 31%, transparent 72%, rgba(255,255,255,.065) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.13);
  pointer-events: none;
}
.silver-phone::after {
  content: "";
  position: absolute;
  z-index: 5;
  top: 17%;
  right: calc(-1 * var(--button-width) - .26rem);
  width: var(--button-width);
  height: 8.5%;
  border: 1px solid #55606b;
  border-left-color: #eaf0f6;
  border-radius: 0 .27rem .27rem 0;
  background: linear-gradient(90deg, #76818d 0%, #fff 47%, #aeb8c2 66%, #47515d 100%);
  box-shadow: 0 .17rem .2rem rgba(0,0,0,.24), 0 5rem 0 -.02rem #b5c0cb, 0 5rem 0 .035rem #53606c, 0 10rem 0 -.02rem #b5c0cb, 0 10rem 0 .035rem #53606c;
  pointer-events: none;
}
.silver-phone > img {
  position: absolute;
  z-index: 1;
  inset: 2.55% 2.8%;
  display: block;
  width: 94.4%;
  height: 94.9%;
  border-radius: var(--screen-radius);
  background: #f45140;
  object-fit: contain;
  object-position: center;
  filter: none;
}
.app-intro-device.silver-phone { --phone-radius: 3.42rem; --screen-radius: 2.63rem; }
.journey-phone-frame.silver-phone { --phone-radius: 3.28rem; --screen-radius: 2.5rem; }
.cta-phone.silver-phone { --phone-radius: 2.04rem; --screen-radius: 1.56rem; --side-depth: .42rem; --button-width: .22rem; position: absolute; }
.cta-phone.silver-phone::after { box-shadow: 0 .1rem .13rem rgba(0,0,0,.25), 0 2.7rem 0 -.015rem #b5c0cb, 0 2.7rem 0 .025rem #53606c, 0 5.4rem 0 -.015rem #b5c0cb, 0 5.4rem 0 .025rem #53606c; }
.cta-phone.silver-phone > img { width: 94.4%; height: 94.9%; }
.app-intro-device.silver-phone > img,
.journey-phone-frame.silver-phone > img { inset: 2.55% 2.8%; width: 94.4%; height: 94.9%; }
.app-promo-phone.silver-phone { --phone-radius: 2.42rem; --screen-radius: 1.87rem; --side-depth: .47rem; --button-width: .25rem; position: absolute; right: 5.2rem; bottom: -1.7rem; width: 11.8rem; height: 23.33rem; transform: rotate(9deg) perspective(850px) rotateY(-5deg); }
.app-promo-phone.silver-phone::after { box-shadow: 0 .1rem .13rem rgba(0,0,0,.25), 0 3.2rem 0 -.015rem #b5c0cb, 0 3.2rem 0 .025rem #53606c, 0 6.4rem 0 -.015rem #b5c0cb, 0 6.4rem 0 .025rem #53606c; }
.app-promo-phone.silver-phone > img { top: 2.55%; right: 2.8%; width: 94.4%; height: 94.9%; transform: none; object-fit: cover; background: transparent; }
@media (max-width: 1240px) { .app-promo-phone.silver-phone { right: 4rem; width: 10.7rem; height: 21.1rem; } }

/* 섹션 경계를 부드럽게 이어 붙이는 페이드 (토스처럼 경계선 없이 배경이 흘러가도록) */
.app-journey, .app-core-features, .app-reviews { position: relative; isolation: isolate; }
.app-journey::before, .app-core-features::before, .app-reviews::before { content: ""; position: absolute; z-index: -1; inset: 0 0 auto; height: 24rem; pointer-events: none; }
.app-journey::before { background: linear-gradient(180deg, #fff 0%, color-mix(in srgb, #fff 92%, #f7f8fa) 14%, color-mix(in srgb, #fff 75%, #f7f8fa) 30%, color-mix(in srgb, #fff 45%, #f7f8fa) 50%, color-mix(in srgb, #fff 20%, #f7f8fa) 70%, color-mix(in srgb, #fff 6%, #f7f8fa) 88%, #f7f8fa 100%); }
.app-core-features::before { background: linear-gradient(180deg, #f7f8fa 0%, color-mix(in srgb, #f7f8fa 92%, #fff) 14%, color-mix(in srgb, #f7f8fa 75%, #fff) 30%, color-mix(in srgb, #f7f8fa 45%, #fff) 50%, color-mix(in srgb, #f7f8fa 20%, #fff) 70%, color-mix(in srgb, #f7f8fa 6%, #fff) 88%, #fff 100%); }
.app-reviews::before { background: linear-gradient(180deg, #fff 0%, color-mix(in srgb, #fff 92%, #f7f8fa) 14%, color-mix(in srgb, #fff 75%, #f7f8fa) 30%, color-mix(in srgb, #fff 45%, #f7f8fa) 50%, color-mix(in srgb, #fff 20%, #f7f8fa) 70%, color-mix(in srgb, #fff 6%, #f7f8fa) 88%, #f7f8fa 100%); }
footer.app-landing-footer { border-radius: 3.5rem 3.5rem 0 0; box-shadow: 0 -1.6rem 5rem rgba(37,39,43,.09); }
@media (max-width: 899px) { footer.app-landing-footer { border-radius: 2rem 2rem 0 0; } }

/* 스크롤 진입 시 아래에서 부드럽게 떠오르는 등장 효과 */
.js-reveal [data-reveal] { transition: opacity 1.1s cubic-bezier(.22,.61,.36,1), filter 1.1s cubic-bezier(.22,.61,.36,1), transform 1.1s cubic-bezier(.22,.61,.36,1); transition-delay: var(--reveal-delay, 0s); }
.js-reveal [data-reveal]:not(.is-in) { opacity: 0; filter: blur(14px); }
.js-reveal [data-reveal]:not([data-reveal="fade"]):not(.is-in) { transform: translate3d(0, 2.4rem, 0); }
.js-reveal [data-reveal].is-in { opacity: 1; filter: none; }
.js-reveal [data-reveal]:not([data-reveal="fade"]).is-in { transform: none; }
@media (max-width: 899px) { .js-reveal [data-reveal]:not([data-reveal="fade"]):not(.is-in) { transform: translate3d(0, 1.4rem, 0); } }
/* 앞 섹션과의 간격 */
.app-intro.is-pinned { margin-top: 8rem; }

@media (max-width: 899px) { .app-review-window { overflow-x: auto; scrollbar-width: none; }.app-review-window::-webkit-scrollbar { display: none; }.app-review-track { animation: none; padding-right: 1rem; } }

/* 사용 방법: 화면 고정 + 텍스트/폰 동시 전환 */
.app-journey.is-pinned-host { padding-bottom: 0; }
.app-journey-pin.is-pinned .app-journey-sticky { position: sticky; top: calc(var(--hdr, 0px) / var(--fit, 1)); height: calc((100vh - var(--hdr, 0px)) / var(--fit, 1)); zoom: var(--fit, 1); display: flex; align-items: center; overflow: hidden; }
.app-journey-pin.is-pinned .app-journey-grid { width: min(1280px, calc(100% - 64px)); align-items: center; }
.app-journey-pin.is-pinned .journey-phone-stage { position: relative; top: 0; padding-top: 0; }
.app-journey-pin.is-pinned .journey-phone-frame { height: min(45.5rem, 72vh); width: calc(min(45.5rem, 72vh) * .4989); }
.app-journey-pin.is-pinned .journey-steps { display: grid; padding-bottom: 0; }
.app-journey-pin.is-pinned .journey-steps article { grid-area: 1 / 1; min-height: 0; padding: 2rem 2rem 2rem 0; border: 0; opacity: 0; transform: translate3d(0, 1.6rem, 0); pointer-events: none; transition: opacity .5s ease, transform .5s ease, color .5s ease; }
.app-journey-pin.is-pinned .journey-steps article.is-active { opacity: 1; transform: none; pointer-events: auto; }
.app-journey-pin.is-pinned .journey-steps article.is-passed { transform: translate3d(0, -1.6rem, 0); }
.app-journey-pin.is-pinned .journey-phone-frame img { transition: opacity .5s ease, transform .5s ease; }

/* 스크린샷(1080x2204) 비율에 맞춘 폰 화면: 빈 영역 없이 꽉 채운다 */
.app-intro-device.silver-phone > img, .journey-phone-frame.silver-phone > img, .cta-phone.silver-phone > img { object-fit: cover; background: transparent; }

/* 창 높이(헤더 제외)에 맞춰 푸터도 한 화면에 들어오게 */
footer.app-landing-footer { min-height: calc(100vh - 80px); }
.app-landing-cta { min-height: 0; padding-top: 3.2rem; padding-bottom: 2.4rem; }
.app-landing-cta-visual { zoom: var(--cta-fit, 1); }
.app-core-features.is-pinned .app-core-heading, .app-reviews.is-pinned .app-reviews-heading { margin-top: 0; }

/* 앱 소개 목록: 펼쳐진 항목의 제목↔설명, 설명↔구분선 간격을 균일하게 */
.app-intro-list button.is-active { min-height: 0; padding-top: 1.55rem; padding-bottom: 1.55rem; align-content: start; gap: 12px; }
.app-intro-list button { align-content: center; }

/* 앱 안내 배너 폰(모바일 전용): 겹겹이 쌓인 두꺼운 테두리를 얇고 깔끔하게 */
@media (max-width: 899px) { /* [반응형 수정] 원본: (pointer: coarse) */
  .app-promo-phone.silver-phone {
    width: 11.8rem; height: 23.12rem; border-width: .2rem;
    transform: rotate(8deg);
    box-shadow: .1rem .08rem 0 #d3dbe3, .22rem .18rem 0 #77838f, .9rem 1.6rem 2.2rem rgba(20, 28, 38, .2), inset .08rem .06rem .12rem rgba(255, 255, 255, .25), inset -.1rem -.1rem .18rem rgba(0, 0, 0, .6);
  }
  .app-promo-phone.silver-phone > img { top: .26rem; left: .26rem; right: auto; width: calc(100% - .52rem); height: calc(100% - .52rem); filter: none; border-radius: 1.75rem; }
  .app-promo-phone.silver-phone::before { inset: .26rem; border-radius: 1.75rem; }
}