:root{
  --bg:#0f1116;
  --panel:#141824;
  --panel2:#10131c;
  --text:#e9ecf1;
  --muted:#aab0bf;
  --p1:#a855f7;
  --p2:#ec4899;
  --p3:#7c3aed;
  --border: rgba(255,255,255,.08);
  --shadow: 0 18px 50px rgba(0,0,0,.55);
}

html,body{
min-height:100%;
height:auto;
scroll-behavior:smooth;
}

body{
margin:0;
display:flex;
flex-direction:column;
font-family: ui-sans-serif, system-ui;
color:var(--text);
position:relative;
overflow-x:hidden;
background:
linear-gradient(180deg,
#0c0e13 0%,
#10141f 40%,
#141824 70%,
#0c0e13 100%);
}

.wrap{
width:min(1100px,92vw);
margin:auto;
padding:28px 0 70px;
flex:1;
}

/* NAV */
.nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 16px;
  border:1px solid var(--border);
  background:rgba(16,19,28,.55);
  border-radius:16px;
}

.logo{height:40px;margin-right:10px;}

.brand{
  display:flex;
  align-items:center;
  font-size:26px;
  font-weight:900;
  text-decoration:none;
  color:white;
}

.navlinks{display:flex;gap:10px;}

.btn{
  padding:10px 14px;
  border-radius:999px;
  text-decoration:none;
  color:var(--text);
  border:1px solid var(--border);
  background:rgba(20,24,36,.65);
  transition:.3s;
}

.btn:hover{
  box-shadow:0 0 15px #a855f7,0 0 25px #ec4899;
  transform:translateY(-2px);
}

.btn.primary{
  background:linear-gradient(135deg,var(--p1),var(--p2));
  color:black;
}

/* HERO */
.hero{
  margin-top:26px;
  padding:28px 20px;
  border:1px solid var(--border);
  background: rgba(20,24,36,.25);
  backdrop-filter:blur(10px);
  border-radius:22px;
}

.kicker{color:var(--muted);text-transform:uppercase;font-size:.82rem;}

h1{
  background:linear-gradient(270deg,#a855f7,#ec4899,#a855f7);
  background-size:600% 600%;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:gradientMove 5s ease infinite;
}

@keyframes gradientMove{
0%{background-position:0% 50%;}
50%{background-position:100% 50%;}
100%{background-position:0% 50%;}
}

.lead{color:var(--muted);}

/* GRID */
.grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
margin-top:50px;
}

@media(max-width:900px){
.grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:600px){
.grid{grid-template-columns:1fr;}
}

/* CARD */
.card{
border:1px solid var(--border);
background:rgba(20,24,36,.55);
border-radius:18px;
padding:18px;
transition:all .4s ease;
position:relative;
overflow:hidden;
}

