/* ============================================================
   IKLIL MARKETS — الموقع العام. هويةُ المنصّة نفسها: فحميٌّ وذهبٌ كلاسيكي وخطُّ IBM Plex Sans Arabic.
   كلُّ المحتوى مرئيٌّ بلا JavaScript؛ الحركةُ طبقةٌ فوقه لا شرطٌ لظهوره.
   ============================================================ */

/* [المالك 2026-10-22 «تمام ماشي هاد ibm»] خطُّ المنصّة كلّها IBM Plex Sans Arabic بدل الخط السابق: أنظفُ وأحدّ وأرقامُه أوضح.
   مستضافٌ هنا (plex-v5.3، رخصة OFL معه) بأوزانه الأربعة، ولكلّ وزنٍ ملفّاتٌ بمجالها (العربية، اللاتينية، ومن IBM Plex Sans تحت الاسم نفسه:
   اللاتينيةُ الممتدّة للتركية — İ ş ğ ليست في الخط العربي — والكيريليةُ للروسية)، فلا ينزّل المتصفّح إلا ما على الصفحة */
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/plex-v5.3/plex-arabic-arabic-400.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/plex-v5.3/plex-latin-ext-400.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/plex-v5.3/plex-arabic-latin-400.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/plex-v5.3/plex-cyrillic-ext-400.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/plex-v5.3/plex-cyrillic-400.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/plex-v5.3/plex-arabic-arabic-500.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/plex-v5.3/plex-latin-ext-500.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/plex-v5.3/plex-arabic-latin-500.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/plex-v5.3/plex-cyrillic-ext-500.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/plex-v5.3/plex-cyrillic-500.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/plex-v5.3/plex-arabic-arabic-600.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/plex-v5.3/plex-latin-ext-600.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/plex-v5.3/plex-arabic-latin-600.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/plex-v5.3/plex-cyrillic-ext-600.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/plex-v5.3/plex-cyrillic-600.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/plex-v5.3/plex-arabic-arabic-700.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/plex-v5.3/plex-latin-ext-700.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/plex-v5.3/plex-arabic-latin-700.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/plex-v5.3/plex-cyrillic-ext-700.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/plex-v5.3/plex-cyrillic-700.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
/* بديلٌ مضبوطُ المقاييس ريثما يصل الخط: يقلّل قفزة النص عند تبدّله */
@font-face {
  font-family: 'Plex Fallback';
  src: local('Arial'), local('Helvetica Neue'), local('Helvetica');
  size-adjust: 100%;
  ascent-override: 102%;
  descent-override: 44%;
  line-gap-override: 0%;
}

:root {
  --gold: #d4af37;
  --gold-300: #ecd591;
  --gold-600: #b8942a;
  --bg: #060809;
  --night: #0c0f12;
  --night-800: #14181c;
  --ink: #e8e5dc;
  --muted: #a8a49a;
  --dim: #7a766d;
  --up: #10b981;
  --down: #f43f5e;
  --line: rgba(232, 229, 220, 0.1);
  --line-soft: rgba(232, 229, 220, 0.06);
  --gline: rgba(212, 175, 55, 0.16);
  --on-gold: #171207;
  --btn-gold: linear-gradient(180deg, #e3c76a 0%, #c9a132 100%);
  --card: rgba(13, 16, 19, 0.9);
  --maxw: 1200px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --font: 'IBM Plex Sans Arabic', 'Plex Fallback', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  background: var(--bg);
}
/* [فحص 2026-10-13] القفلُ على body لا على html: ‎overflow‎ على html يوقف انتقال ‎overflow-x‎ من body إلى نافذة العرض، فيصير body
   نفسُه حاويةَ تمرير وتلتصق الترويسةُ (sticky) به لا بالشاشة: في كروم كانت تقفز مع القائمة إلى أعلى المستند وتُقفل الصفحة */
html.menu-open body {
  overflow: hidden;
}
body {
  margin: 0;
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.75;
  overflow-x: hidden;
  background: var(--bg);
  background-image: radial-gradient(900px 520px at 50% 6%, rgba(212, 175, 55, 0.06), transparent 70%), radial-gradient(900px 700px at 100% 78%, rgba(212, 175, 55, 0.03), transparent 60%);
  -webkit-font-smoothing: antialiased;
}
img,
svg {
  max-width: 100%;
  display: block;
}
a {
  color: inherit;
  text-decoration: none;
}
table {
  border-collapse: collapse;
  width: 100%;
}
h1,
h2,
h3 {
  margin: 0;
  line-height: 1.25;
  font-weight: 900;
  letter-spacing: -0.01em;
}
p {
  margin: 0;
}
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
dl,
dd {
  margin: 0;
}
::selection {
  background: rgba(212, 175, 55, 0.85);
  color: var(--on-gold);
}
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 4px;
}
[id] {
  scroll-margin-top: 96px;
}
.num {
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: isolate;
}
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip {
  position: absolute;
  inset-inline-start: 12px;
  top: -60px;
  z-index: 300;
  background: var(--gold);
  color: var(--on-gold);
  font-weight: 800;
  padding: 10px 16px;
  border-radius: 10px;
}
.skip:focus {
  top: 12px;
}
html[dir='rtl'] .flip {
  transform: scaleX(-1);
}

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: 22px;
}
.narrow {
  max-width: 900px;
}
/* إيقاعُ الأقسام (المالك 2026-09-20: «في فراغ كبير»): 72px بدل 96 بين قسمٍ وقسم، والمضغوط 48 */
.section {
  padding: 72px 0;
  position: relative;
}
.section--tight {
  padding: 48px 0;
}
.section--first {
  padding-top: 20px;
}
.center {
  text-align: center;
}
.center .lead {
  margin-inline: auto;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}
.eyebrow::before {
  content: '';
  width: 22px;
  height: 2px;
  background: var(--gold);
  border-radius: 2px;
}
.h2 {
  font-size: clamp(27px, 3.8vw, 44px);
}
.lead {
  color: var(--muted);
  font-size: clamp(15px, 1.6vw, 17.5px);
  max-width: 68ch;
  margin-top: 12px;
}
.more {
  margin-top: 34px;
  display: flex;
  justify-content: center;
}

/* ---------- أزرار ---------- */
.btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-radius: 13px;
  padding: 13px 24px;
  font-weight: 800;
  font-size: 15px;
  white-space: nowrap;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s, border-color 0.25s;
}
.btn:hover {
  transform: translateY(-2px);
}
.btn:active {
  transform: translateY(0) scale(0.98);
}
.btn--gold {
  background: var(--btn-gold);
  color: var(--on-gold);
  box-shadow: 0 10px 34px rgba(212, 175, 55, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.btn--gold:hover {
  background: linear-gradient(180deg, #ecd591 0%, #d4af37 100%);
  box-shadow: 0 14px 44px rgba(212, 175, 55, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.btn--gold::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 36%;
  inset-inline-start: -60%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-18deg);
  transition: inset-inline-start 0.55s var(--ease);
}
.btn--gold:hover::after {
  inset-inline-start: 125%;
}
.btn--ghost {
  border: 1px solid var(--line);
  background: rgba(232, 229, 220, 0.03);
}
.btn--ghost:hover {
  border-color: rgba(212, 175, 55, 0.4);
  background: rgba(212, 175, 55, 0.05);
}
.btn--sm {
  padding: 8px 15px;
  font-size: 13.5px;
  border-radius: 10px;
}
/* كبسولات التصميم العائم: إطارٌ رفيع في الترويسة، وذهبيٌّ مضيء في البطل */
.btn--pill {
  border-radius: 999px;
}
.btn--pill.btn--sm {
  padding: 9px 20px;
}
html:not([dir='rtl']) .btn--pill.btn--lg {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.btn--lg {
  padding: 15px 36px;
  font-size: 16px;
}
.btn--line {
  border: 1px solid rgba(232, 229, 220, 0.22);
  color: var(--ink);
}
.btn--line:hover {
  border-color: rgba(212, 175, 55, 0.65);
  color: var(--gold-300);
  background: rgba(212, 175, 55, 0.05);
}
.hide-sm {
  display: none;
}
@media (min-width: 640px) {
  .hide-sm {
    display: inline-flex;
  }
}

/* ---------- الترويسة ---------- */
/* ترويسةٌ عائمة (تصميمُ المالك 2026-09-15): كبسولةٌ بإطارٍ رفيع فوق الخلفية، تلتصق أعلى الشاشة عند النزول.
   الغلافُ شفافٌ لا يلتقط النقر، والكبسولةُ وحدها تفاعلية. بلا backdrop-filter على عنصرٍ ملتصق: كلفةُ رسمٍ على الجوال */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  padding-top: 14px;
  pointer-events: none;
}
.header__bar {
  pointer-events: auto;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  height: 62px;
  padding-inline: 22px 9px;
  border-radius: 999px;
  border: 1px solid rgba(232, 229, 220, 0.09);
  background: rgba(10, 12, 14, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: background 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.header.is-stuck .header__bar {
  background: rgba(10, 12, 14, 0.95);
  border-color: rgba(212, 175, 55, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 18px 44px rgba(0, 0, 0, 0.55);
}
.logo {
  display: inline-flex;
  align-items: center;
  flex: none;
}
.header__bar > .logo {
  justify-self: start;
}
.header .logo img {
  height: 32px;
  width: auto;
}
.nav {
  display: none;
  align-items: center;
  gap: 2px;
}
.nav a,
.navmore > summary {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 600;
  color: rgba(232, 229, 220, 0.76);
  white-space: nowrap;
  transition: color 0.2s, background 0.2s;
}
.nav a:hover,
.navmore > summary:hover,
.navmore[open] > summary {
  color: var(--ink);
  background: rgba(232, 229, 220, 0.05);
}
/* الفرنسيةُ أطولُ الروابط («Conditions de trading»، «Se connecter»): حشوةٌ أضيق تُبقي مسافةً عن أزرار الطرف */
html[lang='fr'] .nav a,
html[lang='fr'] .navmore > summary {
  padding-inline: 9px;
}
.nav a[aria-current],
.navmore > summary.is-current {
  color: var(--gold);
}
.navmore {
  position: relative;
}
.navmore > summary svg {
  opacity: 0.7;
  transition: transform 0.25s var(--ease);
}
.navmore[open] > summary svg {
  transform: rotate(180deg);
}
.navmore__menu {
  position: absolute;
  top: calc(100% + 16px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 220px;
  z-index: 120;
  display: grid;
  background: #0f1215;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 6px;
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.65);
}
.nav .navmore__menu a {
  display: flex;
  border-radius: 12px;
  padding: 10px 14px;
}
.header__side {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 4px;
}
.header__login {
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 600;
  color: rgba(232, 229, 220, 0.76);
  white-space: nowrap;
  transition: color 0.2s, background 0.2s;
}
.header__login:hover {
  color: var(--ink);
  background: rgba(232, 229, 220, 0.05);
}
@media (min-width: 1140px) {
  .nav {
    display: flex;
  }
}
/* لغاتٌ أطول كلماتٍ من العربية والإنجليزية: الروابطُ في القائمة حتى تتسع الكبسولة لها */
@media (min-width: 1140px) and (max-width: 1239px) {
  html[lang='fr'] .nav,
  html[lang='de'] .nav,
  html[lang='ru'] .nav,
  html[lang='tr'] .nav {
    display: none;
  }
}

details > summary {
  list-style: none;
  cursor: pointer;
}
details > summary::-webkit-details-marker {
  display: none;
}
.lang {
  position: relative;
}
.lang > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 11px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(232, 229, 220, 0.76);
  transition: color 0.2s, background 0.2s;
}
.lang > summary:hover,
.lang[open] > summary {
  color: var(--ink);
  background: rgba(232, 229, 220, 0.05);
}
.lang__menu {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 16px);
  min-width: 176px;
  z-index: 120;
  background: #0f1215;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 6px;
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.65);
}
.lang__menu a {
  display: block;
  padding: 9px 12px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
}
.lang__menu a:hover {
  background: rgba(232, 229, 220, 0.06);
  color: var(--ink);
}
.lang__menu a[aria-current='true'] {
  color: var(--gold);
}
@media (max-width: 1139px) {
  .header .wrap {
    padding-inline: 14px;
  }
  .header__bar {
    display: flex;
    padding-inline: 18px 8px;
  }
  .header__side {
    margin-inline-start: auto;
  }
}
@media (max-width: 479px) {
  .lang > summary span {
    display: none;
  }
  .header {
    padding-top: 10px;
  }
  .header__bar {
    gap: 4px;
    height: 56px;
    padding-inline: 14px 7px;
  }
  .header .logo img {
    height: 26px;
  }
  .header__side .btn--sm {
    padding: 8px 13px;
    font-size: 12.5px;
  }
}

.burger > summary {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid var(--line);
}
.burger__close,
.burger[open] .burger__open {
  display: none;
}
.burger[open] .burger__close {
  display: block;
}
@media (min-width: 1140px) {
  .burger {
    display: none;
  }
}
@media (min-width: 1140px) and (max-width: 1239px) {
  html[lang='fr'] .burger,
  html[lang='de'] .burger,
  html[lang='ru'] .burger,
  html[lang='tr'] .burger {
    display: block;
  }
}
/* قائمةُ الجوال بطاقةٌ تنسدل تحت الكبسولة بعرضها، لا صفحةٌ تغطي الشاشة من موضعٍ ثابت */
.mobilenav {
  position: absolute;
  top: calc(100% + 10px);
  inset-inline: 0;
  z-index: 99;
  background: #0d1013;
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 6px 18px 18px;
  /* [فحص 2026-10-13] ‎--menu-top‎ موضعُ القائمة الفعلي يقيسه site.js عند الفتح (شريطُ الأسعار فوق الترويسة على الرئيسية يُنزلها)،
     فتنتهي القائمةُ داخل الشاشة دائماً وزرُّ الدخول في آخرها يُرى؛ وبلا JavaScript تبقى القيمةُ السابقة */
  max-height: calc(100vh - var(--menu-top, 100px) - 10px);
  max-height: calc(100dvh - var(--menu-top, 100px) - 10px - env(safe-area-inset-bottom, 0px));
  overflow: auto;
  overscroll-behavior: contain;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
}
.mobilenav a:not(.btn) {
  display: block;
  padding: 13px 6px;
  font-size: 16.5px;
  font-weight: 700;
  border-bottom: 1px solid var(--line-soft);
}
.mobilenav .btn {
  width: 100%;
  margin-top: 12px;
  border-radius: 999px;
}

/* ---------- مسار التنقل ---------- */
.crumbs {
  padding-top: 18px;
}
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  font-size: 13px;
  color: var(--dim);
}
.crumbs li + li::before {
  content: '/';
  margin-inline-end: 4px;
  color: rgba(232, 229, 220, 0.25);
}
.crumbs a {
  color: var(--muted);
}
.crumbs a:hover {
  color: var(--gold);
}
.crumbs [aria-current] {
  color: var(--ink);
  font-weight: 700;
}

/* ---------- شريط الأسعار ---------- */
.ticker {
  /* خطٌّ ذهبيٌّ فوقه وتحته (المالك 2026-09-15): بلا الخط العلوي بدا ما بين الترويسة والشريط فراغاً بلا حدّ */
  border-top: 1px solid var(--gline);
  border-bottom: 1px solid var(--gline);
  background: var(--bg);
  overflow: hidden;
  direction: ltr;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.ticker__track {
  display: flex;
  width: max-content;
  /* يتحرك من أول رسمٍ لا بعد أول ردٍّ من الخادم (المالك 2026-09-17: «لازم فوري»): كان الشريط
     ينتظر صنف is-live الذي يضعه أول جلبٍ للأسعار، فيقف ثانيةً أو ثانيتين عند كل فتحة */
  animation: tick 60s linear infinite;
}
.ticker__set {
  display: flex;
}
.ticker:hover .ticker__track {
  animation-play-state: paused;
}
@keyframes tick {
  to {
    transform: translateX(-50%);
  }
}
.tick {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 22px;
  border-inline-end: 1px solid var(--line-soft);
  font-size: 12.5px;
  white-space: nowrap;
  line-height: 1.5;
}
.tick b {
  font-weight: 800;
  color: var(--ink);
  letter-spacing: 0.02em;
}
.tick__p {
  color: var(--muted);
  min-width: 5ch;
}
.tick__c {
  font-weight: 800;
  min-width: 6ch;
}
.tick__c.up {
  color: var(--up);
}
.tick__c.dn {
  color: var(--down);
}
/* [فحص 2026-10-13] سوقٌ مغلق: كلمةُ «مغلق» مكان نسبة التغيّر، والسعرُ الأخير خافت */
.tick__c.is-closed {
  font-weight: 700;
  color: var(--dim);
}
.tick.is-closed .tick__p {
  opacity: 0.6;
}

/* ---------- البطل ---------- */
/* تصميمُ المالك (2026-09-15): عنوانٌ في الوسط بلونٍ معدنيٍّ فضّي، ودعوةٌ ذهبيةٌ مضيئة، ومشهدُ المنصّة تحتهما بإطارٍ يضيء
   حدُّه العلوي ويذوب في الصفحة. الإضاءةُ تدرّجاتٌ ثابتة — لا طبقةَ حركةٍ تُثقل المعالج */
.hero {
  position: relative;
  isolation: isolate;
  padding: 88px 0 0;
}
.hero__fx {
  position: absolute;
  inset: -130px 0 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: radial-gradient(720px 360px at 50% 0%, rgba(212, 175, 55, 0.1), transparent 72%);
}
.hero__beam {
  position: absolute;
  top: 90px;
  left: 7%;
  width: 220px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(212, 175, 55, 0.075), transparent);
}
.hero__beam--end {
  left: auto;
  right: 7%;
}
/* خيطا ضوءٍ عند الطرفين بمستوى العنوان — يذوبان قبل النص فلا يعبرانه */
.hero__streak {
  position: absolute;
  top: 356px;
  left: 0;
  width: 19%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(236, 213, 145, 0.55) 60%, transparent);
  box-shadow: 0 0 22px 3px rgba(212, 175, 55, 0.16);
}
.hero__streak--end {
  left: auto;
  right: 0;
  background: linear-gradient(270deg, transparent, rgba(236, 213, 145, 0.55) 60%, transparent);
}
.hero__grid {
  display: grid;
  gap: 48px;
  align-items: center;
  position: relative;
}
@media (min-width: 1024px) {
  .hero__grid {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  }
}
.hero__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.eyebrow--plain::before {
  display: none;
}
.hero .eyebrow {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
  margin-bottom: 18px;
}
.hero h1 {
  max-width: 880px;
  font-size: clamp(36px, 5.4vw, 68px);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.02em;
  padding-bottom: 0.06em;
  text-wrap: balance;
  /* فضّةٌ معدنية: أفتح في الوسط وأغمق عند الطرفين وفي أسفل الحروف */
  background: linear-gradient(180deg, rgba(6, 8, 9, 0) 42%, rgba(6, 8, 9, 0.34) 100%), linear-gradient(90deg, #8f8b82 0%, #f6f3ea 34%, #f6f3ea 66%, #8f8b82 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero h1 .accent {
  background: none;
}
.accent {
  background: linear-gradient(100deg, var(--gold-300), var(--gold) 45%, var(--gold-600));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__sub {
  color: var(--muted);
  font-size: clamp(15.5px, 1.6vw, 18.5px);
  margin-top: 20px;
  max-width: 60ch;
  text-wrap: balance;
}
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
.hero__cta--center {
  justify-content: center;
  margin-top: 34px;
}
.hero .btn--gold {
  box-shadow: 0 0 0 1px rgba(236, 213, 145, 0.3) inset, 0 14px 54px rgba(212, 175, 55, 0.34);
}
.hero__note {
  margin-top: 16px;
  font-size: 13px;
  color: var(--dim);
  display: flex;
  align-items: center;
  gap: 8px;
}
.hero__note svg {
  flex: none;
  color: var(--gold);
}
/* الملاحظةُ تحت الدعوة في الوسط: الأيقونةُ جزءٌ من السطر فلا تبقى معلّقةً على الطرف حين يلتفّ النص */
.hero__copy .hero__note {
  display: block;
  text-wrap: balance;
}
.hero__copy .hero__note svg {
  display: inline-block;
  vertical-align: -2px;
  margin-inline-end: 7px;
}
.hero__copy .hero__note span {
  display: inline;
}
.hero__show {
  position: relative;
  margin-top: 78px;
}
/* بقعةُ الضوء فوق حدّ الإطار — مصدرُ الإضاءة في التصميم */
.hero__show::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -150px;
  width: min(820px, 92%);
  height: 270px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(212, 175, 55, 0.4), rgba(212, 175, 55, 0.12) 55%, transparent);
  filter: blur(18px);
  pointer-events: none;
}
.hero__frame {
  position: relative;
  max-width: 1080px;
  margin-inline: auto;
  padding: 12px 12px 0;
  border-radius: 30px 30px 0 0;
  border: 1px solid rgba(232, 229, 220, 0.12);
  border-bottom: 0;
  background: linear-gradient(180deg, rgba(232, 229, 220, 0.09), rgba(232, 229, 220, 0.025) 42%, transparent 85%);
  -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent 94%);
  mask-image: linear-gradient(180deg, #000 40%, transparent 94%);
}
.hero__frame::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 50%;
  width: 62%;
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--gold-300) 50%, transparent);
  box-shadow: 0 0 20px 2px rgba(212, 175, 55, 0.5);
}

