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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins',sans-serif;
    background:#050510;
    color:#fff;
    overflow-x:hidden;
    cursor:none;
}

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

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

    background:
    radial-gradient(circle at 20% 20%,rgba(140,0,255,.35),transparent 40%),
    radial-gradient(circle at 80% 30%,rgba(0,180,255,.25),transparent 40%),
    radial-gradient(circle at 50% 80%,rgba(255,0,255,.15),transparent 35%);

    animation:bgMove 12s ease-in-out infinite alternate;

    z-index:-6;
}

@keyframes bgMove{

    0%{
        transform:scale(1);
    }

    100%{
        transform:scale(1.2) translateY(-40px);
    }

}

#particles{
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:-5;
}

canvas{
    display:block;
}


/* =========================
CURSOR
========================= */

.cursor{
    width:16px;
    height:16px;

    background:#9b5cff;

    border-radius:50%;

    position:fixed;

    left:0;
    top:0;

    pointer-events:none;

    z-index:99999;

    box-shadow:
    0 0 15px #9b5cff,
    0 0 35px #9b5cff;

    transition:transform .12s linear;
}

.cursor-blur{
    width:220px;
    height:220px;

    background:rgba(155,92,255,.20);

    border-radius:50%;

    position:fixed;

    left:0;
    top:0;

    filter:blur(45px);

    pointer-events:none;

    z-index:99998;

    transition:.15s;
}


/* =========================
LOADER
========================= */

#loader{
    position:fixed;

    inset:0;

    background:#050510;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    z-index:999999;

    transition:opacity .8s ease;
}

.loader-logo h1{
    font-size:70px;

    font-weight:800;

    color:white;

    letter-spacing:5px;

    text-shadow:
    0 0 20px #9b5cff,
    0 0 40px #9b5cff,
    0 0 80px #9b5cff;

    animation:pulseLogo 2s infinite;
}

.loader-logo span{
    color:#9b5cff;
}

.loader-bar{
    margin-top:40px;

    width:320px;
    height:8px;

    background:#222;

    border-radius:20px;

    overflow:hidden;
}

.loader-fill{
    height:100%;

    width:0;

    background:
    linear-gradient(
    90deg,
    #9b5cff,
    #00d4ff
    );

    animation:load 3s forwards;
}

#loader p{
    margin-top:20px;

    color:#ccc;

    letter-spacing:3px;
}

@keyframes load{

    0%{
        width:0;
    }

    100%{
        width:100%;
    }

}

@keyframes pulseLogo{

    0%,100%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.08);
    }

}


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

header{
    position:fixed;

    top:0;
    left:0;

    width:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 7%;

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

    backdrop-filter:blur(25px);

    border-bottom:
    1px solid rgba(155,92,255,.18);

    box-shadow:
    0 0 30px rgba(155,92,255,.15);

    z-index:1000;

    transition:.4s;
}

.logo3d{
    display:flex;

    align-items:center;

    gap:8px;

    font-family:'Orbitron',sans-serif;

    font-size:42px;

    font-weight:900;

    letter-spacing:5px;

    perspective:1000px;
}

.logo3d span{
    display:inline-block;

    position:relative;

    color:#fff;

    text-shadow:
    0 0 10px #9b5cff,
    0 0 25px #9b5cff,
    0 0 60px #9b5cff;

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

    transition:.4s;
}

.logo3d span:hover{
    transform:
    translateY(-12px)
    rotateX(20deg)
    scale(1.15);

    color:#bb88ff;
}

.logo3d .space{
    width:18px;
}

@keyframes logoFloat{

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

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

}

nav{
    display:flex;

    gap:20px;
}

nav a{
    color:#fff;

    text-decoration:none;

    font-weight:600;

    padding:10px 16px;

    border-radius:10px;

    position:relative;

    transition:.35s;
}

nav a:hover,
nav a.active{

    color:#bb8cff;

    background:
    rgba(155,92,255,.12);

    box-shadow:
    0 0 15px rgba(155,92,255,.35);
}