.card::before{
content:"";
position:absolute;
top:-50%;
left:-50%;
width:200%;
height:200%;
background:radial-gradient(circle,#a855f7,#ec4899,transparent);
opacity:0;
transition:.5s;
}

.card:hover::before{opacity:0.2;}

.card:hover{
transform:translateY(-10px) scale(1.03);
box-shadow:0 10px 40px rgba(168,85,247,.3),
0 0 30px rgba(236,72,153,.2);
}

.card *{position:relative;z-index:1;}

.badge{
width:44px;height:44px;
display:grid;place-items:center;
background:linear-gradient(135deg,var(--p1),var(--p2));
border-radius:14px;
margin-bottom:12px;
}

/* SECTION */
.section{
margin-top:26px;
border:1px solid rgba(255,255,255,0.05);
background:rgba(16,19,28,.25);
backdrop-filter:blur(12px);
border-radius:22px;
padding:20px;
}
.rulelist{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
}

@media(max-width:820px){
.rulelist{grid-template-columns:1fr;}
}

.rule{
border:1px solid var(--border);
background:rgba(20,24,36,.55);
border-radius:18px;
padding:16px;
}

.note{
margin-top:12px;
color:var(--muted);
border-left:3px solid rgba(168,85,247,.55);
padding-left:10px;
}

/* REVEAL (NUR 1x!!!) */
.reveal{
opacity:1;
transform:translateY(0);
transition:all .6s ease;
}

.reveal.animate{
opacity:0;
transform:translateY(60px);
}

.reveal.show{
opacity:1;
transform:translateY(0);
}


/* IP BOX */
.ipbox{
display:flex;
justify-content:space-between;
align-items:center;
background:#141824;
padding:12px 18px;
border-radius:14px;
margin-top:20px;
cursor:pointer;
transition:.3s;
}

.ipbox:hover{
box-shadow:0 0 10px #a855f7,0 0 20px #ec4899;
transform:scale(1.02);
}

#copymsg{color:#a855f7;}

/* FOOTER */
footer{
margin-top:150px;
text-align:center;
border-top:1px solid rgba(255,255,255,0.1);
padding-top:20px;
}/* PAGE LOAD ANIMATION (FAST) */
.wrap{
opacity:0;
transform:translateY(-40px);
animation:pageDrop .6s ease forwards;
}

@keyframes pageDrop{
from{
opacity:0;
transform:translateY(-40px);
}
to{
opacity:1;
transform:translateY(0);
}
}

/* PARTICLES BACKGROUND */

.particles{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
pointer-events:none;
z-index:-1;
overflow:hidden;
}

.particles span{
position:absolute;
display:block;
width:6px;
height:6px;
background:#a855f7;
border-radius:50%;
box-shadow:
0 0 10px #a855f7,
0 0 20px #ec4899,
0 0 30px #7c3aed;
animation:moveParticle linear infinite;
}

/* RANDOM POSITIONS */
.particles span:nth-child(1){left:10%;animation-duration:18s;animation-delay:0s;}
.particles span:nth-child(2){left:20%;animation-duration:25s;animation-delay:2s;}
.particles span:nth-child(3){left:30%;animation-duration:22s;animation-delay:4s;}
.particles span:nth-child(4){left:40%;animation-duration:20s;animation-delay:6s;}
.particles span:nth-child(5){left:50%;animation-duration:24s;animation-delay:1s;}
.particles span:nth-child(6){left:60%;animation-duration:26s;animation-delay:3s;}
.particles span:nth-child(7){left:70%;animation-duration:21s;animation-delay:5s;}
.particles span:nth-child(8){left:80%;animation-duration:23s;animation-delay:7s;}
.particles span:nth-child(9){left:90%;animation-duration:19s;animation-delay:9s;}
.particles span:nth-child(10){left:15%;animation-duration:28s;animation-delay:8s;}
.particles span:nth-child(11){left:25%;animation-duration:27s;animation-delay:2s;}
.particles span:nth-child(12){left:35%;animation-duration:24s;animation-delay:4s;}
.particles span:nth-child(13){left:45%;animation-duration:29s;animation-delay:6s;}
.particles span:nth-child(14){left:55%;animation-duration:18s;animation-delay:8s;}
.particles span:nth-child(15){left:65%;animation-duration:22s;animation-delay:1s;}
.particles span:nth-child(16){left:75%;animation-duration:25s;animation-delay:3s;}
.particles span:nth-child(17){left:85%;animation-duration:20s;animation-delay:5s;}
.particles span:nth-child(18){left:95%;animation-duration:23s;animation-delay:7s;}
.particles span:nth-child(19){left:5%;animation-duration:21s;animation-delay:9s;}
.particles span:nth-child(20){left:12%;animation-duration:26s;animation-delay:11s;}

@keyframes moveParticle{
0%{
transform:translateY(0) scale(0.5);
opacity:0;
}
20%{
opacity:1;
}
100%{
transform:translateY(-120vh) scale(1);
opacity:0;
}
}

/* DISCORD BLOCK */
.discord-block{
text-align:center;
margin-top:40px;
}

.discord-text{
font-size:24px;
color:#a855f7;
margin-bottom:12px;
font-weight:800;
letter-spacing:1px;
}
/* DISCORD BUTTON */
.discord-btn{
background:linear-gradient(135deg,#5865F2,#7289DA);
color:white;
border:none;
padding:12px 22px;
font-weight:700;
}

.discord-btn:hover{
box-shadow:0 0 15px #5865F2,0 0 25px #7289DA;
transform:translateY(-2px) scale(1.05);
}

.discord-btn i{
margin-right:8px;
}

footer{
margin-top:150px;
text-align:center;
padding-top:40px;
position:relative;
}

/* LEGAL FULL WIDTH BLOCK */
.legal-box{
width:100%;
margin-top:80px;
padding:40px 0;
background:linear-gradient(
180deg,
#0c0e13,
#111522,
#0c0e13
);
border-top:1px solid rgba(255,255,255,0.08);
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
text-align:center;
}

/* TITLE */
.legal-box h3{
margin:0 0 10px;
font-size:22px;
letter-spacing:1px;
color:#e9ecf1;
}

/* LINKS */
.legal-links{
display:flex;
gap:20px;
flex-wrap:wrap;
justify-content:center;
margin-top:10px;
}

.legal-links a{
text-decoration:none;
padding:8px 18px;
border-radius:10px;
background:linear-gradient(135deg,#a855f7,#ec4899);
color:black;
font-size:14px;
transition:0.3s;
}

.legal-links a:hover{
transform:scale(1.07);
box-shadow:0 0 10px #a855f7,0 0 20px #ec4899;
}