/* =========================================================================
   skills-four — استایل ویجت المنتور زبان‌نگار (هندل: zbn-el-skills-four)
   ========================================================================= */

.zsf{--bg:#0C0910;--ink:#EAF0FF;--muted:#8C99BC;--primary:#FF3B5C;--deep:#E11D48;--rose:#FF5C8A;--amber:#F5B301;--card:rgba(255,255,255,.03);direction:rtl;font-family:Vazirmatn,IRANYekanX,system-ui,sans-serif;color:var(--ink);background:var(--bg);padding-block:80px;}
.zsf-container{max-width:1160px;margin:0 auto;padding-inline:40px;}
.zsf-head{text-align:center;}
.zsf-eyebrow{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;background:color-mix(in srgb,var(--primary) 10%,transparent);border:1px solid color-mix(in srgb,var(--primary) 15%,transparent);color:#FFB3C1;font-size:12px;font-weight:800;}
.zsf-eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--primary);box-shadow:0 0 12px var(--primary);}
.zsf-title{margin:16px 0 40px;font-size:34px;font-weight:900;line-height:1.6;background:linear-gradient(110deg,var(--ink) 35%,#FF9FB2);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}

.zsf-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.zsf-item{margin:0;}
.zsf-card{position:relative;overflow:hidden;min-height:206px;padding:26px 22px;border-radius:22px;background:var(--card);border:1px solid rgba(255,150,175,.14);display:flex;flex-direction:column;justify-content:flex-end;text-decoration:none;color:inherit;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;}
.zsf-card:hover{transform:translateY(-4px);}
.zsf-card .ghost{position:absolute;top:16px;left:18px;font-size:46px;font-weight:900;line-height:1;color:transparent;direction:ltr;pointer-events:none;}
.zsf-card .bar{width:34px;height:5px;border-radius:3px;margin-bottom:12px;}
.zsf-card h3{margin:0;font-size:23px;font-weight:900;color:var(--ink);direction:ltr;text-align:right;}
.zsf-card p{margin:6px 0 0;font-size:13px;color:var(--muted);}

.zsf-card.is-cyan{box-shadow:0 0 40px color-mix(in srgb,var(--primary) 28%,transparent);}
.zsf-card.is-blue{box-shadow:0 0 40px color-mix(in srgb,var(--deep) 28%,transparent);}
.zsf-card.is-violet{box-shadow:0 0 40px color-mix(in srgb,var(--rose) 28%,transparent);}
.zsf-card.is-amber{box-shadow:0 0 40px rgba(245,179,1,.45);}
.zsf-card.is-cyan .bar{background:linear-gradient(135deg,#FF6B8A,var(--primary));box-shadow:0 0 16px color-mix(in srgb,var(--primary) 28%,transparent);}
.zsf-card.is-blue .bar{background:linear-gradient(135deg,var(--deep),#F43F5E);box-shadow:0 0 16px color-mix(in srgb,var(--deep) 28%,transparent);}
.zsf-card.is-violet .bar{background:linear-gradient(135deg,var(--rose),#FF7DA6);box-shadow:0 0 16px color-mix(in srgb,var(--rose) 28%,transparent);}
.zsf-card.is-amber .bar{background:linear-gradient(135deg,var(--amber),#F97316);box-shadow:0 0 16px rgba(245,179,1,.45);}
.zsf-card.is-cyan .ghost{-webkit-text-stroke:1.8px color-mix(in srgb,var(--primary) 23%,transparent);}
.zsf-card.is-blue .ghost{-webkit-text-stroke:1.8px color-mix(in srgb,var(--deep) 23%,transparent);}
.zsf-card.is-violet .ghost{-webkit-text-stroke:1.8px color-mix(in srgb,var(--rose) 23%,transparent);}
.zsf-card.is-amber .ghost{-webkit-text-stroke:1.8px rgba(245,179,1,.45);}
.zsf-card.is-cyan:hover{border-color:color-mix(in srgb,var(--primary) 23%,transparent);box-shadow:0 20px 46px rgba(0,0,0,.4),0 0 40px color-mix(in srgb,var(--primary) 28%,transparent);}
.zsf-card.is-blue:hover{border-color:color-mix(in srgb,var(--deep) 23%,transparent);box-shadow:0 20px 46px rgba(0,0,0,.4),0 0 40px color-mix(in srgb,var(--deep) 28%,transparent);}
.zsf-card.is-violet:hover{border-color:color-mix(in srgb,var(--rose) 23%,transparent);box-shadow:0 20px 46px rgba(0,0,0,.4),0 0 40px color-mix(in srgb,var(--rose) 28%,transparent);}
.zsf-card.is-amber:hover{border-color:rgba(245,179,1,.45);box-shadow:0 20px 46px rgba(0,0,0,.4),0 0 40px rgba(245,179,1,.45);}

@media(max-width:1024px){.zsf-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:480px){.zsf-grid{grid-template-columns:1fr;}}