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

body{
    font-family:Arial,Helvetica,sans-serif;
    background:#f8fafc;
    color:#1f2937;
}

.container{
    max-width:1200px;
    margin:0 auto;
    padding:0 20px;
}

/* HEADER */
.header{
    position:sticky;
    top:0;
    z-index:100;
    background:rgba(255,255,255,.9);
    backdrop-filter:blur(10px);
    box-shadow:0 2px 10px rgba(0,0,0,.05);
}
.nav{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:16px 0;
}
.logo img{height:80px}

.nav-links{
    list-style:none;
    display:flex;
    gap:24px;
}
.nav-links a{
    color:#1f2937;
    text-decoration:none;
    font-weight:bold;
    padding:8px 16px;
    border-radius:20px;
}
.nav-links a:hover{
    background:#e5e7eb;
}

/* HERO */
.hero{
    background:linear-gradient(135deg,#e0f2fe,#f0f9ff);
    color:#0f172a;
    text-align:center;
    padding:110px 0;
}
.hero h1{
    font-size:3.4rem;
    margin-bottom:20px;
}
.hero p{
    font-size:1.2rem;
    max-width:720px;
    margin:0 auto 40px;
    color:#334155;
}

.hero-cta{
    display:flex;
    justify-content:center;
    gap:20px;
    flex-wrap:wrap;
}

/* CTA */
.cta{
    background:#facc15;
    color:#1f2937;
    text-decoration:none;
    font-weight:bold;
    padding:14px 30px;
    border-radius:40px;
    box-shadow:0 10px 30px rgba(0,0,0,.15);
    transition:.25s;
}
.cta.secondary{
    background:#ffffff;
    border:1px solid #e5e7eb;
}
.cta:hover{
    transform:translateY(-3px);
}

/* GAMES */
.games{
    background:#ffffff;
    padding:90px 0;
}
.games h2{
    text-align:center;
    font-size:2.7rem;
    margin-bottom:60px;
}

.games-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:32px;
}

.game-card{
    background:#f9fafb;
    border-radius:26px;
    padding:26px;
    text-align:center;
    box-shadow:0 16px 36px rgba(0,0,0,.1);
    transition:.3s;
}
.game-card:hover{
    transform:translateY(-8px);
    box-shadow:0 24px 50px rgba(0,0,0,.15);
}
.game-card img{
    width:100%;
    border-radius:20px;
    margin-bottom:22px;
}
.game-card h3{
    font-size:1.6rem;
    margin-bottom:10px;
}
.game-card p{
    color:#6b7280;
    margin-bottom:24px;
}

/* PROMOS */
.promos{
    background:#ffffff;
    padding:90px 0;
}

.promo-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:50px;
    align-items:center;
    margin-bottom:100px;
}

.promo-row.reverse{
    direction:rtl;
}
.promo-row.reverse > *{
    direction:ltr;
}

.promo-image{
    border-radius:26px;
    overflow:hidden;
    background:#f1f5f9;
    box-shadow:0 20px 45px rgba(0,0,0,.15);
    display:flex;
    align-items:center;
    justify-content:center;
}

.promo-image.portrait{
    aspect-ratio:4 / 5;
    max-width:420px;
    margin:0 auto;
}

.promo-image.portrait img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.promo-image.landscape{
    aspect-ratio:16 / 9;
    background:#000;
}
.promo-image.landscape img{
    width:100%;
    height:100%;
    object-fit:contain;
}

.promo-text h2{
    font-size:2.4rem;
    margin-bottom:16px;
}
.promo-text p{
    font-size:1.15rem;
    color:#475569;
    margin-bottom:28px;
    max-width:520px;
}

/* DETAILS */
.details{
    background:#eff6ff;
    color:#1f2937;
    padding:90px 0;
}
.details h2{
    text-align:center;
    font-size:2.6rem;
    margin-bottom:18px;
}
.details p{
    text-align:center;
    max-width:720px;
    margin:0 auto 50px;
    color:#475569;
}
.details-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:28px;
}
.detail-card{
    background:#ffffff;
    border-radius:24px;
    padding:18px;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
}
.detail-card img{
    width:100%;
    border-radius:18px;
}

/* ABOUT */
.about{
    background:#ffffff;
    padding:90px 0;
    text-align:center;
}
.about h2{
    font-size:2.6rem;
    margin-bottom:20px;
}
.about p{
    max-width:820px;
    margin:0 auto;
    font-size:1.1rem;
    color:#4b5563;
}

/* FOOTER */
.footer{
    background:#e5e7eb;
    color:#374151;
    text-align:center;
    padding:50px 20px;
}
.footer a{
    color:#111827;
    text-decoration:none;
    margin:0 12px;
}
.footer a:hover{
    text-decoration:underline;
}
.footer p{
    margin-top:10px;
}

/* RESPONSIVE */
@media(max-width:900px){
    .promo-row,
    .promo-row.reverse{
        grid-template-columns:1fr;
        direction:ltr;
    }
}

@media(max-width:768px){
    .hero h1{font-size:2.4rem}
    .logo img{height:60px}
    .nav-links{display:none}
}




/* ===== MIXED GAMES SECTION ===== */

.games{
    background:#ffffff;
    padding:90px 0;
}

.games h2{
    text-align:center;
    font-size:2.7rem;
    margin-bottom:70px;
}

/* FEATURED LANDSCAPE */
.featured-game{
    display:grid;
    grid-template-columns:1.3fr 0.7fr;
    gap:50px;
    align-items:center;
    margin-bottom:90px;
}

.featured-image{
    aspect-ratio:16 / 9;
    background:#000;
    border-radius:26px;
    overflow:hidden;
    box-shadow:0 22px 50px rgba(0,0,0,.18);
}

.featured-image img{
    width:100%;
    height:100%;
    object-fit:contain;
}

.featured-content h3{
    font-size:2.2rem;
    margin-bottom:14px;
}

.featured-content p{
    font-size:1.15rem;
    color:#475569;
    margin-bottom:26px;
    max-width:480px;
}

/* PORTRAIT GRID */
.portrait-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:40px;
}

/* FIX: PORTRAIT CARD */

.portrait-card{
    background:#ffffff;
    border-radius:28px;
    padding:0;
    text-align:center;
    box-shadow:0 14px 34px rgba(0,0,0,.12);
    overflow:hidden;
    transition:.3s;
}

.portrait-card:hover{
    transform:translateY(-6px);
    box-shadow:0 22px 50px rgba(0,0,0,.18);
}

/* IMAGE */
.portrait-card img{
    width:100%;
    aspect-ratio:3 / 4;
    object-fit:cover;
    display:block;
}

/* CONTENT */
.portrait-card h3{
    font-size:1.5rem;
    margin:22px 20px 10px;
}

.portrait-card p{
    color:#6b7280;
    margin:0 22px 22px;
    font-size:1rem;
}

.portrait-card .cta{
    margin:0 auto 26px;
    display:inline-block;
}
/* RESPONSIVE */
@media(max-width:900px){
    .featured-game{
        grid-template-columns:1fr;
    }
}

/* SECTION TITLE – OUR GAMES */

.promos > .container > h2{
    text-align:center;
    font-size:3.2rem;
    font-weight:800;
    margin-bottom:80px;
    letter-spacing:-0.5px;
    color:#0f172a;
}