:root{
      --bg1:#0f1724;
      --bg2:#071026;
      --card:#0b1220;
      --accent1:#7c3aed;
      --accent2:#06b6d4;
      --glass: rgba(255,255,255,0.04);
      --glass-2: rgba(255,255,255,0.02);
      --text:#e6eef8;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    }
    html,body{height:100%;margin:0;background:linear-gradient(180deg,var(--bg1),var(--bg2));color:var(--text);}

    /* layout */
    .wrap{min-height:100%;display:flex;align-items:center;justify-content:center;padding:0px;}

    /* subtle animated background blobs */
    .bg-blobs{position:fixed;inset:0;pointer-events:none;overflow:hidden;}
    .blob{position:absolute;border-radius:50%;filter:blur(56px);opacity:0.45;mix-blend-mode:screen;animation:drift 12s linear infinite;}
    .blob.b1{width:520px;height:520px;left:-8%;top:-10%;background:radial-gradient(circle at 20% 20%,var(--accent1),transparent 40%);} 
    .blob.b2{width:420px;height:420px;right:-6%;bottom:-12%;background:radial-gradient(circle at 80% 80%,var(--accent2),transparent 40%);animation-duration:18s}
    @keyframes drift{0%{transform:translateY(0) translateX(0) scale(1)}50%{transform:translateY(30px) translateX(30px) scale(1.05)}100%{transform:translateY(0) translateX(0) scale(1)}}

    /* card */
    .card{width:min(820px,94vw);display:grid;grid-template-columns:1fr 300px;gap:24px;background:linear-gradient(180deg,var(--glass),var(--glass-2));backdrop-filter:blur(8px);box-shadow:0 10px 40px rgba(0,0,0,0.6);border-radius:18px;padding:28px;border:1px solid rgba(255,255,255,0.04);align-items:center}
    @media (max-width:820px){.card{grid-template-columns:1fr;padding:20px}}

    /* left */
    .intro{padding:10px}
    .kicker{font-size:13px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,0.65)}
    h1{margin:10px 0 6px;font-size:28px}
    .role{font-size:18px;color:rgba(255,255,255,0.9);height:28px;overflow:hidden}
    .desc{margin-top:14px;color:rgba(255,255,255,0.75);line-height:1.5}

    /* social column */
    .social{display:flex;flex-direction:column;gap:12px;justify-content:center;align-items:center;padding:18px}
    .avatar{width:88px;height:88px;border-radius:12px;background:linear-gradient(135deg,var(--accent1),var(--accent2));display:flex;align-items:center;justify-content:center;font-weight:700;font-size:32px;color:white;box-shadow:0 8px 30px rgba(12,17,28,0.6)}

    .links{display:flex;flex-direction:column;gap:10px;width:100%;}
    .link{display:flex;align-items:center;gap:12px;padding:10px;border-radius:10px;text-decoration:none;color:var(--text);background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent);border:1px solid rgba(255,255,255,0.03);transition:transform .18s ease,box-shadow .18s ease}
    .link:hover{transform:translateY(-6px);box-shadow:0 12px 30px rgba(2,6,23,0.6)}
    .link svg{width:20px;height:20px;flex-shrink:0}
    .link span{font-weight:600}

    /* small animated underline */
    .underline{display:inline-block;margin-left:25px; height:3px;width:75px;border-radius:6px;margin-top:18px;background:linear-gradient(90deg,var(--accent1),var(--accent2));animation:slide 3s infinite}
    @keyframes slide{0%{transform:translateX(-40%)}50%{transform:translateX(40%)}100%{transform:translateX(-40%)}}

    /* subtle floating badges */
    .badges{display:flex;gap:8px;margin-top:16px}
    .badge{padding:6px 10px;border-radius:999px;background:rgba(255,255,255,0.03);font-size:13px}

    /* typewriter effect for role */
    .cursor{display:inline-block;width:2px;height:22px;background:var(--text);vertical-align:middle;margin-left:6px;animation:blink 900ms steps(1) infinite}
    @keyframes blink{50%{opacity:0}} 

    /* tilt effect - mouse */
    .card-wrap{perspective:1000px}
    .card-inner{transform-style:preserve-3d;transition:transform .15s ease}

    /* footer small */
    .foot{font-size:13px;color:rgba(255,255,255,0.55);margin-top:16px}





/* ===== Mobile ===== */
@media (max-width: 768px) {

  .wrap {
    padding: 20px;
  }

  .card {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 18px;
  }

  h1 {
    font-size: 22px;
    text-align: center;
  }

  .intro {
    text-align: center;
  }

  .desc {
    font-size: 15px;
  }

  .badges {
    justify-content: center;
    flex-wrap: wrap;
  }

  .social {
    padding: 10px;
  }

  .avatar {
    width: 72px;
    height: 72px;
    font-size: 26px;
  }

  .link {
    justify-content: center;
  }
}


@media (max-width: 768px) {
  .card-inner {
    transform: none !important;
  }
}

.link {
  min-height: 48px; /* standard mobile */
}