/* ===================================================================
   Monex v2 — Polish layer (تکامل / evolution)
   لایه‌ی صیقل که بعد از style.css + sections.css لود می‌شود.
   هدف: ریتمِ فاصله، تایپوگرافی تمیزتر، easing یکدستِ سینمایی،
   دسترسی‌پذیری (focus)، و احترام به reduced-motion.
   برند/رنگ/لوگو/کره‌ی زمین کاملاً دست‌نخورده می‌مانند.
   هر بلاک مستقل است؛ برای بازگشت کافی‌ست همان بلاک حذف شود.
   =================================================================== */

:root {
  /* --- easing tokens: منحنی نرمِ expo-out برای ورود و هاور --- */
  --ease-out:    cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  /* --- shadow scale: نرم‌تر و لایه‌بندی‌شده --- */
  --shadow-sm: 0 4px 14px rgba(0, 0, 0, .24);
  --shadow-md: 0 16px 40px rgba(0, 0, 0, .36);
  --shadow-lg: 0 30px 68px rgba(0, 0, 0, .48);
  /* --- حلقه‌ی فوکوس (طلایی برند) --- */
  --focus-ring: 2px solid var(--gold);
}

/* ===================================================================
   1) ریتم فاصله‌گذاری — اسکیل ۸px، کمی هوای بیشتر روی دسکتاپ
   =================================================================== */
.container { padding-inline: 24px; }

@media (min-width: 941px) {
  .section { padding: 96px 0; }
  .section-head { margin-bottom: 60px; }
}

/* ===================================================================
   2) تایپوگرافی — سلسله‌مراتب و خوانایی تمیزتر
   =================================================================== */
.hero h1            { line-height: 1.22; }
.section-head h2    { line-height: 1.32; }
.section-head p     { line-height: 1.75; max-width: 62ch; margin-inline: auto; }
/* پاراگراف‌های بدنه کمی جمع‌تر از line-height سراسری ۱.۸ */
.card p, .vsvc p, .plan .plan-desc,
.hero p.lead        { line-height: 1.72; }
/* کیکر بخش‌ها: فاصله‌ی حروف یکدست و کنترست کمی بهتر */
.sec-kicker, .section-tag { letter-spacing: 2.5px; }

/* ===================================================================
   3) easing یکدستِ سینمایی روی هاورِ عناصر تعاملی
      (فقط timing-function را یکدست می‌کند؛ مدت/خواص دست‌نخورده)
   =================================================================== */
.btn, .card, .svc-banner, .mkt, .course, .ncard, .plan, .vsvc,
.socials a, .theme-toggle, .ticker-tab, .rad-chip {
  transition-timing-function: var(--ease-out);
}
/* بازخوردِ فشار (press): کوچک‌شدنِ ظریف روی کلیک — استاندارد سیستم طراحی */
.btn:active { transform: translateY(0) scale(.975); }
.card:active, .svc-banner:active, .course:active, .mkt:active { transform: scale(.99); }

/* سایه‌ی هاورِ کارت‌ها را به اسکیلِ نرم‌ترِ جدید هم‌سو می‌کنیم */
.card:hover  { box-shadow: var(--shadow-md); }
.ncard:hover { box-shadow: var(--shadow-md); }

/* ===================================================================
   4) دسترسی‌پذیری — حلقه‌ی فوکوسِ کیبورد (قبلاً وجود نداشت)
      فقط با ناوبریِ کیبورد ظاهر می‌شود؛ کلیکِ موس آن را نشان نمی‌دهد.
   =================================================================== */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
  border-radius: 6px;
}
/* دکمه‌های پررنگ: آفستِ کمی بیشتر تا حلقه از دلِ سایه بیرون بیاید */
.btn:focus-visible { outline-offset: 3px; }

/* ===================================================================
   5) جزئیاتِ پریمیوم — انتخاب متن + اسکرول‌بارِ برندشده
   =================================================================== */
::selection { background: rgba(178, 62, 125, .38); color: #fff; }

html { scrollbar-width: thin; scrollbar-color: var(--brand-2) transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--brand-2), var(--brand));
  border-radius: 999px;
  border: 3px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--brand-2); }

/* ===================================================================
   7) پس‌زمینه‌ی یکدستِ سراسری — رفعِ حالتِ «صفحه‌صفحه»
      قبلاً بعضی بخش‌ها رنگِ --bg-soft داشتند و نوارهای افقیِ روشن‌تر
      می‌ساختند (سایت تکه‌تکه به‌نظر می‌رسید). حالا یک لایه‌ی نورِ محیطیِ
      *ثابت* پشتِ کلِ صفحه می‌گذاریم تا همه‌ی بخش‌ها روی یک بومِ پیوسته
      بنشینند؛ گویچه‌های پارالاکس (.plx-orb) عمقِ برند را حفظ می‌کنند.
   =================================================================== */
body { position: relative; }
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(1100px 820px at 85% 4%,  rgba(107, 10, 73, .16), transparent 58%),
    radial-gradient(950px 780px at 6% 42%,   rgba(18, 27, 76, .15), transparent 55%),
    radial-gradient(1000px 900px at 70% 96%, rgba(107, 10, 73, .12), transparent 60%);
}
[data-theme="light"] body::before {
  background:
    radial-gradient(1100px 820px at 85% 4%,  rgba(107, 10, 73, .05), transparent 58%),
    radial-gradient(950px 780px at 6% 42%,   rgba(18, 27, 76, .045), transparent 55%);
}
/* بخش‌هایی که قبلاً نوارِ --bg-soft داشتند حالا شفاف‌اند تا بومِ یکدست دیده شود */
#vision, #careers, #plans, #login { background: transparent !important; }

/* ===================================================================
   9) موبایل — رفعِ سرریزِ افقی + صیقلِ نسخه‌ی موبایل
      باگ: گویچه‌های پارالاکس (.plx-orb) در بخش‌های غیرِ هیرو کلیپ نمی‌شدند
      و بدنه را ~۱۱۰px پهن‌تر از ویوپورت می‌کردند → روی گوشیِ واقعی صفحه
      چپ‌وراست می‌لغزید و محتوا شیفت می‌شد. در موبایل (≤۹۴۰px) که گالریِ
      pin-شده‌ی بازارها static است (sticky خاموش)، بستنِ overflow-x روی
      html/body امن است و اسکرولِ افقیِ ناخواسته را می‌بندد.
   =================================================================== */
@media (max-width: 940px) {
  html, body { overflow-x: hidden; }
  /* هیچ عنصری نباید از عرضِ صفحه بزند */
  .container, .nav-inner, .hero-grid, .footer-grid { max-width: 100%; }
  /* گویچه‌های نوری روی موبایل جمع‌تر و کاملاً داخلِ کادر تا سرریز نسازند */
  .plx-orb { max-width: 82vw; max-height: 82vw; }
}

/* ===================================================================
   8) احترام به reduced-motion — توقفِ انیمیشن‌های تزئینیِ بی‌نهایت
      (کره‌ی canvas جداست؛ این بلاک لایه‌های CSS را آرام می‌کند)
   =================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}