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

html{
scroll-behavior:smooth;
}

body{
background:#07070b;
color:white;
font-family:'Inter',sans-serif;
overflow-x:hidden;
}

/* =========================
BACKGROUND
========================= */

body::before{
content:"";
position:fixed;
inset:0;

background:
linear-gradient(rgba(7,7,11,.86),rgba(7,7,11,.92)),
url("bg.jpeg");

background-size:cover;
background-position:center;
z-index:-2;
}

body::after{
content:"";
position:fixed;
inset:0;

background:
radial-gradient(circle at top left, rgba(123,44,255,.16), transparent 35%),
radial-gradient(circle at bottom right, rgba(255,45,85,.16), transparent 35%);

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

/* =========================
HERO
========================= */

.hero{
min-height:100vh;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
position:relative;
padding:40px 20px;
}

.hero-content{
position:relative;
z-index:2;
max-width:1000px;
}

.logo{
width:350px;
margin-bottom:25px;

filter:
drop-shadow(0 0 15px rgba(123,44,255,.5))
drop-shadow(0 0 25px rgba(255,45,85,.25));
}

.hero h1{
font-family:'Anton',sans-serif;

font-size:100px;
line-height:.95;
letter-spacing:2px;

background:linear-gradient(90deg,#7b2cff,#ff2d55);

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

text-shadow:
0 0 20px rgba(123,44,255,.45),
0 0 40px rgba(255,45,85,.2);
}

.subtitle{
margin-top:25px;
font-size:20px;
opacity:.78;
letter-spacing:.5px;
}

/* =========================
BUTTONS
========================= */

.hero-buttons{
display:flex;
justify-content:center;
gap:20px;
margin-top:45px;
flex-wrap:wrap;
}

.btn{
padding:15px 30px;
border-radius:14px;

text-decoration:none;
font-weight:700;
font-size:15px;

transition:.25s ease;
}

.btn.primary{
background:linear-gradient(90deg,#7b2cff,#ff2d55);
color:white;

box-shadow:
0 0 15px rgba(123,44,255,.35),
0 0 25px rgba(255,45,85,.18);
}

.btn.secondary{
background:#111119;
border:1px solid rgba(123,44,255,.45);
color:white;
}

.btn:hover{
transform:translateY(-4px);
}

.btn.primary:hover{
box-shadow:
0 0 25px rgba(123,44,255,.5),
0 0 40px rgba(255,45,85,.25);
}

/* =========================
LIVE BAR
========================= */

.live-bar{
width:100%;

display:flex;
align-items:center;
justify-content:center;
gap:12px;

padding:18px;

background:rgba(10,10,16,.9);

border-top:1px solid rgba(123,44,255,.2);
border-bottom:1px solid rgba(255,45,85,.2);

backdrop-filter:blur(12px);

font-weight:700;
letter-spacing:.5px;
}

.live-dot{
width:12px;
height:12px;

background:#00ff85;
border-radius:50%;

box-shadow:0 0 15px #00ff85;

animation:pulse 1.1s infinite;
}

@keyframes pulse{
0%{
transform:scale(1);
opacity:1;
}

50%{
transform:scale(.7);
opacity:.4;
}

100%{
transform:scale(1);
opacity:1;
}
}

/* =========================
SECTION TITLE
========================= */

section h2{
font-family:'Anton',sans-serif;
font-size:52px;
letter-spacing:1px;
margin-bottom:45px;
text-align:center;

background:linear-gradient(90deg,#7b2cff,#ff2d55);

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

/* =========================
LEADERBOARD
========================= */

.leaderboard{
max-width:1200px;
margin:auto;
padding:110px 20px;
}

.leaderboard-table{
display:flex;
flex-direction:column;
gap:18px;
}

.table-row{
display:grid;
grid-template-columns:90px 1fr 160px 160px;

gap:20px;
align-items:center;

padding:24px;

background:rgba(17,17,25,.88);

border-radius:18px;

border:1px solid rgba(123,44,255,.2);

backdrop-filter:blur(10px);

transition:.25s ease;
}

.table-row:hover{
transform:translateY(-5px);

border-color:#ff2d55;

box-shadow:
0 0 20px rgba(123,44,255,.15),
0 0 35px rgba(255,45,85,.08);
}

.gold{
border:1px solid rgba(255,215,0,.4);

box-shadow:
0 0 25px rgba(255,215,0,.08);
}

.silver{
border:1px solid rgba(192,192,192,.25);
}

.bronze{
border:1px solid rgba(205,127,50,.25);
}

/* =========================
TROPHY
========================= */

.trophy-section{
max-width:1200px;
margin:auto;

padding:110px 20px;

display:grid;
grid-template-columns:1fr 1fr;
gap:70px;
align-items:center;
}

.trophy-left{
display:flex;
justify-content:center;
}

.trophy-img{
width:100%;
max-width:340px;

filter:
drop-shadow(0 0 25px rgba(123,44,255,.3))
drop-shadow(0 0 45px rgba(255,45,85,.15));

animation:float 5s ease-in-out infinite;
}

@keyframes float{
0%{
transform:translateY(0px);
}

50%{
transform:translateY(-10px);
}

100%{
transform:translateY(0px);
}
}

.trophy-right p{
font-size:18px;
line-height:1.8;
opacity:.82;
}

.prize-box{
margin-top:35px;

padding:24px;

border-radius:18px;

background:
linear-gradient(90deg,
rgba(123,44,255,.25),
rgba(255,45,85,.25));

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

font-weight:700;
line-height:2;
}

/* =========================
TEAMS
========================= */

.teams{
max-width:1200px;
margin:auto;
padding:110px 20px;
}

.teams-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:25px;
}

.team-card{
background:rgba(17,17,25,.88);

padding:35px 28px;

border-radius:18px;

border:1px solid rgba(123,44,255,.18);

backdrop-filter:blur(12px);

transition:.25s ease;
}

.team-card:hover{
transform:translateY(-6px);

border-color:#ff2d55;

box-shadow:
0 0 25px rgba(123,44,255,.15),
0 0 40px rgba(255,45,85,.08);
}

.team-card h3{
margin-bottom:10px;
font-size:22px;
}

.team-card p{
opacity:.7;
}

/* =========================
WATCH SECTION
========================= */

.watch-section{
padding:140px 20px;
text-align:center;
}

.watch-btn{
display:inline-block;

margin-top:20px;

padding:22px 45px;

border-radius:18px;

background:linear-gradient(90deg,#7b2cff,#ff2d55);

color:white;
text-decoration:none;

font-weight:800;
font-size:22px;

transition:.25s ease;

box-shadow:
0 0 25px rgba(123,44,255,.35),
0 0 45px rgba(255,45,85,.15);
}

.watch-btn:hover{
transform:scale(1.05);

box-shadow:
0 0 35px rgba(123,44,255,.5),
0 0 60px rgba(255,45,85,.2);
}

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

footer{
margin-top:40px;

padding:40px 20px;

text-align:center;

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

background:#0b0b11;

opacity:.7;
}

/* =========================
SCROLLBAR
========================= */

::-webkit-scrollbar{
width:8px;
}

::-webkit-scrollbar-track{
background:#090909;
}

::-webkit-scrollbar-thumb{
background:linear-gradient(#7b2cff,#ff2d55);
border-radius:10px;
}

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

@media(max-width:900px){

.hero{
min-height:85vh;
}

.logo{
width:110px;
}

.hero h1{
font-size:58px;
}

.subtitle{
font-size:16px;
line-height:1.6;
}

.hero-buttons{
gap:14px;
}

.btn{
width:100%;
max-width:320px;
}

section h2{
font-size:38px;
}

.table-row{
grid-template-columns:1fr;
text-align:center;
gap:12px;
padding:20px;
}

.trophy-section{
grid-template-columns:1fr;
text-align:center;
gap:40px;
}

.trophy-img{
max-width:240px;
}

.trophy-right p{
font-size:16px;
}

.teams-grid{
grid-template-columns:1fr;
}

.watch-section{
padding:100px 20px;
}

.watch-btn{
font-size:18px;
padding:18px 30px;
width:100%;
max-width:320px;
}

footer{
font-size:13px;
}

}

/* TEAM ROSTER */

.team-top{
display:flex;
justify-content:flex-end;
margin-bottom:14px;
}

.live-badge{
padding:6px 12px;
border-radius:20px;

font-size:11px;
font-weight:700;

background:rgba(0,255,120,.12);
border:1px solid rgba(0,255,120,.35);

color:#00ff85;
}

.roster{
margin-top:22px;

display:flex;
flex-direction:column;
gap:12px;
}

.player{
padding:12px 14px;

border-radius:12px;

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

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

font-size:14px;
font-weight:600;

transition:.2s ease;
}

.player:hover{
background:rgba(123,44,255,.12);
border-color:rgba(123,44,255,.25);
}

.captain{
background:
linear-gradient(
90deg,
rgba(123,44,255,.16),
rgba(255,45,85,.16)
);

border:1px solid rgba(255,45,85,.25);

font-weight:700;
}