nav a::after{
    content:"";

    position:absolute;

    left:16px;

    bottom:5px;

    width:0;

    height:2px;

    background:#8d4dff;

    transition:.35s;
}

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

    width:calc(100% - 32px);
}

.menu{
    display:none;

    font-size:32px;

    cursor:pointer;

    color:#fff;
}


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

.store-hero{
    position:relative;

    min-height:75vh;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:150px 20px 100px;

    overflow:hidden;
}

.store-hero::before{
    content:"";

    position:absolute;

    width:650px;
    height:650px;

    background:
    radial-gradient(
    circle,
    #8d4dff55,
    transparent 70%
    );

    border-radius:50%;

    filter:blur(50px);

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

    z-index:-3;
}

.store-hero::after{
    content:"";

    position:absolute;

    width:900px;
    height:900px;

    background:
    radial-gradient(
    circle,
    rgba(155,92,255,.18),
    transparent 70%
    );

    filter:blur(60px);

    top:-300px;

    left:50%;

    transform:translateX(-50%);

    z-index:-3;
}

.store-hero-content{
    animation:fadeHero 1.4s ease;
}

.welcome{
    color:#9d7cff;

    font-size:15px;

    letter-spacing:5px;

    margin-bottom:25px;
}

.store-hero h1{
    font-size:100px;

    font-weight:900;

    line-height:1;

    text-shadow:
    0 0 15px #8d4dff,
    0 0 30px #8d4dff,
    0 0 60px #8d4dff,
    0 0 90px #8d4dff;

    animation:floatTitle 4s ease-in-out infinite;
}

.store-hero h1 span{
    color:#9b5cff;
}

.store-hero-content > p:last-child{
    max-width:750px;

    margin:30px auto;

    color:#d4d4d4;

    font-size:18px;

    line-height:1.8;
}

@keyframes fadeHero{

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

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

}

@keyframes floatTitle{

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

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

}

@keyframes pulse{

    0%,100%{
        transform:scale(.8);

        opacity:.5;
    }

    50%{
        transform:scale(1.1);

        opacity:1;
    }

}


/* =========================
STARS
========================= */

.stars{
    position:absolute;

    width:100%;
    height:100%;

    overflow:hidden;

    z-index:-2;
}

.stars::before{
    content:"";

    position:absolute;

    width:3px;
    height:3px;

    background:#fff;

    border-radius:50%;

    box-shadow:
    120px 50px white,
    350px 200px #9b5cff,
    550px 150px white,
    750px 350px cyan,
    950px 120px white,
    1150px 250px #9b5cff,
    1450px 450px white,
    1700px 150px cyan,
    400px 500px white,
    800px 650px #9b5cff,
    1200px 600px white,
    1600px 700px cyan;

    animation:starsMove 12s linear infinite;
}

@keyframes starsMove{

    0%{
        transform:translateY(0);
        opacity:.8;
    }

    50%{
        opacity:1;
    }

    100%{
        transform:translateY(-80px);
        opacity:.6;
    }

}


/* =========================
FLOATING
========================= */

.floating{
    position:absolute;

    border-radius:50%;

    filter:blur(8px);

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

    opacity:.35;
}

.floating1{
    width:120px;
    height:120px;

    background:#8d4dff;

    top:15%;
    left:10%;
}

.floating2{
    width:180px;
    height:180px;

    background:#00d4ff;

    bottom:12%;
    right:10%;

    animation-delay:2s;
}

.floating3{
    width:90px;
    height:90px;

    background:#ff00ff;

    top:65%;
    left:20%;

    animation-delay:4s;
}

@keyframes float{

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

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

}

.hero-lights{
    position:absolute;

    inset:0;

    overflow:hidden;

    pointer-events:none;

    z-index:-2;
}

.light{
    position:absolute;

    border-radius:50%;

    filter:blur(100px);

    opacity:.5;

    animation:lightMove 10s ease-in-out infinite;
}

.light1{
    width:300px;
    height:300px;

    background:#9b5cff;

    top:15%;
    left:15%;
}

.light2{
    width:250px;
    height:250px;

    background:#00d4ff;

    bottom:10%;
    right:15%;

    animation-delay:2s;
}

