/* ═══════════════════════════════════════════════════════════
   HOSHNOVA — کاتالوگ خدمات (استفاده در همه صفحات خدمات)
   ═══════════════════════════════════════════════════════════ */

.cat-sec{
  position:relative;
  padding:clamp(56px,7vw,96px) clamp(20px,5vw,60px);
  max-width:1240px;margin:0 auto;
  scroll-margin-top:80px;
}
.cat-sec + .cat-sec{border-top:0.5px solid rgba(107,143,255,0.08)}

.cat-head{max-width:760px;margin-bottom:clamp(30px,4vw,46px)}
.cat-eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:10.5px;letter-spacing:3px;
  color:rgba(107,143,255,0.62);margin-bottom:16px;
}
.cat-eyebrow::before{
  content:'';width:26px;height:1px;
  background:linear-gradient(90deg,transparent,var(--g));
}
.cat-h{
  font-size:clamp(25px,3.6vw,40px);font-weight:300;
  letter-spacing:-0.5px;line-height:1.45;
  color:rgba(255,255,255,0.92);margin-bottom:14px;
}
.cat-lead{
  font-size:clamp(13px,1.4vw,15px);line-height:2.1;
  color:rgba(255,255,255,0.36);max-width:660px;
}

/* ─── شبکه کارت‌ها ─── */
.cat-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(12px,1.6vw,18px);
}
.cat-card{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  padding:26px 24px 24px;border-radius:17px;
  background:linear-gradient(160deg,rgba(107,143,255,0.045),rgba(10,15,40,0.42));
  border:0.5px solid rgba(107,143,255,0.13);
  transition:border-color 0.28s,transform 0.28s,box-shadow 0.28s;
  min-width:0;
}
.cat-card::before{
  content:'';position:absolute;top:0;right:0;left:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(107,143,255,0.5),transparent);
  opacity:0;transition:opacity 0.3s;
}
.cat-card:hover{
  border-color:rgba(107,143,255,0.36);
  transform:translateY(-5px);
  box-shadow:0 22px 48px -30px var(--g-glow);
}
.cat-card:hover::before{opacity:1}

/* کارت پرچم‌دار هر خوشه: دو ستون عرض */
.cat-card-lead{
  grid-column:span 2;
  background:linear-gradient(150deg,rgba(107,143,255,0.09),rgba(155,111,255,0.04) 55%,rgba(10,15,40,0.5));
  border-color:rgba(107,143,255,0.24);
}

.cat-top{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.cat-ic{
  width:42px;height:42px;border-radius:12px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(107,143,255,0.09);
  border:0.5px solid rgba(107,143,255,0.22);
  transition:border-color 0.25s,box-shadow 0.25s;
}
.cat-card:hover .cat-ic{
  border-color:rgba(107,143,255,0.5);
  box-shadow:0 0 20px -6px var(--g-glow);
}
.cat-card-lead .cat-ic{width:48px;height:48px;border-radius:14px}

.cat-badge{
  font-size:9.5px;letter-spacing:1.4px;font-weight:500;
  padding:4px 10px;border-radius:20px;white-space:nowrap;
  background:rgba(107,143,255,0.14);color:rgba(107,143,255,0.95);
  border:0.5px solid rgba(107,143,255,0.3);
}
.cat-badge.hot{background:rgba(255,94,58,0.14);color:rgba(255,138,110,0.98);border-color:rgba(255,94,58,0.32)}
.cat-badge.new{background:rgba(155,111,255,0.14);color:rgba(186,152,255,0.98);border-color:rgba(155,111,255,0.32)}

.cat-card h3{
  font-size:16px;font-weight:500;line-height:1.6;
  color:rgba(255,255,255,0.9);margin-bottom:9px;
}
.cat-card-lead h3{font-size:19px}
.cat-card > p{
  font-size:12.8px;line-height:2.05;
  color:rgba(255,255,255,0.35);margin-bottom:16px;
}
.cat-card-lead > p{font-size:13.6px;color:rgba(255,255,255,0.42)}

/* ─── فهرست قابلیت‌ها ─── */
.cat-list{list-style:none;padding:0;margin:0 0 16px;display:flex;flex-wrap:wrap;gap:6px}
.cat-list li{
  font-size:11.5px;line-height:1.7;
  color:rgba(255,255,255,0.44);
  padding:5px 11px;border-radius:8px;
  background:rgba(255,255,255,0.028);
  border:0.5px solid rgba(255,255,255,0.055);
  transition:border-color 0.2s,color 0.2s;
}
.cat-card:hover .cat-list li{border-color:rgba(107,143,255,0.18);color:rgba(255,255,255,0.55)}

/* ─── متریک پایین کارت ─── */
.cat-foot{
  margin-top:auto;padding-top:15px;
  border-top:0.5px solid rgba(255,255,255,0.055);
  display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;
}
.cat-metric{
  font-size:19px;font-weight:500;
  background:linear-gradient(135deg,var(--g),var(--purple));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  white-space:nowrap;
}
.cat-metric-l{font-size:11.5px;color:rgba(255,255,255,0.3);line-height:1.7}

/* ─── نوار «برای چه کسی» ─── */
.cat-for{
  display:flex;flex-wrap:wrap;gap:8px;
  margin-top:clamp(22px,3vw,32px);
  padding-top:22px;border-top:0.5px solid rgba(107,143,255,0.08);
}
.cat-for-label{
  font-size:11px;letter-spacing:1.5px;
  color:rgba(255,255,255,0.26);
  align-self:center;margin-left:6px;
}
html[dir="ltr"] .cat-for-label{margin-left:0;margin-right:6px}
.cat-for span:not(.cat-for-label){
  font-size:11.5px;padding:5px 13px;border-radius:20px;
  color:rgba(155,111,255,0.85);
  background:rgba(155,111,255,0.07);
  border:0.5px solid rgba(155,111,255,0.18);
}

/* ─── واکنش‌گرا ─── */
@media(max-width:1000px){
  .cat-grid{grid-template-columns:repeat(2,1fr)}
  .cat-card-lead{grid-column:span 2}
}
@media(max-width:660px){
  .cat-grid{grid-template-columns:1fr}
  .cat-card-lead{grid-column:span 1}
  .cat-card{padding:22px 19px 20px}
  .cat-sec{padding:44px 18px}
}