/* <!-- style.css --> */
:root{
    --bg: #0d1117;
    --surface: #111827;
    --text: #e5f4ef;
    --muted: #7d8b87;
    --emerald: #10b981;
    --card: rgba(255,255,255,0.05);
}

body{
    margin:0;
    font-family: 'Poppins', sans-serif;
    background: var(--bg);
    color: var(--text);
}

.container{ width: 90%; max-width: 1200px; margin: auto; }

/* Header */
.header{
    position: sticky;
    top: 0;
    background: rgba(0,0,0,0.4);
    backdrop-filter: blur(8px);
    z-index: 999;
    padding: 1rem 0;
}

.logo{ font-size: 1.6rem; font-weight: 700; }
.logo span{ color: var(--emerald); }

.nav-wrapper{ display: flex; align-items: center; justify-content: space-between; }

.nav a{
    margin-left: 1.5rem;
    color: var(--muted);
    text-decoration: none;
    transition: .2s;
}

.nav a:hover{ color: var(--emerald); }

.hamburger{ display:none; cursor:pointer; }
.hamburger span{
    display:block;
    width:28px;
    height:3px;
    background:var(--text);
    margin:5px 0;
    border-radius: 10px;
    transition: transform .32s cubic-bezier(.2,.9,.3,1), opacity .25s ease, background-color .25s ease;
}
.hamburger.open span{ background:var(--emerald); }
.hamburger.open span:nth-child(1){ transform: translateY(8px) rotate(45deg); }
.hamburger.open span:nth-child(2){ opacity:0; transform:scaleX(0); }
.hamburger.open span:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }
.hamburger{ transition: transform .25s ease; }
.hamburger:active{ transform:scale(.98); }


.mobile-menu{
    display:flex;
    flex-direction:column;
    background:linear-gradient(180deg, rgba(17,24,39,0.95), rgba(6,10,14,0.95));
    padding:0;
    text-align:center;
    max-height:0;
    overflow:hidden;
    opacity:0;
    transition:max-height .42s cubic-bezier(.2,.9,.3,1), opacity .28s ease;
    border-bottom:1px solid rgba(16,185,129,0.06);
}
.mobile-menu a{ color:var(--emerald); margin:14px 0; text-decoration:none; font-weight:600; }
.mobile-contact{ margin:14px 0 18px; color:var(--muted); }
.mobile-menu.open{ max-height:360px; padding:18px 12px; opacity:1; }

.mobile-menu a{ color:var(--emerald); margin:10px 0; text-decoration:none; }
.mobile-contact{ margin-top:20px; color:var(--muted); }


/* Hero */
.hero{ display:flex; align-items:center; padding:4rem 0; gap:2rem; }
.hero-left{ flex:1; }
.hero-left span{ color:var(--emerald); }
.subtitle{ color:var(--muted); }
.desc{ margin-top:1rem; line-height:1.7; }

.hero-right{ flex:1; display:flex; justify-content:center; }
.profile-pic{
    width:160px;
    height:160px;
    border-radius:16px;
    object-fit:cover;
    box-shadow:0 8px 40px rgba(16,185,129,0.28), 0 0 40px rgba(16,185,129,0.06) inset;
    transition:transform .35s ease, box-shadow .35s ease;
}
.profile-pic:hover{ transform:translateY(-6px) scale(1.02); box-shadow:0 16px 60px rgba(16,185,129,0.34);} 

/* Projects */
.section-title{
    font-size:2rem;
    margin-bottom:1rem;
    color:var(--emerald);
}

.project-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:1.5rem;
}

.project-card{
    background:var(--card);
    padding:1.5rem;
    border-radius:15px;
    border:1px solid rgba(255,255,255,0.06);
}

.tag{
    display:inline-block;
    margin-top:.5rem;
    margin-right:.5rem;
    padding:.3rem .7rem;
    background:rgba(16,185,129,0.15);
    color:var(--emerald);
    border-radius:20px;
    font-size:.85rem;
}

/* Skills */
.skill-list{
    display:flex;
    flex-wrap:wrap;
    gap:.7rem;
}
.skill-list span{
    background:rgba(255,255,255,0.06);
    padding:.5rem 1rem;
    border-radius:20px;
    color:var(--emerald);
}

/* Contact */
.contact-list{ list-style:none; padding:0; }
.contact-list li{ margin:.6rem 0; }
.contact-list a{ color:var(--emerald); }

/* Footer */
.footer{
    text-align:center;
    padding:2rem 0;
    background:#0b0f13;
    color:var(--muted);
    margin-top:3rem;
}

/* Responsive */
@media(max-width:850px){
    .nav{ display:none; }
    .hamburger{ display:block; }
    .hero{ flex-direction:column-reverse; text-align:center; }
}