/* ---------- مشهد المنصّة ---------- */
.stage {
  position: relative;
  padding: 14px 4px 34px;
  min-width: 0;
}
.stage::after {
  content: '';
  position: absolute;
  inset-inline: 8%;
  bottom: -8px;
  height: 130px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(212, 175, 55, 0.22), transparent 70%);
  filter: blur(34px);
  pointer-events: none;
}
.term {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: #060809;
  border: 1px solid var(--gline);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.85);
  direction: ltr;
  font-size: 11px;
  line-height: 1.5;
}
html[dir='rtl'] .term {
  direction: rtl;
}
.term__top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-soft);
  background: rgba(11, 13, 16, 0.5);
}
.dots {
  display: flex;
  gap: 6px;
}
.dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #f43f5e;
}
.dots i:nth-child(2) {
  background: #d4af37;
}
.dots i:nth-child(3) {
  background: #10b981;
}
.term__tabs {
  display: flex;
  gap: 2px;
}
.term__tab {
  padding: 5px 12px;
  border-radius: 8px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--dim);
}
.term__tab.is-on {
  color: var(--gold);
  background: rgba(212, 175, 55, 0.09);
}
.term__acctchip {
  margin-inline-start: auto;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--muted);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 3px 9px;
  white-space: nowrap;
}
.term__acctchip b {
  color: var(--ink);
}
.term__dep {
  background: var(--btn-gold);
  color: var(--on-gold);
  font-size: 11px;
  font-weight: 800;
  border-radius: 8px;
  padding: 4px 11px;
}
.term__acct {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  padding: 6px 14px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 10.5px;
  color: var(--dim);
}
.term__acct b {
  color: var(--ink);
  font-weight: 700;
  padding: 0 5px;
}
.term__body {
  display: flex;
}
.op {
  width: 190px;
  flex: none;
  border-inline-end: 1px solid var(--line-soft);
  padding: 12px;
  background: rgba(11, 13, 16, 0.35);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.op__head {
  display: flex;
  align-items: center;
  gap: 9px;
}
.op__head b {
  font-size: 13px;
}
/* شعاراتُ الأزواج (المالك 2026-09-16: كما في المنصّة): علمان متراكبان، والكريبتو قرصُه وحدَه — من coins.mjs */
.paircoin {
  position: relative;
  display: inline-block;
  flex: none;
  direction: ltr;
}
.paircoin--one {
  position: static;
  display: inline-flex;
}
.coin {
  display: block;
}
.paircoin__b,
.paircoin__q {
  position: absolute;
}
.paircoin__b {
  top: 0;
  left: 0;
  z-index: 1;
}
.paircoin__q {
  bottom: 0;
  right: 0;
}
.wl__sym {
  display: flex;
  align-items: center;
  gap: 7px;
}
.op__bs {
  display: flex;
  gap: 7px;
}
.op__buy,
.op__sell {
  flex: 1;
  border-radius: 9px;
  padding: 6px;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
}
.op__buy {
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.45);
  color: var(--up);
}
.op__sell {
  background: rgba(244, 63, 94, 0.1);
  border: 1px solid rgba(244, 63, 94, 0.45);
  color: var(--down);
}
.op__buy b,
.op__sell b {
  display: block;
  font-size: 12.5px;
  font-weight: 800;
}
.op__tabs {
  display: flex;
  background: rgba(232, 229, 220, 0.05);
  border-radius: 8px;
  padding: 3px;
  gap: 3px;
}
.op__tabs span {
  flex: 1;
  text-align: center;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--dim);
  padding: 3px 0;
  border-radius: 6px;
}
.op__tabs .is-on {
  background: rgba(232, 229, 220, 0.1);
  color: var(--ink);
}
.op__lbl {
  font-size: 9.5px;
  color: var(--dim);
  margin-bottom: -4px;
}
.op__field {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 5px 8px;
}
.op__field .st {
  width: 16px;
  text-align: center;
  color: var(--dim);
  font-weight: 800;
  flex: none;
}
.op__ph {
  flex: 1;
  text-align: center;
  font-size: 10.5px;
}
.op__ph--dim {
  color: var(--dim);
  font-size: 9.5px;
}
.term__chart {
  flex: 1;
  min-width: 0;
  padding: 4px 4px 0;
  display: flex;
  flex-direction: column;
}
.term__chart .chart {
  flex: 1;
  width: 100%;
  min-height: 210px;
  height: 100%;
}
.tc__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px 2px;
}
.tc__m1 {
  background: rgba(212, 175, 55, 0.08);
  border: 1px solid rgba(212, 175, 55, 0.55);
  color: var(--gold);
  font-weight: 900;
  font-size: 10px;
  border-radius: 6px;
  padding: 1px 8px;
}
.tc__btn {
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 9.5px;
  color: var(--muted);
  font-weight: 700;
}
.term__tabsbar {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 8px 12px;
  border-top: 1px solid var(--line-soft);
  background: rgba(11, 13, 16, 0.5);
}
.term__tabsbar span {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--dim);
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  padding: 3px 9px;
}
.term__tabsbar .is-on {
  background: var(--btn-gold);
  color: var(--on-gold);
  border-color: transparent;
}
/* الشارتُ يمضي: نسختان من السلسلة تنزلقان بعرضها فتعودان إلى موضعهما بلا قفزة — زخرفةٌ لا سعر */
@media (prefers-reduced-motion: no-preference) {
  .chart__run {
    animation: chartrun 36s linear 1.2s infinite;
  }
  .stage.is-idle .chart__run {
    animation-play-state: paused;
  }
}
@keyframes chartrun {
  to {
    transform: translateX(-560px);
  }
}
/* نبضةُ السعر عند تغيّره — خضراء صعوداً وحمراء هبوطاً، كما في المنصّة */
@media (prefers-reduced-motion: no-preference) {
  .is-up,
  .is-dn {
    animation: tickflash 0.9s var(--ease);
    border-radius: 4px;
  }
}
@keyframes tickflash {
  0% {
    background: transparent;
  }
  18% {
    background: var(--flash);
    color: var(--flash-ink);
  }
  100% {
    background: transparent;
  }
}
.is-up {
  --flash: rgba(16, 185, 129, 0.22);
  --flash-ink: #6ee7b7;
}
.is-dn {
  --flash: rgba(244, 63, 94, 0.2);
  --flash-ink: #fda4af;
}
@media (prefers-reduced-motion: no-preference) {
  .term .chart rect,
  .term .chart line {
    animation: candlein 0.6s var(--ease) backwards;
  }
  .term .chart rect:nth-of-type(4n + 1),
  .term .chart line:nth-of-type(4n + 1) {
    animation-delay: 0.08s;
  }
  .term .chart rect:nth-of-type(4n + 2),
  .term .chart line:nth-of-type(4n + 2) {
    animation-delay: 0.16s;
  }
  .term .chart rect:nth-of-type(4n + 3),
  .term .chart line:nth-of-type(4n + 3) {
    animation-delay: 0.24s;
  }
}
@keyframes candlein {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}
/* الجوال: المشهدُ كاملاً بعرضه الطبيعي مصغّراً كوحدةٍ واحدة — لا لوحةَ تُحذف ولا نصَّ يلتفّ */
@media (max-width: 820px) {
  .stage {
    padding: 0 0 8px;
    overflow: clip;
  }
  .scene {
    width: 575px;
    margin-inline: auto;
    zoom: var(--scene-zoom, 0.6);
  }
  .stage::after {
    height: 64px;
    filter: blur(22px);
  }
}
@media (max-width: 820px) and (min-width: 600px) {
  .scene {
    --scene-zoom: 1;
  }
}
@media (max-width: 820px) {
  .stage--wide .scene {
    width: 900px;
    zoom: var(--scene-zoom, 0.36);
  }
  .stage--wide .term__chart .chart {
    min-height: 380px;
  }
}
@media (max-width: 599px) and (min-width: 400px) {
  .scene {
    --scene-zoom: 0.68;
  }
}

/* المشهدُ العريض تحت بطل الرئيسية: قائمةُ أسعارٍ حيّة، والشارتُ في الوسط، ولوحةُ الأمر في الطرف */
.stage--wide {
  padding: 0;
}
.stage--wide::after {
  display: none;
}
.stage--wide .term {
  border-radius: 20px 20px 0 0;
  border-color: rgba(232, 229, 220, 0.08);
  box-shadow: none;
}
.stage--wide .term__chart {
  order: 1;
}
.stage--wide .op {
  order: 2;
  border-inline-end: 0;
  border-inline-start: 1px solid var(--line-soft);
}
/* قائمةُ الأزواج في كل المقاسات (المالك 2026-09-16: «رجعها مثل ما كانت بس خليها كاملة») — على الجوال يُصغَّر
   المشهدُ كاملاً كوحدةٍ واحدة بدل حذف القائمة */
.stage--wide .wl {
  display: block;
  width: 290px;
  flex: none;
  border-inline-end: 1px solid var(--line-soft);
  background: rgba(11, 13, 16, 0.35);
}
.stage--wide .op {
  width: 214px;
}
.stage--wide .term__chart .chart {
  min-height: 330px;
}
.wl__head,
.wl__row {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr 0.8fr;
  gap: 6px;
  align-items: center;
  padding: 7px 14px;
}
.wl__head {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--dim);
  border-bottom: 1px solid var(--line-soft);
}
.wl__row {
  font-size: 11px;
  border-bottom: 1px solid rgba(232, 229, 220, 0.035);
}
.wl__row b {
  font-weight: 800;
  color: var(--ink);
}
.wl__row .num {
  color: var(--muted);
}
/* الأرقامُ ومحاذاةُ عناوينها في طرفٍ واحد بكل اتجاه — الخانةُ الرقمية معزولةٌ ltr فالمحاذاةُ مادّيةٌ عن قصد */
.wl__row > span,
.wl__head > span + span {
  text-align: right;
}
html[dir='rtl'] .wl__row > span,
html[dir='rtl'] .wl__head > span + span {
  text-align: left;
}
.wl__row.is-on {
  background: rgba(212, 175, 55, 0.06);
  box-shadow: inset 2px 0 0 var(--gold);
}
html[dir='rtl'] .wl__row.is-on {
  box-shadow: inset -2px 0 0 var(--gold);
}
.wl .up {
  color: var(--up);
}
.wl .dn {
  color: var(--down);
}

/* ---------- شريط الأرقام ---------- */
.stats {
  background: linear-gradient(180deg, #0b0d10, #07090b);
  border-block: 1px solid var(--gline);
}
.stats__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 820px) {
  .stats__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
.stat {
  padding: 36px 20px;
  text-align: center;
  position: relative;
}
.stat + .stat::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 24%;
  bottom: 24%;
  width: 1px;
  background: var(--gline);
}
@media (max-width: 819px) {
  .stat:nth-child(3)::before {
    display: none;
  }
}
.stat__v {
  font-size: clamp(34px, 4.4vw, 54px);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.1;
  background: linear-gradient(180deg, var(--gold-300), var(--gold) 60%, var(--gold-600));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat__l {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--muted);
  margin-top: 8px;
}

/* ---------- بطاقات عامة ---------- */
.bcard,
.paycard,
.tier,
.doccard,
.facts,
.faq details,
.tablewrap,
.flowbox,
.gitem,
.toc,
.faqside__card,
.spec,
.paynotes,
.mcard,
.channel,
.sidecard,
.kv,
.fitem,
.note {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 16px 44px -24px rgba(0, 0, 0, 0.55);
}
@media (hover: hover) and (pointer: fine) {
  .bcard::before,
  .tier::before,
  .paycard::before,
  .doccard::before,
  .mcard::before,
  .channel::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.3s var(--ease);
    pointer-events: none;
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(212, 175, 55, 0.08), transparent 62%);
  }
  .bcard:hover::before,
  .tier:hover::before,
  .paycard:hover::before,
  .doccard:hover::before,
  .mcard:hover::before,
  .channel:hover::before {
    opacity: 1;
  }
}

.bento {
  display: grid;
  gap: 14px;
  margin-top: 44px;
}
@media (min-width: 760px) {
  .bento {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .bento {
    grid-template-columns: repeat(4, 1fr);
  }
  .bento > :nth-child(1) {
    grid-column: span 2;
    grid-row: span 2;
  }
  .bento > :nth-child(2) {
    grid-column: span 2;
  }
}
.bcard {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  padding: 26px;
  background: var(--card);
  border: 1px solid var(--line-soft);
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.bcard:hover {
  border-color: rgba(212, 175, 55, 0.3);
  transform: translateY(-3px);
}
.bcard__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(212, 175, 55, 0.09);
  border: 1px solid rgba(212, 175, 55, 0.2);
  color: var(--gold);
  margin-bottom: 16px;
  transition: transform 0.3s var(--ease);
}
.bcard:hover .bcard__icon {
  transform: rotate(-6deg) scale(1.1);
}
.bcard h3 {
  font-size: 17px;
  margin-bottom: 6px;
}
.bcard p {
  color: var(--muted);
  font-size: 14px;
  max-width: 52ch;
}
.gnum {
  position: absolute;
  top: 24px;
  /* خاصّيةٌ مادّية عن قصد: العنصرُ معزولٌ باتجاه ltr فالمنطقيةُ تُحسب باتجاهه لا باتجاه الصفحة */
  right: 22px;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.3;
  color: var(--gold);
  background: rgba(212, 175, 55, 0.09);
  border: 1px solid rgba(212, 175, 55, 0.22);
  border-radius: 9px;
  padding: 4px 11px;
  pointer-events: none;
  direction: ltr;
  unicode-bidi: isolate;
}
html[dir='rtl'] .gnum {
  right: auto;
  left: 22px;
}
.bcard--xl {
  padding: 34px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 260px;
  background: linear-gradient(150deg, rgba(212, 175, 55, 0.1), var(--card) 60%);
}
.bcard--xl .gnum {
  font-size: 22px;
  padding: 6px 14px;
}
.bcard--xl .bcard__icon {
  width: 52px;
  height: 52px;
  margin-bottom: auto;
}
.bcard--xl h3 {
  font-size: 22px;
  margin-top: 22px;
}
.bcard--xl p {
  font-size: 15px;
}

/* ---------- الأسواق (الرئيسية) ---------- */
.mlist {
  margin-top: 46px;
  border-top: 1px solid var(--line-soft);
}
.mrow {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 22px 18px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--gold);
  transition: background 0.25s var(--ease), border-radius 0.25s var(--ease);
}
.mrow:hover {
  background: var(--gold);
  border-radius: 14px;
  border-bottom-color: transparent;
  color: var(--on-gold);
}
.mrow__ico {
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(212, 175, 55, 0.08);
}
.mrow:hover .mrow__ico {
  background: rgba(6, 8, 9, 0.14);
}
.mrow__main {
  flex: 1;
  min-width: 0;
}
.mrow__main b {
  display: block;
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
}
.mrow__main span {
  color: var(--muted);
  font-size: 13.5px;
}
.mrow:hover .mrow__main b,
.mrow:hover .mrow__main span {
  color: var(--on-gold);
}
.mrow__spark {
  flex: none;
  opacity: 0.9;
}
.mrow__count {
  flex: none;
  text-align: end;
  min-width: 70px;
}
.mrow__count b {
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 900;
  line-height: 1;
  display: block;
}
.mrow__count span {
  font-size: 11px;
  color: var(--dim);
}
.mrow:hover .mrow__count span {
  color: rgba(6, 8, 9, 0.6);
}
@media (max-width: 600px) {
  .mrow__spark {
    display: none;
  }
  .mrow {
    gap: 14px;
    padding: 18px 10px;
  }
}

/* ---------- الخطوات ---------- */
.steps {
  display: grid;
  margin-top: 44px;
  position: relative;
  counter-reset: s;
  max-width: 760px;
  margin-inline: auto;
}
.steps::before {
  content: '';
  position: absolute;
  inset-inline-start: 28px;
  top: 18px;
  bottom: 18px;
  width: 2px;
  background: var(--line-soft);
}
.step {
  position: relative;
  padding: 0 0 30px;
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 20px;
  align-items: start;
}
.step:last-child {
  padding-bottom: 0;
}
.step__n {
  counter-increment: s;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--night);
  border: 2px solid var(--line);
  font-size: 17px;
  font-weight: 900;
  color: var(--dim);
  position: relative;
  z-index: 1;
  box-shadow: 0 0 0 6px var(--bg);
  transition: background 0.9s var(--ease), color 0.9s var(--ease), border-color 0.9s var(--ease), box-shadow 0.9s var(--ease), transform 0.9s var(--ease);
}
.step__n::before {
  content: counter(s, decimal-leading-zero);
}
.step.is-lit .step__n,
html.no-js .step__n {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--on-gold);
  box-shadow: 0 0 0 6px var(--bg), 0 0 34px rgba(212, 175, 55, 0.45);
}
.step.is-lit .step__n {
  transform: scale(1.06);
}
.step__body {
  padding-top: 9px;
}
.step h3 {
  font-size: 17px;
  margin-bottom: 4px;
}
.step p {
  color: var(--muted);
  font-size: 14.5px;
}

