/* کارت‌های تمیز مثل صفحه خدمات */
.ph-card{
  background:#f8fafc;           /* هم‌خانواده تم آبی */
  border-radius:28px;
  padding:32px 28px;
  box-shadow:0 8px 24px rgba(0,20,80,.06);
  position:relative;
  overflow:hidden;
  isolation:isolate;            /* جلوگیری از تداخل لایه‌ها */
}

/* دکور پس‌زمینه فقط داخل کارت و زیر متن */
.ph-card::before{
  content:"";
  position:absolute;
  top:-140px;
  inset-inline-end:-140px;      /* سمت راست در RTL */
  width:460px;height:460px;
  border-radius:50%;
  background:radial-gradient(ellipse at center,
              #0f5bff 0%, #3b82f6 55%, transparent 70%);
  opacity:.08;
  z-index:0;
  pointer-events:none;
}

/* متن همیشه بالاتر از دکور */
.ph-card > *{ position:relative; z-index:1; }
.ph-card h3{ margin:0 0 12px; line-height:1.7; }
.ph-card p{ margin:0 0 10px; line-height:2; }

/* حذف دکور سراسری فقط برای صفحه خانه */
.home-page .section-title::before,
.home-page .content::before,
.home-page .projects-item::before{
  display:none !important;
}
.ph-card::before {
    content: "";
    position: absolute;
    top: -180px;               /* بالاتر قرار می‌گیرد تا لبهٔ بالا را پر کند */
    left: 50%;                 /* مرکز افقی کارت */
    transform: translateX(-50%);
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center,
    #0f5bff 0%, #3b82f6 45%, transparent 70%);
    opacity: .08;
    z-index: 0;
    pointer-events: none;
}
/* ==== هدر متحرک صفحه اصلی پارت هیراد (گرادیان تغییر رنگ) ==== */

body.home .main-banner-area {
  position: relative;
  overflow: hidden;

  /* گرادیان متحرک شبیه نسخه استاتیک */
  background: linear-gradient(135deg, #fcd1df 0%, #f8bbd0 25%, #e3f2fd 55%, #dbeafe 80%, #fcd1df 100%);
  background-size: 300% 300%;
  animation: ph-hero-gradient 18s ease-in-out infinite;

  /* اگر تو استاتیک padding زیاد بود، می‌تونی تنظیمش کنی */
  padding-top: 180px;
  padding-bottom: 160px;
}

/* مطمئن شو متن‌ها روی بک‌گراند خوب دیده می‌شن */
body.home .main-banner-area .hero-headline,
body.home .main-banner-area .hero-headline span,
body.home .main-banner-area .hero-subline {
  color: #010110;
}

/* انیمیشن حرکت گرادیان */
@keyframes ph-hero-gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
/* ==== هدر متحرک صفحه اصلی پارت هیراد (گرادیان تغییر رنگ) ==== */

body.home .main-banner-area {
  position: relative;
  overflow: hidden;

  /* گرادیان متحرک شبیه نسخه استاتیک */
  background: linear-gradient(135deg, #fcd1df 0%, #f8bbd0 25%, #e3f2fd 55%, #dbeafe 80%, #fcd1df 100%);
  background-size: 300% 300%;
  animation: ph-hero-gradient 18s ease-in-out infinite;

  /* اگر تو استاتیک padding زیاد بود، می‌تونی تنظیمش کنی */
  padding-top: 180px;
  padding-bottom: 160px;
}

/* مطمئن شو متن‌ها روی بک‌گراند خوب دیده می‌شن */
body.home .main-banner-area .hero-headline,
body.home .main-banner-area .hero-headline span,
body.home .main-banner-area .hero-subline {
  color: #010110;
}

/* انیمیشن حرکت گرادیان */
@keyframes ph-hero-gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}