.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(#030a12 0, #030a12 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: #030a12; border: 4px solid #d60405; 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: #d60405; border: 0; border-radius: 5px; box-sizing: border-box; color: #fff; cursor: pointer; display: flex; font-size: 14px; font-weight: 700; gap: 10px; height: auto; justify-content: center; line-height: 1.2; margin: 15px auto 0; max-width: calc(100% - 32px); min-height: 44px; padding: 10px 16px; text-decoration: none; white-space: nowrap; width: min(320px, 100%)} .install-pwa .cta .ic{ color: #fff; display: flex} .install-pwa .cta[disabled], .install-pwa .cta.is-busy, .install-pwa .cta.is-disabled{ cursor: not-allowed; opacity: 0.6; pointer-events: none} .install-pwa .cta.is-busy{ cursor: wait; pointer-events: none} @media(hover: hover) and (min-width: 1024px){ .install-pwa .cta:hover{ background-color: #bd0404}} .install-pwa .sheet{ background: #61020b; 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: #d60405; 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: #d60405; 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, #61020b, rgba(97, 2, 11, 0)); left: 0} .install-pwa .phones::after{ background: linear-gradient(270deg, #61020b, rgba(97, 2, 11, 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: #d60405; 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: #d60405} .install-pwa .nav.prev{ align-items: flex-start; background: #12181f; justify-content: flex-end; left: 0; 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: 0} .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: #030a12; 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: #d60405; 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: #61020b; 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} @media(min-width: 1024px){ .install-pwa{ margin: 0 auto 1.5rem; max-width: 760px} .install-pwa .bg-zone{ border-radius: 16px 16px 0 0; margin: 0; padding-bottom: 72px} .install-pwa .hero{ margin-left: 48px; margin-right: 48px; padding-top: 36px} .install-pwa .hero-row{ min-width: 0} .install-pwa .hero-copy{ flex: 1; min-width: 0} .install-pwa .hero-icon{ border-radius: 24px; height: 88px; width: 88px} .install-pwa .hero-copy h1{ font-size: 28px; line-height: 1.25; overflow-wrap: break-word; white-space: normal} .install-pwa .hero-bullet{ font-size: 16px} .install-pwa .cta{ font-size: 16px; max-width: 100%; min-height: 52px; padding: 14px 28px; width: min(380px, 100%)} .install-pwa .sheet{ border-radius: 28px; margin: -40px 0 0; overflow: visible; padding-bottom: 28px} .install-pwa .step-heads{ height: auto; min-height: 132px; padding: 0 40px} .install-pwa .step-copy h2{ font-size: 22px} .install-pwa .step-copy p{ font-size: 15px; line-height: 22px} .install-pwa .nav.prev{ left: 12px} .install-pwa .nav.next{ right: 12px} .install-pwa .badges, .install-pwa .recommend, .install-pwa .plain-section, .install-pwa .faq{ margin-left: 28px; margin-right: 28px}}