/* ==========================================================
   urmad.lol — e-bio placeholder stylesheet
   Three profile cards, side by side
   ========================================================== */

:root{
  --bg:        #0a0a0f;
  --card:      #121218;
  --card-2:    #17171f;
  --line:      #26262f;
  --text:      #ecebf2;
  --muted:     #8d8b9c;
  --accent:    #8b5cf6;
  --accent-2:  #22d3ee;
  --radius:    18px;
  --radius-sm: 10px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  min-height:100vh;
  padding:56px 24px 64px;
  background:var(--bg);
  color:var(--text);
  font-family:"Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  font-size:15px;
  line-height:1.55;
}

/* ---------- ambient glow ---------- */
.bg-glow{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(700px 450px at 20% 0%,   rgba(139,92,246,.22), transparent 70%),
    radial-gradient(600px 450px at 85% 10%,  rgba(34,211,238,.14), transparent 70%),
    radial-gradient(800px 500px at 50% 110%, rgba(139,92,246,.10), transparent 70%);
}

/* ---------- page header ---------- */
.page-head{
  position:relative;
  z-index:1;
  text-align:center;
  margin:0 auto 40px;
}
.page-head h1{
  margin:0;
  font-size:34px;
  font-weight:700;
  letter-spacing:-.02em;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.page-head p{
  margin:6px 0 0;
  color:var(--muted);
  font-size:14px;
}

/* ---------- three-across layout ---------- */
.profiles{
  position:relative;
  z-index:1;
  width:100%;
  max-width:1080px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  align-items:stretch;   /* equal-height cards across the row */
  gap:22px;
}

/* ---------- profile card ---------- */
.card{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:28px 22px 24px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:0 20px 50px rgba(0,0,0,.5);
  transition:transform .18s ease, border-color .18s ease;
}
.card:hover{
  transform:translateY(-4px);
  border-color:#33313f;
}

/* ---------- avatar ---------- */
.avatar{
  position:relative;
  width:104px;
  height:104px;
  margin-bottom:16px;
}
.avatar img{
  width:100%;
  height:100%;
  border-radius:50%;
  object-fit:cover;
  display:block;
  border:3px solid var(--line);
  background:var(--card-2);
}
.avatar .status{
  position:absolute;
  right:4px;
  bottom:6px;
  width:18px;
  height:18px;
  border-radius:50%;
  background:#3fce7d;
  border:3px solid var(--card);
}

/* ---------- name + bio ---------- */
.username{
  margin:0;
  font-size:19px;
  font-weight:700;
  letter-spacing:-.01em;
  word-break:break-word;
}
.bio{
  margin:12px 0 0;
  color:#c6c3d4;
  font-size:14px;
}

/* ---------- socials ---------- */
.socials{
  display:flex;
  flex-direction:column;
  gap:9px;
  width:100%;
  margin-top:auto;       /* pins the socials to the bottom of the card */
  padding-top:20px;
}

.social{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  border-radius:var(--radius-sm);
  background:var(--card-2);
  border:1px solid var(--line);
  color:inherit;
  text-align:left;
  text-decoration:none;
  transition:transform .15s ease, border-color .15s ease, background .15s ease;
}
.social:hover{
  transform:translateY(-2px);
  border-color:var(--accent);
  background:#1c1a26;
}
.social:focus-visible{
  outline:2px solid var(--accent-2);
  outline-offset:2px;
}

.social .ico{
  flex:0 0 34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:9px;
  font-size:13px;
  color:#fff;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
}
.social .txt{
  display:flex;
  flex-direction:column;
  min-width:0;
}
.social .txt b{
  font-size:13px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.social .txt i{
  font-style:normal;
  font-size:11px;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.social .arrow{
  margin-left:auto;
  color:var(--muted);
  font-size:13px;
}

/* ---------- footer ---------- */
.page-foot{
  position:relative;
  z-index:1;
  margin:44px auto 0;
  text-align:center;
  color:var(--muted);
  font-size:12px;
}
.page-foot p{ margin:0; }
.page-foot .tiny{ margin-top:4px; opacity:.7; font-size:11px; }

/* ---------- responsive ---------- */
@media (max-width:900px){
  .profiles{ grid-template-columns:repeat(2,1fr); max-width:640px; }
}

@media (max-width:600px){
  body{ padding:32px 14px 44px; }
  .profiles{ grid-template-columns:1fr; max-width:420px; gap:16px; }
  .page-head h1{ font-size:28px; }
  .page-head{ margin-bottom:28px; }
}

@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; }
}