*{

margin:0;
padding:0;
box-sizing:border-box;

}

body{

background:#050510;

font-family:Arial;

color:white;

overflow-x:hidden;

}

body::before{

content:"";

position:fixed;

width:800px;

height:800px;

background:

radial-gradient(
circle,
rgba(139,46,255,.25),
transparent
);

right:-200px;

top:-200px;

filter:blur(100px);

z-index:-1;

}

nav{

display:flex;

justify-content:space-between;

padding:30px 8%;

align-items:center;

}

ul{

display:flex;

gap:40px;

list-style:none;

}

button{

padding:14px 30px;

border:none;

border-radius:12px;

background:#8B2EFF;

color:white;

cursor:pointer;

}

.secondary{

background:transparent;

border:1px solid white;

}

.hero{

display:flex;

justify-content:space-between;

align-items:center;

padding:120px 8%;

min-height:90vh;

}

.left{

max-width:650px;

}

.live-badge{

display:inline-block;

padding:10px 20px;

border-radius:20px;

background:rgba(255,0,0,.2);

color:#ff5555;

margin-bottom:25px;

}

.hero h1{

font-size:120px;

}

.hero h2{

font-size:40px;

opacity:.8;

}

.hero p{

font-size:24px;

margin-top:30px;

line-height:1.6;

opacity:.8;

}

.buttons{

display:flex;

gap:20px;

margin-top:40px;

}

.stats{

display:flex;

gap:60px;

margin-top:60px;

}

.stream-card{

width:550px;

height:650px;

background:

linear-gradient(
145deg,
#121221,
#08080d
);

border-radius:30px;

display:flex;

justify-content:center;

align-items:center;

position:relative;

box-shadow:

0 0 80px rgba(
139,
46,
255,
.35
);

}

.stream-card img{

width:90%;

}

.stream-overlay{

position:absolute;

top:20px;

left:20px;

background:red;

padding:12px 20px;

border-radius:12px;

}

.live-section,
.schedule,
.clips,
.community{

padding:140px 8%;

}

.live-grid{

display:grid;

grid-template-columns:2fr 1fr;

gap:40px;

}

.twitch-player iframe{

width:100%;

height:500px;

border:none;

border-radius:25px;

}

.live-info,
.day,
.clip{

background:

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

border-radius:20px;

}

.live-info{

padding:40px;

}

.schedule-grid{

display:grid;

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

gap:25px;

margin-top:50px;

}

.day{

padding:40px;

text-align:center;

}

.clip-grid{

display:grid;

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

gap:30px;

margin-top:50px;

}

.clip{

height:220px;

display:flex;

justify-content:center;

align-items:center;

}

.community-buttons{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

margin-top:50px;

}

footer{

padding:80px;

text-align:center;

opacity:.7;

}

@media(max-width:1000px){

.hero{

flex-direction:column;

}

.live-grid{

grid-template-columns:1fr;

}

.schedule-grid{

grid-template-columns:1fr 1fr;

}

.clip-grid{

grid-template-columns:1fr;

}

}

/* LIVE PULSE */

.live-badge{

animation:

pulse 2s infinite;

}

@keyframes pulse{

0%{

box-shadow:

0 0 0px red;

}

50%{

box-shadow:

0 0 25px red;

}

100%{

box-shadow:

0 0 0px red;

}

}


/* FLOATING STREAM CARD */

.stream-card{

animation:

floatCard 6s ease-in-out infinite;

}

@keyframes floatCard{

0%{

transform:

translateY(0px);

}

50%{

transform:

translateY(-15px);

}

100%{

transform:

translateY(0px);

}

}


/* HOVER */

button{

transition:.3s;

}

button:hover{

transform:

translateY(-4px);

box-shadow:

0 0 30px rgba(
139,
46,
255,
.5
);

}


.clip,
.day,
.live-info{

transition:.3s;

}

.clip:hover,
.day:hover,
.live-info:hover{

transform:

translateY(-8px);

}


/* SCROLLBAR */

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#050510;

}

::-webkit-scrollbar-thumb{

background:#8B2EFF;

border-radius:20px;

}

.banner{

height:500px;

position:relative;

overflow:hidden;

}

.banner img{

width:100%;

height:100%;

object-fit:cover;

filter:

brightness(.45);

}

.banner-overlay{

position:absolute;

top:50%;

left:50%;

transform:

translate(
-50%,
-50%
);

text-align:center;

}

.banner-overlay h1{

font-size:110px;

}

.banner-overlay p{

font-size:30px;

opacity:.8;

}

.clip iframe{

width:100%;

height:100%;

border:none;

border-radius:20px;

}

html{

scroll-behavior:smooth;

}


nav{

position:sticky;

top:0;

backdrop-filter:

blur(20px);

background:

rgba(
5,
5,
10,
.8
);

z-index:999;

}


nav a{

color:white;

text-decoration:none;

}


.progress-bar{

position:fixed;

top:0;

left:0;

height:4px;

background:#8B2EFF;

width:0;

z-index:99999;

}


.top-btn{

position:fixed;

bottom:30px;

right:30px;

width:55px;

height:55px;

border-radius:50%;

display:none;

}


.top-btn.show{

display:block;

}


.gear,
.faq,
.cta{

padding:

140px 8%;

text-align:center;

}

.gear-grid{

display:grid;

grid-template-columns:

repeat(3,1fr);

gap:30px;

margin-top:60px;

}

.gear-card,
.faq-item{

padding:40px;

background:

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

border-radius:20px;

}

.faq{

max-width:1000px;

margin:auto;

}

.faq-item{

margin-top:25px;

}

.cta{

padding:

180px 8%;

}

.cta h1{

font-size:70px;

}

.cta p{

font-size:24px;

margin:30px 0;

opacity:.8;

}

footer{

padding:

120px;

text-align:center;

display:flex;

flex-direction:column;

gap:20px;

opacity:.8;

}


@media(max-width:1000px){

.gear-grid{

grid-template-columns:1fr;

}

}