@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

:root{

--bg:#080812;
--bg2:#10101b;
--card:#171727;
--border:rgba(255,255,255,.08);

--primary:#8b5cf6;
--primary2:#a855f7;

--text:#ffffff;
--text2:#bdbdbd;

--success:#22c55e;
--danger:#ef4444;

}

*{

margin:0;
padding:0;
box-sizing:border-box;
scroll-behavior:smooth;

}

body{

font-family:"Poppins",sans-serif;

background:linear-gradient(180deg,#080812,#10101b);

color:var(--text);

overflow-x:hidden;

}

body::before{

content:"";

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

background:

radial-gradient(circle at 20% 10%,rgba(139,92,246,.25),transparent 30%),

radial-gradient(circle at 80% 90%,rgba(168,85,247,.18),transparent 30%);

pointer-events:none;

z-index:-1;

}

a{

text-decoration:none;

color:inherit;

}

img{

max-width:100%;

display:block;

}

ul{

list-style:none;

}

/* HEADER */

header{

position:sticky;

top:0;

z-index:999;

height:85px;

display:flex;

justify-content:space-between;

align-items:center;

padding:0 7%;

background:rgba(8,8,18,.85);

backdrop-filter:blur(18px);

border-bottom:1px solid var(--border);

}

.logo{

display:flex;

align-items:center;

gap:15px;

}

.logo img{

width:55px;

height:55px;

border-radius:50%;

box-shadow:0 0 20px rgba(139,92,246,.5);

}

.logo h1{

font-size:30px;

font-weight:700;

}

.logo span{

color:var(--primary);

}

nav{

display:flex;

gap:28px;

}

nav a{

font-size:15px;

font-weight:600;

color:#d8d8d8;

transition:.3s;

position:relative;

}

nav a:hover{

color:#fff;

}

nav a.active{

color:var(--primary);

}

nav a::after{

content:"";

position:absolute;

left:0;

bottom:-8px;

width:0;

height:3px;

background:var(--primary);

border-radius:50px;

transition:.3s;

}

nav a:hover::after,
nav a.active::after{

width:100%;

}

/* HERO */

.hero{

padding:140px 20px 90px;

text-align:center;

}

.hero h1{

font-size:72px;

font-weight:800;

margin-bottom:20px;

}

.hero h1 span{

color:var(--primary);

}

.hero p{

max-width:800px;

margin:auto;

font-size:21px;

color:var(--text2);

line-height:1.8;

}

.actions{

display:flex;

justify-content:center;

gap:18px;

margin-top:40px;

flex-wrap:wrap;

}

.button{

padding:16px 34px;

border-radius:14px;

font-weight:700;

transition:.3s;

}

.button:hover{

transform:translateY(-4px);

}

.primary{

background:var(--primary);

color:white;

box-shadow:0 0 30px rgba(139,92,246,.45);

}

.secondary{

border:2px solid var(--primary);

color:white;

}

.secondary:hover{

background:var(--primary);

}

/* =========================
        STORE
========================= */

.cards{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(330px,1fr));

gap:35px;

max-width:1250px;

margin:70px auto;

padding:0 25px;

}

.card{

position:relative;

background:linear-gradient(160deg,#171727,#11111d);

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

border-radius:22px;

padding:35px;

overflow:hidden;

transition:.35s;

box-shadow:0 10px 30px rgba(0,0,0,.35);

}

.card:hover{

transform:translateY(-10px);

border-color:#8b5cf6;

box-shadow:

0 0 35px rgba(139,92,246,.45),

0 15px 40px rgba(0,0,0,.45);

}

.card::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:5px;

background:linear-gradient(90deg,#8b5cf6,#a855f7);

}

.vip{

border:2px solid #8b5cf6;

}

.disabled{

opacity:.82;

}

.badge{

position:absolute;

top:20px;

right:20px;

padding:8px 15px;

border-radius:999px;

font-size:12px;

font-weight:700;

background:#8b5cf6;

color:white;

}

.badge.purple{

background:#6d28d9;

}

.badge.gold{

background:#f59e0b;

}

.card h2{

font-size:34px;

margin-top:20px;

}

.card h3{

margin:10px 0 25px;

font-size:36px;

color:#c8a7ff;

}

.card ul{

padding:0;

margin:0;

}

.card li{

margin:14px 0;

color:#ddd;

font-size:16px;

display:flex;

align-items:center;

gap:10px;

}

.card button{

margin-top:30px;

width:100%;

padding:16px;

border:none;

border-radius:12px;

font-size:16px;

font-weight:700;

cursor:pointer;

background:#8b5cf6;

color:white;

transition:.3s;

}

.card button:hover{

background:#9f72ff;

}

.card button:disabled{

background:#32323d;

cursor:not-allowed;

}

#paypal-container-DYXMAS49VEGDW{

margin-top:30px;

padding-top:15px;

}

.support{

max-width:900px;

margin:80px auto;

padding:40px;

text-align:center;

}

.support h2{

font-size:42px;

margin-bottom:15px;

}

