@font-face {
  font-family: 'Poppins';
  src: local('Poppins');
}

:root {
  --background: hsl(0 0% 6%);
  --foreground: hsl(0 0% 98%);
  --card: hsl(0 0% 10%);
  --muted-foreground: hsl(0 0% 60%);
  --border: hsl(0 0% 18%);

  --pink-glow: rgba(255, 20, 147, 0.7);
  --pink-glow-soft: rgba(255, 20, 147, 0.25);
}

body {
  margin: 0;
  padding: 0;
  font-family: Poppins, sans-serif;
  background: linear-gradient(180deg, hsl(0 0% 8%), hsl(0 0% 4%));
  color: var(--foreground);
  min-height: 100vh;
  background-attachment: fixed;
}

.container {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: 24px;
  position: relative;
  z-index: 10;
}

.profile {
  text-align: center;
  margin-bottom: 48px;
  animation: fadeInUp 0.8s ease both;
}

.avatar {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--card);
  box-shadow: 
    0 0 25px var(--pink-glow),
    0 0 45px var(--pink-glow-soft),
    0 8px 32px rgba(0,0,0,.5);
}

.card {
  display: block;
  background: var(--card);
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 28px;
  border: 1px solid var(--border);
  box-shadow:
    0 8px 32px -8px rgba(0, 0, 0, 0.5),
    0 0 40px rgba(168, 85, 247, 0.15);

  text-decoration: none;
  color: var(--foreground);

  transform: translateY(10px);
  opacity: 0;
  animation: fadeInUp 0.8s ease forwards;
}

.glow-btn {
  box-shadow: 0 0 18px var(--pink-glow-soft);
}

.glow-btn:hover {
  box-shadow: 0 0 35px var(--pink-glow), 0 0 60px rgba(255, 20, 147, 0.35);
}

.card:hover {
  transform: translateY(-4px) scale(1.02);
  border-color: hsl(0 0% 40%);
}

.img-wrap {
  height: 200px;
  overflow: hidden;
}

.img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: .5s;
}

.card:hover img {
  transform: scale(1.1);
}

.text {
  padding: 20px;
}

.text h2 {
  margin: 0 0 6px;
  font-size: 24px;
  color: white;
}

.text p {
  margin: 0;
  color: var(--muted-foreground);
  font-size: 15px;
}

footer {
  text-align: center;
  margin-top: 48px;
  color: var(--muted-foreground);
  font-size: 14px;
}

@keyframes fadeInUp {
  0% {opacity: 0; transform: translateY(20px);}
  100% {opacity: 1; transform: translateY(0);}
}