*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
font-family:Arial,sans-serif;
background:#f3f3f3;
color:#666;
line-height:1.7;
}

.site-header{
background:#ffffff;
box-shadow:0 4px 18px rgba(0,0,0,.08);
position:sticky;
top:0;
z-index:9999;
}

.nav-wrap{
max-width:1280px;
margin:auto;
padding:15px 24px;
display:flex;
justify-content:space-between;
align-items:center;
position:relative;
}

.brand{
display:flex;
align-items:center;
gap:12px;
text-decoration:none;
color:#222;
font-size:24px;
font-weight:700;
}

.brand img{
width:48px;
height:48px;
border-radius:12px;
box-shadow:0 4px 10px rgba(0,0,0,.15);
}

.nav-links{
display:flex;
align-items:center;
gap:8px;
}

.nav-links a{
text-decoration:none;
color:#444;
font-size:15px;
font-weight:600;
padding:8px 10px;
font: size 14px;
border-radius:8px;
transition:.3s;
}

.nav-links a:hover{
background:#0d6efd;
color:#fff;
}

.menu-icon{
display:none;
background:linear-gradient(135deg,#ff9800,#ff6a00);
color:#fff;
border:none;
font-size:22px;
padding:8px 14px;
border-radius:10px;
cursor:pointer;
box-shadow:0 5px 14px rgba(255,106,0,.3);
}

.mobile-menu{
display:none;
position:absolute;
top:100%;
right:0;
width:260px;
background:#fff;
border-radius:0 0 16px 16px;
box-shadow:0 12px 30px rgba(0,0,0,.18);
overflow:hidden;
z-index:10001;
padding:6px 0;
}

.mobile-menu.show-menu{
display:block;
}

.mobile-menu a{
display:block;
padding:14px 18px;
text-decoration:none;
color:#333;
font-size:15px;
font-weight:600;
border-bottom:1px solid #eee;
}

.mobile-menu a:hover{
background:#fff7e6;
color:#ff6a00;
}

.container{
max-width:900px;
margin:25px auto;
padding:15px;
background:#fff;
}

.hero{
width:100%;
display:block;
}

.main-title{
font-size:56px;
font-weight:300;
color:#333;
margin:15px 0;
}

.section-title{
font-size:30px;
font-weight:700;
color:#777;
margin:30px 0 15px;
}

.sub-title{
font-size:22px;
font-weight:700;
color:#777;
margin:20px 0;
}

p{
font-size:18px;
margin-bottom:18px;
}

ol,ul{
padding-left:30px;
margin-bottom:20px;
}

li{
margin-bottom:6px;
font-size:18px;
}

.note{
font-weight:bold;
}

.download-btn{
display:block;
width:100%;
text-align:center;
background:linear-gradient(135deg,#ff9800,#ff6a00);
color:#fff;
text-decoration:none;
padding:18px;
font-size:22px;
font-weight:700;
border-radius:14px;
margin:25px 0;
box-shadow:0 8px 20px rgba(255,106,0,.35);
transition:all .3s ease;
}

.download-btn:hover{
transform:translateY(-2px);
box-shadow:0 10px 25px rgba(255,106,0,.45);
}

.old-version{
margin-top:40px;
padding:30px;
background:#fff;
border-radius:18px;
box-shadow:0 8px 25px rgba(0,0,0,.08);
overflow:hidden;
border:1px solid #f2f2f2;
}

.old-version img{
float:right;
width:220px;
border-radius:16px;
margin-left:25px;
margin-bottom:20px;
box-shadow:0 8px 20px rgba(0,0,0,.12);
}

.old-version ul{
margin-top:15px;
}

.old-version li{
margin-bottom:10px;
}

@media(max-width:768px){

.old-version{
padding:20px;
}

.old-version img{
float:none;
display:block;
width:170px;
margin:0 auto 20px;
}

}

.footer{
margin-top:50px;
background:#111;
color:#ddd;
padding:35px 20px;
text-align:center;
}

.footer-brand img{
width:58px;
height:58px;
border-radius:14px;
margin-bottom:10px;
}

.footer-brand h3{
color:#fff;
font-size:24px;
margin-bottom:8px;
}

.footer-brand p{
max-width:650px;
margin:0 auto 22px;
font-size:15px;
color:#bbb;
}

.footer-links{
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:10px 18px;
margin-bottom:22px;
}

.footer-links a{
color:#ddd;
text-decoration:none;
font-size:14px;
}

.footer-links a:hover{
color:#ff9800;
}

.footer-copy{
font-size:14px;
color:#999;
margin:0;
}

@media(max-width:768px){
.nav-links{
display:none;
}

.menu-icon{
display:block;
}

.brand{
font-size:18px;
}

.main-title{
font-size:28px;
}

.section-title{
font-size:22px;
}

.sub-title{
font-size:18px;
}

p,li{
font-size:16px;
}

.download-btn{
font-size:20px;
padding: 16px;
}

.old-version img{
float:none;
display:block;
width:240px;
margin:20px auto;
}
}
.hero-section{
display:grid;
grid-template-columns:1fr 1fr;
gap:25px;
align-items:center;
background:linear-gradient(135deg,#fff7e6,#ffffff);
border-radius:20px;
padding:25px;
box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.hero-content{
padding:10px;
}

.hero-badge{
display:inline-block;
background:#ffecb3;
color:#8a5a00;
font-size:14px;
font-weight:700;
padding:8px 16px;
border-radius:30px;
margin-bottom:15px;
}

.hero-text{
font-size:18px;
color:#555;
line-height:1.7;
}

.hero-features{
display:flex;
flex-wrap:wrap;
gap:10px;
margin:18px 0;
}

.hero-features span{
background:#fff;
border:1px solid #eee;
padding:10px 14px;
border-radius:30px;
font-size:14px;
font-weight:600;
box-shadow:0 3px 8px rgba(0,0,0,.05);
}
.mobile-download-btn{
display:none;
}

@media(max-width:768px){

.hero-section{
display:flex;
flex-direction:column;
padding:18px;
}

.hero-section > a:not(.mobile-download-btn){
order:1;
width:100%;
}

.mobile-download-btn{
order:2;
display:block;
width:100%;
text-align:center;
background:linear-gradient(135deg,#ff9800,#ff6a00);
color:#fff;
text-decoration:none;
padding:16px;
font-size:20px;
font-weight:700;
border-radius:14px;
margin:18px 0 22px;
box-shadow:0 8px 20px rgba(255,106,0,.35);
}

.hero-content{
order:3;
width:100%;
}

.hero-content .download-btn{
display:none;
}

.hero{
width:100%;
max-width:320px;
display:block;
margin:0 auto;
border-radius:18px;
}

.hero-text{
font-size:16px;
}

}
.install-section{
margin-top:35px;
}

.section-intro{
font-size:18px;
color:#666;
margin-bottom:22px;
}

.steps-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:18px;
}

.step-card{
background:#ffffff;
border:1px solid #f1e0c8;
border-radius:16px;
padding:20px;
box-shadow:0 8px 22px rgba(0,0,0,.06);
}

.step-card span{
display:inline-flex;
width:38px;
height:38px;
align-items:center;
justify-content:center;
background:linear-gradient(135deg,#ff9800,#ff6a00);
color:#fff;
font-weight:700;
border-radius:50%;
margin-bottom:12px;
}

.step-card h3{
font-size:20px;
color:#333;
margin-bottom:8px;
}

.step-card p{
font-size:15px;
margin:0;
color:#666;
}

.note-box{
background:#fff7e6;
border-left:5px solid #ff9800;
padding:15px;
border-radius:10px;
margin-top:20px;
font-size:16px;
}

@media(max-width:768px){
.steps-grid{
grid-template-columns:1fr;
}

.install-section{
margin-top:25px;
}
}
.bonus-box{
margin-top:40px;
background:linear-gradient(135deg,#fff4d6,#ffffff);
border:1px solid #ffe0a3;
border-radius:20px;
padding:30px;
box-shadow:0 10px 28px rgba(0,0,0,.07);
}


.bonus-box h2{
font-size:30px;
color:#333;
margin-bottom:15px;
}

.bonus-box p{
font-size:18px;
color:#555;
}

.bonus-box ul{
margin-top:15px;
padding-left:25px;
}

.bonus-box li{
margin-bottom:10px;
font-size:17px;
}

@media(max-width:768px){
.bonus-box{
padding:22px;
}

.bonus-box h2{
font-size:24px;
}
}
.features-section{
margin-top:40px;
}

.features-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:18px;
}

.feature-card{
background:#fff;
border:1px solid #eee;
border-radius:18px;
padding:22px;
box-shadow:0 8px 22px rgba(0,0,0,.06);
}

.feature-card h3{
font-size:20px;
color:#333;
margin-bottom:10px;
}

.feature-card p{
font-size:15px;
color:#666;
margin:0;
}

@media(max-width:768px){
.features-grid{
grid-template-columns:1fr;
}
}
.online-section{
margin-top:45px;
}

.online-box{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:15px;
margin-top:20px;
}

.online-item{
background:#ffffff;
border:1px solid #eee;
padding:18px;
border-radius:14px;
font-weight:600;
text-align:center;
box-shadow:0 6px 18px rgba(0,0,0,.06);
}

@media(max-width:768px){

.online-box{
grid-template-columns:1fr 1fr;
}

.online-item{
font-size:14px;
padding:14px;
}

}
.final-cta{
margin-top:45px;
background:linear-gradient(135deg,#fff7e6,#ffffff);
border:1px solid #ffe0a3;
border-radius:20px;
padding:30px;
text-align:center;
box-shadow:0 10px 28px rgba(0,0,0,.07);
}

.final-cta h2{
font-size:30px;
color:#333;
margin-bottom:12px;
}

.final-cta p{
font-size:18px;
color:#555;
max-width:650px;
margin:0 auto 20px;
}

.final-cta .download-btn{
max-width:420px;
margin:20px auto 0;
}

@media(max-width:768px){
.final-cta{
padding:22px;
}

.final-cta h2{
font-size:24px;
}
}
.guides-section{
margin-top:45px;
}

.guides-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:18px;
}

.guide-card{
background:#fff;
border:1px solid #eee;
border-radius:18px;
padding:22px;
text-decoration:none;
color:#333;
box-shadow:0 8px 22px rgba(0,0,0,.06);
transition:.3s;
}

.guide-card:hover{
transform:translateY(-5px);
box-shadow:0 12px 28px rgba(0,0,0,.10);
}

.guide-card h3{
margin-bottom:10px;
font-size:20px;
}

.guide-card p{
margin:0;
font-size:15px;
color:#666;
}

@media(max-width:768px){

.guides-grid{
grid-template-columns:1fr;
}

}
.page-hero{
background:linear-gradient(135deg,#fff7e6,#ffffff);
border:1px solid #ffe0a3;
border-radius:20px;
padding:30px;
box-shadow:0 10px 28px rgba(0,0,0,.07);
margin-bottom:35px;
}

.page-hero h1{
font-size:36px;
color:#333;
margin-bottom:12px;
}

.page-hero p{
font-size:18px;
color:#555;
margin:0;
}

.about-card{
margin-top:35px;
}

@media(max-width:768px){
.page-hero{
padding:22px;
}

.page-hero h1{
font-size:28px;
}
}