@property --angle{ syntax:'<angle>'; initial-value:0deg; inherits:false; }

:root{
  --page-bg:#050607; --page-fg:#e9efe9;
  --bg:#07110c; --glass:rgba(255,255,255,0.045); --border:rgba(255,255,255,0.16);
  --accent:#39ff14; --accent-dim:#1c7f0a; --text:#eafbef; --muted:#8fa89b;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{background:var(--page-bg); color:var(--page-fg); font-family:'Inter',system-ui,sans-serif; min-height:100vh;}
a{color:inherit;}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
}

.stage{
  min-height:100vh; display:flex; justify-content:center;
  padding:64px 20px 90px; position:relative; overflow:hidden; background:var(--bg);
}
.stage::before{
  content:""; position:absolute; inset:-20%;
  background:
    radial-gradient(closest-side, rgba(57,255,20,.22), transparent 70%) no-repeat 50% 20%/60% 42%,
    radial-gradient(closest-side, rgba(57,255,20,.10), transparent 70%) no-repeat 20% 85%/50% 40%;
  filter:blur(50px); z-index:0;
}
.card{ position:relative; z-index:2; width:100%; max-width:420px; text-align:center; }

.avatar-wrap{ position:relative; width:132px; height:132px; margin:0 auto 20px; border-radius:50%; }
.ring{
  position:absolute; inset:-8px; border-radius:50%; z-index:0; pointer-events:none;
  background:conic-gradient(from var(--angle), rgba(57,255,20,.15), var(--accent) 40%, rgba(57,255,20,.15) 60%, var(--accent) 100%);
  filter:blur(2px);
  animation:spin 7s linear infinite;
}
@keyframes spin{ to{ --angle:360deg; } }
.avatar-glow{
  position:absolute; inset:-8px; border-radius:50%; z-index:0;
  box-shadow:0 0 50px 6px rgba(57,255,20,.55);
  animation:haloBreathe 4s ease-in-out infinite;
}
@keyframes haloBreathe{
  0%,100%{ box-shadow:0 0 40px 2px rgba(57,255,20,.4); }
  50%{ box-shadow:0 0 62px 8px rgba(57,255,20,.7); }
}
.avatar-art{
  position:absolute; inset:0; border-radius:50%; overflow:hidden; z-index:1;
  display:flex; align-items:center; justify-content:center;
  background:
    linear-gradient(155deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.02) 45%),
    radial-gradient(circle at 50% 28%, rgba(57,255,20,.4), transparent 60%),
    linear-gradient(160deg,#0b1a12,#040705);
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(20px) saturate(180%) brightness(1.1);
  -webkit-backdrop-filter:blur(20px) saturate(180%) brightness(1.1);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.4);
}
.avatar-art span{
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:38px;
  color:#fff; text-shadow:0 0 24px rgba(57,255,20,.7); letter-spacing:.01em;
}
.avatar-art img{ width:100%; height:100%; object-fit:cover; }
.avatar-wrap .sheen{
  position:absolute; inset:0; z-index:2; pointer-events:none; border-radius:50%; overflow:hidden;
  background:linear-gradient(115deg, rgba(255,255,255,.2) 0%, transparent 30%);
  mix-blend-mode:overlay;
  animation:sheenSweep 3.2s ease-in-out .9s 1;
}
@keyframes sheenSweep{
  0%{transform:translateX(-120%) rotate(8deg);}
  60%,100%{transform:translateX(120%) rotate(8deg);}
}
.badge{
  position:absolute; right:2px; bottom:2px; z-index:3;
  width:28px; height:28px; border-radius:50%;
  background:var(--accent); display:flex; align-items:center; justify-content:center;
  border:3px solid #07110c;
  box-shadow:0 0 14px rgba(57,255,20,.8);
  animation:badgePop .5s cubic-bezier(.34,1.56,.64,1) .9s both;
}
.badge svg{ width:13px; height:13px; }
@keyframes badgePop{ from{ transform:scale(0); } to{ transform:scale(1); } }

.name{
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:25px; color:#fff;
  margin:0 0 8px; letter-spacing:-.01em;
}
.bio{
  font-family:'Inter',sans-serif; font-size:13.5px; line-height:1.5; color:var(--muted);
  margin:0 0 26px; max-width:300px; margin-left:auto; margin-right:auto; white-space:pre-line;
}

