:root{

--bg:#0b0b0b;
--text:#f5f5f5;
--card:#141414;
--header:#111;
--accent:#c40000;
--accent-soft:#ff2a2a;

}

html{
scroll-behavior:smooth;
}

body{

margin:0;
font-family:system-ui,-apple-system,Segoe UI,Roboto;

background:
linear-gradient(135deg,#0b0b0b 0%,#120000 40%,#1a0000 100%);

color:var(--text);

overflow-x:hidden;

}

/* animated background */

body::before{

content:"";
position:fixed;
top:0;
left:0;
width:100%;
height:100%;

background:

radial-gradient(circle at 20% 30%,rgba(255,0,0,0.15),transparent 40%),
radial-gradient(circle at 80% 70%,rgba(255,0,0,0.1),transparent 40%);

pointer-events:none;

animation:bgMove 20s linear infinite;

}

@keyframes bgMove{

0%{transform:translateY(0)}

50%{transform:translateY(-40px)}

100%{transform:translateY(0)}

}

/* links */

a{
color:var(--text);
text-decoration:none;
transition:0.25s;
}

a:hover{
color:var(--accent-soft);
}

/* header */

header{

display:flex;
align-items:center;
justify-content:space-between;

padding:18px 40px;

background:var(--header);

position:sticky;
top:0;
z-index:100;

}

.logo{
font-size:22px;
font-weight:700;
letter-spacing:1px;
}

/* nav */

nav{
display:flex;
gap:20px;
}

nav a{
opacity:0.85;
}

nav a:hover{
color:var(--accent-soft);
}

/* hero */

.hero{

padding:130px 20px;
text-align:center;

animation:fadeUp 1s ease;

}

.title{

font-size:56px;
margin:0;

color:var(--accent-soft);

text-shadow:0 0 15px rgba(255,0,0,0.35);

}

.subtitle{
margin-top:10px;
opacity:0.75;
}

/* sections */

.about,
.projects,
.contact{

padding:80px 40px;

}

.about{
text-align:center;
}

/* tools */

.tools{

margin-top:30px;

display:flex;
justify-content:center;
gap:18px;
flex-wrap:wrap;

}

.tools img{

height:36px;
opacity:0.85;
transition:0.25s;

}

.tools img:hover{

transform:scale(1.2) rotate(5deg);
opacity:1;

}

/* cards */

.cards{

display:grid;

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

gap:22px;

margin-top:40px;

}

.card{

background:var(--card);

border:1px solid rgba(255,0,0,0.2);

border-radius:10px;

padding:22px;

transition:0.25s;

position:relative;
overflow:hidden;

}

/* glow */

.card::before{

content:"";

position:absolute;
inset:0;

background:linear-gradient(
120deg,
transparent,
rgba(255,0,0,0.15),
transparent
);

opacity:0;
transition:0.3s;

}

.card:hover::before{
opacity:1;
}

.card:hover{

transform:translateY(-6px);

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

}

/* card image */

.card img{

width:100%;

border-radius:8px;

margin-bottom:10px;

transition:0.3s;

}

.card:hover img{
transform:scale(1.05);
}

.card h3{
margin:8px 0 6px 0;
}

.card p{
opacity:0.75;
font-size:14px;
}

.card a{

display:inline-block;
margin-top:8px;
font-size:14px;

color:var(--accent-soft);

}

/* buttons */

button{

padding:8px 14px;

border-radius:6px;
border:none;

cursor:pointer;

background:var(--card);
color:var(--text);

transition:0.2s;

}

button:hover{

background:var(--accent);
color:white;

transform:scale(1.05);

}

/* load more */

.load-more-container{

text-align:center;
margin-top:30px;

}

/* contact */

.contact{
text-align:center;
}

/* particles */

#particles{

position:fixed;
top:0;
left:0;

width:100%;
height:100%;

z-index:-1;

}

/* animation */

@keyframes fadeUp{

from{

opacity:0;
transform:translateY(40px);

}

to{

opacity:1;
transform:translateY(0);

}

}

/* mobile */

@media (max-width:700px){

header{

flex-direction:column;
gap:10px;

}

.hero{
padding:80px 20px;
}

.title{
font-size:36px;
}

.about,
.projects,
.contact{
padding:60px 20px;
}

}