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

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}

html{
    scroll-behavior:smooth;
}

body{
    background:#07142b;
    color:white;
    overflow-x:hidden;
}

/* Background */

.background{
    position:fixed;
    inset:0;
    z-index:-1;
    background:
    linear-gradient(135deg,#07142b,#0d47a1,#2196f3);
}

/* Header */

header{
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:20px 8%;
    position:sticky;
    top:0;
    backdrop-filter:blur(15px);
    background:rgba(255,255,255,.05);
}

.logo{
    font-size:34px;
    font-weight:800;
}

.blue{
    color:#3ea6ff;
}

nav a{
    color:white;
    text-decoration:none;
    margin:0 15px;
    transition:.3s;
}

nav a:hover,
.active{
    color:#57c4ff;
}

/* Button */

.buttons{
    display:flex;
    gap:15px;
}

.discord,
.whatsapp{
    padding:12px 20px;
    border-radius:10px;
    text-decoration:none;
    color:white;
    font-weight:600;
}

.discord{
    background:#5865F2;
}

.whatsapp{
    background:#25D366;
}

/* Hero */

.hero{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:100px 8%;
    gap:50px;
}

.hero h1{
    font-size:60px;
    margin-bottom:20px;
}

.hero span{
    color:#4FC3F7;
}

.hero p{
    color:#d9d9d9;
    line-height:30px;
    margin-bottom:35px;
}

.hero-btn{
    display:flex;
    gap:20px;
}

.btn-primary,
.btn-secondary,
.buy,
.buy-btn{
    padding:15px 35px;
    border-radius:15px;
    text-decoration:none;
    color:white;
    font-weight:700;
}

.btn-primary,
.buy,
.buy-btn{
    background:#1E88E5;
}

.btn-secondary{
    border:2px solid white;
}

/* Section */

section{
    padding:80px 8%;
}

section h2{
    text-align:center;
    font-size:40px;
    margin-bottom:50px;
}

/* Cards */

.cards{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:30px;
}

.card,
.rank-card,
.info-box,
.stat{
    background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.1);
    backdrop-filter:blur(12px);
    border-radius:20px;
    padding:30px;
    text-align:center;
}

.rank-card h2{
    font-size:32px;
}

.rank-card h3{
    color:#4FC3F7;
    margin:15px 0;
}

.rank-card ul{
    list-style:none;
    margin:20px 0;
}

.rank-card li{
    margin:10px 0;
}

.badge{
    display:inline-block;
    background:#ff9800;
    padding:8px 15px;
    border-radius:20px;
    margin-bottom:20px;
    font-size:13px;
    font-weight:bold;
}

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

footer{
    padding:50px;
    text-align:center;
    background:#06101f;
}

.footer-links{
    margin-top:20px;
}

.footer-links a{
    color:white;
    margin:0 10px;
    text-decoration:none;
}

.floating{
    position:fixed;
    width:60px;
    height:60px;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    color:white;
    text-decoration:none;
    font-size:25px;
}

.discord-float{
    right:20px;
    bottom:95px;
    background:#5865F2;
}

.whatsapp-float{
    right:20px;
    bottom:20px;
    background:#25D366;
}
/* ===========================
   SCHEMATIC PAGE
=========================== */

html,
body{
    margin:0;
    padding:0;
    background:#020817;
    color:#fff;
    overflow-x:hidden;
}

body{
    position:relative;
}

.background{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:-999;

    background:linear-gradient(
        135deg,
        #020817 0%,
        #071a3d 25%,
        #0d47a1 50%,
        #1976d2 75%,
        #020817 100%
    );

    background-size:400% 400%;
    animation:gradientMove 12s ease infinite;
}

.cards{
    padding: 80px 8%;
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
    gap: 30px;

    background: linear-gradient(
        180deg,
        rgba(5,15,35,.96) 0%,
        rgba(10,25,55,.96) 50%,
        rgba(5,15,35,.96) 100%
    );
}

.information{
    padding:80px 8%;
    background:linear-gradient(
        180deg,
        rgba(10,25,55,.96),
        rgba(5,15,35,.98)
    );
}

.rank-card{
    background:rgba(18,28,55,.92);
    border:1px solid rgba(0,183,255,.25);
    border-radius:20px;
    padding:35px;
    transition:.35s;
    box-shadow:0 0 20px rgba(0,183,255,.12);
}

.rank-card:hover{
    transform:translateY(-8px);
    border-color:#00bfff;
    box-shadow:0 0 30px rgba(0,183,255,.45);
}

.rank-card h2{
    color:#00bfff;
}

.rank-card h3{
    color:#fff;
    margin:15px 0;
    font-size:30px;
}

.rank-card ul{
    color:#d8e7ff;
    line-height:2;
}

.buy-btn{
    display:inline-block;
    margin-top:20px;
    background:#00bfff;
    color:white;
    padding:12px 28px;
    border-radius:10px;
    text-decoration:none;
    font-weight:700;
    transition:.3s;
}

.buy-btn:hover{
    background:#0095ff;
    box-shadow:0 0 18px #00bfff;
}

.info-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:30px;
    margin-top:50px;
}

.info-box{
    background:rgba(18,28,55,.92);
    border:1px solid rgba(0,183,255,.25);
    padding:35px;
    border-radius:20px;
    text-align:center;
}

.info-box i{
    font-size:50px;
    color:#00bfff;
    margin-bottom:20px;
}

.info-box h3{
    color:white;
    margin-bottom:15px;
}

.info-box p{
    color:#cfdfff;
}

.popular{
    border:2px solid #00bfff;
}

.premium{
    border:2px solid #1e90ff;
}

.ultimate{
    border:2px solid #6ec6ff;
}

.badge{
    position:absolute;
    top:15px;
    right:15px;
    background:#00bfff;
    color:#fff;
    padding:6px 15px;
    border-radius:50px;
    font-size:13px;
    font-weight:bold;
}