:root{
      --bg:#0f1724;
      --card:#0b1220;
      --muted:#98a0b3;
      --accent:#7c3aed;
      --glass: rgba(255,255,255,0.03);
      --glass-2: rgba(255,255,255,0.02);
      --radius:18px;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      background: linear-gradient(180deg, #06101a 0%, #071427 60%), var(--bg);
      color:#e6eef8;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      line-height:1.45;
    }

    .container{
      max-width:1100px;
      margin:32px auto;
      padding:28px;
    }

    header{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:16px;
      margin-bottom:22px;
    }
    .brand{
      display:flex;
      gap:12px;
      align-items:center;
    }
    .logo{
      width:56px;height:56px;border-radius:12px;
      display:inline-flex;align-items:center;justify-content:center;
      background:linear-gradient(135deg,var(--accent),#ec4899);
      font-weight:800;color:white;font-size:20px;
      box-shadow:0 6px 20px rgba(124,58,237,0.18);
    }
    .brand h1{margin:0;font-size:18px}
    .brand p{margin:0;color:var(--muted);font-size:13px}

    nav a{color:var(--muted);text-decoration:none;margin-left:14px;font-size:14px}
    nav a:hover{color:#fff}

    /* hero grid */
    .hero{
      display:grid;
      grid-template-columns: 1fr 360px;
      gap:28px;
      /*align-items:center;*/
    }

    .card{
      background:linear-gradient(180deg,var(--glass),var(--glass-2));
      border-radius:var(--radius);
      padding:20px;
      box-shadow: 0 8px 30px rgba(2,6,23,0.6);
      border: 1px solid rgba(255,255,255,0.03);
    }

    .headline{font-size:34px;margin:0 0 12px 0;line-height:1.05}
    .lead{color:var(--muted);margin-bottom:16px}

    .cta-row{display:flex;gap:12px;margin-top:8px}
    .btn{
      display:inline-flex;align-items:center;gap:10px;
      padding:10px 14px;border-radius:12px;border:0;cursor:pointer;
      font-weight:600;
    }
    .btn-primary{background:linear-gradient(90deg,var(--accent),#ec4899);color:white;box-shadow:0 8px 20px rgba(124,58,237,0.12)}
    .btn-ghost{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--muted)}

    /* profile card */
    .profile {
      display:flex;flex-direction:column;align-items:center;gap:23px;
    }
    .avatar {
      width:268px;height:268px;border-radius:50%;
      background:linear-gradient(260deg,#0b1220,#071427);
      border: 6px solid rgba(255,255,255,0.04);
      overflow:hidden;display:flex;align-items:center;justify-content:center;
    }
    .avatar img{width:100%;height:100%;object-fit:cover;display:block}

    .small{font-size:16px;color:var(--muted)}

    /* projects */
    .section-title{font-size:20px;margin:2px 0 10px 0}
    .grid{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:12px;
    }
    .project{
      padding:14px;border-radius:14px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
      border:1px solid rgba(255,255,255,0.02);
    }
    .project h4{margin:0;font-size:15px}
    .project p{margin:8px 0 0 0;color:var(--muted);font-size:13px}
    .project img{width:100%;height:140px;object-fit:cover;border-radius:8px;margin-top:10px}
    .tech{margin-top:10px;display:flex;flex-wrap:wrap;gap:6px}
    .chip{font-size:12px;padding:6px 8px;border-radius:999px;background:rgba(255,255,255,0.02);color:var(--muted);border:1px solid rgba(255,255,255,0.02)}

    /* skills */
    .skills{display:flex;gap:8px;flex-wrap:wrap}

    /* contact */
    form{display:grid;gap:10px}
    input[type="text"], input[type="email"], textarea{
      background:transparent;border:1px solid rgba(255,255,255,0.04);padding:10px;border-radius:10px;color:#eaf2ff;outline:none;
    }
    textarea{min-height:120px;resize:vertical}
    .form-row{display:flex;gap:10px}
    .form-row .col{flex:1}

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

    /* responsive */
    @media (max-width:1000px){
      .hero{grid-template-columns: 1fr}
      .grid{grid-template-columns:repeat(2,1fr)}
    }
    @media (max-width:640px){
      .grid{grid-template-columns:1fr}
      header{flex-direction:column;align-items:flex-start;gap:14px}
    }