/* =========================================================================
   SERVICES — پنل سوم: ردیف کارت‌های سه‌بعدی
   -------------------------------------------------------------------------
   ترکیب‌بندی مطابق ویدیوی مرجع:
     • برچسب بزرگ SERVICES در بالا-چپ (فیزیکی، نه راست‌چین)
     • کارت‌های بلند با آیکون خطی درشت، عنوان و دو خط توضیح
     • کارت فعال با پوشش طلایی، قاب داخلی و هاله
     • فقط نشانگر خط‌تیره‌ای در پایین
   شدت رنگِ اکسنت هر کارت با متغیر --lit از JS تنظیم می‌شود.
   ========================================================================= */

.panel--services {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.4vh, 18px);
  padding: calc(var(--header-h) + 10px) 0 clamp(18px, 3.4vh, 34px);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(240, 163, 46, 0.06), transparent 60%),
    linear-gradient(to bottom, var(--ink-850), var(--ink-900) 60%, var(--ink-950));
}

/* ------------------------------------------------------------ برچسب */
.services__bar {
  padding-inline: var(--gutter);
  text-align: start;   /* در RTL یعنی راست‌چین */
}

/* تیترِ بخش — فارسی، راست‌چین، با فونت متنِ سایت نه فونت مونو.
   letter-spacing عمداً صفر است: در فارسی حروف را از هم جدا می‌کند.

   درخشش با جابه‌جایی یک نوارِ روشن روی همان متن ساخته می‌شود، نه با
   شکستنِ کلمه به حروف. فارسی خط متصل است و اگر «خدمات» به شش span تقسیم
   شود، به «خ د م ا ت» می‌شکند و شکلِ حروف خراب می‌شود. */
.services__label {
  --shine: 0;
  --label-in: 1;
  --echo: 0;       /* جدا شدنِ لایه‌ی توخالی هنگام حرکتِ ردیف */

  position: relative;
  display: inline-block;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(34px, 6.2vw, 108px);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: 0;
  /* ورودِ بخش: از پایین بالا می‌آید و پرده‌اش کنار می‌رود */
  clip-path: inset(-18% -12% calc((1 - var(--label-in)) * 112%) -12%);
  transform: translate3d(0, calc((1 - var(--label-in)) * 30px), 0);
  will-change: transform, clip-path;
}

/* لایه‌ی پرشده — گرادیانِ طلایی + نوارِ درخششی که با هر تعویضِ کارت
   از روی کلمه می‌گذرد. */
