:root{
  --bg1: #081325;
  --bg2: #0f2136;
  --glass: rgba(255,255,255,0.06);
  --glass-2: rgba(255,255,255,0.08);
  --accent: rgba(255,255,255,0.12);
  --glass-border: rgba(255,255,255,0.18);
  --glass-highlight: rgba(255,255,255,0.6);
  --text: rgba(255,255,255,0.95);
  --muted: rgba(255,255,255,0.6);
  --container-w: 420px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: radial-gradient(1200px 500px at 10% 10%, rgba(122,97,255,0.10), transparent 8%),
              radial-gradient(900px 400px at 90% 90%, rgba(0,200,255,0.05), transparent 6%),
              linear-gradient(180deg,var(--bg1), var(--bg2));
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px;
  position:relative;
  overflow:hidden;
}

/* Ambient soft floating blobs */
.glow-bg{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
}
.blob{
  position:absolute;
  filter: blur(40px) saturate(140%);
  opacity:0.75;
  transform:translate3d(0,0,0);
}
.b1{width:480px;height:360px;background:linear-gradient(135deg,#7a61ff,#3ac7ff);left:-8%;top:4%;animation:float1 12s ease-in-out infinite}
.b2{width:340px;height:260px;background:linear-gradient(135deg,#ff7ab6,#ffb86b);right:-6%;bottom:10%;animation:float2 14s ease-in-out infinite}
.b3{width:260px;height:260px;background:linear-gradient(135deg,#6ef0b9,#8ad1ff);left:50%;top:60%;transform:translateX(-50%);animation:float3 10s ease-in-out infinite}

@keyframes float1{0%{transform:translateY(0)}50%{transform:translateY(-20px)}100%{transform:translateY(0)}}
@keyframes float2{0%{transform:translateY(0)}50%{transform:translateY(18px)}100%{transform:translateY(0)}}
@keyframes float3{0%{transform:translateY(0)}50%{transform:translateY(-14px)}100%{transform:translateY(0)}}

.page{position:relative;z-index:2;width:100%;max-width:var(--container-w);display:flex;flex-direction:column;align-items:center}

/* Glass card */
.card{
  width:100%;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius:20px;
  padding:20px;
  border: 1px solid var(--glass-border);
  box-shadow: 0 10px 30px rgba(2,6,23,0.6), inset 0 1px 0 rgba(255,255,255,0.02);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  position:relative;
  overflow:visible;
}

/* glossy rim */
.card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:20px;
  pointer-events:none;
  background: linear-gradient(135deg, rgba(255,255,255,0.03), transparent 25%);
  mix-blend-mode: screen;
}

/* Profile */
.profile{
  display:flex;
  gap:16px;
  align-items:center;
  margin-bottom:8px;
}
.avatar{
  width:84px;
  height:84px;
  border-radius:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:6px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border:1px solid rgba(255,255,255,0.06);
  box-shadow: 0 4px 18px rgba(2,6,23,0.5), inset 0 1px 0 rgba(255,255,255,0.04);
  overflow:hidden;
}

/* Make the avatar image circular inside a rounded container (liquid glass aesthetic) */
.avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
  display:block;
  transform:translateZ(0);
}

/* Profile text */
.profile-info h1{
  margin:0;
  font-size:1.2rem;
  letter-spacing:0.4px;
}
.subtitle{
  margin:4px 0 0 0;
  color:var(--muted);
  font-size:0.9rem;
}

/* Links list */
.links{display:flex;flex-direction:column;gap:14px;margin-top:10px}
.link{
  display:flex;
  align-items:center;
  gap:14px;
  text-decoration:none;
  color:var(--text);
  padding:14px;
  border-radius:14px;
  position:relative;
  transition:transform .14s cubic-bezier(.2,.9,.3,1), box-shadow .14s;
  will-change:transform, box-shadow;
}

/* Glass button style */
.glass-link{
  background: linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 6px 18px rgba(2,6,23,0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  align-items:center;
  overflow:hidden;
}

/* Subtle sheen highlight on top-left */
.glass-link::before{
  content:"";
  position:absolute;
  left:-30%;
  top:-40%;
  width:60%;
  height:120%;
  background: linear-gradient(120deg, rgba(255,255,255,0.22), rgba(255,255,255,0.02));
  transform:rotate(-18deg);
  mix-blend-mode: screen;
  opacity:0.6;
  pointer-events:none;
  transition:opacity .18s;
}

/* When hover: raise & brighten */
.glass-link:hover{
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(2,6,23,0.6);
}
.glass-link:hover::before{opacity:0.95}

/* Icon circle */
.icon-wrap{
  width:56px;
  height:56px;
  min-width:56px;
  border-radius:50%;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
  border:1px solid rgba(255,255,255,0.06);
  box-shadow: inset 0 2px 6px rgba(255,255,255,0.03), 0 6px 18px rgba(2,6,23,0.35);
}

/* Make inner images perfectly circular and cropped to 1:1 */
.icon-wrap img{
  width:100%;
  height:100%;
  object-fit:cover; /* ensures cropping to 1:1 visually */
  display:block;
  border-radius:50%;
}

/* Label and chevron */
.label{
  flex:1;
  font-weight:600;
  font-size:1rem;
}
.chev{
  color:var(--muted);
  font-size:1.6rem;
  margin-left:10px;
}

/* Footer note */
.footer-note{
  margin-top:14px;
  text-align:center;
  color:var(--muted);
  font-size:0.85rem;
}

/* Page footer */
.page-footer{
  margin-top:18px;
  color:rgba(255,255,255,0.25);
  text-align:center;
  font-size:0.8rem;
}

/* Focus states for accessibility */
.link:focus{
  outline: none;
  box-shadow: 0 0 0 4px rgba(122,97,255,0.16);
  transform: translateY(-4px);
}

/* Responsive tweaks */
@media (max-width:480px){
  :root{--container-w:420px}
  .avatar{width:72px;height:72px}
  .icon-wrap{width:52px;height:52px;min-width:52px}
  .card{padding:16px}
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .blob, .glass-link, .glow-bg .blob{animation:none;transition:none}
}