:root{

--bg:#070b16;
--bg2:#0f1528;

--card:#121a30;
--card2:#18223f;

--pink:#ff2d8d;
--pink2:#ff5cab;

--blue:#28b7ff;
--blue2:#5fd0ff;

--text:#ffffff;
--muted:#bfc7da;

--border:rgba(255,255,255,.08);

--glass:rgba(255,255,255,.05);

--shadow:
0 10px 40px rgba(0,0,0,.35);

}

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

html{
scroll-behavior:smooth;
}

body{

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

background:var(--bg);

color:var(--text);

overflow-x:hidden;
}

body::before{

content:"";

position:fixed;

top:-200px;
left:-200px;

width:500px;
height:500px;

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

pointer-events:none;
z-index:-1;
}

body::after{

content:"";

position:fixed;

right:-200px;
bottom:-200px;

width:500px;
height:500px;

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

pointer-events:none;
z-index:-1;
}

img{
display:block;
width:100%;
}

a{
text-decoration:none;
}

.container{

width:min(1400px,92%);
margin:auto;
}

/* NAVBAR */

.navbar{

position:fixed;

top:0;
left:0;

width:100%;

z-index:999;

background:
rgba(7,11,22,.65);

backdrop-filter:
blur(16px);

border-bottom:
1px solid var(--border);
}

.nav-container{

display:flex;

justify-content:space-between;

align-items:center;

padding:18px 0;
}

.brand{

display:flex;
align-items:center;

gap:12px;

color:white;

font-weight:800;
}

.brand img{

width:42px;
height:42px;
object-fit:contain;
}

.nav-links{

display:flex;
gap:30px;
}

.nav-links a{

color:white;

opacity:.8;

transition:.25s;
}

.nav-links a:hover{

opacity:1;

color:var(--blue);
}

/* HERO */

.hero{

position:relative;

height:100vh;

display:flex;

justify-content:center;
align-items:center;

text-align:center;
}

.hero-background{

position:absolute;
inset:0;

background:
linear-gradient(
90deg,
rgba(5,8,18,.75),
rgba(5,8,18,.45)
),
url("../images/hero-combined.jpg");

background-size:cover;
background-position:center;
}

.hero-overlay{

position:absolute;
inset:0;

background:

radial-gradient(
circle at 25% 50%,
rgba(255,45,141,.15),
transparent 40%
),

radial-gradient(
circle at 75% 50%,
rgba(40,183,255,.15),
transparent 40%
);
}

.hero-content{
position:relative;
z-index:5;

max-width:1000px;

padding:20px;

margin-top:-150px;
}



.hero h1{
font-size:clamp(42px,6vw,88px);
font-weight:900;
line-height:1;
letter-spacing:-2px;
margin-bottom:24px;
text-shadow:
0 0 20px rgba(255,45,141,.25),
0 0 20px rgba(40,183,255,.15);
}

.hero p{

font-size:24px;

color:#d7dcef;

max-width:800px;

margin:auto;
}

.hero-buttons{

margin-top:35px;

display:flex;

justify-content:center;

gap:16px;

flex-wrap:wrap;
}
.hero-tag{

display:inline-block;

padding:10px 18px;

margin-bottom:24px;

border-radius:999px;

background:rgba(255,255,255,.06);

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

font-size:12px;

font-weight:700;

letter-spacing:2px;

color:#cfd7ea;

backdrop-filter:blur(10px);
}
.btn{

padding:18px 34px;

border-radius:16px;

font-weight:700;

transition:.25s;
}

.btn:hover{

transform:
translateY(-3px);
}

.btn-primary{

background:
linear-gradient(
135deg,
var(--pink),
var(--pink2)
);

color:white;

box-shadow:
0 0 35px rgba(255,45,141,.4);
}

.btn-secondary{

background:
rgba(255,255,255,.08);

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

color:white;

backdrop-filter:
blur(12px);
}

.steam-icon{
width:20px !important;
height:20px !important;
min-width:20px;
max-width:20px;
object-fit:contain;
display:block;
}


/* STATS */

.stats{

margin-top:-70px;

position:relative;

z-index:10;
}

.stats-grid{

display:grid;

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

gap:20px;
}

.stat-card{

padding:32px;

border-radius:24px;

background:
var(--glass);

backdrop-filter:
blur(20px);

border:
1px solid var(--border);

text-align:center;
}