.light3{
    width:200px;
    height:200px;

    background:#ff4dff;

    top:40%;
    left:55%;

    animation-delay:4s;
}

@keyframes lightMove{

    0%,100%{
        transform:translate(0,0) scale(1);
    }

    50%{
        transform:translate(30px,-40px) scale(1.2);
    }

}

.grid-overlay{
    position:absolute;

    inset:0;

    background-image:
    linear-gradient(
    rgba(255,255,255,.03) 1px,
    transparent 1px
    ),
    linear-gradient(
    90deg,
    rgba(255,255,255,.03) 1px,
    transparent 1px
    );

    background-size:60px 60px;

    mask-image:
    linear-gradient(
    to bottom,
    black,
    transparent
    );

    pointer-events:none;

    opacity:.25;
}


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

.store-section{
    position:relative;

    padding:110px 7%;
}

.section-heading{
    text-align:center;

    margin-bottom:70px;
}

.section-heading > p:first-child{
    color:#9d7cff;

    letter-spacing:5px;

    font-size:13px;

    margin-bottom:12px;
}

.section-heading h2{
    font-size:55px;

    font-weight:900;

    text-shadow:
    0 0 15px #9b5cff,
    0 0 35px #9b5cff;
}

.section-heading h2 span{
    color:#9b5cff;
}

.section-description{
    max-width:700px;

    margin:20px auto 0;

    color:#cfcfcf;

    line-height:1.8;

    font-size:16px;
}


/* =========================
PRODUCT CARDS
========================= */

.product-container{
    display:grid;

    grid-template-columns:
    repeat(3,1fr);

    gap:30px;

    max-width:1250px;

    margin:auto;
}

.product-card{

    position:relative;

    padding:38px 30px;

    text-align:center;

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

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

    border-radius:28px;

    backdrop-filter:blur(20px);

    box-shadow:
    0 10px 40px rgba(0,0,0,.35),
    0 0 30px rgba(155,92,255,.15);

    transition:.5s;

    overflow:hidden;
}

.product-card::before{

    content:"";

    position:absolute;

    width:220px;
    height:220px;

    top:-120px;
    left:-100px;

    background:#9b5cff55;

    border-radius:50%;

    filter:blur(50px);

    transition:.5s;
}

.product-card:hover::before{

    transform:scale(1.8);
}

.product-card:hover{

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

    border-color:#9b5cff;

    box-shadow:
    0 0 35px #9b5cff55,
    0 0 80px #9b5cff22;
}

.product-icon{

    position:relative;

    font-size:55px;

    margin-bottom:15px;

    filter:
    drop-shadow(0 0 15px #9b5cff);

    transition:.5s;
}

.product-card:hover .product-icon{

    transform:
    translateY(-8px)
    scale(1.15)
    rotate(5deg);
}

.product-label{

    position:relative;

    display:inline-block;

    padding:6px 15px;

    border-radius:20px;

    background:
    rgba(155,92,255,.12);

    border:
    1px solid rgba(155,92,255,.3);

    color:#b993ff;

    font-size:10px;

    letter-spacing:2px;

    font-weight:700;

    margin-bottom:12px;
}

.product-card h3{

    position:relative;

    font-size:30px;

    font-weight:800;

    letter-spacing:2px;

    margin-bottom:8px;

    text-shadow:
    0 0 15px rgba(155,92,255,.5);
}

.price{

    position:relative;

    font-size:38px;

    font-weight:800;

    color:#9b5cff;

    text-shadow:
    0 0 15px #9b5cff,
    0 0 30px #9b5cff;

}

.price span{

    font-size:18px;

    color:#ccc;

    text-shadow:none;

}

.line{

    width:80%;

    height:1px;

    background:
    linear-gradient(
    90deg,
    transparent,
    #9b5cff,
    transparent
    );

    margin:25px auto;
}

.product-card ul{

    position:relative;

    list-style:none;

    text-align:left;

    min-height:190px;

}

.product-card li{

    color:#d5d5d5;

    font-size:14px;

    line-height:1.8;

    margin-bottom:7px;

}

.product-description{

    position:relative;

    color:#aaa;

    font-size:13px;

    line-height:1.6;

    min-height:42px;

    margin:15px 0 25px;
}


/* =========================
BUY BUTTON
========================= */

.buy-btn{

    position:relative;

    width:100%;

    border:none;

    padding:15px 20px;

    border-radius:50px;

    background:#9b5cff;

    color:#fff;

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

    font-size:15px;

    font-weight:800;

    letter-spacing:1px;

    cursor:pointer;

    overflow:hidden;

    box-shadow:
    0 0 20px #9b5cff,
    0 0 40px rgba(155,92,255,.4);

    transition:.4s;
}

.buy-btn:hover{

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

    letter-spacing:2px;

    box-shadow:
    0 0 35px #a66cff,
    0 0 70px #a66cff;
}

.buy-btn::before{

    content:"";

    position:absolute;

    left:-120%;

    top:0;

    width:100%;

    height:100%;

    background:
    linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.4),
    transparent
    );

    transition:.8s;
}

