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

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Inter',sans-serif;

    background:#0b1118;

    color:#F2F4F8;

}

/* ===== NAVBAR ===== */

header{

    position:fixed;

    width:100%;

    top:0;

    left:0;

    z-index:1000;

    background:rgba(10,15,22,.55);

    backdrop-filter:blur(14px);

    border-bottom:1px solid rgba(255,255,255,.08);

}

.navbar{

    max-width:1400px;

    margin:auto;

    height:78px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 40px;

}

.logo{

    font-size:30px;

    font-weight:800;

    color:#ffffff;

    letter-spacing:2px;

}

.navbar ul{

    display:flex;

    list-style:none;

    gap:36px;

}

.navbar a{

    color:#c8d0da;

    text-decoration:none;

    transition:.3s;

}

.navbar a:hover{

    color:#1a9fff;

}

/* ===== BUTTONS ===== */

.steamButton,
.mainButton{

display:inline-block;

padding:18px 46px;

font-size:21px;

font-weight:700;

text-decoration:none;

border-radius:12px;

/* background:linear-gradient( */
/* 45deg, */
/* #1A9FFF, */
/* #33B5FF */
/* ); */

background:#1b2838;
border:1px solid #C7A24A;

color:white;

transition:.3s;

box-shadow:

0 15px 45px rgba(26,159,255,.30);

}

.steamButton:hover,
.mainButton:hover{

transform:translateY(-4px);

box-shadow:

0 25px 60px rgba(26,159,255,.45);

}

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

.hero{

    min-height:100vh;

background-image:

/* linear-gradient( */

/* rgba(5,8,12,.35), */

/* rgba(5,8,12,.82) */

/* ), */

url("images/Library_Hero_3000x1240_empty.jpg");

    background-position:center center;
    background-size:cover;
    background-repeat:no-repeat;

    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;

    overflow:hidden;

    position:relative;
}

.hero::before{

    content:"";

    position:absolute;

    width:900px;
    height:900px;

    background:radial-gradient(circle,
        rgba(26,159,255,.18),
        transparent 70%);

    top:-250px;
    left:50%;

    transform:translateX(-50%);

    pointer-events:none;

}

.overlay{

    position:relative;

    z-index:2;

    width:min(900px,90%);

}

.overlay h1{

    font-size:92px;

    font-weight:800;

    letter-spacing:3px;

    text-transform:uppercase;

    margin-bottom:20px;

    text-shadow:

        0 3px 15px rgba(0,0,0,.5),

        0 15px 60px rgba(0,0,0,.35);

}

.overlay p{

    font-size:30px;

    color:#c8d3de;

    line-height:1.7;

    margin-bottom:45px;

    max-width:700px;

    margin-left:auto;

    margin-right:auto;

}

/* ===== SECTIONS ===== */

section{

    max-width:1300px;

    margin:auto;

    padding:120px 40px;

}

section h2{

    font-size:46px;

    margin-bottom:35px;

}

section p{

    font-size:20px;

    line-height:1.8;

    color:#b8c3ce;

}

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

footer{

    border-top:1px solid rgba(255,255,255,.08);

    padding:50px;

    text-align:center;

    color:#8d99a8;

}

.scrollDown{

    margin-top:70px;

    font-size:38px;

    animation:bounce 2s infinite;

    opacity:.7;

}

@keyframes bounce{

    0%,20%,50%,80%,100%{
    
        transform:translateY(0);
    
    }
    
    40%{
    
        transform:translateY(10px);
    
    }
    
    60%{
    
        transform:translateY(5px);
    
    }

}

/* ---------- Section titles ---------- */

.section-title{

    text-align:center;

    margin-bottom:60px;

}

.section-title span{

    color:#C7A24A;

    letter-spacing:4px;

    font-size:13px;

    font-weight:700;

}

.section-title h2{

    margin-top:10px;

    font-size:48px;

}

/* ---------- Trailer ---------- */

.video-wrapper{

    max-width:1100px;

    margin:auto;

    border-radius:18px;

    overflow:hidden;

    box-shadow:0 30px 70px rgba(0,0,0,.45);

}

.video-wrapper video{

    width:100%;

    display:block;

}

/* ---------- Features ---------- */

.feature-grid{

    display:grid;

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

    gap:30px;

}

.feature-card{

    background:#151D2A;

    border:1px solid rgba(255,255,255,.06);

    border-radius:18px;

    padding:35px;

    transition:.3s;

}

.feature-card:hover{

    transform:translateY(-8px);

    border-color:#1A9FFF;

    box-shadow:0 20px 50px rgba(26,159,255,.18);

}

.feature-card .icon{

    font-size:46px;

    margin-bottom:20px;

}

.feature-card h3{

    margin-bottom:15px;

}

.feature-card p{

    color:#B8C3CE;

    line-height:1.7;

}

/* ========================= */

.gallery{

max-width:1200px;

margin:auto;

}

.gallery-main{

margin-bottom:25px;

}

.gallery-main img{

width:100%;

border-radius:18px;

display:block;

box-shadow:0 25px 60px rgba(0,0,0,.45);

}

.gallery-thumbs{

display:grid;

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

gap:15px;

}

.gallery-thumbs img{

width:100%;

border-radius:12px;

cursor:pointer;

opacity:.65;

transition:.25s;

border:2px solid transparent;

}

.gallery-thumbs img:hover{

opacity:1;

border-color:#1A9FFF;

transform:scale(1.04);

}
/* ========================= */

header{

    transition:.35s;

}

header.scrolled{

    background:rgba(8,12,18,.92);

    box-shadow:0 8px 35px rgba(0,0,0,.35);

}

.hidden{

    opacity:0;

    transform:translateY(80px);

    transition:1s;

}

.show{

    opacity:1;

    transform:translateY(0);

}

.heroLogo{

width:min(720px,90%);

margin-bottom:25px;

filter:

drop-shadow(0 10px 40px rgba(0,0,0,.5));

}

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

.requirements-grid{

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(420px,1fr));
    gap:40px;

}

.requirement-card{

    background:#151D2A;

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

    border-radius:20px;

    padding:35px;

    transition:.3s;

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

}

.requirement-card:hover{

    transform:translateY(-6px);

    border-color:#1A9FFF;

    box-shadow:0 20px 55px rgba(26,159,255,.18);

}

.requirement-card.recommended{

    border-color:#C7A24A;

}

.requirement-card h3{

    font-size:30px;

    margin-bottom:25px;

    color:#ffffff;

}

.requirement-card ul{

    list-style:none;

}

.requirement-card li{

    display:flex;

    justify-content:space-between;

    gap:20px;

    padding:14px 0;

    border-bottom:1px solid rgba(255,255,255,.06);

}

.requirement-card li:last-child{

    border-bottom:none;

}

.requirement-card strong{

    color:#C7A24A;

    min-width:110px;

}

.requirement-card span{

    color:#d2dae3;

    text-align:right;

}

/* ============================= */
/* ADDITIONAL INFO */
/* ============================= */

.requirements-note{

    margin-top:45px;

    display:flex;

    align-items:flex-start;

    gap:20px;

    padding:25px 30px;

    border-radius:18px;

    background:rgba(199,162,74,.08);

    border:1px solid rgba(199,162,74,.25);

}

.note-icon{

    font-size:34px;

    line-height:1;

    flex-shrink:0;

}

.requirements-note h4{

    margin:0 0 10px;

    color:#C7A24A;

    font-size:20px;

    font-weight:700;

}

.requirements-note p{

    margin:0;

    color:#D5DCE5;

    line-height:1.8;

}