/* =========================
   THE WEBBED VAULT
========================= */

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

html{
scroll-behavior:smooth;
}

body{

font-family:Poppins,sans-serif;

background:#070707;

color:white;

overflow-x:hidden;

}

/* Background Glow */

body::before{

content:"";

position:fixed;

left:-250px;

top:-250px;

width:700px;

height:700px;

background:#d11f39;

filter:blur(180px);

opacity:.18;

z-index:-2;

}

body::after{

content:"";

position:fixed;

right:-250px;

bottom:-250px;

width:700px;

height:700px;

background:#2563eb;

filter:blur(180px);

opacity:.18;

z-index:-2;

}

/* NAV */

nav{

position:fixed;

top:0;

width:100%;

padding:18px 8%;

display:flex;

justify-content:space-between;

align-items:center;

background:rgba(10,10,10,.55);

backdrop-filter:blur(12px);

z-index:999;

}

.logo{

width:80px;

transition:.4s;

}

.logo:hover{

transform:rotate(-6deg) scale(1.08);

}

nav ul{

display:flex;

gap:30px;

list-style:none;

}

nav li{

cursor:pointer;

transition:.3s;

font-weight:500;

}

nav li:hover{

color:#2563eb;

}

/* HERO */

.hero{

height:100vh;

display:flex;

justify-content:center;

align-items:center;

text-align:center;

padding:40px;

}

.hero h1{

font-family:'Bebas Neue',sans-serif;

font-size:90px;

letter-spacing:4px;

margin-bottom:15px;

}

.hero p{

font-size:22px;

color:#d4d4d4;

margin-bottom:40px;

}

.button{

display:inline-block;

padding:18px 45px;

border-radius:40px;

text-decoration:none;

background:linear-gradient(90deg,#2563eb,#d11f39);

color:white;

font-weight:bold;

transition:.3s;

box-shadow:0 0 25px rgba(37,99,235,.4);

}

.button:hover{

transform:translateY(-5px);

box-shadow:0 0 40px rgba(209,31,57,.5);

}

/* CATEGORIES */

.categories{

padding:100px 8%;

}

.categories h2{

text-align:center;

font-size:42px;

margin-bottom:50px;

font-family:'Bebas Neue';

letter-spacing:2px;

}

.cards{

display:grid;

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

gap:25px;

}

.card{

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

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

border-radius:20px;

padding:35px;

text-align:center;

transition:.35s;

backdrop-filter:blur(12px);

}

.card:hover{

transform:translateY(-10px);

border-color:#2563eb;

box-shadow:0 0 30px rgba(37,99,235,.25);

}

.card{

font-size:20px;

}

.card h3{

margin:18px 0;

font-size:26px;

font-family:'Bebas Neue';

letter-spacing:1px;

}

.card p{

color:#bdbdbd;

}

/* MOBILE */

@media(max-width:900px){

nav ul{

display:none;

}

.hero h1{

font-size:55px;

}

.hero p{

font-size:18px;

}

.logo{

width:65px;

}

}
/* ---------- CATEGORY UPGRADE ---------- */

.icon{
    font-size:60px;
    margin-bottom:20px;
    transition:.4s;
}

.card:hover .icon{
    transform:scale(1.2) rotate(-8deg);
}

.card-btn{

display:inline-block;

margin-top:20px;

padding:12px 24px;

border-radius:30px;

text-decoration:none;

color:white;

background:linear-gradient(90deg,#2563eb,#d11f39);

transition:.3s;

font-size:14px;

}

.card-btn:hover{

transform:translateY(-3px);

box-shadow:0 0 18px rgba(37,99,235,.45);

}
/* ---------- FEATURED PRODUCTS ---------- */

.featured{

padding:100px 8%;

}

.featured h2{

text-align:center;

font-family:'Bebas Neue';

font-size:46px;

letter-spacing:2px;

margin-bottom:50px;

}

.products{

display:grid;

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

gap:30px;

}

.product{

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

padding:30px;

border-radius:20px;

text-align:center;

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

transition:.35s;

}

.product:hover{

transform:translateY(-12px);

box-shadow:0 0 35px rgba(37,99,235,.3);

}

.product-image{

font-size:80px;

margin-bottom:20px;

transition:.3s;

}

.product:hover .product-image{

transform:scale(1.1);

}

.price{

font-size:24px;

font-weight:bold;

margin:20px 0;

color:#4ea3ff;

}

.buy-btn{

display:inline-block;

padding:14px 28px;

border-radius:30px;

background:linear-gradient(90deg,#2563eb,#d11f39);

color:white;

text-decoration:none;

transition:.3s;

}

.buy-btn:hover{

transform:translateY(-4px);

box-shadow:0 0 20px rgba(209,31,57,.4);

}
/* ---------- WHY US ---------- */

.why-us{
padding:100px 8%;
}

.why-us h2{
text-align:center;
font-family:'Bebas Neue';
font-size:46px;
margin-bottom:50px;
letter-spacing:2px;
}

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

.why-card{
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.08);
border-radius:20px;
padding:35px;
text-align:center;
transition:.35s;
}

.why-card:hover{
transform:translateY(-10px);
box-shadow:0 0 25px rgba(209,31,57,.25);
}

.why-icon{
font-size:48px;
margin-bottom:20px;
}
/* ---------- VAULT BANNER ---------- */

.vault-banner{

margin:100px 0;

height:500px;

display:flex;

justify-content:center;

align-items:center;

text-align:center;

position:relative;

background:linear-gradient(rgba(0,0,0,.75),rgba(0,0,0,.8)),
linear-gradient(135deg,#081326,#070707,#260811);

overflow:hidden;

}

.vault-banner::before{

content:"";

position:absolute;

width:800px;

height:800px;

background:#2563eb;

opacity:.08;

border-radius:50%;

left:-350px;

top:-350px;

filter:blur(100px);

}

.vault-banner::after{

content:"";

position:absolute;

width:700px;

height:700px;

background:#d11f39;

opacity:.08;

border-radius:50%;

right:-250px;

bottom:-250px;

filter:blur(100px);

}

.vault-overlay{

position:relative;

z-index:2;

max-width:750px;

padding:30px;

}

.vault-banner h2{

font-family:'Bebas Neue';

font-size:72px;

letter-spacing:4px;

margin-bottom:20px;

}

.vault-banner p{

font-size:20px;

line-height:1.8;

color:#d6d6d6;

margin-bottom:35px;

}
.subtext{

margin-top:15px;

font-size:16px;

color:#bdbdbd;

letter-spacing:1px;

max-width:650px;

margin-left:auto;

margin-right:auto;

}