<div class="radikalwp-skill-card"><div class="radikalwp-skill-card-head"><i>م<//i><div><b>مریم احمدی<//b><span>طراح محصول<//span><//div><//div><div class="radikalwp-skill-card-row"><span>فیگما<//span><div><i style="width:85%"><//i><//div><b>۸۵٪<//b><//div><div class="radikalwp-skill-card-row"><span>وب‌دیزاین<//span><div><i style="width:70%"><//i><//div><b>۷۰٪<//b><//div><div class="radikalwp-skill-card-row"><span>تحقیق کاربر<//span><div><i style="width:92%"><//i><//div><b>۹۲٪<//b><//div><//div>

.radikalwp-skill-card {
  width: 310px;
  padding: 20px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
}
.radikalwp-skill-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.radikalwp-skill-card-head i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  font-style: normal;
  font-size: 17px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #6366f1, #a855f7);
  border-radius: 14px;
}
.radikalwp-skill-card-head b { display: block; font-size: 14px; color: #0f172a; }
.radikalwp-skill-card-head span { font-size: 11px; color: #94a3b8; }
.radikalwp-skill-card-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 11px;
}
.radikalwp-skill-card-row:last-child { margin-bottom: 0; }
.radikalwp-skill-card-row > span { width: 74px; font-size: 11.5px; color: #475569; }
.radikalwp-skill-card-row > div {
  flex: 1;
  height: 8px;
  background: #f1f5f9;
  border-radius: 999px;
  overflow: hidden;
}
.radikalwp-skill-card-row > div > i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #8b5cf6, #6366f1);
  animation: radikalwp-skill-fill 1.2s ease forwards;
  transform-origin: right;
}
.radikalwp-skill-card-row > b { width: 36px; font-size: 11px; font-weight: 800; color: #6d28d9; text-align: left; }
@keyframes radikalwp-skill-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }