/* ============================================================
   home-sections.css — رنگ بندی سکشن های صفحه اصلی،
   مرز خلاقانه بین سکشن ها و نمایش کامل تصویر کارت خدمات
   فقط در صفحه اصلی لود می شود.
   ============================================================ */

/* ------------------------------------------------------------
   ۱) کارت خدمات — تصویر ۴:۳ و نمایش کامل (بدون برش)
   ------------------------------------------------------------ */
.home-services .service-card-img {
  aspect-ratio: 4 / 3;
  padding: 8px;
  background: linear-gradient(160deg, #ffffff 0%, #f2f6fd 100%);
}
.home-services .service-card-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;          /* کل تصویر دیده می شود */
  object-position: center;
}
/* پوشش تیره پایین عکس با حالت contain معنی ندارد */
/* پوشش تیره پایین عکس با حالت contain معنی ندارد؛
   به جای آن از همین لایه برای «نشانه گوشه دوربین نقشه برداری» استفاده می کنیم */
.home-services .service-card-img::after {
  content: '';
  display: block;
  position: absolute;
  inset: 9px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s;
  background:
    /* گوشه بالا راست */
    linear-gradient(#2563eb 0 0) 100% 0   / 15px 2px no-repeat,
    linear-gradient(#2563eb 0 0) 100% 0   / 2px 15px no-repeat,
    /* گوشه بالا چپ */
    linear-gradient(#2563eb 0 0) 0    0   / 15px 2px no-repeat,
    linear-gradient(#2563eb 0 0) 0    0   / 2px 15px no-repeat,
    /* گوشه پایین راست */
    linear-gradient(#2563eb 0 0) 100% 100% / 15px 2px no-repeat,
    linear-gradient(#2563eb 0 0) 100% 100% / 2px 15px no-repeat,
    /* گوشه پایین چپ */
    linear-gradient(#2563eb 0 0) 0    100% / 15px 2px no-repeat,
    linear-gradient(#2563eb 0 0) 0    100% / 2px 15px no-repeat;
}
.home-services .service-card:hover .service-card-img::after { opacity: .75; }

.home-services .service-card-icon { aspect-ratio: 4 / 3; }

/* ------------------------------------------------------------
   ۲) مرز بین سکشن ها
   هر مرز داخل سکشن پایینی قرار می گیرد و با رنگ همان سکشن
   پر می شود، پس هر ترتیبی از سکشن ها درست کار می کند.
   ------------------------------------------------------------ */
.sec-div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  line-height: 0;
  pointer-events: none;
  z-index: 2;
  color: #fff;                              /* پیش فرض؛ هر سکشن بازنویسی می کند */
  transform: translateY(calc(-100% + 1px)); /* ۱ پیکسل همپوشانی تا درز نیفتد */
}
.sec-div svg {
  display: block;
  width: 100%;
  height: clamp(34px, 4.6vw, 72px);
}
.sec-div .sd-fill { fill: currentColor; }
.sec-div .sd-line {
  fill: none;
  stroke: rgba(37, 99, 235, .30);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;        /* ضخامت خط با کشیده شدن SVG تغییر نکند */
}
.sec-div .sd-dot { fill: rgba(37, 99, 235, .28); }

/* ------------------------------------------------------------
   ۳) رنگ هر سکشن — همه روشن
   ------------------------------------------------------------ */
.home-about,
.home-services,
.home-banners,
.home-content-section,
.home-map {
  position: relative;
}
.home-about  .container,
.home-services .container,
.home-banners .container,
.home-content-section .container,
.home-map .container { position: relative; z-index: 1; }

/* معرفی — سفید */
.home-about            { background: #ffffff; }
.home-about  .sec-div  { color: #ffffff; }

/* خدمات — آبی خیلی روشن */
.home-services           { background: #eef4ff; }
.home-services .sec-div  { color: #eef4ff; }

/* بنرها — سفید مایل به آبی */
.home-banners            { background: #fbfcff; }
.home-banners .sec-div   { color: #fbfcff; }

/* محتوای توضیحی — طوسی روشن */
.home-content-section          { background: #f4f6fc; border-top: none; }
.home-content-section .sec-div { color: #f4f6fc; }
/* لایه محو باید هم رنگ پس زمینه جدید باشد */
.home-content-section .hcs-fade {
  background: linear-gradient(to bottom, rgba(244,246,252,0), #f4f6fc);
}

/* نقشه — سبز آبی خیلی روشن */
.home-map           { background: #edf8f5; }
.home-map .sec-div  { color: #edf8f5; }

/* موج بالای فوتر حدود ۷۰ پیکسل روی سکشن آخر می آید،
   پس این سکشن به فضای امن پایین نیاز دارد وگرنه لینک زیر موج می افتد. */
.home-map {
  padding: 40px 0 clamp(104px, 11vw, 148px);
}
.home-map-actions { margin: 16px 0 0; }
.home-map-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border: 1.5px solid #0d9488;
  border-radius: 999px;
  color: #0f766e;
  background: #ffffff;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  transition: background .15s, color .15s, transform .15s;
}
.home-map-btn::before {
  content: '';
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 4px solid currentColor;
  flex-shrink: 0;
}
.home-map-btn:hover {
  background: #0d9488;
  color: #ffffff;
  transform: translateY(-2px);
}

/* ------------------------------------------------------------
   ۴) بافت های تزئینی خیلی ملایم
   ------------------------------------------------------------ */
.home-services::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(37, 99, 235, .12) 1px, transparent 0);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 78%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 78%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

.home-content-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(520px 260px at 88% 0%,  rgba(37, 99, 235, .07), transparent 70%),
    radial-gradient(420px 220px at 6%  100%, rgba(22, 163, 74, .05), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.home-map::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(13, 148, 136, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13, 148, 136, .07) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: linear-gradient(180deg, #000 0, transparent 65%);
          mask-image: linear-gradient(180deg, #000 0, transparent 65%);
  pointer-events: none;
  z-index: 0;
}

/* ------------------------------------------------------------
   ۵) موبایل
   ------------------------------------------------------------ */
@media (max-width: 600px) {
  .sec-div svg { height: 28px; }
  .home-services::before { background-size: 20px 20px; }
  .home-map::before      { background-size: 34px 34px; }
}

/* کاربرانی که انیمیشن و افکت کمتر می خواهند */
@media (prefers-reduced-motion: reduce) {
  .home-services .service-card:hover .service-card-img img { transform: none; }
}

/* ============================================================
   ۶) المان های مهندسی — کم رنگ و فقط تزئینی
   همه با CSS خالص ساخته شده اند: بدون عکس اضافه و بدون جاوااسکریپت.
   ============================================================ */

/* --- ۶.۱ عنوان سکشن: خط اندازه گذاری به جای خط ساده --- */
.home-services .home-section-title::after,
.home-banners .home-section-title::after,
.home-content-section .home-section-title::after,
.home-about .home-section-title::after {
  width: 118px;
  height: 14px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 118 14'><g fill='none' stroke='%232563eb' stroke-width='2' stroke-linecap='round'><path d='M2 7h34M82 7h34'/><path d='M2 2v10M116 2v10'/></g><path d='M59 2l5 5-5 5-5-5z' fill='%232563eb'/></svg>") center / contain no-repeat;
  border-radius: 0;
}

/* --- ۶.۲ سکشن معرفی: کاغذ نقشه (شبکه ریز) + مثلث بندی گوشه --- */
.home-about::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(37, 99, 235, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37, 99, 235, .055) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(120% 90% at 85% 15%, #000 0, transparent 72%);
          mask-image: radial-gradient(120% 90% at 85% 15%, #000 0, transparent 72%);
  pointer-events: none;
  z-index: 0;
}
.home-about::after {
  content: '';
  position: absolute;
  top: 26px;
  right: 24px;
  width: 190px;
  height: 150px;
  opacity: .5;
  pointer-events: none;
  z-index: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 190 150'><g fill='none' stroke='%232563eb' stroke-width='1.6' stroke-dasharray='6 5' opacity='.55'><path d='M18 132 L92 20 L172 96 Z'/><path d='M18 132 L172 96'/><path d='M92 20 L96 118'/></g><g fill='%232563eb' opacity='.5'><circle cx='18' cy='132' r='4.5'/><circle cx='92' cy='20' r='4.5'/><circle cx='172' cy='96' r='4.5'/><circle cx='96' cy='118' r='3'/></g></svg>") center / contain no-repeat;
}

/* --- ۶.۳ سکشن بنرها: نوار خط کش مدرج --- */
.home-banners::after {
  content: '';
  position: absolute;
  right: 0;
  left: 0;
  bottom: 18px;
  height: 14px;
  pointer-events: none;
  z-index: 0;
  background:
    repeating-linear-gradient(90deg, rgba(37, 99, 235, .35) 0 1px, transparent 1px 24px) bottom / 100% 8px no-repeat,
    repeating-linear-gradient(90deg, rgba(37, 99, 235, .35) 0 1px, transparent 1px 120px) bottom / 100% 14px no-repeat,
    linear-gradient(rgba(37, 99, 235, .28) 0 0) bottom / 100% 1px no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}

/* --- ۶.۴ سکشن متن: خطوط تراز (توپوگرافی) --- */
.home-content-section::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .55;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 300' preserveAspectRatio='none'><g fill='none' stroke='%232563eb' stroke-width='1.2' opacity='.22'><path d='M-20 250 C120 190 220 260 340 210 C450 165 520 205 620 170'/><path d='M-20 220 C120 160 230 230 350 180 C455 135 525 175 620 140'/><path d='M-20 190 C130 130 240 200 360 150 C460 108 530 145 620 112'/><path d='M-20 160 C140 100 250 170 370 122 C465 82 535 118 620 86'/></g></svg>") center bottom / 100% 60% no-repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent 30%, #000 100%);
          mask-image: linear-gradient(180deg, transparent 30%, #000 100%);
}

/* --- ۶.۵ سکشن نقشه: نشان مختصات دفتر --- */
.geo-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 6px 12px;
  border: 1px dashed #0d9488;
  border-radius: 8px;
  background: #ffffff;
  color: #0f766e;
  font-size: 12.5px;
  font-weight: 700;
  direction: ltr;
  font-family: ui-monospace, 'Courier New', monospace;
  letter-spacing: .4px;
}
.geo-badge::before {
  content: '';
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='none' stroke='%230d9488' stroke-width='2'><circle cx='12' cy='12' r='6'/><path d='M12 0v6M12 18v6M0 12h6M18 12h6'/></g></svg>") center / contain no-repeat;
}

/* --- ۶.۶ موبایل: المان های سنگین تر حذف شوند --- */
@media (max-width: 760px) {
  .home-about::after     { display: none; }
  .home-banners::after   { display: none; }
  .home-content-section::after { opacity: .35; }
  .home-services .home-section-title::after,
  .home-banners .home-section-title::after,
  .home-content-section .home-section-title::after,
  .home-about .home-section-title::after { width: 96px; }
}