:root{
      --bg1:#0f1724; --bg2:#081029; --glass:rgba(255,255,255,0.06);
      --accent:#7c3aed; --accent-2:#06b6d4; --muted:rgba(255,255,255,0.7);
      --card-radius:18px; --max-w:980px;
    }
    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0; font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      color: #e6eef8; background: radial-gradient(1200px 600px at 10% 10%, rgba(124,58,237,0.12), transparent),
                  radial-gradient(1000px 500px at 90% 90%, rgba(6,182,212,0.06), transparent),
                  linear-gradient(180deg,var(--bg1),var(--bg2));
      -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
      display:flex; align-items:center; justify-content:center; padding:48px;
    }

    .wrap{width:100%; max-width:var(--max-w); display:grid; grid-template-columns: 360px 1fr; gap:28px; align-items:start}
    @media (max-width:880px){.wrap{grid-template-columns:1fr; padding:20px}}

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

    /* left column */
    .profile{display:flex; flex-direction:column; gap:18px}
    .avatar{width:120px;height:120px;border-radius:20px;align-self:center; display:flex;align-items:center;justify-content:center;
            background:linear-gradient(135deg,var(--accent),var(--accent-2)); box-shadow: 0 8px 30px rgba(12,8,36,0.6);}
    .avatar svg{width:86px;height:86px;filter:drop-shadow(0 6px 18px rgba(12,8,36,0.5))}
    h1{margin:0;font-size:22px}
    .subtitle{color:var(--muted); font-size:13px}

    .stats{display:flex;gap:12px;flex-wrap:wrap}
    .stat{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); padding:10px 12px;border-radius:12px; font-size:13px}

    .skills{display:flex;flex-wrap:wrap;gap:8px}
    .skill{padding:8px 10px;border-radius:999px;background:rgba(255,255,255,0.04);font-size:13px}

    /* right column */
    .hero{display:flex;flex-direction:column; gap:16px}
    .intro{display:flex; align-items:flex-start; gap:18px}
    .headline{font-size:20px;margin:0}
    .typed{color:var(--accent); font-weight:700}

    .bio{color:var(--muted); line-height:1.6}

    .links{display:flex;gap:12px;align-items:center}
    .btn{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;background:linear-gradient(90deg,var(--accent),var(--accent-2));border:none;color:white;cursor:pointer;font-weight:600;text-decoration:none}
    .btn.ghost{background:transparent;border:1px solid rgba(255,255,255,0.06)}

    .socials{display:flex;gap:10px}
    .icon-btn{width:40px;height:40px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.03);cursor:pointer}

    .cards{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:8px}
    @media (max-width:520px){.cards{grid-template-columns:1fr}}
    .mini{padding:12px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));}

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

    /* small interactions */
    .copy-hint{font-size:12px;color:var(--muted)}

    /* animated grid in background inside right card */
    .grid-bg{position:relative; overflow:hidden;border-radius:14px}
    .grid-bg::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px), linear-gradient(180deg, rgba(255,255,255,0.02) 1px, transparent 1px); background-size:var(--gsize,40px) var(--gsize,40px);opacity:0.06;filter:blur(0.5px)}

    /* theme: light (optional) */
    .light{--bg1:#eef2ff; --bg2:#f8fafc; color:#0b1220; --muted:rgba(7,12,20,0.7); --glass:rgba(12,18,28,0.04)}
    .light .card{background:linear-gradient(180deg, rgba(6,8,12,0.03), rgba(6,8,12,0.01)); color:#071029}

    /* subtle entrance */
    .card{transform:translateY(8px); opacity:0; animation:enter .9s ease forwards}
    .card:nth-child(1){animation-delay:.08s}
    .card:nth-child(2){animation-delay:.12s}
    @keyframes enter{to{transform:none;opacity:1}}