*{
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{

margin:0;
font-family:Inter,sans-serif;

background:
radial-gradient(circle at 20% 20%, rgba(59,130,246,.12), transparent 40%),
radial-gradient(circle at 80% 70%, rgba(59,130,246,.08), transparent 40%),
#020617;

color:#e2e8f0;
line-height:1.7;

}

/* layout */

.layout{
display:grid;
grid-template-columns:320px 1fr;
min-height:100vh;
}

/* sidebar */

.sidebar{

position:sticky;
top:0;

height:100vh;

padding:3rem 2rem;

border-right:1px solid rgba(148,163,184,.15);

}

/* title */

.hero-title{
font-size:3rem;
line-height:1.1;
margin-bottom:.3rem;
}

/* role */

.sidebar-role{
color:#3b82f6;
margin-bottom:1rem;
}

/* intro */

.sidebar-intro{
color:#94a3b8;
font-size:.9rem;
margin-bottom:2rem;
}

/* terminal */

.terminal{
margin-top:10px;
font-family:monospace;
font-size:.9rem;
color:#3b82f6;
}

.cursor{
width:8px;
height:1em;
background:#3b82f6;
display:inline-block;
margin-left:4px;
animation:blink 1s infinite;
}

@keyframes blink{

0%{opacity:1;}
50%{opacity:0;}
100%{opacity:1;}

}

/* nav */

.sidebar-nav{
display:flex;
flex-direction:column;
gap:1.2rem;
position:relative;
margin-top:30px;
}

.sidebar-nav a{

color:#94a3b8;
text-decoration:none;
font-size:.9rem;
transition:.2s;

}

.sidebar-nav a:hover,
.sidebar-nav a.active{
color:#3b82f6;
}

/* sliding indicator */

.nav-indicator{

position:absolute;

left:-16px;

width:10px;
height:2px;

background:#3b82f6;

transition:transform .3s ease;

}

/* socials */

.sidebar-social{

margin-top:40px;

display:flex;
flex-direction:column;

gap:16px;

}

.sidebar-social a{

color:#94a3b8;

transition:.25s;

}

.sidebar-social a:hover{

color:#3b82f6;

transform:translateY(-2px);

}

.sidebar-social svg{

width:20px;
height:20px;

}

.sidebar-line{

width:1px;
height:120px;

background:#64748b;

margin-top:10px;

}

/* main */

.main{

padding:4rem 3rem;
max-width:720px;

}

/* sections */

.section{

opacity:0;
transform:translateY(40px) scale(.96);

transition:opacity .8s ease, transform .8s ease;

margin-bottom:5rem;

}

.section.reveal{

opacity:1;
transform:translateY(0) scale(1);

}

.section h2{

font-size:1.6rem;
margin-bottom:1.5rem;

}

.section h2::before{

content:"";
display:block;

width:40px;
height:2px;

background:#3b82f6;

margin-bottom:1rem;

}

/* projects */

.project{

margin-bottom:2rem;
padding:1rem;

border-radius:8px;

transition:.2s;

}

.project:hover{

transform:translateY(-4px);

box-shadow:0 10px 30px rgba(0,0,0,.3);

}

.tech{

font-size:.85rem;
color:#94a3b8;

}

/* cursor glow */

.cursor-glow{

position:fixed;

width:400px;
height:400px;

pointer-events:none;

background:radial-gradient(circle,#3b82f6 0%,transparent 60%);

opacity:.12;

filter:blur(80px);

transform:translate(-50%,-50%);

z-index:-1;

}

/* scroll progress */

.scroll-progress{

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

height:3px;

background:#3b82f6;

width:0%;

z-index:999;

}

/* footer */

.footer-note{

position:fixed;

bottom:20px;
right:30px;

font-size:12px;

color:#64748b;

opacity:.7;

}

.footer-note:hover{
opacity:1;
}

/* mobile */

@media(max-width:900px){

.layout{
grid-template-columns:1fr;
}

.sidebar{
position:relative;
height:auto;
border-right:none;
border-bottom:1px solid rgba(148,163,184,.15);
}

.main{
padding:2rem;
}

}