/* ==========================================
================== fonts ====================
========================================== */
@font-face {
  font-family: pinar;
  src: url("../fonts/pinarfont.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: peyda;
  src: url("../fonts/PeydaWebVF.woff") format("woff");
  font-display: swap;
}

@font-face {
  font-family: geist;
  src: url("../fonts/Geist-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: inter;
  src: url("../fonts/Inter-VariableFont_opsz,wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-display: swap;
}

/* هدر position:fixed با ارتفاع ۸۶px همیشه بالای صفحه‌ست؛ بدون این، وقتی
   کاربر روی لینک‌های #pricing و بقیه‌ی anchor لینک‌های داخل صفحه کلیک می‌کنه،
   بخش هدف درست زیر همین هدر می‌ره و تیترش پشت هدر پنهان می‌شه. */
html {
  scroll-padding-top: 100px;
}

:root {
  --background-color: #ffffff;
  --font-primary-color: #111111;
  --normal-white-color: #ffffff;

  /* پالت مونوکروم مطابق طرح مرجع */
  --light-primary-color: #3a3a3a;
  --normal-primary-color: #020202;
  --dark-primary-color: #000000;
  --carbon-primary-color: #161617;

  --normal-secondary-color: #f7f7f7;
  --dark-secondary-color: #efefef;

  --normal-third-color: #b2d5e5;
  --light-third-color: #b1f7ef;

  /* خاکستری‌های متن و حاشیه */
  --muted-color: #6b6b6b;
  --soft-muted-color: #9a9a9a;
  --border-color: #e6e6e6;

  --green-color: #9ae6c5;
  --gold-color: #ffe88c;

  --primary-transparent-1: rgba(17, 17, 17, 0.12);
  --primary-transparent-2: rgba(17, 17, 17, 0.4);
  --secondary-transparent-1: rgba(168, 179, 201, 0.2);
  --white-transparent-1: #fffffff5;
  --white-transparent-2: #ffffffee;

  /* شیشه‌ مایع (Liquid Glass) هدر */
  --glass-bg: rgba(255, 255, 255, 0.5);
  --glass-bg-scrolled: rgba(255, 255, 255, 0.7);
  --glass-border: rgba(255, 255, 255, 0.7);
  --glass-shadow: 0 8px 32px rgba(17, 17, 17, 0.08),
    inset 0 1px 1px rgba(255, 255, 255, 0.8),
    inset 0 0 0 1px rgba(255, 255, 255, 0.3);

  /* منحنی نرم انیمیشن‌ها */
  --ease-smooth: cubic-bezier(0.3, 1, 0.3, 1);


    --bg: oklch(0.14 0.006 250);
    --card-bg: #18181a;
    --card-border: oklch(0.28 0.008 250);
    --pill-bg: #272729;
    --pill-active-bg: #ffffff;
    --text-strong: oklch(0.97 0.004 250);
    --text-soft: oklch(0.72 0.01 250);
    --text-faint: oklch(0.9 0.004 250 / 0.75);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  border: 0;
  outline: 0;
  list-style: none;
  font-family: "peyda";
}

html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  /* توجه: overflow-x روی html همراه با overflow-x: clip روی body باعث می‌شد
     backdrop-filter هدر (position: fixed) در کروم کاملاً غیرفعال شود؛
     جلوگیری از اسکرول افقی همین‌جوری هم توسط overflow-x: clip روی body تأمین می‌شود */
  /* اسکرول‌بار پیش‌فرض مرورگر مخفی می‌شود و به‌جایش نوار سفارشی (custom-scrollbar) نمایش داده می‌شود */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html::-webkit-scrollbar {
  display: none;
}

body {
  background-color: var(--background-color);
  /* clip به‌جای hidden: جلوی اسکرول افقی را می‌گیرد بدون اینکه body کانتینر برش شود
     (hidden باعث بریده‌شدن کارت‌های سه‌بعدی هنگام اسکرول می‌شد) */
  overflow-x: clip;
  overflow-wrap: break-word;
  font: 13px "peyda";
  color: var(--font-primary-color);
}

.number {
  direction: ltr;
  unicode-bidi: isolate;
}

p {
  font-weight: 600;
  line-height: 1.1rem;
}

a {
  text-decoration: none;
  color: var(--font-primary-color);
}

.icon {
  width: 18px;
  height: 18px;
}

.icon svg {
  width: 100%;
  height: 100%;
}

img {
  width: 100%;
}

h2 {
  font-size: 18px;
}

/* ========== container ========== */
.container {
  width: 100%;
  padding: 0 15px;
  margin: 0 auto;
  position: relative;
  height: 100%;
}

@media (min-width: 576px) {
  .container {
    padding-left: calc(50% - 285px);
    padding-right: calc(50% - 285px);
  }
}

@media (max-width: 575px) {
  .about-page .container {
    padding-left: 5%;
    padding-right: 5%;
  }
}

@media (min-width: 768px) {
  .container {
    padding-left: calc(50% - 378px);
    padding-right: calc(50% - 378px);
  }
}

@media (min-width: 1024px) {
  .container {
    padding-left: calc(50% - 570px);
    padding-right: calc(50% - 570px);
  }
}

@media (min-width: 1280px) {
  .container {
    padding-left: calc(50% - 600px);
    padding-right: calc(50% - 600px);
  }
}

/* ==========================================
============== دکمه‌ها (Buttons) =============
انیمیشن هاور نرم و یکپارچه برای تمام دکمه‌های سایت
========================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 24px;
  border-radius: 999px;
  font-family: "peyda";
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  background-color: transparent;
  color: var(--font-primary-color);
  height: 45px;
}

.btn--primary {
  --circle-color: var(--normal-white-color) !important;
  background-color: var(--normal-primary-color);
  color: var(--normal-white-color);
}

.btn--primary:hover {
  color: var(--normal-primary-color) !important;
}

.btn--ghost {
  background-color: var(--normal-white-color);
  color: var(--font-primary-color);
  border: 1px solid var(--border-color);
}

.btn--dark {
  --circle-color: var(--normal-white-color) !important;
  background-color: #19171c;
  color: #ffffff;
}

.btn--dark:hover {
  color: #19171c !important;
}

/* آیکن فلش داخل دکمه: قاب دایره‌ای + چرخش هنگام هاور */
.btn .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 6px;
  box-sizing: border-box;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  transform: rotate(45deg);
  flex-shrink: 0;
  transition: transform 0.35s var(--ease-smooth),
    background-color 0.35s var(--ease-smooth),
    border-color 0.35s var(--ease-smooth), color 0.35s var(--ease-smooth);
}

.btn:hover .icon {
  transform: rotate(90deg);
  background-color: var(--normal-white-color);
  border-color: transparent;
  color: var(--font-primary-color);
}

/* ==========================================
========= هاور دایره‌ی بازشونده (Blob) ========
دایره‌ای هم‌رنگ از ابتدای دکمه/لینک باز می‌شود و کل
پس‌زمینه را می‌گیرد؛ رنگ متن هم‌زمان معکوس می‌شود.
تنها هاور فعال روی لینک‌ها و دکمه‌های سایت همین است.
========================================== */
.btn,
.nav-link,
.menu-toggle {
  --circle-color: var(--normal-primary-color);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: color 1.5s var(--ease-smooth);
}

.btn::before,
.nav-link::before,
.menu-toggle::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  inset-inline-start: -100%;
  transform: translateY(-50%);
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 999px;
  background-color: var(--circle-color);
  transition: inset-inline-start 1s var(--ease-smooth),
    transform 1.2s var(--ease-smooth);
}

.btn:hover::before,
.nav-link:hover::before,
.menu-toggle:hover::before {
  inset-inline-start: 0;
  transform: translateY(-50%) scale(1.6);
}

.btn:hover,
.nav-link:hover,
.menu-toggle:hover {
  color: var(--normal-white-color);
}

/* دکمه‌ی منوی موبایل هیچ افکت هاور یا رنگ پس‌زمینه‌ی جدایی ندارد */
.menu-toggle::before {
  display: none;
}

.menu-toggle:hover {
  color: var(--font-primary-color);
}

/* ==========================================
======= انیمیشن ورود عناصر هنگام لود صفحه ====
هدر از بالا و محتوای هیرو با تأخیر پلکانی از
پایین وارد می‌شوند تا لود صفحه حس بهتری بدهد.
========================================== */
@keyframes reveal-down {
  from {
    opacity: 0;
    transform: translateY(-22px);
  }

  to {
    opacity: 1;
    /* transform را عمداً در 100% مشخص نمی‌کنیم: اگر translateY(0) اینجا باشد،
       fill-mode:both آن را برای همیشه نگه می‌دارد و چون matrix هویتی هنوز
       transform غیر از none حساب می‌شود، .site-header برای فرزندان
       position:fixed (مثل منوی تمام‌صفحه‌ی موبایل) containing block اشتباهی
       می‌سازد و کل صفحه را نمی‌پوشانند. حذف این خط باعث می‌شود بعد از پایان
       انیمیشن transform واقعاً none شود */
  }
}

@keyframes reveal-up {
  from {
    opacity: 0;
    transform: translateY(26px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes hero-btn-pop {
  0% {
    transform: scale(1);
  }

  55% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}

.site-header {
  opacity: 0;
  animation: reveal-down 0.8s var(--ease-smooth) both;
}

.hero-typed {
  animation: reveal-up 0.7s 0.15s var(--ease-smooth) both;
}

.hero p {
  opacity: 0;
  animation: reveal-up 0.7s 0.3s var(--ease-smooth) both;
}

.hero-actions {
  opacity: 0;
  animation: reveal-up 0.7s 0.45s var(--ease-smooth) both;
}

.hero-actions .btn {
  animation: hero-btn-pop 0.7s 0.45s var(--ease-smooth) both;
}

@media (prefers-reduced-motion: reduce) {

  .site-header,
  .hero-typed,
  .hero p,
  .hero-actions,
  .hero-actions .btn {
    animation: none;
    opacity: 1;
  }
}

/* ==========================================
=========== هدر شیشه‌ای (Liquid Glass) =======
========================================== */
.site-header {
  position: fixed;
  top: 20px;
  inset-inline: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  padding: 0 24px;
}

/* دسکتاپ/تبلت: نوار شناور با عرض محدود مثل هدر مرجع (Jitter) */
.header-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  max-width: 820px;
  height: 86px;
  padding: 0 28px;
  background: #ffffff;
  border: none;
  border-radius: 1.5rem;
  box-shadow: 0 10px 28px rgba(17, 17, 17, 0.1);
  isolation: isolate;
  transition: background 0.4s var(--ease-smooth),
    box-shadow 0.4s var(--ease-smooth),
    transform 0.6s var(--ease-smooth);
}

/* دکمه‌ی ثابت (CTA + دکمه‌ی دایره‌ای بازگشت) که هنگام جمع‌شدن هدر روی اسکرول
   دقیقاً سرجای دکمه‌ی اصلی می‌ماند و فقط دکمه‌ی دایره‌ای از سمت چپش بیرون می‌آید */
.header-pin {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.header-pin-inner {
  width: 100%;
  max-width: 820px;
  height: 86px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-inline-end: 28px;
}

/* لنگر دکمه‌ی CTA: دکمه‌ی دایره‌ای نسبت به همین باکس absolute می‌شود تا
   عرضش هیچ‌وقت جای دکمه‌ی CTA را جابه‌جا نکند و دکمه سرجای ثابت خودش بماند */
.header-pin-anchor {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.header-pin-cta,
.header-actions-spacer {
  width: 166px;
  height: 55.65px;
  padding: 0 17px;
  font-size: 15.75px;
}

.header-pin-cta {
  pointer-events: auto;
  transform: scale(1);
}

/* دکمه‌ی ثابت هدر افکت هاور (دایره‌ی باز شونده) ندارد */
.header-pin-cta::before {
  display: none;
}

.header-pin-cta:hover {
  color: #ffffff !important;
  animation: about-audience-btn-pop 0.45s var(--ease-smooth) forwards;
}

.header-pin-cta.is-leaving {
  animation: about-audience-btn-unpop 0.4s var(--ease-smooth) forwards;
}

.header-pin-toggle {
  position: absolute;
  inset-inline-start: calc(100% + 8px);
  top: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 55.65px;
  height: 55.65px;
  border-radius: 999px;
  background-color: #19171c;
  color: #ffffff;
  flex-shrink: 0;
  opacity: 0;
  visibility: hidden;
  cursor: pointer;
  transform: translateY(-50%) translateX(14px);
  transition: opacity 0.5s var(--ease-smooth), transform 0.5s var(--ease-smooth),
    visibility 0.5s;
  pointer-events: none;
}

.header-pin-toggle .icon {
  width: 22.05px;
  height: 22.05px;
}

/* همون هاور «برخورد به دیوار نامرئی» دکمه‌ی رایگان امتحان کنید (header-pin-cta)
   روی دکمه‌ی دایره‌ای هم؛ چون این دکمه با translateY(-50%) عمودی وسط‌چین شده،
   کی‌فریم مخصوص خودش رو داره تا اون translate موقع اسکیل‌شدن گم نشه */
.header-pin-toggle:hover {
  animation: header-pin-toggle-pop 0.45s var(--ease-smooth) forwards;
}

.header-pin-toggle.is-leaving {
  animation: header-pin-toggle-unpop 0.4s var(--ease-smooth) forwards;
}

@keyframes header-pin-toggle-pop {
  0% {
    transform: translateY(-50%) translateX(0) scale(1);
  }

  45% {
    transform: translateY(-50%) translateX(0) scale(1.06);
  }

  100% {
    transform: translateY(-50%) translateX(0) scale(1.04);
  }
}

@keyframes header-pin-toggle-unpop {
  0% {
    transform: translateY(-50%) translateX(0) scale(1.04);
  }

  55% {
    transform: translateY(-50%) translateX(0) scale(0.98);
  }

  100% {
    transform: translateY(-50%) translateX(0) scale(1);
  }
}

@media (min-width: 601px) {
  .site-header.is-collapsed .header-inner {
    transform: translateY(-160%);
  }

  .site-header.is-collapsed .header-pin-toggle {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
    transition-delay: 0.1s;
    pointer-events: auto;
  }

  .site-header.is-collapsed .header-pin-cta:hover {
    animation: about-audience-btn-pop 0.45s var(--ease-smooth) forwards;
  }

  .site-header.is-collapsed .header-pin-cta.is-leaving {
    animation: about-audience-btn-unpop 0.4s var(--ease-smooth) forwards;
  }

  /* هدر می‌آید پایین و با یک نرمی ساده (بدون نوسان چندمرحله‌ای) سرجایش می‌نشیند */
  @keyframes header-reveal-bounce {
    0% {
      transform: translateY(-160%);
    }

    75% {
      transform: translateY(2px);
    }

    100% {
      transform: translateY(0);
    }
  }

  .site-header.is-revealing .header-inner {
    animation: header-reveal-bounce 0.6s var(--ease-smooth);
  }
}

/* در دسکتاپ/تبلت جلوه‌ی درخشش شیشه‌ای غیرفعال می‌شود تا رنگ هدر یکدست بماند */
.header-inner::before {
  display: none;
}

/* لینک ورود کنار دکمه‌ی همبرگر؛ فقط در موبایل دیده می‌شود (داخل مدیا کوئری زیر) */
.header-login-link {
  display: none;
}

/* موبایل: بدون پس‌زمینه‌ی یکنواخت؛ فقط لوگو (که با اسکرول محو می‌شود) و دکمه‌ی
   همبرگر (که همیشه ثابت و در همان جای خودش می‌ماند) */
@media (max-width: 600px) {
  .site-header {
    top: 18px;
    padding: 0 16px;
  }

  .header-inner {
    width: min(100%, 860px);
    max-width: 530px;
    height: 52px;
    padding: 0 10px;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }

  .header-inner::before {
    display: none;
  }

  .header-brand {
    order: 2;
    transition: opacity 0.45s var(--ease-smooth), transform 0.45s var(--ease-smooth);
  }

  .site-header.is-collapsed .header-brand {
    opacity: 0;
    transform: translateY(-18px);
    pointer-events: none;
  }

  /* اگر لوگو به‌خاطر اسکرول مخفی بوده (is-collapsed) و کاربر همان لحظه منو را
     باز کند (is-open)، لوگو با یک برخورد نرم از بالای صفحه برمی‌گردد. اگر
     کاربر بالای صفحه است (is-collapsed نیست)، لوگو از قبل سرجایش است و این
     انیمیشن اصلاً اجرا نمی‌شود چون این سلکتور اصلاً match نمی‌شود */
  .site-header.is-collapsed.is-open .header-brand {
    opacity: 1;
    pointer-events: auto;
    animation: header-logo-drop-in 0.9s var(--ease-smooth) 0.1s both;
  }

  .header-actions {
    order: 1;
  }

  /* لینک متنی «ورود» سمت چپ دکمه‌ی همبرگر؛ دقیقاً همان رفتار لوگو: بالای
     صفحه بدون هیچ انیمیشنی سرجایش است، با اسکرول به پایین محو می‌شود، و
     فقط اگر کاربر همان لحظه که صفحه اسکرول‌شده (is-collapsed) منو را باز
     کند با برخورد به دیوار نامرئی برمی‌گردد (همان کیفریم header-logo-drop-in) */
  .header-login-link {
    display: inline-flex;
    align-items: center;
    height: 48px;
    margin-top: 8px;
    padding: 0 6px;
    font-family: "pinar";
    font-size: 19px;
    font-weight: 800;
    color: var(--font-primary-color);
    transition: opacity 0.45s var(--ease-smooth), transform 0.45s var(--ease-smooth);
  }

  .site-header.is-collapsed .header-login-link {
    opacity: 0;
    transform: translateY(-18px);
    pointer-events: none;
  }

  .site-header.is-collapsed.is-open .header-login-link {
    opacity: 1;
    pointer-events: auto;
    animation: header-logo-drop-in 0.9s var(--ease-smooth) 0.1s both;
  }
}

/* از بالای صفحه (بیرون از دید) با شتاب پایین می‌آید، از جای نهایی‌اش کمی
   پایین‌تر می‌رود (برخورد به دیوار نامرئی اول)، برمی‌گردد بالا و از جای
   نهایی‌اش کمی بالاتر می‌رود (برخورد به دیوار نامرئی دوم)، و در نهایت با
   یک نزول خیلی کوتاه دقیقاً سر جای خودش می‌نشیند — هم‌راستا با مرکز دکمه‌ی همبرگر */
@keyframes header-logo-drop-in {
  0% {
    transform: translateY(-100vh);
  }

  45% {
    transform: translateY(5px);
  }

  88% {
    transform: translateY(-1px);
  }

  100% {
    transform: translateY(0);
  }
}

/* درخشش نرم بالای شیشه برای حس مایع و سه‌بعدی */
.header-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.9) 0%,
      rgba(255, 255, 255, 0) 45%);
  opacity: 0.6;
  pointer-events: none;
  z-index: -1;
}


/* لوگو */
.header-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 800;
  font-size: 18px;
  color: var(--font-primary-color);
}

.header-brand .icon {
  /* ۱۰٪ بزرگ‌تر از اندازه‌ی پایه (100px × 26px) + ۸٪ بزرگ‌تر روی همان */
  width: 118.8px;
  margin-bottom: 5px;
  margin-right: 10px;
  height: 30.89px;
  color: var(--font-primary-color);
}

.header-brand .icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* ناوبری */
.header-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-inline-start: auto;
}

