:root{
  --bg:#050607;
  --surface:#0b0f13;
  --surface-2:#0f1419;
  --line:rgba(116,154,190,.26);
  --line-strong:rgba(43,151,255,.72);
  --text:#f7f9fc;
  --muted:#a9b3c0;
  --blue:#1998ff;
  --blue-2:#0d6efd;
  --max:640px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(circle at 50% -15%, rgba(25,152,255,.10), transparent 34rem),
    var(--bg);
  color:var(--text);
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}
body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.17;
  background-image:radial-gradient(rgba(255,255,255,.22) .5px, transparent .5px);
  background-size:4px 4px;
  mask-image:linear-gradient(to bottom, #000, transparent 85%);
}
.ambient{
  position:fixed;
  width:280px;height:280px;
  border:52px solid rgba(22,111,190,.11);
  border-radius:50%;
  pointer-events:none;
  filter:blur(.2px);
}
.ambient-one{left:-190px;top:-150px}
.ambient-two{right:-205px;bottom:-165px}
.page-shell{
  width:100%;
  min-height:100vh;
  display:flex;
  justify-content:center;
  padding:28px 18px 34px;
}
.profile{width:min(100%,var(--max));text-align:center}
.avatar-wrap{
  position:relative;
  width:126px;height:126px;
  margin:10px auto 20px;
}
.avatar-ring{
  width:100%;height:100%;
  padding:4px;
  border-radius:50%;
  background:linear-gradient(135deg,#0b72ff,#1bb8ff 55%,#0754c8);
  box-shadow:0 0 0 1px rgba(38,157,255,.2),0 0 42px rgba(25,152,255,.18);
}
.avatar{
  display:block;width:100%;height:100%;
  object-fit:cover;border-radius:50%;
  border:3px solid #07090b;
}
.verified{
  position:absolute;
  width:42px;height:42px;
  right:-3px;bottom:-2px;
  object-fit:contain;
  filter:drop-shadow(0 3px 10px rgba(0,0,0,.55));
}
.identity h1{
  margin:0;
  font-size:clamp(28px,7vw,38px);
  line-height:1.12;
  letter-spacing:-.04em;
  font-weight:800;
}
.verified-word{
  position:absolute;
  width:1px;height:1px;
  overflow:hidden;clip:rect(0 0 0 0);
}
.handle{
  margin:9px 0 0;
  color:#9da9b7;
  font-size:15px;
  font-weight:500;
}
.bio{
  max-width:520px;
  margin:20px auto 28px;
  color:#c5ced8;
  font-size:15px;
  line-height:1.65;
}
.links{display:grid;gap:12px}
.social-card,.email-card{
  display:flex;
  align-items:center;
  min-height:76px;
  padding:12px 17px 12px 13px;
  border:1px solid var(--line);
  border-radius:19px;
  background:linear-gradient(110deg,rgba(13,18,23,.96),rgba(9,13,17,.96));
  color:var(--text);
  text-decoration:none;
  text-align:left;
  transition:transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease;
}
.social-card:hover,.social-card:focus-visible,.email-card:hover,.email-card:focus-visible{
  transform:translateY(-2px);
  border-color:rgba(56,169,255,.66);
  background:linear-gradient(110deg,#101820,#0b1117);
  box-shadow:0 10px 35px rgba(0,0,0,.32),0 0 25px rgba(25,152,255,.07);
  outline:none;
}
.icon,.mail-icon{
  flex:0 0 50px;width:50px;height:50px;
  display:grid;place-items:center;
  border-radius:15px;
  background:#111820;
}
.icon svg,.mail-icon svg{width:26px;height:26px;fill:currentColor;stroke:currentColor;stroke-width:1.7}
.facebook .icon{background:#1877f2;color:#fff}
.youtube .icon{background:#ff0033;color:#fff}
.instagram .icon{background:radial-gradient(circle at 30% 105%,#ffd600 0 10%,#ff7a00 28%,#ff0169 52%,#d300c5 72%,#7638fa 100%);color:#fff}
.tiktok .icon{background:#050505;color:#fff;border:1px solid #222}
.x .icon{background:#000;color:#fff;border:1px solid #242424}
.linkedin .icon{background:#0a7bdc;color:#fff}
.link-copy{
  min-width:0;
  flex:1;
  padding:0 14px;
}
.link-copy strong{
  display:block;
  font-size:16px;
  line-height:1.25;
  font-weight:700;
}
.link-copy small{
  display:block;
  margin-top:4px;
  color:#98a5b3;
  font-size:12px;
  line-height:1.25;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.arrow{
  color:#9eb4ca;
  font-size:23px;
  line-height:1;
  transition:transform .2s ease,color .2s ease;
}
.social-card:hover .arrow,.email-card:hover .arrow{transform:translate(2px,-2px);color:#35a7ff}
.email-card{
  margin-top:3px;
  border-color:rgba(25,152,255,.7);
  background:linear-gradient(110deg,rgba(8,27,45,.92),rgba(8,16,25,.98));
}
.mail-icon{
  color:#dff3ff;
  background:linear-gradient(135deg,#0d5fae,#12375c);
  border:1px solid rgba(75,173,255,.32);
}
footer{padding:35px 0 10px}
.footer-line{
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(114,145,173,.35),transparent);
  margin-bottom:22px;
}
footer p{margin:0;color:#8d99a7;font-size:12px}
footer span{color:#2a9dff;font-weight:800;letter-spacing:.02em}
@media (min-width:700px){
  .page-shell{padding-top:52px}
  .avatar-wrap{width:138px;height:138px;margin-bottom:22px}
  .links{gap:13px}
  .social-card,.email-card{min-height:82px;border-radius:20px;padding-left:15px}
  .icon,.mail-icon{width:54px;height:54px;flex-basis:54px;border-radius:16px}
  .icon svg,.mail-icon svg{width:28px;height:28px}
  .link-copy strong{font-size:17px}
  .link-copy small{font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;transition:none!important}
}