/* =========================
   GLOBAL STYLES
========================= */

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

body{

font-family: system-ui, -apple-system, sans-serif;
background:#0b0b0b;
color:white;
line-height:1.6;

}

.progress-bar{

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

width:100%;
height:4px;

background:transparent;

z-index:2000;

}

.progress{

height:4px;
width:0%;

background:#4ea1ff;

transition:width 0.1s linear;

}

main{

max-width:1100px;
margin:auto;
padding:120px 20px;

}

a{
color:white;
text-decoration:none;
}


/* =========================
   NAVBAR
========================= */

.navbar{

position:fixed;
top:0;
width:100%;

background:rgba(0,0,0,0.4);
backdrop-filter:blur(10px);

z-index:1000;

transition:0.3s;

}

.navbar.scrolled{

background:rgba(0,0,0,0.85);
box-shadow:0 5px 20px rgba(0,0,0,0.6);

}

.nav-container{

max-width:1100px;
margin:auto;

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

padding:16px 24px;

}

.logo{
font-weight:600;
font-size:18px;
}


/* =========================
   HAMBURGER
========================= */

.hamburger{

display:flex;
flex-direction:column;
gap:5px;

background:none;
border:none;
cursor:pointer;

}

.hamburger span{

width:26px;
height:3px;
background:white;

transition:0.3s;

}

.hamburger.active span:nth-child(1){
transform:rotate(45deg) translate(5px,5px);
}

.hamburger.active span:nth-child(2){
opacity:0;
}

.hamburger.active span:nth-child(3){
transform:rotate(-45deg) translate(6px,-6px);
}


/* =========================
   SIDE MENU
========================= */

.side-menu{

position:fixed;
top:0;
right:-260px;

width:260px;
height:100%;

background:#121212;

padding:100px 30px;

display:flex;
flex-direction:column;
gap:25px;

transition:0.4s;

z-index:999;

}

.side-menu.active{
right:0;
}

.side-menu a{

font-size:18px;
color:#e0e0e0;

}


/* =========================
   OVERLAY
========================= */

.overlay{

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

width:100%;
height:100%;

background:rgba(0,0,0,0.6);

opacity:0;
pointer-events:none;

transition:0.3s;

}

.overlay.active{

opacity:1;
pointer-events:auto;

}


/* =========================
   HERO
========================= */

.hero{

text-align:center;
margin-bottom:100px;

}

.hero h1{

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

}

.hero-description{

max-width:700px;
margin:auto;
color:#bdbdbd;
font-size:18px;

}


/* =========================
   ARTICLES
========================= */

.articles h2{

margin-bottom:30px;

}

.article-grid{

display:grid;

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

gap:30px;

}

.article-card{

background:rgba(255,255,255,0.05);

padding:25px;

border-radius:12px;

transition:0.3s;

}

.article-card:hover{

transform:translateY(-6px);

background:rgba(255,255,255,0.1);

}

.article-card p{

margin:15px 0;
color:#bdbdbd;

}

.article-card a{

font-size:14px;
color:#6aa6ff;

}


/* =========================
   FOOTER
========================= */

footer{

margin-top:100px;
padding:40px;

text-align:center;

border-top:1px solid rgba(255,255,255,0.1);

}

.footer-nav{

margin-top:15px;

display:flex;
justify-content:center;
gap:20px;

}