:root {
  --bg: #0b0c10;
  --bg-soft: #0f1117;
  --card: #11131a;
  --text: #e5e7eb;
  --muted: #9aa3b2;
  --brand: #e2280c; /* Omniya blue */
  --brand-2: #f4512c; /* teal accent */
  --ring: #22d3ee;
  --shadow: 0 10px 25px rgba(2, 6, 23, 0.5);
  --radius: 18px;
  --border: 1px solid rgba(255, 255, 255, 0.08);
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #f7fafc;
    --bg-soft: #f1f5f9;
    --card: #ffffff;
    --text: #0f172a;
    --muted: #475569;
    --shadow: 0 10px 25px rgba(2, 6, 23, 0.08);
    --border: 1px solid rgba(2, 6, 23, 0.06);
  }
}
* {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
}
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color: var(--text);
  background: radial-gradient(
      1200px 800px at 100% -10%,
      rgba(14, 165, 233, 0.15),
      transparent 60%
    ),
    radial-gradient(
      1200px 800px at -20% 110%,
      rgba(139, 92, 246, 0.12),
      transparent 60%
    ),
    var(--bg);
  display: grid;
  place-items: center;
  padding: 32px 16px;
}
.shell {
  width: 100%;
  max-width: 720px;
  background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.06),
      rgba(255, 255, 255, 0)
    )
    border-box;
  border: var(--border);
  backdrop-filter: blur(10px);
  border-radius: calc(var(--radius) + 6px);
  padding: 28px;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
header {
  display: flex;
  align-items: center;
  gap: 18px;
}
.avatar {
  width: 84px;
  height: 84px;
  border-radius: 22px;
  flex: 0 0 auto;
  background: #fff;
  position: relative;
  padding: 2px;
}
.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
}
.title {
  font-size: 1.5rem;
  font-weight: 700;
}
.bio {
  color: var(--muted);
  margin-top: 4px;
  line-height: 1.6;
}
.links {
  margin-top: 22px;
  display: grid;
  gap: 14px;
}
.card {
  border-radius: var(--radius);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.04),
    rgba(255, 255, 255, 0)
  );
  border: var(--border);
}
.card:hover {
  background: #fff;
}
.card:hover .label {
  color: var(--brand);
}
.card:hover .sublabel {
  color: #0b0c10;
}
.card a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  text-decoration: none;
  color: var(--text);
}
.icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  background: linear-gradient(135deg, var(--brand), var(--text));
}
.icon-img {
  width: 25px;
  height: 25px;

  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.label {
  font-weight: 700;
}
.sublabel {
  color: var(--muted);
  font-size: 0.92rem;
}
footer {
  margin-top: 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--muted);
  font-size: 0.9rem;
}
.socials {
  display: flex;
  gap: 10px;
}
.socials a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: var(--border);
  background: var(--bg-soft);
  color: var(--text);
  text-decoration: none;
}