.support p{

font-size:18px;

color:#bdbdbd;

line-height:1.8;

}

.footer{

max-width:1200px;

margin:auto;

display:flex;

justify-content:space-between;

align-items:center;

padding:40px 20px;

flex-wrap:wrap;

gap:25px;

}

.footer a{

display:block;

margin:6px 0;

color:#cfcfcf;

transition:.3s;

}

.footer a:hover{

color:#8b5cf6;

}

.copyright{

text-align:center;

padding:25px;

color:#8e8e8e;

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

}

/* ===========================
        SERVER PAGE
=========================== */

.server-status{

max-width:1100px;

margin:70px auto;

padding:20px;

display:grid;

grid-template-columns:repeat(auto-fit,minmax(350px,1fr));

gap:35px;

}

.status-card{

background:linear-gradient(160deg,#171727,#10101b);

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

border-radius:22px;

padding:35px;

text-align:center;

transition:.35s;

}

.status-card:hover{

transform:translateY(-8px);

box-shadow:0 0 35px rgba(139,92,246,.35);

}

.status-card h2{

font-size:34px;

margin-bottom:15px;

}

.online{

color:#22c55e;

font-weight:700;

}

.offline{

color:#ef4444;

font-weight:700;

}

.players{

font-size:48px;

font-weight:800;

margin:20px 0;

color:#8b5cf6;

}

.ip-box{

background:#0f0f19;

padding:18px;

border-radius:15px;

margin-top:18px;

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

}

.ip-box p{

margin:8px 0;

color:#d0d0d0;

}

.copy-btn{

margin-top:15px;

padding:12px 24px;

border:none;

border-radius:12px;

background:#8b5cf6;

color:white;

font-weight:700;

cursor:pointer;

transition:.3s;

}

.copy-btn:hover{

background:#9f72ff;

transform:translateY(-2px);

}

/* ===========================
        DISCORD
=========================== */

.discord-section{

display:flex;

justify-content:center;

align-items:center;

padding:120px 20px;

}

.discord-card{

background:linear-gradient(160deg,#171727,#11111d);

padding:60px;

border-radius:25px;

text-align:center;

max-width:700px;

width:100%;

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

box-shadow:0 0 45px rgba(139,92,246,.25);

}

.discord-card h2{

font-size:48px;

margin-bottom:20px;

}

.discord-card p{

color:#bdbdbd;

font-size:18px;

margin-bottom:35px;

}

.discord-btn{

display:inline-flex;

align-items:center;

gap:18px;

padding:18px 38px;

background:linear-gradient(135deg,#5865F2,#8b5cf6);

color:white;

font-size:20px;

font-weight:bold;

border-radius:18px;

transition:.35s;

box-shadow:0 0 25px rgba(88,101,242,.5);

}

.discord-btn:hover{

transform:translateY(-5px) scale(1.05);

box-shadow:0 0 45px rgba(88,101,242,.8);

}

.discord-btn i{

font-size:34px;

}

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

@keyframes fadeUp{

0%{

opacity:0;

transform:translateY(40px);

}

100%{

opacity:1;

transform:translateY(0);

}

}

.hero,
.card,
.status-card,
.discord-card{

animation:fadeUp .8s ease;

}

@keyframes pulse{

0%{

box-shadow:0 0 0 rgba(139,92,246,.4);

}

50%{

box-shadow:0 0 25px rgba(139,92,246,.8);

}

100%{

box-shadow:0 0 0 rgba(139,92,246,.4);

}

}

.vip{

animation:pulse 3s infinite;

}

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

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#090910;

}

::-webkit-scrollbar-thumb{

background:#8b5cf6;

border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:#a855f7;

}

/* ===========================
        SELECTION
=========================== */

::selection{

background:#8b5cf6;

color:white;

}

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

footer{

margin-top:100px;

background:#090910;

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

}

footer p{

margin:0;

}

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

@media(max-width:1000px){

header{

padding:0 25px;

}

.hero h1{

font-size:56px;

}

.cards{

grid-template-columns:1fr;

}

.server-status{

grid-template-columns:1fr;

}

}

@media(max-width:700px){

header{

flex-direction:column;

height:auto;

padding:20px;

}

nav{

flex-wrap:wrap;

justify-content:center;

gap:18px;

margin-top:15px;

}

.hero{

padding-top:170px;

}

.hero h1{

font-size:42px;

}

.hero p{

font-size:17px;

}

.actions{

flex-direction:column;

}

.button{

width:100%;

}

.card{

padding:25px;

}

.card h2{

font-size:28px;

}

.card h3{

font-size:30px;

}

.discord-card{

padding:35px 20px;

}

.discord-card h2{

font-size:34px;

}

.support h2{

font-size:30px;

}

.footer{

flex-direction:column;

text-align:center;

}

}

@media(max-width:450px){

.logo h1{

font-size:24px;

}

.hero h1{

font-size:34px;

}

.hero p{

font-size:15px;

}

.status-card h2{

font-size:26px;

}

.players{

font-size:36px;

}

.card{

border-radius:18px;

}

}