.install-pwa{ color: #fff; display: flex; flex-direction: column; margin: 0 auto 0.5rem; max-width: 430px; width: 100%} .install-pwa .bg-zone{ background-position: center top; background-repeat: no-repeat; background-size: cover; margin: 0 -0.5rem; padding-bottom: 56px; position: relative} .install-pwa .bg-zone::before{ background: linear-gradient(#081950 0, #081950 51px, rgba(3, 10, 18, 0) 189px); content: ""; inset: 0; pointer-events: none; position: absolute} .install-pwa .bg-zone> *{ position: relative} .install-pwa .hero{ margin-left: 32px; margin-right: 32px; padding-top: 24px} .install-pwa .hero-row{ align-items: flex-start; display: flex; gap: 16px} .install-pwa .hero-icon{ background: #081950; border: 4px solid #0e34d5; border-radius: 20px; flex-shrink: 0; height: 64px; object-fit: cover; width: 64px} .install-pwa .hero-copy h1{ font-size: 18px; font-weight: 800; margin: 0 0 8px} .install-pwa .hero-bullet{ align-items: center; display: flex; font-size: 14px; font-weight: 500; gap: 10px; margin-top: 10px} .install-pwa .hero-bullet .ic{ color: #fff; flex-shrink: 0; width: 15px} .install-pwa .cta{ align-items: center; background: #0e34d5; border: 0; border-radius: 5px; color: #fff; cursor: pointer; display: flex; font-size: 14px; font-weight: 700; gap: 10px; height: 38px; justify-content: center; margin: 15px auto 0; text-decoration: none; width: 240px} .install-pwa .cta .ic{ color: #fff; display: flex} .install-pwa .cta[disabled], .install-pwa .cta.is-busy{ cursor: wait; opacity: 0.6} @media(hover: hover) and (min-width: 1024px){ .install-pwa .cta:hover{ background-color: #bd0404}} .install-pwa .sheet{ background: #081950; border-radius: 28px 28px 0 0; margin: -32px -0.5rem 0; overflow-x: hidden; padding-top: 18px; position: relative} .install-pwa .dots{ display: flex; gap: 8px; justify-content: center; margin-bottom: 18px} .install-pwa .dot{ background: #000; border: 0; border-radius: 50%; cursor: pointer; height: 8px; padding: 0; transition: 0.2s; width: 8px} .install-pwa .dot.active{ background: #0e34d5; border-radius: 4px; width: 24px} .install-pwa .step-heads{ height: 120px; padding: 0 20px} .install-pwa .step-head{ align-items: flex-start; display: none; gap: 14px; height: 100%; text-align: left} .install-pwa .step-head.active{ display: flex} .install-pwa .step-num{ display: flex; flex-shrink: 0} .install-pwa .step-num svg{ height: 58px; width: auto} .install-pwa .step-copy{ padding-top: 4px} .install-pwa .step-copy h2{ font-size: 17px; font-weight: 800; margin: 0 0 6px} .install-pwa .step-copy p{ font-size: 13px; font-weight: 400; line-height: 19px; margin: 0} .install-pwa .step-badge{ align-items: center; background: #0e34d5; border-radius: 50%; color: #fff; display: flex; flex-shrink: 0; height: 38px; justify-content: center; margin-left: auto; width: 38px} .install-pwa .step-badge svg{ height: 18px; width: 18px} .install-pwa .phones{ position: relative} .install-pwa .phones::before, .install-pwa .phones::after{ bottom: 0; content: ""; pointer-events: none; position: absolute; top: 0; width: 75px; z-index: 1} .install-pwa .phones::before{ background: linear-gradient(90deg, #081950, rgba(8, 25, 80, 0)); left: 0} .install-pwa .phones::after{ background: linear-gradient(270deg, #081950, rgba(8, 25, 80, 0)); right: 0} .install-pwa .phones-carousel{ overflow: hidden; position: relative; touch-action: pan-y} .install-pwa .phones-track{ display: flex; left: 0; position: relative; top: 0; transition: transform 0.3s ease; will-change: transform} .install-pwa .phone-slide{ display: inline-block; flex: 0 0 auto; opacity: 0.45; text-align: center; transform: scale(0.92); transition: opacity 0.3s, transform 0.3s; width: 280px} .install-pwa .phone-slide.is-current{ opacity: 1; transform: scale(1)} .install-pwa .phone-slide.lead{ height: 440px} .install-pwa .lead-step{ align-items: center; display: flex; flex-direction: column; gap: 14px; height: 100%; justify-content: flex-start; padding: 0 4px; text-align: center} .install-pwa .lead-step h2{ font-size: 17px; font-weight: 800; margin: 0} .install-pwa .lead-step p{ font-size: 13px; line-height: 19px; margin: 0} .install-pwa .lead-icon{ align-items: center; background: #0e34d5; border-radius: 50%; color: #fff; display: flex; height: 80px; justify-content: center; margin-bottom: 8px; width: 80px} .install-pwa .lead-icon svg{ height: 34px; width: 34px} .install-pwa .nav{ align-items: center; border: 0; border-radius: 18px; cursor: pointer; display: flex; height: 80px; justify-content: center; margin-top: -40px; padding: 16px; position: absolute; top: 50%; transform: rotate(45deg); width: 80px; z-index: 2} .install-pwa .nav span{ display: flex} .install-pwa .nav svg{ width: 22px} .install-pwa .nav svg path{ stroke: #0e34d5} .install-pwa .nav.prev{ align-items: flex-start; background: #12181f; justify-content: flex-end; left: -40px; opacity: 0.8} .install-pwa .nav.prev span{ transform: rotate(135deg)} .install-pwa .nav.next{ align-items: flex-end; background: #12181f; justify-content: flex-start; opacity: 0.8; right: -40px} .install-pwa .nav.next span{ transform: rotate(-45deg)} .install-pwa .nav[disabled]{ cursor: default; opacity: 0.3} .install-pwa .nav[disabled] svg path{ stroke: #65696d} .install-pwa .phone{ height: 440px; overflow: hidden; position: relative; width: 220px} .install-pwa .phone.phone-img{ background-position: 50% center; background-repeat: no-repeat; background-size: contain} .install-pwa .app-icon{ align-items: center; display: flex; flex-direction: column; gap: 6px; position: absolute; transform: translate(-50%, -50%)} .install-pwa .app-icon img{ background: #081950; display: block; object-fit: cover} .install-pwa .app-label{ font-size: 11px; font-weight: 500; max-width: 72px; overflow: hidden; text-overflow: ellipsis; text-shadow: rgba(0, 0, 0, 0.8) 0 1px 3px; white-space: nowrap} .install-pwa .badges{ display: flex; gap: 12px; margin-top: 20px; padding-left: 12px; padding-right: 12px} .install-pwa .badges .ic{ color: #0e34d5; display: flex} .install-pwa .badge{ align-items: center; background: #29333d; border-radius: 6px; display: flex; flex: 1 1 0; font-size: 14px; font-weight: 700; gap: 10px; height: 56px; justify-content: center; padding: 14px} .install-pwa .recommend{ font-size: 14px; line-height: 21px; margin: 20px 12px 0; text-align: left} .install-pwa .plain-section{ margin: 20px 12px 0; text-align: left} .install-pwa .plain-section h3{ font-size: 15px; font-weight: 800; margin: 0 0 8px} .install-pwa .plain-section p{ font-size: 14px; line-height: 21px; margin: 0} .install-pwa .faq{ background: #081950; border-radius: 6px; margin: 10px 12px 20px; padding: 16px; text-align: left} .install-pwa .faq h3{ align-items: center; display: flex; font-size: 15px; font-weight: 800; gap: 8px; margin: 0 0 8px} .install-pwa .faq h3 .ic{ display: flex} .install-pwa .faq p{ font-size: 13px; line-height: 20px; margin: 0} .install-pwa strong{ font-weight: 800}