* {
    box-sizing:border-box;
}

html {
    scroll-behavior:smooth;
}

body {
    margin:0;
    font-family:Arial, Helvetica, sans-serif;
    background:#050505;
    color:white;
}


a {
    text-decoration:none;
    color:white;
}


/* HEADER */

.site-header {

    position:sticky;
    top:0;
    z-index:20;

    background:rgba(5,5,5,.92);
    backdrop-filter:blur(12px);

    border-bottom:1px solid #222;
}


.header-inner {

    width:100%;
    max-width:none;
    margin:0;

    padding:12px 70px;

    display:flex;
    align-items:center;
    justify-content:space-between;

}


.brand img {

    width:110px;

}


nav {

    display:flex;
    gap:35px;

}


nav a {

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

}


nav a:hover {

    color:#ff7a00;

}



.header-actions {

    display:flex;
    gap:12px;

}


/* BUTTONS */

.primary-btn,
.outline-btn {

    padding:13px 26px;
    border-radius:8px;
    font-weight:bold;

    display:inline-block;

}


.primary-btn {

    background:#ff7a00;

}


.primary-btn:hover {

    background:#ff9800;

}


.outline-btn {

    background:#111;
    border:1px solid #333;

}



/* HERO */

.hero {

    max-width:1600px;

    min-height:560px;

    margin:0 auto;

    padding:0;

    border-radius:20px;

    overflow:hidden;

    position:relative;

    background-image:
    linear-gradient(
        90deg,
        rgba(5,5,5,0.98) 0%,
        rgba(5,5,5,0.93) 24%,
        rgba(5,5,5,0.72) 42%,
        rgba(5,5,5,0.28) 62%,
        rgba(5,5,5,0.10) 100%
    ),
    url("assets/hero-banner.png");

    background-size:cover;

    background-position:right center;

    background-repeat:no-repeat;

}


.hero-overlay {

    width:100%;
    margin:0;
    padding:70px;

}


.hero-content {

    width:520px;
    max-width:520px;
    position:relative;
    z-index:2;

}


.hero h1 {

    font-size:64px;

    line-height:1.05;

    margin:0 0 25px;

}


.hero h1 span {

    color:#ff7a00;

}


.hero p {

    color:#ddd;

    font-size:19px;

    line-height:1.55;

    max-width:520px;

}


.hero-buttons {

    display:flex;

    gap:15px;

    margin-top:35px;

}


.hero-features {

    display:flex;

    gap:28px;

    margin-top:40px;

    flex-wrap:wrap;

}


.hero-features div {

    color:#ddd;

    font-size:15px;

    line-height:1.2;

    white-space:nowrap;

}


/* GAMES */


.games-section,
.features-section {

    width:100%;
    margin:0;
    padding:35px 70px;

}



h2 {

    font-size:40px;

    margin-bottom:35px;

}



.products {

    display:grid;

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

    gap:18px;

}



.game-card {

    height:330px;

    background-size:cover;

    background-position:center;

    border-radius:16px;

    border:1px solid #333;

    display:flex;

    align-items:flex-end;

    overflow:hidden;

}



.game-card-content {

    padding:22px;

}



.game-label {

    color:#ff7a00;

    font-size:11px;

    text-transform:uppercase;

}



.game-card h3 {

    font-size:22px;

    margin:10px 0;

}



.game-card p {

    color:#ccc;

    font-size:14px;

}



.price {

    font-size:25px;

    font-weight:bold;

    margin:15px 0;

}


.price span {

    font-size:13px;

    color:#aaa;

}


.game-card button {

    width:100%;

    background:#ff7a00;

    border:0;

    padding:12px;

    border-radius:8px;

    color:white;

    font-weight:bold;

}



/* FEATURES */


.feature-grid {

    display:grid;

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

    gap:20px;

}


.feature-card {

    background:#101010;

    border:1px solid #292929;

    padding:30px;

    border-radius:16px;

}



.feature-card h3 {

    color:#ff7a00;

}



.feature-card p {

    color:#aaa;

}



/* PANEL */


.panel-showcase {

    width:100%;

    max-width:none;

    margin:60px 0;

    padding:50px 70px;

    display:flex;

    gap:50px;

    align-items:center;

}



.panel-text {

    width:40%;

}



.label {

    color:#ff7a00;

    letter-spacing:4px;

    font-size:12px;

}



.panel-text h2 {

    font-size:48px;

}



.panel-text p {

    color:#aaa;

    line-height:1.7;

}



.panel-text li {

    margin:12px 0;

}



.panel-image {

    width:60%;

}



.panel-image img {

    width:100%;

    border-radius:18px;

    border:1px solid #333;

    box-shadow:
    0 20px 60px rgba(0,0,0,.7);

}



/* FOOTER */


footer {

    margin-top:80px;

    padding:60px 70px 30px;

    background:#080808;

    border-top:1px solid #222;

}


.footer-grid {

    max-width:1600px;

    margin:auto;

    display:grid;

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

    gap:40px;

}


footer a {

    display:block;

    color:#aaa;

    margin:10px 0;

}


.footer-bottom {

    text-align:center;

    margin-top:40px;

    color:#666;

}



/* MOBILE */

@media(max-width:1100px){

    .hero {

        flex-direction:column;

    }


    .hero-content,
    .hero-image {

        width:100%;

    }


    .products {

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

    }

}


@media(max-width:700px){

    nav {

        display:none;

    }


    .products,
    .feature-grid,
    .footer-grid {

        grid-template-columns:1fr;

    }


    .hero h1 {

        font-size:42px;

    }

}