:root {
    /* 字体大小 */
    --font-size-sm: 14px;
    --font-size-base: 16px;
    --font-size-lg: 20px;
    --font-size-xl: 24px;
    --font-size-3xl: 30px;
    --font-size-6xl: 40px;

    /* 行高 */
    --line-height-normal: 22px;
    --line-height-base: 26px;
    --line-height-lg: 28px;
    --line-height-xl: 31px;
    --line-height-5xl: 48px;
    --line-height-7xl: 64px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { background-color: #050608; min-height: 100vh; padding-top: 68px; }

.wrap{width: 100%;max-width: 1440px;margin:0 auto;padding: 0 1.2rem;}
.navbar { position: fixed; top: 0; left: 0; width: 100%; height: 68px; background-color: rgba(5, 6, 8, 0.95); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255, 255, 255, 0.1); z-index: 1000; }
.navbar-container { max-width: 1440px; margin: 0 auto; height: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; }
.navbar-logo { width: 67px; height: 18px; margin: auto 0;}
.navbar-logo img { width: 100%; height: 100%; object-fit: cover; }
.navbar-menu { display: flex; list-style: none; gap: 24px; align-items: center; }
.navbar-link { font-size: var(--font-size-sm); font-weight: 400; color: #ccc; text-decoration: none; transition: color 0.2s ease; }
.navbar-try-button { background: linear-gradient( 114deg, #D03280 0%, #7D41FD 100%); color: #fff; font-size: var(--font-size-sm); font-weight: 400; border-radius: 20px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; transition: opacity 0.2s ease; width: 104px; height: 40px;}
.navbar-try-button:hover { opacity: 0.7; }

.container { width: 100%; min-height: 100vh; position: relative; margin: 0 auto;}
.main-content { display: flex; flex-direction: column; align-items: center; text-align: center; margin: 0 auto; width: 100%; height: 832px; background-image: url('https://museai-resources.visionular.com/website/images/banner.png'); background-repeat: no-repeat; background-position: center center; background-size: cover;}
.main-headline { font-size: var(--font-size-6xl); font-weight: normal; line-height: var(--line-height-7xl); background: linear-gradient(87.18deg, #FFFFFF 0%, #CDC1FF 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; max-width: 800px; padding-top: 214px;}
.sub-headline { font-size: var(--font-size-lg); line-height: var(--line-height-base); color: rgba(255, 255, 255, 0.65); max-width: 680px; padding-bottom: 59px;}
.cta-button { width: 296px; height: 58px; background: linear-gradient( 114deg, #D03280 0%, #7D41FD 100%); border-radius: 29px; color: #FFFFFF; font-size: var(--font-size-lg); font-weight: 600; line-height: var(--line-height-lg); display: flex; align-items: center; justify-content: center; text-align: center; text-decoration: none; transition: opacity 0.2s ease; cursor: pointer;}
.cta-button:hover { opacity: 0.7; }

.img-slider-bg { width: 100%; height: 872px; background-color: rgba(27, 31, 41, 1);}
.carousel-container {width: 100%; overflow: hidden; padding-top: 120px;}
.carousel-wrapper { width: 100%; overflow: hidden; margin-bottom: 24px; }
.carousel-track { display: flex; gap: 16px; width: fit-content; }
.carousel-left .carousel-track { animation: scroll-left 30s linear infinite; }
.carousel-right .carousel-track { animation: scroll-right 30s linear infinite; }
.image-item { flex-shrink: 0; width: 230px; border-radius: 12px; overflow: hidden; position: relative; margin: auto 0; }
.image-item img { width: 200px; height: auto; max-width: 100%; display: block; }
@keyframes scroll-left { 0% { transform: translateX(0); } 100% { transform: translateX(calc(-200px * 7 - 16px * 7)); } }
@keyframes scroll-right { 0% { transform: translateX(calc(-200px * 7 - 16px * 7)); } 100% { transform: translateX(0); } }

.phone-img-slider-bg { width: 100%; height: 356px; background-color: rgba(27, 31, 41, 1); display: none;}
.phone-carousel-container {width: 100%; overflow: hidden; padding-top: 50px;}
.phone-carousel-wrapper { width: 100%; overflow: hidden; margin-bottom: 24px; }
.phone-carousel-track { display: flex; gap: 16px; width: fit-content; }
.phone-carousel-left .phone-carousel-track { animation: phone-scroll-left 30s linear infinite; }
.phone-carousel-right .phone-carousel-track { animation: phone-scroll-right 30s linear infinite; }
.phone-image-item { flex-shrink: 0; width: 230px; border-radius: 12px; overflow: hidden; position: relative; margin: auto 0; }
.phone-image-item img { width: 200px; height: auto; max-width: 100%; display: block; }
@keyframes phone-scroll-left { 0% { transform: translateX(0); } 100% { transform: translateX(calc(-200px * 16 - 16px * 15)); } }
@keyframes phone-scroll-right { 0% { transform: translateX(calc(-200px * 16 - 16px * 15)); } 100% { transform: translateX(0); } }

.steps-section { width: 100%; height: auto;}
.steps-title { font-size: var(--font-size-6xl); font-weight: normal; line-height: var(--line-height-7xl); text-align: center; color: #fff; padding-top: 120px; max-width: 540px; margin: 0 auto;}
.steps-description { font-size: var(--font-size-lg); font-weight: normal; line-height: var(--line-height-base); text-align: center; color: rgba(255, 255, 255, 0.65); max-width: 600px; margin-left: auto; margin-right: auto;}
.steps-container { display: flex; flex-direction: column; gap: 24px; max-width: 900px; margin: 0 auto; padding-top: 59px; }
.step-card { display: flex; align-items: center; gap: 38px; background: rgba(255,255,255,0.13); border-radius: 36px; border: 1px solid rgba(218,218,218,0.33); padding-left: 50px; padding-right: 50px; max-width: 1200px; height: 190px;}
.step-number { flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.94); display: flex; align-items: center; justify-content: center; color: #323339; font-size: var(--font-size-lg); line-height: var(--line-height-xl); }
.step-content { flex: 1; }
.step-title { font-size: var(--font-size-3xl); font-weight: normal; margin-bottom: 8px; color: #fff; line-height: var(--line-height-5xl);}
.step-text { font-size: var(--font-size-lg); font-weight: normal; line-height: var(--line-height-base); color: rgba(255, 255, 255, 0.65); max-width: 624px;}
.step-image { height: 100%; width: 220px;}
.step-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

.enhance-section {width: 100%; position: relative; display: flex; flex-direction: column; align-items: center; height: 832px; background-image: url('https://museai-resources.visionular.com/website/images/banner2.png'); background-repeat: no-repeat; background-position: center center; background-size: cover;}
.enhance-title {max-width: 660px; padding-top: 220px; font-size: var(--font-size-6xl); font-weight: normal; line-height: var(--line-height-7xl); text-align: center; background: linear-gradient(87.18deg, #FFFFFF 0%, #CDC1FF 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;}
.enhance-description { font-size: var(--font-size-lg); font-weight: normal; line-height: var(--line-height-base); text-align: center; color: rgba(255, 255, 255, 0.65); max-width: 720px; padding-bottom: 59px;}
.enhance-button { width: 296px; height: 58px; background: linear-gradient( 114deg, #D03280 0%, #7D41FD 100%); border-radius: 29px; color: #FFFFFF; font-size: var(--font-size-lg); font-weight: 600; line-height: var(--line-height-lg); display: flex; align-items: center; justify-content: center; text-align: center; text-decoration: none; transition: opacity 0.2s ease; cursor: pointer;}
.enhance-button:hover { opacity: 0.7; }

.explore-section {width: 100%; display: flex; align-items: center; justify-content: center; height: 832px; gap: 32px;}
.explore-content { flex: 0 1 auto; max-width: 500px; }
.explore-title { font-size: var(--font-size-6xl); font-weight: normal; line-height: var(--line-height-7xl); color: #fff; }
.explore-description { font-size: var(--font-size-lg); font-weight: normal; line-height: var(--line-height-base); color: rgba(255, 255, 255, 0.65); max-width: 480px;}
.explore-image { flex: 0 1 auto; max-width: 662px; max-height: 471px;}
.explore-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

.hero-section { width: 100%; height: 832px; background-color: rgba(27, 31, 41, 1); display: flex; align-items: center;}
.hero-section .wrap { display: flex; align-items: center; justify-content: center; gap: 115px; }
.hero-phones { flex: 0 1 auto; width: 594px; height: 870px;}
.hero-phones img { width: 100%; height: 100%; object-fit: contain; display: block; }
.hero-content { flex: 0 1 auto; max-width: 800px;}
.hero-title { font-size: var(--font-size-6xl); font-weight: normal; line-height: var(--line-height-7xl); color: #fff; }
.hero-title-line { display: block; }
.hero-description { font-size: var(--font-size-lg); font-weight: normal; line-height: var(--line-height-base); color: rgba(255, 255, 255, 0.65); max-width: 480px; padding-bottom: 40px;}
.app-store-image { width: 243px; height: 75px; display: block;}
.app-store-image img { width: 100%; height: 100%; object-fit: contain; display: block; }
.app-store-image:hover { opacity: 0.7; }

.footer-section { width: 100%; height: 330px; border-top: 1px solid rgba(255, 255, 255, 0.1);}
.footer-container { display: flex; justify-content: left; gap: 150px; width: 100%; margin: 0 auto; padding-top: 76px; padding-left: 150px;}
.footer-column { display: flex; flex-direction: column; gap: 20px;}
.footer-heading { font-size: var(--font-size-xl); font-weight: 600; color: #fff; }
.footer-link { font-size: var(--font-size-lg); font-weight: 400; color: rgba(255, 255, 255, 0.6); text-decoration: none; transition: color 0.2s ease;}
.footer-link:hover { color: #fff; }
.footer-qr-column { align-items: center; padding-left: 200px; }
/* .footer-qr-img { width: 187px; height: 187px; display: block; border-radius: 36px;} */
/* .footer-qr-img img { width: 100%; height: 100%; object-fit: contain; display: block; } */
.footer-qr-img { width: 187px; height: 187px; background-color: transparent; border-radius: 36px; display: flex; align-items: center; justify-content: center; }
.footer-qr-img::before { content: none; }
.footer-qr-img img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.footer-section .qr-code-text { font-size: var(--font-size-lg); color: #FFFFFF; font-weight: 400; padding-bottom: 40px;}

.footer-copyright-section { width: 100%; padding: 20px 0; background-color: rgba(20, 24, 32, 1); text-align: center; }
.footer-copyright { font-size: var(--font-size-base); font-weight: 400; color: rgba(255, 255, 255, 0.6); margin: 0; }

.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; }
.modal-overlay.active { opacity: 1; visibility: visible; }
.modal-content { background-color: #fff; border-radius: 12px; padding: 70px 48px; max-width: 500px; width: 90%; position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; transform: scale(0.9); transition: transform 0.3s ease; }
.modal-overlay.active .modal-content { transform: scale(1); }
.modal-close { position: absolute; top: 36px; left: 36px; transition: color 0.2s ease; cursor: pointer; width: 20px; height: 20px; display: block;}
.modal-close img { width: 100%; height: 100%; object-fit: contain; display: block; }
.modal-title { font-size: var(--font-size-xl); font-weight: 600; color: #000; }
.modal-description { font-size: var(--font-size-base); font-weight: 400; line-height: var(--line-height-normal); color: #666; margin-bottom: 20px; }
/* .qr-code-img { width: 200px; height: 200px; margin: 0 auto 20px; border-radius: 12px; overflow: hidden; display: block; }
.qr-code-img img { width: 100%; height: 100%; object-fit: contain; display: block; } */
.qr-code-img { width: 105px; height: 105px; background-color: transparent; border-radius: 22.5px; display: flex; align-items: center; justify-content: center; }
.qr-code-img::before { content: none; }
.qr-code-img img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.qr-code-hint { font-size: var(--font-size-base); color: rgba(0, 0, 0, 0.7); margin-bottom: 20px; }
.modal-app-store-image { width: 160px; height: 50px; display: block;}
.modal-app-store-image img { width: 100%; height: 100%; object-fit: contain; display: block; }
.modal-app-store-image:hover { opacity: 0.7; }
.contact-modal-content { padding: 48px; }
.contact-modal-label { font-size: var(--font-size-base); font-weight: 400; color: rgba(0, 0, 0, 0.7); margin-bottom: 12px; }
.contact-modal-email { font-size: var(--font-size-lg); font-weight: 600; color: #000; }

/* 响应式适配 - 1200px */
@media (max-width: 1200px) {
    :root {
        --font-size-6xl: 36px;
        --font-size-3xl: 28px;
        --font-size-lg: 18px;
        --line-height-7xl: 56px;
        --line-height-5xl: 44px;
        --line-height-base: 24px;
    }
    .wrap {max-width: 1440px; margin: 0 auto; padding: 0 100px; }
    .navbar-container { max-width: 100%; padding: 0 100px; }
    .main-content {height: 600px;}
    .main-headline { padding-top: 120px; }
    .step-card { padding-left: 40px; padding-right: 40px; gap: 30px; }
    .enhance-title { padding-top: 120px; }
    .enhance-section {height: 600px;}
    .explore-section { gap: 60px; height: 600px;}
    .explore-image {max-width: 450px; max-height: 400px;}
    .hero-section {height: 600px;}
    .hero-section .wrap { gap: 60px; height: 600px;}
    .hero-phones { width: 450px; height: 660px; }
    .footer-container { gap: 80px; padding-left: 0; }
    .footer-qr-column { padding-left: 60px; }
    .img-slider-bg { height: 600px;}
}

/* 响应式适配 - 991px */
@media (max-width: 991px) {
    :root {
        --font-size-6xl: 32px;
        --font-size-3xl: 24px;
        --font-size-xl: 24px;
        --font-size-lg: 18px;
        --font-size-base: 16px;
        --line-height-7xl: 48px;
        --line-height-5xl: 36px;
        --line-height-base: 22px;
        --line-height-normal: 22px;
    }
    .wrap { max-width: 1440px; margin: 0 auto; padding: 0 .5rem; }
    .navbar-container { padding: 0 3rem; }
    .main-headline {max-width: 80%;}
    .sub-headline {max-width: 70%;}
    .cta-button {width: 260px; height: 52px;}
    .steps-container {max-width: 90%;}
    .enhance-title {max-width: 80%; padding-top: 150px;}
    .enhance-description {max-width: 70%;}
    .enhance-button {width: 260px; height: 52px;}
    .explore-section {gap: 10px;}
    .explore-content {padding-left: 30px;}
    .explore-title {max-width: 90%;}
    .explore-image {max-width: 400px; max-height: 320px;}
    .explore-description {max-width: 100%;}
    .footer-container {padding-left: 40px;}
    .footer-qr-img {width: 150px; height: 150px;}
}

/* 响应式适配 - 767px */
@media (max-width: 767px) {
    :root {
        --font-size-6xl: 28px;
        --font-size-3xl: 20px;
        --font-size-xl: 20px;
        --font-size-lg: 16px;
        --font-size-base: 14px;
        --font-size-sm: 12px;
        --line-height-7xl: 40px;
        --line-height-5xl: 32px;
        --line-height-base: 20px;
        --line-height-normal: 20px;
    }
    .wrap { max-width: 1440px; margin: 0 auto; padding: 0 1rem; }
    .navbar-container { padding: 0 1rem; }
    .carousel-container.wrap { padding-left: 1rem; padding-right: 1rem; }
    .navbar-logo { width: 50px; height: 14px; }
    .navbar-try-button { width: 90px; height: 36px; }
    .main-content { height: 500px; }
    .main-headline { padding-top: 100px; }
    .cta-button { width: 220px; height: 48px; }
    .carousel-container { padding-top: 60px; }
    @keyframes scroll-left { 0% { transform: translateX(0); } 100% { transform: translateX(calc(-120px * 7 - 8px * 7)); } }
    @keyframes scroll-right { 0% { transform: translateX(calc(-120px * 7 - 8px * 7)); } 100% { transform: translateX(0); } }
    .carousel-track { gap: 8px; }
    @keyframes phone-scroll-left { 0% { transform: translateX(0); } 100% { transform: translateX(calc(-200px * 16 - 16px * 15)); } }
    @keyframes phone-scroll-right { 0% { transform: translateX(calc(-200px * 16 - 16px * 15)); } 100% { transform: translateX(0); } }
    .steps-title { padding-top: 60px; }
    .steps-container { padding-top: 30px; gap: 16px; }
    .step-card { padding: 20px; gap: 16px; }
    .step-number { width: 40px; height: 40px; }
    .step-image { height: 150px; }
    .enhance-section { height: 500px; }
    .enhance-title { padding-top: 100px; }
    .enhance-button { width: 220px; height: 48px; }
    .explore-section { padding-top: 60px; padding-bottom: 60px; gap: 30px; }
    .explore-image { max-height: 300px; }
    .hero-section { padding-top: 60px; padding-bottom: 60px; }
    .hero-section .wrap { gap: 30px; }
    .hero-phones { max-width: 300px; }
    .app-store-image { width: 180px; height: 56px; }
    .footer-section { height: 270px; }
    .footer-container { flex-wrap: wrap; flex-direction: row; gap: 40px; padding-top: 40px; padding-bottom: 30px; padding-left: 20px; min-height: 200px;}
    .footer-column { flex: 0 1 auto; min-width: 0; }
    .footer-qr-img { width: 150px; height: 150px; }
}

@media (max-width: 639px) {
    :root {
        --font-size-6xl: 26px;
        --font-size-3xl: 20px;
        --font-size-xl: 20px;
        --font-size-lg: 16px;
        --font-size-base: 14px;
        --font-size-sm: 12px;
        --line-height-7xl: 40px;
        --line-height-5xl: 32px;
        --line-height-base: 20px;
        --line-height-normal: 20px;
    }
    .navbar-container {padding: 0 1.5rem;}
    .privacy-container { padding: 10px 20px !important; }
    .refund-container { padding: 10px 20px !important; }
    .service-container { padding: 10px 20px !important; }
    .main-content {height: 600px;}
    .sub-headline {max-width: 300px;}
    .cta-button{width: 296px; height: 46px;}
    .img-slider-bg {display: none;}
    .phone-img-slider-bg {display: block;}
    .steps-title {max-width: 75%;}
    .steps-description {max-width: 65%;}
    .step-card { flex-direction: column; align-items: flex-start; height: auto; padding: 20px; gap: 30px; position: relative; max-width: 335px; margin: 0 auto;}
    .step-number { position: absolute; top: 30px; left: 30px; width: 30px; height: 30px;}
    .step-content { margin-left: 64px; width: calc(100% - 64px); margin-top: 8px;}
    .step-title { margin-bottom: 8px; }
    .step-image { width: 100%; height: auto; margin:0 auto;}
    .step-image img { width: 90%; height: auto; object-fit: contain; margin: 0 auto;}
    .enhance-section {height: 600px;}
    .enhance-title {margin-top: 50px; max-width: 323px;}
    .enhance-description {max-width: 323px;}
    .enhance-button {width: 296px; height: 46px;}
    .explore-section { flex-direction: column; height: auto; padding-top: 60px; padding-bottom: 60px; gap: 30px; }
    .explore-content { max-width: 100%; text-align: center; padding-right: 30px;}
    .explore-title { max-width: 100%; padding-bottom: 16px;}
    .explore-description { max-width: 80%; margin: 0 auto;}
    .explore-image { max-width: 80%; max-height: none; }
    .hero-section { height: auto; padding-top: 120px; padding-bottom: 60px; }
    .hero-section .wrap { flex-direction: column; gap: 30px; }
    .hero-content { max-width: 90%; text-align: center; order: -1; }
    .hero-title { text-align: center; }
    .hero-description { max-width: 90%; margin: 0 auto; text-align: center; }
    .hero-phones { width: 100%; max-width: 303px; height: auto; margin: 40px auto 0; order: 1; }
    .app-store-image { margin: 0 auto; width: 243px; height: 75px;}
    .footer-section { height: auto; padding-top: 40px; padding-bottom: 40px; }
    .footer-container { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 40px; padding-top: 0; padding-left: 0; }
    .footer-qr-column { order: -1; flex-basis: 100%; padding-left: 0; align-items: center; }
    .footer-section .qr-code-text { font-size: 20px; margin-top: -10px; padding-bottom: 0; padding-top: 16px; }
    .footer-column:not(.footer-qr-column) { flex-direction: column; gap: 20px; }
    .navbar-try-button:hover { opacity: 1; }
    .cta-button:hover { opacity: 1; }
    .enhance-button:hover { opacity: 1; }
    .app-store-image:hover { opacity: 1; }
    .footer-link:hover { color: rgba(255, 255, 255, 0.6); }
    .modal-app-store-image:hover { opacity: 1; }
    .modal-content { max-width: 320px; width: 85%; padding: 48px 24px;}
    .modal-title { margin-top: -10px;}
    .modal-description { width: 90%;}
    .modal-close { top: 25px; left: 25px; width: 15px; height: 15px;}
    .qr-code-img { width: 80px; height: 80px; border-radius: 16px;}
}