:root{
--primary:#3aa6ff;
--bg:#0b0b0b;
--text:white;

--podium-width:260px;
--podium-depth:40px;
--podium-radius:18px;
}

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Inter', sans-serif;
scroll-behavior:smooth;
}

body{
background:var(--bg);
color:var(--text);
overflow-x:hidden;
}

body{

background:
radial-gradient(circle at top, rgba(58,166,255,.15), transparent 40%),
var(--bg);

}

#bg{
position:fixed;
top:0;
left:0;
z-index:-1;
}

/*===========vv===NAVBAR===vv===========*/

.navbar{

position:fixed;
top:20px;
left:50%;
transform:translateX(-50%);

width:80%; /* wider */

display:flex;
justify-content:space-between;
align-items:center;

padding:16px 40px;

border-radius:16px;

background:linear-gradient(
135deg,
rgba(255,255,255,0.05),
rgba(255,255,255,0.02)
);

backdrop-filter:blur(14px);

border:1px solid rgba(255,255,255,0.08);

box-shadow:
0 0 20px rgba(58,166,255,0.15),
inset 0 0 20px rgba(255,255,255,0.03);

z-index:1000;

}

.navbar ul{
display:flex;
gap:35px;
list-style:none;
}

.navbar a{
color:var(--text);
text-decoration:none;
font-weight:500;
position:relative;
}

.navbar a::after{

content:'';
position:absolute;
left:0;
bottom:-4px;

width:0%;
height:2px;

background:var(--primary);

transition:0.3s;

}

.navbar a:hover::after{
width:100%;
}

.logo{
font-weight:700;
font-size:18px;
color:var(--primary);
letter-spacing:1px;
}

/*===========^^===NAVBAR===^^===========*/

.hero{
height:100vh;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
}

.hero h1{

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

background:linear-gradient(
90deg,
#3aa6ff,
#ffffff,
#38bdf8,
#3aa6ff
);

background-size:300%;

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

animation:gradientMove 6s linear infinite;

}

@keyframes gradientMove{

0%{background-position:0%}
100%{background-position:300%}

}

.hero p{

opacity:0;
animation:fadeUp 1s ease forwards;
animation-delay:.3s;

}

@keyframes fadeUp{

from{
opacity:0;
transform:translateY(40px);
}

to{
opacity:1;
transform:translateY(0);
}

}

/*===========vv===BUTTON===vv===========*/

.btn{

margin-top:20px;
padding:14px 28px;

background:var(--primary);
border-radius:10px;

color:white;
text-decoration:none;
font-weight:600;

box-shadow:0 0 20px rgba(58,166,255,.4);

transition:0.3s;

}

.btn:hover{

transform:translateY(-3px);
box-shadow:0 0 35px rgba(58,166,255,.7);

}

/*===========^^===BUTTON===^^===========*/

.about{
padding:120px 20%;
text-align:center;
color: #244468;
}

.services{
padding:120px 10%;
}

.services h2{
text-align:center;
margin-bottom:40px;
}

.service-grid{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:25px;

}

/*===========vv===CARD===vv===========*/

.card{

background:rgba(255,255,255,0.05);
border-radius:14px;
padding:35px;

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

transition:all .35s ease;

opacity:0;
transform:translateY(30px);

}
.card h3 {
    color:#a3e3ff;
    font-size: 30px;
}
.pin {
  font-size: 50px;
  position: absolute;
  top: -45px;
  left: 0px;
  overflow: visible;
}

.card.show{

opacity:1;
transform:translateY(0);

}

.card:hover{

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

border-color:var(--primary);

box-shadow:
0 0 20px rgba(58,166,255,.3);

}

/*===========^^===CARD===^^===========*/

footer{

margin-top:120px;

padding:80px 20px;

background:linear-gradient(
180deg,
transparent,
rgba(58,166,255,.05)
);

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

backdrop-filter:blur(10px);

text-align:center;

position:relative;

}

footer h3{

font-size:28px;
margin-bottom:10px;

background:linear-gradient(40deg,#3aa6ff,#ffffff);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

}

.socials{

display:flex;
justify-content:center;
flex-wrap:wrap;

gap:18px;
margin:30px 0;

}

.socials a{

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

padding:10px 16px;

border-radius:10px;

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

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

transition:.3s;

}

.socials a:hover{

transform:translateY(-3px);

box-shadow:
0 0 20px rgba(58,166,255,.5);

border-color:var(--primary);

}

footer p{

opacity:.6;
font-size:14px;

}

.socials{

display:flex;
justify-content:center;
gap:20px;
margin:20px;

}

.socials a{
color:var(--primary);
text-decoration:none;
}

#themeToggle{

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

padding:8px 12px;
border-radius:8px;

cursor:pointer;

color:var(--text);

transition:.3s;

}