/* ---------- المنصّة ---------- */
.pfsplit {
  display: grid;
  gap: 40px;
}
@media (min-width: 1024px) {
  .pfsplit {
    grid-template-columns: 0.85fr 1.15fr;
    gap: 70px;
  }
  .pfsticky {
    position: sticky;
    top: 110px;
    align-self: start;
  }
}
.pfrow {
  display: flex;
  gap: 16px;
  padding: 20px 6px;
  border-bottom: 1px solid var(--line-soft);
}
.pfrow:last-child {
  border-bottom: 0;
}
.pfrow__ico {
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: rgba(212, 175, 55, 0.08);
  border: 1px solid rgba(212, 175, 55, 0.16);
  color: var(--gold);
}
.pfrow h3,
.fitem h3 {
  font-size: 16px;
  margin-bottom: 3px;
}
.pfrow p,
.fitem p {
  color: var(--muted);
  font-size: 14px;
}
.specs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}
.spec {
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  padding: 10px 14px;
  background: var(--card);
  min-width: 96px;
}
.spec b {
  display: block;
  font-weight: 900;
  font-size: 21px;
  color: var(--gold);
  line-height: 1.2;
}
.spec span {
  font-size: 12px;
  color: var(--dim);
}
.fgrid {
  display: grid;
  gap: 12px;
  margin-top: 28px;
}
@media (min-width: 760px) {
  .fgrid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1100px) {
  .fgrid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.fitem {
  display: flex;
  gap: 14px;
  padding: 20px;
  border-radius: 16px;
  border: 1px solid var(--line-soft);
  background: var(--card);
}

/* ---------- الحسابات ---------- */
/* شبكةُ الحسابات تملأ الصفّ مهما كان عددُها: كانت خمسة أعمدة ثابتة فبقي عمودٌ فارغ حين صارت الأنواع أربعة */
.tiers {
  display: grid;
  gap: 14px;
  margin-top: 32px;
}
@media (min-width: 700px) {
  .tiers {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1100px) {
  .tiers {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  }
}
.tier {
  position: relative;
  border: 1px solid var(--gline);
  border-radius: 16px;
  background: linear-gradient(180deg, #0d1013, #0a0c0f);
  padding: 24px 16px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  text-align: center;
  transition: border-color 0.3s, transform 0.3s;
}
.tier:hover {
  border-color: rgba(212, 175, 55, 0.42);
  transform: translateY(-3px);
}
.tier--pop {
  border-color: rgba(212, 175, 55, 0.5);
  box-shadow: 0 22px 60px -34px rgba(212, 175, 55, 0.45);
}
.tier__pop {
  position: absolute;
  top: -11px;
  inset-inline: 0;
  margin-inline: auto;
  width: max-content;
  background: var(--btn-gold);
  color: var(--on-gold);
  font-size: 11px;
  font-weight: 800;
  border-radius: 999px;
  padding: 1px 11px;
}
.tier__name {
  font-size: 21px;
}
.tier__code {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  background: rgba(232, 229, 220, 0.07);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 1px 11px;
  direction: ltr;
}
.tier__best {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.6;
  min-height: 40px;
}
.tier__rows {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 4px;
  text-align: start;
}
.tier__row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
}
.tier__row i {
  flex: 1;
  min-width: 10px;
  border-bottom: 1px dotted rgba(232, 229, 220, 0.2);
  transform: translateY(-3px);
}
.tier__row b {
  color: var(--ink);
  font-weight: 800;
  white-space: nowrap;
}
.tier__cta {
  align-self: stretch;
  margin-top: auto;
  padding-top: 6px;
}
.tier__cta .btn {
  width: 100%;
}

/* ---------- الجداول ---------- */
.tablewrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  background: rgba(12, 15, 18, 0.6);
  margin-top: 28px;
}
.tablewrap::-webkit-scrollbar {
  height: 6px;
}
.tablewrap::-webkit-scrollbar-thumb {
  background: rgba(212, 175, 55, 0.3);
  border-radius: 3px;
}
table th,
table td {
  padding: 13px 16px;
  text-align: start;
  font-size: 14px;
  white-space: nowrap;
  vertical-align: middle;
}
thead th,
thead td {
  background: rgba(212, 175, 55, 0.05);
  color: var(--gold);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.03em;
  border-bottom: 1px solid rgba(212, 175, 55, 0.14);
}
tbody tr {
  border-bottom: 1px solid var(--line-soft);
}
tbody tr:last-child {
  border-bottom: 0;
}
tbody tr:hover {
  background: rgba(212, 175, 55, 0.035);
}
tbody th {
  font-weight: 800;
  color: var(--ink);
}
tbody th a {
  color: var(--gold);
}
.sym {
  font-weight: 800;
  letter-spacing: 0.02em;
  direction: ltr;
  unicode-bidi: isolate;
}
.th__name {
  display: block;
  font-size: 15px;
  color: var(--ink);
  letter-spacing: 0;
}
.th__code {
  display: inline-block;
  font-size: 10.5px;
  color: var(--dim);
  direction: ltr;
}
.tablewrap--compare td {
  text-align: center;
  white-space: normal;
  min-width: 120px;
}
.tablewrap--compare tbody th {
  color: var(--muted);
  font-weight: 700;
}
.tablewrap--compare thead th {
  text-align: center;
}
.tfoot-note {
  margin-top: 14px;
  font-size: 13px;
  color: var(--dim);
}
.stamp {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--dim);
}
.stamp svg {
  color: var(--gold);
}

/* ---------- الدفع ---------- */
.pay {
  display: grid;
  gap: 14px;
  margin-top: 40px;
  align-items: stretch;
}
@media (min-width: 900px) {
  .pay {
    grid-template-columns: 1fr 1fr;
  }
}
.paycard {
  position: relative;
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  padding: 26px;
  background: var(--card);
}
.paycard h3 {
  font-size: 18px;
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 10px;
}
.paycard h3 svg {
  color: var(--gold);
}
.paycard > p {
  color: var(--muted);
  font-size: 14.5px;
}
.paypoints {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.paypoints li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.7;
}
.paypoints li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--gold);
  flex: none;
  margin-top: 9px;
  transform: rotate(45deg);
}
.paynotes {
  display: grid;
  margin-top: 28px;
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  background: var(--card);
  overflow: hidden;
}
@media (min-width: 900px) {
  .paynotes {
    grid-template-columns: repeat(3, 1fr);
  }
  .pnote + .pnote {
    border-inline-start: 1px solid var(--line-soft);
  }
}
@media (max-width: 899px) {
  .pnote + .pnote {
    border-top: 1px solid var(--line-soft);
  }
}
.pnote {
  padding: 20px 22px;
}
.pnote h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  margin-bottom: 8px;
}
.pnote h3 svg {
  color: var(--gold);
  flex: none;
}
.pnote p {
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.8;
}
.flowbox {
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  background: var(--card);
  overflow: hidden;
  display: grid;
  margin-top: 28px;
}
@media (min-width: 701px) {
  .flowbox {
    grid-template-columns: 1fr 1fr;
  }
  .flowcol + .flowcol {
    border-inline-start: 1px solid var(--line-soft);
  }
}
@media (max-width: 700px) {
  .flowcol + .flowcol {
    border-top: 1px solid var(--line-soft);
  }
}
.flowcol__h {
  padding: 15px 22px;
  font-size: 15px;
  color: var(--gold);
  background: rgba(212, 175, 55, 0.05);
  border-bottom: 1px solid rgba(212, 175, 55, 0.14);
}
.flowcell {
  padding: 18px 22px;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.8;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.flowcell + .flowcell {
  border-top: 1px solid var(--line-soft);
}
.flowcell i {
  font-style: normal;
  flex: none;
  width: 25px;
  height: 25px;
  border-radius: 8px;
  background: rgba(212, 175, 55, 0.1);
  color: var(--gold);
  font-weight: 900;
  font-size: 12px;
  display: grid;
  place-items: center;
  margin-top: 2px;
}

/* ---------- الأمان ---------- */
.secgrid {
  display: grid;
  gap: 34px 44px;
  margin-top: 44px;
}
@media (min-width: 700px) {
  .secgrid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .secgrid {
    grid-template-columns: repeat(6, 1fr);
  }
  .srule {
    grid-column: span 2;
  }
  /* ثلاثةٌ في الصف، وصفٌّ أخيرٌ بعنصرين يتقاسمان عرضه بدل فراغٍ في آخره */
  .srule:nth-child(3n + 1):nth-last-child(2),
  .srule:nth-child(3n + 2):last-child {
    grid-column: span 3;
  }
}
.srule {
  position: relative;
  padding-top: 18px;
}
.srule::before {
  content: '';
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 34px;
  height: 3px;
  border-radius: 2px;
  background: var(--gold);
  transition: width 0.45s var(--ease);
}
.srule:hover::before {
  width: 74px;
}
.srule h3 {
  font-size: 16px;
  margin-bottom: 6px;
}
.srule p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.8;
}

/* ---------- الوثائق ---------- */
.doccards {
  display: grid;
  gap: 14px;
  margin-top: 28px;
}
@media (min-width: 760px) {
  .doccards {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1100px) {
  .doccards:not(.doccards--2) {
    grid-template-columns: repeat(4, 1fr);
  }
}
.doccard {
  position: relative;
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  background: var(--card);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.doccard:hover {
  border-color: rgba(212, 175, 55, 0.35);
  transform: translateY(-3px);
}
.doccard__ico {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(212, 175, 55, 0.08);
  color: var(--gold);
}
.doccard b,
.doccard__h {
  font-size: 16px;
}
.doccard > span:last-child {
  font-size: 13px;
  color: var(--gold);
  font-weight: 700;
  margin-top: auto;
}
.doccard p {
  color: var(--muted);
  font-size: 14px;
}
.doccard__meta {
  color: var(--dim) !important;
  font-weight: 600 !important;
}

/* ---------- الأسئلة ---------- */
.faq {
  max-width: 880px;
  margin-top: 28px;
}
.faq details {
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: var(--card);
  margin-bottom: 10px;
  transition: border-color 0.3s;
}
.faq details[open] {
  border-color: rgba(212, 175, 55, 0.3);
}
.faq summary {
  padding: 17px 22px;
  font-weight: 700;
  font-size: 15.5px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.faq summary::after {
  content: '';
  margin-inline-start: auto;
  width: 9px;
  height: 9px;
  flex: none;
  border-inline-end: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: rotate(45deg);
  transition: transform 0.25s var(--ease);
}
.faq details[open] summary::after {
  transform: rotate(-135deg);
}
.faq__a {
  padding: 0 22px 18px;
  color: var(--muted);
  font-size: 14.5px;
}
.faqwrap {
  display: grid;
  gap: 30px;
  align-items: start;
}
@media (min-width: 1024px) {
  .faqwrap {
    grid-template-columns: minmax(0, 1fr) 300px;
  }
  .faqside {
    position: sticky;
    top: 96px;
  }
}
.faqgroup + .faqgroup {
  margin-top: 44px;
}
.faqgroup .h2 {
  font-size: clamp(22px, 2.6vw, 30px);
}
.faqside {
  display: grid;
  gap: 14px;
}
.faqside__card {
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 16px;
  padding: 22px;
  background: linear-gradient(160deg, rgba(212, 175, 55, 0.08), var(--card) 60%);
}
.faqside__h {
  font-size: 17px;
  margin-bottom: 6px;
}
.faqside__card p {
  font-size: 13.5px;
  color: var(--muted);
  margin-bottom: 14px;
}

/* ---------- الصفحات الداخلية ---------- */
.phero {
  position: relative;
  padding: 34px 0 30px;
}
.phero__h1 {
  font-size: clamp(32px, 4.6vw, 52px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  max-width: 22ch;
}
.phero__lead {
  font-size: clamp(16px, 1.8vw, 19px);
}
.phero--split {
  padding: 34px 0 20px;
}
.phero--split .phero__h1 {
  max-width: none;
}
.kv {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border: 1px solid var(--gline);
  border-radius: 16px;
  background: linear-gradient(180deg, #0b0d10, #07090b);
  overflow: hidden;
}
@media (min-width: 900px) {
  .kv {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
}
.kv__i {
  padding: 16px 18px;
  border-bottom: 1px solid var(--line-soft);
  border-inline-end: 1px solid var(--line-soft);
}
.kv dt {
  font-size: 12px;
  color: var(--dim);
  font-weight: 700;
}
.kv dd {
  font-size: 17px;
  font-weight: 800;
  color: var(--ink);
  margin-top: 2px;
}
.kv dd .num {
  color: var(--gold);
}
.split {
  display: grid;
  gap: 30px;
  margin-top: 40px;
  align-items: start;
}
@media (min-width: 1024px) {
  .split {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 56px;
  }
  .side {
    position: sticky;
    top: 96px;
  }
}
.sidecard {
  display: grid;
  gap: 12px;
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 18px;
  padding: 24px;
  background: linear-gradient(160deg, rgba(212, 175, 55, 0.09), var(--card) 60%);
}
.sidecard__h {
  font-size: 19px;
}
.sidecard p {
  color: var(--muted);
  font-size: 14px;
}
.prose {
  max-width: 78ch;
}
.prose__sec + .prose__sec {
  margin-top: 36px;
}
.prose__h,
.prose > h2 {
  font-size: clamp(21px, 2.4vw, 27px);
  margin-bottom: 12px;
}
.prose > h2 {
  margin-top: 34px;
}
.prose > h3 {
  font-size: 18px;
  margin: 22px 0 8px;
}
.prose__sec p,
.prose > p {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.95;
}
.prose__sec p + p,
.prose > p + p {
  margin-top: 12px;
}
.prose p strong,
.ticks strong {
  color: var(--ink);
}
.prose__sec p a,
.prose > p a,
.prose > ul a {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.prose--doc {
  max-width: none;
}
.ticks {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}
.ticks li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.85;
}
.ticks svg {
  flex: none;
  color: var(--gold);
  margin-top: 6px;
}
.ticks--plain li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--gold);
  flex: none;
  margin-top: 11px;
  transform: rotate(45deg);
}
.prose .tablewrap {
  margin-top: 18px;
}
.risk {
  margin-top: 44px;
  border: 1px solid rgba(244, 63, 94, 0.3);
  background: rgba(244, 63, 94, 0.05);
  border-radius: 16px;
  padding: 22px 24px;
}
.risk__h {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #f7a0ae;
  font-size: 16px;
  margin-bottom: 6px;
}
.risk p {
  color: #d9b7b4;
  font-size: 14px;
}
.risk__more {
  display: inline-block;
  margin-top: 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: #f7a0ae;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.related {
  margin-top: 44px;
}
.related__h {
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 12px;
}
.related ul {
  display: grid;
  gap: 10px;
}
@media (min-width: 760px) {
  .related ul {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
}
.related a {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  height: 100%;
  padding: 15px 44px 15px 18px;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: var(--card);
  transition: border-color 0.25s, transform 0.25s var(--ease);
}
html[dir='rtl'] .related a {
  padding: 15px 18px 15px 44px;
}
.related a:hover {
  border-color: rgba(212, 175, 55, 0.35);
  transform: translateY(-2px);
}
.related b {
  font-size: 15px;
}
.related span {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
}
.related__arr {
  position: absolute;
  inset-inline-end: 16px;
  top: 50%;
  margin-top: -8px;
  color: var(--gold);
}
html[dir='rtl'] .related__arr {
  transform: scaleX(-1);
}

.mcards {
  display: grid;
  gap: 14px;
}
@media (min-width: 700px) {
  .mcards {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1100px) {
  .mcards {
    grid-template-columns: repeat(3, 1fr);
  }
}
.mcard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  background: var(--card);
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.mcard:hover {
  border-color: rgba(212, 175, 55, 0.35);
  transform: translateY(-3px);
}
.mcard__ico {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(212, 175, 55, 0.09);
  color: var(--gold);
  margin-bottom: 6px;
}
.mcard__h {
  font-size: 21px;
}
.mcard p {
  color: var(--muted);
  font-size: 14px;
}
.mcard__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 6px;
  font-size: 13px;
  color: var(--dim);
  margin-top: 4px;
}
.mcard__meta b {
  color: var(--gold);
  font-size: 15px;
}
.mcard__meta i {
  font-style: normal;
  opacity: 0.5;
  margin-inline: 4px;
}
.mcard__go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 8px;
  font-weight: 800;
  font-size: 14px;
  color: var(--gold);
}

.guide__g {
  display: grid;
  gap: 12px;
  margin-top: 28px;
}
@media (min-width: 900px) {
  .guide__g {
    grid-template-columns: repeat(3, 1fr);
  }
}
.gitem {
  border: 1px solid var(--line-soft);
  border-inline-start: 3px solid var(--gold);
  border-radius: 14px;
  background: var(--card);
  padding: 20px;
}
.gitem h3 {
  font-size: 16px;
  margin-bottom: 6px;
}
.gitem p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.8;
}

.about {
  display: grid;
  gap: 36px;
}
@media (min-width: 1024px) {
  .about {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 60px;
  }
}
.facts {
  border-radius: 18px;
  padding: 26px;
  background: var(--card);
  border: 1px solid var(--line-soft);
  border-top: 3px solid var(--gold);
  align-self: start;
}
.facts__h {
  font-size: 17px;
  margin-bottom: 12px;
}
.facts li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 9px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 14.5px;
  color: var(--muted);
}
.facts li:last-child {
  border-bottom: 0;
}
.facts li::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--gold);
  flex: none;
  margin-top: 10px;
  transform: rotate(45deg);
}

.channels {
  display: grid;
  gap: 14px;
}
@media (min-width: 900px) {
  .channels {
    grid-template-columns: repeat(3, 1fr);
  }
}
.channel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 26px;
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  background: var(--card);
}
.channel__ico {
  width: 48px;
  height: 48px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: rgba(212, 175, 55, 0.09);
  color: var(--gold);
}
.channel__h {
  font-size: 19px;
}
.channel p {
  color: var(--muted);
  font-size: 14.5px;
  flex: 1;
}
.channel__value {
  font-weight: 800;
  color: var(--gold);
  font-size: 16px;
  word-break: break-all;
}
.channel__value:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.note {
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  padding: 24px;
  background: var(--card);
}
.note__h {
  font-size: 18px;
}

.toc {
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  background: var(--card);
  padding: 16px;
  align-self: start;
}
.toc__h {
  display: block;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 8px;
}
.toc a {
  display: block;
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.5;
}
.toc a:hover {
  background: rgba(212, 175, 55, 0.06);
  color: var(--ink);
}
.docwrap {
  display: grid;
  gap: 32px;
  align-items: start;
}
@media (min-width: 1024px) {
  .docwrap {
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 48px;
  }
  .docwrap > .toc {
    position: sticky;
    top: 96px;
    max-height: calc(100vh - 120px);
    overflow: auto;
  }
}
.docwrap--solo {
  grid-template-columns: minmax(0, 1fr) !important;
  max-width: 900px;
}
.section--doc {
  padding: 28px 0 80px;
}
.docart h1 {
  font-size: clamp(28px, 3.6vw, 42px);
  margin-bottom: 8px;
}
.docmeta {
  color: var(--dim);
  font-size: 13.5px;
}
.docnote {
  margin: 14px 0 28px;
  padding: 12px 16px;
  border-inline-start: 3px solid var(--gold);
  background: rgba(212, 175, 55, 0.05);
  border-radius: 0 10px 10px 0;
  color: var(--muted);
  font-size: 14px;
}
html[dir='rtl'] .docnote {
  border-radius: 10px 0 0 10px;
}
.docsec {
  margin-top: 30px;
}
.docsec h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 19px;
  margin-bottom: 10px;
}
.docsec__n {
  font-weight: 900;
  font-size: 12.5px;
  color: var(--gold);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 8px;
  padding: 1px 0;
  min-width: 40px;
  text-align: center;
  flex: none;
}
.docart p {
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.95;
  margin-bottom: 10px;
  max-width: 80ch;
}
.points {
  list-style: decimal;
  padding-inline-start: 22px;
  margin: 12px 0 20px;
}
.points li {
  color: var(--muted);
  padding-inline-start: 6px;
  margin-bottom: 8px;
}
.points li::marker {
  color: var(--gold);
  font-weight: 800;
}
.sources {
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid var(--line-soft);
}
.sources h2 {
  font-size: 17px;
  margin-bottom: 10px;
}
.sources ol {
  list-style: decimal;
  padding-inline-start: 22px;
  color: var(--muted);
  font-size: 14px;
}
.sources a {
  color: var(--gold);
  word-break: break-all;
}

/* ---------- باند الدعوة ---------- */
.band {
  border-radius: 26px;
  padding: clamp(36px, 6vw, 64px);
  text-align: center;
  background: radial-gradient(60rem 22rem at 50% -30%, rgba(212, 175, 55, 0.16), transparent 70%), linear-gradient(180deg, #0d1013, #08090b);
  border: 1px solid var(--gline);
  box-shadow: 0 30px 90px -40px rgba(212, 175, 55, 0.3);
}
.band .hero__cta {
  justify-content: center;
}
.band .h2 {
  font-size: clamp(28px, 4.2vw, 48px);
}
.band .lead {
  margin-inline: auto;
}

/* ---------- التذييل ---------- */
.footer {
  border-top: 1px solid var(--line-soft);
  padding: 60px 0 30px;
  background: rgba(11, 13, 16, 0.6);
}
.footer__grid {
  display: grid;
  gap: 32px;
  grid-template-columns: repeat(2, 1fr);
}
.footer__grid > :first-child {
  grid-column: 1 / -1;
}
@media (min-width: 900px) {
  .footer__grid {
    grid-template-columns: 1.6fr repeat(4, 1fr);
  }
  .footer__grid > :first-child {
    grid-column: auto;
  }
}
.footer .logo img {
  height: 38px;
  width: auto;
}
.footer__h {
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 12px;
}
.footer li {
  margin-bottom: 8px;
}
.footer li a {
  font-size: 14px;
  color: var(--muted);
  transition: color 0.2s;
}
.footer li a:hover {
  color: var(--gold);
}
.footer__blurb {
  font-size: 14px;
  color: var(--muted);
  max-width: 40ch;
  margin-top: 14px;
}
/* حسابا الشركة على الشبكات — مربّعان صغيران تحت الوصف */
.footer__social {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}
.footer .footer__social li {
  margin: 0;
}
.footer .footer__social a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid var(--line-soft);
  color: var(--muted);
  transition: color 0.2s, border-color 0.2s;
}
.footer .footer__social a:hover {
  color: var(--gold);
  border-color: var(--gold);
}
.footer__risk {
  font-size: 12.5px;
  color: var(--dim);
  line-height: 1.85;
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid var(--line-soft);
}
.footer__risk strong {
  color: var(--muted);
}
.footer__bottom {
  margin-top: 18px;
}
.footer__bottom p {
  font-size: 12.5px;
  color: var(--dim);
}

