/* ── Reset & Base ─────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }

:root {
  --bg-1: #0b1020;
  --bg-2: #071025;
  --surface: rgba(255,255,255,0.03);
  --surface-2: rgba(255,255,255,0.02);
  --muted: rgba(255,255,255,0.6);
  --text: #eaf0ff;
  --accent: #7b61ff;
  --accent-2: #00d4ff;
  --glass-radius: 16px;
  --max-width: 820px;
}

html { font-size: 16px }

body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color: var(--text);
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 3rem 1rem;
  background: radial-gradient(600px 400px at 10% 10%, rgba(123,97,255,0.14), transparent),
              radial-gradient(500px 300px at 90% 90%, rgba(0,212,255,0.08), transparent),
              linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 100%);
  background-attachment: fixed;
}

/* decorative blurred blob */
.bg-blob {
  position: fixed;
  inset: -20% -10% auto auto;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle at 30% 30%, rgba(123,97,255,0.25), transparent 40%),
              radial-gradient(circle at 70% 70%, rgba(0,212,255,0.12), transparent 40%);
  filter: blur(48px);
  pointer-events: none;
  z-index: 0;
}

.container { width: 100%; max-width: var(--max-width); display:flex; flex-direction:column; gap:1.5rem; position:relative; z-index:1 }

.profile { text-align:center }
.avatar { width:96px; height:96px; margin:0 auto 0.75rem; border-radius:50%; display:grid; place-items:center; font-weight:700; font-size:1.5rem; color:#fff; background:linear-gradient(135deg,var(--accent),#5ec8ff); box-shadow:0 6px 25px rgba(10,10,20,0.6); border:4px solid rgba(255,255,255,0.03) }
.profile h1 { font-size:1.3rem; margin-bottom:0.25rem }
.tagline { color:var(--muted); font-size:0.95rem }

.controls { display:flex; justify-content:center }
.controls input[type=search] { width:100%; max-width:520px; padding:0.6rem 0.9rem; border-radius:999px; border:1px solid rgba(255,255,255,0.04); background:var(--surface-2); color:var(--text); outline:none; box-shadow: inset 0 -1px 0 rgba(0,0,0,0.25); font-size:0.95rem }
.controls input::placeholder { color: #9aa6c7 }

/* links grid */
.links { display:grid; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); gap:1rem }

.link-card { display:flex; gap:0.9rem; align-items:center; padding:0.9rem; border-radius:12px; background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border:1px solid rgba(255,255,255,0.03); text-decoration:none; color:var(--text); transition: transform .18s ease, box-shadow .18s ease, border-color .18s }
.link-card:hover { transform: translateY(-6px) scale(1.01); box-shadow: 0 10px 30px rgba(2,6,23,0.6); border-color: rgba(123,97,255,0.3) }

.link-card .icon { width:40px; height:40px; border-radius:10px; display:grid; place-items:center; background:linear-gradient(135deg, rgba(123,97,255,0.14), rgba(0,212,255,0.06)); color:var(--accent); flex-shrink:0 }
.link-card span { font-weight:600 }

/* entrance animation */
@keyframes popIn { from { opacity:0; transform: translateY(8px) scale(.995) } to { opacity:1; transform: none } }
.link-card { animation: popIn .36s cubic-bezier(.2,.9,.3,1) both }

footer { text-align:center; color:var(--muted); font-size:0.85rem; padding-top:0.6rem }

@media (max-width:520px) { .links { grid-template-columns: 1fr } .container { padding:0 0.5rem } }