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

html{
scroll-behavior:smooth;
}

body{

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

background:#07111f;

color:#fff;

overflow-x:hidden;

position:relative;

min-height:100vh;

}

a{

text-decoration:none;

color:inherit;

}

button{

font-family:inherit;

cursor:pointer;

border:none;

}

.bg{

position:fixed;

inset:0;

background:
radial-gradient(circle at top,#1976ff33,transparent 35%),
radial-gradient(circle at bottom,#0d47a133,transparent 30%),
linear-gradient(180deg,#08131f,#091a2d,#07111f);

z-index:-2;

}

.bg::before{

content:"";

position:absolute;

width:600px;

height:600px;

border-radius:50%;

background:#1565ff22;

filter:blur(120px);

top:-250px;

left:-180px;

animation:float1 10s ease-in-out infinite;

}

.bg::after{

content:"";

position:absolute;

width:500px;

height:500px;

border-radius:50%;

background:#00b0ff22;

filter:blur(120px);

bottom:-220px;

right:-180px;

animation:float2 12s ease-in-out infinite;

}

@keyframes float1{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(50px);

}

}

@keyframes float2{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-40px);

}

}

header{

padding:35px 20px;

display:flex;

justify-content:center;

align-items:center;

}

.logoBox{

width:92px;

height:92px;

border-radius:28px;

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

backdrop-filter:blur(18px);

display:flex;

align-items:center;

justify-content:center;

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

}

.logo{

width:64px;

height:64px;

object-fit:contain;

}

.hero{

padding:20px;

display:flex;

justify-content:center;

}

.glass{

max-width:650px;

width:100%;

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

backdrop-filter:blur(20px);

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

border-radius:30px;

padding:35px;

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

text-align:center;

}

.badge{

display:inline-block;

padding:8px 16px;

border-radius:50px;

background:#1565ff;

font-size:14px;

margin-bottom:20px;

font-weight:700;

}

.hero h1{

font-size:42px;

font-weight:800;

line-height:1.3;

margin-bottom:18px;

}