.services__label-main {
  position: relative;
  display: block;
  background-image:
    linear-gradient(
      100deg,
      transparent 34%,
      rgba(255, 244, 218, 0.92) 47%,
      rgba(255, 232, 186, 0.6) 53%,
      transparent 66%
    ),
    linear-gradient(168deg, #FFF0CE 4%, #F0A32E 44%, #8A5A12 96%);
  background-size: 280% 100%, 100% 100%;
  background-position: calc(var(--shine) * -190% + 95%) 0, 0 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* will-change حذف شد — background-position فقط هنگام تعویض کارت عوض می‌شود، نه هر فریم */
}

/* لایه‌ی توخالیِ پشتی — فقط خطِ دور.
   هنگام حرکتِ ردیف کمی از لایه‌ی اصلی جدا می‌شود و بعد دوباره روی آن
   می‌نشیند؛ تیتر هم عضوِ همان سیستمِ حرکت می‌شود نه یک متنِ ساکن. */
.services__label-echo {
  position: absolute;
  inset: 0;
  color: transparent;
  -webkit-text-stroke: 1.4px rgba(240, 178, 84, 0.34);
  transform: translate3d(calc(var(--echo) * 16px), calc(var(--echo) * -9px), 0);
  pointer-events: none;
  user-select: none;
  /* will-change حذف شد — echo فقط هنگام اسکرول بین کارت‌ها حرکت می‌کند */
}

/* ------------------------------------------------------ صحنه‌ی سه‌بعدی */
.services__stage {
  --glow-x: 0px;
  --glow-i: 0;
  --bg-x: 0%;
  --bg-y: 0%;
  --bg-s: 1;

  position: relative;
  flex: 1;
  min-height: 0;
  perspective: 1700px;
  perspective-origin: 50% 48%;
}

/* پس‌زمینه‌ی متحرکِ صحنه — دو لکه‌ی نور که با تعویض کارت به «ژست» تازه
   می‌لغزند. هر کارت ژست خودش را دارد (BG_POSES در ماژول)، پس حرکتِ
   پس‌زمینه با خودِ گذر هماهنگ است نه یک انیمیشنِ مستقلِ بی‌ربط.
   لکه‌ی دوم خلافِ جهتِ اولی می‌رود و کندتر است، پس عمق حس می‌شود.
   عمداً فقط transform و opacity متحرک‌اند: انیمیشنِ پیوسته‌ی blur یا
   background-position روی این اندازه گران است. */
.services__stage::after {
  content: '';
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 55%;
  width: min(96%, 1180px);
  aspect-ratio: 2 / 1;
  margin-left: calc(min(96%, 1180px) / -2);
  translate: 0 -50%;
  background: radial-gradient(
    closest-side,
    rgba(210, 150, 60, 0.1),
    rgba(210, 150, 60, 0.04) 55%,
    transparent 78%
  );
  opacity: calc(0.5 + var(--glow-i) * 0.4);
  transform: translate3d(calc(var(--bg-x) * -0.55), calc(var(--bg-y) * -0.4), 0)
    scale(calc(2 - var(--bg-s)));
  pointer-events: none;
}

.services__stage::before {
  content: '';
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 42%;
  width: min(78%, 900px);
  aspect-ratio: 3 / 2;
  margin-left: calc(min(78%, 900px) / -2);
  translate: 0 -50%;
  background: radial-gradient(
    closest-side,
    rgba(240, 163, 46, 0.16),
    rgba(240, 163, 46, 0.05) 52%,
    transparent 76%
  );
  opacity: calc(0.55 + var(--glow-i) * 0.85);
  transform: translate3d(calc(var(--bg-x) + var(--glow-x)), var(--bg-y), 0)
    scale(calc(var(--bg-s) + var(--glow-i) * 0.05));
  pointer-events: none;
}

.services__track {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

/* ------------------------------------------------- نوارِ نورِ ورود
   یک بارِ ساده: هنگام نشستنِ پنل، یک نوارِ باریکِ نور از عرضِ صحنه
   می‌گذرد و تمام. نسخه‌ی قبلی شش مسیرِ منحنیِ متفاوت داشت که با هر
   تعویضِ کارت تکرار می‌شد — شلوغ بود و از «لوکس» دور. */
.svc-beam {
  position: absolute;
  z-index: 40;
  top: 0;
  bottom: 0;
  left: -22%;
  width: 22%;
  pointer-events: none;
  opacity: var(--beam-o, 0);
  transform: translate3d(calc(var(--beam-p, 0) * 560%), 0, 0) skewX(-11deg);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(240, 200, 130, 0.05) 30%,
    rgba(255, 236, 196, 0.3) 50%,
    rgba(240, 200, 130, 0.05) 70%,
    transparent
  );
  filter: blur(7px);
  /* will-change حذف شد — نوار نور فقط یک‌بار اجرا می‌شود */
}

/* ------------------------------------------------- پهپاد سراسری (Global Drone) */
/* ------------------------------------------------- پهپاد سراسری (Global Drone) */
.global-drone {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translate3d(var(--drone-x, 60vw), var(--drone-y, -140px), var(--drone-z, 0px)) rotateX(var(--drone-rx, 15deg)) rotateY(var(--drone-ry, -25deg)) rotateZ(var(--drone-rz, 10deg)) scale(var(--drone-s, 0.85));
  z-index: 85; /* زیر نوار منو (90) و روی کارت‌ها */
  width: 120px;
  height: 90px;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: var(--drone-o, 0);
  visibility: var(--drone-v, hidden);
  transition: transform 1.25s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s ease, visibility 0.5s ease;
  transform-style: preserve-3d;
  /* will-change حذف شد — پهپاد با CSS transition حرکت می‌کند نه هر فریم */
}

/* پهپاد در هیرو و توپوگرافی به طور کامل خاموش است تا روتورها بیهوده پردازش نگیرند */
.global-drone[data-section="hero"],
.global-drone[data-section="terrain"] {
  display: none !important;
}

/* هنگام ورود به بخش با اسکرول — انیمیشن باید دقیقاً با دست کاربر و بدون تأخیر ترنزیشن باشد */
.global-drone.is-entering {
  transition: none !important;
}

/* برای حرکت‌های بین سکشن‌ها که پرواز عادی‌تر است */
.global-drone.is-flying {
  transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s ease;
}

/* هنگام ورود یا خروج اسکرول معکوس */
.global-drone.is-docking {
  transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.7s ease;
}

/* بدنه‌ی شناور پهپاد */
.global-drone__body {
  position: relative;
  width: 100px;
  height: 60px;
  color: var(--ink-200);
  animation: drone-hover 4.2s ease-in-out infinite;
}

@keyframes drone-hover {
  0%, 100% { transform: translateY(0) rotateX(3deg) rotateY(-2.5deg) rotateZ(-1deg); }
  50% { transform: translateY(-10px) rotateX(-2deg) rotateY(2.5deg) rotateZ(1deg); }
}

/* پروانه‌ها — چرخش پیوسته و بدون توقف */
.global-drone__rotor {
  transform-box: view-box;
  animation: rotor-spin 0.12s linear infinite !important;
  /* will-change حذف شد — مرورگر برای animation خودش لایه می‌سازد */
}

@keyframes rotor-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* اسکن فقط و فقط برای بخش خدمات فعال است؛ در تمام بخش‌های دیگر به طور کامل خاموش است */
.global-drone:not([data-section="services"]) .global-drone__scanner {
  opacity: 0 !important;
  transform: scaleY(0) !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* سیستم پرتو اسکن سه‌بعدی */
.global-drone__scanner {
  position: absolute;
  top: 48px;
  width: 220px;
  height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform-origin: top center;
  transform: scaleY(var(--scan-p, 0));
  opacity: var(--scan-p, 0);
  /* will-change حذف شد — اسکنر فقط در بخش خدمات فعال است */
  pointer-events: none;
}

/* هاله مخروطی حجمی لیزر */
.global-drone__laser-cone {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(240, 163, 46, 0.65) 0%,
    rgba(240, 163, 46, 0.22) 40%,
    rgba(240, 163, 46, 0.06) 80%,
    transparent 100%
  );
  clip-path: polygon(48% 0%, 52% 0%, 100% 100%, 0% 100%);
  animation: laser-pulse 2.2s ease-in-out infinite alternate;
}

@keyframes laser-pulse {
  0% { opacity: 0.7; }
  100% { opacity: 1; }
}

.global-drone__scan-line {
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #FFE4A0, #FFF, #FFE4A0, transparent);
  box-shadow: 0 0 14px 2px rgba(255, 220, 130, 0.85);
  animation: scan-sweep 2.4s ease-in-out infinite alternate;
  /* will-change حذف شد — خط اسکن animation دارد و مرورگر خودش لایه می‌سازد */
}

@keyframes scan-sweep {
  0% { transform: translateY(45px) scaleX(0.3); opacity: 0.3; }
  50% { transform: translateY(150px) scaleX(0.7); opacity: 1; }
  100% { transform: translateY(270px) scaleX(0.95); opacity: 0.9; }
}

/* هاله شبکه‌ای روی هدف اسکن‌شده */
.global-drone__scan-ground {
  position: absolute;
  bottom: 0;
  width: 140px;
  height: 24px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(240, 163, 46, 0.4) 0%, rgba(240, 163, 46, 0.08) 60%, transparent 80%);
  box-shadow: 0 0 16px rgba(240, 163, 46, 0.5);
  animation: scan-ground-pulse 1.8s ease-in-out infinite alternate;
}