/* ---------- صفحة اختيار اللغة و404 ---------- */
.root {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 0;
}
.root__wrap {
  width: 100%;
  max-width: 1000px;
  text-align: center;
}
.root__logo {
  height: 52px;
  width: auto;
  margin: 0 auto 26px;
}
.root__h1 {
  font-size: clamp(24px, 3.4vw, 34px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 14px;
}
.root__sep {
  color: var(--gold);
}
.root__langs {
  display: grid;
  gap: 12px;
  margin-top: 30px;
  text-align: start;
}
@media (min-width: 700px) {
  .root__langs {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1000px) {
  .root__langs:not(.root__langs--404) {
    grid-template-columns: repeat(3, 1fr);
  }
}
.root__lang {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 22px 24px;
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  background: var(--card);
  transition: border-color 0.25s, transform 0.25s var(--ease);
}
.root__lang:hover {
  border-color: rgba(212, 175, 55, 0.4);
  transform: translateY(-3px);
}
.root__lang b {
  font-size: 20px;
  color: var(--gold);
}
.root__lang span {
  color: var(--muted);
  font-size: 14px;
}
.root__code {
  font-size: clamp(72px, 12vw, 128px);
  font-weight: 900;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(212, 175, 55, 0.5);
  margin-bottom: 8px;
}
.nf {
  padding: 20px 22px;
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  background: var(--card);
}
.nf__h {
  font-size: 19px;
  margin-bottom: 4px;
}
.nf p {
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 12px;
}
.nf .btn {
  margin-inline-end: 6px;
  margin-top: 4px;
}

/* ---------- الطبقة المحيطية ---------- */
.fx {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.fx i {
  position: absolute;
  display: block;
  width: 52rem;
  height: 52rem;
  border-radius: 50%;
  filter: blur(105px);
}
.fx__a {
  top: -19rem;
  inset-inline-end: -15rem;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.075), transparent 70%);
}
.fx__b {
  bottom: -21rem;
  inset-inline-start: -15rem;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.05), transparent 70%);
}
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .fx__a {
    animation: drift-a 48s ease-in-out infinite;
  }
  .fx__b {
    animation: drift-b 56s ease-in-out infinite;
  }
  .hero h1 .accent {
    background-size: 220% 100%;
    animation: goldshift 3s var(--ease) 0.5s 2 alternate;
  }
}
@keyframes drift-a {
  50% {
    transform: translate(-5%, 4%) scale(1.1);
  }
}
@keyframes drift-b {
  50% {
    transform: translate(5%, -4%) scale(0.95);
  }
}
@keyframes goldshift {
  from {
    background-position: 0% 0;
  }
  to {
    background-position: 100% 0;
  }
}

