html{
    -webkit-text-size-adjust:100%;
    line-height:1.15
}
body{
    margin:0
}
main{
    display:block
}
h1{
    margin:.67em 0;
    font-size:2em
}
hr{
    box-sizing:content-box;
    height:0;
    overflow:visible
}
pre{
    font-family:monospace;
    font-size:1em
}
a{
    background-color:#0000
}
abbr[title]{
    text-decoration:underline;
    border-bottom:none;
    -webkit-text-decoration:underline dotted;
    text-decoration:underline dotted
}
b,strong{
    font-weight:bolder
}
code,kbd,samp{
    font-family:monospace;
    font-size:1em
}
small{
    font-size:80%
}
sub,sup{
    vertical-align:baseline;
    font-size:75%;
    line-height:0;
    position:relative
}
sub{
    bottom:-.25em
}
sup{
    top:-.5em
}
img{
    border-style:none
}
button,input,optgroup,select,textarea{
    margin:0;
    font-family:inherit;
    font-size:100%;
    line-height:1.15
}
button,input{
    overflow:visible
}
button,select{
    text-transform:none
}
button,[type=button],[type=reset],[type=submit]{
    -webkit-appearance:button
}
button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{
    border-style:none;
    padding:0
}
button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{
    outline:.01rem dotted ButtonText
}
fieldset{
    padding:.35em .75em .625em
}
legend{
    box-sizing:border-box;
    color:inherit;
    max-width:100%;
    white-space:normal;
    padding:0;
    display:table
}
progress{
    vertical-align:baseline
}
textarea{
    overflow:auto
}
[type=checkbox],[type=radio]{
    box-sizing:border-box;
    padding:0
}
[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{
    height:auto
}
[type=search]{
    -webkit-appearance:textfield;
    outline-offset:-.02rem
}
[type=search]::-webkit-search-decoration{
    -webkit-appearance:none
}
::-webkit-file-upload-button{
    -webkit-appearance:button;
    font:inherit
}
details{
    display:block
}
summary{
    display:list-item
}
template,[hidden]{
    display:none
}

@font-face{
    font-family:Titillium Web;
    src:url(TitilliumWeb-Regular.e1615b4d.ttf);
    font-display:swap
}
html,body{
    width:100%;
    min-height:100vh;
    margin: 0;
    padding: 0;
    font-family:Titillium Web;
}
html .bg,body .bg{
    width:100%;
    min-height:100vh;
    background: linear-gradient(135deg, #1e1e1e 0%, #2d2d2d 100%);
    position:relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 20px;
    box-sizing: border-box;
}
html .logo,body .logo{
    position:fixed;
    top:20px;
    left:20px;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 100;
}
html .logo img,body .logo img{
    width: 40px;
    height: 40px;
}
html .logo span,body .logo span{
    color:#fff;
    font-size:24px;
    font-weight:700;
}
html .title,body .title{
    color:#fff;
    font-size:48px;
    font-weight:700;
    margin-bottom: 20px;
}
html .title-line,body .title-line{
    width:100px;
    height:4px;
    margin: 20px auto;
    background: #fff;
}
html .sub-title,body .sub-title{
    color:#ffffff;
    font-size:24px;
    line-height:1.8;
    margin-top: 30px;
}
html .sub-title .sub-title-row .light,body .sub-title .sub-title-row .light{
    color:#4CAF50;
    font-weight: bold;
}
html .phone-img,body .phone-img{
    width:9.46rem;
    height:10.8rem;
    position:absolute;
    top:0;
    right:0
}
html .phone-img img,body .phone-img img{
    width:100%;
    height:100%
}
html .btn,body .btn{
    width:3.27rem;
    height:.84rem;
    mix-blend-mode:normal;
    cursor:pointer;
    border:.01rem solid #fff;
    border-radius:.14rem;
    position:absolute
}
html .btn img,body .btn img{
    width:.4rem;
    height:.4rem;
    position:absolute;
    top:.2rem;
    left:.62rem
}
html .btn .btn-desc,body .btn .btn-desc{
    text-align:center;
    letter-spacing:-.003rem;
    font-family:Noto Sans;
    font-size:.18rem;
    font-style:normal;
    font-weight:400;
    line-height:.25rem;
    position:absolute;
    top:.12rem;
    left:1.2rem
}
html .btn .btn-title,body .btn .btn-title{
    text-align:center;
    letter-spacing:-.003rem;
    font-family:Noto Sans;
    font-size:.24rem;
    font-style:normal;
    font-weight:700;
    line-height:.33rem;
    position:absolute;
    top:.36rem;
    left:1.17rem
}
html .apple-btn,body .apple-btn{
    width: 200px;
    height: 60px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-decoration: none;
    transition: background 0.3s ease;
}
html .apple-btn:hover,body .apple-btn:hover{
    background: rgba(255, 255, 255, 0.2);
}
html .apple-btn img,body .apple-btn img{
    width: 24px;
    height: 24px;
}
html .apple-btn .btn-desc,body .apple-btn .btn-desc{
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
}
html .apple-btn .btn-title,body .apple-btn .btn-title{
    color: #fff;
    font-size: 1.1rem;
    font-weight: bold;
}
html .google-btn,body .google-btn{
    width: 200px;
    height: 60px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-decoration: none;
    transition: background 0.3s ease;
}
html .google-btn:hover,body .google-btn:hover{
    background: rgba(255, 255, 255, 0.2);
}
html .google-btn img,body .google-btn img{
    width: 24px;
    height: 24px;
}
html .google-btn .btn-desc,body .google-btn .btn-desc{
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
}
html .google-btn .btn-title,body .google-btn .btn-title{
    color: #fff;
    font-size: 1.1rem;
    font-weight: bold;
}
html .cube,body .cube{
    width:.62rem;
    height:.62rem;
    position:absolute;
    top:9.18rem;
    left:2.44rem
}

.hero-section {
    width: 100%;
    max-width: 1200px;
    padding: 120px 0 60px;
    text-align: center;
    margin: 0 auto;
}

.features-section {
    width: 100%;
    max-width: 1200px;
    padding: 60px 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin: 0 auto;
}

.feature-item {
    background: rgba(255, 255, 255, 0.05);
    padding: 40px;
    border-radius: 16px;
    text-align: center;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.feature-item:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
}

.feature-icon {
    font-size: 40px;
    margin-bottom: 20px;
}

.feature-title {
    color: #fff;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
}

.feature-desc {
    color: rgba(255, 255, 255, 0.7);
    font-size: 16px;
    line-height: 1.6;
}

.download-section {
    width: 100%;
    max-width: 1200px;
    padding: 4rem 2rem;
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.footer {
    width: 100%;
    padding: 40px 0;
    text-align: center;
    background: rgba(0, 0, 0, 0.2);
    margin-top: auto;
}

.copyright {
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.hero-desc {
    color: rgba(255, 255, 255, 0.8);
    font-size: 18px;
    margin-top: 20px;
    line-height: 1.6;
}

.highlights-section {
    width: 100%;
    max-width: 1200px;
    padding: 60px 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.02);
}

.highlight-item {
    padding: 40px;
    text-align: center;
    transition: all 0.3s ease;
}

.highlight-item:hover {
    transform: translateY(-5px);
}

.highlight-icon {
    font-size: 40px;
    margin-bottom: 20px;
}

.highlight-title {
    color: #fff;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
}

.highlight-desc {
    color: rgba(255, 255, 255, 0.7);
    font-size: 16px;
    line-height: 1.6;
}

.slogan-section {
    width: 100%;
    padding: 60px 0;
    text-align: center;
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.1) 0%, rgba(76, 175, 80, 0.05) 100%);
}

.slogan {
    color: #fff;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
}

@media (min-width: 1200px) {
    .hero-section {
        padding: 160px 0 80px;
    }
    
    .features-section {
        padding: 80px 0;
    }
    
    .feature-item {
        padding: 50px;
    }
    
    .feature-icon {
        font-size: 48px;
    }
    
    .feature-title {
        font-size: 28px;
    }
    
    .feature-desc {
        font-size: 18px;
    }
    
    .hero-desc {
        font-size: 20px;
    }
    
    .slogan {
        font-size: 28px;
    }
}

@media (max-width: 768px) {
    html .title,body .title{
        font-size: 36px;
    }
    
    html .sub-title,body .sub-title{
        font-size: 20px;
    }
    
    .features-section {
        grid-template-columns: 1fr;
        padding: 40px 0;
    }
    
    .feature-item {
        padding: 30px;
    }
    
    .footer {
        padding: 30px 0;
    }
    
    .hero-desc {
        font-size: 16px;
    }
    
    .slogan {
        font-size: 20px;
    }
    
    .highlights-section {
        padding: 40px 0;
    }
    
    .highlight-item {
        padding: 30px;
    }
}