@keyframes scan-ground-pulse {
  0% { transform: scale(0.85); opacity: 0.6; }
  100% { transform: scale(1.15); opacity: 1; }
}

/* انیمیشن‌های لنز و سنسور */
.global-drone__lens {
  animation: lens-focus 2.8s ease-in-out infinite alternate;
}

@keyframes lens-focus {
  0% { r: 2.5; fill: #F0A32E; }
  100% { r: 3.5; fill: #FFEFB8; }
}

.drone-led-red { animation: led-blink 0.9s ease-in-out infinite alternate; }
.drone-led-green { animation: led-blink 1.4s ease-in-out infinite alternate; }

@keyframes led-blink {
  0% { opacity: 0.85; }
  100% { opacity: 0.25; }
}

.drone-lidar-spin {
  animation: lidar-ping 1.2s linear infinite;
  transform-origin: 50px 13.5px;
}

@keyframes lidar-ping {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(2.5); opacity: 0; }
  100% { transform: scale(1); opacity: 0; }
}

@media (max-width: 768px) {
  .global-drone {
    transform: translate(-50%, -50%) translate3d(calc(var(--drone-x, 60vw) * 0.45), calc(var(--drone-y, -140px) * 0.8), 0px) rotateX(var(--drone-rx, 15deg)) rotateY(var(--drone-ry, -25deg)) rotateZ(var(--drone-rz, 10deg)) scale(calc(var(--drone-s, 0.85) * 0.65));
  }

  .global-drone__scanner {
    height: 180px;
    width: 140px;
  }

  .global-drone__scan-ground {
    width: 90px;
    height: 16px;
  }
}

@media (max-width: 480px) {
  .global-drone:not([data-section="services"]):not([data-section="footer"]) {
    opacity: 0.35 !important;
    transform: translate(-50%, -50%) translate3d(calc(var(--drone-x, 60vw) * 0.35), -38vh, 0px) scale(0.42) !important;
  }
}

.svc-card {
  --x: 0px;
  --y: 0px;
  --z: 0px;
  --rot: 0deg;
  --scale: 1;
  --op: 1;
  --lit: 0;
  --icon-s: 1;     /* مقیاس آیکون هنگام فعال شدن */
  --w: clamp(310px, 25vw, 395px);
  --h: min(clamp(480px, 62vh, 590px), 100%);

  position: absolute;
  inset-inline-start: 50%;
  top: 50%;
  width: var(--w);
  height: var(--h);
  margin-inline-start: calc(var(--w) / -2);
  margin-top: calc(var(--h) / -2);

  border-radius: 26px;
  transform: translate3d(var(--x), var(--y), var(--z)) rotateY(var(--rot)) scale(var(--scale));
  opacity: var(--op);
  will-change: transform, opacity;
}

/* کل کارت یک پیوند است: بدون دکمه‌ی دیده‌شدنی، اما قابل تمرکز و کلیک.
   سطح، شیشه‌ی لوکس با پس‌زمینه‌ی کاملاً توپر و تیره، هایلایت لبه و عمق سه‌بعدی. */
.svc-card__link {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  padding: clamp(28px, 3.8vh, 42px) clamp(20px, 2vw, 30px) clamp(22px, 3vh, 34px);
  overflow: hidden;
  text-align: center;
  cursor: pointer;
  border: 1.5px solid rgba(240, 178, 84, 0.25);
  border-radius: inherit;
  background:
    linear-gradient(
      180deg,
      #131e2e 0%,
      #0d1624 50%,
      #070d17 100%
    );
  box-shadow:
    inset 0 1px 2px rgba(255, 240, 210, 0.35),
    0 24px 60px -15px rgba(0, 0, 0, 0.95);
  transition:
    border-color var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out),
    background var(--dur) var(--ease-out);
}

