:root{

--bg:#0b0b0b;
--card:#151515;
--border:#262626;

--text:#f0f0f0;
--muted:#9a9a9a;

--accent:#6366f1;

font-family:Inter,system-ui;

}

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

html,body{
overflow-x:hidden;
}

body{

background:linear-gradient(#0b0b0b,#111);
color:var(--text);

display:flex;
justify-content:center;

}

/* container */

.container{

width:100%;
max-width:1100px;

padding:clamp(30px,6vw,70px) 20px;

display:flex;
flex-direction:column;
gap:clamp(40px,6vw,70px);

}

/* glow */

body::before{

content:"";
position:fixed;

width:700px;
height:700px;

background:radial-gradient(circle,#6366f144,transparent 70%);

filter:blur(160px);

top:-200px;
left:-200px;

z-index:-1;

}

body::after{

content:"";
position:fixed;

width:700px;
height:700px;

background:radial-gradient(circle,#4f46e544,transparent 70%);

filter:blur(160px);

bottom:-200px;
right:-200px;

z-index:-1;

}

/* grid overlay */

.grid-overlay{

position:fixed;
inset:0;

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

background-size:40px 40px;

mask-image:radial-gradient(circle at center,black 20%,transparent 70%);

pointer-events:none;

z-index:-2;

}

/* HERO */

.hero{

display:grid;
grid-template-columns:auto 1fr;

gap:32px;
align-items:center;

background:var(--card);
padding:clamp(22px,4vw,34px);

border-radius:18px;
border:1px solid var(--border);

}

.avatar{

width:110px;
height:110px;

border-radius:50%;
object-fit:cover;

transition:.3s;

}

.avatar:hover{
transform:scale(1.04);
}

.hero-text h1{

font-size:clamp(24px,3vw,32px);
letter-spacing:-0.02em;

}

.role{

color:var(--accent);
margin:6px 0;

}

.bio{

max-width:560px;
color:var(--muted);
font-size:15px;

}

.actions{

margin-top:16px;
display:flex;
flex-wrap:wrap;
gap:10px;

}

.btn{

background:#1a1a1a;
border:1px solid var(--border);

padding:10px 18px;
border-radius:10px;

text-decoration:none;
color:var(--text);

font-size:14px;

transition:.18s ease;

}

.btn:hover{

background:#202020;
border-color:#333;
transform:translateY(-2px);

}

/* ABOUT */

.about p{

color:var(--muted);
max-width:650px;
line-height:1.6;

}

/* FEATURED */

.featured-card{

display:grid;
grid-template-columns:1.3fr 1fr;

gap:26px;

padding:24px;

background:var(--card);
border-radius:18px;
border:1px solid var(--border);

text-decoration:none;
color:inherit;

transition:.25s;
cursor:pointer;

}

.featured-card:hover{

transform:translateY(-6px);
border-color:#333;

box-shadow:
0 10px 40px rgba(0,0,0,0.6),
0 0 30px rgba(99,102,241,0.25);

}

.featured-preview img{

width:100%;
border-radius:12px;
border:1px solid #2a2a2a;

transition:.4s;

}

.featured-card:hover img{
transform:scale(1.03);
}

.featured-info p{

color:var(--muted);
margin-top:6px;

}

/* TAGS */

.tags{
display:flex;
gap:8px;
margin-top:10px;
flex-wrap:wrap;
}

.tags span{

font-size:12px;
padding:5px 10px;

background:#1c1c1c;
border-radius:7px;

color:#aaa;

}

/* PROJECT GRID */

.grid{

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

}

.card{

background:var(--card);
padding:22px;

border-radius:14px;
border:1px solid var(--border);

text-decoration:none;
color:inherit;

transition:.25s;

position:relative;
overflow:hidden;

}

.card:hover{

transform:translateY(-6px);
border-color:#333;

box-shadow:0 10px 40px rgba(0,0,0,0.6);

}

/* preview image */

.preview{

margin-top:14px;
border-radius:10px;
overflow:hidden;

}

.preview img{

width:100%;
display:block;

transition:.4s;

}

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

/* stars */

.stars{

display:block;
margin-top:8px;

font-size:13px;
color:var(--accent);

}

/* STACK */

.stack-grid{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
gap:12px;

}

.stack-grid span{

background:var(--card);
border:1px solid var(--border);

padding:12px;
text-align:center;

border-radius:10px;
font-size:14px;

transition:.2s;

}

.stack-grid span:hover{
transform:translateY(-3px);
border-color:#333;
}

/* GITHUB */

.github{

background:var(--card);
padding:22px;

border-radius:16px;
border:1px solid var(--border);

}

.github img{

width:100%;
margin-top:12px;

}

/* FOOTER */

.footer{

text-align:center;
font-size:13px;
color:var(--muted);

padding-top:20px;

}

/* TITLES */

section h2{

margin-bottom:18px;
font-size:20px;

position:relative;

}

section h2::after{

content:"";
position:absolute;

bottom:-6px;
left:0;

width:40px;
height:2px;

background:linear-gradient(90deg,var(--accent),transparent);

}

/* MOBILE */

@media(max-width:720px){

.hero{
grid-template-columns:1fr;
text-align:center;
}

.avatar{
margin:auto;
}

.featured-card{
grid-template-columns:1fr;
}

}