/* ---------- الظهور التدريجي: JavaScript وحده يعلّق عنصراً تحت الشاشة، فلا يختفي محتوى عن زاحفٍ أو قارئ ---------- */
.js .is-pending {
  opacity: 0;
  transform: translateY(30px) scale(0.975);
  transition: opacity 0.8s var(--ease) var(--d, 0ms), transform 0.8s var(--ease) var(--d, 0ms);
}
.js .is-pending.is-in {
  opacity: 1;
  transform: none;
}
.stat__v {
  animation: statpop 0.75s var(--ease) 0.2s backwards;
}
@keyframes statpop {
  0% {
    opacity: 0;
    transform: translateY(16px) scale(0.85);
  }
  60% {
    transform: translateY(0) scale(1.05);
  }
}
.hero__copy > *,
.phero .wrap > * {
  animation: rise 0.7s var(--ease) backwards;
}
.hero__copy > :nth-child(2),
.phero .wrap > :nth-child(2) {
  animation-delay: 0.06s;
}
.hero__copy > :nth-child(3),
.phero .wrap > :nth-child(3) {
  animation-delay: 0.12s;
}
.hero__copy > :nth-child(4),
.phero .wrap > :nth-child(4) {
  animation-delay: 0.18s;
}
.hero__show {
  animation: rise 0.9s var(--ease) 0.26s backwards;
}
@keyframes rise {
  from {
    opacity: 0.001;
    transform: translateY(14px);
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .js .is-pending {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 700px) {
  .section {
    padding: 56px 0;
  }
  .section--tight {
    padding: 40px 0;
  }
  .section--first {
    padding-top: 12px;
  }
  .hero {
    padding: 44px 0 0;
  }
  .hero__grid {
    gap: 24px;
  }
  .hero__show {
    margin-top: 46px;
  }
  .hero__show::before {
    top: -90px;
    height: 170px;
  }
  .hero__frame {
    padding: 7px 7px 0;
    border-radius: 22px 22px 0 0;
    -webkit-mask-image: linear-gradient(180deg, #000 86%, transparent 99%);
    mask-image: linear-gradient(180deg, #000 86%, transparent 99%);
  }
  .hero__streak {
    display: none;
  }
  .stat {
    padding: 20px 12px;
  }
  .stat__v {
    font-size: 30px;
  }
  .stat__l {
    font-size: 12px;
  }
  .bcard--xl {
    min-height: 0;
    padding: 24px;
  }
  .band {
    padding: 32px 18px;
  }
  .footer {
    padding: 42px 0 24px;
  }
  .phero {
    padding: 22px 0 18px;
  }
  table th,
  table td {
    padding: 11px 13px;
    font-size: 13.5px;
  }
}

@media print {
  .header,
  .ticker,
  .fx,
  .band,
  .footer .footer__grid {
    display: none !important;
  }
  body {
    background: #fff;
    color: #000;
  }
}

/* [المالك 2026-09-25 «1»] شريطُ موافقة ملفات تعريف الارتباط — أسفل الشاشة، لا يحجب المحتوى ولا يقفز فوق التذييل */
.consent {
  position: fixed;
  inset-inline: 16px;
  bottom: 16px;
  z-index: 60;
  max-width: 720px;
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(12, 15, 18, 0.96);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
}
.consent[hidden] {
  display: none;
}
.consent__text {
  flex: 1 1 280px;
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
}
.consent__text a {
  color: var(--gold-300);
}
.consent__actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

/* ---------- [2026-09-29] صفحة «حمّل التطبيق»: بطاقةُ متجرٍ وخطواتٌ مصوّرة (رسومُ CSS لا لقطاتُ شاشة) ---------- */
.appcard {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  margin-top: 16px;
}
@media (max-width: 599px) {
  .appcard {
    flex-direction: column;
  }
}
.appcard__icon {
  flex: none;
  width: 96px;
  height: 96px;
  border-radius: 24%;
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.85), 0 0 0 1px var(--line);
}
.appcard__body {
  min-width: 0;
  flex: 1;
}
.appcard__name {
  margin: 4px 0 2px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--gold);
}
.appcard__h1 {
  max-width: none;
  margin: 0;
}
.appcard__tag {
  margin: 8px 0 0;
  color: var(--muted);
}
.chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 14px 0 0;
}
.chips li {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 12px;
  background: rgba(232, 229, 220, 0.03);
}
.appcard__lead {
  margin-top: 16px;
}
.appcard .hero__cta {
  margin-top: 22px;
}
.abadges {
  display: grid;
  gap: 10px;
  margin-top: 28px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.abadge {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-radius: 14px;
  background: #000;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.12);
  text-decoration: none;
  transition: border-color 0.25s, transform 0.25s var(--ease);
}
.abadge:hover {
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-2px);
}
.abadge.is-mine {
  border-color: var(--gold);
}
.abadge__ico {
  flex: none;
}
.abadge__t {
  display: grid;
  min-width: 0;
}
.abadge__t small {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.abadge__t b {
  font-size: 16px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.abadge__mine {
  display: none;
  margin-inline-start: auto;
  font-size: 10px;
  font-weight: 900;
  color: var(--on-gold);
  background: var(--gold);
  border-radius: 999px;
  padding: 3px 9px;
  white-space: nowrap;
}
.abadge.is-mine .abadge__mine {
  display: inline-block;
}
@media (min-width: 1100px) {
  .fgrid--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}
.asteps {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.astep {
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  border: 1px solid var(--line-soft);
  background: var(--card);
  padding: 18px 16px 20px;
}
.astep__head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.astep__n {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--gold);
  color: var(--on-gold);
  font-weight: 900;
  font-size: 14px;
}
.astep h3 {
  font-size: 15.5px;
  line-height: 1.3;
  margin: 3px 0 4px;
}
.astep p {
  color: var(--muted);
  font-size: 13.5px;
  margin: 0;
}
.astep__mock {
  margin-top: 18px;
  display: flex;
  flex: 1;
  align-items: flex-end;
  justify-content: center;
}
.adone {
  display: grid;
  gap: 28px;
  align-items: center;
  justify-items: center;
  border-radius: 22px;
  border: 1px solid var(--gline);
  background: linear-gradient(150deg, rgba(212, 175, 55, 0.08), var(--card) 60%);
  padding: clamp(22px, 4vw, 40px);
}
@media (min-width: 720px) {
  .adone {
    grid-template-columns: auto 1fr;
    justify-items: start;
  }
}
.adone__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 900;
  color: var(--up);
  background: rgba(16, 185, 129, 0.12);
  border-radius: 999px;
  padding: 4px 12px;
}
.adone .h2 {
  margin-top: 10px;
}
.adone__note {
  color: var(--dim);
  font-size: 13.5px;
  margin-top: 12px;
}
.adone .btn {
  margin-top: 18px;
}
/* حلقةٌ ذهبية نابضة حول العنصر المقصود في الرسم */
.pwa-hl {
  position: relative;
}
.pwa-hl::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: 2px solid var(--gold);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.25);
  pointer-events: none;
  animation: pwa-pulse 1.6s ease-in-out infinite;
}
@keyframes pwa-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.25);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(212, 175, 55, 0.06);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pwa-hl::after {
    animation: none;
  }
}
/* الهاتفُ المرسوم: ألوانُ واجهةِ النظام ثابتة (تحاكي الهاتفَ لا السمة)، وصفحةُ المنصّة داخله بألوان الموقع */
.pm {
  position: relative;
  width: 190px;
  height: 250px;
  overflow: hidden;
  border-radius: 30px;
  border: 5px solid #2b3440;
  background: #f2f2f7;
  color: #111;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  font-size: 8px;
  line-height: 1.3;
  text-align: start;
}
.pm--dark {
  background: #141d22;
}
.pm__notch {
  position: absolute;
  left: 50%;
  top: 6px;
  z-index: 30;
  width: 52px;
  height: 12px;
  margin-left: -26px;
  border-radius: 999px;
  background: #111;
}
.pm__ico {
  border-radius: 24%;
  flex: none;
  object-fit: cover;
  display: block;
}
.pm .mi,
.dm .mi {
  flex: none;
}
[dir='rtl'] .flipx {
  transform: scaleX(-1);
}
.pm__dimmed {
  opacity: 0.4;
}
.pm__site {
  position: absolute;
  inset: 0;
  background: var(--night);
  padding: 28px 12px 0;
}
.pm__site--android {
  padding-top: 64px;
}
.pm__site--desk {
  position: relative;
  inset: auto;
  height: 100%;
  padding: 12px 16px 0;
}
.pm__brand {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ink);
  font-weight: 900;
  font-size: 8px;
  white-space: nowrap;
  overflow: hidden;
}
.pm__ln {
  display: block;
  height: 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.15);
  margin-top: 12px;
  width: 75%;
}
.pm__ln--b {
  width: 50%;
  margin-top: 6px;
  background: rgba(255, 255, 255, 0.1);
}
.pm__chart {
  display: block;
  width: 100%;
  height: 48px;
  margin-top: 12px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
}
.pm__chart path {
  fill: none;
  stroke: var(--gold);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pm__cta {
  display: block;
  height: 20px;
  margin-top: 10px;
  border-radius: 4px;
  background: var(--gold);
}
.pm__iosbar {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 10;
  background: rgba(247, 247, 248, 0.95);
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  padding: 6px 8px 8px;
}
.pm__url {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  border-radius: 8px;
  background: #e3e3e8;
  padding: 0 8px;
}
.pm__aa {
  font-weight: 700;
  color: #333;
}
.pm__host {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-weight: 600;
  color: #111;
  white-space: nowrap;
  overflow: hidden;
}
.pm__tools {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 8px;
  margin-top: 6px;
  color: #1f7cf6;
}
.pm__share {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
}
.pm__dim {
  position: absolute;
  inset: 0;
  z-index: 10;
  background: rgba(0, 0, 0, 0.35);
}
.pm__dim--light {
  background: rgba(0, 0, 0, 0.1);
}
.pm__sheet {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 20;
  border-radius: 16px 16px 0 0;
  background: #f2f2f7;
  padding: 8px 10px;
}
.pm__shead {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pm__min {
  min-width: 0;
  flex: 1;
  display: grid;
}
.pm__min b,
.pm__min small {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pm__min b {
  font-size: 8px;
  font-weight: 700;
}
.pm__min small {
  font-size: 7px;
  color: #666;
  text-align: start;
}
.pm__x {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #dcdce0;
  color: #555;
}
.pm__apps {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}
.pm__apps i {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #d9d9de;
}
.pm__list {
  margin-top: 8px;
  background: #fff;
  border-radius: 8px;
}
.pm__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 4px 8px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  font-size: 7.5px;
  color: #111;
}
.pm__row span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pm__row .mi {
  color: #333;
}
.pm__row--hl {
  font-weight: 700;
  border-bottom: 0;
  border-radius: 0 0 8px 8px;
}
.pm__dialog {
  position: absolute;
  inset-inline: 0;
  top: 24px;
  bottom: 0;
  z-index: 20;
  border-radius: 16px 16px 0 0;
  background: #fff;
  padding: 10px;
}
.pm__dtop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  font-size: 7.5px;
}
.pm__dtop b {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pm__blue {
  color: #1f7cf6;
  flex: none;
}
.pm__bold {
  font-weight: 900;
  display: inline-block;
  padding: 0 4px;
  border-radius: 4px;
}
.pm__appline {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 8px;
  border-radius: 8px;
  background: #f2f2f7;
}
.pm__appline--plain {
  background: transparent;
  padding: 0;
  margin-top: 6px;
}
.pm__hint {
  font-size: 6.5px;
  color: #777;
  margin: 8px 0 0;
}
.pm__andbar {
  position: absolute;
  inset-inline: 0;
  top: 0;
  z-index: 10;
  background: #fff;
  padding: 20px 6px 6px;
  color: #3c4043;
}
.pm__androw {
  display: flex;
  align-items: center;
  gap: 4px;
}
.pm__omni {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  border-radius: 999px;
  background: #f1f3f4;
  padding: 0 8px;
}
.pm__omni span,
.dm__omni span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
  color: #202124;
  direction: ltr;
  unicode-bidi: isolate;
}
.pm__tabs {
  flex: none;
  display: grid;
  place-items: center;
  width: 14px;
  height: 14px;
  border: 1.5px solid currentColor;
  border-radius: 3px;
  font-size: 6px;
  font-weight: 700;
}
.pm__dots {
  flex: none;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}
.pm__menu {
  position: absolute;
  inset-inline-end: 6px;
  top: 20px;
  z-index: 20;
  width: 128px;
  background: #fff;
  border-radius: 6px;
  padding: 4px 0;
  color: #202124;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
.pm__micons {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0 4px 4px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  color: #3c4043;
}
.pm__mrow {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  font-size: 7.5px;
  color: #202124;
}
.pm__mrow .mi {
  color: #5f6368;
}
.pm__mrow span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pm__mrow--hl {
  margin: 0 4px;
  padding: 3px 4px;
  border-radius: 4px;
  font-weight: 700;
}
.pm__inst {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 20;
  border-radius: 12px 12px 0 0;
  background: #fff;
  padding: 10px 12px;
  color: #202124;
}
.pm__q {
  display: block;
  font-size: 8.5px;
  font-weight: 700;
}
.pm__acts {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
  font-size: 7.5px;
  font-weight: 700;
}
.pm__cancel {
  color: #1a73e8;
  padding: 0 6px;
}
.pm__instbtn {
  display: inline-block;
  border-radius: 999px;
  background: #1a73e8;
  color: #fff;
  padding: 4px 10px;
}
.dm {
  position: relative;
  width: 100%;
  max-width: 300px;
  height: 190px;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  background: var(--night);
  color: #3c4043;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  font-size: 8px;
  line-height: 1.3;
  text-align: start;
}
.dm__title {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px 0;
  background: #dee1e6;
}
.dm__title--app {
  background: #1c262c;
  padding: 6px 8px;
}
.dm__lights {
  display: flex;
  gap: 4px;
}
.dm__lights i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff5f57;
}
.dm__lights i:nth-child(2) {
  background: #febc2e;
}
.dm__lights i:nth-child(3) {
  background: #28c840;
}
.dm__tab {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  margin-inline-start: 4px;
  padding: 4px 8px;
  border-radius: 6px 6px 0 0;
  background: #fff;
  font-size: 7.5px;
  font-weight: 600;
  color: #202124;
}
.dm__title--app .dm__tab {
  background: transparent;
  color: var(--ink);
  padding: 0 8px;
}
.dm__tab span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dm__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  padding: 4px 8px;
}
.dm__omni {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  border-radius: 999px;
  background: #f1f3f4;
  padding: 0 8px;
}
.dm__install {
  margin-inline-start: auto;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 4px;
}
.dm__pop {
  position: absolute;
  inset-inline-end: 32px;
  top: 44px;
  z-index: 20;
  width: 150px;
  background: #fff;
  border-radius: 8px;
  padding: 8px;
  color: #202124;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
.hm {
  background: radial-gradient(120% 80% at 20% 0%, #3b4a8a 0%, #1a1f3d 50%, #0b0e1c 100%);
}
.hm__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px 8px;
  padding: 32px 12px 0;
}
.hm__t {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.hm__t i {
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  opacity: 0.9;
  background: #8e8e93;
}
.hm__t b {
  display: block;
  width: 20px;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.4);
}
.hm__t:nth-child(1) i { background: #5ac8fa; }
.hm__t:nth-child(2) i { background: #ff9500; }
.hm__t:nth-child(3) i { background: #34c759; }
.hm__t:nth-child(4) i { background: #af52de; }
.hm__t:nth-child(5) i { background: #ff2d55; }
.hm__t:nth-child(7) i { background: #007aff; }
.hm__t:nth-child(8) i { background: #ffcc00; }
.hm__t:nth-child(9) i { background: #ff3b30; }
.hm__t:nth-child(10) i { background: #30b0c7; }
.hm__t:nth-child(11) i { background: #a2845e; }
.hm__t:nth-child(12) i { background: #64d2ff; }
.hm__me {
  display: inline-block;
  border-radius: 9px;
}
.hm__name {
  display: block;
  width: 40px;
  text-align: center;
  font-size: 6px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hm__dock {
  position: absolute;
  inset-inline: 12px;
  bottom: 10px;
  display: flex;
  justify-content: space-around;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.15);
  padding: 6px 8px;
}
.hm__dock i {
  display: block;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #34c759;
}
.hm__dock i:nth-child(2) { background: #007aff; }
.hm__dock i:nth-child(3) { background: #ff9500; }
.hm__dock i:nth-child(4) { background: #8e8e93; }

/* [2026-09-29] قسمُ المنصّة في الرئيسية شريطٌ موجز في المنتصف (المالك أزال قائمةَ الميزات: «مالهم داعي») */
.pfband {
  max-width: 820px;
  text-align: center;
}
.specs--center {
  justify-content: center;
}
/* ============================================================
   [2026-09-29] واجهةُ الشركاء، النسخةُ الثالثة (rf-*): مقاساتُ الصفحة المرجعية نفسُها بعد قراءة كودها — تصميمٌ بعرض
   1510px يتدرّج مع الشاشة (الوحدةُ --u = بكسلٌ واحد من التصميم)، وتصميمٌ بعرض 430px للجوال — بألواننا: ذهبٌ وعاجيٌّ على فحمي.
   الحركةُ في assets/af.js؛ كلُّ ما يُخفى هنا للحركة يُخفى تحت .js وحدها فلا يختفي محتوى إن لم يعمل السكربت.
   ============================================================ */
.rf-page {
  --u: calc(100vw / 1510);
  --rf-bg: #060809;
  --rf-title: linear-gradient(180deg, #f5f0e4 0.17%, #c4bba6 99.83%);
  --rf-text: linear-gradient(90deg, #f0deaf 20%, #8f8672);
  --rf-line: rgba(255, 255, 255, 0.1);
  --rf-gold: linear-gradient(180deg, #e2c160 0%, #c49a2c 100%);
  --rf-ease: cubic-bezier(0.45, 0, 0.55, 1);
  background: var(--rf-bg);
}
html[dir='rtl'] .rf-page {
  --rf-text: linear-gradient(270deg, #f0deaf 20%, #8f8672);
}
@media (max-width: 1100px) {
  .rf-page {
      --u: calc(100vw / 1100);
    }
}
@media (max-width: 640px) {
  .rf-page {
      --u: calc(100vw / 430);
    }
}
.rf-page .fx {
  display: none;
}
/* ---------- عناصرُ المرجع المشتركة: شارةٌ زجاجية، عنوانٌ بتدرّجٍ فضّي، نصٌّ بتدرّجٍ ذهبيٍّ خافت ---------- */
.rf-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.rf-label {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: max(7px, calc(10 * var(--u))) max(12px, calc(16 * var(--u)));
  border-radius: 1000px;
  border: max(1px, calc(1.5 * var(--u))) solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(180deg, rgba(20, 17, 9, 0.4), rgba(78, 66, 38, 0.4));
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  font-size: max(12.5px, calc(14 * var(--u)));
  font-weight: 600;
  line-height: 1.4;
}
.rf-label > span,
.rf-text,
.rf-card__text,
.rf-step__text .rf-line,
.rf-step__text:not(.is-split) {
  background: var(--rf-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #e9d9ad;
}
.rf-title,
.rf-card__title,
.rf-step__title{
  background: var(--rf-title);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #efe9dc;
}
.rf-title {
  margin: max(8px, calc(10 * var(--u))) 0 0;
  font-size: max(30px, calc(55 * var(--u)));
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
html[dir='rtl'] .rf-title {
  letter-spacing: 0;
  line-height: 1.38;
}
.rf-title .accent {
  background: linear-gradient(180deg, #f6e3a4 0%, #d4af37 58%, #b88f24 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.rf-text {
  font-size: max(14px, calc(14 * var(--u)));
  font-weight: 600;
  line-height: 1.43;
}
html[dir='rtl'] .rf-text {
  font-size: max(15px, calc(15 * var(--u)));
  line-height: 1.6;
}
.rf-head__sub {
  max-width: calc(700 * var(--u));
  margin-top: max(14px, calc(22 * var(--u)));
}
/* الظهورُ عند دخول الشاشة (ScrollTrigger في المرجع: onEnter يُظهر وonLeaveBack يُعيد) — .7 ثانية ease-out */
.js [data-rf] {
  opacity: 0;
  translate: 0 50%;
  transition: opacity 0.7s ease-out, translate 0.7s ease-out;
}
.js .rf-cmp[data-rf],
.js .rf-glass[data-rf],
.js .rf-faq__list[data-rf],
.js .rf-faq__more[data-rf]{
  translate: 0 70px;
  transition-duration: 0.9s;
}
/* [المالك 2026-10-26] البطاقةُ ذاتُ الصورة ترتفع بـtransform ثلاثيّ الأبعاد لا بـtranslate: فهي طبقةُ رسمٍ مستقلّة مرسومةٌ قبل أن
   تبدأ حركتَها، وحركتُها على المركّب (compositor) ولو انشغل الخيطُ الرئيسي بفكّ الصور — على الآيفون كانت الطبقةُ تُنشأ وتُرسم لحظةَ
   بدء الانتقال فتظهر دفعةً. والتتابعُ (0.1/0.2 ثانية) للشبكة ذات الأعمدة الثلاثة وحدها: في عمودٍ واحد لا يُرى تتابعٌ بل تأخير */
.js .rf-card[data-rf] {
  translate: none;
  transform: translate3d(0, 70px, 0);
  transition: opacity 0.9s ease-out, transform 0.9s ease-out;
}
.js .rf-card[data-rf].is-in {
  transform: translate3d(0, 0, 0);
}
@media (min-width: 901px) {
  .js .rf-card[data-rf]:nth-child(2) {
    transition-delay: 0.1s;
  }
  .js .rf-card[data-rf]:nth-child(3) {
    transition-delay: 0.2s;
  }
}
.js [data-rf].is-in {
  opacity: 1;
  translate: 0 0;
}
@media (prefers-reduced-motion: reduce) {
  .js [data-rf] {
      opacity: 1;
      translate: none;
      transition: none;
    }
  .js .rf-card[data-rf] {
      transform: none;
      transition: none;
    }
}
/* ---------- زرُّ المرجع: ذهبيٌّ بضوءٍ داخلي أسفلَه، داخل حلقةٍ يدور عليها ضوء ---------- */
.rf-ring {
  position: relative;
  display: inline-flex;
  width: fit-content;
  padding: 10px;
  border-radius: 18px;
}
.rf-ring > canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  pointer-events: none;
}
.rf-btn{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--rf-gold);
  color: #1b1406;
  border: 1px solid rgba(255, 236, 184, 0.45);
  box-shadow: 0 0 30px 0 rgba(212, 175, 55, 0.5);
}
.rf-btn::before{
  content: '';
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: 0;
  width: 80%;
  height: 120%;
  translate: -50% 75%;
  border-radius: 100%;
  background: #fff4cc;
  filter: blur(15px);
  pointer-events: none;
}
.rf-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 54px;
  padding: 16px 36px;
  border-radius: 18px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  transition: opacity 0.2s ease-in-out, scale 0.2s ease-in-out;
}
.rf-btn:hover {
  opacity: 0.85;
}
.rf-btn:active {
  scale: 0.98;
}
.rf-btn svg {
  width: 20px;
  height: 20px;
}
@media (max-width: 1280px) {
  .rf-btn {
      gap: 12px;
      font-size: 16px;
    }
}
@media (max-width: 640px) {
  .rf-ring {
      padding: 6px;
    }
  .rf-btn {
      gap: 10px;
      min-height: 48px;
      padding: 14px 24px;
      border-radius: 14px;
      font-size: 15px;
    }
  .rf-ring {
      border-radius: 18px;
    }
}
/* ---------- الترويسة: شريطٌ عريض شفّاف فوق تدرّجٍ داكن ---------- */
/* ---------- البطل ---------- */
.rf-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  min-height: max(640px, 100vh);
  height: 100vh;
}
@supports (height: 100lvh) {
  .rf-hero {
    height: 100lvh;
  }
}
.rf-hero__bg {
  position: absolute;
  z-index: -2;
  inset: 0;
  -webkit-mask-image: linear-gradient(0deg, transparent 0, #000 30%);
  mask-image: linear-gradient(0deg, transparent 0, #000 30%);
  transition: opacity 0.5s ease-in-out;
}
.js .rf-hero__bg {
  opacity: 0;
}
.js .rf-hero__bg.is-in {
  opacity: 1;
}
.rf-hero__bg picture,
.rf-hero__img,
.rf-hero__video {
  position: absolute;
  top: auto;
  left: 0;
  bottom: -6%;
  width: 100%;
  height: 106%;
  object-fit: cover;
  object-position: 50% 100%;
}
.rf-hero__bg picture .rf-hero__img {
  bottom: 0;
  height: 100%;
}
/* الجوال: المشهدُ الطولي ينزل أكثر كي يبقى الزرّ فوق رؤوس الواقفَين لا عليها */
@media (max-width: 650px) {
  .rf-hero__bg picture,
    .rf-hero__video {
      bottom: -13%;
      height: 113%;
    }
}
.rf-hero__video {
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
}
/* أعلى الفيديو سماءٌ صافية في الصورة الثابتة تحته: يذوب فيها فلا يظهر ضجيجُ الضغط في الأسود المسطّح */
@media (min-width: 651px) {
  .rf-hero__video {
      -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent 16%, #000 34%);
      mask-image: linear-gradient(180deg, transparent 0, transparent 16%, #000 34%);
    }
}
.rf-hero__video.is-playing {
  opacity: 1;
}
.rf-hero__content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: max(118px, calc(150 * var(--u))) 20px 0;
  text-align: center;
}
.rf-hero__title {
  width: min(100%, calc(600 * var(--u)));
  min-width: min(100%, 520px);
  margin: 0;
}
.rf-hero__text {
  width: min(100%, calc(600 * var(--u)));
  min-width: min(100%, 520px);
  margin-top: max(18px, calc(30 * var(--u)));
}
.rf-hero__btns {
  display: flex;
  gap: calc(20 * var(--u));
  margin-top: max(26px, calc(40 * var(--u)));
}
.js .rf-hero__btns {
  opacity: 0;
  translate: 0 50%;
}
.js .rf-hero__btns.is-in {
  opacity: 1;
  translate: 0 0;
  transition: opacity 1s cubic-bezier(0.33, 1, 0.68, 1), translate 1s cubic-bezier(0.33, 1, 0.68, 1);
}
@media (max-width: 768px) {
  .rf-hero__content {
      padding-top: max(104px, calc(100 * var(--u)));
    }
  .rf-hero__title,
    .rf-hero__text {
      width: 100%;
      min-width: 0;
    }
}
/* ---------- كيف يعمل: ثلاثُ بطاقاتٍ بصورٍ فوقها وأرضيةٌ شبكية متحركة تحتها ---------- */
.rf-how {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(40 * var(--u)) calc(182 * var(--u)) calc(200 * var(--u));
}
.rf-how .rf-title {
  width: min(100%, calc(600 * var(--u)));
  min-width: min(100%, 480px);
}
.rf-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(20 * var(--u));
  width: 100%;
  margin-top: calc(65 * var(--u));
}
.rf-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding-top: calc(250 * var(--u));
  border-radius: calc(30 * var(--u));
  border: max(1px, calc(1.5 * var(--u))) solid rgba(255, 255, 255, 0.129);
  background-color: #0c0b09;
}
.rf-card__img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.rf-card__img img {
  display: block;
  width: 100%;
  height: auto;
}
.rf-card__img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, #0c0b09 8%, rgba(12, 11, 9, 0) 42%);
  pointer-events: none;
}
.rf-card__pct {
  position: absolute;
  z-index: 1;
  left: 49.4%;
  top: 39.4%;
  translate: -50% -50%;
  font-size: calc(46 * var(--u));
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  background: linear-gradient(180deg, #ffffff 0%, #e6dcc6 52%, #9f937c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.55));
}
.rf-card__body {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(30 * var(--u));
  text-align: center;
}
.rf-card__title {
  margin: 0;
  font-size: max(17px, calc(20 * var(--u)));
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
html[dir='rtl'] .rf-card__title {
  letter-spacing: 0;
  line-height: 1.4;
}
.rf-card__text {
  margin-top: calc(16 * var(--u));
  font-size: max(13.5px, calc(14 * var(--u)));
  font-weight: 500;
  line-height: 1.35;
}
html[dir='rtl'] .rf-card__text {
  font-size: max(14.5px, calc(15 * var(--u)));
  line-height: 1.6;
}
.rf-floor {
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: 0;
  translate: -50% 0;
  width: 100%;
  height: calc(640 * var(--u));
  -webkit-mask-image: linear-gradient(0deg, transparent 0, #000 30%, #000 70%, transparent);
  mask-image: linear-gradient(0deg, transparent 0, #000 30%, #000 70%, transparent);
  pointer-events: none;
}
.rf-floor__cv {
  display: block;
  width: 100%;
  height: 100%;
}
@media (max-width: 900px) {
  .rf-cards {
      grid-template-columns: minmax(0, 1fr);
      max-width: 520px;
    }
  .rf-card {
      padding-top: min(78vw, 400px);
      border-radius: 26px;
    }
  .rf-card__pct {
      font-size: min(11vw, 58px);
    }
  .rf-card__body {
      padding: 22px 22px 26px;
    }
  .rf-card__text {
      margin-top: 12px;
    }
}
@media (max-width: 640px) {
  .rf-how {
      padding-inline: calc(20 * var(--u));
    }
  .rf-cards {
      gap: calc(20 * var(--u));
      margin-top: calc(30 * var(--u));
    }
  .rf-floor {
      width: 150%;
      height: 460px;
      translate: -50% 20%;
    }
}
/* ---------- الخطوات: قسمٌ مثبَّت بطول 500 شاشة، مسارٌ رفيع يُرسم مع التمرير وخطواتٌ تضيء بالتتابع ---------- */
.rf-steps {
  position: relative;
  overflow-x: clip;
  display: flex;
  flex-direction: column;
  padding: calc(70 * var(--u)) calc(182 * var(--u)) 0;
}
.rf-steps__head .rf-title {
  width: min(100%, calc(700 * var(--u)));
  margin-top: max(18px, calc(42 * var(--u)));
}
.rf-steps__pin {
  position: relative;
  margin-top: calc(40 * var(--u));
}
.rf-steps__box {
  position: relative;
  width: 100%;
}
.rf-steps__line svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
html[dir='rtl'] .rf-steps__line svg {
  transform: scaleX(-1);
}
.rf-steps__path {
  fill: none;
  stroke: #fbf2d9;
  stroke-width: 2.2;
  stroke-linecap: round;
  opacity: 0.8;
}
.rf-steps__halo {
  fill: none;
  stroke: rgba(236, 200, 110, 0.5);
  stroke-width: 10;
  stroke-linecap: round;
  opacity: 0.6;
}
.rf-steps__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.rf-step {
  position: relative;
}
.rf-step__dot {
  display: none;
}
.rf-step__stack {
  display: grid;
  grid-template-columns: max(9px, calc(10 * var(--u))) minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  column-gap: max(12px, calc(14 * var(--u)));
  align-items: center;
}
.rf-step__cross {
  grid-column: 1;
  grid-row: 1;
  display: block;
  width: max(9px, calc(10 * var(--u)));
  line-height: 0;
  transition: opacity 1s var(--rf-ease), rotate 1s var(--rf-ease);
}
.rf-step__cross svg {
  width: 100%;
  height: auto;
  stroke: #e0bd58;
  stroke-width: 1.4;
}
.rf-step__title {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  font-size: max(17px, calc(20 * var(--u)));
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.02em;
  transition: opacity 1s var(--rf-ease), translate 1s var(--rf-ease);
}
html[dir='rtl'] .rf-step__title {
  letter-spacing: 0;
  line-height: 1.45;
  font-weight: 600;
}
.rf-step__vline {
  grid-column: 1;
  grid-row: 2 / span 2;
  justify-self: center;
  align-self: stretch;
  width: max(2px, calc(2 * var(--u)));
  min-height: 40px;
  background: linear-gradient(180deg, #b8942a 0, #ecd591 34%, rgba(255, 255, 255, 0.094) 43%, rgba(255, 255, 255, 0));
  transition: opacity 1s var(--rf-ease);
}
.rf-step__text {
  grid-column: 2;
  grid-row: 2;
  margin: max(12px, calc(20 * var(--u))) 0 0;
  font-size: max(13.5px, calc(14 * var(--u)));
  font-weight: 500;
  line-height: 1.43;
}
html[dir='rtl'] .rf-step__text {
  font-size: max(14.5px, calc(15 * var(--u)));
  line-height: 1.65;
}
.rf-step__text .rf-line {
  display: block;
  transition: opacity 1s var(--rf-ease), translate 1s var(--rf-ease);
}
.rf-step__stack::after {
  content: '';
  grid-column: 2;
  grid-row: 3;
  height: max(34px, calc(46 * var(--u)));
}
.rf-step__tail {
  display: none;
}
/* الحالات الثلاث كما في المرجع: مخفيّة، حاليّة، سابقة (العنوانُ باهتٌ والنصُّ مطويّ) */
.js .rf-step[data-status='hidden'] .rf-step__cross {
  opacity: 0;
  rotate: 135deg;
}
.js .rf-step[data-status='hidden'] .rf-step__vline,
.js .rf-step[data-status='previous'] .rf-step__vline {
  opacity: 0;
}
.js .rf-step[data-status='hidden'] .rf-step__title {
  opacity: 0;
  translate: 0 50%;
}
.js .rf-step[data-status='previous'] .rf-step__title {
  opacity: 0.12;
}
.js .rf-step[data-status='hidden'] .rf-line {
  opacity: 0;
  translate: 0 150%;
}
.js .rf-step[data-status='previous'] .rf-line {
  opacity: 0;
  translate: 0 50%;
}
.js .rf-step[data-status='active'] .rf-step__vline {
  transition-delay: 0.1s;
}
.js .rf-step[data-status='active'] .rf-step__title {
  transition-delay: 0.2s;
}
.js .rf-step[data-status='active'] .rf-line {
  transition-delay: calc(0.3s + var(--i, 0) * 0.07s);
}
.js .rf-step[data-status='active'] .rf-step__cross {
  transition-delay: 0.45s;
}
/* التثبيتُ (عرضٌ ≥ 1025 وارتفاعٌ ≥ 600، ومع سماح الحركة): السكربت يضيف .is-pin */
.rf-steps__pin.is-pin {
  height: 500vh;
}
@supports (height: 100lvh) {
  .rf-steps__pin.is-pin {
    height: 500lvh;
  }
}
.is-pin .rf-steps__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  padding-top: max(150px, calc(200 * var(--u)));
  overflow: visible;
}
.is-pin .rf-steps__box {
  width: min(100%, calc((100vh - max(150px, calc(200 * var(--u))) - 20px) * 1.5 / 0.74));
  margin-inline: auto;
  aspect-ratio: 1200 / 800;
}
.is-pin .rf-steps__line {
  position: absolute;
  inset: 0;
  -webkit-mask-image: linear-gradient(0deg, transparent 4%, #000 30%);
  mask-image: linear-gradient(0deg, transparent 4%, #000 30%);
}
.is-pin .rf-steps__list {
  position: absolute;
  inset: 0;
}
.is-pin .rf-step {
  position: absolute;
  inset-inline-start: var(--x);
  top: var(--y);
  width: 0;
  height: 0;
}
.is-pin .rf-step__dot {
  display: block;
  position: absolute;
  left: max(-4px, calc(-3.5 * var(--u)));
  top: max(-4px, calc(-3.5 * var(--u)));
  width: max(8px, calc(7 * var(--u)));
  height: max(8px, calc(7 * var(--u)));
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px rgba(255, 236, 180, 0.85);
}
.is-pin .rf-step__tail {
  display: block;
  position: absolute;
  left: max(-1px, calc(-1 * var(--u)));
  top: 6px;
  width: max(2px, calc(2 * var(--u)));
  height: calc(150 * var(--u));
  background: linear-gradient(180deg, rgba(236, 213, 145, 0.35), rgba(236, 213, 145, 0));
  opacity: 0;
  transition: opacity 1s var(--rf-ease);
}
.is-pin .rf-step[data-status='active'] .rf-step__tail {
  opacity: 1;
  transition-delay: 0.1s;
}
.is-pin .rf-step__stack {
  position: absolute;
  bottom: 0;
  width: calc(400 * var(--u));
}
.is-pin .rf-step--end .rf-step__stack {
  inset-inline-start: calc(-1 * max(4.5px, calc(5 * var(--u))));
}
.is-pin .rf-step--start .rf-step__stack {
  inset-inline-end: calc(-1 * max(4.5px, calc(5 * var(--u))));
  grid-template-columns: minmax(0, 1fr) max(9px, calc(10 * var(--u)));
  text-align: end;
}
.is-pin .rf-step--start .rf-step__cross,
.is-pin .rf-step--start .rf-step__vline {
  grid-column: 2;
}
.is-pin .rf-step--start .rf-step__title,
.is-pin .rf-step--start .rf-step__text {
  grid-column: 1;
}
.is-pin .rf-step--start .rf-step__stack::after {
  grid-column: 1;
}
/* بلا تثبيت (جوال، تقليلُ الحركة، أو بلا سكربت): قائمةٌ عموديةٌ بصليبٍ وخطٍّ لكل خطوة، والمسارُ زخرفةٌ فوقها */
.rf-steps__pin:not(.is-pin) .rf-steps__line {
  position: relative;
  margin: 0 calc(-20 * var(--u)) calc(-38% + 20px);
  -webkit-mask-image: linear-gradient(0deg, transparent 38%, #000 70%);
  mask-image: linear-gradient(0deg, transparent 38%, #000 70%);
  opacity: 0.9;
  pointer-events: none;
}
.rf-steps__pin:not(.is-pin) .rf-steps__list {
  position: relative;
  display: grid;
  gap: 34px;
  max-width: 560px;
}
.rf-steps__pin:not(.is-pin) .rf-step__stack::after {
  height: 8px;
}
@media (max-width: 640px) {
  .rf-steps {
      padding-inline: calc(20 * var(--u));
    }
}
/* ---------- مقارنةُ العروض: عمودٌ للمعاني وأربعةُ أعمدةٍ للعروض، أعلاها مضاءٌ بشارة الشعار ---------- */
.rf-adv {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(120 * var(--u)) calc(182 * var(--u)) calc(100 * var(--u));
}
.rf-adv__bg {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 0;
  translate: -50% -10%;
  width: 100%;
  pointer-events: none;
}
.rf-adv__bg img {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0.85;
  -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent 85%);
  mask-image: linear-gradient(180deg, #000 45%, transparent 85%);
}
.rf-adv .rf-title {
  margin-top: max(10px, calc(15 * var(--u)));
  max-width: calc(900 * var(--u));
}
.rf-cmp {
  display: flex;
  gap: 0;
  width: 100%;
  margin-top: calc(110 * var(--u));
  padding-inline: calc(50 * var(--u));
}
/* أصنافُ البطاقات القديمة (.offer) باقيةٌ لسكربت التحديث الحيّ؛ شكلُها هنا شكلُ عمود جدولٍ لا بطاقة */
.rf-cmp__info {
  flex: 1.3 0 0;
  min-width: 0;
}
.rf-cmp__col {
  position: relative;
  flex: 1 0 0;
  min-width: 0;
  text-align: center;
}
.rf-cmp__head {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: max(78px, calc(96 * var(--u)));
  padding-inline: 8px;
}
.rf-cmp__info .rf-cmp__head {
  align-items: flex-start;
}
.rf-cmp__infoh {
  font-size: max(13px, calc(14 * var(--u)));
  font-weight: 600;
  color: rgba(243, 238, 226, 0.4);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.rf-cmp__row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: max(52px, calc(54 * var(--u)));
  border-top: 1px solid var(--rf-line);
  line-height: 1.3;
  font-size: max(14px, calc(15 * var(--u)));
  color: rgba(243, 238, 226, 0.62);
}
.rf-cmp__info .rf-cmp__row {
  justify-content: flex-start;
  color: #d8d0bd;
}
.rf-cmp__info .rf-cmp__row::before {
  content: '•';
  color: rgba(236, 213, 145, 0.7);
}
.rf-cmp .is-top .rf-cmp__row {
  color: #f7f2e6;
}
.rf-cmp__col.is-top::before,
.rf-cmp__col.is-top::after {
  content: '';
  position: absolute;
  pointer-events: none;
}
.rf-cmp__col.is-top::before {
  inset: calc(-14 * var(--u)) calc(4 * var(--u)) calc(-14 * var(--u));
  border-radius: calc(20 * var(--u));
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(180deg, rgba(255, 244, 214, 0.075), rgba(255, 244, 214, 0.02));
  box-shadow: 0 30px 90px -30px rgba(212, 175, 55, 0.45);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.rf-cmp__col.is-top::after {
  inset: calc(-22 * var(--u)) calc(-4 * var(--u)) calc(-22 * var(--u));
  border-radius: calc(26 * var(--u));
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.rf-cmp__badge {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: calc(-14 * var(--u));
  translate: -50% -58%;
  display: grid;
  place-items: center;
  width: max(58px, calc(74 * var(--u)));
  height: max(58px, calc(74 * var(--u)));
  border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, #f1d67e 0%, #cfa53a 55%, #9c7619 100%);
  box-shadow: 0 0 0 max(3px, calc(4 * var(--u))) rgba(255, 255, 255, 0.08), 0 0 44px rgba(212, 175, 55, 0.6), inset 0 2px 0 rgba(255, 255, 255, 0.45);
}
.rf-cmp__badge .rf-emblem {
  width: 42%;
  height: auto;
}
.rf-cmp__badge .rf-emblem path {
  fill: #1b1406;
}
.rf-check {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #f7f2e6;
}
.rf-check svg {
  width: 12px;
  height: 12px;
}
.rf-cmp .is-top .rf-check {
  background: rgba(212, 175, 55, 0.3);
  color: #fff4cc;
}
@media (max-width: 640px) {
  .rf-adv {
      padding-inline: calc(20 * var(--u));
    }
  .rf-title {
      font-size: max(26px, calc(42 * var(--u)));
    }
  .rf-steps__head .rf-title,
    .rf-start__title {
      font-size: max(24px, calc(30 * var(--u)));
    }
  .rf-adv .rf-title {
      font-size: max(25px, calc(32 * var(--u)));
    }
}
.rf-how,
.rf-steps {
  z-index: 2;
}
@media (max-width: 900px) {
  .rf-cmp {
      gap: 16px;
      margin-top: 40px;
      margin-inline: calc(-20 * var(--u));
      width: calc(100% + 40 * var(--u));
      padding: 56px calc(20 * var(--u)) 20px;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
    }
  .rf-cmp::-webkit-scrollbar {
      display: none;
    }
  .rf-cmp__info {
      display: none;
    }
  .rf-cmp__col.is-top::before {
      inset: 0;
      border-radius: 24px;
    }
  .rf-cmp__col.is-top::after {
      display: none;
    }
  .rf-cmp__badge {
      top: 0;
    }
  .rf-cmp__head {
      height: 92px;
    }
  .rf-cmp__row {
      justify-content: space-between;
      height: 52px;
      padding-inline: 18px;
      text-align: start;
    }
}
/* ---------- الحاسبة والأسئلة: زجاجٌ على طريقة المرجع ---------- */
.rf-faq{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(70 * var(--u)) calc(182 * var(--u));
}
.rf-glass{
  width: min(100%, 880px);
  margin-top: calc(50 * var(--u));
  border-radius: max(20px, calc(26 * var(--u)));
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(180deg, rgba(255, 244, 214, 0.05), rgba(255, 244, 214, 0.012));
  box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.02), 0 40px 100px -40px rgba(212, 175, 55, 0.3);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}
.rf-faq__list {
  width: min(100%, 900px);
  margin-top: calc(50 * var(--u));
}
.rf-faq .faq details {
  border: 0;
  border-top: 1px solid var(--rf-line);
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.rf-faq .faq details:last-child {
  border-bottom: 1px solid var(--rf-line);
}
.rf-faq .faq summary {
  padding: 22px 4px;
  font-size: max(16px, calc(18 * var(--u)));
  font-weight: 600;
  color: #efe9dc;
}
.rf-faq .faq__a {
  padding: 0 4px 22px;
  color: #b9b09c;
  font-size: 15px;
  line-height: 1.7;
}
.rf-faq__more {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: min(100%, 900px);
  margin-top: 34px;
  padding: 22px 26px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(180deg, rgba(255, 244, 214, 0.05), rgba(255, 244, 214, 0.012));
}
.rf-faq__more h3 {
  margin: 0;
  font-size: 17px;
  color: #efe9dc;
}
.rf-faq__more p {
  margin: 6px 0 0;
  font-size: 14px;
  color: #a79f8c;
}
@media (max-width: 640px) {
  .rf-faq__more {
      flex-direction: column;
      align-items: stretch;
    }
}
/* ---------- الختام: «ابدأ اليوم مع [الشعار]» ولوحةُ الشريك تطلع من ضوء ---------- */
.rf-start {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(120 * var(--u)) calc(182 * var(--u)) calc(70 * var(--u));
}
.rf-start__grid {
  position: absolute;
  z-index: -2;
  left: 0;
  right: 0;
  top: calc(310 * var(--u));
  bottom: 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0, transparent 60%);
  mask-image: linear-gradient(180deg, #000 0, transparent 60%);
}
.rf-start__grid i,
.rf-start__grid b {
  position: absolute;
  display: block;
}
.rf-start__grid .h {
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.09) 12%, rgba(255, 255, 255, 0.09) 88%, transparent);
}
.rf-start__grid .v {
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.09), transparent);
}
.rf-start__grid .v1,
.rf-start__grid .d1 {
  left: 4.7%;
}
.rf-start__grid .v2,
.rf-start__grid .d2 {
  left: 21%;
}
.rf-start__grid .v3,
.rf-start__grid .d3 {
  right: 21%;
}
.rf-start__grid .v4,
.rf-start__grid .d4 {
  right: 4.7%;
}
.rf-start__grid .d {
  top: -2px;
  width: 5px;
  height: 5px;
  margin-inline: -2px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
}
.rf-start__title {
  max-width: calc(980 * var(--u));
  font-size: max(30px, calc(60 * var(--u)));
  text-align: center;
}
.rf-inline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.22em;
}
.rf-emblem path {
  fill: #d4af37;
}
.rf-emblem .rf-emblem__bar {
  fill: #f5f1e8;
}
.rf-emblem--inline {
  height: 0.78em;
  width: auto;
  flex: none;
  filter: drop-shadow(0 0 12px rgba(212, 175, 55, 0.35));
}
.rf-start__text {
  max-width: calc(700 * var(--u));
  min-width: min(100%, 520px);
  margin-top: max(20px, calc(44 * var(--u)));
  text-align: center;
}
.rf-start__cta {
  position: relative;
  z-index: 2;
  margin-top: calc(-40 * var(--u));
}
@media (max-width: 640px) {
  .rf-start {
      padding-inline: calc(20 * var(--u));
    }
  .rf-inline {
      flex-wrap: wrap;
    }
  .rf-start__cta {
      margin-top: 10px;
    }
}
/* لوحةُ الشريك داخل الإطار الزجاجي — تتدرّج مع --u كصورة المرجع */
/* ---------- التذييل ---------- */
@keyframes rf-twinkle {
  from {
    opacity: 0.35;
  }
  to {
    opacity: 1;
  }
}
/* ============================================================
   [2026-09-29] خاصُّ موقع الواجهة فوق نظام rf: ترويسةٌ لاصقة تتحوّل كبسولةً، أبطالُ الصفحات الداخلية، البطاقاتُ
   المصوّرة العريضة، النصوصُ المطوية تحت «المزيد»، جدولُ الحسابات، إطارُ المنصّة الزجاجي، الوثائق، الختام، التذييل
   ============================================================ */
.rf-page .fx {
  display: none;
}
.rf-page .h2,
.rf-page .rf-head .h2 {
  font-size: max(28px, calc(46 * var(--u)));
}
.rf-page .shead:not(.center) {
  align-items: flex-start;
  text-align: start;
}
.rf-page .shead:not(.center) .rf-head__sub {
  margin-inline: 0;
}
.rf-page .eyebrow--plain::before {
  display: none;
}

/* ---------- الترويسة: عريضةٌ شفافة فوق الصفحة، وتنطوي كبسولةً زجاجية عائمة حين يبدأ التمرير ---------- */
.rf-page .header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 0;
  padding: 0;
  overflow: visible;
  pointer-events: none;
}
.rf-header__wrap {
  padding-top: 22px;
  transition: padding 0.4s var(--rf-ease);
}
.rf-header__bar {
  pointer-events: auto;
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  height: 66px;
  margin-inline: auto;
  max-width: 100%;
  padding-inline: clamp(16px, 2.4vw, 44px);
  border: 1px solid transparent;
  border-radius: 999px;
  transition: max-width 0.45s var(--rf-ease), height 0.35s var(--rf-ease), background 0.35s var(--rf-ease), border-color 0.35s var(--rf-ease), box-shadow 0.35s var(--rf-ease), padding 0.35s var(--rf-ease);
}
.rf-header__wrap::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 170px;
  background: linear-gradient(180deg, var(--rf-bg) 0, rgba(6, 8, 9, 0) 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 20%, transparent);
  mask-image: linear-gradient(180deg, #000 20%, transparent);
  opacity: 1;
  transition: opacity 0.4s;
  pointer-events: none;
}
.rf-page .header.is-stuck .rf-header__wrap {
  padding-top: 12px;
}
.rf-page .header.is-stuck .rf-header__wrap::before {
  opacity: 0;
}
.rf-page .header.is-stuck .rf-header__bar {
  max-width: min(1180px, calc(100% - 28px));
  height: 60px;
  padding-inline: 22px 10px;
  border-color: rgba(232, 229, 220, 0.1);
  background: rgba(8, 10, 12, 0.72);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.rf-page .header .logo img {
  height: 32px;
  width: auto;
}
.rf-page .nav {
  display: none;
  align-items: center;
  gap: 32px;
  margin-inline-start: 40px;
}
@media (min-width: 1140px) {
  .rf-page .nav {
    display: flex;
  }
}
@media (min-width: 1140px) and (max-width: 1279px) {
  html[lang='fr'] .rf-page .nav,
  html[lang='de'] .rf-page .nav,
  html[lang='ru'] .rf-page .nav,
  html[lang='tr'] .rf-page .nav {
    display: none;
  }
}
@media (min-width: 1537px) {
  .rf-page .nav {
    gap: 40px;
    margin-inline-start: 56px;
  }
}
.rf-page .nav > a,
.rf-page .nav .navmore > summary {
  padding: 0;
  border-radius: 0;
  font-size: 16px;
  font-weight: 600;
  color: #f7f2e6;
  background: none;
  transition: opacity 0.2s ease-in-out;
}
.rf-page .nav > a:hover,
.rf-page .nav .navmore > summary:hover,
.rf-page .nav .navmore[open] > summary {
  opacity: 0.7;
  color: #f7f2e6;
  background: none;
}
.rf-page .nav > a[aria-current],
.rf-page .nav .navmore > summary.is-current {
  color: #ecd591;
  opacity: 1;
}
.rf-page .nav .navmore__menu {
  top: calc(100% + 22px);
  border-radius: 16px;
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(12, 12, 10, 0.92);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.rf-page .nav .navmore__menu a {
  font-size: 15px;
}
.rf-header__side {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-inline-start: auto;
}
.rf-page .header .lang > summary {
  gap: 7px;
  padding: 9px 11px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #f7f2e6;
}
.rf-hbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 48px;
  padding: 0 24px;
  border-radius: 14px;
  font-size: 15.5px;
  font-weight: 700;
  white-space: nowrap;
  transition: opacity 0.2s ease-in-out, scale 0.2s ease-in-out, height 0.35s var(--rf-ease);
}
.rf-hbtn:hover {
  opacity: 0.85;
}
.rf-hbtn:active {
  scale: 0.98;
}
.rf-hbtn svg {
  width: 18px;
  height: 18px;
}
.rf-hbtn--ghost {
  color: #f5f0e4;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(180deg, rgba(38, 33, 22, 0.66), rgba(12, 11, 9, 0.66));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.rf-hbtn--gold {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--rf-gold);
  color: #1b1406;
  border: 1px solid rgba(255, 236, 184, 0.45);
  box-shadow: 0 0 26px 0 rgba(212, 175, 55, 0.45);
}
.rf-hbtn--gold::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: 0;
  width: 80%;
  height: 120%;
  translate: -50% 75%;
  border-radius: 100%;
  background: #fff4cc;
  filter: blur(15px);
  pointer-events: none;
}
.rf-page .header.is-stuck .rf-hbtn {
  height: 42px;
  padding-inline: 18px;
  font-size: 14.5px;
}
.rf-page .header .burger > summary {
  width: 46px;
  height: 46px;
  border: 0;
  background: rgba(255, 255, 255, 0.06);
  color: #f5f0e4;
}
@media (min-width: 1140px) {
  .rf-page .header .burger {
    display: none;
  }
}
@media (min-width: 1140px) and (max-width: 1279px) {
  html[lang='fr'] .rf-page .header .burger,
  html[lang='de'] .rf-page .header .burger,
  html[lang='ru'] .rf-page .header .burger,
  html[lang='tr'] .rf-page .header .burger {
    display: block;
  }
}
@media (max-width: 1024px) {
  .rf-hide-sm {
    display: none !important;
  }
}
@media (max-width: 479px) {
  .rf-header__wrap {
    padding-top: 12px;
  }
  .rf-page .header .logo img {
    height: 26px;
  }
  .rf-page .header .lang > summary span {
    display: none;
  }
  .rf-page .header .burger > summary {
    width: 42px;
    height: 42px;
  }
}
.rf-page .header .mobilenav {
  top: calc(100% + 12px);
  border-radius: 22px;
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(10, 11, 12, 0.96);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
/* شريطُ الأسعار فوق الترويسة على الرئيسية: يبقى في تدفّق الصفحة والترويسةُ تلتصق تحته */
.rf-page .ticker {
  position: relative;
  z-index: 101;
  background: rgba(6, 8, 9, 0.92);
}

/* ---------- البطلُ الرئيسي: لا هامشَ علوي (الترويسةُ فوقه) والشريطُ قبله ---------- */
.rf-page .rf-hero {
  min-height: max(640px, calc(100vh - 44px));
  height: auto;
}
@media (max-width: 640px) {
  .rf-page .rf-hero {
    min-height: max(600px, calc(100vh - 44px));
  }
}
.rf-hero__note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(240, 222, 175, 0.75);
}
.rf-hero__note svg {
  color: #ecd591;
}

/* ---------- شريطُ الأرقام: أربعةُ أرقامٍ ذهبية تعدّ حين تظهر ---------- */
.rf-stats {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  width: 100%;
  max-width: 1200px;
  margin: calc(-56 * var(--u)) auto 0;
  padding: 0 clamp(16px, 3vw, 40px);
  z-index: 2;
}
.rf-stat {
  position: relative;
  padding: calc(28 * var(--u)) 16px;
  text-align: center;
}
.rf-stat + .rf-stat::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 28%;
  bottom: 28%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(236, 213, 145, 0.35), transparent);
}
.rf-stat__v {
  font-size: max(30px, calc(52 * var(--u)));
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.1;
  background: linear-gradient(180deg, #f6e3a4 0%, #d4af37 60%, #b88f24 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.rf-stat__l {
  margin-top: 6px;
  font-size: max(12.5px, calc(13.5 * var(--u)));
  font-weight: 600;
  color: rgba(240, 222, 175, 0.7);
}
@media (max-width: 760px) {
  .rf-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: -20px;
  }
  .rf-stat:nth-child(3)::before {
    display: none;
  }
  .rf-stat {
    padding: 18px 10px;
  }
}

/* ---------- البطاقاتُ الرابطة (الأسواق): البطاقةُ كلُّها رابط ---------- */
.rf-card--link {
  color: inherit;
  text-decoration: none;
}
.rf-card__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 14px;
  margin-top: calc(16 * var(--u));
  font-size: max(12.5px, calc(13 * var(--u)));
  color: rgba(240, 222, 175, 0.6);
}
.rf-card__meta b {
  color: #ecd591;
  font-weight: 800;
}
.rf-card__go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: calc(18 * var(--u));
  font-weight: 800;
  font-size: max(13.5px, calc(14 * var(--u)));
  color: #ecd591;
}
.rf-card__go svg {
  transition: translate 0.3s var(--rf-ease);
}
.rf-card--link:hover .rf-card__go svg {
  translate: 4px 0;
}
html[dir='rtl'] .rf-card--link:hover .rf-card__go svg {
  translate: -4px 0;
}
.rf-cards--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 900px) {
  .rf-cards--3 {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- الميزةُ العريضة: صورةٌ على جانبٍ ونصٌّ على الآخر، والتفاصيلُ مطوية ---------- */
.rf-feature {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: calc(40 * var(--u));
  width: 100%;
  margin-top: calc(50 * var(--u));
  border-radius: calc(30 * var(--u));
  border: max(1px, calc(1.5 * var(--u))) solid rgba(255, 255, 255, 0.11);
  background: linear-gradient(180deg, #0f1215, #08090b 80%);
  overflow: hidden;
}
.rf-feature--flip {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}
.rf-feature--flip .rf-feature__img {
  order: 2;
}
.rf-feature__img {
  position: relative;
  align-self: stretch;
  min-height: calc(380 * var(--u));
  background: #050505;
}
.rf-feature__img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
}
.rf-feature__img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(8, 9, 11, 0) 70%, #0a0b0d 100%);
  pointer-events: none;
}
html[dir='rtl'] .rf-feature__img::after {
  background: linear-gradient(270deg, rgba(8, 9, 11, 0) 70%, #0a0b0d 100%);
}
.rf-feature--flip .rf-feature__img::after {
  background: linear-gradient(270deg, rgba(8, 9, 11, 0) 70%, #0a0b0d 100%);
}
html[dir='rtl'] .rf-feature--flip .rf-feature__img::after {
  background: linear-gradient(90deg, rgba(8, 9, 11, 0) 70%, #0a0b0d 100%);
}
.rf-feature__body {
  padding: calc(44 * var(--u)) calc(44 * var(--u)) calc(44 * var(--u)) 0;
}
html[dir='rtl'] .rf-feature__body {
  padding: calc(44 * var(--u)) 0 calc(44 * var(--u)) calc(44 * var(--u));
}
.rf-feature--flip .rf-feature__body {
  padding: calc(44 * var(--u)) 0 calc(44 * var(--u)) calc(44 * var(--u));
}
html[dir='rtl'] .rf-feature--flip .rf-feature__body {
  padding: calc(44 * var(--u)) calc(44 * var(--u)) calc(44 * var(--u)) 0;
}
.rf-feature__body .rf-title {
  font-size: max(24px, calc(36 * var(--u)));
}
.rf-feature__body .rf-text {
  margin-top: calc(16 * var(--u));
  max-width: 56ch;
}
.rf-feature__body .rf-more {
  margin-top: calc(18 * var(--u));
}
.rf-feature__cta {
  margin-top: calc(24 * var(--u));
}
@media (max-width: 900px) {
  .rf-feature,
  .rf-feature--flip {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .rf-feature--flip .rf-feature__img {
    order: 0;
  }
  .rf-feature__img {
    min-height: 0;
    aspect-ratio: 16 / 10;
  }
  .rf-feature__img::after,
  .rf-feature--flip .rf-feature__img::after,
  html[dir='rtl'] .rf-feature__img::after,
  html[dir='rtl'] .rf-feature--flip .rf-feature__img::after {
    background: linear-gradient(0deg, #0a0b0d 0%, rgba(8, 9, 11, 0) 40%);
  }
  .rf-feature__body,
  .rf-feature--flip .rf-feature__body,
  html[dir='rtl'] .rf-feature__body,
  html[dir='rtl'] .rf-feature--flip .rf-feature__body {
    padding: 8px 22px 26px;
  }
}

/* ---------- «المزيد»: النصُّ الطويل مطويٌّ لا مخفيٌّ، يُفهرَس ويُفتح بنقرة ---------- */
.rf-more {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.rf-more > summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 0 6px;
  cursor: pointer;
  list-style: none;
  font-size: max(13.5px, calc(14 * var(--u)));
  font-weight: 800;
  color: #ecd591;
}
.rf-more > summary::-webkit-details-marker {
  display: none;
}
.rf-more > summary::after {
  content: '';
  width: 7px;
  height: 7px;
  border-inline-end: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  rotate: 45deg;
  translate: 0 -2px;
  transition: rotate 0.25s var(--rf-ease), translate 0.25s var(--rf-ease);
}
.rf-more[open] > summary::after {
  rotate: 225deg;
  translate: 0 2px;
}
.rf-more__body {
  padding: 6px 0 4px;
  color: #b9b09c;
  font-size: max(14px, calc(14.5 * var(--u)));
  line-height: 1.7;
}
.rf-more__body p + p,
.rf-more__body li + li {
  margin-top: 10px;
}
.rf-more__body ul,
.rf-more__body ol {
  margin: 0;
  padding-inline-start: 1.2em;
}
.rf-more__body b,
.rf-more__body strong {
  color: #efe9dc;
}
.rf-more__list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 10px;
}
.rf-more__list li {
  display: flex;
  gap: 10px;
}
.rf-more__list li::before {
  content: '';
  flex: none;
  width: 6px;
  height: 6px;
  margin-top: 0.55em;
  border-radius: 50%;
  background: #d4af37;
}
.rf-more__list b {
  color: #efe9dc;
}

/* ---------- جدولُ الحسابات (rf-cmp): أعمدةٌ للحسابات، والأقلُّ إيداعاً مضاء ---------- */
.rf-cmp {
  margin-top: calc(80 * var(--u));
}
.rf-cmp__name {
  display: block;
  font-size: max(18px, calc(24 * var(--u)));
  font-weight: 700;
  letter-spacing: -0.01em;
  color: rgba(243, 238, 226, 0.55);
}
.rf-cmp .is-top .rf-cmp__name {
  color: #f7f2e6;
}
.rf-cmp__code {
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(243, 238, 226, 0.4);
}
.rf-cmp__pop {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  color: #1b1406;
  background: var(--rf-gold);
}
.rf-cmp__val {
  font-weight: 800;
  color: #ecd591;
}
.rf-cmp__row--best {
  height: auto;
  min-height: max(56px, calc(64 * var(--u)));
  padding: 8px 12px;
  font-size: max(12.5px, calc(13 * var(--u)));
  line-height: 1.45;
  color: rgba(243, 238, 226, 0.62);
}
.rf-cmp__row--cta {
  border-top: 0;
  padding-top: 6px;
}
.rf-cmp__row--cta .rf-hbtn {
  height: 42px;
  padding-inline: 18px;
  font-size: 14px;
}
.rf-cmp__info .rf-cmp__row--best {
  align-items: center;
}
.rf-cmp__lbl {
  display: none;
}
@media (max-width: 900px) {
  .rf-cmp__row--best {
    justify-content: flex-start;
    text-align: start;
  }
}
.rf-adv__more {
  margin-top: calc(40 * var(--u));
}

/* ---------- المنصّة: مشهدُ الطرفية الحيّ داخل إطارٍ زجاجي يطلع من الضوء ---------- */
.rf-platform {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(90 * var(--u)) calc(120 * var(--u)) calc(40 * var(--u));
}
.rf-platform__specs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(12 * var(--u));
  margin-top: calc(30 * var(--u));
}
.rf-spec {
  min-width: calc(120 * var(--u));
  padding: calc(12 * var(--u)) calc(18 * var(--u));
  border-radius: calc(14 * var(--u));
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(180deg, rgba(255, 244, 214, 0.05), rgba(255, 244, 214, 0.012));
  text-align: center;
}
.rf-spec b {
  display: block;
  font-size: max(20px, calc(24 * var(--u)));
  font-weight: 900;
  color: #ecd591;
  line-height: 1.2;
}
.rf-spec span {
  font-size: max(12px, calc(12.5 * var(--u)));
  color: rgba(240, 222, 175, 0.65);
}
.rf-platform__app {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: max(36px, calc(55 * var(--u)));
}
.rf-platform__light {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 0;
  translate: -50% -82%;
  width: 86%;
  height: calc(440 * var(--u));
  background:
    radial-gradient(30% 34% at 50% 100%, rgba(255, 252, 240, 1) 0%, rgba(255, 238, 190, 0.9) 30%, rgba(255, 238, 190, 0) 100%),
    radial-gradient(50% 70% at 50% 100%, rgba(248, 222, 150, 0.8) 0%, rgba(222, 184, 80, 0.45) 30%, rgba(212, 175, 55, 0.14) 60%, rgba(212, 175, 55, 0) 100%);
  filter: blur(12px);
  pointer-events: none;
}
.rf-platform__card {
  width: min(100%, calc(1100 * var(--u)));
  padding: calc(10 * var(--u));
  border-radius: calc(26 * var(--u));
  border: 1px solid rgba(236, 213, 145, 0.28);
  background-color: rgba(6, 8, 9, 0.3);
  -webkit-backdrop-filter: blur(50px);
  backdrop-filter: blur(50px);
  -webkit-mask-image: linear-gradient(0deg, transparent 0, #000 40%);
  mask-image: linear-gradient(0deg, transparent 0, #000 40%);
}
.rf-platform__inner {
  position: relative;
  overflow: hidden;
  border-radius: calc(18 * var(--u));
  background-color: rgba(6, 8, 9, 0.5);
}
.rf-platform__inner .stage--wide .term {
  border-radius: calc(18 * var(--u));
  border: 0;
}
.rf-platform__cta {
  position: relative;
  z-index: 2;
  margin-top: calc(-30 * var(--u));
}
@media (max-width: 900px) {
  .rf-platform {
    padding-inline: calc(20 * var(--u));
  }
  .rf-platform__card {
    width: 100%;
  }
  .rf-platform__cta {
    margin-top: 10px;
  }
}

/* ---------- الوثائقُ القانونية: أربعُ شرائح زجاجية في صفّ ---------- */
.rf-docs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(14 * var(--u));
  width: 100%;
  max-width: 1100px;
  margin-top: calc(40 * var(--u));
}
.rf-doc {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: calc(18 * var(--u)) calc(20 * var(--u));
  border-radius: calc(18 * var(--u));
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(180deg, rgba(255, 244, 214, 0.05), rgba(255, 244, 214, 0.012));
  color: #efe9dc;
  font-size: max(14px, calc(15 * var(--u)));
  font-weight: 700;
  transition: border-color 0.3s, translate 0.3s var(--rf-ease);
}
.rf-doc:hover {
  border-color: rgba(212, 175, 55, 0.45);
  translate: 0 -3px;
}
.rf-doc__ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(212, 175, 55, 0.12);
  color: #ecd591;
}
.rf-doc small {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(240, 222, 175, 0.6);
}
@media (max-width: 900px) {
  .rf-docs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 480px) {
  .rf-docs {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- أبطالُ الصفحات الداخلية: أشعّةٌ ذهبية خلف العنوان، ورسمٌ ثلاثيُّ الأبعاد على الجانب إن وُجد ---------- */
.rf-phero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: max(120px, calc(160 * var(--u))) calc(120 * var(--u)) calc(30 * var(--u));
}
.rf-phero__bg {
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
}
.rf-phero__bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
  opacity: 0.8;
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 95%);
  mask-image: linear-gradient(180deg, #000 30%, transparent 95%);
}
.rf-phero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: calc(40 * var(--u));
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
}
.rf-phero--art .rf-phero__grid {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}
.rf-phero__copy .rf-title {
  font-size: max(30px, calc(52 * var(--u)));
}
.rf-phero__copy .rf-text {
  margin-top: max(14px, calc(22 * var(--u)));
  max-width: 62ch;
}
.rf-phero__copy > .hero__cta,
.rf-phero__copy > .rf-phero__cta {
  margin-top: max(20px, calc(30 * var(--u)));
}
.rf-phero__art {
  position: relative;
  justify-self: center;
  width: min(100%, calc(440 * var(--u)));
  aspect-ratio: 1;
}
.rf-phero__art::before {
  content: '';
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.35), rgba(212, 175, 55, 0) 70%);
  filter: blur(30px);
}
/* [2026-10-10، لقطةُ المالك من «شروط التداول»: «ليش هيك مافي تناسق»] الصورةُ مربّعةٌ نصفُها الأعلى ضبابٌ فاتح يبلغ حافّتَها،
   والقناعُ القديم (‎circle at 50% 45%‎ بلا حجم = حتى أبعد زاوية، فنصفُ قطره 74% من العرض) كان يبلغ الشفافيةَ عند 53% من
   العرض، أي خارج الصورة: تبقى الحوافُّ العليا والجانبية ظاهرةً (43% فوق و18% على الجانبين) فيُرى مربّعٌ فاتح فوق الصفحة
   الداكنة. الآن ‎closest-side‎: الشفافيةُ التامّة عند حافّة الصورة نفسها، بتدرّجٍ ناعم لا بحدٍّ دائري، والصورةُ أكبر من
   صندوقها بربعٍ كي يبقى الجسمُ بحجمه والتلاشي حوله. لا زوايا مدوّرة (القناعُ يُغني عنها)، ولا تلتقط النقر فوق النص. */
.rf-phero__art img {
  position: absolute;
  inset: -13%;
  display: block;
  width: 126%;
  height: 126%;
  max-width: none;
  object-fit: cover;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(
    closest-side circle at 50% 50%,
    #000 0%,
    rgba(0, 0, 0, 0.97) 34%,
    rgba(0, 0, 0, 0.86) 46%,
    rgba(0, 0, 0, 0.64) 58%,
    rgba(0, 0, 0, 0.38) 70%,
    rgba(0, 0, 0, 0.16) 82%,
    rgba(0, 0, 0, 0.04) 92%,
    transparent 100%
  );
  mask-image: radial-gradient(
    closest-side circle at 50% 50%,
    #000 0%,
    rgba(0, 0, 0, 0.97) 34%,
    rgba(0, 0, 0, 0.86) 46%,
    rgba(0, 0, 0, 0.64) 58%,
    rgba(0, 0, 0, 0.38) 70%,
    rgba(0, 0, 0, 0.16) 82%,
    rgba(0, 0, 0, 0.04) 92%,
    transparent 100%
  );
}
@media (prefers-reduced-motion: no-preference) {
  .rf-phero__art img {
    animation: rf-float 7s ease-in-out infinite alternate;
  }
}
@keyframes rf-float {
  from {
    translate: 0 0;
  }
  to {
    translate: 0 -14px;
  }
}
.rf-phero .specs {
  margin-top: max(20px, calc(28 * var(--u)));
}
@media (max-width: 900px) {
  .rf-phero {
    padding: 110px calc(20 * var(--u)) 20px;
  }
  .rf-phero--art .rf-phero__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
  .rf-phero__art {
    order: -1;
    width: min(60vw, 260px);
  }
}
.rf-page .section--first {
  padding-top: 30px;
}

/* ---------- الختامُ الموحّد (band): عنوانٌ ونصٌّ وزرُّ الحلقة فوق ضوء ---------- */
.rf-page .band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: calc(90 * var(--u)) clamp(20px, 6vw, 80px) calc(80 * var(--u));
  border-radius: calc(30 * var(--u));
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(180deg, rgba(255, 244, 214, 0.04), rgba(8, 9, 11, 0.6));
  box-shadow: none;
}
.rf-page .band::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 0;
  translate: -50% -55%;
  width: 90%;
  height: 420px;
  background: radial-gradient(50% 60% at 50% 50%, rgba(244, 214, 138, 0.5) 0%, rgba(212, 175, 55, 0.18) 40%, rgba(212, 175, 55, 0) 75%);
  filter: blur(20px);
  pointer-events: none;
}
.rf-page .band .rf-title {
  font-size: max(28px, calc(52 * var(--u)));
}
.rf-page .band .rf-text {
  max-width: 640px;
  margin: max(14px, calc(22 * var(--u))) auto 0;
}
.rf-band__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: max(26px, calc(40 * var(--u)));
}

/* ---------- الأسئلةُ والأقسامُ العامة داخل rf ---------- */
.rf-page .faq {
  margin-inline: auto;
}
.rf-page .faq details {
  border: 0;
  border-top: 1px solid var(--rf-line);
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.rf-page .faq details:last-child {
  border-bottom: 1px solid var(--rf-line);
}
.rf-page .faq summary {
  padding: 20px 4px;
  font-size: max(15.5px, calc(17 * var(--u)));
  font-weight: 600;
  color: #efe9dc;
}
.rf-page .faq__a {
  padding: 0 4px 20px;
  color: #b9b09c;
  line-height: 1.7;
}
.rf-page .more .btn--ghost,
.rf-page .btn--ghost {
  border-color: rgba(255, 255, 255, 0.12);
  background: linear-gradient(180deg, rgba(255, 244, 214, 0.05), rgba(255, 244, 214, 0.012));
  color: #f5f0e4;
}
.rf-page .btn--gold {
  background: var(--rf-gold);
  color: #1b1406;
  box-shadow: 0 0 26px 0 rgba(212, 175, 55, 0.35);
}

/* ---------- التذييل ---------- */
.footer.rf-foot {
  position: relative;
  z-index: 5;
  margin: 0;
  padding: calc(60 * var(--u)) calc(120 * var(--u)) calc(40 * var(--u));
  border: 0;
  background: none;
}
.rf-foot__top {
  display: flex;
  justify-content: space-between;
  gap: calc(80 * var(--u));
}
.rf-foot__info {
  width: calc(340 * var(--u));
  min-width: 260px;
}
.rf-foot .logo img {
  height: max(22px, calc(26 * var(--u)));
  width: auto;
}
.rf-foot__text {
  margin: calc(22 * var(--u)) 0 0;
  font-size: max(18px, calc(22 * var(--u)));
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.02em;
  background: var(--rf-title);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #efe9dc;
}
html[dir='rtl'] .rf-foot__text {
  letter-spacing: 0;
  line-height: 1.5;
}
.rf-foot .footer__social {
  margin-top: 22px;
}
.rf-foot .footer__social a {
  border-radius: 12px;
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  color: #f5f0e4;
}
.rf-foot__cols {
  display: flex;
  flex: 1;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: calc(28 * var(--u)) calc(30 * var(--u));
}
.rf-foot__col {
  min-width: calc(150 * var(--u));
}
.rf-foot__h {
  margin: 0 0 20px;
  font-size: 15px;
  font-weight: 600;
  color: rgba(243, 238, 226, 0.5);
}
.rf-foot__col ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.rf-foot__col li {
  margin-bottom: 13px;
}
.rf-foot__col a {
  font-size: 15px;
  color: #f3eee2;
  transition: color 0.2s;
}
.rf-foot__col a:hover {
  color: #ecd591;
}
.rf-foot__sep {
  position: relative;
  height: 1px;
  margin: calc(60 * var(--u)) 0 calc(44 * var(--u));
}
.rf-foot__sep i {
  position: absolute;
  inset: 0 12%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(244, 222, 160, 0.95), rgba(212, 175, 55, 0.3) 45%, rgba(212, 175, 55, 0) 75%);
}
.rf-foot__sep::before {
  content: '';
  position: absolute;
  left: 25%;
  right: 25%;
  top: -40px;
  height: 80px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(212, 175, 55, 0.16), transparent 70%);
  pointer-events: none;
}
.rf-foot__sep::after {
  content: '';
  position: absolute;
  left: 20%;
  right: 20%;
  top: -30px;
  height: 60px;
  background-image: radial-gradient(1px 1px at 12% 30%, rgba(255, 240, 200, 0.8), transparent 60%), radial-gradient(1px 1px at 33% 70%, rgba(255, 240, 200, 0.6), transparent 60%), radial-gradient(1.4px 1.4px at 52% 20%, rgba(255, 240, 200, 0.7), transparent 60%), radial-gradient(1px 1px at 71% 80%, rgba(255, 240, 200, 0.6), transparent 60%), radial-gradient(1.2px 1.2px at 88% 40%, rgba(255, 240, 200, 0.7), transparent 60%);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .rf-foot__sep::after {
    animation: rf-twinkle 4s ease-in-out infinite alternate;
  }
}
@keyframes rf-twinkle {
  from {
    opacity: 0.35;
  }
  to {
    opacity: 1;
  }
}
.rf-foot__risk {
  max-width: 1100px;
  margin: 0;
  font-size: 12.5px;
  line-height: 1.65;
  color: rgba(243, 238, 226, 0.42);
}
.rf-foot__risk strong {
  color: rgba(243, 238, 226, 0.6);
}
.rf-foot__copy {
  margin: 18px 0 0;
  font-size: 13px;
  color: rgba(243, 238, 226, 0.45);
}
@media (max-width: 900px) {
  .footer.rf-foot {
    padding: 50px 20px 34px;
  }
  .rf-foot__top {
    flex-direction: column;
    gap: 36px;
  }
  .rf-foot__info {
    width: auto;
    min-width: 0;
  }
  .rf-foot__cols {
    justify-content: flex-start;
    gap: 28px 40px;
  }
}
/* شريطُ الموافقة فوق كل شيء في هذا النظام */
.rf-page .consent {
  z-index: 200;
}
/* بطلٌ خاصّ (صفحة التطبيق): الترويسةُ فوقه فيحتاج مسافةً علوية */
.rf-page .phero:not(.rf-phero) {
  padding-top: 110px;
}
/* رأسُ عمود الحساب يتّسع لاسمه ورمزه وشارته؛ والجدولُ على الجوال بطاقاتٌ تُمرَّر أفقياً، والعمودُ المضاء أولاً */
.rf-cmp__head {
  height: auto;
  min-height: max(78px, calc(96 * var(--u)));
  padding: 10px 8px;
}
.rf-cmp__info .rf-cmp__head {
  justify-content: flex-end;
}
.rf-cmp__col .rf-cmp__head {
  justify-content: flex-end;
}
@media (max-width: 900px) {
  .rf-cmp__col {
    flex: 0 0 min(82%, 340px);
    scroll-snap-align: center;
    border: 1px solid var(--rf-line);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.02);
  }
  .rf-cmp__col.is-top {
    order: -1;
    border-color: transparent;
    background: none;
  }
  .rf-cmp__lbl {
    display: block;
    font-size: 13px;
    color: rgba(243, 238, 226, 0.55);
  }
  .rf-cmp__row--cta {
    justify-content: center;
  }
}
.rf-docs {
  margin-inline: auto;
}
.rf-feature__body .rf-label {
  margin-bottom: 14px;
}
.rf-feature__body .rf-title {
  margin-top: 0;
}
/* الشارةُ الزجاجية داخل البطل تظهر مع بقية البطل */
.rf-hero__content .rf-label {
  margin-bottom: 14px;
}
/* ---------- تصحيحاتُ المراجعة الأولى (2026-09-29) ---------- */
/* مسارُ التنقل تحت الترويسة العائمة مباشرةً، فوق بطل الصفحة */
.rf-page main {
  position: relative;
}
.rf-page .crumbs {
  position: absolute;
  z-index: 3;
  top: 100px;
  inset-inline: 0;
  margin: 0;
  padding-block: 0;
}
@media (max-width: 900px) {
  .rf-page .crumbs {
    top: 78px;
  }
  .rf-phero {
    padding-top: 124px;
  }
}
/* مشهدُ البطل ينزل أكثر على الشاشات العريضة كي يقف الشخصان تحت الزرّ وسطره */
@media (min-width: 651px) {
  .rf-page .rf-hero__bg picture,
  .rf-page .rf-hero__video {
    bottom: -14%;
    height: 114%;
  }
}
/* عمودُ المعاني في جدول الحسابات: لا نقطةَ أمام صفٍّ فارغ */
.rf-cmp__info .rf-cmp__row--best::before,
.rf-cmp__info .rf-cmp__row--cta::before {
  display: none;
}
/* زرُّ المنصّة تحت الإطار لا فوقه */
.rf-platform__cta {
  margin-top: 26px;
}
.rf-platform__cta .rf-hbtn {
  background: linear-gradient(180deg, rgba(38, 33, 22, 0.9), rgba(12, 11, 9, 0.9));
}
/* شريطُ الأرقام: الرقمُ سطرٌ والوصفُ سطرٌ تحته (كان الاثنان سطراً واحداً فخرج عن الشاشة على الجوال) */
.rf-stat__v,
.rf-stat__l {
  display: block;
}
.rf-stat__v {
  overflow-wrap: anywhere;
}
/* مسارُ التنقل في الصفحات الداخلية: يبتعد عن الترويسة قليلاً ويبقى فوق البطل */
.rf-page .crumbs {
  top: 104px;
}
.rf-phero {
  padding-top: max(150px, calc(180 * var(--u)));
}
@media (max-width: 900px) {
  .rf-page .crumbs {
    top: 84px;
  }
  .rf-phero {
    padding-top: 134px;
  }
}
/* [فحص 2026-10-13] صفحاتُ الوثائق القانونية والمقالات بلا بطل (body.is-doc): كان نصُّها يبدأ عند 28px فيُرسم العنوانُ تحت الترويسة
   العائمة، ومسارُ التنقل (مطلقُ الموضع) يقع فوق العنوان أو سطر الكاتب أو صندوق المحتويات. المسارُ هنا في تدفّق الصفحة عند موضعه
   نفسه في صفحات البطل (104 و84)، والنصُّ يبدأ تحته حيث يبدأ البطل (150 و134) مهما انكسر المسارُ على أسطر */
.rf-page.is-doc .crumbs {
  position: static;
  padding-top: 104px;
}
.rf-page.is-doc .section--doc {
  padding-top: 23px;
}
@media (max-width: 900px) {
  .rf-page.is-doc .crumbs {
    padding-top: 84px;
  }
  .rf-page.is-doc .section--doc {
    padding-top: 27px;
  }
}
/* الترويسةُ العريضة فوق الصفحات الداخلية: بلا تدرّجٍ داكن يُخفي أشعّة البطل */
.rf-page.is-inner .rf-header__wrap::before {
  height: 120px;
  opacity: 0.6;
}
/* صفحةُ التطبيق: بطلُها الخاص فوق أشعّة النظام الجديد */
.rf-phero--app .wrap {
  position: relative;
}
.rf-phero--app .rf-label {
  margin-bottom: 18px;
}
.rf-page .rf-phero--app.phero {
  padding-top: max(150px, calc(180 * var(--u)));
}
/* ---------- تصحيحُ جدول الحسابات (لقطةُ المالك من الهاتف 2026-09-29): الشارةُ كانت تغطي اسمَ الحساب، والصفوفُ لم تكن
   على سطرٍ واحد بين الأعمدة لأن رأسَ العمود المضاء أطولُ (شارةُ «أقل إيداع») — ارتفاعاتٌ ثابتة للرأس ولصفّ الوصف ---------- */
.rf-cmp__head {
  height: max(124px, calc(150 * var(--u)));
  min-height: 0;
  justify-content: flex-end;
  padding: 8px 8px 12px;
}
.rf-cmp__col .rf-cmp__head {
  justify-content: flex-end;
}
.rf-cmp__row--best {
  height: max(76px, calc(84 * var(--u)));
  min-height: 0;
}
@media (max-width: 900px) {
  .rf-cmp__head {
    height: 134px;
    padding-top: 36px;
  }
  .rf-cmp__badge {
    top: 0;
    translate: -50% -50%;
  }
  .rf-cmp__row--best {
    height: 80px;
  }
}
/* ---------- تصحيحاتُ لقطات المالك من الحاسوب (2026-09-29 ليلاً) ---------- */
/* البطل يذوب في خلفية الصفحة من أعلى ومن أسفل: كان أعلى الصورة/الفيديو أفتحَ من الخلفية فظهر شريطٌ تحت الترويسة */
.rf-page .rf-hero {
  background: var(--rf-bg);
}
.rf-page .rf-hero__bg {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 36%, #000 72%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 36%, #000 72%, transparent 100%);
}
@media (min-width: 651px) {
  .rf-page .rf-hero__video {
    -webkit-mask-image: none;
    mask-image: none;
  }
}
/* أشعّةُ قسم الحسابات: تبدأ من أعلى القسم وتذوب من أعلى ومن أسفل ولا تخرج عنه (كانت حافّتُها العليا خطاً قاطعاً فوق القسم السابق) */
.rf-adv {
  overflow: clip;
}
.rf-adv__bg {
  top: 0;
  translate: -50% 0;
}
.rf-adv__bg img {
  opacity: 0.9;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 20%, #000 55%, transparent 92%);
  mask-image: linear-gradient(180deg, transparent 0, #000 20%, #000 55%, transparent 92%);
}
/* رأسُ عمود الحسابات: المسافةُ فوق الاسم بحجم الشارة الحقيقي (74 وحدة، أي 74px على هاتفٍ عرضُه 430) لا رقماً ثابتاً */
.rf-cmp__head {
  height: max(146px, calc(158 * var(--u)));
}
.rf-cmp__col.is-top .rf-cmp__head {
  padding-top: calc(max(29px, 37 * var(--u)) + 14px);
}
.rf-cmp__row--cta {
  height: 70px;
  padding: 6px 12px 0;
  align-items: flex-start;
}
@media (max-width: 900px) {
  .rf-cmp__head {
    height: 164px;
    padding-top: 12px;
  }
  .rf-cmp__col.is-top .rf-cmp__head {
    padding-top: calc(max(29px, 37 * var(--u)) + 18px);
  }
  .rf-cmp__row--cta {
    justify-content: center;
    padding-bottom: 4px;
  }
}
/* ---------- البطلُ الحيّ بلا فيديو (2026-09-29 ليلاً، المالك: «الدقة بالحاسوب كثير سيئة»): صورةٌ ثابتة حادّة، ونجومٌ تتنفّس
   على canvas، وضوءٌ يتنفّس خلف الواقفَين، وعناصرُ مقصوصة شفّافة (شاشاتٌ زجاجية، بطاقات، ظلالٌ طافية) تطفو بحركة CSS وتتوازى مع
   الماوس — كلُّ شيءٍ بدقّة الصورة، لا بدقّة فيديو مضغوط ---------- */
.rf-sky {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.rf-hero__beam {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 60%;
  height: 70%;
  translate: -50% 0;
  background: radial-gradient(50% 70% at 50% 100%, rgba(255, 224, 150, 0.22), rgba(212, 175, 55, 0.08) 45%, rgba(212, 175, 55, 0) 75%);
  pointer-events: none;
  opacity: 0.6;
}
@media (prefers-reduced-motion: no-preference) {
  .rf-hero__beam {
    animation: rf-breathe 5.5s ease-in-out infinite alternate;
  }
}
@keyframes rf-breathe {
  from {
    opacity: 0.45;
  }
  to {
    opacity: 1;
  }
}
.rf-fls {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.rf-fl {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: auto;
  --px: 0px;
  --py: 0px;
  transform: translate3d(var(--px), var(--py), 0) rotate(var(--r));
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.6));
  will-change: transform;
}
@media (prefers-reduced-motion: no-preference) {
  .rf-fl {
    animation: rf-drift var(--d, 8s) ease-in-out var(--dl, 0s) infinite alternate;
  }
}
@keyframes rf-drift {
  from {
    transform: translate3d(var(--px), calc(var(--py) + 8px), 0) rotate(calc(var(--r) - 2.5deg));
  }
  to {
    transform: translate3d(var(--px), calc(var(--py) - 14px), 0) rotate(calc(var(--r) + 2.5deg));
  }
}
@media (max-width: 650px) {
  .rf-fl {
    left: var(--mx, var(--x));
    top: var(--my, var(--y));
    width: var(--mw, var(--w));
  }
  .rf-fl--desk {
    display: none;
  }
  .rf-hero__beam {
    width: 120%;
  }
}
.rf-fl {
  opacity: 0.92;
}
/* صفحةُ الشروط على الجوال (لقطةُ المالك 2026-09-29): عمودُ الشبكة كان يتّسع لأعرض جدولٍ فيه فتخرج الصفحةُ عن الشاشة ويصغّرها
   المتصفح؛ العمودُ الآن لا يتجاوز عرض الشاشة والجداولُ تُمرَّر داخل إطارها.
   [فحص 2026-10-13] للشاشات الضيّقة وحدها: القاعدةُ كانت بلا شرط فألغت عمودَي الحاسوب، وبقي الفهرسُ ملتصقاً (sticky) بعرض
   الصفحة كلِّه فوق النص طوال التمرير */
@media (max-width: 1023px) {
  .docwrap {
    grid-template-columns: minmax(0, 1fr);
  }
}
.docwrap > .toc,
.docwrap > .prose {
  min-width: 0;
  max-width: 100%;
}
.prose .tablewrap,
.prose table {
  max-width: 100%;
}

/* ---------- لقطاتُ المالك الثالثة (2026-09-29 ليلاً): «مبكسلة» و«يد الشخصية مخفية تحت الزر» ----------
   الحبيباتُ فوق البطل حُذفت؛ العناصرُ الطافية خرجت من طبقة الخلفية المقنَّعة فلا يتلاشى أسفلُها كأنه صورةٌ رديئة؛ محتوى البطل
   ينضغط للأعلى وينزل المشهدُ أكثر كي تبقى اليدُ المرفوعة تحت الزرّ لا خلفه؛ وتلاشي أسفل البطل أقصر (86%→100%) */
.rf-hero::after {
  display: none;
}
.rf-page .rf-hero__bg {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 34%, #000 86%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 34%, #000 86%, transparent 100%);
}
.rf-hero > .rf-fls {
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  transition: opacity 0.6s ease-in-out;
}
.js .rf-hero > .rf-fls {
  opacity: 0;
}
.js .rf-hero > .rf-fls.is-in {
  opacity: 1;
}
.rf-hero__content {
  padding-top: max(112px, calc(112 * var(--u)));
}
.rf-hero__title {
  margin-top: 0;
}
.rf-hero__text {
  margin-top: max(14px, calc(20 * var(--u)));
}
.rf-hero__btns {
  margin-top: max(22px, calc(28 * var(--u)));
}
.rf-hero__note {
  margin-top: 12px;
}
.rf-hero__content .rf-label {
  margin-bottom: 10px;
}
@media (max-width: 768px) {
  .rf-hero__content {
    padding-top: max(96px, calc(96 * var(--u)));
  }
}
@media (max-width: 650px) {
  .rf-page .rf-hero__bg picture {
    bottom: -8%;
    height: 108%;
  }
}

/* ---------- [2026-10-01] لقطةُ المالك من الآيفون: «تقطيش كثير… الصور فوراً بتطلع مع تقطيش» ----------
   السبب (قيسَ على محرّك سفاري): الصورةُ الكسولة يبدأ تحميلُها حين تقترب شاشةً واحدة، فعلى شبكة الهاتف تطلع البطاقةُ فارغةً ثم
   تقفز صورتُها وسط حركتها؛ وكلُّ الشاشات كانت تأخذ 1536×1536. العلاج: نسخٌ بحجم الشاشة (srcset)، وتحميلٌ وفكٌّ قبل الوصول
   بشاشتين ونصف، والعنصرُ ينتظر صورتَه فيطلعان معاً (fx.js)؛ والعناصرُ الطافية تطلع كلٌّ حين تجهز؛ وحركاتُ البطل تقف وهو خارج
   الشاشة؛ ولا ضبابَ خلفيّاً حيّاً (backdrop-filter) على شاشات اللمس: يُعاد حسابُه مع كل إطار تمرير، وخلفيةٌ أعتم تعوّضه. */
.rf-gate [data-rf] img {
  transition: opacity 0.9s ease-out;
}
.rf-gate [data-rf] img:not(.is-ready) {
  opacity: 0;
}
/* [المالك 2026-10-26] لونٌ خافت مكانَ صورة البطاقة ريثما تجهز (البطاقةُ لم تعد تنتظرها طويلاً — fx.js)، يتلاشى والصورةُ تطلع فوقه */
.rf-card__img::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(62% 56% at 50% 42%, rgba(236, 213, 145, 0.16), rgba(236, 213, 145, 0.05) 55%, rgba(236, 213, 145, 0) 76%);
  opacity: 0;
  transition: opacity 0.9s ease-out;
  pointer-events: none;
}
.rf-gate .rf-card[data-rf]:not(.is-loaded) .rf-card__img::before {
  opacity: 1;
}
.js .rf-fl {
  opacity: 0;
  transition: opacity 0.9s ease-out;
}
.js .rf-fl.is-ready {
  opacity: 0.92;
}
@media (prefers-reduced-motion: reduce) {
  .js .rf-fl {
    transition: none;
  }
}
.rf-hero.is-off .rf-fl,
.rf-hero.is-off .rf-hero__beam {
  animation-play-state: paused;
}
/* ضبابٌ بقطر بكسلين خلف شارةٍ تتحرك، وآخرُ خلف شريطٍ شبهِ معتم: لا يُرى ويُحسب كلَّ إطار */
.rf-label,
.consent {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
@media (hover: none) and (pointer: coarse) {
  .rf-page .header.is-stuck .rf-header__bar {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(8, 10, 12, 0.93);
  }
  .rf-glass,
  .rf-cmp__col.is-top::before,
  .rf-hbtn--ghost,
  .rf-page .nav .navmore__menu,
  .rf-page .header .mobilenav {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .rf-platform__card {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background-color: rgba(6, 8, 9, 0.55);
  }
}

/* ---------- [فحص 2026-10-13] عيوبُ التجاوب التي قيست على الموقع الحيّ ---------- */
/* جدولُ الحسابات بين 901 و1279px: العمودُ (98 إلى 167px) أضيقُ من زرّه، والزرُّ الذهبي يقصّ ما يخرج عنه، فظهر «uvrir un compt».
   حشوُ القسم والجدول ينزل في هذا المدى فيتّسع العمود، والزرُّ أنحف؛ وإن ضاق عمودٌ بعد ذلك انكسر نصُّ الزرّ على سطرين ولا يُقصّ */
.rf-cmp__row--cta .rf-hbtn {
  height: auto;
  min-height: 42px;
  padding-block: 6px;
  white-space: normal;
  text-align: center;
  line-height: 1.2;
}
@media (min-width: 901px) and (max-width: 1279px) {
  .rf-cmp__row--cta {
    padding-inline: 6px;
  }
  .rf-cmp__row--cta .rf-hbtn {
    padding-inline: 12px;
    font-size: 13.5px;
  }
}
@media (min-width: 901px) and (max-width: 1100px) {
  .rf-adv {
    padding-inline: 40px;
  }
  .rf-cmp {
    max-width: 860px;
    padding-inline: 0;
  }
}
/* الهاتف: عنوانٌ بكلمةٍ أطول من الشاشة («Kontraktspezifikationen» بخطّ 38px) كان يُخرج الصفحة عن عرضها 44px. الكلمةُ التي لا يتّسع
   لها السطرُ تنكسر في كل اللغات؛ وفي الألمانية والروسية (كلماتٌ مركّبة طويلة) تُقطَّع بشرطةٍ عند مقاطعها، والكلماتُ القصيرة لا تُمسّ */
@media (max-width: 640px) {
  .rf-title,
  .h2 {
    overflow-wrap: anywhere;
  }
  html[lang='de'] .rf-title,
  html[lang='de'] .h2,
  html[lang='ru'] .rf-title,
  html[lang='ru'] .h2 {
    -webkit-hyphens: auto;
    hyphens: auto;
    -webkit-hyphenate-limit-before: 6;
    -webkit-hyphenate-limit-after: 6;
    hyphenate-limit-chars: 14 6 6;
  }
  /* زرٌّ بنصٍّ طويل («Подробнее о пополнении и выводе») كان يخرج عن بطاقته: يبقى داخلها وينكسر نصُّه على سطرين */
  .rf-page main .rf-hbtn--ghost {
    max-width: 100%;
    height: auto;
    min-height: 48px;
    padding-block: 10px;
    white-space: normal;
    text-align: center;
    line-height: 1.25;
  }
  /* والأزرارُ القديمة (‎.btn‎) كذلك: «Открыть платформу и установить» في صفحة التطبيق كان أعرضَ من شاشة 320px */
  .rf-page main .btn {
    max-width: 100%;
    white-space: normal;
    text-align: center;
    line-height: 1.3;
  }
}
/* شريطُ الموافقة كان يغطّي زرَّ «تسجيل الدخول» في آخر قائمة الجوال عند أول زيارة: يختفي ما دامت القائمةُ مفتوحة ويعود حين تُغلق
   (الوسمُ على «مرفوض» افتراضاً، فلا شيءَ يُفعَّل في الأثناء) */
html.menu-open .consent {
  visibility: hidden;
  pointer-events: none;
}
/* رابطُ «إعدادات ملفات تعريف الارتباط» في سطر الحقوق: نصٌّ صغير بلون السطر، لا زرٌّ ظاهر */
.rf-foot__consent {
  margin: 0;
  margin-inline-start: 14px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.rf-foot__consent:hover {
  color: #ecd591;
}
.rf-foot__consent[hidden] {
  display: none;
}
/* شرائحُ الوثائق في الرئيسية بين 481 و640px: عمودان بخطٍّ مكبَّر (وحدةُ الهاتف) لا يتّسعان لـ«Политика конфиденциальности»، فخرجت
   الصفحةُ الروسية عن عرضها. عمودٌ واحد حتى 640، والنصُّ ينكسر داخل شريحته إن ضاقت */
@media (max-width: 640px) {
  .rf-docs {
    grid-template-columns: minmax(0, 1fr);
  }
}
.rf-doc > span:not(.rf-doc__ico) {
  min-width: 0;
  overflow-wrap: anywhere;
}
/* بطاقةُ «تمّ» في صفحة التطبيق: عمودُ النص لا يتّسع لأطول كلمةٍ فيه */
.adone__body {
  min-width: 0;
}
/* viewport-fit=cover بلا هوامش آمنة: في الوضع الأفقي على آيفون بنتوء كان المحتوى يدخل تحته، وشريطُ الموافقة تحت مؤشّر الشاشة.
   القيمُ صفرٌ حيث لا نتوء، فلا يتغيّر شيءٌ على بقية الأجهزة */
@supports (padding: max(0px)) {
  body {
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
  }
  .consent {
    bottom: max(16px, env(safe-area-inset-bottom, 0px));
    inset-inline: max(16px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  }
  .footer.rf-foot {
    padding-bottom: max(calc(40 * var(--u)), env(safe-area-inset-bottom, 0px));
  }
  @media (max-width: 900px) {
    .footer.rf-foot {
      padding-bottom: max(34px, env(safe-area-inset-bottom, 0px));
    }
  }
}