:root {
   --bg-start: #0f172a;
   --bg-end: #1e1b4b;
   --card-bg: rgba(30, 41, 59, 0.7);
   /* Translucent glass effect */
   --text-color: #f8fafc;
   --accent-color: #f97316;
   /* Signature Orange */
}

body {
   margin: 0;
   background: linear-gradient(135deg, var(--bg-start), var(--bg-end));
   color: var(--text-color);
   font-family: system-ui, -apple-system, sans-serif;
   display: flex;
   justify-content: center;
   align-items: center;
   min-height: 100vh;
   padding: 20px;
   box-sizing: border-box;
}

.container {
   width: 100%;
   max-width: 480px;
   text-align: center;
}

.fade-in {
   opacity: 0;
   transform: translateY(20px);
   animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeInUp {
   to {
      opacity: 1;
      transform: translateY(0);
   }
}

.avatar {
   width: 96px;
   height: 96px;
   border-radius: 50%;
   border: 3px solid var(--accent-color);
   object-fit: cover;
   margin-bottom: 16px;
   box-shadow: 0 10px 25px -5px rgba(249, 115, 22, 0.2);
}

h1 {
   font-size: 1.75rem;
   margin: 0 0 8px 0;
}

.bio {
   color: #94a3b8;
   font-size: 0.95rem;
   margin: 0 0 32px 0;
   letter-spacing: 0.5px;
}

/* --- Letter Hover Effect --- */
.hover-letter {
   display: inline-block;
   transition: color 0.15s ease, transform 0.15s ease;
   cursor: default;
}

.hover-letter:hover {
   color: var(--accent-color);
   transform: translateY(-4px);
}

.links-container {
   display: flex;
   flex-direction: column;
   gap: 16px;
}

.link-card {
   background-color: var(--card-bg);
   color: var(--text-color);
   text-decoration: none;
   padding: 16px;
   border-radius: 12px;
   font-weight: 600;
   font-size: 1rem;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 12px;
   backdrop-filter: blur(8px);
   /* Frosted glass styling */
   border: 1px solid rgba(255, 255, 255, 0.05);
   transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease, background-color 0.2s ease;
}

.link-card:hover {
   transform: translateY(-3px);
   border-color: var(--accent-color);
   background-color: rgba(30, 41, 59, 0.9);
}

.icon {
   font-size: 1.2rem;
   transition: transform 0.2s ease;
}

.link-card:hover .icon {
   transform: scale(1.1);
}