/* === Reset & base === */
* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family: system-ui, -apple-system, Roboto, sans-serif;
  color: #eee;
  background: #0f0f10;
  line-height: 1.6;
}
a { color: #3b82f6; text-decoration: none; }
a:hover { text-decoration: underline; }

.container { max-width: 900px; margin: 0 auto; padding: 2rem 1rem; }

/* === Navbar === */
.navbar {
  position: sticky; top: 0; background: #0f0f10ee;
  border-bottom: 1px solid #222; backdrop-filter: blur(8px); z-index:100;
}
.wrap { max-width:1000px; margin:0 auto; padding:.8rem 1rem;
  display:flex; align-items:center; justify-content:space-between; }
.brand { font-weight:800; font-size:1.2rem; color:#fff; }
.nav { display:flex; gap:1rem; }
.nav a { color:#ccc; padding:.5rem .8rem; border-radius:.5rem; }
.nav a.active, .nav a:hover { background:#3b82f6; color:#fff; }
.menu-btn { display:none; background:none; border:1px solid #333; color:#fff;
  padding:.4rem .7rem; border-radius:.4rem; cursor:pointer; }
@media(max-width:720px){
  .menu-btn{display:block;}
  .nav{display:none;position:absolute;right:1rem;top:3.5rem;flex-direction:column;
       background:#121212;border:1px solid #333;padding:.6rem;border-radius:.5rem;}
  .nav.open{display:flex;}
}

/* === Hero === */
.hero {
  text-align:center; padding:4rem 1rem; max-width:700px; margin:auto;
}
.hero img.profile-img {
  width:120px; height:120px; border-radius:50%; object-fit:cover;
  border:3px solid #3b82f6; margin-bottom:1.5rem;
}
.hero h1 span { color:#3b82f6; }
.hero .btn { margin-top:1.5rem; display:inline-block; padding:.8rem 1.5rem;
  background:#3b82f6; color:#fff; border-radius:9999px; font-weight:600; transition:.2s;}
.hero .btn:hover { background:#2563eb; }

/* === Sections === */
section { padding:3rem 1rem; max-width:1000px; margin:auto; }
h2 { font-size:1.8rem; margin-bottom:1rem; border-bottom:2px solid #3b82f6; display:inline-block; }

.grid { display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); }
.card {
  background:#181818; padding:1.5rem; border-radius:.8rem;
  box-shadow:0 2px 6px rgba(0,0,0,.3);
}
.card h3{margin-bottom:.5rem;color:#3b82f6;}

/* === Projects === */
.projects-grid { display:grid; gap:2rem; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.project-card { background:#181818; border-radius:.8rem; overflow:hidden; }
.project-card img { width:100%; height:180px; object-fit:cover; }
.project-card .link { display:block; margin-top:.6rem; }

/* === Form === */
.contact-form { display:flex; flex-direction:column; gap:1rem; max-width:500px; margin:2rem auto; }
.contact-form input, .contact-form textarea {
  padding:.8rem; border:1px solid #333; border-radius:.5rem; background:#111; color:#eee;
}
.contact-form .btn { align-self:flex-start; background:#3b82f6; color:#fff;
  padding:.8rem 1.5rem; border:none; border-radius:.5rem; cursor:pointer; font-weight:600;}
.contact-form .btn:hover { background:#2563eb; }

/* === Footer === */
footer { text-align:center; padding:2rem 0; border-top:1px solid #222; opacity:.8; margin-top:2rem; }