#themeToggle:hover{

background:var(--primary);
color:white;

}

.leaderboard{

padding:120px 10%;
text-align:center;

}

.leaderboard h2{
margin-bottom:50px;
font-size:32px;
}

.podium{
display:flex;
justify-content:center;
align-items:flex-end;
gap:40px;
margin-bottom:80px;
perspective:1200px;
}

.podium-card{
width:var(--podium-width);
height:220px;
position:relative;
filter: drop-shadow(0 18px 30px rgba(0,0,0,.55));
transition:filter .4s ease;
}

.podium-card:hover{
filter: drop-shadow(0 28px 45px rgba(0,0,0,.75));
}

.box{
width:100%;
height:100%;
position:absolute;
transform-style:preserve-3d;

transition:
transform .5s cubic-bezier(.22,.8,.2,1),
filter .45s ease;
}

/* hover tilt */

.podium-card:hover .box{
transform:
rotateX(2deg)
rotateY(-7deg)
rotateZ(-3deg)
translateY(-3px)
translateZ(10px)
translateX(12px);
}

/* general face style */

.face{

position:absolute;

width:var(--podium-width);
height:220px;

display:flex;
justify-content:center;
align-items:center;
flex-direction:column;

border-radius:var(--podium-radius);

background:#121212;

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

}

/* FRONT */

