:root{
  --clr-main:#6366f1;          /* indigo‑500 */
  --clr-main-dark:#4f46e5;     /* indigo‑600 */
  --clr-bg:#f3f4f6;            /* gray‑100  */
  --clr-card:#ffffff;          /* white     */
  --clr-text:#1f2937;          /* gray‑800  */
  --clr-text-sub:#475569;      /* gray‑600  */
  --clr-accent:#10b981;        /* emerald   */
}

/* ==== بادی و سکشن اصلی ==== */
body{background:var(--clr-bg);}
.mhm-hp-section{direction:rtl;font-family:'DanaFont','Vazirmatn',sans-serif;padding-bottom:20px}
.mhm-hp-title{font:900 2.6rem/1 'DanaFont';text-align:center;margin:90px 0 70px;color:var(--clr-text)}

/* ==== تیتر زیباتر سرور ==== */
.mhm-hp-row-title{text-align:center;margin:10px 0 60px}
.mhm-hp-row-title span{
  display:inline-flex;align-items:center;gap:10px;
  padding:10px 40px;font:900 1.7rem/1 'DanaFont';
  color:#fff;
  background:linear-gradient(135deg,var(--clr-main-dark),var(--clr-main));
  border-radius:999px;box-shadow:0 8px 20px rgba(0,0,0,.08);
}
.mhm-hp-row-title span::before{
  content:'🚀';font-size:1.2rem;transform:rotate(-20deg);
}

/* ==== اسلایدر ==== */
.mhm-hp-swiper{padding:0 8px 5px}
.swiper-button-next,.swiper-button-prev{
  color:var(--clr-main-dark);width:44px;height:44px;border-radius:50%;
  background:#fff;box-shadow:0 6px 18px rgba(0,0,0,.06)
}
.swiper-button-next:after,.swiper-button-prev:after{font-size:18px;font-weight:900}
.swiper-pagination-bullet-active{background:var(--clr-main-dark)}
.swiper-pagination{display:none}

/* ==== کارت ==== */
.mhm-hp-card{
  background:var(--clr-card);border-radius:28px;overflow:hidden;
  box-shadow:0 10px 35px rgba(0,0,0,.05);display:flex;flex-direction:column;height:100%;
  transition:transform .35s cubic-bezier(.4,0,.2,1),box-shadow .35s;
}
.mhm-hp-card:hover{
  transform:translateY(-10px);box-shadow:0 16px 40px rgba(0,0,0,.08)
}

/* هدر داخل کارت */
.mhm-hp-head{
  background:linear-gradient(135deg,var(--clr-main),var(--clr-main-dark));
  padding:32px;text-align:center
}
.mhm-hp-head h3{margin:0;font:800 1.35rem/1 'DanaFont';color:#fff}

/* بدنه کارت برای پر شدن ارتفاع */
.mhm-hp-body{display:flex;flex-direction:column;flex:1}

/* لیست مشخصات */

/* === ویژگی‌های پلن (Storage / RAM / CPU / …) === */
.mhm-hp-spec{
  list-style:none;
  margin:0;
  padding:24px 28px 0;
  display:flex;               /* ردیف‌های منعطف */
  flex-wrap:wrap;             /* دو ستون در دسکتاپ */
  gap:10px 12px;              /* ردیف و ستون‌گَپ */
}

.mhm-hp-spec li{
   list-style: none; 
  flex:0 1 calc(50% - 12px);  /* دو آیتم در هر ردیف */
  background:#f9fafb;
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:6px 10px 6px 26px;  /* جا برای آیکن */
  font:.78rem 'Vazirmatn',sans-serif;
  color:var(--clr-text-sub);
  position:relative;
  line-height:1.4;
}

.mhm-hp-spec li::before{
  content:'✔';
  position:absolute;
  right:-11px;                 /* داخل چپ‌چین RTL */
  top:7px;
  font-size:.7rem;
  color:var(--clr-accent);
  font-weight:700;
}

@media(max-width:480px){      /* در موبایل → یک ستون */
  .mhm-hp-spec li{flex:0 0 100%;}
}

/* تب‌ها */
.mhm-hp-tabs{display:flex;background:#e5e7eb;border-radius:16px;margin:18px 28px 0;padding:4px}
.mhm-hp-tabs button{
  flex:1;border:0;background:none;border-radius:12px;padding:7px 0;cursor:pointer;
  font-family:inherit;font-size:.78rem;color:var(--clr-text-sub);transition:.25s
}
.mhm-hp-tabs button.active{
  background:#fff;color:var(--clr-main-dark);font-weight:800;box-shadow:0 2px 8px rgba(0,0,0,.06)
}

/* قیمت */
.mhm-hp-price{text-align:center;font:900 1.9rem/1 'DanaFont';color:var(--clr-text);
  margin:22px 0 8px}

/* دکمه */
.mhm-hp-btn{
  margin:0 28px 32px;padding:14px 0;border-radius:18px;
  font:800 .95rem/1 'DanaFont';color:#fff;text-align:center;text-decoration:none;
  background:linear-gradient(135deg,var(--clr-main-dark),var(--clr-main));
  transition:.2s filter, .2s transform
}
.mhm-hp-btn:hover{filter:brightness(1.08);transform:translateY(-2px)}


/* .mhm-hp-swiper .swiper-wrapper{flex-direction:row-reverse;}  */  /* حذف شود */

.mhm-hp-swiper.few .swiper-wrapper{                               /* اگر ≤4 کارت */
  justify-content:center;                                         /* وسط */
}

.swiper-pagination{display:none;}  


.mhm-hp-divider{
   height:2px;
   background:linear-gradient(to left, transparent, var(--clr-main), transparent);
   margin:60px auto;
   max-width:60%;
   border-radius:999px;
}