.svc-card.is-active .svc-card__link {
  border-color: rgba(240, 178, 84, 0.75);
  background:
    radial-gradient(
      85% 50% at 50% 0%,
      rgba(240, 163, 46, 0.32),
      transparent 70%
    ),
    linear-gradient(
      180deg,
      #131e2e 0%,
      #0d1624 50%,
      #070d17 100%
    );
  box-shadow:
    inset 0 1px 2px rgba(255, 240, 210, 0.8),
    inset 0 0 28px rgba(240, 163, 46, 0.15),
    0 28px 70px -15px rgba(0, 0, 0, 0.95),
    0 0 40px -2px rgba(240, 163, 46, 0.38);
}

/* تصویر پس‌زمینه‌ی محو اختصاصی هر خدمت برای ایجاد بافت و غنای بصری */
.svc-card__bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-size: cover;
  background-position: center;
  opacity: calc(0.1 + var(--lit) * 0.14);
  filter: saturate(0.85) contrast(1.15);
  mix-blend-mode: luminosity;
  transition: opacity var(--dur) var(--ease-out);
  pointer-events: none;
  border-radius: inherit;
}

/* گوشه‌های منظره‌یاب فنی هوانوردی */
.svc-card__hud-tl,
.svc-card__hud-br {
  position: absolute;
  width: 14px;
  height: 14px;
  z-index: 4;
  pointer-events: none;
  opacity: calc(0.35 + var(--lit) * 0.65);
  transition: opacity var(--dur) var(--ease-out);
}

.svc-card__hud-tl {
  top: 14px;
  right: 16px;
  border-top: 1.5px solid var(--accent-400);
  border-right: 1.5px solid var(--accent-400);
}

.svc-card__hud-br {
  bottom: 14px;
  left: 16px;
  border-bottom: 1.5px solid var(--accent-400);
  border-left: 1.5px solid var(--accent-400);
}

/* برچسب کد سیستمی هوانوردی بالای کارت */
.svc-card__tag {
  position: absolute;
  top: 16px;
  left: 18px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-mono-xs, 0.68rem);
  letter-spacing: 0.14em;
  color: rgba(240, 178, 84, calc(var(--lit) * 0.4 + 0.6));
  direction: ltr;
  pointer-events: none;
}

.svc-card__tag::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent-500);
  box-shadow: 0 0 6px var(--accent-500);
}

/* نوارِ باریکِ بازتاب روی لبه بالایی */
.svc-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, calc(var(--lit) * 0.08 + 0.03)) 0%, transparent 28%);
  z-index: 10;
  pointer-events: none;
  border-radius: inherit;
}

