:root {
         --primary: #049311;
         --dark: #0e0e0e;
         --card: rgba(255, 255, 255, 0.06);
         --border: rgba(255, 255, 255, 0.12);
     }

     body {
         font-family: "Inter", sans-serif;
         background: radial-gradient(circle at top,
                 #222 0%,
                 #000 45%,
                 #000 100%);
         min-height: 100vh;
         color: #fff;
         display: flex;
         align-items: center;
         justify-content: center;
     }

     .bio-wrapper {
         width: 100%;
         max-width: 500px;
         padding: 24px;
     }

     .avatar-wrap {
         position: relative;
         display: inline-block;
     }

     .avatar {
         width: 120px;
         height: 120px;
         border-radius: 50%;
         object-fit: cover;
         border: 4px solid var(--primary);
     }

     .verified {
         position: absolute;
         bottom: 6px;
         right: 6px;
         background: var(--primary);
         color: #000;
         border-radius: 50%;
         width: 28px;
         height: 28px;
         display: flex;
         align-items: center;
         justify-content: center;
         font-size: 14px;
         border: 2px solid #000;
     }

     .name {
         font-size: 22px;
         font-weight: 700;
         margin-top: 16px;
     }

     .desc {
         font-size: 14px;
         color: #bbb;
         margin-bottom: 10px;
     }

     .badge-skill span {
         background: rgba(255, 255, 255, 0.08);
         border: 1px solid var(--border);
         padding: 6px 10px;
         border-radius: 999px;
         font-size: 12px;
         margin: 4px;
         display: inline-block;
     }

     .link-btn {
         position: relative;
         background: linear-gradient(135deg, #0b0b0b, #161616);
         border: 1px solid rgba(57, 184, 7, 0.4);
         border-radius: 18px;
         padding: 15px 18px;
         color: #fff;
         font-weight: 600;
         display: flex;
         align-items: center;
         gap: 14px;
         text-decoration: none;
         overflow: hidden;
         isolation: isolate;
         transition:
             transform 0.45s cubic-bezier(.22, .61, .36, 1),
             box-shadow 0.45s cubic-bezier(.22, .61, .36, 1),
             border-color 0.45s ease;
     }

     .link-btn::before {
         content: "";
         position: absolute;
         inset: -50%;
         background: linear-gradient(120deg,
                 transparent 35%,
                 rgba(57, 184, 7, 0.55),
                 transparent 65%);
         transform: translateX(-120%) rotate(25deg);
         transition: transform 0.9s cubic-bezier(.22, .61, .36, 1);
         pointer-events: none;
     }


     .link-btn::after {
         content: "";
         position: absolute;
         inset: -1px;
         border-radius: inherit;
         background:
             radial-gradient(120px 60px at 10% 120%,
                 rgba(57, 184, 7, 0.35),
                 transparent 60%),
             radial-gradient(120px 60px at 90% -20%,
                 rgba(57, 184, 7, 0.25),
                 transparent 60%);
         opacity: 0;
         transition: opacity 0.45s ease;
         z-index: -1;
     }

     .link-btn:hover::before {
         transform: translateX(120%) rotate(25deg);
     }

     .link-btn:hover::after {
         opacity: 1;
     }

     .link-btn:hover {
         transform: translateY(-5px) scale(1.02);
         border-color: #39b807;
         box-shadow:
             0 18px 50px rgba(57, 184, 7, 0.45),
             inset 0 0 0 1px rgba(57, 184, 7, 0.35);
     }
     .link-icon {
         width: 44px;
         height: 44px;
         border-radius: 14px;
         background: linear-gradient(145deg, rgba(57, 184, 7, 0.18), rgba(57, 184, 7, 0.05));
         color: #39b807;
         display: flex;
         align-items: center;
         justify-content: center;
         font-size: 18px;
         transition:
             transform 0.45s cubic-bezier(.22, .61, .36, 1),
             box-shadow 0.45s ease,
             background 0.45s ease,
             color 0.45s ease;
     }

     .link-btn:hover .link-icon {
         transform: translateY(-3px) scale(1.15) rotate(-3deg);
         background: linear-gradient(135deg, #39b807, #67ff2f);
         color: #000;
         box-shadow:
             0 10px 25px rgba(57, 184, 7, 0.65),
             0 0 0 4px rgba(57, 184, 7, 0.25);
     }


     .link-icon i {
         color: white;
     }

     footer {
         font-size: 12px;
         color: #888;
     }

     @keyframes animate {
         0% {
             transform: translateY(0) rotate(0deg);
             opacity: 1;
             border-radius: 15px;
         }

         100% {
             transform: translateY(-1000px) rotate(720deg);
             opacity: 0;
             border-radius: 10%;
         }
     }

     .background {
         position: fixed;
         width: 100vw;
         height: 100vh;
         top: 0;
         left: 0;
         margin: 0;
         padding: 0;
         overflow: hidden;
         z-index: -1;
     }

     .background li {
         position: absolute;
         display: block;
         list-style: none;
         width: 20px;
         height: 20px;
         background: rgba(255, 255, 255, 0.2);
         animation: animate 19s linear infinite;
     }

     .background li:nth-child(0) {
         left: 8%;
         width: 40px;
         height: 40px;
         bottom: -40px;
         animation-delay: 1s;
     }

     .background li:nth-child(1) {
         left: 2%;
         width: 60px;
         height: 60px;
         bottom: -60px;
         animation-delay: 5s;
     }

     .background li:nth-child(2) {
         left: 70%;
         width: 50px;
         height: 50px;
         bottom: -50px;
         animation-delay: 4s;
     }

     .background li:nth-child(3) {
         left: 9%;
         width: 30px;
         height: 30px;
         bottom: -30px;
         animation-delay: 4s;
     }

     .background li:nth-child(4) {
         left: 6%;
         width: 40px;
         height: 40px;
         bottom: -40px;
         animation-delay: 14s;
     }

     .background li:nth-child(5) {
         left: 85%;
         width: 60px;
         height: 60px;
         bottom: -60px;
         animation-delay: 9s;
     }

     .background li:nth-child(6) {
         left: 20%;
         width: 40px;
         height: 40px;
         bottom: -40px;
         animation-delay: 4s;
     }

     .background li:nth-child(7) {
         left: 71%;
         width: 40px;
         height: 40px;
         bottom: -40px;
         animation-delay: 23s;
     }

     .background li:nth-child(8) {
         left: 41%;
         width: 50px;
         height: 50px;
         bottom: -50px;
         animation-delay: 11s;
     }

     .background li:nth-child(9) {
         left: 50%;
         width: 30px;
         height: 30px;
         bottom: -30px;
         animation-delay: 40s;
     }

     .background li:nth-child(10) {
         left: 59%;
         width: 40px;
         height: 40px;
         bottom: -40px;
         animation-delay: 39s;
     }

     .background li:nth-child(11) {
         left: 74%;
         width: 50px;
         height: 50px;
         bottom: -50px;
         animation-delay: 35s;
     }

     .background li:nth-child(12) {
         left: 43%;
         width: 30px;
         height: 30px;
         bottom: -30px;
         animation-delay: 17s;
     }

     .background li:nth-child(13) {
         left: 51%;
         width: 40px;
         height: 40px;
         bottom: -40px;
         animation-delay: 26s;
     }

     .background li:nth-child(14) {
         left: 78%;
         width: 30px;
         height: 30px;
         bottom: -30px;
         animation-delay: 53s;
     }

     .background li:nth-child(15) {
         left: 58%;
         width: 50px;
         height: 50px;
         bottom: -50px;
         animation-delay: 63s;
     }

     .background li:nth-child(16) {
         left: 43%;
         width: 60px;
         height: 60px;
         bottom: -60px;
         animation-delay: 10s;
     }

     .background li:nth-child(17) {
         left: 35%;
         width: 40px;
         height: 40px;
         bottom: -30px;
         animation-delay: 36s;
     }

     .background li:nth-child(18) {
         left: 49%;
         width: 40px;
         height: 40px;
         bottom: -30px;
         animation-delay: 6s;
     }