.stat-card h2{

font-size:38px;

margin-bottom:10px;

background:
linear-gradient(
90deg,
var(--pink),
var(--blue)
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

.stat-card p{

color:var(--muted);
}

/* SECTIONS */

.section{

padding:120px 0;
}

.section-header.center{
text-align:center;
}

.section-header span{

display:inline-block;

color:var(--blue);

font-size:14px;

font-weight:700;

letter-spacing:2px;

margin-bottom:10px;
}

.section-header h2{

font-size:52px;

max-width:800px;
}

.center{
text-align:center;
}

/* FEATURED GAMES */

.featured-grid{

display:grid;

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

gap:30px;
}

.game-card{

background:
linear-gradient(
180deg,
var(--card2),
var(--card)
);

border-radius:28px;

overflow:hidden;

border:
1px solid var(--border);

transition:.3s;
}

.game-card:hover{

transform:
translateY(-8px);

box-shadow:
0 0 40px rgba(255,45,141,.12);
}

.game-card img{

height:300px;

object-fit:cover;
}

.game-content{

padding:28px;
}

.game-content h3{

font-size:28px;

margin-bottom:15px;
}

.game-content p{

color:var(--muted);

line-height:1.7;

margin-bottom:22px;
}

.game-link{

display:inline-flex;
align-items:center;
gap:8px;

padding:12px 18px;

border-radius:12px;

background:#171a21;

border:1px solid rgba(102,192,244,.25);

color:#66c0f4;

font-weight:600;

transition:.25s;
}

.game-link:hover{

transform:translateY(-2px);

border-color:#66c0f4;

box-shadow:
0 0 20px rgba(102,192,244,.2);
}

/* MOBILE GAMES */

.mobile-grid{

display:grid;

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

gap:24px;
}

.mobile-card{

background:
linear-gradient(
180deg,
var(--card2),
var(--card)
);

border-radius:22px;

overflow:hidden;

border:
1px solid var(--border);

transition:.25s;
}

.mobile-card:hover{

transform:
translateY(-6px);
}

.mobile-card img{

height:300px;

object-fit:cover;
}

.mobile-content{

padding:20px;
}

.mobile-content h3{

margin-bottom:14px;
}

.mobile-content a{

color:var(--blue);
}

/* ABOUT */

.about-grid{

display:grid;

grid-template-columns:
1.1fr .9fr;

gap:50px;

align-items:center;
}

.about-text span{

color:var(--pink);

font-size:14px;

font-weight:700;

letter-spacing:2px;
}

.about-text h2{

font-size:52px;

margin:18px 0 25px;
}

.about-text p{

color:var(--muted);

line-height:1.9;

margin-bottom:18px;
}

.about-image img{

border-radius:30px;

height:500px;

object-fit:cover;
}

/* CONTACT */
.contact-section .section-header{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
width:100%;
}

.contact-section .section-header h2{
margin:0 auto;
text-align:center;
width:100%;
}
.contact-grid{

display:grid;

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

gap:24px;
}

.contact-card{

padding:35px;

border-radius:24px;

background:
var(--glass);

border:
1px solid var(--border);

backdrop-filter:
blur(16px);

text-align:center;
}

.contact-card h3{

margin-bottom:10px;
}

.contact-card p{

color:var(--muted);
}

.contact-box{

max-width:800px;

margin:auto;

text-align:center;

padding:50px;

border-radius:28px;

background:rgba(255,255,255,.04);

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

backdrop-filter:blur(20px);
}

.contact-box h3{

font-size:36px;

margin-bottom:20px;
}

.contact-box p{

color:var(--muted);

line-height:1.8;

margin-bottom:25px;
}

.contact-email{

display:inline-block;

font-size:22px;

font-weight:700;

color:white;

margin-bottom:30px;
}

.social-links{

display:flex;

justify-content:center;

gap:15px;

flex-wrap:wrap;
}

.social-links a{

padding:12px 22px;

border-radius:12px;

background:#171a21;

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

color:white;

transition:.25s;
}

.social-links a:hover{

transform:translateY(-2px);

border-color:var(--blue);
}
/* FOOTER */

footer{

padding:35px 0;

border-top:
1px solid var(--border);
}

.footer-content{

display:flex;

justify-content:space-between;

align-items:center;
}

.footer-links{

display:flex;
gap:20px;
}

.footer-links a{

color:var(--muted);
}

/* RESPONSIVE */

@media(max-width:1200px){

.mobile-grid{

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

}

@media(max-width:900px){

.nav-links{
display:none;
}

.featured-grid{

grid-template-columns:1fr;
}

.about-grid{

grid-template-columns:1fr;
}

.contact-grid{

grid-template-columns:1fr;
}

.stats-grid{

grid-template-columns:
1fr 1fr;
}

.section-header h2{

font-size:40px;
}

.about-text h2{

font-size:40px;
}

.hero p{

font-size:20px;
}

}

@media(max-width:600px){

.mobile-grid{

grid-template-columns:1fr;
}

.stats-grid{

grid-template-columns:1fr;
}

.hero h1{

font-size:56px;
}

.hero-logo{

width:100px;
}

.section-header h2{

font-size:32px;
}

.about-text h2{

font-size:32px;
}

.footer-content{

flex-direction:column;

gap:15px;
}

}