/* لینک‌های «درباره ما» و «تماس با ما» فقط از ناوبری دسکتاپ حذف می‌شوند؛
   داخل منوی تمام‌صفحه‌ی موبایل (.mobile-menu) دست‌نخورده می‌مانند */
.header-nav .nav-link[data-key="about"],
.header-nav .nav-link[data-key="contact"] {
  display: none;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 14px;
  color: var(--font-primary-color);
}

/* سه لینک ناوبری دسکتاپ (قیمت‌گذاری، کاربردها، ورود) نسبت به پایه‌ی
   .nav-link بزرگ‌تر شده‌اند (۱۰٪ + ۶٪ بعدی)؛ فقط در دسکتاپ اعمال می‌شود
   چون .header-nav زیر 600px مخفی است */
.header-nav .nav-link {
  padding: 5.83px 11.66px;
  font-size: 16.32px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* فضای خالی هم‌اندازه‌ی CTA؛ فقط چیدمان هدر را حفظ می‌کند، خودِ دکمه‌ی
   قابل‌کلیک و قابل‌دیدن همان دکمه‌ی ثابت داخل .header-pin است */
.header-actions-spacer {
  visibility: hidden;
  pointer-events: none;
}

/* دکمه منوی موبایل */
.menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background-color: transparent;
  color: var(--font-primary-color);
  cursor: pointer;
}

.menu-toggle {
  position: relative;
  /* overflow:hidden مشترک با .btn/.nav-link (بالای فایل) قبلاً برای برش دایره‌ی
     هاور بود که برای این دکمه غیرفعالش کردیم؛ اگر همچنان hidden بماند، دایره‌ی
     ۱۵٪-بزرگ‌تر موقع باز شدن منو دقیقاً به اندازه‌ی همین دکمه (۴۸px) برش
     می‌خورد و بزرگ‌تر به‌نظر نمی‌رسد */
  overflow: visible;
}

.menu-toggle .icon {
  position: relative;
  z-index: 1;
  width: 20px;
  height: 20px;
}

/* دایره‌ی سیاه پشتِ آیکون ضربدر: در حالت عادی دیده نمی‌شود (scale صفر) و
   فقط وقتی منو باز است با یک برخورد به دیوار نامرئی از وسط باز می‌شود */
.menu-toggle-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background-color: #19171c;
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
  z-index: 0;
  /* وقتی is-open برداشته می‌شود، انیمیشن ورود (menu-toggle-circle-pop) دیگر
     match نمی‌شود و transform به همین مقدار پایه (scale صفر) برمی‌گردد؛ این
     transition همان برگشت را نرم می‌کند تا انگار دایره «حذف می‌شود» */
  transition: transform 0.3s var(--ease-smooth);
}

.menu-toggle .icon.menu-toggle-icon-menu,
.menu-toggle .icon.menu-toggle-icon-close {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  transition: opacity 0.2s var(--ease-smooth), transform 0.3s var(--ease-smooth);
}

.menu-toggle-icon-close {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
  color: #ffffff;
}

/* وقتی منو باز است: خطوط همبرگر محو و کوچک می‌شوند... */
.site-header.is-open .menu-toggle-icon-menu {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
}

/* ...و آیکون ضربدر از صفر بزرگ و نمایان می‌شود */
.site-header.is-open .menu-toggle-icon-close {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  transition-delay: 0.2s;
}

.site-header.is-open .menu-toggle-circle {
  animation: menu-toggle-circle-pop 0.9s var(--ease-smooth) 0.1s forwards;
}

/* از وسط دکمه با اندازه‌ی صفر شروع می‌شود، از ۱۵٪ بزرگ‌تر از دایره‌ی اصلی هم
   کمی جلوتر می‌رود (برخورد به دیوار نامرئی) و بعد کمی کوچک‌تر می‌شود و دقیقاً
   روی اندازه‌ی نهایی (۱۵٪ بزرگ‌تر) می‌نشیند؛ پایانش هم‌زمان با پایان انیمیشن
   لوگو است (۰.۱s تأخیر + ۰.۹s = مجموعاً ۱s) */
@keyframes menu-toggle-circle-pop {
  0% {
    transform: translate(-50%, -50%) scale(0);
  }

  55% {
    transform: translate(-50%, -50%) scale(1.28);
  }

  100% {
    transform: translate(-50%, -50%) scale(1.15);
  }
}

/* در حالت دسکتاپ باید کاملاً مخفی بماند؛ فقط داخل مدیا کوئری موبایل زیر نمایش داده می‌شود */
.mobile-menu {
  display: none;
}

@media (max-width: 600px) {
  .header-brand .icon {
    width: 106.4px;
    height: 28.8px;
    margin: 0;
  }

  .menu-toggle {
    width: 48px;
    height: 48px;
    margin-top: 12px;
    background-color: #e4e6ef;
    position: relative;
    z-index: 2;
  }

  .menu-toggle .icon {
    width: 20px;
    height: 20px;
  }

  /* پنل تمام‌صفحه‌ی منوی موبایل: از بالای صفحه با انیمیشن نرم به پایین باز می‌شود
     و کل صفحه را می‌پوشاند؛ دکمه‌ی همبرگر (z-index بالاتر) همیشه روی آن قابل‌کلیک می‌ماند.
     z-index باید از هر محتوای positioned داخل صفحه (مثل .pricing-toggle-btn)
     بالاتر باشد، وگرنه چون بعد از هدر و قبل از <main> در DOM قرار دارد، عناصر
     هم‌سطح از نظر z-index که بعدتر در DOM می‌آیند رویش نمایش داده می‌شوند؛ اما
     باید از خودِ .site-header (که z-index: 100 دارد) پایین‌تر بماند */
  .mobile-menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: fixed;
    inset: 0;
    z-index: 50;
    /* لینک‌های داخلش همیشه (حتی وقتی منو بسته/نامرئی است) translateX دارند
       تا برای انیمیشن ورود آماده باشند؛ بدون overflow:hidden همین جابه‌جایی
       از عرض صفحه بیرون می‌زند و باعث اسکرول افقی واقعی کل صفحه می‌شود
       (که چون overflow-x:clip فقط روی body است نه html، به کل داکیومنت
       سرایت می‌کند و هدر/دکمه‌ی همبرگر position:fixed را هم جابه‌جا می‌کند) */
    overflow-x: hidden;
    overflow-y: auto;
    padding: 130px 20px 44px;
    background: #f2f1f3;
    transform: translateY(-100%);
    transition: transform 0.55s var(--ease-smooth);
    pointer-events: none;
  }

  .site-header.is-open ~ .mobile-menu {
    transform: translateY(0);
    pointer-events: auto;
  }

  .mobile-menu .nav-link {
    width: 100%;
    padding: 2px 16px;
    font-family: "pinar";
    font-size: 32px;
    opacity: 0;
    transform: translateX(var(--enter-x, 40px));
  }

  /* لینک‌های پنل منوی موبایل هیچ افکت هاوری (دایره‌ی رنگی/تغییر رنگ) ندارند */
  .mobile-menu .nav-link::before {
    display: none;
  }

  .mobile-menu .nav-link:hover {
    color: var(--font-primary-color, inherit);
  }

  /* همه‌ی لینک‌ها از یک فاصله‌ی یکسان از سمت راست شروع می‌کنند؛ آنچه
     زودتر/دیرتر ظاهر شدن‌شان را می‌سازد تأخیر پلکانی زیر است، نه مسافت */
  .mobile-menu .nav-link { --enter-x: 64px; }

  /* لینک‌های بالایی زودتر از پایینی‌ها وارد می‌شوند: هر لینک نسبت به لینک
     قبلی‌اش کمی دیرتر شروع می‌کند */
  .mobile-menu .nav-link:nth-child(1) { --enter-delay: 0.1s; }
  .mobile-menu .nav-link:nth-child(2) { --enter-delay: 0.18s; }
  .mobile-menu .nav-link:nth-child(3) { --enter-delay: 0.26s; }
  .mobile-menu .nav-link:nth-child(4) { --enter-delay: 0.34s; }
  .mobile-menu .nav-link:nth-child(5) { --enter-delay: 0.42s; }

  /* لینک‌ها از سمت راست همراه با فید وارد می‌شوند: اسلاید و فید دو انیمیشن
     جدا هستند. اسلاید سریع و با ease-smooth (که خودش شتاب اولش خیلی زیاد
     است) جمع می‌شود، ولی فید با easing خطی و مدت بیشتر جدا اجرا می‌شود تا
     به‌جای گم‌شدن زیر شتاب اسلاید، به‌طور کامل و محسوس دیده شود */
  .site-header.is-open ~ .mobile-menu .nav-link {
    animation:
      mobile-menu-link-slide-in 0.6s var(--ease-smooth) var(--enter-delay, 0.1s) forwards,
      mobile-menu-link-fade-in 1.1s linear var(--enter-delay, 0.1s) forwards;
  }

  @keyframes mobile-menu-link-slide-in {
    0% {
      transform: translateX(var(--enter-x));
    }

    100% {
      transform: translateX(0);
    }
  }

  @keyframes mobile-menu-link-fade-in {
    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }

  /* دکمه‌ی «رایگان شروع کنید»: هنگام باز شدن منو، دقیقاً از زیر لبه‌ی پایین
     صفحه‌ی موبایل (بیرون از دید) کشیده می‌شود بالا، از جای نهایی‌اش کمی
     بیشتر بالا می‌رود (برخورد به دیوار نامرئی) و بعد کمی پایین‌تر می‌آید
     و می‌نشیند؛ بدون فید — همیشه کاملاً مات است، فقط جابه‌جا می‌شود */
  .mobile-menu-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 160px;
    height: 52px;
    margin-top: auto;
    border-radius: 999px;
    background-color: #19171c;
    color: #ffffff;
    font-family: "peyda";
    font-size: 16px;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 10px 26px rgba(17, 17, 17, 0.18);
    /* transform عمداً اینجا تنظیم نمی‌شود: چون پنل والد (.mobile-menu) خودش
       وقتی بسته است translateY(-100%) دارد، اگر این دکمه هم مقدار ثابتی مثل
       translateY(100vh) داشته باشد، دقیقاً جابه‌جایی والد را خنثی می‌کند و
       دکمه با اینکه منو بسته است، دوباره روی صفحه دیده می‌شود. مقدار شروع
       ۱۰۰vh فقط باید در 0% کیفریم انیمیشن باشد، نه در حالت پایدار/بسته */
  }

  .site-header.is-open ~ .mobile-menu .mobile-menu-cta {
    animation: mobile-menu-cta-pop 0.65s 0.12s forwards;
  }
}

/* از زیر لبه‌ی صفحه (کاملاً بیرون از دید) با شتاب بالا کشیده می‌شود، از جای
   نهایی‌اش کمی بیشتر بالا می‌رود (برخورد به دیوار نامرئی) و بعد با یک نرمی
   کوتاه پایین می‌آید و می‌نشیند */
@keyframes mobile-menu-cta-pop {
  0% {
    transform: translateY(100vh);
    animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  62% {
    transform: translateY(-22px);
    animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
  }

  100% {
    transform: translateY(0);
  }
}

/* ==========================================
================== هیرو هدر ==================
========================================== */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 96vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 140px 16px 70px;
}

.hero-content {
  position: relative;
  z-index: 1;
  transform: translateY(20px);
  width: 100%;
  max-width: 100%;
}