.front{
transform:translateZ(var(--podium-depth));
background:

linear-gradient(145deg,#101010,#1c1c1c),

repeating-linear-gradient(
45deg,
rgba(255,255,255,0.03),
rgba(255,255,255,0.03) 2px,
transparent 2px,
transparent 12px
);
overflow:hidden;
}

.front .pin {
  overflow: visible;
  z-index: 20;
}



.back{
transform:rotateY(180deg) translateZ(var(--podium-depth));
background:#111111;
}

.right{
width:calc(var(--podium-depth)*2);
transform:rotateY(90deg) translateZ(calc(var(--podium-width) - var(--podium-depth)));
background:#111111;
}

.left{
width:calc(var(--podium-depth)*2);
transform:rotateY(-90deg) translateZ(var(--podium-depth));
background:#111111;
}

.top{
height:calc(var(--podium-depth)*2);
transform:rotateX(90deg) translateZ(var(--podium-depth));
background:#111111;
}

.bottom{
height:calc(var(--podium-depth)*2);
transform:rotateX(-90deg) translateZ(calc(220px - var(--podium-depth)));
background:#111111;
}

/* podium heights */

.first{ height:300px; }
.second{ height:200px; }
.third{ height:200px; }

.first .front{

background:

linear-gradient(145deg,#222222,#4e4e4e),

repeating-linear-gradient(
45deg,
rgba(194, 194, 194, 0.08),
rgba(126, 126, 126, 0.08) 2px,
transparent 2px,
transparent 12px
);

box-shadow:

0 0 35px rgba(209, 209, 209, 0.5);

}
/* text */

.rank{
font-size:40px;
color:var(--primary);
margin-bottom:10px;
}
.medal{

font-size:42px;

animation:medalFloat 3s ease-in-out infinite;

}

/* floating motion */

@keyframes medalFloat{

0%{ transform:translateY(0px) scale(1); }
50%{ transform:translateY(-6px) scale(1.05); }
100%{ transform:translateY(0px) scale(1); }

}

.gold{

text-shadow:
0 0 8px rgba(255,215,0,.9),
0 0 18px rgba(255,215,0,.7),
0 0 35px rgba(255,215,0,.4);

}

.silver{

text-shadow:
0 0 8px rgba(220,220,220,.9),
0 0 18px rgba(220,220,220,.7),
0 0 35px rgba(220,220,220,.4);

}

.bronze{

text-shadow:
0 0 8px rgba(205,127,50,.9),
0 0 18px rgba(205,127,50,.7),
0 0 35px rgba(205,127,50,.4);

}

.medal::after{

content:"";

position:absolute;
left: -5px;

width:40px;
height:40px;

border-radius:50%;

background:radial-gradient(
circle,
rgba(255, 255, 255, 0.6),
transparent 70%
);

opacity:.4;

animation:shineRotate 6s linear infinite;

}

@keyframes shineRotate{

0%{ transform:rotate(0deg) translateX(-5px); }
100%{ transform:rotate(360deg) translateX(-5px); }

}

.second .medal{
animation-delay:.5s;
}

.third .medal{
animation-delay:1s;
}

.front h3{
font-size:18px;
}

.front p{
opacity:.7;
}


.leaderboard-list{

max-width: 750px;
margin:auto;

display:flex;
flex-direction:column;
gap:10px;

}

.lb-row{

display:flex;
justify-content:space-between;

padding:14px 18px;

border-radius:12px;

background:linear-gradient(
145deg,
rgba(255,255,255,0.05),
rgba(255,255,255,0.02)
);

border:1px solid rgba(58,166,255,0.15);

transition:.3s;

position:relative;

overflow:hidden;

}

.lb-row::before{

content:"";

position:absolute;

inset:0;

background:linear-gradient(
120deg,
transparent,
rgba(58,166,255,.3),
transparent
);

opacity:0;
transition:.3s;

}

.lb-row:hover{

transform:translateX(8px);

box-shadow:
0 0 18px rgba(58,166,255,.35),
inset 0 0 10px rgba(58,166,255,.2);

}

.lb-row:hover::before{
opacity:1;
}

.lb-rank{

color:var(--primary);
font-weight:bold;

text-shadow:
0 0 8px rgba(58,166,255,.8),
0 0 18px rgba(58,166,255,.4);

}

.lb-name{
font-weight:500;
}

.lb-score{
opacity:.8;
}

.hidden{
display:none;
}

.leaderboard h2 , .services h2{
    font-size: 65px;
    background: linear-gradient(40deg, #1e3a8a, #ffffff, #38bdf8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;

  text-shadow:
    0 0 8px rgba(0, 150, 255, 0.6),
    0 0 20px rgba(0, 150, 255, 0.4);
}

span {
    color: var(--primary);
}

.leaderboard-controls{
  display:flex;
  justify-content:center;
  margin-top:20px;
}

.cursor-glow{

position:fixed;
width:250px;
height:250px;

background:radial-gradient(circle,
rgba(58,166,255,0.25) 5%,
rgba(58,166,255,0.08) 15%,
transparent 50%
);

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

transform:translate(-50%,-50%);
transition:opacity .2s;

}

.podium-card{

animation:float 6s ease-in-out infinite;

}

.second{
animation-delay:1s;
}

.third{
animation-delay:2s;
}

@keyframes float{

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

}

.scroll-progress{

position:fixed;
top:0;
left:0;

height:3px;
width:0%;

background:var(--primary);

z-index:2000;

box-shadow:0 0 12px rgba(58,166,255,.8);

}

.shine{

position:absolute;
top:0;
left:-120%;

width:60%;
height:100%;

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

transform:skewX(-20deg);

pointer-events:none;

}

.podium-card:hover .shine{

animation:podiumShine .8s ease;

}

@keyframes podiumShine{

0%{
left:-120%;
}

100%{
left:140%;
}

}

.wip{

padding:120px 10%;
text-align:center;

}

.wip h2{

font-size:55px;
margin-bottom:40px;

background:linear-gradient(40deg,#3aa6ff,#ffffff);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

}

.wip-box{

max-width:700px;
margin:auto;

padding:50px;

border-radius:16px;

background:rgba(255,255,255,0.04);
border:1px solid rgba(255,255,255,0.08);


box-shadow:
0 0 30px rgba(58,166,255,.15);

transition:.3s;

}

.wip-box:hover{

transform:translateY(-6px);
box-shadow:
0 0 40px rgba(58,166,255,.35);

}

.wip-box p{

font-size:18px;
opacity:.85;
line-height:1.6;

}






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

@media (max-width: 900px){

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

.services h2,
.leaderboard h2{
font-size:40px;
}

.about{
padding:80px 10%;
}

.services{
padding:80px 6%;
}

.podium{
flex-direction:column;
align-items:center;
gap:30px;
}

.podium-card{
width:220px;
}

.first, .second,
.third{
height:240px;
}

.leaderboard-list{
max-width:95%;
}

.navbar{
width:92%;
padding:14px 20px;
}

.navbar ul{
gap:18px;
font-size: 12px;
}

}

/* Small phones */

@media (max-width:500px){

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

.hero p{
font-size:14px;
}

.lb-row{
font-size:14px;
padding:12px 14px;
}

.podium-card{
width:200px;
}

}