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

html{
scroll-behavior:smooth;
}

body{
color:#fff;
background:
radial-gradient(circle at 15% 20%, rgba(88,28,135,.35), transparent 25%),
radial-gradient(circle at 85% 30%, rgba(37,99,235,.25), transparent 20%),
radial-gradient(circle at 50% 80%, rgba(14,165,233,.18), transparent 20%),
#040612;
overflow-x:hidden;
}

nav{
position:sticky;
top:0;
z-index:999;
background:rgba(10,15,30,.92);
backdrop-filter:blur(8px);
padding:14px;
text-align:center;
border-bottom:1px solid rgba(255,255,255,.08);
}

nav a{
color:#fff;
text-decoration:none;
margin:0 12px;
font-weight:600;
transition:.2s;
}

nav a:hover{
color:#60a5fa;
}

header{
padding:90px 20px;
text-align:center;
}

header h1{
font-size:3.6rem;
font-weight:900;
text-shadow:0 0 25px rgba(96,165,250,.45);
}

header p{
margin-top:10px;
color:#cbd5e1;
}

section{
max-width:1150px;
margin:auto;
padding:45px 18px;
}

h2{
font-size:1.8rem;
margin-bottom:18px;
}

.card{
background:rgba(30,41,59,.75);
backdrop-filter:blur(10px);
border:1px solid rgba(255,255,255,.06);
padding:20px;
border-radius:16px;
margin-bottom:18px;
}

.scroll-row{
display:flex;
gap:16px;
overflow-x:auto;
padding-bottom:10px;
scrollbar-width:thin;
scroll-behavior:smooth;
}

.scroll-row::-webkit-scrollbar{
height:8px;
}

.scroll-row::-webkit-scrollbar-thumb{
background:#475569;
border-radius:10px;
}

.scroll-row::-webkit-scrollbar-track{
background:transparent;
}

.item{
min-width:320px;
max-width:320px;
background:rgba(51,65,85,.75);
padding:10px;
border-radius:14px;
flex-shrink:0;
border:1px solid rgba(255,255,255,.05);
transition:transform .2s ease;
display:block;
text-decoration:none;
}

.item:hover{
transform:translateY(-3px);
}

.viewall{
display:flex;
justify-content:center;
align-items:center;
font-weight:700;
font-size:1.1rem;
color:#60a5fa;
text-decoration:none;
min-height:200px;
}

iframe,
img{
width:100%;
border:none;
border-radius:10px;
display:block;
content-visibility:auto;
contain-intrinsic-size:300px;
}

.thumb{
cursor:pointer;
overflow:hidden;
}

.thumb img{
transition:transform .25s ease;
}

.thumb:hover img{
transform:scale(1.03);
}

.socials{
text-align:center;
}

.socials a{
color:white;
font-size:1.8rem;
margin:0 12px;
transition:.2s;
}

.socials a:hover{
color:#60a5fa;
}

.email-center{
text-align:center;
font-size:1.05rem;
}

footer{
background:rgba(10,15,30,.9);
text-align:center;
padding:30px;
margin-top:30px;
border-top:1px solid rgba(255,255,255,.06);
}

footer a{
color:#cbd5e1;
text-decoration:none;
margin:0 4px;
transition:.2s;
}

footer a:hover{
color:#60a5fa;
}

@media (max-width:768px){

header{
padding:70px 15px;
}

header h1{
font-size:2.5rem;
}

header p{
font-size:.95rem;
}

nav a{
margin:0 8px;
font-size:.95rem;
}

section{
padding:35px 14px;
}

.item{
min-width:280px;
max-width:280px;
}

h2{
font-size:1.5rem;
}

.socials a{
font-size:1.6rem;
margin:0 10px;
}

}

@media (max-width:480px){

header h1{
font-size:2rem;
}

.item{
min-width:250px;
max-width:250px;
}

nav{
padding:12px;
}

nav a{
display:inline-block;
margin:4px 6px;
font-size:.9rem;
}

}

/* 404 Page */

.error-page{
min-height:100vh;
display:flex;
justify-content:center;
align-items:center;
padding:20px;
position:relative;
overflow:hidden;
}

.error-stars{
position:absolute;
inset:0;
pointer-events:none;
opacity:.25;
background-image:
radial-gradient(white 1px, transparent 1px),
radial-gradient(white 1px, transparent 1px);
background-size:120px 120px,180px 180px;
}

.error-card{
position:relative;
z-index:2;
width:100%;
max-width:750px;
padding:40px;
text-align:center;
background:rgba(30,41,59,.75);
backdrop-filter:blur(10px);
border:1px solid rgba(255,255,255,.06);
border-radius:24px;
}

.error-code{
font-size:8rem;
font-weight:900;
line-height:1;
margin-bottom:10px;
text-shadow:0 0 25px rgba(96,165,250,.45);
}

.error-card h1{
font-size:2.2rem;
margin-bottom:15px;
}

.error-card p{
color:#cbd5e1;
max-width:600px;
margin:0 auto 30px auto;
line-height:1.7;
}

.error-actions{
display:flex;
justify-content:center;
gap:15px;
flex-wrap:wrap;
}

.error-btn{
display:inline-block;
padding:14px 28px;
border-radius:12px;
background:#2563eb;
color:#fff;
text-decoration:none;
font-weight:700;
transition:.2s;
}

.error-btn:hover{
transform:translateY(-2px);
}

.error-btn.secondary{
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.08);
}

.error-footer{
margin-top:30px;
color:#94a3b8;
font-size:.95rem;
}

@media (max-width:768px){

.error-card{
padding:30px 20px;
}

.error-code{
font-size:6rem;
}

.error-card h1{
font-size:1.8rem;
}

}

@media (max-width:480px){

.error-code{
font-size:4.5rem;
}

.error-card h1{
font-size:1.5rem;
}

.error-btn{
width:100%;
max-width:250px;
}

}