.buy-btn:hover::before{

    left:120%;
}


/* =========================
KEYS
========================= */

.keys-section{

    padding-top:80px;

    padding-bottom:130px;
}

.keys-container{

    grid-template-columns:
    repeat(4,1fr);

    max-width:1350px;
}

.key-card{

    min-height:430px;

}

.key-card ul{

    min-height:70px;

    text-align:center;
}

.key-card li{

    font-size:16px;

    font-weight:700;

    color:#ddd;
}


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

footer{

    padding:70px 8%;

    text-align:center;

    background:#080811;

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

footer h2{

    font-size:40px;

    margin-bottom:15px;
}

footer span{

    color:#9b5cff;

    text-shadow:
    0 0 15px #9b5cff,
    0 0 40px #9b5cff;
}

footer p{

    color:#bdbdbd;

    margin-top:10px;
}

.social{

    margin:30px 0;

    display:flex;

    justify-content:center;

    gap:25px;
}

.social i{

    font-size:28px;

    width:60px;
    height:60px;

    line-height:60px;

    border-radius:50%;

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

    transition:.4s;

    cursor:pointer;
}

.social i:hover{

    background:#8d4dff;

    transform:
    translateY(-8px)
    rotate(360deg);

    box-shadow:
    0 0 25px #8d4dff;
}

.copy{

    margin-top:30px;

    font-size:15px;

    opacity:.7;
}


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

@media(max-width:1100px){

    .product-container{

        grid-template-columns:
        repeat(2,1fr);

    }

    .keys-container{

        grid-template-columns:
        repeat(2,1fr);

    }

}

@media(max-width:900px){

    nav{

        position:absolute;

        top:80px;
        right:20px;

        display:flex;

        flex-direction:column;

        background:
        rgba(10,10,20,.95);

        padding:20px;

        border-radius:15px;

        opacity:0;

        visibility:hidden;

        transform:translateY(-20px);

        transition:.4s;

    }

    nav.active{

        opacity:1;

        visibility:visible;

        transform:translateY(0);

    }

    .menu{

        display:block;

    }

    .store-hero h1{

        font-size:75px;

    }

}

@media(max-width:600px){

    .logo3d{

        font-size:28px;

        gap:4px;

    }

    .store-hero{

        min-height:80vh;

        padding:140px 20px 100px;

    }

    .welcome{

        font-size:11px;

        letter-spacing:3px;

    }

    .store-hero h1{

        font-size:48px;

    }

    .store-hero-content > p:last-child{

        font-size:15px;

    }

    .store-section{

        padding:
        80px 20px;
    }

    .section-heading{

        margin-bottom:45px;

    }

    .section-heading h2{

        font-size:38px;

    }

    .section-description{

        font-size:14px;

    }

    .product-container,
    .keys-container{

        grid-template-columns:1fr;

    }

    .product-card{

        padding:35px 25px;

    }

    .loader-logo h1{

        font-size:50px;

    }

    .loader-bar{

        width:260px;

    }

}