/* ===== THEME VARIABLES (keep original look as default = dark) ===== */
    :root{
      --bg: linear-gradient(180deg,#061026 0%, #08152a 100%);
      --card:#0b1220;
      --muted:#9aa4b2;
      --accent:#7c5cff;
      --glass: rgba(255,255,255,0.03);
      --text:#e6eef6;
      --radius:14px;
      --gap:1.25rem;
      --max-width:1100px;
      --ff: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
    }

    /* LIGHT THEME OVERRIDE (applies when body has .light) */
    body.light{
      --bg: linear-gradient(180deg,#ffffff 0%, #f6f7fb 100%);
      --card: #ffffff;
      --muted: #6b7280;
      --accent: #6a5acd;
      --glass: rgba(0,0,0,0.04);
      --text: #0b1220;
    }

    *{box-sizing:border-box}
    body{
        margin:0;
        background:var(--bg);
        color:var(--text);
        line-height:1.5;
        font-family:var(--ff);
        transition: background .25s ease, color .25s ease;
    }
    a{ color:inherit; text-decoration:none; }

    /* ======= NAV ======= */
    header{
        backdrop-filter: blur(6px);
        position:sticky;
        top:0;
        z-index:200;
        background: transparent;
    }
    .nav-wrap{
        max-width:var(--max-width);
        margin:0 auto;
        padding:1rem;
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:0.75rem;
        position:relative;
    }
    .logo{
        font-weight:700;
        letter-spacing:0.4px;
    }

    /* menu buttons */
    .menu-btn{
      display:none;
      background:transparent;
      border:0;
      font-size:1.4rem;
      color:var(--text);
      cursor:pointer;
      padding:.35rem .5rem;
      border-radius:8px;
    }
    .theme-btn{
      background:transparent;
      border:0;
      font-size:1.2rem;
      color:var(--text);
      cursor:pointer;
      padding:.35rem .5rem;
      border-radius:8px;
      margin-left:6px;
    }

    nav ul{
        display:flex;
        gap:1rem;
        align-items:center;
        margin:0;
        padding:0;
        list-style:none;
    }
    nav a{
        padding:8px 12px;
        border-radius:10px;
        transition:all .2s;
    }
    nav a:hover{
        background:var(--glass);
    }

    /* ======== HERO ======= */
    .container{
        max-width:var(--max-width);
        margin:2rem auto;
        padding:0 1rem;
    }
    .hero{
        display:grid;
        grid-template-columns:1fr 380px;
        gap:2rem;
        align-items:center;
    }
    .intro h1{
        font-size:2.25rem;
        margin:0 0 .4rem;
        line-height:1.05;
    }
    .intro p{
        color:var(--muted);
        margin:0 0 1rem;
    }
    .cta{
        display:flex;
        gap:.75rem;
    }
    .btn{
        background:linear-gradient(90deg,var(--accent),#4ea1ff);
        padding:.6rem 1rem;
        border-radius:10px;
        color:#021;
        font-weight:600;
        box-shadow:0 6px 20px rgba(124,92,255,0.12);
    }
    .btn.outline{
        background:transparent;
        border:1px solid rgba(255,255,255,0.06);
        color:var(--muted);
    }

    .profile-card{
        background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
        border-radius:18px;
        padding:1rem;
        display:flex;
        gap:1rem;
        align-items:center;
        box-shadow:0 10px 30px rgba(2,6,23,0.6);
        transition: background .25s ease, color .25s ease;
    }
    /* in light theme, make profile-card subtle */
    body.light .profile-card{
      background: linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.01));
    }

    .avatar{
        width:86px;
        height:86px;
        border-radius:14px;
        background:linear-gradient(180deg,#122338,#0d1a2b);
        display:flex;
        align-items:center;
        justify-content:center;
        font-weight:700;
        overflow:hidden;
    }
    .avatar img{ display:block; width:100%; height:100%; object-fit:cover; }

    .profile-meta small{color:var(--muted)}

    /* SKILLS */
    .skills{
        display:flex;
        gap:.5rem;
        flex-wrap:wrap;
        margin-top:.8rem;
    }
    .chip{
        background:rgba(255,255,255,0.03);
        padding:.35rem .6rem;
        border-radius:999px;
        font-size:.9rem;
        color:var(--muted);
    }
    body.light .chip{ background: rgba(0,0,0,0.04); color:var(--muted); }

    /* ============ PROJECTS =========== */
    #projects{margin-top:2.2rem}
    .projects-grid{
        display:grid;
        grid-template-columns:repeat(3,1fr);
        gap:1rem;
    }
    .card{
        background:var(--card);
        border-radius:12px;
        padding:1rem;
        position:relative;
        overflow:hidden;
        transition:transform .25s,box-shadow .25s, background .25s;
    }
    .card:hover{
        transform:translateY(-8px);
        box-shadow:0 18px 50px rgba(2,6,23,0.6);
    }
    .card .thumb{
        height:160px;
        border-radius:8px;
        background:linear-gradient(90deg, rgba(124,92,255,0.12), rgba(78,161,255,0.06));
        display:flex;
        align-items:center;
        justify-content:center;
        font-weight:700;
        color:var(--muted);
    }
    .card .thumb img{
        display: block; width: 100%; height: 100%; object-fit: cover;
        border-radius: 8px;
    }
    .card h3{ margin:.7rem 0 0; font-size:1.05rem; }
    .card p{ color:var(--muted); margin:.4rem 0 1rem; font-size:.95rem }
    .card .links{ display:flex; gap:.6rem }
    .pill{ padding:.45rem .6rem; border-radius:10px; background:rgba(255,255,255,0.02); font-size:.9rem }

    /* ========== CONTACT ========== */
    .contact{
        margin:2.5rem 0;
        padding:1.4rem;
        border-radius:12px;
        background:linear-gradient(180deg, rgba(12,20,34,0.6), rgba(6,11,20,0.6));
        display:flex;
        justify-content:space-between;
        align-items:center;
        transition: background .25s;
    }
    body.light .contact{
      background: linear-gradient(180deg, rgba(0,0,0,0.03), rgba(0,0,0,0.02));
    }
    .social{display:flex;gap:.6rem}
    .icon{ padding:.55rem; border-radius:10px; background:rgba(255,255,255,0.02) }

    /* ========= FOOTER ========== */
    footer{ color:var(--muted); text-align:center; padding:2rem 0; }

    /* ========= RESPONSIVE ========== */
    @media (max-width:980px){
      .hero{ grid-template-columns:1fr 300px; }
      .projects-grid{ grid-template-columns:repeat(2,1fr); }
    }
    @media (max-width:640px){
      .hero{ grid-template-columns:1fr; gap:1.2rem; }
      .projects-grid{ grid-template-columns:1fr; }
      .profile-card{ padding:.75rem; }
      nav ul{ display:none; } /* hide desktop menu on mobile */
      .menu-btn{ display:inline-flex; } /* show menu button */
      .contact{flex-direction: column;}
      .social{margin-top: 30px;}
      
    }

    /* Mobile menu layout when active */
    nav ul.mobile-active{
      display:flex !important;
      position:absolute;
      top:64px;
      right:1rem;
      background:var(--card);
      flex-direction:column;
      padding:0.75rem;
      border-radius:10px;
      gap:.25rem;
      min-width:180px;
      box-shadow:0 10px 30px rgba(0,0,0,0.35);
    }

    /* ======== tiny animations =========== */
    .fade-up{ animation:fadeUp .7s ease both }
    @keyframes fadeUp{ from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }