* { margin:0; padding:0; box-sizing:border-box; font-family: 'Segoe UI', sans-serif; }

    body { background:#0f172a; color:#e2e8f0; }

    header {
      display:flex; justify-content:space-between; align-items:center;
      padding:20px 10%; position:sticky; top:0;
      background:rgba(15,23,42,0.8); backdrop-filter:blur(10px); z-index:100;
    }

    header h1 { color:#38bdf8; }

    nav a {
      margin-left:20px; text-decoration:none; color:#e2e8f0; transition:.3s;
    }
    nav a:hover { color:#38bdf8; }

    .hero {
      height:100vh; display:flex; align-items:center; justify-content:center;
      flex-direction:column; text-align:center;
      background:linear-gradient(rgba(15,23,42,0.7), rgba(15,23,42,0.9)),
      url('./img/hero-bg.jpg');
      background-size:cover; background-position:center;
    }

    .hero img {
      width:140px; height:140px; border-radius:50%; margin-bottom:20px;
      border:3px solid #38bdf8;
    }

    .hero h2 { font-size:2.5rem; }

    .typing {
      color:#38bdf8;
      border-right:3px solid #38bdf8;
      padding-right:5px;
      white-space:nowrap;
      overflow:hidden;
      display:inline-block;
    }

    .btn {
      margin-top:20px; padding:12px 25px;
      background:#38bdf8; border:none; border-radius:8px;
      cursor:pointer; color:#0f172a; font-weight:bold;
    }

    section { padding:80px 10%; }

    h2.section-title { margin-bottom:20px; color:#38bdf8; }

    .about {
      display:grid; grid-template-columns:1fr 1fr; gap:30px; align-items:center;
    }

    .about img { width:100%; border-radius:12px; }

    .skills {
      display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:20px;
    }

    .skill {
      background:#1e293b; padding:15px; border-radius:10px;
    }

    .bar {
      height:8px; background:#334155; border-radius:5px; overflow:hidden; margin-top:8px;
    }

    .bar span { display:block; height:100%; background:#38bdf8; }

    .projects-grid {
      display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:20px;
    }

    .card {
      background:#1e293b; border-radius:12px; overflow:hidden; transition:.3s;
    }

    .card img { width:100%; height:150px; object-fit:cover; }

    .card-content { padding:15px; }

    .card:hover { transform:translateY(-5px); }

    .contact { text-align:center; }

    footer { text-align:center; padding:20px; background:#020617; }

    @media(max-width:768px){
      .about { grid-template-columns:1fr; }
      .hero h2 { font-size:2rem; }
}