/* ------------------------------------------------- هولوگرام اسکن روی کارت */
.svc-card__hologram {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  overflow: hidden;
  opacity: calc(var(--lit) * 1.5);
  mix-blend-mode: color-dodge;
  z-index: 8;
}

.svc-card:not(.is-active) .svc-card__hologram {
  display: none !important;
}

.svc-card__hologram::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 60%;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(240, 163, 46, 0.45) 50%,
    transparent 100%
  );
  animation: hologram-sweep 2s ease-in-out infinite;
  /* will-change حذف شد — hologram animation دارد و مرورگر خودش لایه می‌سازد */
}

@keyframes hologram-sweep {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(220%); }
}

.svc-card__sheen {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    104deg,
    transparent 32%,
    rgba(255, 248, 232, calc(var(--lit) * 0.05 + 0.022)) 45%,
    transparent 58%
  );
}

/* ------------------------------------------------- ظرف مدال و آیکون پرجزئیات */
.svc-card__icon-wrap {
  position: relative;
  z-index: 3;
  display: grid;
  place-items: center;
  margin-block: clamp(12px, 1.8vh, 22px) clamp(16px, 2.2vh, 24px);
  transform: scale(var(--icon-s));
  transition: transform var(--dur) var(--ease-out);
}

.svc-card__icon-badge {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(104px, 11vw, 130px);
  height: clamp(104px, 11vw, 130px);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 30%, rgba(240, 163, 46, calc(var(--lit) * 0.35 + 0.16)), transparent 70%),
    linear-gradient(160deg, #1c2e44 0%, #0c1827 100%);
  border: 1.5px solid rgba(240, 178, 84, calc(var(--lit) * 0.6 + 0.28));
  box-shadow:
    inset 0 1px 3px rgba(255, 240, 210, 0.35),
    0 14px 32px -6px rgba(0, 0, 0, 0.85),
    0 0 12px rgba(240, 163, 46, 0.2);
  transition: all var(--dur) var(--ease-out);
}

.svc-card.is-active .svc-card__icon-badge {
  border-color: var(--accent-bright);
  box-shadow:
    inset 0 1px 3px rgba(255, 255, 255, 0.7),
    0 16px 38px -5px rgba(0, 0, 0, 0.9),
    0 0 38px rgba(240, 163, 46, 0.5);
}

.svc-card__icon-ring {
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 1.2px dashed rgba(240, 163, 46, calc(var(--lit) * 0.5 + 0.25));
  animation: icon-ring-spin 32s linear infinite;
  /* will-change حذف شد — icon-ring فقط روی کارت فعال animation دارد */
  pointer-events: none;
}

.svc-card:not(.is-active) .svc-card__icon-ring {
  animation: none !important;
}

@keyframes icon-ring-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.svc-card__icon-badge svg {
  width: clamp(66px, 7.2vw, 84px);
  height: auto;
  filter: drop-shadow(0 5px 12px rgba(0, 0, 0, 0.7));
}

.svc-card__body {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.2vh, 12px);
}

.svc-card__title {
  font-size: clamp(1.2rem, 1.65vw, 1.6rem);
  font-weight: 800;
  line-height: 1.35;
  color: var(--text);
  text-shadow: 0 2px calc(var(--lit) * 20px + 6px) rgba(6, 13, 23, 0.75);
  transition: color var(--dur) var(--ease-out);
}

.svc-card.is-active .svc-card__title {
  color: var(--accent-bright);
}

.svc-card__text {
  font-size: clamp(0.8rem, 0.92vw, 0.9rem);
  line-height: 1.85;
  color: rgba(243, 239, 232, calc(var(--lit) * 0.45 + 0.5));
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.svc-card__link:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 3px;
}

/* ------------------------------------------------------------ پاورقی */
.services__foot {
  display: flex;
  justify-content: center;
  padding-inline: var(--gutter);
}

/* ------------------------------------------------------- کاهش حرکت
   جابه‌جایی، بازتاب و اورشوت کاملاً برداشته می‌شوند؛ تمایز کارت فعال با
   رنگ و شفافیت باقی می‌ماند تا رابط همچنان خوانا باشد. */
@media (prefers-reduced-motion: reduce) {
  .svc-card {
    transition: none;
  }

  .svc-beam,
  .svc-card__sheen {
    display: none;
  }

  .services__label,
  .services__label-echo {
    clip-path: none;
    transform: none;
  }

  .svc-card__icon-wrap {
    transform: none;
  }

  .services__stage::before,
  .services__stage::after {
    transform: none;
    opacity: 0.5;
  }
}