/* ==========================================
   هاله‌های رنگی هیرو (قابل شخصی‌سازی)
   هر بلاب یک لکه نور بلور-شده‌است که رنگ،
   موقعیت، اندازه، شفافیت و سرعت حرکتش
   با متغیرهای CSS به‌صورت اینلاین کنترل می‌شود:
   --hb-color / --hb-x / --hb-y / --hb-size /
   --hb-opacity / --hb-blur / --hb-duration / --hb-delay
========================================== */
.hero-halo {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero-halo-blob {
  position: absolute;
  left: var(--hb-x, 50%);
  top: var(--hb-y, 20%);
  width: var(--hb-size, 480px);
  height: var(--hb-size, 480px);
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, var(--hb-color, #7c5cff) 0%, transparent 72%);
  opacity: var(--hb-opacity, 0.45);
  filter: blur(var(--hb-blur, 100px));
  mix-blend-mode: var(--hb-blend, normal);
  /* بدون انیمیشن پیوسته، عمداً: پنج لایه‌ی بزرگ با بلور تا 120px که
     برای همیشه transform می‌گیرند، حتی به‌صورت compositor-only، هزینه‌ی
     دائمی compositing غیرضروری تحمیل می‌کنند. چون این هاله‌ها صرفاً
     تزئینی‌اند، ایستا نگه داشتن‌شان مطمئن‌ترین راه برای حذف این هزینه است. */
}

@media (prefers-reduced-motion: reduce) {
  .hero-halo-blob {
    animation: none;
  }
}

.hero h1 {
  font-size: clamp(1.9rem, 1.15rem + 3.6vw, 55px);
  font-weight: 900;
  line-height: clamp(1.4, 1.15 + 0.9vw, 1.9);
  letter-spacing: -0.01em;

  font-family: 'pinar';
}

@media (min-width: 1024px) {
  .hero h1 {
    /* مقدار ثابت به‌جای اسکیل‌شدن با فونت، تا با بزرگ‌تر شدن تیتر
       ارتفاع باکس عوض نشود و المان‌های زیرش جابه‌جا نشوند */
    font-size: 60px;
    line-height: 116px;
  }
}

.hero-typed {
  display: inline-block;
  min-height: 2.5em;
}

/* ==========================================
   کلمه متغیر تیتر هیرو (شبیه هیرو Notion)
   هر چند ثانیه یک کلمه با دیزاین رنگی متفاوت
   جای کلمه قبلی را می‌گیرد.
========================================== */
.hero-word-pill {
  display: inline-flex;
  direction: rtl;
  align-items: center;
  justify-content: center;
  font-size: 1.05em;
  gap: 0.16em;
  vertical-align: middle;
  padding: 0.14em 0.5em;
  border-radius: 999px;
  white-space: nowrap;
  transition: background-color 0.4s var(--ease-smooth), width 0.4s var(--ease-smooth);
}

.hero-word-dot {
  width: 0.44em;
  height: 0.44em;
  flex: 0 0 auto;
  border-radius: 50%;
}

.hero-word-text {
  display: inline-block;
  padding: 0.26em 0 0.14em;
  font-family: 'pinar';
  font-size: calc((1em - 4px) * 0.947625);
  font-weight: 900;
  letter-spacing: inherit;
  line-height: 1;
  white-space: nowrap;
  transition: opacity 0.25s ease, filter 0.25s ease, transform 0.25s ease;
}

.hero-word-text.is-out {
  opacity: 0;
  filter: blur(4px);
  transform: translateY(-10px);
}

.hero-word-text.is-in {
  animation: hero-word-in 0.4s var(--ease-smooth) both;
}

@keyframes hero-word-in {
  from {
    opacity: 0;
    filter: blur(4px);
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}

/* ==========================================
   تیتر هیرو صفحه‌ی درباره ما
========================================== */
.about-hero-break {
  display: none;
}

@media (min-width: 641px) {
  .about-hero-break {
    display: block;
  }
}

@media (prefers-reduced-motion: reduce) {

  .hero-word-pill,
  .hero-word-text {
    transition: none;
  }

  .hero-word-text.is-out,
  .hero-word-text.is-in {
    animation: none;
    opacity: 1;
    filter: none;
    transform: none;
  }
}

.hero-word-pill[data-color="green"] {
  background: #d3f7de;
}

.hero-word-pill[data-color="green"] .hero-word-dot {
  background: #1fb35a;
}

.hero-word-pill[data-color="blue"] {
  background: #d9e9ff;
}

.hero-word-pill[data-color="blue"] .hero-word-dot {
  background: #2f7bf6;
}

.hero-word-pill[data-color="orange"] {
  background: #ffe6bf;
}

.hero-word-pill[data-color="orange"] .hero-word-dot {
  background: #f5a324;
}

.hero-word-pill[data-color="purple"] {
  background: #e8dcfb;
}

.hero-word-pill[data-color="purple"] .hero-word-dot {
  background: #8b3ff0;
}

.hero-word-pill[data-color="pink"] {
  background: #fbdbe8;
}

.hero-word-pill[data-color="pink"] .hero-word-dot {
  background: #ec3f83;
}

/* ==========================================
   TEXT WORD-REVEAL (تایپ کلمه‌به‌کلمه با بلور)
   کلمات یکی‌یکی از حالت محو/بلور به حالت واضح
   درمی‌آیند تا حس تایپ زنده را القا کنند.
========================================== */
.text.word-reveal .word-reveal-word {
  display: inline-block;
  opacity: 0;
  filter: blur(8px);
  transform: translateY(6px);
  transition: opacity 0.85s var(--ease-smooth), filter 0.85s var(--ease-smooth), transform 0.85s var(--ease-smooth);
}

.text.word-reveal.is-visible .word-reveal-word {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .text.word-reveal .word-reveal-word {
    transition: none;
    opacity: 1;
    filter: none;
    transform: none;
  }
}

.hero p {
  margin-top: 26px;
  width: 100%;
  max-width: 730px;
  font-size: clamp(0.9rem, 0.7rem + 1vw, 20px);
  font-weight: 800;
  line-height: 1.8;
  color: #424242;
}

.hero-p-break {
  display: none;
}

@media (min-width: 1024px) {
  .hero-p-break {
    display: block;
  }

  .hero p {
    /* کلاس container یک padding-left/right محاسبه‌شونده با درصد به این پاراگراف
       هم اعمال می‌کرد که با افزایش عرض صفحه (به‌خاطر رفرنس گرفتن از عرض خودش)
       به‌طور نامتناسبی بزرگ می‌شد و باعث می‌شد تعداد خط‌های متن (و در نتیجه
       ارتفاعش) بسته به عرض صفحه غیرقابل‌پیش‌بینی عوض شود. صفر کردنش اینجا یعنی
       متن همیشه دقیقا با همون max-width: 730px بشکنه و تعداد خط‌ها (و جبران
       زیر) در همه‌ی عرض‌های دسکتاپ یکسان بمونه. */
    padding-left: 0;
    padding-right: 0;
    /* جبران دقیق افت ارتفاع ناشی از کوچک‌تر شدن فونت (2 خط به‌جای 26px قبلی)
       + کمی پایین‌تر آمدن متن؛ عمداً از margin-top استفاده شده نه padding-bottom
       تا فاصله تا دکمه‌های زیرش (hero-actions) دست‌نخورده بماند */
    margin-top: 33.1875px;
  }
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 38px;
  width: 100%;
}

.hero-actions .btn {
  padding: 14px 26px;
  font-size: 15.4px;
  height: 50px;
}

.hero-actions .btn .icon {
  width: 29px;
  height: 29px;
}

.hero-cta-btn {
  background-color: #19171c;
  transform: scale(1);
}

.hero-cta-btn::before {
  display: none;
}

.hero-cta-btn:hover {
  color: #ffffff !important;
  animation: about-audience-btn-pop 0.45s var(--ease-smooth) forwards;
}

.hero-cta-btn.is-leaving {
  animation: about-audience-btn-unpop 0.4s var(--ease-smooth) forwards;
}

@media (min-width: 901px) {
  .hero {
    margin-bottom: -10px;
  }
}

/* ==========================================
================ هیرو ریسپانسیو ==============
========================================== */
@media (max-width: 900px) {
  .hero {
    padding: 130px 16px 55px;
  }
}

@media (max-width: 640px) {
  .hero {
    min-height: auto;
    padding: 125px 16px 115px;
  }

  .hero h1 {
    /* ۱۰٪ بزرگ‌تر از clamp پایه (1.9rem, 1.15rem + 3.6vw, 55px) */
    font-size: clamp(2.09rem, 1.265rem + 3.96vw, 60.5px);
  }

  .hero-typed,
  .hero p {
    align-self: flex-start;
    text-align: right;
  }

  .hero p {
    margin-top: 30px;
    line-height: 1.7;
  }

  .hero-actions {
    width: 100%;
    margin-top: 28px;
    gap: 10px;
    flex-direction: column;
    align-items: center;
    animation: none;
    opacity: 1;
  }

  .hero-actions .btn {
    width: 90%;
    /* ۱۰٪ کوچک‌تر از اندازه‌ی پایه‌ی .btn (padding: 13px 24px, font-size: 14px, height: 45px) */
    padding: 11.7px 21.6px;
    font-size: 12.6px;
    height: 44px;
    animation: none;
  }
}

@media (max-width: 380px) {
  .hero h1 {
    line-height: 1.45;
  }
}

/* ==========================================
================ ریسپانسیو ===================
========================================== */
@media (max-width: 600px) {
  .header-nav {
    display: none;
  }

  .menu-toggle {
    display: inline-flex;
  }

  .header-pin,
  .header-actions-spacer {
    display: none;
  }
}






/* ─── Section ─── */
#tl-section {
  position: relative;
  width: 100%;
  /* ارتفاع بر اساس محتوا؛ در صورت نیاز min-height بدهید */
  padding-bottom: 40px;
  background: #151517;
  /* توجه: overflow: hidden اینجا ممنوع — کارت‌های سه‌بعدی را هنگام اسکرول می‌بُرد */
  border-radius: 65px;
  padding-top: 38px;
}

.label {
  direction: rtl;
  pointer-events: none;
  line-height: 1.15;
  letter-spacing: 0.01em;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.line {
  position: relative;
  overflow: hidden;
  display: block;
  width: fit-content;
  text-align: center;
  padding: 9px 5px;
}

.line-text {
  display: block;
  color: #ffffff;
  opacity: 0;
  font-size: 32px;
  white-space: nowrap;
  font-family: "pinar";
  font-weight: 700;
}

.line-block {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: #ffffff;
  transform: translateX(105%);
}

@keyframes block-slide {
  0% {
    transform: translateX(105%);
  }

  50% {
    transform: translateX(0%);
  }

  100% {
    transform: translateX(-105%);
  }
}

@keyframes text-appear {

  0%,
  49% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 1;
  }
}

.block-reveal-active .line:nth-child(1) .line-block {
  animation: block-slide 1.1s cubic-bezier(.7, 0, .25, 1) both;
}

.block-reveal-active .line:nth-child(1) .line-text {
  animation: text-appear 1.1s linear both;
}

.block-reveal-active .line:nth-child(2) .line-block {
  animation: block-slide 1.1s cubic-bezier(.7, 0, .25, 1) both;
  animation-delay: 288ms;
}

.block-reveal-active .line:nth-child(2) .line-text {
  animation: text-appear 1.1s linear both;
  animation-delay: 288ms;
}

/* روی موبایل، چون .line-text برای انیمیشن block-slide باید یک خط کامل
   (white-space: nowrap) بماند و .line هم width: fit-content دارد، متن خط دوم
   (طولانی‌تر) در عرض‌های باریک از صفحه بیرون می‌زد و باعث اسکرول افقی واقعی
   کل صفحه می‌شد (که هدر position:fixed را هم جابه‌جا می‌کرد). فونت را کوچک‌تر
   می‌کنیم و یک overflow-x:clip ایمن روی .label می‌گذاریم — نه روی #tl-section،
   چون آنجا برای بیرون‌نزدن کارت‌های سه‌بعدی حین اسکرول باید آزاد بماند */
@media (max-width: 640px) {
  .label {
    overflow-x: clip;
    max-width: 100%;
  }

  .line {
    max-width: 100%;
  }

  .line-text {
    font-size: 18px;
  }

  /* کارت‌های سه‌بعدی (glow-cards) روی گوی نامرئی می‌چرخند و کارت‌های کناری
     عمداً از عرض استیج بیرون می‌زنند؛ #tl-section overflow:hidden ندارد چون
     آن باعث بریده‌شدن کارت‌ها حین اسکرول می‌شد (کامنت بالا). ولی overflow-x:
     clip فقط محور افقی را می‌گیرد و رفتار عمودی/اسکرول را دست‌نخورده می‌گذارد؛
     همان راه‌حلی که body هم برای همین مشکل استفاده می‌کند */
  #tl-section {
    overflow-x: clip;
    border-radius: 0;
    padding-bottom: 0px;
  }
}

/* ─── ایتم‌های زیر progress-text (یک در میون) ─── */
.tl-items {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 90px;
  margin-top: 110px;
  padding-bottom: 90px;
}

.tl-item {
  display: flex;
  flex-direction: row-reverse;

  align-items: center;

}

.tl-item .image-wrapper {

  width: calc(50% - 220px);
  display: flex;
  flex-direction: column;
  transition: opacity 0.9s var(--ease-smooth), transform 0.9s var(--ease-smooth);

  border-radius: 20px;


}

.fade-in-animation {

  opacity: 0;
  transition: opacity 0.9s var(--ease-smooth), transform 0.9s var(--ease-smooth);
  transform: translateX(-90px);


}

.fade-in-animation.reverse-animation {
  transform: translateX(90px);

}

.fade-in-animation.is-visible {
  opacity: 1;
  transform: translateX(0) !important;
}

.tl-item:nth-child(odd) .image-wrapper {
  margin-right: auto;

}

.tl-item:nth-child(even) .image-wrapper {
  margin-left: auto;

}

.tl-item:nth-child(even) {
  flex-direction: row;

}

.tl-item .text-wrapper {
  width: calc(50% - 180px);
  color: var(--normal-white-color);
  text-align: justify;
  display: flex;
  gap: 50px;
  flex-direction: column;
  margin-bottom: 40px;

}

.tl-item .text-wrapper .title {
  font-size: 36px;
}

.tl-item .text-wrapper .text {
  font-size: 22px;
  font-weight: 400;
  line-height: 1.8rem;
}


.logo-animation-wrapper {
  width: 100%;
  /* سکشن لوگوی چرخان (.spiro) موقتاً کامنت شده؛ بودجه‌ی ارتفاع فقط برای دو
     فرزند باقی‌مانده + یک gap: ۸۵.۳۸۷۵ (ویجت استک آیکن) + ۵۰ (gap) + ۱۶۳
     (آمار) = ۲۹۸.۳۸۷۵. اگر .spiro برگردوندین، این را به ۴۹۰.۳۸۷۵px برگردونید */
  height: 298.3875px;
  background: #ffffff;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 50px;
  margin-top: 80px;
  margin-bottom: 80px;
}

/* ویجت انیمیشن استک آیکن‌ها؛ بالای عدد/آمار همین سکشن. اندازه‌ی اصلی
   ویجت 200px است؛ چون ۷۵٪ کوچیک‌تر شده (۲۵٪ اندازه‌ی اصلی = 50px)، به‌جای
   تغییر عرض/ارتفاع داخلی خودِ ویجت (که با inset/left/right محاسبه می‌شود)
   با overflow:hidden روی یک قاب و transform:scale داخل اسکریپت جدا
   می‌کنیم؛ flex برای هم‌مرکز کردن دقیق نقطه‌ی مقیاس با قاب دیده‌شونده است.
   85.3875px = 79.0625px قبلی + ۸٪ بزرگ‌تر */
.icon-stack-loader-wrap {
  width: 85.3875px;
  height: 85.3875px;
  flex-shrink: 0;
  /* overflow نباید hidden باشه: کارت‌های پشتی استک کمی بالاتر از کارت جلو
     قرار می‌گیرن (peek)، اگر ببریمش دقیقاً هم‌اندازه‌ی کارت جلو باشه، همون
     جلوه‌ی «استک‌شدگی» که در فایل اصلی icon-stack-loader (3) هست از بین می‌ره */
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

#heroStatsIconStackRoot {
  position: relative;
  width: 200px;
  height: 200px;
  flex-shrink: 0;
}

#heroStatsIconStackRoot .isl-card {
  position: absolute;
  height: 200px;
  border-radius: 34px;
}

#heroStatsIconStackRoot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 44px;
  display: block;
}

.logo-animation-wrapper .number-text-section {
  gap: 32px;
  display: flex;
}

.logo-animation-wrapper .item-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  height: 80%;
  position: relative;
  background-color: #f6f5f3;
  border-radius: 24px;
  padding: 28px 56px;
}

/* دسکتاپ: ارتفاع باکس‌ها کمی بیشتر و فاصله‌ی این سکشن با سکشن پایینش کمتر */
@media (min-width: 901px) {
  .logo-animation-wrapper .item-wrapper {
    padding-top: 40px;
    padding-bottom: 40px;
    /* ارتفاع را روی همین مقدار (padding فعلی + محتوا) قفل می‌کنیم تا وقتی
       margin-top متن پایینی را کم می‌کنیم، خودِ ارتفاع باکس عوض نشود */
    height: 163px;
  }

  .logo-animation-wrapper {
    margin-bottom: 80px;
  }
}

.logo-animation-wrapper .item-wrapper::after {
  display: none;
}

.logo-animation-wrapper .item-wrapper:last-of-type::after {
  display: none;
}

.logo-animation-wrapper .item-wrapper span {
  font-size: 80px;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 600;

}

.logo-animation-wrapper .item-wrapper p {
  color: #686868;
  font-size: 18px;
  margin-top: -10px;
}

/* دسکتاپ: فاصله‌ی بیشتر بین عدد و متن زیرش داخل هر باکس، ولی کمی کمتر از قبل
   تا متن پایینی یک‌کم بالاتر بیاید بدون تغییر ارتفاع خودِ باکس */
@media (min-width: 901px) {
  .logo-animation-wrapper .item-wrapper p {
    margin-top: 4px;
  }
}

.logo-animation-wrapper .item-wrapper:last-child {
  border-left: unset;
}

/* تبلت (۶۲۱ تا ۹۰۰px): سه باکس هنوز کنار هم‌اند؛ چون padding/gap دسکتاپ برای
   این عرض زیاده و باعث سرریز (overflow) باکس سوم می‌شد، اینجا فشرده‌تر و با
   flex:1 (تا فضا رو مساوی تقسیم کنن و جمع‌شون از عرض کانتینر رد نشه) چیده شدن */
@media (max-width: 900px) {
  .logo-animation-wrapper {
    height: auto;
    padding: 40px 20px;
    gap: 28px;
    margin-top: 30px;
    margin-bottom: 30px;
  }
  .logo-animation-wrapper .number-text-section {
    gap: 12px;
  }
  .logo-animation-wrapper .item-wrapper {
    flex: 1 1 0;
    min-width: 0;
    height: auto;
    padding: 20px 12px;
  }
  .logo-animation-wrapper .item-wrapper span {
    font-size: clamp(28px, 7vw, 44px);
  }
  .logo-animation-wrapper .item-wrapper p {
    font-size: 12.5px;
    line-height: 1.5;
  }
}

/* موبایل (زیر ۶۲۱px): باکس‌ها زیر هم و تمام‌عرض، با فونت بزرگ‌تر چون دیگه
   نیازی به جا دادن سه‌تایی کنار هم نیست */
@media (max-width: 620px) {
  .logo-animation-wrapper {
    padding: 32px 20px;
    gap: 24px;
  }
  .logo-animation-wrapper .number-text-section {
    flex-direction: column;
    gap: 14px;
    width: 100%;
  }
  .logo-animation-wrapper .item-wrapper {
    flex: none;
    height: auto;
    width: 100%;
    padding: 22px 20px;
  }
  .logo-animation-wrapper .item-wrapper span {
    font-size: 44px;
  }
  .logo-animation-wrapper .item-wrapper p {
    font-size: 14px;
    margin-top: 2px;
  }
}

.spiro {
  position: relative;
  width: 142px;
  height: 142px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.spiro__pattern {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  animation: spiro-spin 12s linear infinite;
  transform-origin: center;
}

@keyframes spiro-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.logo-circle {
  position: relative;
  width: 64px;
  height: 64px;
  background: #151515;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-circle_icon {
  width: 36px;
  height: 36px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  /* لوگوی سیاه را سفید می‌کند */
}




.mask-reveal {
padding: 40px;
    max-width: 650px;
    font-size: 42px;
    line-height: 1.6;
    font-weight: 800;
    padding-right: 80px;
    color: #111111;
    text-align: right;
}

.mask-reveal .word-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  margin-inline-start: 0.18em;
}

.mask-reveal .word-inner {
  display: inline-block;
  will-change: transform;
  animation: maskReveal 2.4s cubic-bezier(0.16, 1, 0.3, 1) both paused;
}

.mask-reveal.is-visible .word-inner {
  animation-play-state: running;
  font-family: 'pinar';
}

@keyframes maskReveal {
  0% {
    transform: translateY(115%);
  }

  100% {
    transform: translateY(0%);
  }
}




  .fs-wrap {
   
    background: #ffffff;
    padding: 10px 24px;
    display: flex;
    justify-content: center;
  }
  .fs-inner { width: 100%; max-width: 1180px; }
  .fs-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
  .fs-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 22px 28px;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .fs-icon { display: flex; justify-content: flex-start; }
  .fs-badge {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    padding: 2px;
    background: conic-gradient(from 200deg, #fb923c, #f472b6 45%, #c084fc 75%, #fb923c 100%);
  }
  .fs-badge-inner {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #19171c;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .fs-title { margin: 0; font-size: clamp(16px, 0.6vw + 15px, 19px); font-weight: 700; color: #111318; line-height: 1.4; }
  .fs-desc { margin: 0; font-size: clamp(14px, 0.6vw + 12.5px, 16px); font-weight: 600; color: #5b616e; line-height: 1.85; }

  /* دسکتاپ: سمت راست متن داخل باکس‌ها (نه خود باکس) با سمت راست متن تیتر
     بالای همین سکشن، و هر دو با سمت راست بک‌گراند باکس «200%» در سکشن آمار
     هم‌راستا شوند (هم‌راستایی تیتر با .main-title .mask-reveal کنار همین
     قانون در پایین فایل تنظیم شده) */
  @media (min-width: 901px) {
    .main-title .fs-wrap { padding-right: 34px; }
    /* تیتر خودش هم برای هم‌راستایی با باکس «200%» به همین اندازه به راست نزدیک‌تر می‌شود */
    .main-title .mask-reveal { padding-right: 54px; }
  }

  @media (max-width: 900px) {
    .fs-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .fs-wrap { padding: 10px 20px; }
  }
  @media (max-width: 600px) {
    .fs-grid { grid-template-columns: 1fr; gap: 16px; }
    .fs-wrap { padding: 5px 16px; }
    .fs-card {
      padding: 24px 20px;
      border: 1px solid #e2e4e8;
      border-radius: 16px;
      text-align: right;
    }
  }


  
  @keyframes tabFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .ft-section {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 0 64px;
    background: #151517;
    display: flex;
    justify-content: center;
    border-radius: 60px;
    flex-direction: column;
  }
  .ft-inner {
    width: 100%;
  }
  .ft-section .text-field{
        display: flex;
    align-items: flex-start;
    color: #fff;
    padding: 10px;
    margin-bottom: 50px;
  }
  .ft-section .text-field .mask-reveal {
    color: #fff;
    max-width: unset;
    padding: 40px;
    width: 70%;
    font-size: 55px;

  }
  .ft-section .text-field .ft-desc {
    width: 30%;
    padding-top: 40px;
  }
  .ft-section .text-field .ft-desc .uc-dark-badge {
    margin-bottom: 14px;
  }
  .ft-section .text-field  p {
font-size: 18px;
    line-height: 32px;
    color: #e3e3e3;
  }
      
  .ft-wrap {
    display: flex;
    flex-direction: column;
    gap: 28px;
  }

  /* ---- Tab switcher ---- */
  .ft-tabbar-outer {
    display: flex;
    justify-content: center;
    width: 100%;
  }

  .ft-tabbar {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    background: var(--pill-bg);
    border-radius: 18px;
    padding: 8px;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    box-sizing: border-box;
    user-select: none;
    -webkit-user-select: none;
  }
  .ft-tabbar::-webkit-scrollbar { display: none; }

  .ft-pill {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    border-radius: 14px;
    background: var(--pill-active-bg);
    transition: left .38s cubic-bezier(.4,0,.2,1),
                width .38s cubic-bezier(.4,0,.2,1),
                height .38s cubic-bezier(.4,0,.2,1),
                top .38s cubic-bezier(.4,0,.2,1);
    will-change: left, top, width, height;
    opacity: 0;
    pointer-events: none;
  }
  .ft-pill.is-ready { opacity: 1; }

  .ft-tab-btn {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 22px;
    border-radius: 14px;
    border: none;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    color: var(--text-soft);
    font-size: 17px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
    transition: color .25s ease;
  }
  .ft-tab-btn.is-active { color: oklch(0.16 0.008 250); }

  .ft-tab-icon {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .ft-tab-icon svg { display: block; }
  .ft-tab-icon img { display: block; width: 100%; height: 100%; object-fit: contain; }

  /* ---- Panels (cards) ---- */
  .ft-panels { position: relative; }

  .ft-card {
    background: #1f1f1f;

    border-radius: 24px;
    padding: 40px;
    display: none;
    flex-wrap: wrap;
    gap: 32px;
    align-items: center;
  }
  .ft-card.is-active {
    display: flex;
    animation: tabFadeIn .35s ease;
  }

  .ft-text-col {
    flex: 1 1 280px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 220px;
  }

  .ft-title {
    margin: 0;
    font-size: 30px;
    font-weight: 800;
    color: var(--text-strong);
    line-height: 1.4;
  }

  .ft-desc {
    margin: 0;
    font-size: 17px;
    line-height: 2;
    color: var(--text-soft);
  }

  .ft-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    align-self: flex-start;
    margin-top: 4px;
    border: none;
    outline: none;
    cursor: pointer;
    background: var(--text-strong);
    color: oklch(0.16 0.008 250);
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    padding: 12px 22px;
    border-radius: 12px;
    transform: scale(1);
  }
  .ft-cta:hover {
    animation: about-audience-btn-pop 0.45s var(--ease-smooth) forwards;
  }
  .ft-cta.is-leaving {
    animation: about-audience-btn-unpop 0.4s var(--ease-smooth) forwards;
  }

  .ft-media-col {
    flex: 1 1 340px;
    min-width: 240px;
    aspect-ratio: 16 / 9;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    border: 1px solid var(--card-border);
    background: oklch(0.16 0.008 250);
  }

  .ft-media-frame {
    all: unset;
    display: block;
    width: 100%;
    height: 100%;
    cursor: zoom-in;
  }
  .ft-media-frame img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    pointer-events: none;
  }

  .ft-zoom-badge {
    position: absolute;
    bottom: 12px;
    left: 12px;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: oklch(0.1 0.006 250 / 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
  }

  /* fallback pattern (used when a media col has no image) */
  .ft-media-fallback {
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
  }
  .ft-media-fallback svg { display: block; width: 100%; height: 100%; }
  .ft-media-fallback-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
 .ft-media-fallback-label img {width: 100%;
height: 100% ; object-fit: cover;}

  /* ---- Zoom overlay ---- */
  .ft-overlay {
    position: fixed;
    inset: 0;
    background: oklch(0.05 0.006 250 / 0.88);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 999;
    padding: 24px;
    box-sizing: border-box;
    cursor: zoom-out;
  }
  .ft-overlay.is-open { display: flex; }

  .ft-overlay img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 20px 60px oklch(0 0 0 / 0.5);
  }

  .ft-overlay-close {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: none;
    background: oklch(0.2 0.008 250);
    color: var(--text-strong);
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  @media (max-width: 680px) {
    .main-ft-section { margin-top: 40px; }
    .ft-section { padding: 14px 0 36px; border-radius: 28px; }
    .ft-card { gap: 18px; padding: 24px 20px; }
    .ft-text-col, .ft-media-col { min-width: 0; }

    /* روی دسکتاپ تیتر و پاراگراف کنار هم (70%/30%) هستند؛ رو موبایل تیتر
       تمام عرض می‌شود و کوچک‌تر می‌شود، و پاراگراف کنارش (طبق درخواست)
       اصلاً حذف می‌شود چون رو عرض باریک جمع‌وجور و ناخوانا می‌شد */
    .ft-section .text-field {
      padding: 4px;
    }

    .ft-section .text-field .mask-reveal {
      width: 100%;
      padding: 6px 0 20px;
      font-size: 26px;
      line-height: 1.6;
    }

    .ft-section .text-field p {
      display: none;
    }

    .ft-tabbar {
      border-radius: 14px;
      padding: 6px;
    }

    .ft-tab-btn {
      padding: 10px 16px;
      font-size: 14px;
      gap: 7px;
    }

    .ft-tab-icon {
      width: 18px;
      height: 18px;
    }

    .ft-title {
      font-size: 21px;
    }

    .ft-desc {
      font-size: 15px;
      line-height: 1.85;
    }

    .ft-cta {
      font-size: 14px;
      padding: 10px 18px;
    }
  }

/* ==========================================
========= کارت‌های سرویس (Glow Cards) ========
چهار کارت گرادیانی در یک ردیف — رسپانسیو
========================================== */
.glow-cards {
  padding-top: 60px;
  padding-bottom: 60px;
}

/* هاله نور پشت کارت وسط — رنگش با کارت فعال عوض می‌شود */
@property --halo-c {
  syntax: '<color>';
  inherits: false;
  initial-value: #2db8ff;
}

.glow-cards-halo {
  position: absolute;
  left: 50%;
  top: 58%;
  width: min(560px, 80vw);
  height: min(400px, 60vw);
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, var(--halo-c) 0%, transparent 72%);
  opacity: 0.26;
  filter: blur(70px);
  pointer-events: none;
  z-index: 0;
  transition: --halo-c 0.7s ease;
}

.glow-cards-grid {
  /* صحنه سه‌بعدی: کارت‌ها روی قوس یک گوی نامرئی می‌نشینند */
  --gcw: min(309px, 68.4vw);
  position: relative;
  z-index: 1;
  height: calc(var(--gcw) * 1.4 + 150px);
  /* پرسپکتیو داخل ترنسفورم هر کارت (در JS) اعمال می‌شود؛
     perspective روی خود صحنه باعث برش کارت‌ها هنگام اسکرول در کروم می‌شد */
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
}

.glow-cards-grid.is-dragging {
  cursor: grabbing;
}

.glow-cards-ring {
  position: absolute;
  inset: 0;
}

.glow-card-wrap {
  --gemh: 109px;
  /* فضای اضافه بالای آیکون برای انیمیشن شناوری و هاله درخشش */
  --gem-headroom: 28px;
  position: absolute;
  top: -20px;
  left: 50%;
  width: var(--gcw);
  /* فضای آیکون داخل خود جعبه تا در رندر سه‌بعدی کات نخورد */
  padding-top: calc(var(--gemh) / 2 + var(--gem-headroom));
  will-change: transform;
}

.glow-card-gem {
  position: absolute;
  top: var(--gem-headroom);
  left: 50%;
  transform: translateX(-50%);
  /* ارتفاع ثابت تا همه آیکون‌ها هم‌اندازه دیده شوند */
  height: var(--gemh);
  width: auto;
  z-index: 2;
  pointer-events: none;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35))
          drop-shadow(0 0 16px var(--gem-glow, rgba(255, 255, 255, 0.25)));
  animation: gem-float 3.4s ease-in-out infinite alternate;
}

