/* =========================
   GLOBAL
========================= */

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


body{

    font-family:
    "Poppins",
    "Noto Sans SC",
    Arial,
    sans-serif;

    color:#222;

    background:#ffffff;

    line-height:1.7;

}


img{

    max-width:100%;

    display:block;

}



a{

    text-decoration:none;

}



h1,h2,h3{

    line-height:1.3;

}




/* =========================
   HERO
========================= */


.hero{

    min-height:90vh;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:70px;

    padding:80px 8%;

    background:

    linear-gradient(
    135deg,
    #111827,
    #1f2937
    );

    color:white;

}




.hero-content{

    max-width:600px;

}



.brand{

    color:#ff8a00;

    font-weight:600;

    margin-bottom:20px;

}



.hero h1{

    font-size:52px;

    font-weight:800;

    margin-bottom:25px;

}



.hero h2{

    font-size:24px;

    font-weight:400;

    color:#ddd;

    margin-bottom:35px;

}




.hero-list p{

    font-size:18px;

    margin-bottom:8px;

}





.price{

    margin:35px 0;

}



.price span{

    display:block;

    color:#ccc;

}



.price strong{

    font-size:60px;

    color:#ff6b00;

}





.btn{

    display:inline-block;

    background:#ff6b00;

    color:white;

    padding:18px 45px;

    border-radius:12px;

    font-size:22px;

    font-weight:700;

    transition:.3s;

    box-shadow:
    0 10px 30px rgba(255,107,0,.35);

}



.btn:hover{

    transform:translateY(-3px);

    background:#ff8500;

}




.secure{

    margin-top:20px;

    font-size:14px;

    color:#ccc;

}





.hero-image img{

    width:360px;

    border-radius:20px;

    box-shadow:
    0 30px 60px rgba(0,0,0,.4);

}







/* =========================
 TRUST
========================= */


.trust{

    display:grid;

    grid-template-columns:
    repeat(3,1fr);

    text-align:center;

    padding:50px 10%;

    background:#f8f8f8;

}



.trust strong{

    font-size:48px;

    color:#ff6b00;

}



.trust p{

    color:#666;

}





/* =========================
 SECTION
========================= */


.section{

    max-width:1100px;

    margin:auto;

    padding:80px 25px;

}



.section h2{

    text-align:center;

    font-size:36px;

    margin-bottom:50px;

}





/* =========================
 CARDS
========================= */


.cards{

    display:grid;

    grid-template-columns:
    repeat(3,1fr);

    gap:30px;

}



.card{

    background:white;

    padding:35px;

    border-radius:18px;


    box-shadow:
    0 10px 40px rgba(0,0,0,.08);

    transition:.3s;

}



.card:hover{

    transform:translateY(-8px);

}



.card h3{

    margin-bottom:15px;

    font-size:22px;

}



.card p{

    color:#666;

}





/* =========================
 AUTHOR
========================= */


.author{

    display:grid;

    grid-template-columns:
    350px 1fr;

    gap:60px;

    align-items:center;

}



.author img{

    border-radius:20px;

    box-shadow:
    0 15px 40px rgba(0,0,0,.15);

}






/* =========================
 PREVIEW
========================= */


.preview{

    display:flex;

    gap:25px;

    justify-content:center;

    flex-wrap:wrap;

}



.preview img{

    width:300px;

    border-radius:15px;

    box-shadow:
    0 10px 30px rgba(0,0,0,.15);

}







/* =========================
 CTA
========================= */


.cta{

    text-align:center;

    padding:90px 20px;

    background:#111827;

    color:white;

}



.cta h2{

    max-width:800px;

    margin:auto;

    font-size:38px;

    margin-bottom:40px;

}







/* =========================
 FAQ
========================= */


.faq{

    max-width:800px;

    margin:auto;

}



.faq h3{

    margin-top:25px;

    font-size:20px;

}



.faq p{

    color:#666;

}






/* =========================
 FOOTER
========================= */


footer{

    background:#111827;

    color:white;

    text-align:center;

    padding:40px;

}






/* =========================
 MOBILE BUY
========================= */


.mobile-buy{

    display:none;

}







/* =========================
 MOBILE
========================= */


@media(max-width:768px){


.hero{

    flex-direction:column;

    text-align:center;

    padding:60px 25px;

}



.hero h1{

    font-size:36px;

}



.hero h2{

    font-size:20px;

}



.price strong{

    font-size:45px;

}



.hero-image img{

    width:260px;

}



.trust{

    grid-template-columns:1fr;

    gap:35px;

}



.cards{

    grid-template-columns:1fr;

}



.section h2{

    font-size:30px;

}



.author{

    grid-template-columns:1fr;

    text-align:center;

}



.cta h2{

    font-size:28px;

}





/* Floating buy button */


.mobile-buy{

    display:block;

    position:fixed;

    bottom:0;

    left:0;

    width:100%;

    background:white;

    padding:12px;

    box-shadow:
    0 -5px 20px rgba(0,0,0,.15);

    z-index:999;

}



.mobile-buy a{

    display:block;

    text-align:center;

    background:#ff6b00;

    color:white;

    padding:15px;

    border-radius:10px;

    font-weight:bold;

    font-size:18px;

}



body{

    padding-bottom:80px;

}


}