.hero p{

font-size:18px;

line-height:1.8;

opacity:.9;

margin-bottom:35px;

}
.mainBtn{

display:inline-flex;

align-items:center;

justify-content:center;

gap:10px;

padding:16px 35px;

border-radius:50px;

background:linear-gradient(135deg,#1565ff,#00b0ff);

color:#fff;

font-size:18px;

font-weight:800;

box-shadow:0 15px 35px rgba(0,140,255,.35);

transition:.3s;

}


.mainBtn:hover{

transform:translateY(-4px);

box-shadow:0 20px 45px rgba(0,140,255,.55);

}


.features{

display:grid;

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

gap:20px;

max-width:1000px;

width:100%;

margin:40px auto;

padding:20px;

}


.feature{

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

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

backdrop-filter:blur(18px);

border-radius:25px;

padding:25px;

text-align:center;

transition:.3s;

}


.feature:hover{

transform:translateY(-8px);

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

}


.feature .icon{

width:60px;

height:60px;

margin:auto;

border-radius:20px;

display:flex;

align-items:center;

justify-content:center;

font-size:30px;

background:linear-gradient(135deg,#1565ff,#00b0ff);

margin-bottom:15px;

}


.feature h3{

font-size:20px;

margin-bottom:10px;

font-weight:800;

}


.feature p{

font-size:15px;

opacity:.8;

line-height:1.7;

}


.games{

max-width:1100px;

margin:30px auto;

padding:20px;

}


.sectionTitle{

text-align:center;

font-size:32px;

font-weight:800;

margin-bottom:30px;

}


.gamesGrid{

display:grid;

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

gap:18px;

}


.gameCard{

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

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

border-radius:25px;

overflow:hidden;

transition:.3s;

}


.gameCard:hover{

transform:translateY(-8px) scale(1.02);

}


.gameCard img{

width:100%;

height:170px;

object-fit:cover;

display:block;

}


.gameInfo{

padding:18px;

text-align:center;

}


.gameInfo h3{

font-size:18px;

margin-bottom:8px;

}


.gameInfo span{

font-size:14px;

opacity:.7;

}


.installBox{

max-width:650px;

margin:50px auto;

padding:30px 20px;

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

border-radius:30px;

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

backdrop-filter:blur(20px);

text-align:center;

}


.installBox h2{

font-size:30px;

margin-bottom:15px;

}


.installBox p{

opacity:.85;

line-height:1.7;

margin-bottom:25px;

}


.downloadBtn{

display:inline-flex;

padding:16px 45px;

border-radius:50px;

background:#00c853;

font-size:18px;

font-weight:800;

color:white;

box-shadow:0 15px 35px rgba(0,200,83,.35);

transition:.3s;

}


.downloadBtn:hover{

transform:scale(1.05);

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


footer{

max-width:1100px;

margin:60px auto 30px;

padding:30px 20px;

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

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

border-radius:30px;

backdrop-filter:blur(20px);

text-align:center;

}


footer .logoFooter{

width:55px;

height:55px;

margin-bottom:15px;

}


footer p{

font-size:14px;

opacity:.7;

line-height:1.8;

}


.footerLinks{

display:flex;

justify-content:center;

gap:25px;

margin-top:20px;

flex-wrap:wrap;

}


.footerLinks a{

font-size:14px;

opacity:.8;

transition:.3s;

}


.footerLinks a:hover{

color:#00b0ff;

opacity:1;

}


/* =========================
   ANIMATIONS
========================= */


.fadeUp{

animation:fadeUp .8s ease forwards;

opacity:0;

}


@keyframes fadeUp{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:translateY(0);

}

}



.pulse{

animation:pulse 2s infinite;

}


@keyframes pulse{

0%{

box-shadow:0 0 0 0 rgba(0,176,255,.5);

}

70%{

box-shadow:0 0 0 20px rgba(0,176,255,0);

}

100%{

box-shadow:0 0 0 0 rgba(0,176,255,0);

}

}



.shine{

position:relative;

overflow:hidden;

}


.shine::before{

content:"";

position:absolute;

top:0;

left:-100%;

width:50%;

height:100%;

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

transform:skewX(-25deg);

animation:shine 3s infinite;

}


@keyframes shine{

0%{

left:-100%;

}

50%{

left:150%;

}

100%{

left:150%;

}

}



/* =========================
   TABLET
========================= */


@media(max-width:900px){


.hero h1{

font-size:34px;

}


.features{

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

}


.gamesGrid{

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

}


.glass{

padding:30px 20px;

}


.sectionTitle{

font-size:28px;

}


}



/* =========================
   MOBILE
========================= */


@media(max-width:600px){


header{

padding:25px 15px;

}


.logoBox{

width:80px;

height:80px;

border-radius:22px;

}


.logo{

width:55px;

height:55px;

}


.hero{

padding:15px;

}


.glass{

border-radius:25px;

padding:25px 18px;

}


.badge{

font-size:12px;

padding:7px 14px;

}


.hero h1{

font-size:27px;

line-height:1.4;

}


.hero p{

font-size:15px;

}


.mainBtn{

width:100%;

padding:15px;

font-size:16px;

}



.features{

grid-template-columns:1fr;

padding:15px;

margin:25px auto;

}


.feature{

padding:22px;

}


.games{

padding:15px;

}


.gamesGrid{

grid-template-columns:1fr;

gap:15px;

}


.gameCard img{

height:200px;

}


.sectionTitle{

font-size:24px;

}



.installBox{

margin:35px 15px;

padding:25px 18px;

}


.installBox h2{

font-size:24px;

}



.downloadBtn{

width:100%;

padding:15px;

}



footer{

margin:40px 15px 20px;

padding:25px 15px;

}



.footerLinks{

gap:15px;

}


}



/* =========================
   SMALL PHONES
========================= */


@media(max-width:380px){


.hero h1{

font-size:24px;

}


.gameCard img{

height:170px;

}


.feature h3{

font-size:18px;

}


}
/* =====================
   APP HEADER
===================== */


.appHeader{

position:sticky;

top:0;

z-index:100;

height:70px;

padding:0 20px;

display:flex;

align-items:center;

justify-content:space-between;

background:#06152b;

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

}


.brand{

display:flex;

align-items:center;

gap:10px;

font-size:22px;

font-weight:800;

}


.brand img{

width:42px;

height:42px;

object-fit:contain;

}



.headerActions{

display:flex;

gap:10px;

}



.loginBtn{

padding:10px 20px;

border-radius:25px;

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

font-weight:700;

}



.registerBtn{

padding:10px 22px;

border-radius:25px;

background:#00c853;

font-weight:800;

}



/* =====================
 MOBILE BOTTOM NAV
===================== */


.bottomNav{

display:none;

}




@media(max-width:600px){


body{

padding-bottom:80px;

}



.bottomNav{


display:flex;

position:fixed;

bottom:0;

left:0;

right:0;

height:70px;

background:#06152b;

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

z-index:999;

justify-content:space-around;

align-items:center;

}



.bottomNav a{


display:flex;

flex-direction:column;

align-items:center;

gap:5px;

font-size:11px;

opacity:.7;

}



.bottomNav span{

font-size:22px;

}



.bottomNav .active{

color:#00c853;

opacity:1;

font-weight:800;

}




.appHeader{

height:65px;

padding:0 12px;

}



.brand{

font-size:18px;

}



.brand img{

width:35px;

height:35px;

}



.loginBtn{

padding:8px 14px;

font-size:13px;

}



.registerBtn{

padding:8px 15px;

font-size:13px;

}


}
/* ======================
   BANNER SLIDER
====================== */


.bannerSlider{

width:100%;

max-width:1100px;

margin:20px auto;

overflow:hidden;

padding:0 15px;

}



.bannerTrack{

display:flex;

gap:20px;

animation:slideBanner 15s infinite;

}



.bannerCard{

min-width:100%;

height:300px;

position:relative;

border-radius:30px;

overflow:hidden;

}



.bannerCard img{

width:100%;

height:100%;

object-fit:cover;

}



.bannerOverlay{

position:absolute;

inset:0;

display:flex;

flex-direction:column;

justify-content:center;

padding:35px;

background:
linear-gradient(
90deg,
rgba(0,0,0,.75),
transparent
);

}



.bannerOverlay h2{

font-size:36px;

font-weight:900;

}



.bannerOverlay p{

font-size:18px;

margin:15px 0;

}



.bannerOverlay a{

background:#00c853;

padding:14px 35px;

border-radius:30px;

width:max-content;

font-weight:800;

}



@keyframes slideBanner{


0%,25%{

transform:translateX(0);

}


33%,58%{

transform:translateX(-102%);

}


66%,90%{

transform:translateX(-204%);

}


100%{

transform:translateX(0);

}


}



@media(max-width:600px){


.bannerCard{

height:210px;

}


.bannerOverlay{

padding:20px;

}


.bannerOverlay h2{

font-size:24px;

}


.bannerOverlay p{

font-size:14px;

}



}
/* ======================
   APP GAME CARDS
====================== */


.appGames{

max-width:1100px;

margin:30px auto;

padding:0 15px;

}


.appGames h2{

font-size:28px;

margin-bottom:20px;

}



.gameScroll{

display:flex;

gap:15px;

overflow-x:auto;

scrollbar-width:none;

}



.gameScroll::-webkit-scrollbar{

display:none;

}



.appGameCard{

min-width:180px;

height:130px;

border-radius:22px;

overflow:hidden;

position:relative;

background:#10243d;

}



.appGameCard img{

width:100%;

height:100%;

object-fit:cover;

}



.appGameCard div{

position:absolute;

bottom:0;

left:0;

right:0;

padding:12px;

background:linear-gradient(
transparent,
rgba(0,0,0,.8)
);

font-size:17px;

font-weight:800;

}



@media(max-width:600px){


.appGameCard{

min-width:150px;

height:110px;

}


}