:root{
  --bg1:#0f172a;
  --bg2:#071129;
  --card-bg: rgba(255,255,255,0.06);
  --glass: rgba(255,255,255,0.04);
  --muted: #aab3c7;
  --accent1: #7b61ff;
  --accent2: #00c2ff;
  --link-blue: #0a66c2;
  --x-white: ##ffffff;
  --radius: 16px;
  --glass-border: rgba(255,255,255,0.06);
}

*{box-sizing:border-box}
html,body,#root{height:100%}
body{
  margin:0;
  min-height:100vh;
  font-family: Inter, "Segoe UI", Roboto, system-ui, -apple-system, "Helvetica Neue", Arial;
  color: #e6eef8;
  background: linear-gradient(180deg,var(--bg1),var(--bg2));
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px;
}

/* Page layout */
.page{width:100%;max-width:900px;padding:24px}

/* Card */
.card{
  background: linear-gradient(135deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius: var(--radius);
  padding:28px;
  box-shadow: 0 10px 30px rgba(4,6,15,0.6);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(8px) saturate(120%);
}

/* Header */
.card-header{
  display:flex;
  gap:18px;
  align-items:center;
  margin-bottom:16px;
}
.avatar{width:84px;height:84px;flex:0 0 84px;border-radius:12px;overflow:hidden}
.avatar-svg{width:100%;height:100%;display:block}
.heading h1{margin:0;font-size:1.6rem;letter-spacing:0.2px}
.sub{margin:4px 0 0;color:var(--muted);font-size:0.95rem}

/* Body */
.contact-body{padding-top:6px}
.lead{margin:0 0 18px;color:#dfeaff;line-height:1.4}
.socials{display:flex;flex-wrap:wrap;gap:12px}

/* Social buttons */
.social-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:12px;
  text-decoration:none;
  color:inherit;
  font-weight:600;
  font-size:0.98rem;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  box-shadow: 0 6px 18px rgba(3,6,20,0.35);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.005));
  border:1px solid rgba(255,255,255,0.04);
  position:relative; /* allow pseudo elements to behave consistently */
}

/* base icon pseudo-element */
.social-btn:before{
  display:inline-block;
  width:20px;
  height:20px;
  flex:0 0 20px;
  margin-right:8px;
  vertical-align:middle;
  content: "";
}

/* use SVG data-uris for crisp icons (overrides the empty base content) */
.social-btn.linkedin:before {
    content: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23FFF' viewBox='0 0 448 512'%3E%3Cpath d='M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.09 54.3-53.79 54.3M447.9 448h-92.4V302.4c0-34.7-.7-79.3-48.3-79.3-48.3 0-55.7 37.7-55.7 76.6V448H159V148.9h88.8v40.8h1.3c12.4-23.5 42.7-48.3 87.9-48.3 94 0 111.3 61.9 111.3 142.3V448z'/%3E%3C/svg%3E");
}

.social-btn.x:before {
    content: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 1227'%3E%3Cpath fill='%23fff' d='M714.2 558.8 1150.4 0H1044L670.3 482.9 367.8 0H0l458.3 701.3L0 1227h106.4l397-519.6L823.5 1227H1200zM550.6 686.3l-45.9-71.6-359-528.2h170.1l278.1 433.2 45.9 71.6L1019 1183H849.2z'/%3E%3C/svg%3E");
}

/* adjust colors for linkedin and x to keep previous visual style */
.social-btn.x{
  color:var(--x-white);
  background: linear-gradient(180deg,rgba(10,102,194,0.09), rgba(10,102,194,0.02));
}
.social-btn.linkedin{
  color:var(--link-blue);
  background: linear-gradient(180deg, rgba(10,102,194,0.09), rgba(10,102,194,0.02));
  border:1px solid rgba(10,102,194,0.12);
}

/* Footer */
.card-footer{margin-top:20px;color:var(--muted);font-size:0.9rem;text-align:left}
.muted{color:var(--muted);font-size:0.85rem}

/* Responsive */
@media (max-width:520px){
  .card{padding:20px}
  .card-header{gap:12px}
  .avatar{width:64px;height:64px}
  .heading h1{font-size:1.3rem}
  .social-btn{padding:10px 12px}
}

/* Accessibility */
.social-btn:focus{outline:3px solid rgba(123,97,255,0.18); outline-offset:3px}
@media (prefers-reduced-motion: reduce){
  .social-btn{transition:none}
}