@font-face {
  font-family: 'SUSEMono-Regular';   /* The name you invent */
  src: url('main-var.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
} 

body{
      margin:0;
      font-family:var(--fw);
      background: radial-gradient(800px 400px at 10% 10%, rgba(139,92,246,0.12), transparent 8%),
                  radial-gradient(700px 350px at 90% 90%, rgba(6,182,212,0.08), transparent 8%),
                  linear-gradient(180deg,var(--bg1),var(--bg2));
      color: #e6eef8;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:32px;
    }

    .card{
      width:100%;
      max-width:420px;
      background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.06));
      border-radius:20px;
      padding:28px;
      box-shadow: 0 10px 30px rgba(2,6,23,0.6), inset 0 1px 0 rgba(255,255,255,0.02);
      border:1px solid rgba(255,255,255,0.03);
      backdrop-filter: blur(8px) saturate(120%);
    }

    .avatar{
      width:96px;height:96px;border-radius:50%;overflow:hidden;margin:0 auto;
      border:4px solid rgba(255,255,255,0.06);
      box-shadow: 0 6px 20px rgba(11,12,20,0.6);
      background: linear-gradient(135deg,var(--acc),var(--accent2));
      display:flex;align-items:center;justify-content:center;font-weight:800;font-size:28px;color:white;
    }

    h1{font-size:20px;margin:12px 0 4px;text-align:center}
    p.lead{margin:0;text-align:center;color:var(--muted);font-size:13px}

    .links{margin-top:20px;display:grid;gap:12px}
    .link{
      display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;background:var(--glass);
      text-decoration:none;color:inherit;font-weight:600;transition:transform .15s ease,box-shadow .15s ease;
      border:1px solid rgba(255,255,255,0.02);
    }
    .link:hover{transform:translateY(-6px);box-shadow:0 12px 30px rgba(2,6,23,0.6)}

    
.icon-wrap{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.06));}
.icon-wrap img {
    max-height: 30px;
}

.name{flex:1}
    .meta{font-size:12px;color:var(--muted)}

    .brand-row{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:18px}
    .pill{font-size:12px;padding:6px 10px;border-radius:999px;background:var(--glass-2);border:1px solid rgba(255,255,255,0.02);color:var(--muted)}

    .small{font-size:12px;color:var(--muted);text-align:center;margin-top:14px}

    /* colorful accent left bar */
    .link::before{
      content:'';width:6px;height:100%;border-radius:8px;margin-right:8px;background:linear-gradient(180deg,var(--acc),var(--accent2));flex-shrink:0}
    .link .icon-wrap svg{width:20px;height:20px}

    /* Responsive */
    @media (max-width:420px){
      .card{padding:18px;border-radius:14px}
      .avatar{width:82px;height:82px}
    }

    /* fun confetti-ish floating shapes */
    .glow{position:absolute;pointer-events:none;filter:blur(60px);opacity:0.5}
    .glow.g1{width:260px;height:260px;left:6%;top:6%;background:radial-gradient(circle,#8b5cf6,transparent)}
    .glow.g2{width:200px;height:200px;right:4%;bottom:8%;background:radial-gradient(circle,#06b6d4,transparent)}

    /* copy button */
    .copy-btn{background:transparent;border:1px solid rgba(255,255,255,0.04);padding:6px 8px;border-radius:8px;font-size:13px;color:var(--muted);cursor:pointer}
    .copy-btn:active{transform:translateY(1px)}