*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial,Helvetica,sans-serif;
}


body{

background:#050505;
color:white;

}



header{

height:100vh;

display:flex;
flex-direction:column;
justify-content:center;
align-items:center;

text-align:center;

padding:20px;

}



.logo img{

width:180px;
height:180px;

object-fit:contain;

animation:float 3s infinite ease-in-out;

}



@keyframes float{

50%{
transform:translateY(-15px);
}

}



h1{

font-size:70px;
margin:25px;

}



header p{

font-size:22px;
color:#aaa;

}



.buttons{

margin-top:40px;

}



.btn{

display:inline-block;

padding:15px 35px;

margin:10px;

border-radius:12px;

text-decoration:none;

font-weight:bold;

transition:.3s;

}



.btn:hover{

transform:scale(1.08);

}



.download{

background:white;
color:black;

}



.discord{

border:2px solid white;
color:white;

}





section{

max-width:1100px;

margin:auto;

padding:80px 20px;

}



h2{

font-size:40px;

margin-bottom:30px;

}



p{

color:#ccc;

font-size:18px;

line-height:1.7;

}



.cards{

display:grid;

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

gap:25px;

}



.card{

background:#111;

border:1px solid #333;

padding:30px;

border-radius:18px;

transition:.3s;

}



.card:hover{

transform:translateY(-10px);

border-color:white;

}





.hidden{

opacity:0;

transform:translateY(40px);

transition:1s;

}



.show{

opacity:1;

transform:translateY(0);

}




footer{

text-align:center;

padding:30px;

border-top:1px solid #222;

color:#777;

}


.screen{

width:100%;

border-radius:15px;

border:1px solid #333;

margin-bottom:15px;

transition:.3s;

}


.screen:hover{

transform:scale(1.03);

}


/* ===== LOADER ===== */

#loader{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

background:#050505;

display:flex;
flex-direction:column;
justify-content:center;
align-items:center;

z-index:9999;

transition:
opacity 0.8s ease,
filter 0.8s ease;

}


#loader img{

width:170px;

animation:pulse 1.5s;

}


#loader h2{

margin-top:20px;

font-size:38px;

letter-spacing:2px;

}


#loader p{

margin-top:10px;

color:#9b9b9b;

font-size:18px;

}



@keyframes pulse{

0%{

transform:scale(1);

}

50%{

transform:scale(1.08);

}

100%{

transform:scale(1);

}

}

/* Pasek ładowania */

.loading-bar{

width:260px;
height:10px;

background:#222;

border-radius:20px;

margin-top:20px;

overflow:hidden;

border:1px solid #333;

}

.loading-progress{

width:0%;

height:100%;

background:linear-gradient(90deg,#00b7ff,#ffffff);

border-radius:20px;

animation:loading 1.5s linear forwards;

}

@keyframes loading{

0%{
width:0%;
}

100%{
width:100%;
}

}

#loader.fade-out{

opacity:0;

filter:blur(8px);

pointer-events:none;

}

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

.download-page {

    max-width: 1000px;

    margin: 0 auto;

    padding: 70px 25px;

    text-align: center;

}


.download-logo img {

    width: 130px;

    margin-bottom: 20px;

}


.download-page h1 {

    font-size: 48px;

    margin-bottom: 10px;

}


.download-page h1 span {

    color: #00b7ff;

}


.download-description {

    color: #aaa;

    font-size: 18px;

    margin-bottom: 50px;

}


.download-page h2 {

    font-size: 28px;

    margin-bottom: 30px;

}


/* PLATFORM CARDS */

.download-cards {

    display: grid;

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

    gap: 25px;

}


.download-card {

    background: #0b0f13;

    border: 1px solid #202b34;

    border-radius: 18px;

    padding: 35px;

    color: white;

    cursor: pointer;

    transition: .3s;

    font-family: inherit;

}


.download-card:hover {

    transform: translateY(-7px);

    border-color: #00b7ff;

    box-shadow: 0 10px 35px rgba(0,183,255,.12);

}


.download-icon {

    font-size: 55px;

    margin-bottom: 15px;

}


.download-card h3 {

    font-size: 28px;

    margin: 10px 0;

}


.download-card p {

    color: #999;

    line-height: 1.6;

}


.card-button {

    display: inline-block;

    margin-top: 20px;

    padding: 12px 25px;

    border-radius: 10px;

    background: #00b7ff;

    color: #050505;

    font-weight: bold;

}


.card-button.disabled {

    background: #252a2e;

    color: #888;

}


/* WINDOWS */

.download-section {

    display: none;

}


.download-section.download-show {

    animation: downloadFade .35s ease;

}


@keyframes downloadFade {

    from {

        opacity: 0;

        transform: translateY(15px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}


.back-button {

    display: inline-block;

    background: transparent;

    border: 1px solid #303b44;

    color: #ccc;

    padding: 10px 20px;

    border-radius: 10px;

    cursor: pointer;

    margin-bottom: 35px;

    transition: .3s;

}


.back-button:hover {

    border-color: #00b7ff;

    color: #00b7ff;

}


.windows-cards {

    display: grid;

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

    gap: 25px;

}


.windows-card {

    background: #0b0f13;

    border: 1px solid #202b34;

    border-radius: 18px;

    padding: 30px;

    transition: .3s;

}


.windows-card:hover {

    transform: translateY(-5px);

    border-color: #00b7ff;

}


.windows-icon {

    font-size: 45px;

}


.windows-card h3 {

    font-size: 25px;

}


.windows-card p {

    color: #999;

}


.version {

    display: inline-block;

    padding: 6px 12px;

    border-radius: 8px;

    background: #102c3a;

    color: #00b7ff;

    font-size: 13px;

    margin: 10px;

}


.download-button {

    display: block;

    margin-top: 20px;

    padding: 14px;

    border-radius: 10px;

    background: #00b7ff;

    color: #050505;

    text-decoration: none;

    font-weight: bold;

    transition: .3s;

}


.download-button:hover {

    transform: scale(1.03);

    box-shadow: 0 0 20px rgba(0,183,255,.25);

}


/* ANDROID */

.android-box {

    background: #0b0f13;

    border: 1px solid #202b34;

    border-radius: 20px;

    padding: 50px 30px;

}


.android-big-icon {

    font-size: 70px;

}


.coming-soon {

    display: inline-block;

    margin: 20px;

    padding: 10px 20px;

    border-radius: 10px;

    background: #102c3a;

    color: #00b7ff;

    font-weight: bold;

}


.small-text {

    color: #777;

}


/* DISCORD */

.download-discord {

    margin-top: 70px;

    padding-top: 30px;

    border-top: 1px solid #181d21;

}


/* MOBILE */

@media (max-width: 700px) {

    .download-page {

        padding: 40px 15px;

    }

    .download-page h1 {

        font-size: 36px;

    }

    .download-cards,
    .windows-cards {

        grid-template-columns: 1fr;

    }

}