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

body {
    background: #09090b;
    color: white;
    overflow-x: hidden;
}


/* NAV */

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 8%;
    background: rgba(9,9,11,.85);
    backdrop-filter: blur(15px);
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 10;
}

.logo img {
    width: 55px;
    height: 55px;
    object-fit: contain;
}

.links {
    display: flex;
    gap: 25px;
}

.links a {
    color: white;
    text-decoration: none;
    transition: .3s;
}

.links a:hover {
    color: #2563eb;
}



/* HERO */

.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 120px 8% 50px;
    gap: 50px;
}

.hero-text {
    max-width: 600px;
}

.hero-text h1 {
    font-size: 65px;
    line-height: 1.1;
}

.hero-text h1 span {
    color: #2563eb;
}

.hero-text p {
    color: #a1a1aa;
    font-size: 20px;
    margin: 25px 0 40px;
}



/* BUTTONS */

.hero-buttons {
    display: flex;
    gap: 20px;
}


.download-btn,
.discord-btn {

    display: inline-block;
    padding: 16px 35px;
    border-radius: 15px;

    color: white;
    text-decoration: none;
    font-weight: bold;

    transition: .35s ease;

    position: relative;
    overflow: hidden;

}


.download-btn {
    background: #2563eb;
}


.discord-btn {
    background: #5865F2;
}


.download-btn:hover,
.discord-btn:hover {

    transform: translateY(-6px) scale(1.05);

    box-shadow: 0 15px 40px rgba(37,99,235,.5);

}


.download-btn:active,
.discord-btn:active {

    transform: scale(.95);

}


.download-btn::before,
.discord-btn::before {

    content:"";

    position:absolute;

    top:0;

    left:-100%;

    width:100%;

    height:100%;

    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.35),
        transparent
    );

    transition:.5s;

}


.download-btn:hover::before,
.discord-btn:hover::before {

    left:100%;

}




/* APP CARD */

.app-card {

    width:380px;

    background:#141417;

    border-radius:25px;

    padding:35px;

    border:1px solid #27272a;

    transition:.3s;

}


.app-card:hover {

    transform:translateY(-10px);

    border-color:#2563eb;

}


.app-icon {

    width:80px;

}


.app-card h2 {

    margin:20px 0;

}


.stat {

    margin-bottom:25px;

}


.bar {

    height:12px;

    background:#27272a;

    border-radius:20px;

    overflow:hidden;

    margin-top:10px;

}


.fill {

    height:100%;

    background:#2563eb;

}


.cpu {
    width:75%;
}


.ram {
    width:55%;
}


.gpu {
    width:90%;
}





/* VERSION */

.version-card {

    padding:40px 8%;

}


.version-box {

    background:#141417;

    border:1px solid #27272a;

    border-radius:25px;

    padding:25px;

    display:flex;

    align-items:center;

    gap:25px;

}


.version-box img {

    width:80px;

}


.version-box p {

    color:#a1a1aa;

}


.version-box span {

    color:#2563eb;

}





/* TITLES */

.title {

    text-align:center;

    font-size:45px;

    margin-bottom:50px;

}





/* CARDS */

#features,
.why,
.screenshots,
.requirements,
.platforms,
.changelog {

    padding:100px 8%;

}


.cards,
.why-cards,
.platform-cards {

    display:grid;

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

    gap:25px;

}



.card,
.why-card,
.platform-card,
.requirement {

    background:#141417;

    padding:30px;

    border-radius:22px;

    border:1px solid #27272a;

    transition:.3s;

}



.card:hover,
.why-card:hover,
.platform-card:hover,
.requirement:hover {

    transform:translateY(-10px);

    border-color:#2563eb;

    box-shadow:0 20px 40px rgba(37,99,235,.2);

}


.card p,
.why-card p,
.platform-card p,
.requirement p {

    color:#a1a1aa;

    line-height:1.6;

}





/* SCREENSHOTS */

.shots {

    display:grid;

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

    gap:30px;

}


.shot {

    background:#141417;

    padding:20px;

    border-radius:22px;

}


.shot img {

    width:100%;

    border-radius:15px;

}





/* REQUIREMENTS */

.requirement-box {

    display:grid;

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

    gap:25px;

}





/* CHANGELOG */

.change-box {

    background:#141417;

    border-radius:25px;

    padding:35px;

    max-width:700px;

    margin:auto;

}


.change-box p {

    color:#a1a1aa;

    margin:12px 0;

}





/* DOWNLOAD */

.download {

    text-align:center;

    padding:120px 20px;

}


.download-card {

    background:#141417;

    border:1px solid #27272a;

    border-radius:30px;

    padding:50px;

    max-width:700px;

    margin:auto;

}


.download-card img {

    width:100px;

}


.download-card h2 {

    font-size:40px;

}


.download-card h3 {

    color:#2563eb;

}


.download-card p {

    color:#a1a1aa;

    margin:20px;

}


.download-info {

    display:grid;

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

    gap:20px;

    margin-bottom:35px;

}


.download-info div {

    background:#09090b;

    padding:20px;

    border-radius:18px;

}


.download-info span {

    color:#a1a1aa;

}





/* FOOTER */

footer {

    text-align:center;

    padding:40px;

    color:#71717a;

}





/* GLOW */

body::before {

    content:"";

    position:fixed;

    width:500px;

    height:500px;

    background:#2563eb;

    filter:blur(180px);

    opacity:.2;

    top:-150px;

    left:-150px;

    z-index:-1;

}





/* MOBILE */

@media(max-width:900px){

.hero {

    flex-direction:column;

    text-align:center;

}


.hero-text h1 {

    font-size:45px;

}


.app-card {

    width:100%;

}


.links {

    display:none;

}


.hero-buttons {

    flex-direction:column;

}


.version-box {

    flex-direction:column;

    text-align:center;

}


.download-info {

    grid-template-columns:1fr;

}

}