:root{
      --bg:#0f1724;
      --card:#0b1220;
      --muted:#9aa4b2;
      --accent:#6ee7b7;
      --accent-2:#60a5fa;
      --glass: rgba(255,255,255,0.04);
      --radius:16px;
      --maxw:1100px;
      --ff: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
      --gap:20px;
    }
    *{box-sizing:border-box;margin:0;padding:0}
    html,body{height:100%}
    body{
      font-family:var(--ff);
      background:linear-gradient(180deg,var(--bg),#071025 120%);
      color:#e6eef8;
      line-height:1.6;
      padding:28px 16px;
      display:flex;justify-content:center;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
    }
    .wrap{width:100%;max-width:var(--maxw)}

    /* Header */
    header{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;gap:12px;flex-wrap:wrap}
    .brand{display:flex;align-items:center;gap:14px}
    .logo{
      width:56px;height:56px;border-radius:12px;
      background:linear-gradient(135deg,var(--accent),var(--accent-2));
      display:flex;align-items:center;justify-content:center;
      font-weight:800;color:#04263b;font-size:20px;
      box-shadow:0 6px 18px rgba(15,23,36,0.6)
    }
    h1.site-title{font-size:18px}
    p.site-sub{font-size:13px;color:var(--muted)}
    nav{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
    .btn{padding:10px 14px;border-radius:999px;background:transparent;border:1px solid rgba(255,255,255,0.06);cursor:pointer;font-weight:600;font-size:14px;transition:0.2s}
    .btn:active{transform:translateY(1px)}
    .btn.primary{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#04263b;border:0;box-shadow:0 8px 24px rgba(96,165,250,0.08)}

    /* Hero */
    .hero{display:grid;grid-template-columns:1fr minmax(240px,360px);gap:var(--gap);align-items:start;margin-bottom:22px}
    .card{background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);border-radius:var(--radius);padding:22px}
    .intro h2{font-size:26px;margin-bottom:8px}
    .intro p{color:var(--muted);margin-bottom:12px}
    .cta-row{display:flex;gap:10px;flex-wrap:wrap}

    /* avatar card */
    .profile{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
    .avatar{width:160px;height:160px;border-radius:20px;background:linear-gradient(135deg,#0ea5a5,#3b82f6);display:flex;align-items:center;justify-content:center;font-size:44px;font-weight:800;color:#001219}
    .profile h3{margin:0}
    .profile p{color:var(--muted)}

    /* sections */
    .grid{display:grid;grid-template-columns:repeat(12,1fr);gap:20px}
    .col-8{grid-column:span 8}
    .col-4{grid-column:span 4}
    .col-12{grid-column:1 / -1}

    /* About & Services */
    .about p{color:var(--muted)}
    .services{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px}
    .service{flex:1 1 160px;background:var(--glass);padding:12px;border-radius:12px;border:1px solid rgba(255,255,255,0.03)}
    .service h4{margin-bottom:6px}

    /* Portfolio */
    .portfolio-grid{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
      gap:16px;margin-top:14px
    }
    .project{
      background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);
      padding:10px;border-radius:12px;
      border:1px solid rgba(255,255,255,0.03);
      cursor:pointer;display:flex;flex-direction:column;gap:10px;
      transition:transform .2s, box-shadow .2s
    }
    .project:hover{transform:translateY(-4px);box-shadow:0 6px 16px rgba(0,0,0,0.3)}
    .project img{display:block;width:100%;height:auto;object-fit:cover;border-radius:8px;aspect-ratio:4/3}
    .project h5{font-size:15px}
    .project p{color:var(--muted);font-size:13px}

    /* contact */
    form{display:grid;gap:8px;margin-top:10px}
    input,textarea{background:transparent;border:1px solid rgba(255,255,255,0.06);padding:10px;border-radius:10px;color:inherit;font-size:14px}
    textarea{min-height:100px;resize:vertical}
    .muted{color:var(--muted);font-size:13px}

    footer{margin-top:22px;color:var(--muted);font-size:13px;text-align:center}

    /* modal */
    .modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(2,6,23,0.7);z-index:60;padding:24px}
    .modal.show{display:flex}
    .modal-card{width:min(900px,100%);background:#041323;padding:16px;border-radius:12px;border:1px solid rgba(255,255,255,0.04)}
    #modalImage img{max-width:100%;max-height:70vh;object-fit:contain;display:block;margin:auto}

    /* responsive tweaks */
    @media (max-width:980px){
      .hero{grid-template-columns:1fr 300px}
      .avatar{width:140px;height:140px}
    }
    @media (max-width:820px){
      .hero{grid-template-columns:1fr}
      .col-8,.col-4{grid-column:1 / -1}
      .portfolio-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
    }
    @media (max-width:520px){
      body{padding:18px 12px}
      header{flex-direction:column;align-items:flex-start;gap:10px}
      .logo{width:48px;height:48px}
      .avatar{width:120px;height:120px}
      .portfolio-grid{grid-template-columns:1fr}
      .btn{padding:8px 12px;font-size:13px}
    }

    /* accessibility focus */
    .btn:focus, a:focus {outline:3px solid rgba(96,165,250,0.18);outline-offset:4px}
    .tag{display:inline-block;padding:6px 8px;border-radius:999px;background:rgba(255,255,255,0.03);font-size:12px}