/* ===========================
   E333PROJECT
   Premium Download Website
=========================== */

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

html{
    scroll-behavior:smooth;
}

body{

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

    background:#050505;
    color:#fff;

    overflow-x:hidden;

}

/* Background */

.bg-grid{

    position:fixed;
    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:45px 45px;

    z-index:-3;

    animation:gridMove 20s linear infinite;

}

@keyframes gridMove{

from{

transform:translateY(0);

}

to{

transform:translateY(45px);

}

}

.bg-blur{

position:fixed;

width:420px;
height:420px;

border-radius:50%;

filter:blur(120px);

opacity:.15;

z-index:-2;

}

.blur1{

background:#ffffff;

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

animation:float1 12s infinite alternate;

}

.blur2{

background:#777;

bottom:-120px;
right:-100px;

animation:float2 15s infinite alternate;

}

@keyframes float1{

to{

transform:translate(120px,80px);

}

}

@keyframes float2{

to{

transform:translate(-100px,-60px);

}

}

/* Navbar */

nav{

position:sticky;

top:0;

display:flex;

justify-content:space-between;

align-items:center;

padding:20px 10%;

background:rgba(15,15,15,.65);

backdrop-filter:blur(18px);

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

z-index:999;

}

.logo{

font-size:24px;

font-weight:800;

letter-spacing:2px;

}

.status{

display:flex;

align-items:center;

gap:10px;

color:#bbb;

font-size:14px;

}

.status span{

width:10px;

height:10px;

background:#00ff88;

border-radius:50%;

box-shadow:0 0 10px #00ff88;

animation:pulse 1.5s infinite;

}

@keyframes pulse{

50%{

transform:scale(1.5);

opacity:.4;

}

}

/* Hero */

header{

padding:90px 20px;

text-align:center;

}

header h1{

font-size:58px;

font-weight:800;

margin-bottom:18px;

}

header p{

color:#aaa;

font-size:18px;

}

/* Cards */

#cards{

width:min(1200px,90%);

margin:auto;

display:grid;

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

gap:28px;

padding-bottom:90px;

}

.card{

position:relative;

overflow:hidden;

padding:28px;

border-radius:22px;

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

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

backdrop-filter:blur(15px);

transition:.4s;

animation:fadeUp .8s both;

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:none;

}

}

.card:hover{

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

border-color:white;

box-shadow:

0 0 35px rgba(255,255,255,.15);

}

/* Shine */

.shine{

position:absolute;

top:-120%;

left:-40%;

width:50%;

height:300%;

background:linear-gradient(

90deg,

transparent,

rgba(255,255,255,.25),

transparent

);

transform:rotate(25deg);

animation:shine 5s linear infinite;

}

@keyframes shine{

100%{

left:170%;

}

}

.card-top{

display:flex;

gap:18px;

margin-bottom:28px;

align-items:flex-start;

}

.icon{

font-size:42px;

}

.title{

font-size:22px;

margin-bottom:8px;

}

.description{

color:#999;

line-height:1.6;

font-size:15px;

}

/* Buttons */

.buttons{

display:flex;

gap:12px;

}

.buttons a{

flex:1;

padding:14px;

border-radius:12px;

text-decoration:none;

text-align:center;

font-weight:600;

transition:.3s;

}

.download{

background:white;

color:black;

}

.download:hover{

transform:translateY(-3px);

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

}

.password{

background:#1a1a1a;

border:1px solid #333;

color:white;

}

.password:hover{

background:#2b2b2b;

}

/* Footer */

footer{

padding:35px;

text-align:center;

color:#666;

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

}

/* Mobile */

@media(max-width:768px){

header h1{

font-size:38px;

}

nav{

padding:18px;

}

.logo{

font-size:20px;

}

} 
/* Ripple */

.buttons a{
    position:relative;
    overflow:hidden;
}

.ripple{

position:absolute;

border-radius:50%;

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

transform:scale(0);

animation:ripple .7s linear;

pointer-events:none;

}

@keyframes ripple{

to{

transform:scale(4);

opacity:0;

}

}