/*==============================
        RESET
==============================*/

*{

    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',Arial,sans-serif;

}


body{

    background:#050505;

    color:white;

    overflow-x:hidden;

}


/*==============================
        DOWNLOAD PAGE
==============================*/


.download-container{

    position:relative;

    max-width:1400px;

    margin:auto;

    padding:120px 30px;

    text-align:center;

}


/* Background glow */

.download-container::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    background:rgba(255,215,0,.15);

    filter:blur(150px);

    top:0;

    left:50%;

    transform:translateX(-50%);

}


/* TITLE */


.download-container h1{

    position:relative;

    font-family:'Cinzel',serif;

    font-size:65px;

    letter-spacing:5px;

    color:#ffd700;

    text-shadow:

    0 0 10px gold,
    0 0 40px rgba(255,215,0,.6);

    margin-bottom:20px;

}


.download-container > p{

    color:#aaa;

    font-size:18px;

    max-width:700px;

    margin:auto;

    line-height:1.8;

    margin-bottom:70px;

}


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


.download-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

    gap:35px;

    margin-bottom:90px;

}


.download-card{


    position:relative;

    background:

    linear-gradient(
    145deg,
    rgba(255,255,255,.08),
    rgba(0,0,0,.7)
    );


    padding:45px 35px;

    border-radius:25px;

    border:1px solid rgba(255,215,0,.15);

    backdrop-filter:blur(15px);

    overflow:hidden;

    transition:.5s;

}


.download-card::before{

    content:"";

    position:absolute;

    width:150px;

    height:150px;

    background:gold;

    filter:blur(100px);

    opacity:0;

    transition:.5s;

}


.download-card:hover::before{

    opacity:.5;

}


.download-card:hover{


    transform:translateY(-15px);

    border-color:#ffd700;

    box-shadow:

    0 0 40px rgba(255,215,0,.35);

}


/* ICON */


.download-card i{

    font-size:80px;

    color:#ffd700;

    margin-bottom:25px;

    filter:

    drop-shadow(0 0 15px gold);

}


.download-card h2{

    font-size:30px;

    margin-bottom:15px;

    font-family:'Cinzel',serif;

}


.download-card span{

    color:#aaa;

    display:block;

    margin-bottom:30px;

}


/* BUTTON */


.download-card button{


    position:relative;

    background:

    linear-gradient(
    135deg,
    #ffe477,
    #b8860b
    );


    color:#111;

    border:none;

    padding:16px 50px;

    border-radius:50px;

    font-size:17px;

    font-weight:bold;

    cursor:pointer;

    transition:.4s;

}


.download-card button:hover{


    transform:scale(1.1);

    box-shadow:

    0 0 30px gold;

}


/*==============================
      SYSTEM REQUIREMENTS
==============================*/


.requirements{


    position:relative;


    background:

    linear-gradient(
    rgba(20,20,20,.9),
    rgba(5,5,5,.95)
    );


    padding:50px;

    border-radius:30px;

    border:

    1px solid rgba(255,215,0,.2);


    box-shadow:

    0 0 50px rgba(0,0,0,.8);

}


.requirements h2{


    font-size:40px;

    font-family:'Cinzel',serif;

    color:#ffd700;

    margin-bottom:45px;

}


/* REQUIREMENT GRID */


.req-grid{


    display:grid;

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

    gap:35px;

}



.req-grid div{


    background:

    rgba(255,255,255,.05);


    padding:35px;

    border-radius:20px;

    border:

    1px solid rgba(255,255,255,.08);

    transition:.4s;

}


.req-grid div:hover{


    border-color:#ffd700;

    transform:translateY(-8px);

}


/* HEADINGS */


.req-grid h3{


    color:#ffd700;

    font-size:28px;

    margin-bottom:25px;

    font-family:'Cinzel',serif;

}



.req-grid p{


    color:#ccc;

    padding:12px 0;

    border-bottom:

    1px solid rgba(255,255,255,.08);

}


/*==============================
        RESPONSIVE
==============================*/


@media(max-width:900px){


.download-container h1{

    font-size:45px;

}


.req-grid{

    grid-template-columns:1fr;

}


.requirements{

    padding:25px;

}

}
.back-btn{

    position:relative;
    z-index:9999;

    display:inline-flex;
    align-items:center;
    gap:10px;

    background:#FFD700;
    color:#000;

    padding:12px 25px;

    border:none;
    border-radius:8px;

    font-weight:bold;
    cursor:pointer;

    margin-bottom:30px;

    box-shadow:0 0 15px gold;

    transition:.3s;
}


.back-btn:hover{

    background:white;
    transform:scale(1.05);

}
/* ===========================
   HOW TO INSTALL
=========================== */

.install-guide{
    max-width:1200px;
    margin:80px auto;
    padding:40px;
    background:#111;
    border:1px solid rgba(255,215,0,.25);
    border-radius:20px;
    box-shadow:0 0 25px rgba(255,215,0,.12);
}

.install-guide h2{
    text-align:center;
    color:#FFD700;
    font-size:40px;
    margin-bottom:40px;
    text-shadow:0 0 15px gold;
}

.install-steps{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(350px,1fr));
    gap:25px;
}

.step{
    display:flex;
    gap:20px;
    align-items:flex-start;
    background:#181818;
    padding:25px;
    border-radius:15px;
    border:1px solid rgba(255,215,0,.15);
    transition:.3s;
}

.step:hover{
    transform:translateY(-5px);
    border-color:#FFD700;
    box-shadow:0 0 20px rgba(255,215,0,.3);
}

.step span{
    min-width:55px;
    height:55px;
    border-radius:50%;
    background:#FFD700;
    color:#111;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:24px;
    font-weight:bold;
}

.step h3{
    color:#FFD700;
    margin-bottom:8px;
}

.step p{
    color:#ccc;
    line-height:1.6;
}

@media(max-width:768px){

.install-guide{
    padding:25px;
}

.install-guide h2{
    font-size:30px;
}

.install-steps{
    grid-template-columns:1fr;
}

}