/* شناور بودن آرام جواهرها — هرکدام با ریتم خودش */
@keyframes gem-float {
  from { transform: translateX(-50%) translateY(0); }
  to   { transform: translateX(-50%) translateY(-8px); }
}

.glow-card-wrap:nth-child(2) .glow-card-gem { animation-delay: -1.1s; }
.glow-card-wrap:nth-child(3) .glow-card-gem { animation-delay: -2.3s; }
.glow-card-wrap:nth-child(4) .glow-card-gem { animation-delay: -0.6s; }

/* درخشش هم‌رنگ پشت هر جواهر */
.glow-card-wrap:has(.glow-card--pink)   .glow-card-gem { --gem-glow: rgba(255, 45, 120, 0.45); }
.glow-card-wrap:has(.glow-card--blue)   .glow-card-gem { --gem-glow: rgba(45, 184, 255, 0.45); }
.glow-card-wrap:has(.glow-card--green)  .glow-card-gem { --gem-glow: rgba(46, 224, 96, 0.45); }
.glow-card-wrap:has(.glow-card--purple) .glow-card-gem { --gem-glow: rgba(201, 47, 208, 0.45); }

@media (prefers-reduced-motion: reduce) {
  .glow-card-gem { animation: none; }
}

.glow-card {
  aspect-ratio: 300 / 420;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.03);
  overflow: hidden;
  box-sizing: border-box;
  filter: brightness(1.18);
  background-blend-mode: lighten, lighten, lighten, lighten, normal;
  display: flex;
  flex-direction: column;
  padding: 26px 22px;
  /* جای خالی بالای کارت تا عنوان دقیقاً زیر آیکون قرار بگیرد */
  padding-top: calc(var(--gemh) / 2 + 20px);
  transition: box-shadow 0.3s ease;
  will-change: transform, filter, opacity;
}

