/* ===============  DESIGN TOKENS  =============== */
:root{
  --bg-gradient: linear-gradient(135deg,#050505 0%,#1a1a1a 100%);
  --glass-bg   : rgba(255,255,255,.08);
  --glass-brd  : rgba(255,255,255,.12);
  --pink       : #ff4da6;
  --grey       : #cfcfcf;
  --radius     : 1.25rem;
  --blur       : blur(18px);
  --trans-fast : .25s cubic-bezier(.4,.0,.2,1);
}

/* ===============  GLOBAL RESET  =============== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family: "Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--grey);
  background:var(--bg-gradient);
  display:flex;
  justify-content:center;
  align-items:flex-start;
  padding:2.5rem 1rem;
  line-height:1.6;
  overflow-x:hidden;
}

a{color:inherit;text-decoration:none}
h1,h2{color:#fff;font-weight:600;margin-bottom:.5rem}

/* ===============  WRAPPER  =============== */
.container{
  width:100%;
  max-width:960px;
  display:flex;
  flex-direction:column;
  gap:2.75rem;
  animation:fadeIn .8s ease;
}
@keyframes fadeIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ===============  GLASS CARD  =============== */
.glass{
  background:var(--glass-bg);
  border:1px solid var(--glass-brd);
  border-radius:var(--radius);
  backdrop-filter:var(--blur);
  -webkit-backdrop-filter:var(--blur);
  padding:2rem;
  position:relative;
  overflow:hidden;
}
.glass::before{
  content:"";
  position:absolute;inset:0;
  background:radial-gradient(circle at top left,rgba(255,77,166,.18),transparent 60%);
  pointer-events:none;
}

/* ===============  TOP / HERO  =============== */
.hero{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:1.25rem;
}
.profile-pic{
  width:128px;height:128px;
  border-radius:50%;
  border:3px solid var(--pink);
  overflow:hidden;
  transition:transform var(--trans-fast);
}
.profile-pic:hover{transform:scale(1.05)}
.username{font-size:2rem;color:#fff}
.pronouns{font-size:1rem;color:var(--pink);letter-spacing:.5px}

.badges{
  font-size:.95rem;
  padding:.5rem 1rem;
  border:1px dashed var(--pink);
  border-radius:2rem;
  color:var(--pink);
  user-select:none;
  transition:background var(--trans-fast);
}
.badges:hover{background:rgba(255,77,166,.12)}

/* ===============  TECH STACK  =============== */
.stack-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:1rem;
  margin-top:1rem;
}
.tech-chip{
  padding:.75rem;
  border-radius:var(--radius);
  background:rgba(255,255,255,.06);
  text-align:center;
  font-size:.85rem;
  font-weight:500;
  color:#fff;
  letter-spacing:.15px;
  transition:transform var(--trans-fast),box-shadow var(--trans-fast);
}
.tech-chip:hover{
  transform:translateY(-4px);
  box-shadow:0 6px 12px rgba(0,0,0,.25);
}

/* ===============  NAV BUTTONS  =============== */
.nav-btns{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  margin-top:1rem;
}
.nav-btn{
  flex:1 1 140px;
  padding:1rem 1.25rem;
  border-radius:var(--radius);
  background:var(--pink);
  color:#fff;
  font-weight:600;
  text-align:center;
  letter-spacing:.4px;
  cursor:pointer;
  transition:background var(--trans-fast),transform var(--trans-fast);
}
.nav-btn:hover{background:#ff5fb0;transform:translateY(-3px)}
.nav-btn:active{transform:scale(.97)}

/* ===============  RESPONSIVE  =============== */
@media(max-width:600px){
  .profile-pic{width:100px;height:100px}
  .username{font-size:1.6rem}
  .container{padding-top:1rem}
}