.rows{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:30px; }
.row{
  display:flex; flex-direction:column;
  padding:12px 12px 14px; border-radius:22px; text-decoration:none;
  background:
    linear-gradient(155deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.02) 40%),
    var(--glass);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(22px) saturate(190%) brightness(1.12);
  -webkit-backdrop-filter:blur(22px) saturate(190%) brightness(1.12);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.32), 0 10px 26px -18px rgba(0,0,0,.75);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  text-align:left; position:relative; overflow:hidden;
}
.row:hover{ transform:translateY(-4px); border-color:var(--accent-dim); box-shadow:inset 0 1.5px 0 rgba(255,255,255,.4), 0 16px 34px -18px rgba(57,255,20,.4); }
.row::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(100deg, transparent 40%, rgba(255,255,255,.28) 50%, transparent 60%);
  background-size:250% 100%; background-position:150% 0;
  animation:cardSweep 5s ease-in-out infinite;
}
.row:nth-of-type(1)::after{ animation-delay:.3s; }
.row:nth-of-type(2)::after{ animation-delay:1.6s; }
.row:nth-of-type(3)::after{ animation-delay:2.9s; }
.row:nth-of-type(4)::after{ animation-delay:4.2s; }
@keyframes cardSweep{
  0%, 82%{ background-position:150% 0; }
  100%{ background-position:-50% 0; }
}
.row-thumb{
  position:relative;
  width:100%; aspect-ratio:1/1; border-radius:16px; display:flex; align-items:center; justify-content:center;
  color:var(--accent); margin-bottom:12px;
  background:linear-gradient(155deg, rgba(255,255,255,.14), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3);
  overflow:hidden;
}
.row-thumb svg{ width:48%; height:48%; }
.row-thumb img{ width:100%; height:100%; object-fit:cover; }
.row-body{ display:flex; align-items:flex-end; justify-content:space-between; gap:8px; }
.row-text{ min-width:0; }
.row-label{ font-family:'Inter',sans-serif; font-weight:600; font-size:14.5px; color:#fff; display:block; line-height:1.25; }
.row-sub{ font-family:'Space Mono',monospace; font-size:9.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); margin-top:4px; display:block; }
.row-arrow{ flex:none; width:16px; height:16px; color:var(--muted); transition:transform .3s ease, color .3s ease; margin-bottom:2px; }
.row:hover .row-arrow{ transform:translateX(3px); color:var(--accent); }

.row.featured{
  background:
    linear-gradient(155deg, rgba(255,255,255,.22) 0%, rgba(57,255,20,.05) 55%),
    linear-gradient(160deg, rgba(57,255,20,.32), rgba(57,255,20,.14));
  border:1px solid rgba(57,255,20,.55);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.5), 0 0 34px -4px rgba(57,255,20,.55);
  animation:featPulse 3.4s ease-in-out infinite;
}
@keyframes featPulse{
  0%,100%{ box-shadow:inset 0 1.5px 0 rgba(255,255,255,.5), 0 0 28px -6px rgba(57,255,20,.5); }
  50%{ box-shadow:inset 0 1.5px 0 rgba(255,255,255,.6), 0 0 44px 0 rgba(57,255,20,.75); }
}
.row.featured .row-label{ color:#04140b; }
.row.featured .row-sub{ color:rgba(4,20,11,.65); }
.row.featured .row-thumb{ background:rgba(4,20,11,.22); border-color:rgba(4,20,11,.28); color:#04140b; }
.row.featured .row-arrow{ color:#04140b; }
.row.featured .tag{
  position:absolute; top:-1px; right:18px; font-family:'Space Mono',monospace; font-size:9px;
  letter-spacing:.1em; text-transform:uppercase; color:#04140b; background:#fff;
  padding:2px 8px; border-radius:0 0 6px 6px; opacity:.85;
}

.socials{ display:flex; justify-content:center; gap:13px; }
.social-btn{
  width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  text-decoration:none; color:var(--text);
  background:linear-gradient(155deg, rgba(255,255,255,.14), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35);
  backdrop-filter:blur(18px) saturate(180%) brightness(1.12);
  -webkit-backdrop-filter:blur(18px) saturate(180%) brightness(1.12);
  transition:transform .25s ease, box-shadow .25s ease, color .25s ease, background .25s ease;
}
.social-btn svg{ width:16px; height:16px; }
.social-btn:hover{
  transform:translateY(-3px) scale(1.06); color:#04120a; background:var(--accent);
  box-shadow:0 8px 22px -6px rgba(57,255,20,.6), inset 0 1px 0 rgba(255,255,255,.6);
}

.enter{ animation:enterUp .7s cubic-bezier(.16,1,.3,1) both; }
.enter1{animation-delay:.02s;} .enter2{animation-delay:.12s;}
.enter3{animation-delay:.2s;} .enter4{animation-delay:.28s;}
.enter5{animation-delay:.36s;} .enter6{animation-delay:.44s;} .enter7{animation-delay:.52s;}
@keyframes enterUp{
  from{opacity:0; transform:translateY(16px); filter:blur(6px);}
  to{opacity:1; transform:translateY(0); filter:blur(0);}
}