.glow-card-wrap:hover .glow-card {
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.glow-card-content {
  color: var(--normal-white-color);
  text-align: center;
}

.glow-card-title {
  margin: 0 0 34px;
  font-family: "pinar";
  font-size: 22px;
  font-weight: 800;
  line-height: 1.5;
}

.glow-card-text {
  margin: 0;
  text-align: right;
  font-size: 17px;
  line-height: 2;
  opacity: 0.75;
}

.glow-card--pink {
  border: 1px solid rgba(255, 45, 120, 0.35);
  background:
    radial-gradient(90% 58% at 08% 115%, #ffffff 0%, #ff2d78 8%, rgba(255,25,120,0.98) 18%, rgba(240,22,110,0.85) 28%, rgba(210,18,95,0.65) 38%, rgba(170,13,78,0.48) 49%, rgba(130,9,58,0.32) 60%, rgba(85,6,40,0.18) 70%, rgba(45,3,22,0.08) 80%, rgba(0,0,0,0) 92%),
    radial-gradient(424px 320px at 89% 120%, #ffffff 0%, #ff2d78 10%, rgba(240,22,110,0.7) 24%, rgba(210,18,95,0.45) 40%, rgba(160,12,72,0.26) 58%, rgba(100,7,48,0.1) 76%, rgba(0,0,0,0) 100%),
    radial-gradient(circle 162.5px at 50% -20px, #ff2d78 0%, rgba(230,20,100,0.55) 25%, rgba(200,15,92,0.32) 50%, rgba(150,11,70,0.18) 68%, rgba(90,7,42,0.08) 84%, rgba(0,0,0,0) 100%),
    radial-gradient(0% 0% at 110% -10%, rgba(214,17,98,0.4) 0%, rgba(120,8,55,0.15) 35%, rgba(0,0,0,0) 60%),
    linear-gradient(180deg, #16050c 0%, #0a0206 50%, #12040a 100%);
}

.glow-card--blue {
  border: 1px solid rgba(45, 160, 255, 0.35);
  background:
    radial-gradient(90% 58% at 08% 115%, #ffffff 0%, #2db8ff 8%, rgba(25,150,255,0.98) 18%, rgba(22,130,240,0.85) 28%, rgba(18,105,210,0.65) 38%, rgba(13,80,170,0.48) 49%, rgba(9,58,130,0.32) 60%, rgba(6,38,85,0.18) 70%, rgba(3,20,45,0.08) 80%, rgba(0,0,0,0) 92%),
    radial-gradient(424px 320px at 89% 120%, #ffffff 0%, #2db8ff 10%, rgba(22,130,240,0.7) 24%, rgba(18,105,210,0.45) 40%, rgba(12,75,160,0.26) 58%, rgba(7,45,100,0.1) 76%, rgba(0,0,0,0) 100%),
    radial-gradient(circle 162.5px at 50% -20px, #2db8ff 0%, rgba(20,140,230,0.55) 25%, rgba(15,110,200,0.32) 50%, rgba(11,80,150,0.18) 68%, rgba(7,45,90,0.08) 84%, rgba(0,0,0,0) 100%),
    radial-gradient(0% 0% at 110% -10%, rgba(17,120,214,0.4) 0%, rgba(8,55,120,0.15) 35%, rgba(0,0,0,0) 60%),
    linear-gradient(180deg, #05101c 0%, #02060e 50%, #041022 100%);
}

.glow-card--green {
  border: 1px solid rgba(30, 220, 150, 0.35);
  background:
    radial-gradient(90% 58% at 08% 115%, #ffffff 0%, #1fe0c8 8%, rgba(15,210,180,0.98) 18%, rgba(12,185,150,0.85) 28%, rgba(9,150,115,0.65) 38%, rgba(7,115,85,0.48) 49%, rgba(5,85,60,0.32) 60%, rgba(3,55,38,0.18) 70%, rgba(1,28,18,0.08) 80%, rgba(0,0,0,0) 92%),
    radial-gradient(424px 320px at 89% 120%, #ffffff 0%, #22e050 10%, rgba(18,190,60,0.7) 24%, rgba(14,155,48,0.45) 40%, rgba(9,110,32,0.26) 58%, rgba(5,65,18,0.1) 76%, rgba(0,0,0,0) 100%),
    radial-gradient(circle 162.5px at 50% -20px, #4ee04a 0%, rgba(60,200,50,0.55) 25%, rgba(45,160,40,0.32) 50%, rgba(30,115,30,0.18) 68%, rgba(15,65,15,0.08) 84%, rgba(0,0,0,0) 100%),
    radial-gradient(0% 0% at 110% -10%, rgba(20,190,90,0.4) 0%, rgba(8,90,45,0.15) 35%, rgba(0,0,0,0) 60%),
    linear-gradient(180deg, #021611 0%, #020c0a 50%, #02150e 100%);
}

.glow-card--purple {
  border: 1px solid rgba(180, 45, 230, 0.35);
  background:
    radial-gradient(90% 58% at 08% 115%, #ffffff 0%, #a83be0 8%, rgba(150,55,210,0.98) 18%, rgba(130,45,190,0.85) 28%, rgba(105,35,155,0.65) 38%, rgba(80,27,120,0.48) 49%, rgba(58,19,88,0.32) 60%, rgba(38,13,58,0.18) 70%, rgba(20,7,30,0.08) 80%, rgba(0,0,0,0) 92%),
    radial-gradient(424px 320px at 89% 120%, #ffffff 0%, #c92fd0 10%, rgba(165,40,180,0.7) 24%, rgba(135,32,150,0.45) 40%, rgba(95,22,105,0.26) 58%, rgba(58,13,64,0.1) 76%, rgba(0,0,0,0) 100%),
    radial-gradient(circle 162.5px at 50% -20px, #d936c9 0%, rgba(200,45,190,0.55) 25%, rgba(160,35,155,0.32) 50%, rgba(115,25,115,0.18) 68%, rgba(65,15,65,0.08) 84%, rgba(0,0,0,0) 100%),
    radial-gradient(0% 0% at 110% -10%, rgba(180,40,210,0.4) 0%, rgba(90,20,105,0.15) 35%, rgba(0,0,0,0) 60%),
    linear-gradient(180deg, #14051c 0%, #0a0210 50%, #12051a 100%);
}

@media (max-width: 575px) {
  .glow-cards {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .glow-cards-grid {
    perspective: 1100px;
  }

  .glow-card-wrap {
    --gemh: 80px;
  }

  .glow-card {
    padding: 20px 16px;
    padding-top: calc(var(--gemh) / 2 + 16px);
  }

  .glow-card-title {
    margin-bottom: 42px;
    font-size: 18px;
  }

  .glow-card-text {
    font-size: 14px;
    line-height: 1.85;
  }
}

@media (max-width: 400px) {
  .glow-card-wrap {
    --gemh: 66px;
  }

  .glow-card-title {
    font-size: 16.5px;
    margin-bottom: 42px;
  }

  .glow-card-text {
    font-size: 13.2px;
  }
}
/* ==========================================
========= کارت‌های قابلیت‌ها (Feature Cards) =========
========================================== */
.feature-cards {
  padding-top: 64px;
  padding-bottom: 64px;
}

.hiw-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 0 0 56px;
}

@media (min-width: 641px) {
  .hiw-badges {
    margin-top: 32px;
    margin-bottom: 80px;
  }
}

.hiw-badge {
  cursor: default;
  background-color: #19171c;
  padding: 13.25px 23.55px;
  font-size: 12.51px;
  height: auto;
  gap: 5.89px;
  transition: none;
}

.hiw-badge::before {
  display: none;
}

.hiw-badge:hover {
  color: var(--normal-white-color) !important;
  background-color: #19171c;
}

.hiw-badge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18.4px;
  height: 18.4px;
  flex-shrink: 0;
  color: var(--normal-white-color);
}

.hiw-badge-icon svg {
  width: 100%;
  height: 100%;
}

.hiw-badge-icon--nocode {
  width: 18.95px;
  height: 18.95px;
}

@media (max-width: 640px) {
  .hiw-badges {
    flex-wrap: nowrap;
    gap: 8px;
  }

  /* ۱۰٪ کوچک‌تر از اندازه‌ی پایه (padding: 13.25px 23.55px, font-size: 12.51px) */
  .hiw-badge {
    padding: 11.925px 15px;
    font-size: 11.26px;
  }

  .hiw-badge-icon {
    width: 16.56px;
    height: 16.56px;
  }

  .hiw-badge-icon--nocode {
    width: 17.06px;
    height: 17.06px;
  }
}

.hiw-hero-title {
  margin: 0 auto 24px;
  font-family: pinar, sans-serif;
  font-weight: 900;
  line-height: 1.5;
  font-size: clamp(28px, 4vw, 44px);
  color: var(--font-primary-color);
  text-align: center;
  max-width: 900px;
  transform-origin: center bottom;
}

@media (max-width: 640px) {
  .hiw-hero-title {
    text-align: center;
  }
  .main-title .mask-reveal {
    padding: 40px 0;
    max-width: none;
    font-size: 28px;
  }
}

@media (min-width: 1024px) {
  .hiw-hero-title {
    max-width: none;
    white-space: nowrap;
    font-size: clamp(24px, 2.6vw, 40px);
  }
}

.hiw-hero-title.is-revealed {
  animation: hiw-hero-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* سلکتور سراسری * فونت peyda را مستقیم روی این span‌ها می‌گذارد، پس باید صریح بازنویسی شود */
.hiw-hero-title .word,
.hiw-hero-title .char,
.hiw-hero-title .space {
  font-family: pinar, sans-serif;
  font-weight: 900;
}

/* هر کلمه یکجا می‌شکند، نه بین حروفش */
.hiw-hero-title .word {
  white-space: nowrap;
}

.hiw-hero-title .char {
  display: inline-block;
  opacity: 0;
}

.hiw-hero-title.is-revealed .char {
  animation: hiw-hero-blurin 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.hiw-hero-title .space {
  display: inline-block;
  width: 0.15em;
}

@keyframes hiw-hero-blurin {
  from { opacity: 0; filter: blur(8px); }
  to   { opacity: 1; filter: blur(0); }
}

@keyframes hiw-hero-rise {
  from { transform: translateY(28px) scale(0.94); }
  to   { transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .hiw-hero-title,
  .hiw-hero-title .char {
    animation: none !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }
}

.feature-cards-heading {
  font-family: pinar, sans-serif;
  font-weight: 700;
  font-size: 42px;
  line-height: 1.5;
  color: var(--font-primary-color);
  text-align: right;
  margin: 0 0 40px;
}

.feature-cards-heading.is-revealed {
  opacity: 1;
  transform: none;
}

/* سلکتور سراسری * فونت peyda را مستقیم روی این span‌ها می‌گذارد، پس باید صریح بازنویسی شود */
.feature-cards-heading .fc-word {
  font-family: pinar, sans-serif;
  font-weight: 700;
  color: #a3a3a3;
  transition: color 0.5s ease;
}

.feature-cards-heading .fc-word.is-black {
  color: var(--font-primary-color);
}

@media (max-width: 640px) {
  .feature-cards-heading {
    text-align: right;
    font-weight: 800;
    font-size: 32px;
  }

  .feature-cards-heading .fc-word {
    font-weight: 800;
  }
}

@media (prefers-reduced-motion: reduce) {
  .feature-cards-heading {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.feature-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 28px;
}

.feature-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  border: 1px solid #e1e1e0;
  border-radius: 20px;
  padding: 18px;
}

.feature-card-img {
  width: 100%;
  height: auto;
  border-radius: 22px;
  display: block;
  box-shadow: 0 20px 40px -24px rgba(0, 0, 0, 0.3);
}

.feature-card-title {
  margin: 0 0 10px;
  font-family: 'peyda';
  font-size: 22px;
  font-weight: 700;
  color: var(--font-primary-color);
  line-height: 1.5;
}

.feature-card-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.9;
  color: #6b6b6a;
}

@media (min-width: 768px) {
  .feature-card {
    border: none;
    padding: 0;
  }
}

/* کارت‌های قابلیت‌ها در صفحه‌ی کاربردها: بک‌گراند پس‌زمینه‌ی سکشن خاکستری است،
   بنابراین برخلاف صفحه‌ی اصلی، کارت‌ها همیشه با بورد و بک‌گراند سفید جدا می‌شوند */
.usecases-page .feature-card {
  background: #fff;
  border: 1px solid #ececea;
  border-radius: 20px;
  padding: 18px;
  box-shadow: 0 12px 30px -22px rgba(20, 20, 20, 0.18);
  transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

.usecases-page .feature-card:hover {
  border-color: #dcdcda;
  box-shadow: 0 18px 40px -20px rgba(20, 20, 20, 0.22);
  transform: translateY(-3px);
}

.usecases-page .feature-card-img {
  box-shadow: none;
}

@media (min-width: 768px) {
  .usecases-page .feature-card {
    border: 1px solid #ececea;
    padding: 20px;
  }
}

/* در صفحه‌ی کاربردها تیتر بخش وسط‌چین است (نه با حاشیه‌ی نامتقارن مثل صفحه‌ی
   اصلی)، پس گرید کارت‌ها هم باید عرض کامل کانتینر را بگیرد تا کارت‌ها باریک نشوند.
   حاشیه‌ی کناری کانتینر هم برای همین بخش کمتر می‌شود تا کارت‌ها عریض‌تر دیده شوند */
@media (min-width: 1024px) {
  .usecases-page .feature-cards-grid {
    width: 100%;
    margin: 0;
  }

  .usecases-page .feature-cards.container {
    padding-left: 60px;
    padding-right: 60px;
  }

  /* تیتر هم باید با همین لبه‌ی راست عریض‌تر هم‌تراز شود، نه حاشیه‌ی ۴٪ صفحه‌ی اصلی */
  .usecases-page .feature-cards-heading {
    margin-right: 0;
  }
}

/* در نمایشگرهای دسکتاپ کارت‌ها همراه با عنوان و پاراگراف ۸٪ کوچک‌تر می‌شوند */
@media (min-width: 1024px) {
  /* هم‌راستا با لبه‌ی راست خودِ گرید (که ۹۲٪ عرض و وسط‌چین است)، نه لبه‌ی
     راست کل کانتینر — وگرنه تیتر از راست‌ترین کارت جلوتر می‌زد. margin-right
     همون ۴٪ حاشیه‌ی گرید رو تکرار می‌کند، اما چون عرض تیتر با max-width
     محدود شده (برای شکستن به ۲ خط)، دیگر نمی‌شود مثل گرید از margin:auto
     برای وسط‌چین‌کردن استفاده کرد — چون آن وقت لبه‌ی راستش با گرید یکی نمی‌ماند */
  .feature-cards-heading {
    max-width: 620px;
    margin-top: 20px;
    margin-left: auto;
    margin-right: 4%;
    margin-bottom: 50px;
    font-weight: 800;
    line-height: 1.65;
  }

  .feature-cards-heading .fc-word {
    font-weight: 800;
  }

  .feature-cards-grid {
    width: 92%;
    margin: 0 auto;
  }

  .feature-card-title {
    font-size: 20.2px;
  }

  .feature-card-text {
    font-size: 16px;
  }
}

/* ========== چگونه کار می‌کند (How It Works) ========== */
.hiw-section { padding: 80px 80px; width: 100%; background-color: #fafafa; }
.hiw-wrap { max-width: 1200px; margin: 0 auto; }
.hiw-eyebrow { display: inline-block; font-size: 15px; font-weight: 500; color: #8a8a86; letter-spacing: 0.02em; margin-bottom: 16px; }
.hiw-title { font-size: 44px; font-weight: 600; color: #1c1c1c; margin: 72px 0 0 0; line-height: 1.3; }
.hiw-header { margin-bottom: 72px; }
.hiw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; align-items: stretch; }

@media (min-width: 1024px) {
  .hiw-grid { max-width: 960px; margin: 0 auto; gap: 110px; }
}
.hiw-steps { display: flex; flex-direction: column; order: 1; padding-top: 50px; box-sizing: border-box; }
.hiw-steps-title { font-family: "pinar"; font-size: 30px; font-weight: 800; color: #141414; margin: 0 0 18px; }
.hiw-step { position: relative; border: none; border-radius: 0; padding: 24px 34px 24px 28px; margin-top: 11px; }
.hiw-step::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 2px; border-radius: 2px; background: #d8d6d0; }
.hiw-step::after { content: ''; position: absolute; top: 0; right: 0; width: 2px; height: 0; border-radius: 2px; background: #bd158c; transition: height 5s linear; }
.hiw-step.reset::after { transition: none; height: 0; }
.hiw-step.filling::after { height: 100%; }
.hiw-step-btn { all: unset; cursor: pointer; display: flex; align-items: center; gap: 10px; width: 100%; }
.hiw-step-btn:hover { opacity: 0.75; }
.hiw-num { font-family: geist, sans-serif; font-size: 20px; font-weight: 500; color: #b8b6b0; min-width: 32px; }
.hiw-step.active .hiw-num { color: #bd158c; }
.hiw-step-title { font-size: 22px; font-weight: 800; color: #a8a6a0; line-height: 1.4; flex: 1; transition: color 0.3s ease; }
.hiw-step.active .hiw-step-title { color: #1c1c1c; }
.hiw-arrow { font-size: 20px; color: #a8a6a0; transform: rotate(0deg); transition: transform 0.25s ease; }
.hiw-step.active .hiw-arrow { transform: rotate(-90deg); }
.hiw-panel { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 0.8s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease; }
.hiw-panel-inner { overflow: hidden; min-height: 0; }
.hiw-step.active .hiw-panel { grid-template-rows: 1fr; opacity: 1; transition: grid-template-rows 0.8s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.65s ease; }
.hiw-desc { font-size: 17px; line-height: 1.9; color: #5c5c58; margin: 16px 0 0 0; max-width: 520px; }
.hiw-image-wrap { position: relative; width: auto; height: 575px; aspect-ratio: 400/482; border-radius: 16px; overflow: hidden; background: url("../img/bg (1).png") center/cover no-repeat; order: 2; margin-left: auto; top: -20px; }
.hiw-image-wrap img { position: absolute; inset: 0; margin: auto; width: 84%; height: auto; max-height: 88%; object-fit: contain; border-radius: 10px; opacity: 0; transform: scale(0.94) translateY(14px); filter: drop-shadow(0 24px 46px rgba(20, 20, 20, 0.28)); transition: opacity 0.6s cubic-bezier(.22,1,.36,1), transform 0.6s cubic-bezier(.22,1,.36,1); pointer-events: none; }
.hiw-image-wrap img.active { opacity: 1; transform: scale(1) translateY(0); }
.hiw-mobile-img { display: none; }
@media (max-width: 860px) {
  .hiw-section { padding: 64px 24px; }
  .hiw-header { margin-bottom: 40px; }
  .hiw-title { font-size: 30px; }
  .hiw-grid { display: flex; flex-direction: column; gap: 20px; }
  .hiw-steps { padding-top: 0; }
  .hiw-image-wrap { display: none; }
  .hiw-mobile-img { display: block; position: relative; width: 100%; aspect-ratio: 400/482; border-radius: 14px; overflow: hidden; background: url("../img/bg (1).png") center/cover no-repeat; margin: 0 0 4px; }
  .hiw-mobile-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .hiw-step { border: 1px solid #e9e7e1 !important; border-radius: 20px; padding: 16px; }
  /* در موبایل خط عمودی کنار باکس حذف و به‌جاش یک نوار افقی بعد از پاراگراف
     توضیحات و قبل از عکس هر باکس قرار می‌گیره (پاراگراف بالای این خط می‌آید) */
  .hiw-step::before, .hiw-step::after { display: none; }
  .hiw-desc { position: relative; padding-bottom: 18px; margin: 16px 0 16px; }
  .hiw-desc::before {
    content: '';
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    height: 2px;
    border-radius: 2px;
    background: #d8d6d0;
  }
  .hiw-desc::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    border-radius: 2px;
    background: #bd158c;
    transition: width 5s linear;
  }
  .hiw-step.reset .hiw-desc::after { transition: none; width: 0; }
  .hiw-step.filling .hiw-desc::after { width: 100%; }
  .hiw-arrow { display: none; }
}

@media (max-width: 640px) {
  .hiw-steps-title { display: none; }
}

/* ========== قیمت‌گذاری ========== */
body.pricing-page { background-color: #fafafa; }
.pricing-section { padding: 190px 15px 64px; background-color: #fafafa; }

@media (max-width: 900px) {
  .pricing-section { padding-top: 130px; }
}

/* رو home.html این سکشن بلافاصله بعد از یک سکشن دیگه میاد (نه بالای صفحه
   زیر هدر مثل pricing.html)، پس فاصله‌ی بالاش باید کمتر باشه؛ چون کلاس
   .pricing-section مشترکه، فقط با body:not(.pricing-page) مخصوص همین صفحه می‌کنیم */
@media (min-width: 901px) {
  body:not(.pricing-page) .pricing-section {
    padding-top: 40px;
  }
}
@media (max-width: 900px) {
  body:not(.pricing-page) .pricing-section {
    padding-top: 50px;
  }
}
.pricing-inner {
  max-width: 1188px;
  margin: 0 auto;
}
.pricing-title {
  font-family: "pinar";
  font-size: 44px;
  font-weight: 900;
  color: var(--font-primary-color, #1c1c1c);
  text-align: center;
  margin: 0;
}
.pricing-subtitle {
  font-family: "peyda";
  font-size: 24px;
  font-weight: 700;
  color: #3b3b3b;
  text-align: center;
  max-width: 640px;
  margin: 16px auto 32px;
  line-height: 1.9;
}

@media (max-width: 600px) {
  /* روی موبایل تیتر ۴۲px و زیرتیتر ۲۴px خیلی سنگین و نامتناسب با عرض صفحه
     بودند؛ هم‌سو با مقیاس تایپوگرافی هیروی بقیه‌ی صفحات (مثل .hero-typed و
     .hero p) کوچک‌تر و سبک‌تر شدند تا حرفه‌ای‌تر و متعادل‌تر دیده شوند */
  .pricing-title {
    font-size: 30px;
    line-height: 1.35;
  }
  .pricing-subtitle {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.8;
    margin: 12px auto 28px;
  }
}
.pricing-toggle-row {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
}
.pricing-toggle-group {
  display: flex;
  align-items: center;
  gap: 12px;
}
.pricing-discount-note {
  font-family: "peyda";
  font-size: 14px;
  font-weight: 600;
  color: #0077ff;
  white-space: nowrap;
}
@media (min-width: 901px) {
  .pricing-discount-note { font-size: 18px; }
}
.pricing-discount-percent {
  font-family: geist, sans-serif;
}
.pricing-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  background-color: #f0f0f0;
  border-radius: 999px;
}
.pricing-toggle-pill {
  position: absolute;
  top: 4px;
  left: 4px;
  height: calc(100% - 8px);
  width: 0;
  background-color: #ffffff;
  border-radius: 999px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.pricing-toggle-btn {
  position: relative;
  z-index: 1;
  border: none;
  background: transparent;
  padding: 8px 18px;
  border-radius: 999px;
  font-family: "peyda";
  font-size: 16px;
  font-weight: 600;
  color: #8a8880;
  cursor: pointer;
  transition: color 0.2s ease;
}
.pricing-toggle-btn.is-active {
  color: #141414;
}
.pricing-grid {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 24px;
}
.pricing-box {
  position: relative;
  width: 380px;
  min-height: 550px;
  background-color: #ffffff;
  border: 2px solid #f6f5f4;
  border-radius: 20px;
  padding: 24px;
  direction: rtl;
  display: flex;
  flex-direction: column;
}
.pricing-header {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: right;
}
.pricing-header-top {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}
.pricing-badge {
  margin-left: 0;
  margin-right: auto;
  background: linear-gradient(135deg, #ff6f61, #ff2ea6);
  color: #ffffff;
  font-family: "peyda";
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
  white-space: nowrap;
  cursor: default;
  pointer-events: none;
  user-select: none;
}
.pricing-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
}
.pricing-icon svg {
  width: 42px;
  height: 42px;
}
.pricing-plan-name {
  font-family: "pinar";
  font-size: 24px;
  font-weight: 700;
  color: var(--font-primary-color, #1c1c1c);
}
@media (min-width: 901px) {
  .pricing-plan-name { font-size: 28px; font-weight: 700; font-family: "pinar"; }
}
.pricing-price-mask {
  margin-top: 10px;
  height: 36px;
  overflow: hidden;
}
.pricing-price-track {
  display: flex;
  flex-direction: column;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.pricing-section.is-yearly .pricing-price-track {
  transform: translateY(-36px);
}
.pricing-price-row {
  height: 36px;
  flex-shrink: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.pricing-price {
  font-family: geist, sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: var(--font-primary-color, #1c1c1c);
}
.pricing-price-unit {
  font-family: "peyda";
  font-size: 14px;
  font-weight: 400;
  color: #8a8880;
}
.pricing-desc {
  margin: 14px 0 0;
  font-family: "peyda";
  font-size: clamp(14px, 0.6vw + 12.5px, 16px);
  font-weight: 600;
  line-height: 1.9;
  text-align: right;
  color: #6b6a64;
}
.pricing-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  margin-top: 20px;
  width: 100%;
  height: 50px;
  border: none;
  border-radius: 999px;
  background-color: #19171c;
  color: #ffffff;
  font-family: "peyda";
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transform: scale(1);
  box-sizing: border-box;
}
.pricing-cta:hover {
  animation: about-audience-btn-pop 0.45s var(--ease-smooth) forwards;
}
.pricing-cta.is-leaving {
  animation: about-audience-btn-unpop 0.4s var(--ease-smooth) forwards;
}
.pricing-features {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pricing-features li {
  position: relative;
  padding-right: 24px;
  font-family: "peyda";
  font-size: clamp(14px, 0.6vw + 12.5px, 16px);
  font-weight: 600;
  line-height: 1.6;
  text-align: right;
  color: #3c3c3a;
}
.pricing-features li::before {
  content: "";
  position: absolute;
  top: 8px;
  right: 4px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #141414;
}
.pricing-features-title {
  margin: 24px 0 0;
  font-family: "peyda";
  font-size: clamp(15px, 0.35vw + 14px, 16px);
  font-weight: 700;
  text-align: right;
  color: var(--font-primary-color, #1c1c1c);
}
.pricing-features-title + .pricing-features {
  margin-top: 14px;
}
@media (max-width: 1280px) {
  .pricing-box { width: 100%; max-width: 380px; }
}

/* ========== مقایسه تفصیلی امکانات ========== */
.compare-wrap {
  max-width: 1000px;
  margin: 0 auto;
  padding: 8px 40px 16px;
}
.compare-scroll {
  overflow-x: auto;
}
.compare-grid {
  direction: rtl;
  min-width: 640px;
}
.compare-row {
  display: grid;
  grid-template-columns: 1fr repeat(3, 140px);
  align-items: center;
  gap: 8px;
  padding: 26px 8px;
  border-bottom: 1px solid rgba(20, 20, 20, 0.08);
}
.compare-row-last {
  border-bottom: none;
}
.compare-row-head {
  padding-top: 40px;
  padding-bottom: 24px;
}
.compare-cell {
  display: flex;
  align-items: center;
  justify-content: center;
}
.compare-cell-title {
  justify-content: flex-start;
  font-family: "pinar";
  font-size: 40px;
  font-weight: 800;
  color: var(--font-primary-color, #1c1c1c);
}
.compare-cell-plan {
  font-family: "peyda";
  font-size: 18px;
  font-weight: 700;
  color: var(--font-primary-color, #1c1c1c);
}
.compare-cell-plan.is-muted {
  color: var(--font-primary-color, #1c1c1c);
}
.compare-cell-feature {
  justify-content: flex-start;
  font-family: "peyda";
  font-size: 16px;
  font-weight: 600;
  color: var(--font-primary-color, #1c1c1c);
  text-align: right;
}
.compare-check {
  width: 22px;
  height: 22px;
  color: #141414;
}
.compare-cell.is-muted .compare-check {
  color: #141414;
}
.compare-cell-dash {
  color: #c7c6c1;
  font-size: 18px;
}
.compare-cell-value {
  font-family: "peyda";
  font-size: 15px;
  font-weight: 600;
  color: var(--font-primary-color, #1c1c1c);
}
.compare-cell-value.is-muted {
  color: var(--font-primary-color, #1c1c1c);
  font-weight: 600;
}
.compare-row-group {
  padding: 40px 8px 16px;
  border-bottom: none;
  align-items: baseline;
}
.compare-row-group:first-of-type {
  padding-top: 8px;
}
.compare-cell-group {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-family: "pinar";
  font-size: 28px;
  font-weight: 800;
  color: var(--font-primary-color, #1c1c1c);
}
/* ---- نسخه موبایل: سوییچر تب ---- */
.compare-mobile { display: none; }
.compare-tab-input { position: absolute; opacity: 0; pointer-events: none; }
.compare-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  background-color: #f0f0f0;
  border-radius: 999px;
}
.compare-tab-btn {
  flex: 1;
  text-align: center;
  padding: 10px 12px;
  border-radius: 999px;
  font-family: "peyda";
  font-size: 14px;
  font-weight: 600;
  color: #8a8880;
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease;
}
#compare-tab-paye:checked ~ .compare-tabs label[for="compare-tab-paye"],
#compare-tab-herfei:checked ~ .compare-tabs label[for="compare-tab-herfei"],
#compare-tab-sazmani:checked ~ .compare-tabs label[for="compare-tab-sazmani"] {
  background-color: #ffffff;
  color: #141414;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}
.compare-panel { display: none; }
#compare-tab-paye:checked ~ .compare-panel-paye,
#compare-tab-herfei:checked ~ .compare-panel-herfei,
#compare-tab-sazmani:checked ~ .compare-panel-sazmani {
  display: block;
}
.compare-group { margin-top: 32px; }
.compare-group:first-of-type { margin-top: 24px; }
.compare-group-title {
  margin: 0 0 8px;
  font-family: "pinar";
  font-size: 20px;
  font-weight: 800;
  color: var(--font-primary-color, #1c1c1c);
}
.compare-list { margin: 0; padding: 0; list-style: none; }
.compare-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(20, 20, 20, 0.08);
}
.compare-list li:last-child { border-bottom: none; }
.ci-name {
  font-family: "peyda";
  font-size: 15px;
  font-weight: 500;
  color: var(--font-primary-color, #1c1c1c);
}
.ci-val {
  flex-shrink: 0;
  font-family: "peyda";
  font-size: 14px;
  font-weight: 600;
  color: var(--font-primary-color, #1c1c1c);
  display: flex;
  align-items: center;
}
.ci-val .compare-check { width: 20px; height: 20px; color: #141414; }
.ci-val.ci-dash { color: #c7c6c1; font-size: 18px; }

@media (max-width: 720px) {
  .compare-wrap { padding: 8px 20px 16px; border-radius: 20px; }
  .compare-row { grid-template-columns: 1fr repeat(3, 96px); padding: 20px 4px; }
  .compare-cell-title { font-size: 28px; }
  .compare-cell-group { font-size: 20px; }
  .compare-cell-plan { font-size: 14px; }
  .compare-cell-feature { font-size: 14px; }
  .compare-scroll { display: none; }
  .compare-mobile { display: block; }
}

/* ========== سوالات متداول (FAQ) ========== */
/* z-index: 0 عمداً اضافه شده تا این سکشن خودش یک stacking context مستقل بسازد؛
   بدون آن، ::before با z-index منفی از این سکشن خارج می‌شود و به‌جای پشت محتوا
   قرار گرفتن، پشت کل صفحه می‌رود و اصلاً دیده نمی‌شود */
.faq-section { position: relative; z-index: 0; max-width: 880px; margin: 0 auto; padding: 165px 24px 100px; }

/* پس‌زمینه‌ی خاکستری این سکشن باید تمام عرض صفحه را بگیرد، نه فقط عرض محدود ۸۸۰px محتوا */
.faq-section::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  background-color: #fafafa;
  z-index: -1;
}
.faq-badge { display: block; width: fit-content; margin: 0 auto 16px; padding: 8px 20px; border-radius: 999px; background-color: #f2f1f3; color: #141414; font-family: geist, sans-serif; font-size: 14px; font-weight: 600; }
.faq-title { font-family: "pinar"; font-size: 38px; font-weight: 800; text-align: center; color: #141414; margin: 0 0 44px; }
/* سربرگ سوالات متداول: تصویر سمت چپ، خارج از جریان چیدمان تا ارتفاع بخش تغییر نکند */
.faq-head { position: relative; }
.faq-illustration { position: absolute; left: calc(50% - 50vw + 130px); top: 50%; transform: translateY(calc(-50% - 130px)) rotate(-5deg); box-sizing: content-box; width: 297px; height: auto; padding-top: 40px; pointer-events: none; }
@media (max-width: 1024px) {
  .faq-illustration { left: calc(50% - 50vw + 40px); width: 207px; padding-top: 28px; }
}
.faq-list { border-top: 1px solid #e5e3dd; }
.faq-item { border-bottom: 1px solid #e5e3dd; }
.faq-question { all: unset; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; padding: 24px 8px; cursor: pointer; text-align: right; font-family: inherit; font-size: 18px; font-weight: 600; line-height: 1.6; color: #1c1c1c; }
.faq-question span:first-child { display: flex; align-items: center; }
.faq-icon { align-self: center; }
.faq-icon { position: relative; flex: 0 0 22px; width: 22px; height: 22px; transition: transform 0.35s ease; }
.faq-icon::before, .faq-icon::after { content: ''; position: absolute; top: 50%; left: 50%; background: #1c1c1c; transform: translate(-50%, -50%); }
.faq-icon::before { width: 17px; height: 2.5px; }
.faq-icon::after { width: 2.5px; height: 17px; }
.faq-item.is-open .faq-icon { transform: rotate(45deg); }
.faq-answer { display: grid; grid-template-rows: minmax(0, 0fr); opacity: 0; transition: grid-template-rows 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease; }
.faq-item.is-open .faq-answer { grid-template-rows: minmax(0, 1fr); opacity: 1; }
.faq-answer p { margin: 0; padding: 0 8px 24px; font-size: 16px; line-height: 1.9; color: #5c5c58; text-align: right; max-width: 760px; min-height: 0; overflow: hidden; }
@media (max-width: 640px) {
  .faq-section { padding: 42px 20px 70px; }
  .faq-head { display: flex; flex-direction: column; align-items: center; }
  .faq-illustration {
    display: block;
    position: static;
    order: -1;
    transform: none;
    width: 180px;
    height: auto;
    padding-top: 0;
    margin: 0 auto 20px;
  }
  .faq-badge { order: 0; }
  .faq-title { order: 1; font-size: 28px; margin-bottom: 30px; }
  .faq-list { width: 80%; margin: 0 auto; }
  .faq-question { font-size: 17px; padding: 22px 4px; }
  .faq-icon { flex-basis: 16px; width: 16px; height: 16px; }
  .faq-icon::before { width: 12px; height: 1.8px; }
  .faq-icon::after { height: 12px; width: 1.8px; }
  .faq-answer p { font-size: 15px; padding: 0 4px 22px; }
}

/* ========== فوتر ========== */
.site-footer {
  position: relative;
  overflow: hidden;
  background-color: #151517;
  padding: 90px 24px 30px;
}

.site-footer::before {
  content: "";
  position: absolute;
  inset: -20%;
  background: linear-gradient(
    200deg,
    transparent 0%,
    transparent 64%,
    rgba(202, 133, 219, 0.65) 70%,
    rgba(221, 90, 140, 0.8) 78%,
    rgba(206, 182, 177, 0.75) 100%
  );
  filter: blur(15px);
  pointer-events: none;
  z-index: 0;
  animation: footerGlowDrift 10s ease-in-out infinite alternate;
}

@keyframes footerGlowDrift {
  0% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(-8%, -10%) scale(1.3);
  }
  100% {
    transform: translate(5%, 4%) scale(0.86);
  }
}

.site-footer > * {
  position: relative;
  z-index: 1;
}

.footer-inner {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.footer-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  width: 92%;
  margin-left: auto;
  margin-right: auto;
  text-align: right;
}

.footer-cta-logo {
  display: block;
  align-self: center;
  width: 180px;
  max-width: 60%;
  height: auto;
  fill: #ffffff;
}

.footer-cta-desc {
  align-self: center;
  margin: 0;
  max-width: 480px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 15px;
  line-height: 1.8;
  text-align: center;
}

.footer-cta-divider {
  width: 85vw;
  max-width: 85vw;
  height: 1px;
  margin: 20px auto 0;
  background-color: #ffffff24;
}

.footer-cta-btn {
  margin-top: 6px;
  width: 100%;
  height: 54px;
  border: none;
  border-radius: 14px;
  font-size: 15px;
  transition: none;
}

.footer-cta-btn::before {
  display: none;
}

.footer-cta-btn:hover {
  color: var(--font-primary-color);
}

.footer-top {
  display: flex;
  direction: ltr;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 92%;
  margin-left: auto;
  margin-right: auto;
  gap: 48px;
}

.footer-logo {
  display: block;
  align-self: flex-end;
  flex: 0 1 380px;
  width: 380px;
  max-width: 380px;
  height: auto;
  fill: #ffffff;
}

.footer-links {
  display: flex;
  direction: rtl;
  align-items: flex-start;
  flex: 0 1 auto;
  gap: 80px;
  margin-right: 90px;
}

.footer-links-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  text-align: right;
}

.footer-links-col a {
  color: rgba(255, 255, 255, 0.55);
  font-size: 14px;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-links-col a:hover {
  color: #ffffff;
}

.footer-accordion {
  width: 100%;
}

.footer-accordion-checkbox {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.footer-accordion-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 0;
  padding: 0;
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  text-align: right;
  cursor: pointer;
}

.footer-accordion-icon svg {
  display: block;
  width: 16px;
  height: 16px;
  color: rgba(255, 255, 255, 0.6);
  transition: transform 0.25s ease;
}

.footer-accordion-panel-inner {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.footer-accordion-divider {
  display: none;
}

@media (min-width: 641px) {
  .footer-accordion-toggle {
    pointer-events: none;
    cursor: default;
    font-size: 16px;
  }

  .footer-accordion-icon {
    display: none;
  }
}

@media (max-width: 640px) {
  .footer-accordion-divider {
    display: block;
    width: 100%;
    height: 1px;
    background-color: #ffffff1f;
  }

  .footer-accordion-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease;
  }

  .footer-accordion-panel-inner {
    min-height: 0;
    overflow: hidden;
  }

  .footer-accordion-checkbox:checked ~ .footer-accordion-panel {
    grid-template-rows: 1fr;
  }

  .footer-accordion-checkbox:checked ~ .footer-accordion-panel .footer-accordion-panel-inner {
    padding-top: 14px;
  }

  .footer-accordion-checkbox:checked ~ .footer-accordion-toggle .footer-accordion-icon svg {
    transform: rotate(180deg);
  }
}

.footer-plus-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 92%;
  margin-left: auto;
  margin-right: auto;
}

.footer-plus {
  color: #ffffff;
  font-size: 30px;
  font-weight: 300;
  line-height: 1;
}

.footer-divider {
  align-self: center;
  width: 50vw;
  max-width: 100%;
  height: 1px;
  margin-top: 60px;
  background-color: #ffffff14;
}

.footer-brand-block {
  display: flex;
  flex-direction: column;
  align-self: flex-start;
  gap: 16px;
  width: 186px;
}

.footer-brand-icons {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.footer-brand-desc {
  margin: 0;
  width: 100%;
  color: rgba(255, 255, 255, 0.55);
  font-size: 15px;
  line-height: 1.8;
  text-align: right;
}

.footer-divider-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 10px;
  background-color: rgb(253, 253, 254);
}

.footer-divider-badge img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.footer-divider-mono-logo {
  width: 120px;
  height: 52px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.footer-copyright {
  align-self: center;
  margin-top: 17px;
  margin-bottom: 30px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 15px;
  text-align: center;
}

@media (min-width: 641px) {
  .site-footer .footer-logo,
  .site-footer .footer-plus-row,
  .site-footer .footer-cta,
  .site-footer .footer-cta-divider {
    display: none;
  }

  .footer-top {
    justify-content: flex-end;
    gap: 200px;
  }

  .footer-brand-block {
    order: 2;
  }

  .footer-links {
    order: 1;
    margin-right: 0;
  }

  .footer-divider {
    align-self: flex-start;
    width: 65vw;
    max-width: 65vw;
    margin-right: 4%;
    margin-top: 5px;
  }

  .footer-copyright {
    align-self: flex-start;
    margin-right: 4%;
    text-align: right;
  }

  .site-footer {
    padding-top: 100px;
    padding-bottom: 15px;
  }
}

@media (max-width: 640px) {
  .site-footer { padding: 64px 20px 32px; }
  .footer-inner { gap: 40px; }
  .footer-top { flex-direction: column; gap: 32px; }
  .footer-logo { align-self: stretch; width: 100%; max-width: 100%; }
  .footer-links { width: 100%; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 20px; margin-right: 0; }
  .footer-accordion-toggle { font-size: 18px; }
  .footer-links-col a { font-size: 16px; }
  .footer-divider { display: none; }
  .footer-plus-row { display: none; }
  .footer-brand-block { display: none; }

  .site-footer::before {
    animation: none;
    transform: none;
  }
}

/* ========== نوار اسکرول سفارشی ========== */
.custom-scrollbar-track {
  position: fixed;
  top: 37.5%;
  height: 25%;
  right: 8px;
  width: 6px;
  border-radius: 999px;
  background-color: rgba(120, 120, 130, 0);
  z-index: 9999;
  pointer-events: none;
  transition: background-color 0.35s ease;
}

.custom-scrollbar-track.is-visible {
  background-color: rgba(120, 120, 130, 0.45);
  pointer-events: auto;
}

.custom-scrollbar-thumb {
  /* fixed مستقیم روی خودِ thumb (نه داخل یک والدِ fixed) تا mix-blend-mode
     با محتوای واقعی صفحه ترکیب بشه، نه فقط با پس‌زمینه‌ی یک container والد */
  position: fixed;
  right: 8px;
  width: 6px;
  border-radius: 999px;
  background-color: #ffffff;
  mix-blend-mode: difference;
  opacity: 0;
  z-index: 9999;
  pointer-events: none;
  cursor: grab;
  transition: width 0.2s ease, right 0.2s ease, opacity 0.35s ease;
}

.custom-scrollbar-thumb.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.custom-scrollbar-thumb.is-dragging {
  width: 8px;
  right: 7px;
}

/* وقتی منوی تمام‌صفحه‌ی موبایل باز است، نوار اسکرول سفارشی (z-index: 9999،
   بالاتر حتی از خودِ هدر) نباید روی پنل دیده شود؛ چون این دو المنت قبل از
   هدر در DOM قرار دارند، سلکتور هم‌خواهریِ .site-header روی آن‌ها کار
   نمی‌کند، پس به‌جایش کلاس mobile-menu-open روی body (در main.js) استفاده
   شده است */
body.mobile-menu-open .custom-scrollbar-track,
body.mobile-menu-open .custom-scrollbar-thumb {
  opacity: 0 !important;
  pointer-events: none !important;
}

@media (max-width: 640px) {
  .custom-scrollbar-track,
  .custom-scrollbar-thumb { display: none; }
}

/* ==========================================
================ کاربردها (هیرو) =============
========================================== */
body.usecases-page { background-color: var(--background-color); }

.uc-hero { padding: 150px 0 80px; }

.uc-hero-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 56px;
}

.uc-hero-content {
  flex: 0 1 520px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: right;
}

.uc-hero-title {
  font-family: "pinar";
  font-size: 38px;
  font-weight: 900;
  line-height: 1.7;
  letter-spacing: -0.01em;
  color: var(--font-primary-color);
  margin-bottom: 22px;
}

.uc-hero-desc {
  font-weight: 600;
  line-height: 1.9;
  font-size: 15px;
  color: var(--muted-color);
  max-width: 440px;
  margin-bottom: 14px;
}

@media (min-width: 901px) {
  .uc-hero-desc { font-size: 18px; }
  .uc-hero-content { margin-top: 20px; }
  .uc-hero-inner { margin-top: 10px; }
  .uc-hero { padding-bottom: 50px; }
}

.uc-hero-actions {
  display: flex;
  position: relative;
  width: fit-content;
}

.uc-hero-actions .btn {
  position: relative;
  z-index: 1;
  border-radius: 10px;
  background-color: #19171c;
}

.uc-hero-actions .btn::before {
  display: none;
}

.uc-hero-actions .btn:hover {
  color: var(--normal-white-color) !important;
}

.uc-hero-actions::after {
  content: '';
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  right: 0;
  bottom: -6px;
  border-radius: 10px;
  background: linear-gradient(90deg, #ff9735, #ff6fc8, #fb79ff);
}

.uc-hero-media {
  flex: 1 1 440px;
  max-width: 480px;
}

@media (min-width: 901px) {
  .uc-hero-media {
    position: relative;
    right: 30px;
    top: -30px;
  }
}

.uc-hero-media svg,
.uc-hero-media img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 900px) {
  .uc-hero { padding: 130px 0 60px; }

  .uc-hero-inner {
    flex-direction: column;
    gap: 40px;
  }

  .uc-hero-content {
    flex: none;
    align-items: center;
    text-align: center;
  }

  .uc-hero-desc { margin-left: auto; margin-right: auto; }

  .uc-hero-title { font-size: 2.1rem; }

  .uc-hero-media { flex: none; width: 100%; max-width: 380px; }
}

@media (max-width: 480px) {
  .uc-hero-title { font-size: 1.7rem; }
}

/* ========== کارت‌های کاربردها ========== */
.uc-features { padding: 20px 0 100px; }

.uc-features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.uc-feature-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: right;
  gap: 14px;
  padding: 24px;
  border-radius: 18px;
  background-color: var(--normal-secondary-color);
}

.uc-feature-head {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}

@media (min-width: 561px) {
  .uc-feature-head {
    flex-direction: column;
    align-items: flex-start;
  }
}

.uc-feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.uc-feature-icon svg {
  width: 46px;
  height: 46px;
  filter: saturate(1.35) drop-shadow(0 2px 5px rgba(17, 17, 17, 0.12));
}

.uc-feature-title {
  font-family: "pinar";
  font-size: 18px;
  font-weight: 800;
  color: var(--font-primary-color);
}

.uc-feature-text {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.9;
  text-align: justify;
  color: var(--muted-color);
}

@media (max-width: 900px) {
  .uc-features-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .uc-features-grid { grid-template-columns: 1fr; }
}

/* ========== چالش پراکندگی ابزارها ========== */
.uc-painpoints { padding: 20px 0 100px; }

@media (min-width: 901px) {
  .usecases-page .container { padding-left: 130px; padding-right: 130px; }
}

.uc-pp-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 40px;
}

.uc-pp-copy {
  flex: 1 1 auto;
  text-align: right;
}

.uc-pp-badge {
  display: inline-flex;
  padding: 5px 16px;
  margin-bottom: 16px;
  border-radius: 999px;
  font-family: "pinar";
  font-size: 12px;
  font-weight: 800;
  color: #ffffff;
  background: linear-gradient(90deg, #cd81ff, #ff974c);
}

.uc-pp-title {
  font-family: "pinar";
  font-size: 2.1rem;
  font-weight: 900;
  line-height: 1.7;
  letter-spacing: -0.01em;
  color: var(--font-primary-color);
  margin-bottom: 16px;
}

.uc-pp-desc strong {
  font-weight: 800;
  color: var(--font-primary-color);
}

.uc-pp-desc {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.9;
  color: var(--muted-color);
  max-width: 560px;
  margin-left: auto;
}

.uc-pp-media {
  flex: 0 0 auto;
  width: 218px;
}

.uc-pp-media svg,
.uc-pp-media img {
  display: block;
  width: 100%;
  height: auto;
}

.uc-pp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.uc-pp-card {
  text-align: right;
  padding: 24px;
  border-radius: 18px;
  background-color: var(--normal-secondary-color);
}

.uc-pp-card-title {
  font-family: "pinar";
  font-size: 18px;
  font-weight: 800;
  color: var(--font-primary-color);
  margin-bottom: 10px;
}

.uc-pp-card-text {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.9;
  color: var(--muted-color);
}

@media (max-width: 900px) {
  .uc-pp-head { flex-direction: column-reverse; align-items: center; gap: 24px; }
  .uc-pp-copy { text-align: center; align-self: stretch; }
  .uc-pp-desc { margin-right: auto; margin-left: auto; }
  .uc-pp-title { font-size: 1.6rem; }
  .uc-pp-media { width: 169px; }
  .uc-pp-grid { grid-template-columns: 1fr; }
}

/* ========== صندوق واحد (بخش تیره) ========== */
.uc-dark {
  background-color: #151517;
  padding: 90px 0;
}


.uc-dark-grid {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 56px;
}

.uc-dark-primary {
  flex: 1 1 460px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: right;
}

.uc-dark-badge {
  display: inline-flex;
  padding: 5.25px 16.8px;
  margin-bottom: 20px;
  border-radius: 999px;
  font-family: "pinar";
  font-size: 12.6px;
  font-weight: 800;
  color: #ffffff;
  background: linear-gradient(90deg, #cd81ff, #ff974c);
}

.uc-dark-title {
  font-family: "pinar";
  font-size: 2.2rem;
  font-weight: 900;
  line-height: 1.65;
  letter-spacing: -0.01em;
  color: #ffffff;
  margin-bottom: 28px;
}

.uc-dark-btn { flex-shrink: 0; }

.uc-dark-secondary {
  flex: 1 1 420px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: right;
}

.uc-dark-desc {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.7;
  color: #c2c2c2;
  margin-bottom: 30px;
}

.uc-dark-checklist {
  display: flex;
  flex-direction: column;
  gap: 17px;
}

.uc-dark-checklist li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.9;
  color: #c7c7cc;
}

.uc-dark-checklist li strong {
  color: #ffffff;
  font-weight: 800;
}

.uc-check-icon {
  flex-shrink: 0;
  width: 21px;
  height: 21px;
  margin-top: 1px;
  color: #bc74ff;
}

.uc-check-icon svg {
  width: 100%;
  height: 100%;
}

@media (max-width: 900px) {
  .uc-dark { padding: 70px 0; }
  .uc-dark-grid { flex-direction: column; gap: 36px; }
  .uc-dark-primary { align-items: center; text-align: center; flex: none; width: 100%; }
  .uc-dark-title { font-size: 1.6rem; }
  .uc-dark-secondary { flex: none; width: 100%; text-align: center; }
  .uc-dark-desc { max-width: 480px; margin-left: auto; margin-right: auto; }
  .uc-dark-checklist { align-items: center; }
  .uc-dark-checklist li { text-align: right; }
}

@media (max-width: 640px) {
  .uc-dark-desc { display: none; }
}

/* ========== پاسخ در تمام کانال‌ها ========== */
.uc-channels {
  background-color: #fafafa;
  padding: 80px 0;
}

@media (min-width: 901px) {
  /* فاصله بین دو سکشن اول (دستیار شما / هر پاسخ در یک صفحه) را نصف می‌کند */
  .uc-split.uc-know { padding-bottom: 40px; }
  .uc-channels { padding-top: 40px; }

  /* فاصله بین سکشن دوم و سوم (هر پاسخ در یک صفحه / عملکرد را با عدد ببینید) را 15٪ بیشتر می‌کند */
  .uc-channels { padding-bottom: 92px; }
  .uc-split.uc-analytics { padding-top: 92px; }

  /* متن رنگی (eyebrow) را به تیتر نزدیک‌تر می‌کند */
  .uc-split-eyebrow,
  .uc-channels-eyebrow { margin-bottom: 6px; }

  /* ستون متن سکشن «تمامی مکالمات...» را 20 پیکسل به چپ می‌برد */
  .uc-channels-copy { transform: translateX(-30px); }
}

.uc-channels-grid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 56px;
}

.uc-channels-copy {
  flex: 0 1 440px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: right;
}

.uc-channels-eyebrow {
  display: inline-block;
  margin-bottom: 14px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.02em;
  background: linear-gradient(90deg, #8b5cf6, #ec3f83);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.uc-channels-title {
  font-family: "pinar";
  font-size: 2.4rem;
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--font-primary-color);
  margin-bottom: 20px;
}

.uc-channels-desc {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.9;
  color: var(--muted-color);
  max-width: 420px;
}

.uc-channels-media {
  flex: 0 1 460px;
  width: 460px;
  position: relative;
}

.uc-channels-media::before {
  content: "";
  position: absolute;
  inset: -70px -45px;
  z-index: 0;
  background-image: radial-gradient(circle at 50% 50%, rgba(139, 92, 246, 0.22) 0%, rgba(139, 92, 246, 0.14) 35%, transparent 70%);
  pointer-events: none;
}

.uc-channels-media::after {
  content: "";
  position: absolute;
  inset: -70px -45px;
  z-index: 0;
  border-radius: 50%;
  overflow: hidden;
  background-image: radial-gradient(#999999 1.5px, transparent 1.5px);
  background-size: 10px 10px;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 75%);
  mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 75%);
  pointer-events: none;
}

.uc-unibox-card {
  position: relative;
  z-index: 1;
  background-color: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: 22px;
  padding: 22px;
  box-shadow: 0 20px 45px rgba(17, 17, 17, 0.06);
  opacity: 0;
  transform: translateY(24px) scale(0.96);
  transition: opacity 0.6s var(--ease-smooth), transform 0.6s var(--ease-smooth);
}

.uc-unibox-card.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.uc-unibox-title {
  font-family: "pinar";
  font-size: 20px;
  font-weight: 800;
  color: var(--font-primary-color);
  margin-bottom: 16px;
}

.uc-unibox-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--border-color);
  border-radius: 16px;
  margin-bottom: 12px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s var(--ease-smooth), transform 0.5s var(--ease-smooth);
}

.uc-unibox-card.is-visible .uc-unibox-row {
  opacity: 1;
  transform: translateY(0);
}

.uc-unibox-row:nth-child(2) { transition-delay: 0s; }
.uc-unibox-row:nth-child(3) { transition-delay: 0.15s; }
.uc-unibox-row:nth-child(4) { transition-delay: 0.3s; }

.uc-unibox-row:last-child { margin-bottom: 0; }

.uc-unibox-person {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.uc-unibox-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  font-size: 14px;
  font-weight: 800;
}

.uc-unibox-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.uc-unibox-avatar[data-tone="blue"] { background: #d9e9ff; color: #2f7bf6; }
.uc-unibox-avatar[data-tone="pink"] { background: #fbdbe8; color: #ec3f83; }
.uc-unibox-avatar[data-tone="green"] { background: #d3f7de; color: #1fb35a; }

.uc-unibox-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.uc-unibox-info strong {
  font-size: 15px;
  font-weight: 800;
  color: var(--font-primary-color);
}

.uc-unibox-info span {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.uc-unibox-badge {
  display: inline-flex;
  align-items: center;
  gap: 5.5px;
  flex-shrink: 0;
  padding: 5.5px 11px;
  border: 1.4px solid currentColor;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.35s var(--ease-smooth), transform 0.35s var(--ease-smooth);
}

.uc-unibox-card.is-visible .uc-unibox-badge {
  opacity: 1;
  transform: scale(1);
}

.uc-unibox-row:nth-child(2) .uc-unibox-badge { transition-delay: 0.35s; }
.uc-unibox-row:nth-child(3) .uc-unibox-badge { transition-delay: 0.5s; }
.uc-unibox-row:nth-child(4) .uc-unibox-badge { transition-delay: 0.65s; }

.uc-unibox-badge i {
  width: 5.5px;
  height: 5.5px;
  border-radius: 50%;
}

.uc-unibox-badge[data-channel="email"] { background: #efefef; color: #3a3a3a; }
.uc-unibox-badge[data-channel="email"] i { background: #3a3a3a; }

.uc-unibox-badge[data-channel="telegram"] { background: #d7effa; color: #1590c9; }
.uc-unibox-badge[data-channel="telegram"] i { background: #229ed9; }

.uc-unibox-badge[data-channel="instagram"] { background: #fbdbe8; color: #d6266f; }
.uc-unibox-badge[data-channel="instagram"] i { background: #ec3f83; }

.uc-unibox-badge[data-channel="whatsapp"] { background: #d3f7de; color: #17914f; }
.uc-unibox-badge[data-channel="whatsapp"] i { background: #1fb35a; }

@media (max-width: 900px) {
  .uc-channels { padding: 60px 0; }
  .uc-channels-grid { flex-direction: column; gap: 36px; }
  .uc-channels-copy { align-items: center; text-align: center; flex: none; width: 100%; order: 2; }
  .uc-channels-desc { margin-left: auto; margin-right: auto; }
  .uc-channels-title { font-size: 1.7rem; }
  /* ::before/::after این باکس با inset: -70px -45px عمداً از لبه‌هاش بیرون
     می‌زنند (هاله‌ی نور دکوراتیو)؛ رو دسکتاپ جا برای این بیرون‌زدگی هست، ولی
     رو موبایل باعث اسکرول افقی واقعی کل صفحه می‌شد (چون overflow-x:clip فقط
     رو body است، نه html، و این بیرون‌زدگی تا سطح داکیومنت سرایت می‌کرد و
     هدر/منوی position:fixed را هم جابه‌جا می‌کرد) */
  .uc-channels-media { flex: none; width: 100%; max-width: 420px; order: 1; overflow-x: clip; }
}

@media (max-width: 480px) {
  .uc-unibox-info span { max-width: 120px; }
}

/* ========== سکشن‌های زیگ‌زاگی (عکس/متن) ========== */
.uc-split {
  background-color: #fafafa;
  padding: 80px 0;
}

.uc-split-grid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 56px;
}

.uc-split-copy {
  flex: 0 1 440px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: right;
}

.uc-split-eyebrow {
  display: inline-block;
  margin-bottom: 14px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.02em;
  background: linear-gradient(90deg, #8b5cf6, #ec3f83);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.uc-split-title {
  font-family: "pinar";
  font-size: 2.2rem;
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--font-primary-color);
  margin-bottom: 18px;
}

.uc-split-desc {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.9;
  color: var(--muted-color);
  max-width: 420px;
}

.uc-split-media {
  flex: 0 1 460px;
  width: 460px;
}

.uc-media-placeholder {
  aspect-ratio: 4 / 3;
  border-radius: 22px;
  border: 1.5px dashed var(--border-color);
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--soft-muted-color);
}

.uc-media-placeholder svg {
  width: 42px;
  height: 42px;
}

/* ========== پروفایل مشتری (تصویر سکشن تحلیل و گزارش) ========== */
.uc-lead-mock {
  position: relative;
  width: 100%;
}

.uc-lead-mock::before {
  content: "";
  position: absolute;
  inset: -70px -45px;
  z-index: 0;
  background-image: radial-gradient(circle at 50% 50%, rgba(139, 92, 246, 0.22) 0%, rgba(139, 92, 246, 0.14) 35%, transparent 70%);
  pointer-events: none;
}

.uc-lead-mock::after {
  content: "";
  position: absolute;
  inset: -70px -45px;
  z-index: 0;
  border-radius: 50%;
  overflow: hidden;
  background-image: radial-gradient(#999999 1.5px, transparent 1.5px);
  background-size: 10px 10px;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 75%);
  mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 75%);
  pointer-events: none;
}

.uc-lead-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 400px;
  background-color: #ffffff;
  border-radius: 28px;
  padding: 30px 26px;
  box-shadow: 0 20px 50px rgba(17, 17, 17, 0.08), 0 4px 14px rgba(17, 17, 17, 0.04);
  opacity: 0;
  transform: translateY(24px) scale(0.96);
  transition: opacity 0.6s var(--ease-smooth), transform 0.6s var(--ease-smooth);
}

.uc-lead-mock.is-visible .uc-lead-card {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.uc-lead-title {
  font-family: "pinar";
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--font-primary-color);
  margin-bottom: 22px;
}

.uc-lead-person {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.45s var(--ease-smooth) 0.1s, transform 0.45s var(--ease-smooth) 0.1s;
}

.uc-lead-mock.is-visible .uc-lead-person {
  opacity: 1;
  transform: translateY(0);
}

.uc-lead-avatar {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
}

.uc-lead-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.uc-lead-person-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.uc-lead-person-info strong {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--font-primary-color);
}

.uc-lead-person-info span {
  font-size: 14px;
  font-weight: 600;
  color: var(--muted-color);
}

.uc-lead-rows {
  display: flex;
  flex-direction: column;
  margin-top: 14px;
}

.uc-lead-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border-color);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--font-primary-color);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.45s var(--ease-smooth), transform 0.45s var(--ease-smooth);
}

.uc-lead-row:last-of-type {
  border-bottom: none;
}

.uc-lead-row:nth-child(1) { transition-delay: 0.25s; }
.uc-lead-row:nth-child(2) { transition-delay: 0.4s; }

.uc-lead-mock.is-visible .uc-lead-row {
  opacity: 1;
  transform: translateY(0);
}

.uc-lead-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  color: #7c3aed;
}

.uc-lead-icon svg {
  width: 30px;
  height: 30px;
}

.uc-lead-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: 14px;
  padding: 15px;
  border-radius: 16px;
  background: #101010;
  color: #ffffff;
  font-size: 15px;
  font-weight: 800;
}

.uc-lead-btn svg {
  width: 18px;
  height: 18px;
  color: #ffffff;
}

.uc-intent-card {
  position: absolute;
  z-index: 2;
  top: -34px;
  left: -18px;
  width: 216px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background-color: #ffffff;
  border-radius: 22px;
  padding: 20px;
  box-shadow: 0 16px 40px rgba(17, 17, 17, 0.1), 0 4px 12px rgba(17, 17, 17, 0.05);
  opacity: 0;
  transform: translateY(-16px) rotate(-8deg) scale(0.9);
  transition: opacity 0.5s var(--ease-smooth) 0.45s, transform 0.5s var(--ease-smooth) 0.45s;
}

.uc-lead-mock.is-visible .uc-intent-card {
  opacity: 1;
  transform: translateY(0) rotate(0deg) scale(1);
}

.uc-intent-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--font-primary-color);
  margin-bottom: 4px;
}

.uc-intent-tag {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 800;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.3s var(--ease-smooth), transform 0.3s var(--ease-smooth);
}

.uc-intent-tag:nth-child(2) { transition-delay: 0.6s; }
.uc-intent-tag:nth-child(3) { transition-delay: 0.75s; }
.uc-intent-tag:nth-child(4) { transition-delay: 0.9s; }

.uc-lead-mock.is-visible .uc-intent-tag {
  opacity: 1;
  transform: scale(1);
}

.uc-intent-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 9px;
}

.uc-intent-icon svg {
  width: 15px;
  height: 15px;
}

.uc-intent-tag[data-tone="purple"] { background: #ede9fe; color: #7c3aed; }
.uc-intent-tag[data-tone="pink"] { background: #fbdbe8; color: #d6266f; }
.uc-intent-tag[data-tone="orange"] { background: #fde8d2; color: #c2620a; }

.uc-intent-tag[data-tone="purple"] .uc-intent-icon { background: #ddd6fe; color: #7c3aed; }
.uc-intent-tag[data-tone="pink"] .uc-intent-icon { background: #fbcfe8; color: #d6266f; }
.uc-intent-tag[data-tone="orange"] .uc-intent-icon { background: #fed7aa; color: #c2620a; }

@media (max-width: 460px) {
  .uc-intent-card { width: 180px; padding: 16px; left: -8px; }
}

/* ========== مینی‌داشبورد آماری (تصویر سکشن پایگاه دانش) ========== */
.uc-stat-mock {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3.7;
}

.uc-stat-mock::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: radial-gradient(circle at 50% 50%, rgba(139, 92, 246, 0.22) 0%, rgba(139, 92, 246, 0.1) 35%, transparent 70%);
}

.uc-stat-mock::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 50%;
  overflow: hidden;
  background-color: #fafafa;
  background-image: radial-gradient(circle, #999999 1.5px, transparent 1.6px);
  background-size: 10px 10px;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 75%);
  mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 75%);
}

.uc-stat-card {
  position: absolute;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 18px;
  width: fit-content;
  background-color: #ffffff;
  border: 2.5px solid var(--border-color);
  border-radius: 21px;
  padding: 18px 24px;
  box-shadow: 0 12px 30px rgba(17, 17, 17, 0.08), 0 2px 8px rgba(17, 17, 17, 0.05);
  opacity: 0;
  transform: translateY(22px) scale(0.94) rotate(var(--uc-rot, 0deg));
  transition: opacity 0.75s var(--ease-smooth), transform 0.75s var(--ease-smooth);
  transition-delay: var(--uc-delay, 0s);
}

.uc-stat-mock.is-visible .uc-stat-card {
  opacity: 1;
  transform: translateY(0) scale(1) rotate(var(--uc-rot, 0deg));
}

.uc-chart-line {
  stroke-dasharray: var(--uc-len, 300);
  stroke-dashoffset: var(--uc-len, 300);
  transition: stroke-dashoffset 1.3s var(--ease-smooth);
  transition-delay: var(--uc-chart-delay, 0.3s);
}

.uc-stat-mock.is-visible .uc-chart-line {
  stroke-dashoffset: 0;
}

.uc-chart-fill {
  opacity: 0;
  transition: opacity 0.9s ease;
  transition-delay: calc(var(--uc-chart-delay, 0.3s) + 0.9s);
}

.uc-stat-mock.is-visible .uc-chart-fill {
  opacity: 1;
}

.uc-stat-card-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  white-space: nowrap;
}

.uc-stat-card-label {
  font-size: 1.24rem;
  color: #1f1f1f;
}

.uc-stat-card-value {
  font-size: 1.78rem;
  font-weight: 700;
  color: var(--font-primary-color);
  text-align: right;
}

.uc-stat-card-chart {
  width: 127px;
  height: 59px;
  flex-shrink: 0;
}

.uc-stat-card--a {
  top: 4%;
  left: 2%;
  --uc-rot: -5deg;
  --uc-delay: 0s;
  --uc-chart-delay: 0.3s;
  z-index: 1;
}

.uc-stat-card--b {
  top: 30.5%;
  left: 25.5%;
  --uc-rot: 4deg;
  --uc-delay: 0.15s;
  --uc-chart-delay: 0.45s;
  z-index: 2;
}

.uc-stat-card--c {
  top: 57%;
  left: 9%;
  --uc-rot: -3deg;
  --uc-delay: 0.3s;
  --uc-chart-delay: 0.6s;
  z-index: 3;
}

@media (max-width: 480px) {
  .uc-stat-card-label { font-size: 0.92rem; }
  .uc-stat-card-value { font-size: 1.46rem; }
  .uc-stat-card-chart { width: 104px; height: 47px; }
  .uc-stat-card { padding: 13px 18px; gap: 13px; }
}

@media (max-width: 900px) {
  .uc-split { padding: 60px 0; }
  .uc-split-grid { flex-direction: column; gap: 32px; }
  .uc-split-copy { align-items: center; text-align: center; flex: none; width: 100%; order: 2; }
  .uc-split-desc { margin-left: auto; margin-right: auto; }
  .uc-split-title { font-size: 1.6rem; }
  .uc-split-media { flex: none; width: 100%; max-width: 420px; order: 1; }

  /* همون بیرون‌زدگی عمدی هاله‌ی نور (inset: -70px -45px) که رو uc-channels-media
     هم بود؛ رو موبایل باعث اسکرول افقی واقعی صفحه می‌شد */
  .uc-lead-mock { overflow-x: clip; }
}

/* ========== امکانات هوشمند (متن وسط‌چین) ========== */
.uc-creative {
  background-color: #fafafa;
  padding: 20px 0 100px;
}

.uc-creative-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}

.uc-creative-pill {
  display: inline-flex;
  padding: 8px 20px;
  margin-bottom: 24px;
  border-radius: 999px;
  background-color: #f2f1f3;
  color: #141414;
  font-size: 18px;
  font-weight: 800;
}

.uc-creative-title {
  font-family: "pinar";
  font-size: 3.2rem;
  font-weight: 900;
  line-height: 1.55;
  letter-spacing: -0.01em;
  color: var(--font-primary-color);
  margin-bottom: 36px;
}

.uc-creative-desc {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.9;
  color: var(--muted-color);
  max-width: 560px;
}

.uc-creative-desc strong {
  font-weight: 800;
  color: var(--font-primary-color);
}

@media (min-width: 641px) {
  .uc-creative-desc { max-width: 650px; }
  .uc-creative { padding-bottom: 60px; }
}

@media (max-width: 640px) {
  .uc-creative { padding: 10px 0 70px; }
  .uc-creative-title { font-size: 2rem; }
  .uc-creative-desc { font-size: 15px; }
}

/* ========== آمار و ارقام ========== */
.uc-stats {
  background-color: #fafafa;
  padding: 0 0 100px;
}

.uc-stats-grid {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 24px 32px;
}

.uc-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 160px;
}

.uc-stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.uc-stat-icon svg {
  width: 38px;
  height: 38px;
}

.uc-stat-num {
  font-family: "inter", sans-serif;
  font-size: 40px;
  font-weight: 700;
  color: var(--font-primary-color);
  margin-bottom: 4px;
}

.uc-stat-label {
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  max-width: 160px;
  color: var(--muted-color);
}

@media (max-width: 720px) {
  .uc-stats { padding: 0 0 70px; }
  .uc-stats-grid { gap: 40px 20px; }
  .uc-stat { width: 150px; }
  .uc-stat-icon { margin-bottom: 16px; }
  .uc-stat-num { font-size: 30px; }
  .uc-stat-label { font-size: 15px; }
}

/* ==========================================
================ صفحه‌ی درباره ما =============
تیترها: pinar | متن‌ها: peyda (فونت پیش‌فرض body)
========================================== */
.about-section {
  padding: 90px 0;
}

.about-section + .about-section {
  border-top: 1px solid var(--border-color);
}

.about-section + .about-how {
  border-top: none;
}

.about-section + .about-audience {
  border-top: none;
}

.about-head {
  max-width: 720px;
  margin: 0 auto 48px;
  text-align: center;
}

.about-head--split {
  max-width: 1180px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  text-align: right;
}

.about-head--split .about-title {
  margin: 0;
}

.about-head--split .about-head-btn {
  flex: 0 0 auto;
  padding: 17.1px 31.6px;
  font-size: 18.8px;
  height: 59px;
}

.about-head-btn {
  transition: none;
  transform: scale(1);
}

.about-head-btn::before {
  display: none;
}

.about-head-btn:hover,
.about-head-btn.btn--dark:hover {
  color: #ffffff !important;
  animation: about-audience-btn-pop 0.45s var(--ease-smooth) forwards;
}

.about-head-btn.is-leaving {
  animation: about-audience-btn-unpop 0.4s var(--ease-smooth) forwards;
}

@media (max-width: 640px) {
  .about-head {
    text-align: right;
  }

  .about-head--split {
    flex-direction: column;
    align-items: flex-start;
    text-align: right;
  }

  .about-head--split .about-head-btn {
    display: none;
  }
}

.about-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  border-radius: 999px;
  background-color: var(--normal-secondary-color);
  color: #19171c;
  font-family: "peyda";
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 18px;
}

.about-how .about-eyebrow,
.about-values .about-eyebrow,
.about-mission .about-eyebrow {
  background-color: #ffffff;
  border: 1px solid var(--border-color);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.about-how .about-eyebrow::before,
.about-values .about-eyebrow::before,
.about-mission .about-eyebrow::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: linear-gradient(135deg, #8b5cf6, #ec4899);
  flex-shrink: 0;
}

.about-title {
  font-family: "pinar";
  font-size: clamp(24px, 3vw, 42px);
  font-weight: 800;
  color: #19171c;
  margin: 0 0 16px;
  line-height: 1.6;
}

.about-hero-head .about-title {
  font-size: clamp(28px, 4.2vw, 46px);
}

.about-title-break {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
}

@media (min-width: 901px) {
  .about-title-break {
    display: block;
  }
}

.about-lead {
  font-family: "peyda";
  font-size: clamp(15px, 1.4vw, 18px);
  font-weight: 700;
  line-height: 1.95;
  color: #19171c;
  margin: 0;
}

/* ---------- هیرو ---------- */
.about-hero {
  padding: 150px 16px 60px;
}

.about-hero-head {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

@media (min-width: 641px) {
  .about-hero-head {
    max-width: 920px;
  }
}

.about-hero-head .about-lead {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  font-size: clamp(15.5px, 4vw, 18px);
  font-weight: 700;
  color: #19171c;
}

.about-lead-highlight {
  font-weight: 900;
  background: linear-gradient(90deg, #ffbb56, #eb4391);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@media (max-width: 640px) {
  .about-hero { padding: 120px 16px 44px; }
  .about-hero-head {
    text-align: right;
  }
  .about-hero-head .about-lead {
    margin-left: 0;
    margin-right: 0;
  }
}

/* ---------- چطور کار می‌کند (مراحل) ---------- */
.about-how-card {
  max-width: 1180px;
  margin: 0 auto;
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: 28px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  overflow: hidden;
}

.about-how-item {
  padding: 36px 32px;
  border-inline-start: 1px solid var(--border-color);
}

.about-how-item:nth-child(3n+1) {
  border-inline-start: none;
}

.about-how-item:nth-child(n+4) {
  border-top: 1px solid var(--border-color);
}

.about-how-num {
  display: block;
  font-family: "geist", sans-serif;
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 22px;
  background: linear-gradient(90deg, #8b5cf6, #ec3f83);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.about-how-title {
  font-family: "pinar";
  font-size: 18px;
  font-weight: 800;
  color: #19171c;
  margin: 0 0 8px;
  line-height: 1.5;
}

.about-how-desc {
  font-family: "peyda";
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.9;
  color: #5b616e;
  margin: 0;
}

@media (max-width: 900px) {
  .about-how-card { grid-template-columns: repeat(2, 1fr); border-radius: 22px; }
  .about-how-item:nth-child(3n+1) { border-inline-start: 1px solid var(--border-color); }
  .about-how-item:nth-child(odd) { border-inline-start: none; }
  .about-how-item:nth-child(n+4) { border-top: none; }
  .about-how-item:nth-child(n+3) { border-top: 1px solid var(--border-color); }
}

@media (max-width: 600px) {
  .about-how-card { grid-template-columns: 1fr; border-radius: 18px; }
  .about-how-item { padding: 26px 22px; border-inline-start: none !important; border-top: none; }
  .about-how-item:not(:first-child) { border-top: 1px solid var(--border-color); }
  .about-how-title { font-size: 17px; }
  .about-how-desc { font-size: 15.5px; }
}

/* ---------- چرا میراکل: از قالب fs-* صفحه‌ی اصلی استفاده می‌کند ---------- */
.about-why {
  background-color: #fafafa;
}

.about-how {
  background-color: #fafafa;
}

.about-why .fs-wrap { padding: 0; background: transparent; }
.about-why .fs-inner { max-width: 1180px; margin: 0 auto; }
.about-why .fs-grid { gap: 20px; }
.about-why .fs-card {
  background-color: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: 20px;
}
.about-why .fs-title,
.about-why .fs-desc {
  color: #19171c;
}

/* ---------- ارزش‌ها ---------- */
.about-values-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 900px;
  margin: 0 auto;
}

.about-value {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 26px;
  border-radius: 18px;
  border: 1px solid var(--border-color);
}

.about-value-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.about-value-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-value-icon svg {
  width: 28px;
  height: 28px;
}

.about-value-icon--1 {
  color: #7c5cff;
}

.about-value-icon--2 {
  color: #ec4899;
}

.about-value-icon--3 {
  color: #2f7bf6;
}

.about-value-icon--4 {
  color: #8b5cf6;
}

.about-value-title {
  font-family: "pinar";
  font-size: 17px;
  font-weight: 800;
  color: #19171c;
  margin: 0 0 6px;
}

.about-value-desc {
  font-family: "peyda";
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.85;
  color: #19171c;
  margin: 0;
}

@media (max-width: 700px) {
  .about-values-grid { grid-template-columns: 1fr; }
}

/* ---------- کارت تزئینی ---------- */
.about-audience-card {
  width: 850px;
  height: 510px;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 48px;
  border-radius: 28px;
  background: #f2f1f3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  overflow: hidden;
  box-sizing: border-box;
}

.about-audience-card-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.about-audience-card-title {
  font-family: "pinar";
  font-size: 39px;
  font-weight: 800;
  line-height: 1.5;
  color: #19171c;
  max-width: 380px;
  margin: 0;
}

.about-audience-card-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 255px;
  height: 55px;
  margin-top: 24px;
  border-radius: 999px;
  background-color: #f5fe63;
  color: #19171c;
  font-family: "peyda";
  font-size: 19px;
  font-weight: 800;
  text-decoration: none;
  transform: scale(1);
}

.about-audience-card-btn:hover {
  background-color: #f5fe63;
  color: #19171c;
  animation: about-audience-btn-pop 0.45s var(--ease-smooth) forwards;
}

.about-audience-card-btn.is-leaving {
  animation: about-audience-btn-unpop 0.4s var(--ease-smooth) forwards;
}

@keyframes about-audience-btn-pop {
  0% {
    transform: scale(1);
  }

  45% {
    transform: scale(1.06);
  }

  100% {
    transform: scale(1.04);
  }
}

@keyframes about-audience-btn-unpop {
  0% {
    transform: scale(1.04);
  }

  55% {
    transform: scale(0.98);
  }

  100% {
    transform: scale(1);
  }
}

.about-audience-card-img {
  height: 40%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .about-audience-card {
    width: 100%;
    height: auto;
    flex-direction: column-reverse;
    border-radius: 20px;
    padding: 28px 24px;
    gap: 20px;
  }

  .about-audience-card-text {
    align-items: center;
    text-align: center;
  }

  .about-audience-card-title {
    font-size: 22px;
    max-width: 100%;
  }

  .about-audience-card-img {
    height: auto;
    width: 65%;
    max-width: 240px;
  }

  .about-audience-card-btn {
    width: 100%;
  }
}

.about-audience-extra {
  width: 850px;
  max-width: 100%;
  margin: 20px auto 0;
  display: flex;
  justify-content: space-between;
}

.about-audience-box {
  width: 49%;
  height: 270px;
  border-radius: 28px;
  cursor: pointer;
  transform: scale(1);
}

.about-audience-box:hover {
  animation: about-audience-box-pop 0.45s var(--ease-smooth) forwards;
}

.about-audience-box.is-leaving {
  animation: about-audience-box-unpop 0.4s var(--ease-smooth) forwards;
}

@keyframes about-audience-box-pop {
  0% {
    transform: scale(1);
  }

  45% {
    transform: scale(0.94);
  }

  100% {
    transform: scale(0.96);
  }
}

@keyframes about-audience-box-unpop {
  0% {
    transform: scale(0.96);
  }

  55% {
    transform: scale(1.02);
  }

  100% {
    transform: scale(1);
  }
}

.about-audience-box--right,
.about-audience-box--left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 14px;
  padding: 0 50px 0 24px;
  box-sizing: border-box;
}

.about-audience-box--right {
  background-color: #f3ecfc;
}

.about-audience-box--left {
  background-color: #cab3f9;
}

.about-audience-box-pill {
  display: inline-flex;
  align-items: center;
  padding: 8px 20px;
  border-radius: 999px;
  background-color: #ffffff;
  color: #17082c;
  font-family: "peyda";
  font-size: 15px;
  font-weight: 800;
}

.about-audience-box-pill--filled {
  background-color: #ae8af4;
  color: #17082c;
}

.about-audience-box-title {
  font-family: "pinar";
  font-size: 28px;
  font-weight: 800;
  line-height: 1.4;
  color: #17082c;
  margin: 0;
}

.about-audience-box-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #17082c;
  font-family: "peyda";
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}

.about-audience-box-arrow {
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .about-audience-extra { width: 640px; flex-direction: column; gap: 16px; }
  .about-audience-box { width: 100%; height: auto; min-height: 220px; border-radius: 20px; padding: 28px 24px 28px 20px; }
  .about-audience-box-title { font-size: 21px; }
}

/* ==========================================
========== صفحات قانونی (حریم خصوصی/شرایط/DPA/امنیت) =======
مشترک بین legal-page-*.html؛ هیرو + ناوبری بین اسناد + طرح
دوستونه‌ی فهرست مطالب چسبان (TOC) و متن سند
========================================== */
html,
body.legal-page,
.legal-page main {
  background: #fafafa !important;
  min-height: 100%;
}

.legal-hero {
  padding-top: 150px;
  padding-bottom: 8px;
}

.legal-hero-head {
  max-width: 1040px;
  margin: 0 auto;
  text-align: right;
}

.legal-hero-head .mask-reveal {
  padding: 0;
  max-width: none;
  text-align: right;
}

.legal-hero-lead {
  margin-top: 12px;
  padding: 0;
  max-width: none;
  font-family: "peyda";
  font-size: 17px;
  font-weight: 700;
  line-height: 1.9;
  color: #3f3f3f;
  text-align: right;
}

.legal-hero-lead.is-visible .word-inner {
  font-family: "peyda";
}

.legal-hero-lead .word-inner {
  animation-duration: 1.7s;
}

@media (min-width: 641px) {
  .legal-hero-head { max-width: 1040px; }
  .legal-hero { padding-top: 200px; }
}

/* از ۱۰۲۴px به بالا، .legal-layout دوستونه می‌شود (متن + فهرست مطالب
   ۲۴۰px + gap ۴۴px، جمعاً از عرض ۱۰۴۰px کم می‌شود). پاراگراف زیر تیتر
   باید حداکثر تا لبه‌ی چپ همان ستون متن (نه کل عرض ۱۰۴۰px) کشیده شود؛
   چون پاراگراف بدون margin:auto است، با محدود کردن max-width به همین
   اندازه، لبه‌ی راستش (که ثابت است) دست‌نخورده می‌ماند و فقط لبه‌ی چپ
   عقب می‌آید تا با لبه‌ی چپ باکس محتوا یکی شود */
@media (min-width: 1024px) {
  .legal-hero-head .mask-reveal.legal-hero-lead {
    max-width: calc(1040px - 240px - 44px);
  }
}

.legal-updated-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 999px;
  background-color: #ffffff;
  border: 1px solid var(--border-color);
  box-shadow: 0 1px 2px rgba(17, 17, 17, 0.04);
  color: #3f3f3f;
  font-family: "peyda";
  font-size: 13px;
  font-weight: 700;
  margin-top: 22px;
}

.legal-updated-badge .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, #8b5cf6, #ec4899);
  flex-shrink: 0;
}

/* ---------- ناوبری بین ۴ سند قانونی ---------- */
.legal-doc-nav {
  padding-top: 26px;
  padding-bottom: 10px;
}

.legal-doc-nav-list {
  max-width: 1040px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.legal-doc-nav-link {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  border-radius: 999px;
  background-color: #ffffff;
  border: 1px solid var(--border-color);
  color: #6b6b6b;
  font-family: "peyda";
  font-size: 13.5px;
  font-weight: 700;
  transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}

.legal-doc-nav-link:hover {
  color: #19171c;
  border-color: #c9c9c9;
}

.legal-doc-nav-link.is-active {
  background-color: #19171c;
  border-color: #19171c;
  color: #ffffff;
}

/* ---------- طرح دوستونه: متن سند + فهرست مطالب چسبان ---------- */
.legal-section {
  padding-top: 26px;
  padding-bottom: 100px;
}

.legal-layout {
  max-width: 1040px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 44px;
  align-items: start;
}

.legal-toc {
  position: sticky;
  top: 118px;
  background-color: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: 18px;
  padding: 22px 20px;
}

.legal-toc-title {
  font-family: "peyda";
  font-size: 12.5px;
  font-weight: 800;
  color: #9a9a9a;
  margin-bottom: 12px;
  letter-spacing: 0.02em;
}

.legal-toc-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.legal-toc-list a {
  display: block;
  padding: 8px 0 8px 10px;
  border-right: 2px solid transparent;
  padding-right: 12px;
  font-family: "peyda";
  font-size: 13px;
  font-weight: 600;
  line-height: 1.6;
  color: #6b6b6b;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.legal-toc-list a:hover {
  color: #19171c;
}

.legal-toc-list a.is-active {
  color: #19171c;
  font-weight: 800;
  border-right-color: #19171c;
}

/* ---------- کارت متن سند ---------- */
.legal-content {
  background-color: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 40px 44px;
  box-shadow: 0 1px 2px rgba(17, 17, 17, 0.04);
}

.legal-content section {
  scroll-margin-top: 112px;
}

.legal-content section + section {
  margin-top: 40px;
  padding-top: 36px;
  border-top: 1px solid var(--border-color);
}

.legal-content h2 {
  font-family: "pinar";
  font-size: 21px;
  font-weight: 800;
  color: #19171c;
  line-height: 1.6;
  margin: 0 0 16px;
}

.legal-content h3 {
  font-family: "peyda";
  font-size: 15.5px;
  font-weight: 800;
  color: #19171c;
  margin: 22px 0 10px;
}

.legal-content p {
  font-family: "peyda";
  font-size: 15px;
  font-weight: 600;
  line-height: 1.95;
  color: #3f3f3f;
  margin: 0 0 14px;
}

.legal-content p:last-child {
  margin-bottom: 0;
}

.legal-content strong {
  color: #19171c;
  font-weight: 800;
}

.legal-content a {
  color: #19171c;
  text-decoration: underline;
  text-decoration-color: #c9c9c9;
  text-underline-offset: 3px;
  font-weight: 700;
  transition: text-decoration-color 0.2s ease;
}

.legal-content a:hover {
  text-decoration-color: #19171c;
}

.legal-content ul,
.legal-content ol {
  margin: 0 0 14px;
  padding-right: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.legal-content ul { list-style: disc; }
.legal-content ol { list-style: decimal; }

.legal-content li {
  font-family: "peyda";
  font-size: 15px;
  font-weight: 600;
  line-height: 1.9;
  color: #3f3f3f;
}

.legal-content li::marker {
  color: #9a9a9a;
}

/* ---------- جدول‌ها ---------- */
.legal-table-wrap {
  overflow-x: auto;
  margin: 4px 0 18px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
}

.legal-content table {
  width: 100%;
  border-collapse: collapse;
  min-width: 480px;
}

.legal-content th,
.legal-content td {
  padding: 12px 16px;
  text-align: right;
  font-family: "peyda";
  font-size: 13.5px;
  line-height: 1.8;
  border-bottom: 1px solid var(--border-color);
}

.legal-content th {
  background-color: #f7f7f7;
  color: #19171c;
  font-weight: 800;
  white-space: nowrap;
}

.legal-content td {
  color: #3f3f3f;
  font-weight: 600;
}

.legal-content tbody tr:last-child th,
.legal-content tbody tr:last-child td {
  border-bottom: none;
}

/* ---------- جعبه‌ی یادداشت/هشدار ---------- */
.legal-callout {
  background-color: #fffdf9;
  border: 1px solid #ece5d8;
  border-radius: 14px;
  padding: 18px 20px;
  margin: 4px 0 18px;
}

.legal-callout p {
  margin: 0;
  font-size: 14px;
  color: #6b6459;
}

.legal-callout p + p { margin-top: 8px; }

.legal-callout--dark {
  background-color: #f7f7f7;
  border-color: var(--border-color);
}

/* ---------- شبکه‌ی وضعیت (پیاده‌سازی‌شده / در مسیر تکمیل) ---------- */
.legal-status-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 4px 0 18px;
}

.legal-status-card {
  border-radius: 14px;
  padding: 18px 20px;
  border: 1px solid var(--border-color);
}

.legal-status-card--done {
  background-color: #f3fbf7;
  border-color: #d7ecdf;
}

.legal-status-card--progress {
  background-color: #fffaf0;
  border-color: #f0e4c8;
}

.legal-status-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "peyda";
  font-size: 13.5px;
  font-weight: 800;
  color: #19171c;
  margin-bottom: 10px;
}

.legal-status-card-title .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.legal-status-card--done .dot { background-color: #34a466; }
.legal-status-card--progress .dot { background-color: #e0a63c; }

.legal-status-card ul {
  margin: 0;
  padding-right: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.legal-status-card li {
  font-family: "peyda";
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.8;
  color: #3f3f3f;
}

/* ---------- کارت تماس پایانی هر سند ---------- */
.legal-contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 6px;
}

.legal-contact-card {
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 18px 20px;
}

.legal-contact-label {
  font-family: "peyda";
  font-size: 12.5px;
  font-weight: 700;
  color: #9a9a9a;
  margin-bottom: 8px;
  display: block;
}

.legal-contact-value {
  font-family: "peyda";
  font-size: 15px;
  font-weight: 800;
  color: #19171c;
}

.legal-contact-value.number {
  font-family: "geist", sans-serif;
}

/* ---------- ریسپانسیو ---------- */
/* از ۱۰۲۴px به پایین، layout تک‌ستونه می‌شود؛ در همین بازه (شامل
   موبایل و تبلت) نوار دکمه‌های ۴ سند و فهرست مطالب هم حذف می‌شوند تا
   صفحه مستقیم به متن سند برسد و دو ردیف پیل روی هم شلوغ نشود */
@media (max-width: 1023px) {
  .legal-layout {
    grid-template-columns: 1fr;
  }

  .legal-doc-nav,
  .legal-toc {
    display: none;
  }
}

@media (max-width: 640px) {
  .legal-hero { padding-top: 150px; padding-bottom: 16px; }

  .legal-hero.container,
  .legal-doc-nav.container,
  .legal-section.container {
    padding-left: 7.5%;
    padding-right: 7.5%;
  }

  #legalHeroTitle {
    font-size: 24px;
  }

  .legal-hero-lead {
    font-size: 15px;
  }

  .legal-content {
    padding: 22px 0 22px 18px;
    border-radius: 16px;
    background-color: transparent;
    border: none;
    box-shadow: none;
  }

  /* بخش‌های داخل کارت (جدول، هشدار، کارت‌های وضعیت/تماس) همچنان قاب و
     پس‌زمینه‌ی خودشان را دارند تا از متن اطراف مشخص باشند */
  .legal-content section + section {
    border-top-color: var(--border-color);
  }

  .legal-content h2 {
    font-size: 19px;
  }

  .legal-status-grid,
  .legal-contact-grid {
    grid-template-columns: 1fr;
  }

  .legal-toc-title {
    display: none;
  }
}