/* ============================================================
   IKLIL MARKETS — الموقع العام. التصميمُ من حزمة المرجع التي سلّمها المالك 2026-11-09 (IKLIL-Developer-Reference-Pack):
   أسودٌ فحميّ وذهبٌ شامبانيا، عمارةٌ معدنية وزجاجية في الخلفيات، خطُّ Cairo، وصورةُ المنصّة الحقيقية.
   كلُّ المحتوى مرئيٌّ بلا JavaScript؛ الحركةُ طبقةٌ فوقه لا شرطٌ لظهوره.
   أجزاءُ الصفحات في assets/css/*.css تُلحق بهذا الملف عند البناء (lib/build.mjs) — الأساسُ المشترك هنا وحده.
   ============================================================ */

/* ---------- الخطوط ----------
   [المالك 2026-11-09، حزمةُ المرجع: «الخطُّ المقترح Cairo، وIBM Plex Sans Arabic بديلاً»] Cairo متغيّرُ الوزن (400–900) مستضافٌ هنا
   (cairo-v31، رخصة OFL معه) بثلاثة مجالات: العربية، اللاتينية، واللاتينية الممتدّة للتركية. السيريليةُ ليست في Cairo فتأتي من
   IBM Plex Sans (الملفّات القائمة) تحت الاسم نفسه كي يكمل الخطُّ الروسيةَ بلا قفزة. */
@font-face{font-family:'Cairo';font-style:normal;font-weight:400 900;font-display:swap;src:url(/assets/fonts/cairo-v31/cairo-arabic.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-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:'Cairo';font-style:normal;font-weight:400 900;font-display:swap;src:url(/assets/fonts/cairo-v31/cairo-latin-ext.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-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Cairo';font-style:normal;font-weight:400 900;font-display:swap;src:url(/assets/fonts/cairo-v31/cairo-latin.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}
/* السيريلية (الروسية) من IBM Plex Sans باسم عائلةٍ ثانية تلي Cairo في المكدّس: كروم يُسقط وجوهَ المدى الوزني (400 900) حين تختلط في
   العائلة نفسها بوجوهٍ بوزنٍ واحد، فكانت العربيةُ تُرسم بخطّ النظام (قيسَ 2026-11-09) */
@font-face{font-family:'Cairo Cyr';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:'Cairo Cyr';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:'Cairo Cyr';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:'Cairo Cyr';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:'Cairo Cyr';font-style:normal;font-weight:700 900;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:'Cairo Cyr';font-style:normal;font-weight:700 900;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: 'Cairo Fallback';
  src: local('Arial'), local('Helvetica Neue'), local('Helvetica');
  size-adjust: 104%;
  ascent-override: 108%;
  descent-override: 46%;
  line-gap-override: 0%;
}

/* ---------- المقادير (08-guidelines/design-tokens.json) ---------- */
/* [المالك 2026-11-10 «الخلفية أسود… كامل حتى اللي فوق، كلشي»] خلفيةُ كل الصفحات أسودُ صافٍ (كانت #080a0b)؛ البطاقاتُ والألواح
   تبقى بدرجتها (--surface) فتظهر فوقه */
:root {
  --bg: #000;
  --surface: #111416;
  --surface-2: #1b1e20;
  --gold: #c9a227;
  --gold-2: #e2c25f;
  --gold-deep: #8d6e14;
  --champagne: #c6a06a;
  --ivory: #f5f1e8;
  --ink: var(--ivory);
  --muted: #a7a7a3;
  --dim: #7c7b76;
  --divider: #34322b;
  --line: rgba(245, 241, 232, 0.1);
  --line-soft: rgba(245, 241, 232, 0.06);
  --gline: rgba(201, 162, 39, 0.28);
  --gline-soft: rgba(201, 162, 39, 0.14);
  --buy: #008b6a;
  --sell: #c8103b;
  --up: #1fb27f;
  --down: #e5334f;
  --on-gold: #1a1407;
  --glass: linear-gradient(160deg, rgba(27, 30, 32, 0.92), rgba(17, 20, 22, 0.86));
  --glass-edge: inset 0 1px 0 rgba(245, 241, 232, 0.08), 0 24px 60px rgba(0, 0, 0, 0.45);
  --btn-gold: linear-gradient(180deg, #f1d98a 0%, #d8b650 38%, #b8912a 100%);
  --btn-gold-hover: linear-gradient(180deg, #f8e4a0 0%, #e2c25f 38%, #c49b31 100%);
  --maxw: 1440px;
  --pad: 64px;
  --radius: 16px;
  --radius-btn: 10px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --fast: 180ms;
  --slow: 550ms;
  /* [المالك 2026-11-10 «اعمل هي الي فوق أدقّ بشوي»] الترويسةُ 60 على الحاسوب و56 على الهاتف (كانت 72 و64)، وحبّاتُها 38 */
  --header-h: 60px;
  --font: 'Cairo', 'Cairo Cyr', 'Cairo Fallback', 'IBM Plex Sans Arabic', 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);
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
/* [فحص 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: 18px;
  line-height: 1.8;
  overflow-x: hidden;
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img,
svg,
video,
canvas {
  max-width: 100%;
  display: block;
}
a {
  color: inherit;
  text-decoration: none;
}
table {
  border-collapse: collapse;
  width: 100%;
}
h1,
h2,
h3,
h4 {
  margin: 0;
  line-height: 1.25;
  font-weight: 800;
  color: var(--ivory);
  text-wrap: balance;
}
p {
  margin: 0;
}
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
dl,
dd {
  margin: 0;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
::selection {
  background: rgba(201, 162, 39, 0.85);
  color: var(--on-gold);
}
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 4px;
}
[id] {
  scroll-margin-top: calc(var(--header-h) + 24px);
}
.num,
.sym {
  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: 16px;
  top: -60px;
  z-index: 200;
  padding: 10px 16px;
  border-radius: var(--radius-btn);
  background: var(--gold);
  color: var(--on-gold);
  font-weight: 700;
}
.skip:focus {
  top: 12px;
}

/* ---------- الحاويات ---------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-left: max(var(--pad), env(safe-area-inset-left, 0px));
  padding-right: max(var(--pad), env(safe-area-inset-right, 0px));
}
.wrap.narrow {
  max-width: 980px;
}
.wrap.tight {
  max-width: 1180px;
}
.section {
  padding-block: 72px;
  position: relative;
}
.section--tight {
  padding-block: 56px;
}
.section--first {
  padding-top: 56px;
}
.section--doc {
  padding-block: 40px 72px;
}
.section--flush {
  padding-block: 0;
}
@media (max-width: 1023px) {
  :root {
    --pad: 32px;
  }
}
@media (max-width: 767px) {
  :root {
    --pad: 20px;
    --header-h: 56px;
  }
  body {
    font-size: 16px;
  }
  .section {
    padding-block: 52px;
  }
  .section--tight {
    padding-block: 40px;
  }
  .section--first {
    padding-top: 40px;
  }
}

/* ---------- الطباعة: العناوين بأحجام الحزمة (72/48/32 على الحاسوب، 40/30/24 على الهاتف) ---------- */
.h1,
.ik-hero__h1 {
  font-size: clamp(38px, 2.2vw + 24px, 64px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  font-weight: 800;
}
.h2,
.ik-h2 {
  font-size: clamp(28px, 1.1vw + 20px, 44px);
  line-height: 1.2;
  font-weight: 800;
}
.h3,
.ik-h3 {
  font-size: clamp(20px, 0.5vw + 16px, 26px);
  line-height: 1.3;
  font-weight: 700;
}
.lead,
.ik-lead {
  color: var(--muted);
  font-size: clamp(17px, 0.3vw + 15px, 20px);
  line-height: 1.75;
  max-width: 62ch;
}
.ik-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--gold-2);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.ik-eyebrow::before {
  content: '';
  width: 26px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.ik-gold {
  color: var(--gold-2);
}
.ik-muted {
  color: var(--muted);
}
/* العناوينُ تنكسر كلماتُها الطويلة على الهاتف وحده (حارسٌ في layout-guards.test) */
@media (max-width: 640px) {
  .rf-title, .h2 {
    overflow-wrap: anywhere;
  }
  html[lang='de'] .h2,
  html[lang='ru'] .h2,
  html[lang='de'] .ik-h2,
  html[lang='ru'] .ik-h2 {
    hyphens: auto;
  }
}

/* ---------- أزرار: ذهبيٌّ معدني بوهجٍ داخلي، زجاجيٌّ بإطار ذهبي رفيع، وحبّات ---------- */
.btn,
.rf-btn,
.rf-hbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 26px;
  border-radius: var(--radius-btn);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease), background var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.btn--gold,
.rf-btn,
.rf-hbtn--gold {
  background: var(--btn-gold);
  color: var(--on-gold);
  border-color: rgba(255, 236, 170, 0.55);
  box-shadow: 0 10px 30px rgba(201, 162, 39, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -8px 18px rgba(120, 85, 10, 0.25);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
}
.btn--gold:hover,
.rf-btn:hover,
.rf-hbtn--gold:hover {
  background: var(--btn-gold-hover);
  box-shadow: 0 14px 40px rgba(201, 162, 39, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -8px 18px rgba(120, 85, 10, 0.22);
  transform: translateY(-1px);
}
.btn--gold:active,
.rf-btn:active,
.rf-hbtn--gold:active {
  transform: translateY(0);
  box-shadow: 0 6px 18px rgba(201, 162, 39, 0.2), inset 0 2px 6px rgba(80, 55, 5, 0.3);
}
.btn--ghost,
.rf-hbtn--ghost {
  background: rgba(17, 20, 22, 0.55);
  color: var(--ivory);
  border-color: rgba(201, 162, 39, 0.55);
  box-shadow: inset 0 1px 0 rgba(245, 241, 232, 0.06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.btn--ghost:hover,
.rf-hbtn--ghost:hover {
  border-color: var(--gold-2);
  background: rgba(201, 162, 39, 0.1);
  transform: translateY(-1px);
}
.btn--light {
  background: rgba(245, 241, 232, 0.06);
  color: var(--ivory);
  border-color: var(--line);
}
.btn--light:hover {
  background: rgba(245, 241, 232, 0.1);
  border-color: var(--gold);
}
.btn--sm {
  min-height: 40px;
  padding: 0 18px;
  font-size: 14px;
}
.btn--lg {
  min-height: 56px;
  padding: 0 34px;
  font-size: 17px;
}
.btn--block {
  width: 100%;
}
.btn svg,
.rf-btn svg,
.rf-hbtn svg {
  flex: none;
}
html[dir='rtl'] .flip {
  transform: scaleX(-1);
}
/* حبّة: نصٌّ قصير في إطارٍ ذهبي رفيع (شارات الأسواق، الرموز) */
.ik-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--gline);
  background: rgba(201, 162, 39, 0.06);
  color: var(--ivory);
  font-size: 14px;
  font-weight: 700;
}
.ik-chip--gold {
  background: var(--btn-gold);
  color: var(--on-gold);
  border-color: rgba(255, 236, 170, 0.6);
}
.ik-chip--ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--muted);
}
/* الرمزُ في شارةٍ معدنية (EURUSD) */
.ik-sym {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--gline);
  background: linear-gradient(180deg, rgba(201, 162, 39, 0.14), rgba(201, 162, 39, 0.04));
  color: var(--ivory);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.02em;
}

/* ---------- الألواح الزجاجية ---------- */
.ik-glass {
  position: relative;
  border-radius: var(--radius);
  background: var(--glass);
  border: 1px solid var(--line);
  box-shadow: var(--glass-edge);
}
.ik-glass--gold {
  border-color: var(--gline);
  box-shadow: var(--glass-edge), 0 0 0 1px rgba(201, 162, 39, 0.05);
}
/* خطٌّ ذهبي مضيء أسفل اللوح (كما في بطاقات المرجع) */
.ik-glass--lit::after {
  content: '';
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(226, 194, 95, 0.9), transparent);
  filter: drop-shadow(0 0 8px rgba(226, 194, 95, 0.6));
  pointer-events: none;
}
.ik-pad {
  padding: 28px;
}
.ik-pad-lg {
  padding: 40px;
}
@media (max-width: 767px) {
  .ik-pad,
  .ik-pad-lg {
    padding: 22px;
  }
}
/* فاصلٌ ذهبي رفيع */
.ik-rule {
  height: 1px;
  border: 0;
  margin: 0;
  background: linear-gradient(90deg, transparent, var(--gline), transparent);
}

/* ---------- الترويسة: شريطٌ شفّاف فوق المشهد، يصير زجاجياً حين يبدأ التمرير ----------
   [المرجع] الشعارُ في البداية، وفي النهاية: اللغة، «القائمة»، «حسابي»، وزرٌّ ذهبي للتسجيل على الحاسوب (قائمةُ الهاتف تحمله) */
.header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  transition: background var(--fast) linear, border-color var(--fast) linear, box-shadow var(--fast) linear;
  border-bottom: 1px solid transparent;
}
.header.is-stuck {
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--line-soft);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
/* [المالك 2026-11-10] شريطُ الأسعار تحت ترويسة الرئيسية (الترويسةُ sticky في التدفّق): يمرّ تحتها عند التمرير */
.is-home .ticker {
  z-index: 99;
}
.ik-bar {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.logo {
  display: inline-flex;
  align-items: center;
  height: 100%;
}
.logo img {
  height: 36px;
  width: auto;
}
.ik-bar__side {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ik-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--gline);
  background: rgba(17, 20, 22, 0.55);
  color: var(--ivory);
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: border-color var(--fast), background var(--fast);
  cursor: pointer;
}
.ik-pill:hover {
  border-color: var(--gold-2);
  background: rgba(201, 162, 39, 0.1);
}
.ik-pill svg {
  color: var(--gold-2);
}
.ik-pill--gold {
  background: var(--btn-gold);
  color: var(--on-gold);
  border-color: rgba(255, 236, 170, 0.55);
  box-shadow: 0 8px 24px rgba(201, 162, 39, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.ik-pill--gold:hover {
  background: var(--btn-gold-hover);
}
.ik-pill--gold svg {
  color: var(--on-gold);
}
/* [المالك 2026-11-10 «من فوق ملخبط»] زرُّ التسجيل الذهبي في الشريط على كل عرض؛ على الهاتف تختفي حبّةُ اللغة (في القائمة)
   وتصغر الحبّاتُ وتصير حبّةُ الدخول أيقونةً وزرُّ القائمة أيقونةً، فيبقى الصفُّ: الشعار، الذهبي، الدخول، القائمة */
.rf-hide-sm {
  display: inline-flex;
}
@media (max-width: 767px) {
  .logo img {
    height: 32px;
  }
  .ik-bar__side {
    gap: 8px;
  }
  .ik-bar .lang {
    display: none;
  }
  .ik-pill {
    min-height: 38px;
    padding: 0 12px;
    font-size: 14px;
  }
  .ik-pill--account {
    width: 38px;
    padding: 0;
    justify-content: center;
  }
  .ik-pill--account span,
  .burger__label {
    display: none;
  }
  .burger > summary {
    width: 38px;
    padding: 0;
    justify-content: center;
    border-color: var(--gline);
    background: rgba(17, 20, 22, 0.55);
  }
}

/* والقائمةُ مفتوحة: الشريطُ يصير معتماً فوقها */
html.menu-open .header {
  background: #000;
  border-bottom-color: var(--line-soft);
}

/* قوائمُ <details>: تعمل بلا JavaScript، والسكربتُ يضيف إغلاقَ الواحدة بفتح الأخرى والهروبَ بـEscape */
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;
  min-height: 38px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  color: var(--ivory);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.lang > summary:hover,
.lang[open] > summary {
  border-color: var(--gline);
  background: rgba(17, 20, 22, 0.55);
}
.lang > summary svg {
  color: var(--gold-2);
}
.lang__menu {
  position: absolute;
  top: calc(100% + 10px);
  inset-inline-end: 0;
  min-width: 180px;
  padding: 8px;
  border-radius: 14px;
  background: var(--glass);
  border: 1px solid var(--line);
  box-shadow: var(--glass-edge);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 120;
}
.lang__menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 15px;
  color: var(--ivory);
}
.lang__menu a:hover {
  background: rgba(201, 162, 39, 0.1);
}
.lang__menu a[aria-current='true'] {
  color: var(--gold-2);
  font-weight: 700;
}

/* ---------- القائمة الكاملة: لوحٌ ينزلق من الجانب على الحاسوب ويغطّي الشاشة على الهاتف (02-navigation-mobile) ---------- */
.burger {
  position: static;
}
.burger > summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid transparent;
  color: var(--ivory);
  font-size: 15px;
  font-weight: 700;
}
.burger > summary:hover {
  border-color: var(--gline);
  background: rgba(17, 20, 22, 0.55);
}
.burger > summary svg {
  color: var(--gold-2);
}
.burger__close {
  display: none;
}
.burger[open] .burger__open {
  display: none;
}
.burger[open] .burger__close {
  display: block;
}
.ik-menu__scrim {
  position: fixed;
  inset: 0;
  z-index: 110;
  background: rgba(3, 4, 5, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.mobilenav {
  position: fixed;
  top: 0;
  bottom: 0;
  inset-inline-end: 0;
  z-index: 115;
  width: min(440px, 100vw);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px max(22px, env(safe-area-inset-right, 0px)) max(22px, env(safe-area-inset-bottom, 0px)) max(22px, env(safe-area-inset-left, 0px));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #000;
  border-inline-start: 1px solid var(--line);
  box-shadow: -30px 0 80px rgba(0, 0, 0, 0.6);
  /* [فحص 2026-10-13] تبدأ تحت الشريط حيثما وقف (site.js يقيس --menu-top) وتنتهي داخل الشاشة */
  top: var(--menu-top, 100px);
  max-height: calc(100dvh - var(--menu-top, 100px));
  animation: menu-in var(--slow) var(--ease) both;
}
@keyframes menu-in {
  from {
    transform: translateX(var(--menu-dx, 30px));
    opacity: 0;
  }
}
html[dir='ltr'] .mobilenav {
  --menu-dx: 30px;
}
html[dir='rtl'] .mobilenav {
  --menu-dx: -30px;
}
.ik-menu__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--gline);
  margin-bottom: 6px;
}
.ik-menu__head img {
  height: 36px;
  width: auto;
}
.ik-menu__title {
  font-size: 26px;
  font-weight: 800;
  color: var(--ivory);
}
.ik-menu__x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(245, 241, 232, 0.04);
  color: var(--ivory);
  cursor: pointer;
}
.ik-menu__group {
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(17, 20, 22, 0.7);
}
.ik-menu__group[open] {
  border-color: var(--gline);
  background: linear-gradient(160deg, rgba(27, 30, 32, 0.95), rgba(17, 20, 22, 0.9));
}
.ik-menu__group > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  padding: 0 18px;
  font-size: 18px;
  font-weight: 800;
  color: var(--ivory);
}
.ik-menu__group > summary svg {
  color: var(--gold-2);
  transition: transform var(--fast);
}
.ik-menu__group[open] > summary svg {
  transform: rotate(180deg);
}
.ik-menu__group ul {
  padding: 0 18px 10px;
}
.ik-menu__group li + li {
  border-top: 1px solid var(--line-soft);
}
.ik-menu__group li a {
  display: block;
  padding: 11px 0;
  font-size: 16px;
  color: var(--ivory);
}
.ik-menu__group li a[aria-current='page'] {
  color: var(--gold-2);
}
.ik-menu__group li a:hover {
  color: var(--gold-2);
}
.ik-menu__cta {
  display: grid;
  gap: 10px;
  padding-top: 14px;
  margin-top: 6px;
  border-top: 1px solid var(--gline);
}
.ik-menu__cta .btn {
  min-height: 52px;
}
.ik-menu__langs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 6px;
}
.ik-menu__langs a {
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 14px;
  color: var(--muted);
}
.ik-menu__langs a[aria-current='true'] {
  color: var(--on-gold);
  background: var(--gold);
  border-color: var(--gold);
  font-weight: 700;
}
.ik-menu__risk {
  margin-top: auto;
  padding-top: 14px;
  color: var(--dim);
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
}
@media (max-width: 767px) {
  .mobilenav {
    width: 100vw;
    border-inline-start: 0;
  }
}
/* [فحص 2026-10-13] شريطُ الموافقة لا يغطّي آخرَ القائمة */
html.menu-open .consent {
  visibility: hidden;
}

/* ---------- مسارُ التنقل: فوق المشهد تحت الشريط (104px من أعلى الصفحة)، وفي صفحات الوثائق داخل التدفّق ---------- */
.rf-page .crumbs {
  position: absolute;
  top: 104px;
  inset-inline: 0;
  z-index: 5;
  font-size: 14px;
  color: var(--muted);
}
.rf-page.is-doc .crumbs {
  position: static;
  padding-top: 104px;
}
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}
.crumbs li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.crumbs li + li::before {
  content: '›';
  color: var(--gold-2);
  font-size: 15px;
  transform: var(--crumb-flip, none);
}
html[dir='rtl'] .crumbs li + li::before {
  --crumb-flip: scaleX(-1);
}
.crumbs a {
  color: var(--muted);
  border-bottom: 1px solid transparent;
  transition: color var(--fast), border-color var(--fast);
}
.crumbs a:hover {
  color: var(--ivory);
  border-bottom-color: var(--gline);
}
.crumbs li[aria-current='page'] {
  color: var(--gold-2);
  font-weight: 700;
}
@media (max-width: 767px) {
  .rf-page .crumbs {
    top: 84px;
    font-size: 13px;
  }
  .rf-page.is-doc .crumbs {
    padding-top: 84px;
  }
}

/* ---------- شريطُ الأسعار (الرئيسية): شريطٌ رفيع داكن فوق الترويسة، يتحرّك من أول رسم ---------- */
/* [المالك 2026-11-10 «الشريط عم يخلص»] الصندوقُ ltr: في صفحات RTL كان المسارُ (أعرضُ من الشاشة) يُحاذى يميناً فيخرج كلُّه
   يساراً ويبقى الشريطُ فارغاً نحو نصف الدورة؛ بـltr يبدأ من الحافة اليسرى في كل اللغات فتبقى نسختُه الثانية تملأ الشاشة */
.ticker {
  position: relative;
  z-index: 101;
  direction: ltr;
  height: 36px;
  overflow: hidden;
  background: #000;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13px;
  -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;
  height: 100%;
  animation: tick 70s linear infinite;
  direction: ltr;
}
.ticker:hover .ticker__track {
  animation-play-state: paused;
}
.ticker__set {
  display: flex;
  align-items: center;
  height: 100%;
}
.tick {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 22px;
  height: 100%;
  border-inline-end: 1px solid var(--line-soft);
  color: var(--muted);
  white-space: nowrap;
}
.tick b {
  color: var(--ivory);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.tick__p {
  color: var(--ivory);
  min-width: 5ch;
}
.tick__c {
  min-width: 4.5ch;
}
.tick__c.up {
  color: var(--up);
}
.tick__c.dn {
  color: var(--down);
}
.tick.is-closed .tick__p {
  color: var(--dim);
}
.tick__c.is-closed {
  color: var(--dim);
  font-size: 12px;
}
.is-up {
  animation: flash-up 0.9s ease-out;
}
.is-dn {
  animation: flash-dn 0.9s ease-out;
}
@keyframes flash-up {
  0% {
    color: var(--up);
  }
}
@keyframes flash-dn {
  0% {
    color: var(--down);
  }
}
@keyframes tick {
  to {
    transform: translateX(-50%);
  }
}
/* الرئيسية: الشريطُ يأتي بعد شريط الأسعار في التدفّق (sticky) فيلتصق بأعلى الشاشة بعد تمرير الشريط */
.is-home .header {
  top: 0;
}
@media (prefers-reduced-motion: reduce) {
  .ticker__track {
    animation-duration: 240s;
  }
}

/* ---------- التذييل: الشعارُ وأربعةُ أعمدةٍ بفواصلَ رفيعة، فخطٌّ ذهبي، فسطرُ المخاطر ---------- */
.footer {
  position: relative;
  padding: 64px 0 max(28px, env(safe-area-inset-bottom, 0px));
  background: #000;
  border-top: 1px solid var(--line-soft);
  color: var(--muted);
  font-size: 15px;
}
.footer::before {
  content: '';
  position: absolute;
  inset-inline: 10%;
  top: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gline), transparent);
}
.rf-foot__top {
  display: grid;
  grid-template-columns: minmax(220px, 1.1fr) minmax(0, 3fr);
  gap: 48px;
  align-items: start;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-left: max(var(--pad), env(safe-area-inset-left, 0px));
  padding-right: max(var(--pad), env(safe-area-inset-right, 0px));
}
.rf-foot__info .logo img {
  height: 44px;
}
.rf-foot__text {
  margin-top: 16px;
  max-width: 34ch;
  color: var(--muted);
  line-height: 1.75;
}
.footer__social {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}
.footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--ivory);
  transition: border-color var(--fast), color var(--fast), background var(--fast);
}
.footer__social a:hover {
  border-color: var(--gold);
  color: var(--gold-2);
  background: rgba(201, 162, 39, 0.08);
}
.rf-foot__cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}
.rf-foot__col {
  padding-inline: 28px;
  border-inline-start: 1px solid var(--line-soft);
}
.rf-foot__col:first-child {
  padding-inline-start: 0;
  border-inline-start: 0;
}
.rf-foot__h {
  font-size: 17px;
  font-weight: 800;
  color: var(--ivory);
  margin-bottom: 14px;
  list-style: none;
  cursor: default;
  pointer-events: none;
}
.rf-foot__h::-webkit-details-marker {
  display: none;
}
.rf-foot__col li + li {
  margin-top: 8px;
}
.rf-foot__col a {
  color: var(--muted);
  transition: color var(--fast);
}
.rf-foot__col a:hover {
  color: var(--gold-2);
}
.rf-foot__sep {
  width: 100%;
  max-width: var(--maxw);
  margin: 48px auto 26px;
  padding-inline: var(--pad);
}
.rf-foot__sep i {
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gline), transparent);
}
.rf-foot__risk,
.rf-foot__copy {
  width: 100%;
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: var(--pad);
  text-align: center;
  font-size: 14px;
  line-height: 1.7;
  color: var(--dim);
}
.rf-foot__risk strong {
  color: var(--muted);
}
.rf-foot__restricted {
  margin-top: 10px;
}
.rf-foot__copy {
  margin-top: 18px;
  color: var(--muted);
}
.rf-foot__consent {
  margin-inline-start: 10px;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
}
.rf-foot__consent:hover {
  color: var(--gold-2);
  border-color: var(--gold);
}
@media (max-width: 1023px) {
  .rf-foot__top {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .rf-foot__cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 24px;
  }
  .rf-foot__col {
    padding-inline: 0;
    border-inline-start: 0;
  }
}
/* الهاتف: الأعمدةُ قوائمُ تنطوي (ملاحظاتُ التركيب: «أقسامُ التذييل قوائمُ قابلة للطي») */
@media (max-width: 767px) {
  .footer {
    padding-top: 44px;
    text-align: center;
  }
  .rf-foot__info .logo {
    justify-content: center;
  }
  .rf-foot__text {
    margin-inline: auto;
  }
  .footer__social {
    justify-content: center;
  }
  .rf-foot__cols {
    grid-template-columns: 1fr;
    gap: 10px;
    text-align: start;
  }
  .rf-foot__col {
    border-radius: 14px;
    border: 1px solid var(--line);
    background: rgba(17, 20, 22, 0.7);
  }
  .rf-foot__col .rf-foot__h {
    margin: 0;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
    cursor: pointer;
    pointer-events: auto;
  }
  .rf-foot__col .rf-foot__h::after {
    content: '+';
    color: var(--gold-2);
    font-weight: 400;
    font-size: 20px;
  }
  .rf-foot__col[open] .rf-foot__h::after {
    content: '−';
  }
  .rf-foot__col ul {
    padding: 0 18px 14px;
  }
  .rf-foot__sep {
    margin: 30px auto 18px;
  }
}

/* ============================================================
   المكوّنات المشتركة
   ============================================================ */

/* ---------- المشهد: صورةُ خلفيةٍ من الحزمة (03-backgrounds) تغطّي القسم، والمجسّمُ على جانب الصورة ---------- */
.ik-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.ik-stage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus, left center);
  transform: scale(1.03);
  transition: opacity var(--slow) linear;
}
/* التدرّجاتُ تحمي النصّ: من جهة البداية (النصّ) إلى الشفافية، ومن الأسفل نحو لون الصفحة فيذوب المشهدُ في ما بعده */
.ik-stage::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to left, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.55) 38%, rgba(0, 0, 0, 0.05) 70%);
}
.ik-stage::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 42%;
  background: linear-gradient(to top, var(--bg) 0%, rgba(0, 0, 0, 0.6) 45%, transparent 100%);
}
.ik-stage--plain::before {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.6));
}
/* ظلٌّ علوي في البطل: الشعارُ وحبّاتُ الشريط ومسارُ التنقل مقروءةٌ فوق أيّ جزءٍ مضيء من المشهد */
.ik-hero .ik-stage::after {
  background: linear-gradient(to top, var(--bg) 0%, rgba(0, 0, 0, 0.6) 45%, transparent 100%), linear-gradient(180deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.3) 120px, transparent 220px);
  height: 100%;
}
/* في الإنجليزية وأخواتها يبقى المجسّمُ على يسار الصورة (ملاحظاتُ التركيب: لا تُعكس صورةٌ فيها GOLD أو FX أو CRYPTO) والنصُّ ينتقل إلى
   العمود الأيمن فوق الجزء المعتم — التخطيطُ هو ما يُقلب لا الصورة */
html[dir='ltr'] .ik-stage img {
  object-position: var(--focus-ltr, left center);
}
html[dir='ltr'] .ik-hero__grid {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}
html[dir='ltr'] .ik-hero__copy {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
}
html[dir='ltr'] .ik-hero__art {
  grid-column: 1;
  grid-row: 1;
}


/* ---------- بطلُ الصفحة الداخلية ---------- */
.phero,
.ik-hero {
  position: relative;
  padding-top: calc(var(--header-h) + 72px);
  padding-bottom: 56px;
  min-height: 520px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: 32px;
  isolation: isolate;
}
.ik-hero__grid,
.ik-hero__stats {
  width: 100%;
}
.is-home .ik-hero {
  padding-top: calc(var(--header-h) + 36px + 56px);
}
.ik-hero__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
  gap: 40px;
}
.ik-hero__copy {
  display: grid;
  gap: 18px;
  max-width: 640px;
}
.ik-hero__h1 {
  color: var(--ivory);
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.6);
}
.ik-hero__h1 .accent {
  color: var(--gold-2);
}
.ik-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
}
.ik-hero__note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 14px;
}
.ik-hero__note svg {
  color: var(--gold-2);
}
/* المجسّمُ على الجانب الآخر: صورةُ عنصرٍ شفّاف (04-cutouts) حين يُراد فوق المشهد، وإلا تُترك الخلفيةُ تحمل مجسّمَها */
.ik-hero__art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
}
.ik-hero__art img {
  width: min(100%, 520px);
  height: auto;
  filter: drop-shadow(0 40px 60px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 40px rgba(201, 162, 39, 0.18));
  animation: float 9s ease-in-out infinite;
}
.ik-hero__art::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 6%;
  width: 60%;
  height: 24px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(226, 194, 95, 0.55), transparent 70%);
  filter: blur(6px);
}
@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}
/* بطلٌ بلا مجسّم: النصُّ وحده فوق خلفيةٍ هادئة — ومع عنصرٍ شفّاف (ik-hero--art) يبقى عمودان */
.ik-hero--plain {
  min-height: 420px;
}
.ik-hero--plain:not(.ik-hero--art) .ik-hero__grid {
  grid-template-columns: minmax(0, 1fr);
}
.ik-hero--plain:not(.ik-hero--art) .ik-hero__copy {
  max-width: 760px;
}
html[dir='ltr'] .ik-hero--plain:not(.ik-hero--art) .ik-hero__copy {
  grid-column: 1;
  justify-self: start;
}
@media (max-width: 1023px) {
  .ik-hero__grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .ik-hero__art {
    order: 2;
    min-height: 0;
  }
  .ik-hero__art img {
    width: min(70%, 380px);
  }
  .ik-stage::before {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.35) 50%, rgba(0, 0, 0, 0.2) 100%);
  }
  .ik-stage img {
    object-position: var(--focus-m, center 70%);
  }
  html[dir='ltr'] .ik-stage img {
    object-position: var(--focus-m, center 70%);
  }
  html[dir='ltr'] .ik-hero__grid {
    grid-template-columns: 1fr;
  }
  html[dir='ltr'] .ik-hero__copy,
  html[dir='ltr'] .ik-hero__art {
    grid-column: 1;
    grid-row: auto;
    justify-self: stretch;
  }
}
@media (max-width: 767px) {
  .phero,
  .ik-hero {
    padding-top: calc(var(--header-h) + 56px);
    padding-bottom: 40px;
    min-height: 0;
  }
  .is-home .ik-hero {
    padding-top: calc(var(--header-h) + 36px + 40px);
  }
  .ik-hero__actions .btn,
  .ik-hero__actions .rf-btn,
  .ik-hero__actions .rf-hbtn {
    width: 100%;
  }
  .ik-hero__actions .rf-ring {
    width: 100%;
  }
}

/* ---------- صفُّ الأرقام: قيمةٌ ذهبية فوق تسميةٍ هادئة، بينها فواصلُ رفيعة (03-forex)؛ وبالصندوق (11-about) ---------- */
.ik-stats {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 0;
  position: relative;
  z-index: 2;
}
.ik-stat {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 4px;
  padding: 14px 10px;
  border-inline-start: 1px solid var(--line);
}
.ik-stat:first-child {
  border-inline-start: 0;
}
.ik-stat__v {
  font-size: clamp(26px, 1.2vw + 16px, 36px);
  font-weight: 800;
  color: var(--gold-2);
  line-height: 1.1;
}
.ik-stat__l {
  color: var(--muted);
  font-size: 14px;
}
.ik-stat__i {
  color: var(--gold-2);
  margin-bottom: 4px;
}
.ik-stats--box {
  border-radius: var(--radius);
  background: var(--glass);
  border: 1px solid var(--line);
  box-shadow: var(--glass-edge);
  padding: 10px 16px;
}
@media (max-width: 767px) {
  .ik-stats {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .ik-stat {
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(17, 20, 22, 0.75);
  }
  .ik-stats--box {
    padding: 10px;
    background: none;
    border: 0;
    box-shadow: none;
  }
}

/* ---------- رأسُ القسم: عنوانٌ عاجي، وخطٌّ ذهبي رفيع يمتدّ من جانبه (13-faq، 05-crypto) ---------- */
.shead,
.ik-head {
  display: grid;
  gap: 12px;
  margin-bottom: 34px;
  max-width: 820px;
}
.ik-head--center,
.shead.center {
  margin-inline: auto;
  text-align: center;
  justify-items: center;
}
.ik-head__row {
  display: flex;
  align-items: center;
  gap: 18px;
}
.ik-head__row::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--gline), transparent);
}
html[dir='ltr'] .ik-head__row::after {
  background: linear-gradient(90deg, var(--gline), transparent);
}
.ik-head--center .ik-head__row::before {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gline));
}
.ik-head--center .ik-head__row {
  width: 100%;
}
.ik-head__row .h2,
.ik-head__row .ik-h2 {
  flex: 0 1 auto;
  min-width: 0;
}
/* الخطُّ قويٌّ عند حافة العنوان ويتلاشى بعيداً عنه، في الاتجاهين */
html[dir='rtl'] .ik-head__row::after {
  background: linear-gradient(270deg, var(--gline), transparent);
}
html[dir='rtl'] .ik-head--center .ik-head__row::before {
  background: linear-gradient(270deg, transparent, var(--gline));
}

/* رموزُ الأدوات (coins.mjs): علمان متداخلان للزوج، أو رمزٌ واحد */
.paircoin {
  position: relative;
  display: inline-block;
  flex: none;
  direction: ltr;
}
.paircoin--one {
  position: static;
  display: inline-flex;
}
.coin {
  display: block;
}
.paircoin__q {
  position: absolute;
  bottom: 0;
  right: 0;
}
.paircoin__b {
  top: 0;
  left: 0;
  z-index: 1;
}

/* ---------- بطاقاتٌ زجاجية في شبكة: صورةُ عنصرٍ أو أيقونةٌ، عنوان، نصّ، رابط ---------- */
.ik-cards,
.rf-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.ik-cards--2,
.rf-cards--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ik-cards--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.ik-card,
.rf-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px;
  border-radius: var(--radius);
  background: var(--glass);
  border: 1px solid var(--line);
  box-shadow: var(--glass-edge);
  transition: transform var(--fast) var(--ease), border-color var(--fast), box-shadow var(--fast);
}
.ik-card::after,
.rf-card::after {
  content: '';
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(226, 194, 95, 0.75), transparent);
  opacity: 0.7;
  transition: opacity var(--fast);
  pointer-events: none;
}
a.ik-card:hover,
a.rf-card:hover,
.ik-card--hover:hover {
  transform: translateY(-4px);
  border-color: var(--gline);
  box-shadow: var(--glass-edge), 0 0 0 1px rgba(201, 162, 39, 0.08), 0 30px 70px rgba(0, 0, 0, 0.5);
}
a.ik-card:hover::after,
a.rf-card:hover::after {
  opacity: 1;
}
.ik-card__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  border: 1px solid var(--gline);
  background: linear-gradient(160deg, rgba(201, 162, 39, 0.16), rgba(201, 162, 39, 0.04));
  color: var(--gold-2);
  flex: none;
}
.ik-card__ico--round {
  border-radius: 999px;
}
.ik-card__img,
.rf-card__img {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  margin: -10px 0 4px;
}
.ik-card__img img,
.rf-card__img img {
  width: min(72%, 260px);
  height: auto;
  filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 26px rgba(201, 162, 39, 0.16));
}
.ik-card__title,
.rf-card__title {
  font-size: 22px;
  font-weight: 800;
  color: var(--ivory);
}
.ik-card__text,
.rf-card__text {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.75;
}
.ik-card__meta,
.rf-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  color: var(--muted);
  font-size: 14px;
}
.ik-card__meta b,
.rf-card__meta b {
  color: var(--gold-2);
}
.ik-card__go,
.rf-card__go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
  color: var(--gold-2);
  font-weight: 700;
  font-size: 15px;
}
.ik-card--center {
  align-items: center;
  text-align: center;
}
.ik-card--center .ik-card__go {
  justify-content: center;
}
@media (max-width: 1023px) {
  .ik-cards,
  .rf-cards,
  .ik-cards--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .ik-cards,
  .rf-cards,
  .ik-cards--2,
  .rf-cards--2,
  .ik-cards--4 {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .ik-card,
  .rf-card {
    padding: 22px;
  }
}

/* ---------- الميزةُ العريضة: نصٌّ على جانب وعنصرٌ مجسّم على الآخر داخل لوحٍ زجاجي ---------- */
.ik-feature,
.rf-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center;
  gap: 40px;
  padding: 40px;
  border-radius: 22px;
  background: var(--glass);
  border: 1px solid var(--line);
  box-shadow: var(--glass-edge);
  position: relative;
  overflow: hidden;
}
.ik-feature--flip,
.rf-feature--flip {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
}
.ik-feature--flip .ik-feature__img,
.rf-feature--flip .rf-feature__img {
  order: -1;
}
.ik-feature__img,
.rf-feature__img {
  display: flex;
  align-items: center;
  justify-content: center;
}
.ik-feature__img img,
.rf-feature__img img {
  width: min(100%, 420px);
  height: auto;
  filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 30px rgba(201, 162, 39, 0.16));
}
.ik-feature__body,
.rf-feature__body {
  display: grid;
  gap: 14px;
}
.ik-feature__cta,
.rf-feature__cta {
  margin-top: 6px;
}
@media (max-width: 900px) {
  .ik-feature,
  .rf-feature,
  .ik-feature--flip,
  .rf-feature--flip {
    grid-template-columns: 1fr;
    padding: 26px;
    gap: 22px;
  }
  .ik-feature__img,
  .rf-feature__img {
    order: -1;
  }
  .ik-feature__img img,
  .rf-feature__img img {
    width: min(70%, 320px);
  }
}

/* «المزيد»: تفاصيلُ مطويّة لا مخفيّة */
.rf-more > summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--gold-2);
  font-weight: 700;
}
.rf-more > summary::after {
  content: '+';
}
.rf-more[open] > summary::after {
  content: '−';
}
.rf-more__body {
  padding-top: 12px;
}
.rf-more__list li + li {
  margin-top: 8px;
}
.rf-more__list b {
  color: var(--ivory);
}

/* ---------- الجداول: رأسٌ ذهبي معدني، صفوفٌ على زجاجٍ داكن، وعلى الهاتف يصير كلُّ صفٍّ بطاقة ---------- */
.tablewrap {
  overflow-x: auto;
  border-radius: var(--radius);
  background: var(--glass);
  border: 1px solid var(--line);
  box-shadow: var(--glass-edge);
  -webkit-overflow-scrolling: touch;
}
.tablewrap table {
  min-width: 560px;
}
.tablewrap th,
.tablewrap td {
  padding: 14px 18px;
  text-align: start;
  vertical-align: middle;
  font-size: 16px;
}
.tablewrap thead th {
  background: linear-gradient(180deg, #e7cb73 0%, #c9a227 55%, #a9842a 100%);
  color: var(--on-gold);
  font-weight: 800;
  font-size: 15px;
  white-space: nowrap;
  border-bottom: 1px solid rgba(90, 65, 10, 0.4);
}
.tablewrap thead th:first-child {
  border-start-start-radius: var(--radius);
}
.tablewrap thead th:last-child {
  border-start-end-radius: var(--radius);
}
.tablewrap tbody tr {
  border-top: 1px solid var(--line-soft);
  transition: background var(--fast);
}
.tablewrap tbody tr:hover {
  background: rgba(201, 162, 39, 0.05);
}
.tablewrap tbody th {
  color: var(--ivory);
  font-weight: 700;
}
.tablewrap tbody td {
  color: var(--ivory);
}
.tablewrap .th__code {
  display: block;
  color: var(--dim);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
}
.tablewrap .sym-link .sym {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--gline);
  background: linear-gradient(180deg, rgba(201, 162, 39, 0.14), rgba(201, 162, 39, 0.04));
  font-weight: 800;
  font-size: 14px;
  transition: border-color var(--fast), background var(--fast);
}
.tablewrap .sym-link:hover .sym {
  border-color: var(--gold-2);
  background: rgba(201, 162, 39, 0.18);
}
/* جدولُ المقارنة: العمودُ الأول عناوينُ المواصفات */
.tablewrap--compare tbody th {
  color: var(--muted);
  font-weight: 600;
}
.tablewrap--compare thead td {
  background: linear-gradient(180deg, #e7cb73 0%, #c9a227 55%, #a9842a 100%);
}
.tablewrap--compare td,
.tablewrap--compare thead th {
  text-align: center;
}
.tablewrap--compare tbody th {
  text-align: start;
}
.tfoot-note {
  margin-top: 12px;
  color: var(--dim);
  font-size: 14px;
}
/* الهاتف: بطاقاتٌ بدل الصفوف العريضة (ملاحظاتُ التركيب) — التسميةُ من data-label الذي تكتبه tableWrap */
@media (max-width: 640px) {
  .tablewrap--cards table {
    min-width: 0;
  }
  .tablewrap--cards thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .tablewrap--cards tbody tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 14px;
    padding: 14px 18px;
    border-top: 1px solid var(--line);
  }
  .tablewrap--cards tbody tr:first-child {
    border-top: 0;
  }
  .tablewrap--cards tbody th {
    grid-column: 1 / -1;
    padding: 0 0 6px;
    font-size: 17px;
  }
  .tablewrap--cards tbody td {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0;
    font-size: 15px;
  }
  .tablewrap--cards tbody td::before {
    content: attr(data-label);
    color: var(--dim);
    font-size: 12px;
  }
}

/* ---------- الأسئلة: صفوفٌ زجاجية بسهمٍ ذهبي، والمفتوحُ بإطارٍ ذهبي ---------- */
.faq {
  display: grid;
  gap: 10px;
}
.faq details {
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(17, 20, 22, 0.75);
  transition: border-color var(--fast), background var(--fast);
}
.faq details[open] {
  border-color: var(--gline);
  background: linear-gradient(160deg, rgba(27, 30, 32, 0.95), rgba(17, 20, 22, 0.9));
  box-shadow: 0 0 0 1px rgba(201, 162, 39, 0.06), 0 18px 40px rgba(0, 0, 0, 0.35);
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 60px;
  padding: 12px 20px;
  font-weight: 700;
  font-size: 17px;
  color: var(--ivory);
}
.faq summary::after {
  content: '';
  flex: none;
  width: 10px;
  height: 10px;
  /* حدودٌ فيزيائية لا منطقية: السهمُ يشير إلى الأسفل في الاتجاهين */
  border-right: 2px solid var(--gold-2);
  border-bottom: 2px solid var(--gold-2);
  transform: rotate(45deg);
  margin-inline-end: 4px;
  transition: transform var(--fast);
}
.faq details[open] summary::after {
  transform: rotate(-135deg);
}
.faq__a {
  padding: 0 20px 18px;
  color: var(--muted);
  line-height: 1.8;
}
.faq__a p + p {
  margin-top: 10px;
}

/* ---------- النثر: فقراتٌ وقوائمُ بعلامات ذهبية، وعناوينُ بخطٍّ ذهبي جانبي (15-article) ---------- */
.prose {
  display: grid;
  gap: 28px;
}
.prose__sec {
  display: grid;
  gap: 12px;
}
.prose h2,
.prose__h,
.prose h3 {
  position: relative;
  padding-inline-start: 16px;
  font-size: clamp(22px, 0.6vw + 18px, 28px);
}
.prose h3 {
  font-size: clamp(19px, 0.4vw + 16px, 23px);
}
.prose h2::before,
.prose__h::before,
.prose h3::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 0.2em;
  bottom: 0.2em;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--gold-2), var(--gold-deep));
}
.prose p,
.prose li {
  color: var(--muted);
}
.prose strong,
.prose b {
  color: var(--ivory);
}
.prose a {
  color: var(--gold-2);
  border-bottom: 1px solid var(--gline);
}
.prose ul:not(.ticks) {
  display: grid;
  gap: 8px;
  padding-inline-start: 4px;
}
.prose ul:not(.ticks) li {
  position: relative;
  padding-inline-start: 22px;
}
.prose ul:not(.ticks) li::before {
  content: '';
  position: absolute;
  inset-inline-start: 2px;
  top: 0.75em;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  transform: rotate(45deg);
  background: var(--gold);
}
.prose ol {
  display: grid;
  gap: 8px;
  padding-inline-start: 24px;
  list-style: decimal;
}
.prose table {
  font-size: 15px;
}
.prose blockquote {
  margin: 0;
  padding: 22px 28px;
  border-radius: var(--radius);
  background: var(--glass);
  border: 1px solid var(--gline);
  color: var(--ivory);
  font-weight: 700;
  font-size: 20px;
}
.ticks {
  display: grid;
  gap: 10px;
}
.ticks li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--muted);
}
.ticks li svg {
  flex: none;
  margin-top: 6px;
  color: var(--gold-2);
}

/* ---------- الصفحةُ الطويلة بفهرس: الفهرسُ لوحٌ زجاجي بعنوانٍ ذهبي، ثابتٌ بجانب النصّ على الحاسوب (25-legal-terms) ---------- */
.docwrap {
  display: grid;
  gap: 40px;
  align-items: start;
}
@media (max-width: 1023px) {
  .docwrap {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (min-width: 1024px) {
  .docwrap {
    grid-template-columns: 260px minmax(0, 1fr);
  }
  .docwrap > .toc {
    position: sticky;
    top: calc(var(--header-h) + 24px);
  }
}
.docwrap--solo {
  grid-template-columns: minmax(0, 1fr) !important;
  max-width: 980px;
}
.toc {
  border-radius: var(--radius);
  background: var(--glass);
  border: 1px solid var(--gline);
  box-shadow: var(--glass-edge);
  overflow: hidden;
}
.toc__h {
  display: block;
  padding: 14px 20px;
  background: linear-gradient(180deg, #e7cb73 0%, #c9a227 55%, #a9842a 100%);
  color: var(--on-gold);
  font-weight: 800;
  font-size: 16px;
}
.toc ol {
  display: grid;
  gap: 2px;
  padding: 12px 10px;
  counter-reset: toc;
}
.toc li a {
  display: flex;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
  transition: color var(--fast), background var(--fast);
}
.toc li a::before {
  content: '';
  flex: none;
  width: 6px;
  height: 6px;
  margin-top: 0.55em;
  border-radius: 999px;
  background: var(--gline);
}
.toc li a:hover {
  color: var(--ivory);
  background: rgba(201, 162, 39, 0.08);
}
/* مقالُ الوثيقة */
.docart {
  display: grid;
  gap: 22px;
}
.docart h1 {
  font-size: clamp(30px, 1.4vw + 20px, 48px);
}
.docmeta {
  color: var(--muted);
  font-size: 15px;
}
.docnote {
  padding: 14px 18px;
  border-radius: 12px;
  border: 1px solid var(--gline);
  background: rgba(201, 162, 39, 0.06);
  color: var(--muted);
  font-size: 15px;
}
.docsec {
  display: grid;
  gap: 10px;
  padding: 22px 24px;
  border-radius: var(--radius);
  background: rgba(17, 20, 22, 0.7);
  border: 1px solid var(--line);
}
.docsec h2 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 21px;
}
.docsec__n {
  color: var(--gold-2);
}
.docsec p,
.docart > p,
.points li {
  color: var(--muted);
  line-height: 1.85;
}
.points {
  display: grid;
  gap: 10px;
  padding-inline-start: 26px;
  list-style: decimal;
}
.points li::marker {
  color: var(--gold-2);
  font-weight: 700;
}
.sources {
  display: grid;
  gap: 12px;
  padding: 22px 24px;
  border-radius: var(--radius);
  background: rgba(17, 20, 22, 0.7);
  border: 1px solid var(--line);
}
.sources h2 {
  font-size: 19px;
}
.sources ol {
  display: grid;
  gap: 8px;
  padding-inline-start: 22px;
  list-style: decimal;
}
.sources a {
  color: var(--gold-2);
  word-break: break-all;
}

/* ---------- حقائقُ قصيرة: شبكةُ عنوان ← قيمة في بطاقاتٍ صغيرة ---------- */
.kv {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
}
.kv__i {
  padding: 16px 18px;
  border-radius: 14px;
  background: var(--glass);
  border: 1px solid var(--line);
  display: grid;
  gap: 4px;
}
.kv__i dt {
  color: var(--muted);
  font-size: 13px;
}
.kv__i dd {
  color: var(--ivory);
  font-weight: 800;
  font-size: 19px;
}
.kv--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.kv--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 12px;
}
@media (max-width: 767px) {
  .kv--4,
  .kv--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- تحذيرُ المخاطر: شريطٌ زجاجي بإطارٍ ذهبي وأيقونة (07-trading-conditions) ---------- */
.risk {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px 16px;
  padding: 20px 24px;
  border-radius: var(--radius);
  border: 1px solid var(--gline);
  background: linear-gradient(160deg, rgba(201, 162, 39, 0.1), rgba(17, 20, 22, 0.8));
  margin-top: 28px;
}
.risk__h {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  color: var(--ivory);
}
.risk__h svg {
  color: var(--gold-2);
}
.risk p {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 15px;
}
.risk__more {
  grid-column: 1 / -1;
  color: var(--gold-2);
  font-weight: 700;
  font-size: 15px;
}

/* ---------- روابطُ ذات صلة: بطاقاتٌ بسهم ---------- */
.related {
  margin-top: 32px;
  display: grid;
  gap: 14px;
}
.related__h {
  font-size: 22px;
}
.related ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}
.related li a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 12px;
  align-items: center;
  padding: 16px 18px;
  border-radius: 14px;
  background: var(--glass);
  border: 1px solid var(--line);
  transition: border-color var(--fast), transform var(--fast);
}
.related li a:hover {
  border-color: var(--gline);
  transform: translateY(-2px);
}
.related li a b {
  color: var(--ivory);
  font-size: 16px;
}
.related li a span {
  grid-column: 1;
  color: var(--muted);
  font-size: 14px;
}
.related__arr {
  grid-column: 2;
  grid-row: 1 / span 2;
  color: var(--gold-2);
}

/* ---------- شريطُ الدعوة الختامي: عنوانٌ كبير وزرٌّ ذهبي فوق العمارة الذهبية (07-cta-architecture) ---------- */
.ik-cta,
.band {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  padding: 64px 48px;
  border: 1px solid var(--gline);
  background: #000;
  isolation: isolate;
  display: grid;
  gap: 16px;
  justify-items: start;
}
/* [2026-11-11، مع عودة الجبال] طبقةُ التعتيم لم تكن تظهر يوماً: الصورةُ عليها transform (سياقُ تكديس) فتُرسم فوق ‎::before‎
   السابق لها، فبقي النصُّ فوق قمم الجبال المضيئة صعبَ القراءة، خصوصاً سطرُه الرمادي وعلى الهاتف. z-index يرفع الطبقةَ فوق
   الصورة وتحت النص (z 2)، بقوّةٍ تُبقي الجبالَ ظاهرة: في العربية تعتم جهةُ النص (اليمين) وتصفو يساراً، وفي اللغات اليسارية
   والشريط المتوسّط بقعةٌ بيضاوية خلف النص والجبالُ على الجانبين */
.ik-cta .ik-stage::before {
  z-index: 1;
  background: linear-gradient(to left, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.44) 42%, rgba(0, 0, 0, 0.04) 100%);
}
html[dir='ltr'] .ik-cta {
  justify-items: center;
  text-align: center;
}
html[dir='ltr'] .ik-cta .ik-stage::before {
  background: radial-gradient(ellipse 60% 90% at 50% 50%, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.44) 55%, rgba(0, 0, 0, 0.06) 100%);
}
.ik-cta .ik-stage ~ .h2,
.ik-cta .ik-stage ~ .lead {
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.75);
}
.ik-cta .ik-stage::after {
  display: none;
}
.ik-cta > *:not(.ik-stage) {
  position: relative;
  z-index: 2;
}
.ik-cta .h2,
.band .h2 {
  max-width: 22ch;
}
.ik-cta .lead,
.band .lead {
  max-width: 48ch;
}
.rf-band__cta,
.ik-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}
.ik-cta--center {
  justify-items: center;
  text-align: center;
}
.ik-cta--center .ik-stage::before {
  background: radial-gradient(ellipse 60% 90% at 50% 50%, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.44) 55%, rgba(0, 0, 0, 0.06) 100%);
}
@media (max-width: 767px) {
  /* الهاتف: النصُّ يملأ عرضَ الشريط، فالتعتيمُ من أعلاه (العنوانُ والسطر) ويخفّ نحو الأزرار */
  .ik-cta .ik-stage::before,
  html[dir='ltr'] .ik-cta .ik-stage::before {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.56) 55%, rgba(0, 0, 0, 0.36) 100%);
  }
  .ik-cta,
  .band {
    padding: 40px 24px;
    justify-items: stretch;
    text-align: center;
  }
  .ik-cta .h2,
  .band .h2,
  .ik-cta .lead,
  .band .lead {
    max-width: none;
    margin-inline: auto;
  }
  .rf-band__cta,
  .ik-cta__actions {
    flex-direction: column;
  }
  .rf-band__cta .btn,
  .rf-band__cta .rf-btn,
  .rf-band__cta .rf-hbtn,
  .ik-cta__actions .btn {
    width: 100%;
  }
}
/* حلقةُ الزرّ في المرجع السابق: تبقى اسماً وحده بلا رسم */
.rf-ring {
  display: inline-flex;
}

/* ---------- لقطةُ المنصّة الحقيقية في إطارٍ ذهبي رفيع يطفو على ضوء (01-home، 08-platform) ---------- */
.ik-shot {
  position: relative;
  margin: 0;
  padding: 8px;
  border-radius: 18px;
  background: linear-gradient(160deg, #3a2f12, #0f0f10 40%, #3a2f12);
  box-shadow: 0 0 0 1px rgba(226, 194, 95, 0.5), 0 40px 120px rgba(0, 0, 0, 0.7), 0 0 80px rgba(201, 162, 39, 0.18);
}
.ik-shot img,
.ik-shot video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  background: #0b0e11;
}
/* فيديو المنصّة (الرئيسية): نسبةُ المقطع 16:9 */
.ik-shot video {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.ik-shot::after {
  content: '';
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: -40px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(226, 194, 95, 0.35), transparent 70%);
  filter: blur(14px);
  z-index: -1;
}

/* ---------- النماذج والحاسبات ---------- */
.calc {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 32px;
  padding: 32px;
  border-radius: 22px;
  background: var(--glass);
  border: 1px solid var(--gline);
  box-shadow: var(--glass-edge);
}
.calc__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-content: start;
}
.calc__f {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}
.calc__f--wide {
  grid-column: 1 / -1;
}
.calc input,
.calc select {
  width: 100%;
  min-height: 50px;
  padding: 0 16px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.7);
  color: var(--ivory);
  font-size: 17px;
  font-weight: 700;
  transition: border-color var(--fast), box-shadow var(--fast);
}
.calc input:focus,
.calc select:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.2);
}
.calc select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--gold-2) 50%), linear-gradient(135deg, var(--gold-2) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-inline-end: 40px;
}
html[dir='rtl'] .calc select {
  background-position: 20px 50%, 14px 50%;
}
.calc__dir {
  border: 0;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.calc__dir legend {
  padding: 0;
  margin-bottom: 8px;
}
.calc__dir label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.7);
  color: var(--ivory);
  cursor: pointer;
}
.calc__dir label:has(input:checked) {
  border-color: var(--gold);
  background: rgba(201, 162, 39, 0.12);
}
.calc__dir input {
  width: 16px;
  height: 16px;
  min-height: 0;
  accent-color: var(--gold);
}
.calc__out {
  display: grid;
  gap: 14px;
  align-content: start;
  padding: 24px;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid var(--line);
}
.calc__res[hidden] {
  display: none;
}
.calc__res {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--line);
}
.calc__res span {
  color: var(--muted);
  font-size: 14px;
}
.calc__res b {
  color: var(--ivory);
  font-size: 22px;
  font-weight: 800;
}
.calc__res--main {
  border-color: rgba(255, 236, 170, 0.5);
  background: var(--btn-gold);
  box-shadow: 0 14px 40px rgba(201, 162, 39, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.calc__res--main span,
.calc__res--main b {
  color: var(--on-gold);
}
.calc__res--main b {
  font-size: clamp(28px, 1.4vw + 18px, 40px);
}
.calc__note {
  color: var(--dim);
  font-size: 13px;
}
@media (max-width: 900px) {
  .calc {
    grid-template-columns: 1fr;
    padding: 22px;
  }
}
@media (max-width: 520px) {
  .calc__grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- شريطُ الموافقة: أسفل الشاشة، زجاجي، لا يحجب المحتوى ---------- */
.consent {
  position: fixed;
  z-index: 150;
  inset-inline: 16px;
  bottom: max(16px, env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin-inline: auto;
  max-width: 980px;
  padding: 16px 20px;
  border-radius: 16px;
  background: rgba(12, 15, 17, 0.92);
  border: 1px solid var(--gline);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-size: 14px;
  color: var(--muted);
}
.consent__text a {
  color: var(--gold-2);
  border-bottom: 1px solid var(--gline);
}
.consent__actions {
  display: flex;
  gap: 8px;
}
.consent[hidden] {
  display: none;
}

/* ---------- صفحةُ اختيار اللغة و404 ---------- */
.is-root {
  min-height: 100svh;
  display: grid;
  place-items: center;
  background: radial-gradient(900px 500px at 50% 0%, rgba(201, 162, 39, 0.14), transparent 70%), var(--bg);
}
.fx {
  display: none;
}
/* الصفحةُ عنصرُ شبكةٍ ممركز: بلا عرضٍ كامل كانت تأخذ عرضَ محتواها الأقصى فتفيض بطاقاتُ 404 عن الهاتف */
.root {
  width: 100%;
}
.root__wrap {
  display: grid;
  justify-items: center;
  gap: 28px;
  padding-block: 64px;
  text-align: center;
}
.root__logo {
  height: 56px;
  width: auto;
}
.root__h1 {
  font-size: clamp(24px, 1.2vw + 18px, 36px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.root__sep {
  color: var(--gold-2);
}
.root__langs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  width: 100%;
  max-width: 900px;
}
.root__lang,
.nf {
  display: grid;
  gap: 6px;
  padding: 20px 22px;
  border-radius: var(--radius);
  background: var(--glass);
  border: 1px solid var(--line);
  box-shadow: var(--glass-edge);
  text-align: start;
  transition: border-color var(--fast), transform var(--fast);
}
.root__lang:hover {
  border-color: var(--gold);
  transform: translateY(-3px);
}
.root__lang b {
  font-size: 20px;
  color: var(--ivory);
}
.root__lang span,
.nf p {
  color: var(--muted);
  font-size: 15px;
}
.root__code {
  font-size: clamp(64px, 8vw, 120px);
  font-weight: 800;
  color: var(--gold-2);
  line-height: 1;
  opacity: 0.9;
}
.root__langs--404 {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.nf__h {
  font-size: 22px;
}
.nf .btn {
  justify-self: start;
  margin-top: 6px;
}

/* ---------- الظهورُ عند التمرير: يُخفى تحت .js وحدها، ويظهر بـis-in (fx.js) أو بلا السكربت كاملاً ---------- */
.js [data-rf] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  transition-delay: var(--d, 0ms);
}
.js [data-rf].is-in {
  opacity: 1;
  transform: none;
}
.rf-gate .ik-hero__bg img:not(.is-ready) {
  opacity: 0;
}
.js .header {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease), background var(--fast) linear, border-color var(--fast) linear, box-shadow var(--fast) linear;
}
.js .header.is-in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .js [data-rf],
  .js .header {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .ik-hero__art img {
    animation: none;
  }
}

/* ---------- حرّاسُ التجاوب (layout-guards.test) ---------- */
.rf-cmp__row--cta .rf-hbtn {
  white-space: normal;
}

/* ---------- أسماءٌ من النظام السابق تبقى صالحةً ريثما تُعاد قوالبُها ---------- */
.rf-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--gold-2);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.rf-title {
  color: var(--ivory);
}
.rf-text {
  color: var(--muted);
}
.more {
  margin-top: 28px;
  display: flex;
  justify-content: center;
}
.split {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 40px;
  margin-top: 40px;
  align-items: start;
}
.side {
  position: sticky;
  top: calc(var(--header-h) + 24px);
}
.sidecard {
  display: grid;
  gap: 14px;
  padding: 28px;
  border-radius: var(--radius);
  background: var(--glass);
  border: 1px solid var(--gline);
  box-shadow: var(--glass-edge);
}
.sidecard__h {
  font-size: 22px;
}
.sidecard p {
  color: var(--muted);
}
.guide__g,
.secgrid,
.fgrid,
.paynotes,
.channels,
.pay,
.doccards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.fgrid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.doccards--2,
.pay {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.gitem,
.srule,
.fitem,
.pnote,
.channel,
.paycard,
.doccard,
.note,
.facts,
.faqside__card,
.flowcol {
  display: grid;
  gap: 10px;
  padding: 26px;
  border-radius: var(--radius);
  background: var(--glass);
  border: 1px solid var(--line);
  box-shadow: var(--glass-edge);
  align-content: start;
}
.gitem h3,
.srule h3,
.fitem h3,
.pnote h3,
.channel__h,
.paycard h3,
.doccard__h,
.note__h,
.facts__h,
.faqside__h,
.flowcol__h {
  font-size: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.gitem p,
.srule p,
.fitem p,
.pnote p,
.channel p,
.paycard p,
.doccard p,
.facts li {
  color: var(--muted);
}
.pnote h3 svg,
.paycard h3 svg,
.channel__ico,
.doccard__ico {
  color: var(--gold-2);
}
.fitem {
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
}
.pfrow__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  border: 1px solid var(--gline);
  background: rgba(201, 162, 39, 0.08);
  color: var(--gold-2);
}
.channel__ico,
.doccard__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  border: 1px solid var(--gline);
  background: linear-gradient(160deg, rgba(201, 162, 39, 0.18), rgba(201, 162, 39, 0.04));
}
.channel__value {
  color: var(--gold-2);
  font-weight: 700;
  word-break: break-all;
}
.doccard__meta {
  color: var(--dim);
  font-size: 13px;
}
a.doccard:hover {
  border-color: var(--gline);
}
.paypoints {
  display: grid;
  gap: 6px;
  color: var(--muted);
  padding-inline-start: 18px;
  list-style: disc;
}
.flowbox {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.flowcol ol {
  display: grid;
  gap: 10px;
}
.flowcell {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--muted);
}
.flowcell i {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--btn-gold);
  color: var(--on-gold);
  font-style: normal;
  font-weight: 800;
  font-size: 14px;
}
.about {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}
.facts ul {
  display: grid;
  gap: 8px;
}
.faqwrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 40px;
  align-items: start;
}
.faqgroup + .faqgroup {
  margin-top: 40px;
}
.faqside {
  position: sticky;
  top: calc(var(--header-h) + 24px);
  display: grid;
  gap: 18px;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chips li {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--gline);
  color: var(--muted);
  font-size: 13px;
}
.rf-platform__specs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.rf-spec {
  display: grid;
  gap: 2px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--glass);
  border: 1px solid var(--line);
  text-align: center;
}
.rf-spec b {
  color: var(--gold-2);
  font-size: 26px;
  font-weight: 800;
}
.rf-spec span {
  color: var(--muted);
  font-size: 14px;
}
.rf-docs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.rf-doc {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border-radius: 14px;
  background: var(--glass);
  border: 1px solid var(--line);
  transition: border-color var(--fast), transform var(--fast);
}
.rf-doc:hover {
  border-color: var(--gline);
  transform: translateY(-2px);
}
.rf-doc__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--gline);
  color: var(--gold-2);
  flex: none;
}
.rf-doc b {
  display: block;
  color: var(--ivory);
}
.rf-doc small {
  color: var(--muted);
}
.iq {
  display: grid;
  gap: 14px;
  padding: 22px;
  border-radius: var(--radius);
  background: var(--glass);
  border: 1px solid var(--gline);
  box-shadow: var(--glass-edge);
}
.iq__head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.iq__sym {
  font-size: 20px;
}
.iq__name {
  color: var(--muted);
}
.iq__bs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.iq__px {
  display: grid;
  gap: 2px;
  padding: 12px 16px;
  border-radius: 12px;
  text-align: center;
}
.iq__px small {
  color: rgba(245, 241, 232, 0.8);
  font-size: 13px;
}
.iq__px b {
  font-size: 22px;
  color: #fff;
}
.iq__px--sell {
  background: linear-gradient(180deg, rgba(200, 16, 59, 0.9), rgba(140, 10, 40, 0.9));
}
.iq__px--buy {
  background: linear-gradient(180deg, rgba(0, 139, 106, 0.9), rgba(0, 95, 72, 0.9));
}
.iq__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.iq__chg small {
  color: var(--muted);
  margin-inline-end: 6px;
}
.iq__chg .up {
  color: var(--up);
}
.iq__chg .dn {
  color: var(--down);
}
.iq__btns {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
@media (max-width: 1023px) {
  .guide__g,
  .secgrid,
  .fgrid,
  .paynotes,
  .channels,
  .fgrid--4,
  .rf-docs,
  .rf-platform__specs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .split,
  .about,
  .faqwrap {
    grid-template-columns: 1fr;
  }
  .side,
  .faqside {
    position: static;
  }
}
@media (max-width: 640px) {
  .guide__g,
  .secgrid,
  .fgrid,
  .paynotes,
  .channels,
  .pay,
  .doccards,
  .doccards--2,
  .fgrid--4,
  .rf-docs,
  .flowbox {
    grid-template-columns: 1fr;
  }
  .rf-platform__specs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---- css/50-home.css ---- */
/* ============================================================
   الرئيسية (hm2-) — [المالك 2026-11-09 مساءً «بدي اخلي الواجهه هيك بس نفسها بنسبة 100%»]
   صورةُ المفهوم حرفياً: لوحتان بعرض الشاشة تحفظان نسبةَ الصورة (aspect-ratio)، والنصوصُ فوقهما في مواضعَ مقيسةٍ من الصورة
   نِسَباً مئوية، وأحجامُها بوحدة عرض الحاوية (cqw: 1% من عرض اللوحة) فتكبر وتصغر مع الصورة كما في المفهوم، بسقفٍ عند عرض 1440
   كي لا تتضخّم على الشاشات العريضة. وعلى الهاتف لوحةٌ طولية مولَّدة من المشهد نفسه بمناشيرَ أكبر ونصوصٌ بأحجام الهاتف (المالك ليلاً: «الأحجام بالجوال تحسّه كثير بعيد»). لا شريطَ أسعار ولا صفَّ أرقام: ما ليس في
   الصورة ليس في الصفحة. الألوانُ من الصورة نفسها (أسود #0a0b0c، عاجي، ذهب).
   ============================================================ */

/* ---------- ترويسةُ الرئيسية: معتمةٌ في التدفّق فوق المشهد كما في الصورة، وتلتصق عند التمرير ---------- */
.is-home .header--home {
  position: sticky;
  top: 0;
  background: #000;
  border-bottom-color: rgba(245, 241, 232, 0.06);
}
.header--home .ik-bar {
  gap: 24px;
}
/* ثلاثةُ روابط في الوسط: الأسواق، المنصّة، عن إكليل */
.hm2-nav {
  display: flex;
  align-items: center;
  gap: clamp(28px, 4.2vw, 64px);
  margin-inline: auto;
}
.hm2-nav a {
  color: var(--ivory);
  font-size: 17px;
  font-weight: 700;
  white-space: nowrap;
  transition: color var(--fast);
}
.hm2-nav a:hover,
.hm2-nav a[aria-current] {
  color: var(--gold-2);
}
/* القائمةُ الكاملة تبقى في الـDOM؛ على الرئيسية بعرض الحاسوب تحلّ الروابطُ الثلاثة محلَّ زرّها، وتحت 1024px يعود الزرُّ مكانَها
   [المالك 2026-11-10 «من فوق ملخبط»: الشريطُ نفسُه كالصفحات الداخلية مع الروابط] */
.header--home .burger {
  display: none;
}
@media (max-width: 1023px) {
  .header--home .hm2-nav {
    display: none;
  }
  .header--home .burger {
    display: block;
  }
}
/* حبّةُ اللغة بإطارٍ ظاهر كما في الصورة (في الداخلية تظهر الحافةُ عند التحويم فقط) */
.header--home .lang > summary {
  border-color: var(--gline);
  background: rgba(17, 20, 22, 0.55);
}

/* ---------- اللوحتان: الصورةُ تملأ لوحةً بنسبتها، بلا تدرّجات التعتيم المشتركة ---------- */
.hm2-scene,
.hm2-ground {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  background: #000;
  color: var(--ivory);
}
/* [المالك 2026-11-11 «قبل لا نكمل رجعلي الجبال»] عادت الجبال: لوحاتُ المشهد بجبالها وصخورها، ولوحةُ الجبال خلف المنصّة
   و«افتح حسابك» بحلقتها (كانت يوماً واحداً على أسودٍ صافٍ، 2026-11-10 «الخلفية كلها أسود… الجبال وهدول»). الصفحةُ نفسها
   سوداء (#000) كما طلب في 2026-11-10، فكلُّ لوحةٍ تخرج من الأسود وتعود إليه: أعلى المشهد خلف الجملة (ما كان يغطّيه الذوبانُ
   قبل قصّ أعلى اللوحة: 75% عند حدّ القصّ ثم يصفو عند رأس المدالية)، وأسفلُه قبل قسم وسائل الإيداع، وأعلى الأرضية خلف فيديو
   المنصّة (سوادُ الفيديو يندمج مع الصفحة لا مع سماء اللوحة، وهي أفتح: 30 من 255)، وأسفلُها قبل التذييل. الطبقاتُ فوق مقطع
   الحركة (z 1) وتحت النصوص (z 3) */
.hm2-scene::before,
.hm2-scene::after,
.hm2-ground::before,
.hm2-ground::after {
  content: '';
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  pointer-events: none;
}
.hm2-scene::before {
  top: 0;
  height: 17%;
  background: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.75) 14%, rgba(0, 0, 0, 0) 100%);
}
.hm2-scene::after,
.hm2-ground::after {
  bottom: 0;
  height: 8%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #000 90%);
}
/* الأرضية: أسودُ صافٍ حتى ما تحت الفيديو (43.7%) ثم تطلع سماءُ الجبال وقممُها (القمّةُ اليمنى عند 54.8% من القسم) */
.hm2-ground::before {
  top: 0;
  height: 53.8%;
  /* منحنى ناعم (smoothstep) بدل خطٍّ مستقيم: لا يظهر للذوبان حدٌّ يبدأ عنده */
  background: linear-gradient(to bottom, #000 0%, #000 81%, rgba(0, 0, 0, 0.93) 84%, rgba(0, 0, 0, 0.76) 87%, rgba(0, 0, 0, 0.5) 90.5%, rgba(0, 0, 0, 0.24) 94%, rgba(0, 0, 0, 0.07) 97%, rgba(0, 0, 0, 0) 100%);
}
.hm2-ground::after {
  height: 7.2%;
}
/* التركيبُ يعيش في غلافٍ داخلي هو حاويةُ القياس (cqw) ومرجعُ المواضع؛ على الشاشات العريضة يضيق الغلافُ إلى 75% وتبقى اللوحةُ
   العريضة (مُوسَّعةُ الجانبين) تملأ القسم خلفه [المالك 2026-11-09 ليلاً «بالـPC كثير قريبة، كلشي كبير»] */
.hm2-scene__in,
.hm2-ground__in {
  position: relative;
  z-index: 3;
  width: 100%;
  margin-inline: auto;
  container-type: inline-size;
}
.hm2-scene__in {
  aspect-ratio: 2752 / 2616;
}
/* [المالك 2026-11-10 «شيل هالنص… وارفع اللي تحت لفوق شوي، وارفع الهيكل لفوق كمان، للجوال وللـPC»] العنوانُ مخفيٌّ للعين والجملةُ
   صعدت مكانه، والمشهدُ صعد إليها: يُقصّ من أعلى اللوحة 16% (سماءٌ سوداء فارغة) فتصير النسبةُ 2752/2616 بدل 2752/3114، والصورةُ
   مثبّتةٌ من أسفلها، وكلُّ موضعٍ مئوي تحتها محسوبٌ من جديد: الجديد = (القديم − 16) ÷ 0.84. مربّعُ الحركة يبدأ فوق القسم بـ19.05%
   (16 ÷ 0.84) وما يتجاوز القسمَ مقصوص (overflow: clip) */
.hm2-scene {
  overflow: clip;
}
/* لوحةُ الأرضية (2752×2350) مثبّتةٌ في قاع القسم بنسبتها، وفوقها 250 وحدةً سوداء (القسمُ 2752/2600): الفيديو على الأسود
   والجبالُ تطلع تحته كاملةً بقممها، فلا يقطعها ذوبانُ الأعلى. كلُّ موضعٍ في القسم محسوبٌ على 2600 */
.hm2-ground__in {
  aspect-ratio: 2752 / 2600;
}
.hm2-ground > .hm2-stage {
  top: auto;
  aspect-ratio: 3840 / 3279;
}
.hm2-stage.ik-stage::before,
.hm2-stage.ik-stage::after {
  display: none;
}
/* [المالك 2026-11-11 «وبغير لغه ليش هيك»] القاعدةُ العامّة للغات اليسارية (html[dir='ltr'] .ik-stage img، تثبيتٌ من الوسط)
   أقوى من قاعدة اللوحة، فمنذ قصّ أعلى اللوحة (2026-11-10) كانت الصورةُ في الإنجليزية وأخواتها تنزل 8% عن نصوصها وعن مقطع
   الضوء (عملةٌ ثانية باهتة فوق العملة، وقاعُ المشهد مقصوص)، وعلى الهاتف 3.6%. اللوحةُ مثبّتةٌ من أسفلها في كل اللغات */
.hm2-stage img,
html[dir='ltr'] .hm2-stage img {
  transform: none;
  object-position: center bottom;
}

/* ---------- البطل: العنوانُ والجملةُ في وسط السماء ---------- */
/* التوسيطُ بالحافتين لا بـtransform: قاعدةُ الظهور (.js [data-rf].is-in) تصفّر transform فكان النصُّ ينزاح */
.hm2-hero {
  position: absolute;
  z-index: 2;
  left: 8%;
  right: 8%;
  top: 2.9%;
  text-align: center;
}
.hm2-h1 {
  font-size: 6.9vw;
  font-size: min(6.9cqw, 100px);
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ivory);
  text-shadow: 0 3px 40px rgba(0, 0, 0, 0.65);
  text-wrap: balance;
}
.hm2-sub {
  margin: 0 auto;
  max-width: 46cqw;
  font-size: 2.15vw;
  font-size: min(2.15cqw, 31px);
  line-height: 1.6;
  color: #d9d6cf;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.7);
}

/* اللغاتُ اليسارية: عناوينُها أطول من العربية التي قيست عليها الصورة (From here, your horizon widens.) فتصغر كي تبقى سطراً أو سطرين
   في المكان نفسه، والمنصّةُ في عمودها الضيّق */
html[dir='ltr'] .hm2-h1 {
  font-size: min(4.6cqw, 66px);
}
html[dir='ltr'] .hm2-sub {
  max-width: 54cqw;
}

/* ---------- لوحاتُ الأسواق الثلاث: كلٌّ على منشورها الزجاجي، واللوحةُ كلُّها رابطٌ إلى صفحة سوقها ---------- */
.hm2-panels {
  display: contents;
}
.hm2-panel {
  position: absolute;
  z-index: 2;
  display: block;
  color: var(--ivory);
  text-align: start;
  text-decoration: none;
}
/* [المالك 2026-11-10 «رايح يغطّي على الضو»] مقطعُ الحركة ينمّي الشموعَ ويرسل خيوطَ ضوءٍ داخل المناشير، فتمرّ خلف النصّ بعد أن
   صار داخل الزجاج. غيمةٌ داكنة ناعمة خلف كل كتلة (فوق الفيديو وتحت النص) تُخفت ما يتحرّك وراءه؛ على الزجاج الداكن لا تُرى
   وهي ساكنة */
.hm2-panel::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -16% -14% -18%;
  background: radial-gradient(ellipse closest-side, rgba(12, 12, 16, 0.7) 0%, rgba(12, 12, 16, 0.55) 58%, rgba(12, 12, 16, 0) 100%);
  pointer-events: none;
}
/* المواضعُ والعروضُ مقيسةٌ من الصورة (836 عرضاً) ومُصحَّحةٌ بقياس اللقطة المبنية (measure.cjs): العرضُ يضبط التفافَ السطور كما في الصورة.
   [المالك 2026-11-10 «هالثلاثة مش بمربعاتهم بشكل صحيح» + «رايح يغطّي على الضو»] كانت العناوينُ على الحافّة العليا لكل منشور أو
   فوق الطريق الذهبي فتغطّي ضوءَه. الآن كلُّ كتلةٍ داخل الوجه الزجاجي النظيف لمنشورها، مقيساً على اللوحة بشبكةٍ مئوية
   (scratchpad/motion/ss/plate-d-grid.jpg): وجهُ الفوركس يمينَ الشموع x 69–96% و y 40–56%؛ وجهُ المعادن يمينَ السبائك
   x 32–61.5% و y 58–72% (الطريقُ يمرّ فوق حافّته العليا)؛ وجهُ الرقمية يمينَ العملة x 44–92% وحافّتُه العليا مائلة
   (76% عند x 61 و72% عند x 90) والطريقُ فوقها مباشرة، فالعنوانُ يبدأ من 76.5% */
.hm2-panel--forex {
  right: 6.2%;
  top: 29.76%;
  width: 22%;
}
.hm2-panel--metals {
  right: 47.7%;
  top: 51.43%;
  width: 16%;
}
.hm2-panel--crypto {
  right: 9.9%;
  top: 72.02%;
  width: 33%;
}
/* اللغاتُ اليسارية أطولُ بسطر: الفوركس أعلى قليلاً كي يبقى سهمُه فوق الحافّة السفلى */
html[dir='ltr'] .hm2-panel--forex {
  top: 28.57%;
  width: 25%;
}
html[dir='ltr'] .hm2-panel--metals {
  width: 20%;
}
.hm2-panel__t {
  font-weight: 800;
  line-height: 1.1;
  color: var(--ivory);
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.6);
}
.hm2-panel--forex .hm2-panel__t {
  font-size: min(4.05cqw, 58px);
}
.hm2-panel--metals .hm2-panel__t {
  font-size: min(3.87cqw, 56px);
}
.hm2-panel--crypto .hm2-panel__t {
  font-size: min(4.4cqw, 63px);
}
html[dir='ltr'] .hm2-panel--forex .hm2-panel__t,
html[dir='ltr'] .hm2-panel--crypto .hm2-panel__t {
  font-size: min(3.6cqw, 52px);
}
html[dir='ltr'] .hm2-panel--metals .hm2-panel__t {
  font-size: min(3.4cqw, 49px);
}
.hm2-panel__d {
  margin-top: 1.8cqw;
  line-height: 1.5;
  color: #e3dfd6;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.7);
}
.hm2-panel--forex .hm2-panel__d {
  margin-top: 1.4cqw;
  font-size: min(1.6cqw, 23px);
}
.hm2-panel--metals .hm2-panel__d {
  margin-top: 1.4cqw;
  font-size: min(1.65cqw, 24px);
}
.hm2-panel--crypto .hm2-panel__d {
  max-width: 75%;
  font-size: min(2.08cqw, 30px);
}
html[dir='ltr'] .hm2-panel--crypto .hm2-panel__d {
  max-width: none;
}
.hm2-panel__go {
  display: block;
  margin-top: 2.1cqw;
  color: var(--gold-2);
  transition: transform var(--fast) var(--ease);
}
/* وجهُ المعادن أقصرُ الثلاثة: سهمُه أقربُ إلى نصّه كي لا ينزل إلى حافّة الزجاج */
.hm2-panel--metals .hm2-panel__go {
  margin-top: 1.5cqw;
}
.hm2-panel__go svg {
  display: block;
  width: 3.3cqw;
  max-width: 48px;
  height: auto;
  filter: drop-shadow(0 0 10px rgba(226, 194, 95, 0.35));
}
.hm2-panel:hover .hm2-panel__t {
  color: var(--gold-2);
}
html[dir='rtl'] .hm2-panel:hover .hm2-panel__go {
  transform: translateX(-6px);
}
html[dir='ltr'] .hm2-panel:hover .hm2-panel__go {
  transform: translateX(6px);
}

/* ---------- أرضيةُ المنصّة: اللقطةُ الحقيقية يساراً والنصُّ في عمودٍ يميناً، ثم دعوةُ الفتح على الجبال ---------- */
.hm2-pf {
  display: contents;
}
.hm2-shot {
  position: absolute;
  z-index: 2;
  left: 2.6%;
  top: 1.27%;
  width: 69.4%;
}
.hm2-shot .ik-shot {
  padding: 0.5cqw;
  border-radius: 1.6cqw;
}
.hm2-shot .ik-shot img,
.hm2-shot .ik-shot video {
  border-radius: 1.2cqw;
}
/* [المالك 2026-11-10 «ما يكون خلفه شي، يندمج مع سواد الموقع»] فيديو المنصّة بلا إطارٍ ولا خلفيةٍ ولا توهّج: سوادُه أسودٌ صافٍ
   (ما دون 6 من 255 صار صفراً عند الترميز) وحوافُّه الأربع تذوب على 3% جانباً و5% فوقاً وتحتاً، فاللقطاتُ المقرّبة التي تتجاوز
   الإطار تذوب كذلك. العنوانُ والجهازان في اللقطة العريضة يبدآن بعد 5.8% من أعلاها و3% من جانبها فلا يمسّهما الذوبان */
.hm2-shot .ik-shot.hm2-vid {
  padding: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.hm2-shot .ik-shot.hm2-vid::after {
  display: none;
}
.hm2-shot .ik-shot.hm2-vid video {
  border-radius: 0;
  background: #000;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 3%, #000 97%, transparent), linear-gradient(to bottom, transparent, #000 5%, #000 95%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 3%, #000 97%, transparent), linear-gradient(to bottom, transparent, #000 5%, #000 95%, transparent);
  mask-composite: intersect;
}
.hm2-pf__copy {
  position: absolute;
  z-index: 2;
  right: 2.9%;
  top: 4.07%;
  width: 24%;
  text-align: start;
}
.hm2-pf__h2 {
  font-size: min(3.75cqw, 54px);
  line-height: 1.12;
  font-weight: 800;
  color: var(--ivory);
}
html[dir='ltr'] .hm2-pf__h2 {
  font-size: min(3.2cqw, 46px);
}
.hm2-bar {
  display: block;
  width: 7.3cqw;
  height: max(2px, 0.36cqw);
  margin: 2.5cqw 0 3.7cqw;
  background: linear-gradient(90deg, var(--gold-2), var(--gold));
  box-shadow: 0 0 12px rgba(226, 194, 95, 0.35);
}
.hm2-pf__text {
  max-width: 92%;
  font-size: min(1.65cqw, 24px);
  line-height: 1.55;
  color: #e3dfd6;
}
.hm2-pf__copy .hm2-btn {
  margin-top: 2.5cqw;
  width: 100%;
}
.hm2-btn {
  font-size: min(1.8cqw, 26px);
  min-height: 5.1cqw;
  max-height: 74px;
  padding: 0 2.6cqw;
  border-radius: 0.9cqw;
  gap: 1.2cqw;
}
.hm2-btn svg {
  width: 2.4cqw;
  max-width: 34px;
  height: auto;
}
/* زرُّ المنصّة في عموده الضيّق: الجملُ الروسية والفرنسية أطول («Попробовать демо-счёт») فتصغر كي لا يُقصّ السهم */
html[dir='ltr'] .hm2-pf__copy .hm2-btn {
  padding-inline: 1.6cqw;
  font-size: min(1.45cqw, 21px);
}
html[dir='ltr'] .hm2-pf__copy .hm2-btn svg {
  width: 2cqw;
}
.hm2-open {
  position: absolute;
  z-index: 2;
  left: 15%;
  right: 15%;
  top: 75.64%;
  text-align: center;
}
.hm2-open__h2 {
  font-size: min(5.52cqw, 80px);
  line-height: 1.1;
  font-weight: 800;
  color: var(--ivory);
  text-shadow: 0 3px 40px rgba(0, 0, 0, 0.65);
}
html[dir='ltr'] .hm2-open__h2 {
  font-size: min(4.6cqw, 66px);
}
.hm2-open__text {
  margin-top: 1cqw;
  font-size: min(2.3cqw, 33px);
  color: #e3dfd6;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.7);
}
.hm2-open .hm2-btn {
  margin-top: 1.7cqw;
  min-width: 25cqw;
}

/* ---------- تذييلُ الرئيسية: الشعار وخمسةُ روابط بفواصلَ رفيعة، خطٌّ، جملةُ المخاطر؛ وتحتها الإلزاميُّ صغيراً ---------- */
.hm2-foot {
  padding-top: 40px;
  background: #000;
  border-top: 1px solid rgba(245, 241, 232, 0.07);
}
.hm2-foot::before {
  display: none;
}
.hm2-foot__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.hm2-foot .logo img {
  height: 40px;
}
.hm2-foot__links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 0;
}
.hm2-foot__links a {
  display: inline-flex;
  align-items: center;
  color: #c8c5bf;
  font-size: 15px;
  font-weight: 700;
  transition: color var(--fast);
}
.hm2-foot__links a + a::before {
  content: '';
  display: inline-block;
  width: 1px;
  height: 16px;
  margin-inline: 28px;
  background: rgba(245, 241, 232, 0.22);
}
.hm2-foot__links a:hover {
  color: var(--gold-2);
}
.hm2-foot .rf-foot__sep {
  margin: 28px auto 20px;
}
.hm2-foot .rf-foot__sep i {
  background: rgba(245, 241, 232, 0.12);
}
.hm2-foot__risk {
  padding-inline: var(--pad);
  text-align: center;
  color: var(--muted);
  font-size: 15px;
}
.hm2-foot__legal {
  display: grid;
  gap: 10px;
  justify-items: center;
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid var(--line-soft);
}
.hm2-foot__legal .rf-foot__risk,
.hm2-foot__legal .rf-foot__copy {
  margin: 0;
  font-size: 12.5px;
  color: var(--dim);
}
.hm2-foot__legal .footer__social {
  margin: 4px 0 0;
}
.hm2-foot__legal .footer__social a {
  width: 36px;
  height: 36px;
}

/* شريطُ الجبال تحت فتح الحساب: صورةُ الهاتف وحدها (على الحاسوب اللوحةُ نفسها خلف القسم كلّه) */
.hm2-open__bg {
  display: none;
}

/* ---------- حركةُ المشهد [المالك 2026-11-09 ليلاً «فكرة الفيديو ممتاز»، ثم «حملت كمان عالجوال صح»]: مربّعُ الفيديو يغطّي أعلى
   اللوحة (مُولَّد من مربّعها الأعلى 3840×3840) ضوءاً وحده يُجمع فوق الصورة الحادّة؛ site.js يضيف عنصرَ الفيديو ويفرّكه بالتمرير.
   على الهاتف (< 768) للمشهد مقطعُه الطولي (data-src-m) يغطّي لوحةَ الهاتف كلَّها، وللجبال مقطعُ شريط «افتح حسابك» ---------- */
.hm2-motion {
  position: absolute;
  z-index: 1;
  left: 0;
  top: -19.05%;
  width: 100%;
  aspect-ratio: 1 / 1;
  pointer-events: none;
  /* [المالك 2026-11-10 «مبكسلة كثير… بس بالـPC»] المزجُ على المربّع لا على الفيديو: المربّعُ (موضعٌ مع z-index) سياقُ تكديسٍ
     مستقل، فمزجُ الفيديو داخله كان مع خلفيةٍ شفّافة لا مع اللوحة، فرُسم الفيديو فوقها بشفافية 0.9 (الأنعمُ يغطّي الحادَّ، والعملةُ
     من اللوحة تطلّ من تحته نسخةً ثانية). المقطعُ الآن ضوءٌ وحده على أسود يُجمع (plus-lighter) فوق اللوحة الحادّة، والأسودُ
     لا يغيّر شيئاً؛ screen قبله لمتصفّحٍ لا يعرفه */
  mix-blend-mode: screen;
  mix-blend-mode: plus-lighter;
}
/* شريطُ الجبال في الأرضية: فيديو 16:9 من أسفل اللوحة (مُولَّد من صفوفها السفلى 2160) ملتصقٌ بقاعها */
.hm2-motion--ground {
  top: auto;
  bottom: 0;
  aspect-ratio: 16 / 9;
}
/* مقطعا الجبال صورةٌ كاملة (الجبالُ نفسها بدخانها وضوئها) تُرسم فوق لوحتها كما كانت، لا ضوءٌ يُجمع: الجمعُ يضاعف الجبال */
.hm2-motion--ground,
.hm2-motion--band {
  mix-blend-mode: normal;
}
.hm2-motion__v {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  /* المقطعُ: ما سطع في كل إطارٍ عن أوّله (والمقطعُ يزيح المداليةَ والشموعَ والسبائكَ والعملةَ قليلاً، ففوقها إضاءةٌ من اللوحة
     نفسها لا من المقطع) — لا نسخةَ ثانية ولا نعومة، والمزجُ على المربّع أعلاه */
  transition: opacity 0.9s linear;
  /* [المالك 2026-11-10، دائرتان حمراوان على حافتَي المشهد بشاشة 1900] المزجُ يضيء ما داخل مربّع الفيديو فتظهر حافّتاه
     حيث تمتدّ اللوحةُ العريضة خارجه؛ قناعٌ يذيب الحوافَّ على 9% من كل جانب و14% من الأسفل */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent), linear-gradient(to bottom, #000 86%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent), linear-gradient(to bottom, #000 86%, transparent);
  mask-composite: intersect;
}
/* شريطُ الجبال: الذوبانُ من الأعلى لا من الأسفل (قاعُه قاعُ اللوحة) */
.hm2-motion--ground .hm2-motion__v {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent), linear-gradient(to top, #000 86%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent), linear-gradient(to top, #000 86%, transparent);
}
/* [المالك 2026-11-10 «لسا مش مبين كثير»] كان 0.55 فبدا الضوءُ باهتاً؛ الضوءُ الآن بقوّته كاملةً (المقطعُ معايَرٌ على سطوع الأصل).
   ‎--k‎ يضبطه site.js لمربّع المشهد: صفرٌ عند أعلى الصفحة (الصورةُ الحادّة وحدها) ويبلغ الواحدَ مع أول بكسلات التمرير */
.hm2-motion__v.is-on {
  opacity: var(--k, 1);
  transition: opacity 0.25s linear;
}
/* شريطُ الجبال حلقةٌ بمزجٍ متقاطع: المقطعان يتبادلان الظهورَ على 1.6 ثانية (site.js، LOOP_FADE) */
.hm2-motion--ground .hm2-motion__v,
.hm2-motion--band .hm2-motion__v,
.hm2-motion--ground .hm2-motion__v.is-on,
.hm2-motion--band .hm2-motion__v.is-on {
  transition: opacity 1.6s linear;
}
.hm2-motion--ground .hm2-motion__v.is-on,
.hm2-motion--band .hm2-motion__v.is-on {
  opacity: 0.9;
}
/* شريطُ الجبال في «افتح حسابك»: على الهاتف وحده (على الحاسوب اللوحةُ نفسها خلف القسم كلّه) */
.hm2-motion--band {
  display: none;
}

/* ---------- الشاشاتُ العريضة (≥1600px) [المالك 2026-11-09 ليلاً «بالـPC كثير قريبة، كلشي كبير»] ----------
   كان التركيبُ يكبر مع عرض الشاشة كلِّه (على 1900px كلُّ شيء أكبر بالثلث من المرجع). الآن الغلافُ الداخلي، وهو حاويةُ القياس،
   يضيق إلى 75% فيبقى التركيبُ بمقاس المرجع (1440 على شاشة 1920)، واللوحةُ العريضة مُوسَّعةُ الجانبين (outpaint، 5120 عرضاً)
   تملأ القسمَ خلفه: نسبتُها 5120/4345 تساوي 100/(75×3114/2752) فلا قصَّ ولا فراغ. */
@media (min-width: 1600px) {
  .hm2-scene__in,
  .hm2-ground__in {
    width: 75%;
  }
  .hm2-motion {
    left: 12.5%;
    width: 75%;
  }
  .hm2-ground > .hm2-stage {
    aspect-ratio: 5120 / 3279;
  }
}

/* ---------- الهاتف [المالك 2026-11-09 ليلاً «الأحجام بالجوال تحسّه كثير بعيد»] ----------
   أوّلاً رُصفت القطعُ تحت بعضها فبدت صفحةً أخرى، ثم عُرضت الصورةُ نفسها مصغّرةً فبدت بعيدةً وخطُّها لا يُقرأ. الحلُّ: لوحةٌ طولية
   (9:16) مولَّدةٌ على Higgsfield من المشهد نفسه بمناشيرَ أكبر تملأ العرض، والنصوصُ فوقها بأحجام الهاتف في مواضعَ مقيسةٍ من اللوحة
   (نِسَبٌ مئوية من ارتفاعها). المنصّةُ ولقطتُها بعرض الشاشة على جدارٍ داكن بلون اللوحة، وفتحُ الحساب على شريط الجبال (قصاصةٌ من
   لوحة الحاسوب). الترويسةُ ترويسةُ الهاتف المعتادة (روابطُ الصورة الثلاثة داخل القائمة)، والتذييلُ يتوسّط. */
@media (max-width: 767px) {
  /* المشهد: لوحةُ الهاتف */
  /* لوحةُ الهاتف مقصوصةٌ من أعلاها 12% (المواضعُ السفلية ÷ 0.88، ومربّعُ الحركة يبدأ فوقها بـ13.64%) */
  .hm2-scene__in {
    aspect-ratio: 2160 / 3406;
  }
  .hm2-hero {
    left: 6%;
    right: 6%;
    top: 2.6%;
  }
  .hm2-h1 {
    font-size: clamp(34px, 9.4vw, 46px);
    line-height: 1.15;
  }
  html[dir='ltr'] .hm2-h1 {
    font-size: clamp(30px, 8vw, 40px);
  }
  .hm2-sub,
  html[dir='ltr'] .hm2-sub {
    max-width: none;
    margin-top: 0;
    font-size: 15px;
    line-height: 1.6;
  }
  /* المواضعُ مقيسةٌ من لوحة الهاتف (nano-b): الوجهُ الزجاجي النظيف يمينَ كل منشور، بعيداً عن الشموع والسبائك والعملة */
  /* [المالك 2026-11-10 «هالثلاثة مش بمربعاتهم بشكل صحيح، وللجوال كمان»] مواضعُ مقيسةٌ على لوحة الهاتف بشبكةٍ مئوية
     (scratchpad/motion/ss/plate-m-grid.jpg): وجهُ منشور الفوركس النظيف يمينَ الشموع x 68–97% و y 40.5–57%؛ وجهُ منشور المعادن
     يمينَ السبائك x 31–62% و y 60–71.5% (الطريقُ المضيء يمرّ فوقه عند 51–61%، ينزل يمينَه عند x 72–78%، ثم يمرّ تحته عند
     70–80%: كان النصُّ فوقه فيغطّي الضوء)؛ وجهُ منشور الرقمية يمينَ العملة x 45–93% و y 80–96%.
     الكتلُ مثبّتةٌ من أسفلها داخل الوجه (bottom لا top): النصُّ الأطول في لغةٍ أخرى يمتدّ إلى أعلى فوق زجاج المنشور، لا إلى
     أسفل فوق الطريق. فحصُ اللغات الست على 320–430: scratchpad/motion/panel-measure.cjs */
  .hm2-panel--forex,
  html[dir='ltr'] .hm2-panel--forex {
    right: 3.5%;
    top: auto;
    bottom: 48.75%;
    width: 30%;
  }
  .hm2-panel--metals {
    right: 38.5%;
    top: auto;
    bottom: 32.5%;
    width: 32.5%;
  }
  /* في اللغات اليسارية النصُّ يبدأ من يسار الكتلة (بعد السبائك) ويمتدّ حتى الوجه الجانبي قبل الطريق، والسهمُ يسارَها حيث
     الوجهُ أطول */
  html[dir='ltr'] .hm2-panel--metals {
    right: 32%;
    top: auto;
    bottom: 30.45%;
    width: 37%;
  }
  .hm2-panel--crypto,
  html[dir='ltr'] .hm2-panel--crypto {
    right: 8%;
    top: auto;
    bottom: 4.77%;
    width: 47%;
  }
  html[dir='ltr'] .hm2-panel--crypto {
    right: 6%;
    width: 49%;
  }
  /* الأحجامُ تتبع عرضَ الشاشة قليلاً (اللوحةُ تصغر على 320px فلا تخرج الكتلُ من زجاجها)؛ المسافاتُ بين العنوان والنصّ والسهم
     ضيّقة لأن وجهَ المعادن لا يزيد على 11% من ارتفاع اللوحة (79 بكسل على هاتف 390) */
  .hm2-panel .hm2-panel__t {
    font-size: clamp(22px, 6.9vw, 27px);
  }
  /* وجهُ المعادن أضيقُ الثلاثة */
  .hm2-panel--metals .hm2-panel__t {
    font-size: clamp(20px, 6.2vw, 24px);
  }
  /* «العملات الرقمية» أطول: سطرٌ واحد حتى حافة العملة */
  .hm2-panel--crypto .hm2-panel__t {
    font-size: clamp(20px, 6.4vw, 25px);
  }
  html[dir='ltr'] .hm2-panel .hm2-panel__t {
    font-size: clamp(20px, 6.1vw, 24px);
  }
  html[dir='ltr'] .hm2-panel--metals .hm2-panel__t {
    font-size: clamp(18px, 5.6vw, 22px);
  }
  .hm2-panel .hm2-panel__d {
    max-width: none;
    margin-top: 5px;
    font-size: clamp(12px, 3.35vw, 13px);
    line-height: 1.46;
  }
  .hm2-panel--metals .hm2-panel__d {
    margin-top: 4px;
    font-size: clamp(11px, 3.2vw, 12.5px);
    line-height: 1.42;
  }
  html[dir='ltr'] .hm2-panel .hm2-panel__d {
    font-size: clamp(11px, 3.15vw, 12.5px);
  }
  html[dir='ltr'] .hm2-panel--metals .hm2-panel__d {
    font-size: clamp(10.5px, 3vw, 12px);
  }
  .hm2-panel__go,
  .hm2-panel--metals .hm2-panel__go {
    margin-top: 5px;
  }
  .hm2-panel__go svg {
    width: 22px;
  }

  /* الأرضية: جدارٌ داكن بلون اللوحة، النصُّ ثم اللقطةُ بعرض الشاشة */
  .hm2-ground {
    background: #000;
  }
  /* الهاتف: سماءُ لوحته تخرج من الأسود كالحاسوب (87% عند حدّ القصّ وتصفو عند رأس المدالية)، وأسفلُها يذوب في الأسود (القاعدةُ
     العامّة)؛ الأرضيةُ جدارٌ أسود بلا لوحة، وشريطُ الجبال خلف «افتح حسابك» يخرج من الأسود ويعود إليه */
  .hm2-scene::before {
    height: 17%;
    background: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.87) 10%, rgba(0, 0, 0, 0) 100%);
  }
  .hm2-ground::before,
  .hm2-ground::after {
    display: none;
  }
  .hm2-open__bg::before,
  .hm2-open__bg::after {
    content: '';
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    pointer-events: none;
  }
  .hm2-open__bg::after {
    top: 0;
    height: 28%;
    background: linear-gradient(to bottom, #000, rgba(0, 0, 0, 0));
  }
  .hm2-open__bg::before {
    bottom: 0;
    height: 16%;
    background: linear-gradient(to top, #000, rgba(0, 0, 0, 0));
  }
  .hm2-ground__in {
    aspect-ratio: auto;
  }
  .hm2-ground > .hm2-stage {
    display: none;
  }
  .hm2-pf {
    display: grid;
    gap: 26px;
    padding: 44px var(--pad) 44px;
  }
  .hm2-pf__copy {
    position: static;
    order: -1;
    width: auto;
  }
  .hm2-shot {
    position: static;
    width: auto;
  }
  .hm2-shot .ik-shot {
    padding: 6px;
    border-radius: 14px;
  }
  .hm2-shot .ik-shot img,
  .hm2-shot .ik-shot video {
    border-radius: 10px;
  }
  .hm2-pf__h2,
  html[dir='ltr'] .hm2-pf__h2 {
    font-size: 32px;
  }
  .hm2-bar {
    width: 56px;
    height: 3px;
    margin: 16px 0 18px;
  }
  .hm2-pf__text {
    max-width: none;
    font-size: 16px;
    line-height: 1.6;
  }
  .hm2-btn,
  html[dir='ltr'] .hm2-pf__copy .hm2-btn {
    font-size: 16px;
    min-height: 52px;
    max-height: none;
    padding: 0 22px;
    border-radius: 10px;
    gap: 10px;
  }
  .hm2-btn svg,
  html[dir='ltr'] .hm2-pf__copy .hm2-btn svg {
    width: 22px;
    max-width: none;
  }
  .hm2-pf__copy .hm2-btn {
    margin-top: 22px;
    width: auto;
    min-width: 0;
  }

  /* فتحُ الحساب على شريط الجبال */
  .hm2-open,
  html[dir='ltr'] .hm2-open {
    position: relative;
    inset: auto;
    aspect-ratio: 1 / 0.94;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding: 0 var(--pad) 52px;
    overflow: hidden;
  }
  .hm2-open__bg {
    display: block;
    position: absolute;
    inset: 0;
    z-index: -1;
  }
  .hm2-open__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 58%;
  }
  /* الحركةُ على الهاتف: مقطعُ المشهد الطولي (9:16 من لوحة الهاتف) يغطّي اللوحةَ كلَّها، ومقطعُ الجبال يركب شريطَ «افتح حسابك»
     بقصّة الصورة نفسها (الشريطُ هو أسفلُ لوحة الحاسوب الذي وُلّد منه المقطع) */
  .hm2-motion {
    aspect-ratio: 2160 / 3870;
    top: -13.64%;
  }
  .hm2-motion--ground {
    display: none;
  }
  .hm2-motion--band {
    display: block;
    inset: 0;
    width: auto;
    aspect-ratio: auto;
  }
  .hm2-motion--band .hm2-motion__v {
    object-position: center 58%;
  }
  .hm2-motion__v,
  .hm2-motion--band .hm2-motion__v {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .hm2-open__h2,
  html[dir='ltr'] .hm2-open__h2 {
    font-size: 38px;
  }
  .hm2-open__text {
    margin-top: 10px;
    font-size: 17px;
  }
  .hm2-open .hm2-btn {
    margin-top: 22px;
    min-width: 0;
  }

  /* التذييل */
  .hm2-foot {
    padding-top: 32px;
  }
  .hm2-foot .logo img {
    height: 34px;
  }
  .hm2-foot__row {
    flex-direction: column;
    gap: 18px;
  }
  .hm2-foot__links {
    justify-content: center;
    gap: 10px 0;
  }
  .hm2-foot__links a {
    font-size: 14px;
  }
  .hm2-foot__links a + a::before {
    height: 14px;
    margin-inline: 14px;
  }
  .hm2-foot .rf-foot__sep {
    margin: 24px auto 18px;
  }
  .hm2-foot__risk {
    font-size: 14px;
  }
  .hm2-foot__legal .rf-foot__risk,
  .hm2-foot__legal .rf-foot__copy {
    text-align: center;
  }
}

/* الهواتفُ الصغيرة جداً (320–340px): اللوحةُ أقصر (573px) فتصغر النصوصُ درجةً كي تبقى الكتلُ داخل زجاجها */
@media (max-width: 340px) {
  .hm2-panel .hm2-panel__t {
    font-size: 21px;
  }
  .hm2-panel--metals .hm2-panel__t {
    font-size: 19px;
  }
  .hm2-panel .hm2-panel__d {
    font-size: 11.5px;
  }
  .hm2-panel--metals .hm2-panel__d {
    font-size: 10.5px;
  }
  html[dir='ltr'] .hm2-panel .hm2-panel__t {
    font-size: 19px;
  }
  html[dir='ltr'] .hm2-panel--metals .hm2-panel__t {
    font-size: 17px;
  }
  html[dir='ltr'] .hm2-panel .hm2-panel__d {
    font-size: 10.5px;
  }
  html[dir='ltr'] .hm2-panel--metals .hm2-panel__d {
    font-size: 10px;
  }
}

/* ---- css/51-markets.css ---- */
/* ============================================================
   51-markets.css — صفحاتُ الأسواق (الفهرس، الفوركس/المعادن/الرقمية، صفحاتُ الأدوات). يُلحق بـsite.css عند البناء.
   [المالك 2026-11-09، حزمةُ المرجع 02–05 و21–23] البطلُ على مشهد السوق، صفُّ أرقامٍ بفواصلَ رفيعة تحته، بطاقاتٌ زجاجية،
   جداولُ برأسٍ ذهبي، لوحُ سعرٍ بزرّي شراء/بيع. كلُّ صنفٍ هنا يبدأ بـmk-، والمشتركُ يُعاد استعمالُه لا تنميطُه.
   ============================================================ */

/* [قياس 2026-11-09 على 390px] عنوانُ القسم في site.css لا ينكمش (‎.ik-head__row .h2 { flex: none }‎) فيدفع العنوانُ الطويلُ
   («الذهب والفضة مقابل الدولار والعملات الأخرى») عرضَ الصفحة إلى 589px ويقصّها. هنا يُسمح له بالانكماش والالتفاف على صفحات
   الأسواق وحدها ريثما تُصلَح القاعدةُ المشتركة (الخطُّ الذهبي بعده يملأ الباقيَ كما كان). */
body[data-page^='markets'] .ik-head__row .h2,
body[data-page^='instrument/'] .ik-head__row .h2 {
  flex: 0 1 auto;
}
/* وفي العربية: الخطُّ الذهبي بعد العنوان يبدأ قوياً عنده ويخفت مبتعداً (القاعدةُ المشتركة تكتب اتجاهَ اليسارية وحده) */
html[dir='rtl'] body[data-page^='markets'] .ik-head__row::after,
html[dir='rtl'] body[data-page^='instrument/'] .ik-head__row::after {
  background: linear-gradient(270deg, var(--gline), transparent);
}
/* وسهمُ الأسئلة ينزل بدل أن يشير يساراً: الحدُّ المنطقي (inline-end) يصير يساراً في العربية فينقلب الشكلُ بعد الدوران */
body[data-page^='markets'] .faq summary::after,
body[data-page^='instrument/'] .faq summary::after {
  border-inline-end: 0;
  border-right: 2px solid var(--gold-2);
}

/* ---------- البطل: شارةٌ فوق العنوان (شعارُ الأداة)، ولوحٌ تحت الأزرار (السعر) ---------- */
.mk-hero {
  padding-bottom: 64px;
}
/* المشهدُ يُرى كاملاً تحت الشريط (حروفُ FX وGOLD) على الحاسوب وحده؛ الهاتفُ يأخذ ارتفاعَ محتواه */
@media (min-width: 768px) {
  .mk-hero--index,
  .mk-hero--market {
    min-height: 600px;
  }
}
.mk-hero .ik-hero__copy {
  max-width: 660px;
}
.mk-hero__badge {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 56px;
}
.mk-hero__badge .ik-eyebrow::before {
  display: none;
}
/* شعاراتُ المنصّة (coins.mjs): علمان متراكبان أو قرصٌ واحد — تخطيطُها هنا لصفحات الأسواق */
.mk-coins {
  display: inline-flex;
  align-items: center;
  flex: none;
}
.mk-coins .paircoin {
  position: relative;
  display: inline-block;
  flex: none;
  direction: ltr;
}
.mk-coins .paircoin--one {
  position: static;
  display: inline-flex;
}
.mk-coins .coin {
  display: block;
}
.mk-coins .paircoin__b,
.mk-coins .paircoin__q {
  position: absolute;
}
.mk-coins .paircoin__b {
  top: 0;
  left: 0;
  z-index: 1;
}
.mk-coins .paircoin__q {
  bottom: 0;
  right: 0;
}
.mk-coins--lg .coin {
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.65)) drop-shadow(0 0 14px rgba(201, 162, 39, 0.25));
}

/* الهاتف (مرجعُ الجوال 03): العنوانُ ← المشهدُ شريطاً كاملَ العرض ← الأزرار ← اللوح. المشهدُ نفسُه يخرج من الخلفية إلى التدفّق */
@media (max-width: 767px) {
  .mk-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 14px;
    padding-left: max(var(--pad), env(safe-area-inset-left, 0px));
    padding-right: max(var(--pad), env(safe-area-inset-right, 0px));
    padding-bottom: 24px;
  }
  .mk-hero__grid,
  .mk-hero__copy {
    display: contents;
  }
  .mk-hero .ik-hero__h1 {
    text-shadow: none;
  }
  .mk-hero .ik-stage {
    position: relative;
    inset: auto;
    order: 3;
    height: 320px;
    margin: 6px calc(-1 * max(var(--pad), env(safe-area-inset-right, 0px))) 4px calc(-1 * max(var(--pad), env(safe-area-inset-left, 0px)));
  }
  .mk-hero .ik-stage img {
    transform: none;
  }
  /* مشهدُ الفهرس (GOLD/FX/CRYPTO) يُعرض كاملاً لا مقصوصاً: أسودُه هو أسودُ الصفحة فلا تظهر حافة */
  .mk-hero--index .ik-stage {
    height: 250px;
  }
  .mk-hero--index .ik-stage img {
    object-fit: contain;
    object-position: center;
  }
  .mk-hero .ik-stage::before {
    background: linear-gradient(180deg, var(--bg) 0%, rgba(0, 0, 0, 0) 16%, rgba(0, 0, 0, 0) 74%, var(--bg) 100%);
  }
  .mk-hero .ik-stage::after {
    display: none;
  }
  .mk-hero__badge {
    min-height: 0;
  }
  .mk-hero__actions {
    order: 4;
    margin-top: 0;
  }
  .mk-hero__panel {
    order: 5;
  }
}

/* ---------- صفُّ الأرقام تحت البطل: فواصلُ رفيعة (03-forex)، وعلى الهاتف صندوقان في كل صفّ ---------- */
.mk-strip {
  position: relative;
  z-index: 2;
  margin-top: -16px;
}
.mk-strip .ik-stats {
  padding-block: 6px;
  border-bottom: 1px solid var(--line-soft);
}
.mk-strip .ik-stat {
  padding-block: 18px;
}
.mk-strip .ik-stat__v {
  font-size: clamp(26px, 1.4vw + 14px, 38px);
}
@media (max-width: 767px) {
  .mk-strip {
    margin-top: 0;
  }
  .mk-strip .ik-stats {
    padding-block: 0;
    border-bottom: 0;
  }
  .mk-strip .ik-stat {
    padding: 16px 10px;
  }
}

/* ---------- الفقرةُ الأولى: عنوانٌ وفقراتٌ ثم بطاقاتُ قائمتها (الرئيسية، الثانوية، الناشئة) ---------- */
.mk-intro .ik-head {
  margin-bottom: 18px;
}
.mk-intro__text {
  display: grid;
  gap: 12px;
  max-width: 840px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.8;
}
.mk-intro__text strong {
  color: var(--ivory);
}
/* حبّاتُ الأدوات الأشهر: شعارٌ ورمز، كلٌّ رابطٌ إلى صفحة أداته (04-metals) */
.mk-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}
.mk-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding-inline: 12px 16px;
  border-radius: 999px;
  border: 1px solid var(--gline);
  background: linear-gradient(180deg, rgba(201, 162, 39, 0.14), rgba(201, 162, 39, 0.04));
  color: var(--ivory);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.02em;
  transition: border-color var(--fast), background var(--fast), transform var(--fast);
}
/* الرمزُ اللاتيني معزولٌ باتجاهه داخل الصفحة العربية (كـ.sym، باسمٍ خاص كي لا يُعدَّ صفّاً في جدول الأدوات: seo.test) */
.mk-chip__c,
.mk-near__c {
  direction: ltr;
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
}
.mk-chip:hover {
  border-color: var(--gold-2);
  background: rgba(201, 162, 39, 0.18);
  transform: translateY(-1px);
}
.mk-kinds {
  margin-top: 30px;
}
.mk-kind {
  gap: 14px;
}
.mk-kind strong {
  display: block;
  margin-bottom: 6px;
  color: var(--ivory);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.3;
}
.mk-kind .ik-card__text {
  margin: 0;
}

/* ---------- فقراتُ الشرح بطاقاتٍ زجاجية بأيقونة (05-crypto، 02-markets) ---------- */
.mk-prose-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.mk-prose-grid--1 {
  grid-template-columns: minmax(0, 1fr);
}
.mk-prose-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mk-prose-card {
  position: relative;
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 28px;
  border-radius: var(--radius);
  background: var(--glass);
  border: 1px solid var(--line);
  box-shadow: var(--glass-edge);
}
.mk-prose-card::after {
  content: '';
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(226, 194, 95, 0.75), transparent);
  opacity: 0.7;
  pointer-events: none;
}
.mk-prose-card__h {
  font-size: clamp(20px, 0.5vw + 16px, 24px);
  line-height: 1.3;
}
.mk-prose-card p,
.mk-prose-card .ticks li {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.75;
}
.mk-prose-card strong {
  color: var(--ivory);
}
@media (max-width: 1023px) {
  .mk-prose-grid,
  .mk-prose-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .mk-prose-grid,
  .mk-prose-grid--2 {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
  .mk-prose-card {
    padding: 22px;
  }
}

/* ---------- جدولُ الأدوات: أعمدةٌ ثابتة فيتطابق جدولُ «المزيد» مع الأول، وسطرٌ للساعات والسبريد تحته ---------- */
/* أعمدةٌ ثابتة على الحاسوب وحده: على الهاتف (≤640px) تصير الصفوفُ بطاقاتٍ (tablewrap--cards) بلا عرضٍ أدنى */
@media (min-width: 641px) {
  .mk-specs table {
    table-layout: fixed;
    min-width: 640px;
  }
  .mk-specs th:nth-child(1),
  .mk-specs td:nth-child(1) {
    width: 17%;
  }
  .mk-specs th:nth-child(2),
  .mk-specs td:nth-child(2) {
    width: 33%;
  }
}
.mk-specs tbody th {
  padding-block: 11px;
}
.mk-specs tbody td {
  overflow-wrap: anywhere;
}
.mk-specs--more thead {
  display: none;
}
.mk-specs--more {
  border-start-start-radius: 0;
  border-start-end-radius: 0;
}
.mk-more {
  margin-top: 10px;
}
.mk-more > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 52px;
  padding: 6px 20px;
  border-radius: 14px;
  border: 1px solid var(--gline);
  background: rgba(201, 162, 39, 0.06);
  color: var(--gold-2);
  font-weight: 700;
  transition: background var(--fast), border-color var(--fast);
}
.mk-more > summary:hover {
  background: rgba(201, 162, 39, 0.12);
  border-color: var(--gold-2);
}
.mk-more > summary svg {
  transition: transform var(--fast);
}
.mk-more[open] > summary {
  border-end-start-radius: 0;
  border-end-end-radius: 0;
}
.mk-more[open] > summary svg {
  transform: rotate(180deg);
}
.mk-more .tablewrap {
  border-top: 0;
}
.mk-note {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 28px;
  margin-top: 14px;
  color: var(--muted);
  font-size: 15px;
}
.mk-note b {
  color: var(--ivory);
  font-weight: 600;
}
@media (max-width: 640px) {
  /* بطاقةُ الصفّ على الهاتف: اسمُ الأداة على عرض البطاقة كلِّه، والأرقامُ الثلاثة تحته */
  .mk-specs tbody td:nth-child(2) {
    grid-column: 1 / -1;
  }
  .mk-specs--more {
    border-radius: var(--radius);
  }
  .mk-more[open] > summary {
    border-radius: 14px;
  }
  .mk-more .tablewrap {
    margin-top: 10px;
    border-top: 1px solid var(--line);
  }
}

/* ---------- جدولُ مقارنة الأسواق: اسمُ السوق بأيقونته ---------- */
.mk-cmp__m {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ivory);
  font-weight: 700;
  transition: color var(--fast);
}
.mk-cmp__m svg {
  color: var(--gold-2);
  flex: none;
}
.mk-cmp__m:hover {
  color: var(--gold-2);
}

/* ---------- بطاقاتُ الأسواق في الفهرس (02-markets): العنصرُ كبيرٌ وبارتفاعٍ واحد، والرابطُ زرٌّ بإطارٍ ذهبي ---------- */
.mk-market .ik-card__img {
  height: 250px;
  min-height: 0;
  margin: -4px 0 8px;
}
.mk-market .ik-card__img img {
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
}
.mk-market .ik-card__title {
  font-size: 26px;
}
.mk-market__meta {
  justify-content: center;
  font-size: 15px;
}
.mk-market__meta b {
  font-size: 20px;
}
.mk-market .ik-card__go {
  justify-content: center;
  min-height: 46px;
  padding: 0 24px;
  border-radius: var(--radius-btn);
  border: 1px solid var(--gline);
  background: rgba(201, 162, 39, 0.05);
  transition: background var(--fast), border-color var(--fast);
}
.mk-market:hover .ik-card__go {
  background: rgba(201, 162, 39, 0.14);
  border-color: var(--gold-2);
}
@media (max-width: 640px) {
  .mk-market .ik-card__img {
    height: 200px;
  }
}

/* ---------- لوحُ السعر الحيّ (21-instrument): شراءٌ أخضر وبيعٌ أحمر كبيران، والتغيّرُ في الرأس، والزرّان تحته ---------- */
.mk-iq {
  gap: 16px;
  padding: 22px;
  margin-top: 6px;
  max-width: 560px;
  background: linear-gradient(160deg, rgba(27, 30, 32, 0.96), rgba(12, 14, 16, 0.94));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.mk-iq .iq__head {
  flex-wrap: wrap;
  gap: 6px 12px;
}
.mk-iq .iq__sym {
  font-size: 20px;
  letter-spacing: 0.02em;
  color: var(--ivory);
}
.mk-iq .iq__name {
  font-size: 15px;
}
.mk-iq .iq__chg {
  margin-inline-start: auto;
  font-weight: 700;
  font-size: 15px;
}
.mk-iq .iq__chg small {
  font-weight: 400;
}
/* البيعُ يساراً والشراءُ يميناً بكل لغة (ترتيبُ منصّات التداول ومرجعُ 21-instrument) — الأرقامُ داخلَهما معزولةٌ بـ.num */
.mk-iq .iq__bs {
  direction: ltr;
}
.mk-iq .iq__px {
  min-height: 96px;
  align-content: center;
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 14px 30px rgba(0, 0, 0, 0.35);
}
.mk-iq .iq__px small {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.mk-iq .iq__px b {
  font-size: clamp(24px, 1.2vw + 16px, 32px);
  line-height: 1.2;
}
.mk-iq .iq__foot {
  display: block;
}
.mk-iq .iq__btns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.mk-iq .iq__btns .btn {
  width: 100%;
  padding-inline: 14px;
}
@media (max-width: 767px) {
  .mk-iq {
    max-width: none;
    margin-top: 0;
  }
}
@media (max-width: 420px) {
  .mk-iq .iq__btns {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- مواصفاتُ العقد: سطورٌ تسمية ← قيمة داخل لوحٍ زجاجي، على عمودين على الحاسوب (21–23) ---------- */
.mk-spec-wrap {
  overflow: hidden;
  padding: 6px 0;
}
.kv.mk-spec {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
}
.mk-spec .kv__i {
  grid-template-columns: minmax(170px, 40%) minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  min-height: 58px;
}
.mk-spec .kv__i:nth-child(odd) {
  border-inline-end: 1px solid var(--line-soft);
}
.mk-spec .kv__i:nth-child(n + 3) {
  border-top: 1px solid var(--line-soft);
}
.mk-spec .kv__i dt {
  display: flex;
  align-items: center;
  padding: 12px 22px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 600;
  background: linear-gradient(90deg, rgba(201, 162, 39, 0.13), rgba(201, 162, 39, 0.03));
}
/* التظليلُ أقوى عند حافة اللوح (جهةِ البداية) ويخفت نحو القيمة */
html[dir='rtl'] .mk-spec .kv__i dt {
  background: linear-gradient(270deg, rgba(201, 162, 39, 0.13), rgba(201, 162, 39, 0.03));
}
.mk-spec .kv__i dd {
  display: flex;
  align-items: center;
  padding: 12px 22px;
  color: var(--ivory);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
}
@media (max-width: 1023px) {
  .kv.mk-spec {
    grid-template-columns: minmax(0, 1fr);
  }
  .mk-spec .kv__i:nth-child(odd) {
    border-inline-end: 0;
  }
  .mk-spec .kv__i:nth-child(n + 2) {
    border-top: 1px solid var(--line-soft);
  }
}
@media (max-width: 640px) {
  .mk-spec .kv__i {
    grid-template-columns: minmax(120px, 42%) minmax(0, 1fr);
    min-height: 52px;
  }
  .mk-spec .kv__i dt,
  .mk-spec .kv__i dd {
    padding: 10px 16px;
  }
  .mk-spec .kv__i dt {
    font-size: 14px;
  }
  .mk-spec .kv__i dd {
    font-size: 16px;
  }
}

/* ---------- قيمةُ الحركة والهامش: لوحٌ زجاجي بحاسبتين (21-instrument: «حاسبة الهامش»، «حاسبة قيمة النقطة») ---------- */
.mk-pip {
  display: grid;
  gap: 14px;
}
.mk-pip__h {
  font-size: clamp(22px, 0.6vw + 18px, 28px);
}
.mk-pip p {
  color: var(--muted);
}
.mk-pip__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  margin-top: 6px;
}
.mk-pip__links .btn svg {
  color: var(--gold-2);
}
.mk-pip__learn {
  color: var(--gold-2);
  font-weight: 700;
  border-bottom: 1px solid var(--gline);
}
.mk-pip__learn:hover {
  border-bottom-color: var(--gold-2);
}
@media (max-width: 640px) {
  .mk-pip__links .btn {
    width: 100%;
  }
}

/* ---------- أدواتٌ قريبة: شعارٌ ورمزٌ واسمٌ وسهم، ثلاثٌ في الصفّ ---------- */
.mk-near {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.mk-near__a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--glass);
  border: 1px solid var(--line);
  transition: border-color var(--fast), transform var(--fast);
}
.mk-near__a:hover {
  border-color: var(--gline);
  transform: translateY(-2px);
}
.mk-near__c {
  color: var(--ivory);
  font-weight: 800;
  font-size: 15px;
}
.mk-near__n {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--muted);
  font-size: 14px;
}
.mk-near__arr {
  color: var(--gold-2);
  flex: none;
}
@media (max-width: 1023px) {
  .mk-near {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .mk-near {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- css/52-trading.css ---- */
/* ============================================================================
   52-trading.css — صفحاتُ التداول: الحسابات (06)، شروط التداول (07)، المنصّة (08)، التطبيق (10). البادئة tr-.
   [المالك 2026-11-09، حزمةُ المرجع] هنا تخطيطُ أقسام هذه الصفحات وسلوكُها على الهاتف وحده؛ المكوّناتُ المشتركة (البطل، البطاقات،
   الجداول، الأسئلة، الأزرار، الزجاج) في site.css ولا تُعاد صياغتُها. خصائصُ الاتجاه منطقية: العربيةُ المرجع واللغاتُ اليسارية تتبع.
   ============================================================================ */

/* ---------- مربّعُ أيقونةٍ ذهبي تشترك فيه الأقسام (الحجمُ في صنف كل موضع) ---------- */
.tr-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  border-radius: 14px;
  border: 1px solid var(--gline);
  background: linear-gradient(160deg, rgba(201, 162, 39, 0.18), rgba(201, 162, 39, 0.04));
  color: var(--gold-2);
}

/* ========== الحسابات (06): أربعُ بطاقاتٍ تركب أسفلَ البطل وتقود إلى جدول المقارنة ========== */
.tr-tiles-sec {
  position: relative;
  z-index: 3;
  margin-top: -40px;
}
.tr-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.tr-tile {
  transition: transform var(--fast) var(--ease), border-color var(--fast);
}
.tr-tile:hover {
  transform: translateY(-3px);
  border-color: var(--gline);
}
.tr-tile__link {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 8px;
  padding: 26px 20px 22px;
  color: var(--ivory);
}
.tr-tile__name {
  font-size: 24px;
  font-weight: 800;
  line-height: 1.2;
}
.tr-tile__code {
  color: var(--dim);
  font-size: 13px;
  letter-spacing: 0.04em;
}
.tr-tile__min {
  display: grid;
  gap: 2px;
  width: 100%;
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  color: var(--gold-2);
  font-size: 20px;
  font-weight: 800;
}
.tr-tile__min small {
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
}
/* جدولُ المقارنة: خمسةُ أعمدة بعرضٍ مريح على الحاسوب، وصفُّ تسجيلٍ أخير كما في المرجع */
.tr-cmp table {
  min-width: 760px;
}
.tr-cmp thead .th__name {
  display: block;
  font-size: 17px;
}
.tr-cmp thead .th__code {
  color: rgba(26, 20, 7, 0.72);
}
.tr-cmp__cta td {
  padding-top: 12px;
  padding-bottom: 20px;
}
.tr-cmp__cta .btn {
  min-width: 140px;
  min-height: 44px;
}
.tr-panels {
  display: grid;
  gap: 22px;
}
.tr-panels .ik-feature__img img {
  width: min(100%, 380px);
}
.tr-panels .ik-card__title {
  font-size: 24px;
}
@media (max-width: 1023px) {
  .tr-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
}
@media (max-width: 767px) {
  .tr-tiles-sec {
    margin-top: -16px;
  }
  .tr-tile__link {
    padding: 20px 14px 16px;
    gap: 6px;
  }
  .tr-tile__name {
    font-size: 20px;
  }
  .tr-tile__min {
    font-size: 18px;
  }
  /* الهاتف: الجدولُ يبقى جدولاً يُمرَّر أفقياً داخل إطاره، وعمودُ المواصفات ثابتٌ فلا يضيع معنى الرقم */
  .tr-cmp table {
    min-width: 640px;
  }
  .tr-cmp th,
  .tr-cmp td {
    padding: 12px 14px;
    font-size: 15px;
  }
  .tr-cmp tbody th,
  .tr-cmp thead td {
    position: sticky;
    inset-inline-start: 0;
    z-index: 1;
  }
  .tr-cmp tbody th {
    min-width: 140px;
    max-width: 170px;
    background: var(--surface);
    border-inline-end: 1px solid var(--line);
    font-size: 14px;
  }
  .tr-cmp__cta .btn {
    min-width: 0;
  }
}

/* ========== شروط التداول (07): فهرسٌ حبّاتٍ، ولوحٌ زجاجي لكل شرط (نصٌّ في البداية، جدولٌ في الجهة الأخرى) ========== */
.tr-toc {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 30px;
}
.tr-toc__l {
  margin-inline-end: 8px;
  color: var(--gold-2);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.tr-toc__a {
  min-height: 44px;
  color: var(--muted);
  font-weight: 600;
  transition: color var(--fast), border-color var(--fast), background var(--fast);
}
.tr-toc__a svg {
  color: var(--gold-2);
}
.tr-toc__a:hover {
  color: var(--ivory);
  border-color: var(--gold-2);
  background: rgba(201, 162, 39, 0.12);
}
.tr-conds {
  display: grid;
  gap: 22px;
}
.tr-cond {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: 24px 44px;
  padding: 36px;
}
.tr-cond--solo {
  grid-template-columns: minmax(0, 1fr);
}
.tr-cond__body {
  display: grid;
  align-content: start;
  gap: 12px;
}
.tr-cond--solo .tr-cond__body {
  max-width: 920px;
}
.tr-cond__body p,
.tr-cond__after p {
  color: var(--muted);
  line-height: 1.8;
}
.tr-cond__ico {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  margin-bottom: 4px;
}
.tr-cond__h {
  font-size: clamp(24px, 0.8vw + 18px, 32px);
  font-weight: 800;
  line-height: 1.25;
  color: var(--ivory);
}
.tr-cond__side {
  min-width: 0;
}
.tr-cond__side .tablewrap {
  box-shadow: none;
  border-color: var(--gline-soft);
}
.tr-cond__side .tablewrap table {
  width: 100%;
  min-width: 0;
}
/* رؤوسُ الجدول داخل اللوح تلتفّ (العمودُ أضيق من الصفحة) فلا يُقصّ عمودُ العمولة */
.tr-cond__side .tablewrap thead th {
  white-space: normal;
  line-height: 1.35;
}
@media (min-width: 641px) {
  /* فوق عرض البطاقات وحده: على الهاتف تحكم قاعدةُ البطاقات (tablewrap--cards) حشوةَ الخلايا */
  .tr-cond__side .tablewrap th,
  .tr-cond__side .tablewrap td {
    padding: 12px 16px;
  }
}
.tr-cond__side--art {
  display: flex;
  justify-content: center;
}
.tr-cond__side--art img {
  width: min(56%, 250px);
  height: auto;
  filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 30px rgba(201, 162, 39, 0.18));
}
.tr-cond__after {
  grid-column: 1 / -1;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
}
/* أنواعُ الأوامر: بلاطاتٌ بأيقونة، اسمُ الأمر (strong من النصّ) سطراً وشرحُه تحته */
.tr-orders {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.tr-order {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.35);
}
.tr-order__i {
  width: 42px;
  height: 42px;
  border-radius: 12px;
}
.tr-order__t {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
}
.tr-order__t strong {
  display: block;
  color: var(--ivory);
  font-size: 16px;
}
@media (max-width: 1023px) {
  .tr-cond {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    padding: 26px;
  }
  .tr-cond--solo .tr-cond__body {
    max-width: none;
  }
}
@media (max-width: 640px) {
  .tr-cond {
    padding: 20px;
  }
  .tr-orders {
    grid-template-columns: minmax(0, 1fr);
  }
  .tr-toc__l {
    width: 100%;
    margin: 0;
  }
}

/* ========== المنصّة (08): اللقطةُ الحقيقية بجانب العنوان، أرقامُها تحتهما، وثلاثةُ أعمدةِ ميزات ========== */
.tr-phero {
  display: grid;
  align-content: center;
  gap: 40px;
}
.tr-phero .ik-hero__grid {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 48px;
}
html[dir='ltr'] .tr-phero .ik-hero__grid {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}
.tr-phero__shot {
  min-height: 0;
}
.tr-phero__shot .ik-shot {
  width: 100%;
}
.tr-phero__shot img {
  width: 100%;
  filter: none;
  animation: none;
}
.tr-phero__shot::after {
  display: none;
}
.tr-phero__stats {
  position: relative;
  z-index: 2;
}
.tr-groups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 22px;
}
.tr-group {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 26px 26px 14px;
}
.tr-group__head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--gline-soft);
}
.tr-group__ico {
  width: 48px;
  height: 48px;
}
.tr-group__h {
  font-size: 24px;
  font-weight: 800;
  color: var(--ivory);
}
.tr-group__lead {
  color: var(--muted);
}
.tr-group__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.tr-frow {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--line-soft);
}
.tr-frow:first-child {
  border-top: 0;
}
.tr-frow__ico {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(201, 162, 39, 0.08);
}
.tr-frow__t {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ivory);
}
.tr-frow__d {
  margin-top: 4px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
}
@media (max-width: 1023px) {
  .tr-phero {
    gap: 28px;
  }
  .tr-phero .ik-hero__grid,
  html[dir='ltr'] .tr-phero .ik-hero__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .tr-groups {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ========== التطبيق (10): شاراتُ الأجهزة تحت البطل، المزايا صفّاً، خطواتٌ بلاطاتٍ لكل جهاز، و«جاهز» باللقطة ========== */
.tr-app__meta {
  display: grid;
  gap: 10px;
  margin-top: 6px;
}
.tr-app__tag {
  color: var(--ivory);
  font-size: 17px;
  font-weight: 700;
}
.tr-devices-sec {
  position: relative;
  z-index: 3;
  margin-top: -28px;
}
.tr-devices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 8px;
  border-radius: 18px;
  background: var(--glass);
  border: 1px solid var(--line);
  box-shadow: var(--glass-edge);
}
.tr-badge {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  padding: 10px 18px;
  border-radius: 12px;
  border: 1px solid transparent;
  color: var(--ivory);
  transition: background var(--fast), border-color var(--fast), color var(--fast);
}
.tr-badge:hover {
  background: rgba(201, 162, 39, 0.08);
  border-color: var(--gline);
}
.tr-badge .abadge__ico {
  flex: none;
  color: var(--gold-2);
}
.tr-badge .abadge__t {
  display: grid;
  line-height: 1.25;
}
.tr-badge .abadge__t small {
  color: var(--muted);
  font-size: 12px;
}
.tr-badge .abadge__t b {
  font-size: 17px;
  font-weight: 800;
}
/* «هذا الجهاز»: مخفيةٌ حتى يَسِم site.js الجهازَ المطابق بـis-mine */
.tr-badge .abadge__mine,
.tr-dev__mine {
  display: none;
  align-items: center;
  margin-inline-start: auto;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--btn-gold);
  color: var(--on-gold);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
.tr-badge.is-mine {
  background: var(--btn-gold);
  border-color: rgba(255, 236, 170, 0.6);
  color: var(--on-gold);
}
.tr-badge.is-mine .abadge__ico,
.tr-badge.is-mine .abadge__t small {
  color: var(--on-gold);
}
.tr-badge.is-mine .abadge__mine,
.tr-dev.is-mine .tr-dev__mine {
  display: inline-flex;
}
.tr-badge.is-mine .abadge__mine {
  background: rgba(26, 20, 7, 0.16);
}
.tr-benefits {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.tr-benefit {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 12px;
  padding: 18px 22px;
  border-inline-start: 1px solid var(--line);
}
.tr-benefit:first-child {
  border-inline-start: 0;
}
.tr-benefit__ico {
  width: 60px;
  height: 60px;
  border-radius: 999px;
}
.tr-benefit__t {
  font-size: 19px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--ivory);
}
.tr-benefit__d {
  margin-top: 6px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
}
.tr-devs {
  display: grid;
  gap: 22px;
}
.tr-dev__panel {
  display: grid;
  gap: 26px;
  padding: 30px;
}
.tr-dev__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
}
.tr-dev__ico {
  width: 60px;
  height: 60px;
  border-radius: 18px;
}
.tr-dev__copy {
  display: grid;
  gap: 4px;
}
.tr-dev__h {
  font-size: clamp(24px, 0.8vw + 18px, 30px);
  font-weight: 800;
  line-height: 1.25;
  color: var(--ivory);
}
.tr-dev__lead {
  color: var(--muted);
}
.tr-dev__mine {
  align-self: start;
}
.tr-steps {
  display: grid;
  grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr));
  gap: 18px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.tr-step {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  text-align: center;
  gap: 10px;
  padding: 26px 18px 20px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.35);
}
.tr-step__n {
  position: absolute;
  top: 10px;
  inset-inline-start: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--btn-gold);
  color: var(--on-gold);
  font-size: 13px;
  font-weight: 800;
}
.tr-step__ico {
  width: 60px;
  height: 60px;
  border-radius: 18px;
}
/* [المالك 2026-11-09 ليلاً] لقطةُ الخطوة فوق البلاطة: الهاتفُ 3:4 والحاسوبُ 16:10؛ الأيقونةُ تبقى بلا اللقطة وحدها */
.tr-step__shot {
  width: 100%;
  margin: 0 0 4px;
  aspect-ratio: 3 / 4;
  border-radius: 12px;
  overflow: hidden;
  background: #0b0d10;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}
.tr-step__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
[data-device='desktop'] .tr-step__shot {
  aspect-ratio: 16 / 10;
}
.tr-step__shot + .tr-step__n {
  top: 10px;
}
.tr-step__shot ~ .tr-step__ico {
  display: none;
}
.tr-step__t {
  font-size: 17px;
  font-weight: 800;
  line-height: 1.35;
  color: var(--ivory);
}
.tr-step__d {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}
/* سهمٌ ذهبي بين البلاطات في اتجاه القراءة (يساراً بالعربية، يميناً في اللغات اليسارية)؛ على الهاتف إلى الأسفل */
.tr-step + .tr-step::before {
  content: '';
  position: absolute;
  top: 50%;
  inset-inline-start: -15px;
  width: 11px;
  height: 11px;
  border-inline-end: 2px solid var(--gold-2);
  border-bottom: 2px solid var(--gold-2);
  transform: translateY(-50%) rotate(var(--tr-chev, 45deg));
}
html[dir='ltr'] .tr-step + .tr-step::before {
  --tr-chev: -45deg;
}
.tr-done {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: 36px;
  padding: 36px;
}
.tr-done__body {
  display: grid;
  justify-items: start;
  gap: 14px;
}
.tr-done__note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.35);
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
}
.tr-done__note svg {
  flex: none;
  margin-top: 3px;
  color: var(--gold-2);
}
.tr-done .ik-shot {
  box-shadow: 0 0 0 1px rgba(226, 194, 95, 0.5), 0 24px 60px rgba(0, 0, 0, 0.5);
}
@media (max-width: 1023px) {
  .tr-devices-sec {
    margin-top: -20px;
  }
  .tr-benefits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
  .tr-benefit {
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--glass);
  }
  .tr-dev__panel {
    padding: 24px;
  }
  .tr-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .tr-step + .tr-step::before {
    display: none;
  }
  .tr-done {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    padding: 24px;
  }
}
@media (max-width: 640px) {
  .tr-devices {
    grid-template-columns: minmax(0, 1fr);
  }
  .tr-badge {
    min-height: 56px;
  }
  .tr-benefits {
    grid-template-columns: minmax(0, 1fr);
  }
  .tr-benefit {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    justify-items: start;
    text-align: start;
  }
  .tr-benefit__ico {
    width: 52px;
    height: 52px;
  }
  .tr-dev__panel {
    padding: 20px;
  }
  .tr-dev__head {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .tr-dev__mine {
    grid-column: 1 / -1;
    justify-self: start;
  }
  .tr-steps {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }
  .tr-step + .tr-step::before {
    display: block;
    top: -17px;
    inset-inline: 0;
    margin-inline: auto;
    transform: rotate(calc(-1 * var(--tr-chev, 45deg)));
  }
}

/* ---------- بطلُ «حمّل التطبيق» [المالك 2026-11-09 ليلاً]: الجهازان الحقيقيان يأخذان العمودَ الأوسع، بلا طفوٍ ولا تصغير ---------- */
.tr-app-hero .ik-hero__grid {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 24px;
}
html[dir='ltr'] .tr-app-hero .ik-hero__grid {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}
.tr-app-hero .ik-hero__art {
  min-height: 0;
}
.tr-app-hero .ik-hero__art img {
  width: 100%;
  max-width: none;
  animation: none;
  filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.55));
}
.tr-app-hero .ik-hero__art::after {
  display: none;
}
@media (max-width: 1023px) {
  .tr-app-hero .ik-hero__art img {
    width: min(100%, 720px);
  }
}

/* ---- css/53-company.css ---- */
/* ============================================================
   53-company.css — صفحاتُ الشركة على تصميم حزمة المرجع: 09 الإيداع والسحب، 11 من نحن، 12 تواصل معنا، 13 الأسئلة.
   البادئة co-. المكوّناتُ المشتركة (البطل، الألواح الزجاجية، البطاقات، الأسئلة، الختام) من site.css؛ هنا تخطيطُ أقسام هذه
   الصفحات وسلوكُها على الهاتف وحالاتُ المرور. خصائصُ منطقية (inline-start/end) فالعربيةُ المرجع واللاتينيةُ تنقلب معها.
   ============================================================ */

/* ---------- مشترك: قسمٌ بلا حشوةٍ علوية (الإيقاعُ 72px بين الكتل كما في المرجع) ---------- */
.co-sec {
  position: relative;
  padding-block: 0 72px;
}
/* عنوانُ القسم يلتفّ على الهاتف بدل أن يتجاوز الشاشة: `.ik-head__row .h2 { flex: none }` المشترك يمنع انكماشه، فكان
   «Questions about deposits and withdrawals» يمدّ الصفحةَ أفقياً عند 390px (قيسَ 2026-11-09)؛ الخطُّ الذهبي يأخذ ما يبقى */
.co-sec .ik-head__row .h2,
.co-sec .ik-head__row .ik-h2,
.co-group .ik-head__row .h2,
.co-group .ik-head__row .ik-h2 {
  flex: 0 1 auto;
  min-width: 0;
}
/* مجسّمُ البطل بحجمٍ يناسب نسبته: الشعارُ عمودي فيصغر، والدعمُ أعرض قليلاً */
@media (min-width: 1024px) {
  .co-hero--about .ik-hero__art img {
    width: min(100%, 420px);
  }
  .co-hero--contact .ik-hero__art img,
  .co-hero--faq .ik-hero__art img {
    width: min(100%, 380px);
  }
}

/* ---------- 11 من نحن ---------- */
/* صندوقُ الأرقام يركب على ذيل البطل (المرجع) */
.co-statsbar {
  position: relative;
  z-index: 3;
  margin-top: -28px;
}
.co-statsbar .ik-stat {
  padding: 20px 12px;
}
.co-about {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}
.co-about__main {
  display: grid;
  gap: 32px;
}
.co-about__main .ik-cards {
  gap: 16px;
}
.co-market {
  padding: 24px 18px 20px;
  gap: 8px;
}
.co-market .ik-card__title {
  font-size: 19px;
}
.co-market__meta {
  justify-content: center;
  gap: 6px;
}
.co-facts {
  display: grid;
  gap: 16px;
  align-content: start;
  padding: 28px;
  position: sticky;
  top: calc(var(--header-h) + 24px);
}
.co-facts__h {
  font-size: 22px;
}
.co-facts .ticks {
  gap: 12px;
}
.co-facts .ticks li {
  color: var(--ivory);
  font-size: 16px;
}
/* لوحُ «نموذج التنفيذ»: العنوانُ في عمود البداية والفقراتُ في العمود الآخر */
.co-panel {
  padding: 40px 44px;
}
.co-panel .prose__sec {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: 48px;
  align-items: start;
}
.co-panel .prose__h {
  grid-column: 1;
  grid-row: 1;
  font-size: clamp(26px, 1vw + 18px, 36px);
}
.co-panel .prose__sec > p {
  grid-column: 2;
}
/* الالتزامات: صفُّ أيقوناتٍ بفواصل رأسية رفيعة */
.co-principles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.co-principle {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 12px;
  padding: 8px 32px;
  border-inline-start: 1px solid var(--line);
}
.co-principle:first-child {
  border-inline-start: 0;
}
.co-principle .ik-card__ico {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  margin-bottom: 4px;
}
.co-principle__h {
  font-size: 22px;
}
.co-principle p {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.75;
  max-width: 36ch;
}
/* شريطُ التواصل: نصٌّ في جهة البداية وقناتان في الأخرى */
.co-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px 40px;
  padding: 28px 36px;
}
.co-strip__text {
  display: grid;
  gap: 8px;
}
.co-strip__h {
  font-size: clamp(24px, 0.8vw + 18px, 32px);
}
.co-strip__text p {
  color: var(--muted);
}
.co-strip__tiles {
  display: flex;
}
.co-tile {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 8px;
  min-width: 220px;
  min-height: 44px;
  padding: 12px 28px;
  border-inline-start: 1px solid var(--line);
  color: var(--ivory);
  transition: color var(--fast);
}
.co-tile:first-child {
  border-inline-start: 0;
}
.co-tile__i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  border: 1px solid var(--gline);
  background: linear-gradient(160deg, rgba(201, 162, 39, 0.16), rgba(201, 162, 39, 0.04));
  color: var(--gold-2);
  transition: background var(--fast), border-color var(--fast);
}
.co-tile__v {
  font-size: 16px;
  font-weight: 800;
  text-align: center;
  overflow-wrap: anywhere;
}
.co-tile:hover {
  color: var(--gold-2);
}
.co-tile:hover .co-tile__i {
  border-color: var(--gold-2);
  background: rgba(201, 162, 39, 0.16);
}

/* ---------- 09 الإيداع والسحب ---------- */
.co-methods {
  display: grid;
  gap: 24px;
  margin-top: 6px;
}
.co-method {
  display: grid;
  gap: 12px;
}
.co-method__h {
  display: flex;
}
.co-method__h .ik-chip {
  min-height: 42px;
  padding: 0 18px;
  font-size: 16px;
  color: var(--gold-2);
  background: linear-gradient(180deg, rgba(201, 162, 39, 0.14), rgba(201, 162, 39, 0.04));
}
.co-method__d {
  color: var(--ivory);
  font-size: 17px;
}
.co-flows {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}
.co-flow {
  display: grid;
  gap: 22px;
  align-content: start;
  padding: 30px;
}
.co-flow__h {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 26px;
}
.co-steps {
  display: grid;
  gap: 14px;
}
.co-step {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(17, 20, 22, 0.6);
}
/* خطٌّ ذهبي قصير يصل أيقونةَ كل خطوةٍ بالتي قبلها (كالمرجع) */
.co-step + .co-step::before {
  content: '';
  position: absolute;
  top: -15px;
  height: 15px;
  inset-inline-start: 44px;
  width: 1px;
  background: linear-gradient(180deg, var(--gline), rgba(226, 194, 95, 0.6));
}
.co-step__ico {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  border: 1px solid var(--gline);
  background: linear-gradient(160deg, rgba(201, 162, 39, 0.18), rgba(201, 162, 39, 0.04));
  color: var(--gold-2);
}
.co-step__n {
  position: absolute;
  top: -8px;
  inset-inline-end: -8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--btn-gold);
  color: var(--on-gold);
  font-style: normal;
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}
.co-step p {
  color: var(--ivory);
  font-size: 16px;
  line-height: 1.65;
}
.co-rule .ik-card__text {
  max-width: 32ch;
}

/* ---------- 12 تواصل معنا ---------- */
.co-channels .ik-card {
  padding: 34px 28px 28px;
  gap: 14px;
}
.co-channel__ico {
  width: 72px;
  height: 72px;
  border-radius: 20px;
  margin-bottom: 6px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(245, 241, 232, 0.08);
}
.co-channel__h {
  font-size: 24px;
}
.co-channel .ik-card__text {
  max-width: 34ch;
}
.co-channel__act {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: auto;
  padding-top: 12px;
}
.co-channel__act .btn {
  min-width: 200px;
  max-width: 100%;
}
/* قيمةُ البريد: حبّةٌ ذهبية تبدو قابلةً للنسخ (رابطُ mailto) */
.co-val {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  min-height: 48px;
  padding: 0 18px;
  border-radius: var(--radius-btn);
  border: 1px solid var(--gline);
  background: linear-gradient(180deg, rgba(201, 162, 39, 0.14), rgba(201, 162, 39, 0.04));
  color: var(--gold-2);
  font-weight: 800;
  font-size: 15px;
  transition: border-color var(--fast), background var(--fast), transform var(--fast) var(--ease);
}
.co-val span {
  overflow-wrap: anywhere;
}
.co-val svg {
  flex: none;
  opacity: 0.85;
}
.co-val:hover {
  border-color: var(--gold-2);
  background: rgba(201, 162, 39, 0.16);
  transform: translateY(-1px);
}
/* قائمةُ «قبل أن تراسلنا»: علامةُ صحٍّ في مربّعٍ ذهبي وفواصلُ رفيعة */
.co-checks {
  gap: 0;
  margin-top: 4px;
}
.co-checks li {
  align-items: center;
  gap: 14px;
  padding-block: 12px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ivory);
  font-size: 17px;
}
.co-checks li:last-child {
  border-bottom: 0;
}
.co-checks li svg {
  width: 28px;
  height: 28px;
  padding: 5px;
  margin-top: 0;
  border-radius: 8px;
  border: 1px solid var(--gline);
  background: rgba(201, 162, 39, 0.08);
}
.co-quick .ik-card {
  padding: 30px 24px 24px;
}
.co-quick .ik-card__title {
  font-size: 21px;
}
.co-quick .ik-card__go {
  padding-top: 4px;
}

/* ---------- 13 الأسئلة ---------- */
/* شريطُ المجموعات: لاصقٌ تحت الترويسة، يتمرّر أفقياً على الهاتف داخل نفسه فلا تتجاوز الصفحةُ عرضها */
.co-tabs {
  position: sticky;
  top: var(--header-h);
  z-index: 20;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line-soft);
}
.co-tabs__list {
  display: flex;
  gap: 6px;
  padding-block: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.co-tabs__list::-webkit-scrollbar {
  display: none;
}
.co-tabs__list li {
  position: relative;
  flex: none;
  scroll-snap-align: start;
}
/* فاصلٌ رفيع بين الحبّات (المرجع) */
.co-tabs__list li + li::before {
  content: '';
  position: absolute;
  inset-inline-start: -3px;
  top: 50%;
  height: 18px;
  width: 1px;
  transform: translateY(-50%);
  background: var(--line);
}
.co-tabs .wrap {
  position: relative;
}
.co-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  color: var(--muted);
  font-weight: 700;
  font-size: 15px;
  white-space: nowrap;
  transition: color var(--fast), background var(--fast);
}
.co-tab::after {
  content: '';
  position: absolute;
  inset-inline: 18px;
  bottom: 4px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-2), transparent);
  opacity: 0;
  transition: opacity var(--fast);
}
.co-tab:hover {
  color: var(--ivory);
  background: rgba(245, 241, 232, 0.05);
}
.co-tab:hover::after {
  opacity: 0.6;
}
/* المجموعةُ المقصودة تُضيء حبّتَها (تحسينٌ تدريجي بـ:has؛ معرّفاتُ المجموعات ثابتةٌ في ملفات اللغة الست) */
main:has(#accounts:target) .co-tab[href='#accounts'],
main:has(#funding:target) .co-tab[href='#funding'],
main:has(#trading:target) .co-tab[href='#trading'],
main:has(#platform:target) .co-tab[href='#platform'] {
  color: var(--gold-2);
}
main:has(#accounts:target) .co-tab[href='#accounts']::after,
main:has(#funding:target) .co-tab[href='#funding']::after,
main:has(#trading:target) .co-tab[href='#trading']::after,
main:has(#platform:target) .co-tab[href='#platform']::after {
  opacity: 1;
}
.co-group {
  scroll-margin-top: calc(var(--header-h) + 84px);
}
.co-group + .co-group {
  margin-top: 56px;
}
.co-group .ik-head {
  margin-bottom: 22px;
}
.co-group .faq summary {
  font-size: 18px;
  min-height: 64px;
}

/* ---------- الهاتف واللوح ---------- */
@media (max-width: 1023px) {
  .co-about,
  .co-flows,
  .co-principles,
  .co-strip {
    grid-template-columns: 1fr;
  }
  .co-facts {
    position: static;
  }
  .co-principles {
    gap: 24px;
  }
  .co-principle {
    justify-items: start;
    text-align: start;
    padding: 24px 0 0;
    border-inline-start: 0;
    border-top: 1px solid var(--line);
  }
  .co-principle:first-child {
    border-top: 0;
    padding-top: 0;
  }
  .co-principle p {
    max-width: none;
  }
  .co-strip__tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .co-tile {
    min-width: 0;
    padding: 12px 16px;
  }
  .co-panel .prose__sec {
    grid-template-columns: 1fr;
  }
  .co-panel .prose__h {
    grid-row: auto;
  }
  .co-panel .prose__sec > p {
    grid-column: 1;
  }
}
@media (max-width: 767px) {
  .co-sec {
    padding-block: 0 52px;
  }
  /* على الهاتف يفقد صندوقُ الأرقام لوحَه (site.css) فيقف تحت البطل بلا تراكب */
  .co-statsbar {
    margin-top: 0;
  }
  .co-panel {
    padding: 24px 22px;
  }
  .co-strip {
    padding: 24px 20px;
  }
  .co-strip__tiles {
    grid-template-columns: 1fr;
  }
  .co-tile {
    border-inline-start: 0;
    border-top: 1px solid var(--line);
  }
  .co-tile:first-child {
    border-top: 0;
  }
  .co-flow {
    padding: 22px;
  }
  .co-flow__h {
    font-size: 22px;
  }
  .co-step {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 12px;
    padding: 12px 14px;
  }
  .co-step__ico {
    width: 48px;
    height: 48px;
  }
  .co-step + .co-step::before {
    inset-inline-start: 38px;
  }
  .co-channels .ik-card {
    padding: 28px 22px 22px;
  }
  .co-checks li {
    font-size: 16px;
  }
  .co-tabs__list {
    padding-block: 8px;
  }
  /* تلاشٍ على حافّة النهاية يدلّ على أن الشريط يتمرّر أفقياً */
  .co-tabs .wrap::after {
    content: '';
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    width: calc(var(--pad) + 44px);
    pointer-events: none;
  }
  html[dir='rtl'] .co-tabs .wrap::after {
    background: linear-gradient(to right, rgba(0, 0, 0, 0.95) var(--pad), transparent);
  }
  html[dir='ltr'] .co-tabs .wrap::after {
    background: linear-gradient(to left, rgba(0, 0, 0, 0.95) var(--pad), transparent);
  }
  .co-group + .co-group {
    margin-top: 44px;
  }
  .co-group .faq summary {
    font-size: 16px;
    min-height: 56px;
  }
}
@media (max-width: 640px) {
  /* بطاقاتُ الأسواق الثلاث تبقى صفاً واحداً مضغوطاً على الهاتف */
  .co-about__main .ik-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }
  .co-market {
    padding: 16px 8px 14px;
  }
  .co-market .ik-card__ico {
    width: 44px;
    height: 44px;
  }
  .co-market .ik-card__title {
    font-size: 15px;
  }
  .co-market__meta {
    font-size: 13px;
  }
}

/* ---- css/54-docs.css ---- */
/* ============================================================
   54-docs — صفحاتُ الوثائق والأدوات: الوثائقُ القانونية (24، 25)، «تعلّم» والمقال (14، 15)، الحاسباتُ وفهرسُها (16، 17–20).
   بادئةُ الأصناف dc-؛ المكوّناتُ المشتركة (ik-card، docwrap، toc، calc، faq، prose) من site.css ولا تُعاد هنا.
   ============================================================ */

/* ---------- بطلٌ على السطح الفحمي مع مجسّم: الحزمةُ تضع مجسّمَ الصفحة بجانب النصّ لا تحته (site.css يطوي شبكة البطل
   «الهادئ» إلى عمودٍ واحد) — والمجسّماتُ الطولية (الوثيقة، الحاسبة) تُحدّ بارتفاعها لا بعرضها ---------- */
.dc-hero.ik-hero--art {
  min-height: 520px;
}
.dc-hero.ik-hero--art .ik-hero__grid {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}
.dc-hero.ik-hero--art .ik-hero__copy {
  max-width: 640px;
}
.dc-hero .ik-hero__art img {
  width: auto;
  max-width: min(100%, 520px);
  max-height: 420px;
}
html[dir='ltr'] .dc-hero.ik-hero--art .ik-hero__grid {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}
html[dir='ltr'] .dc-hero.ik-hero--art .ik-hero__copy {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
}
html[dir='ltr'] .dc-hero.ik-hero--art .ik-hero__art {
  grid-column: 1;
  grid-row: 1;
}
@media (max-width: 1023px) {
  .dc-hero.ik-hero--art .ik-hero__grid,
  html[dir='ltr'] .dc-hero.ik-hero--art .ik-hero__grid {
    grid-template-columns: 1fr;
  }
  html[dir='ltr'] .dc-hero.ik-hero--art .ik-hero__copy,
  html[dir='ltr'] .dc-hero.ik-hero--art .ik-hero__art {
    grid-column: 1;
    grid-row: auto;
    justify-self: stretch;
  }
  .dc-hero .ik-hero__art img {
    max-width: min(70%, 380px);
    max-height: 300px;
  }
}

/* ---------- سهمٌ في حلقة ذهبية: مؤشّرُ «اقرأ» على البطاقات والأشرطة التي هي روابطُ كلُّها ---------- */
.dc-go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  margin-top: auto;
  border-radius: 999px;
  border: 1px solid var(--gline);
  background: rgba(201, 162, 39, 0.08);
  color: var(--gold-2);
  transition: background var(--fast) var(--ease), color var(--fast), border-color var(--fast), transform var(--fast) var(--ease);
}
.dc-go--lg {
  width: 52px;
  height: 52px;
}
a:hover .dc-go,
a:focus-visible .dc-go {
  background: var(--btn-gold);
  color: var(--on-gold);
  border-color: rgba(255, 236, 170, 0.6);
}
.ik-card:not(.ik-card--center) > .dc-go {
  align-self: flex-end;
}
.ik-card--center > .dc-go {
  align-self: center;
}

/* ---------- الوثائقُ القانونية: الفهرس (24) ---------- */
.dc-doccard {
  padding: 36px 32px 30px;
  gap: 14px;
}
.dc-doccard .ik-card__ico.dc-doccard__ico {
  width: 68px;
  height: 68px;
  border-radius: 20px;
  margin-bottom: 6px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(245, 241, 232, 0.08);
}
.dc-doccard__meta.ik-card__meta {
  display: block;
  margin: 0;
  color: var(--gold-2);
  font-weight: 700;
  font-size: 14px;
}
.dc-doccard__meta b,
.dc-doccard__meta time {
  color: var(--gold-2);
}
/* فاصلٌ رفيع بلمعةٍ ذهبية في وسطه فوق الوصف */
.dc-doccard__text.ik-card__text {
  position: relative;
  padding-top: 16px;
  margin-top: 2px;
  max-width: 44ch;
}
.dc-doccard__text::before {
  content: '';
  position: absolute;
  top: 0;
  inset-inline: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gline), transparent);
}
/* السهمُ في أسفل البطاقة دائماً فتتحاذى الأسهمُ في الصفّ مهما اختلف طولُ الوصف */
.dc-doccard > .dc-go {
  margin-top: auto;
}
.dc-doccard__text.ik-card__text {
  margin-bottom: 10px;
}
/* صفُّ وثيقةٍ أخرى أسفل كل وثيقة: أيقونةٌ وعنوانٌ وسهم */
.dc-rows {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
.dc-doccard--row {
  flex-direction: row;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
}
.dc-doccard--row .ik-card__ico {
  width: 48px;
  height: 48px;
}
.dc-doccard--row .ik-card__title {
  font-size: 17px;
  line-height: 1.3;
  flex: 1;
  text-wrap: pretty;
}
.dc-doccard--row > .dc-go {
  margin-top: 0;
  align-self: center;
  width: 40px;
  height: 40px;
}
.dc-related {
  display: grid;
  gap: 16px;
  margin-top: 12px;
}
.dc-related__h {
  display: flex;
  align-items: center;
  gap: 16px;
}
.dc-related__h::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--gline), transparent);
}

/* شريطُ الدعم: سمّاعةٌ في مربّع ذهبي، عنوانٌ ووصف، وسهم — والشريطُ كلُّه رابط */
.dc-band {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  padding: 28px 32px;
  color: var(--ivory);
  background: radial-gradient(320px 260px at 6% 50%, rgba(201, 162, 39, 0.22), transparent 70%), var(--glass);
  transition: transform var(--fast) var(--ease), border-color var(--fast);
}
html[dir='rtl'] .dc-band {
  background: radial-gradient(320px 260px at 94% 50%, rgba(201, 162, 39, 0.22), transparent 70%), var(--glass);
}
.dc-band:hover {
  transform: translateY(-2px);
  border-color: var(--gold);
}
.dc-band .ik-card__ico.dc-band__ico {
  width: 64px;
  height: 64px;
  border-radius: 18px;
}
.dc-band__body {
  display: grid;
  gap: 4px;
}
.dc-band__h {
  margin: 0;
}
.dc-band__p {
  color: var(--muted);
  font-size: 16px;
}

/* ---------- رأسُ صفحةٍ بلا بطل (الوثيقة 25، المقال 15): العنوانُ والبياناتُ فوق السطح الفحمي يذوب من أعلى ومن أسفل ---------- */
.dc-dochead {
  position: relative;
  isolation: isolate;
  padding: 28px 0 44px;
  overflow: hidden;
}
/* ذوبانٌ من أعلى نحو لون الصفحة، ووهجٌ ذهبي هادئ في الجهة المقابلة للعنوان (موضعُ الموجات الذهبية في المرجع) */
.dc-dochead::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(640px 360px at 100% 55%, rgba(201, 162, 39, 0.16), transparent 70%), linear-gradient(180deg, var(--bg) 0%, rgba(0, 0, 0, 0.7) 28%, transparent 60%);
  pointer-events: none;
}
html[dir='rtl'] .dc-dochead::before {
  background: radial-gradient(640px 360px at 0% 55%, rgba(201, 162, 39, 0.16), transparent 70%), linear-gradient(180deg, var(--bg) 0%, rgba(0, 0, 0, 0.7) 28%, transparent 60%);
}
.dc-dochead__in {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 16px;
  justify-items: start;
}
.dc-dochead__h1 {
  font-size: clamp(32px, 1.8vw + 18px, 54px);
  max-width: 24ch;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.6);
}
.dc-dochead__lead {
  max-width: 70ch;
}
.dc-dochead .docmeta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 14px;
}
.dc-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--gline);
  background: rgba(0, 0, 0, 0.55);
  color: var(--muted);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.dc-chip svg {
  flex: none;
  color: var(--gold-2);
}
.dc-chip b,
.dc-chip time {
  color: var(--ivory);
  font-weight: 700;
}
.dc-chip a {
  color: var(--gold-2);
}

/* ---------- عمودُ الوثيقة/المقال: النصُّ لا يتمدّد إلى ما لا يُقرأ، والفهرسُ الثابت بجانبه من site.css ---------- */
.dc-doc.section--doc {
  padding-top: 16px;
}
.dc-docart {
  max-width: 920px;
}
.docwrap--solo .dc-docart {
  max-width: none;
}
/* ملاحظةُ النسخة النافذة بأيقونة */
.dc-note.docnote {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.dc-note svg {
  flex: none;
  color: var(--gold-2);
  margin-top: 4px;
}

/* البندُ لوحٌ قابلٌ للطيّ: رأسٌ برقمٍ ذهبي وسهم، مفتوحٌ افتراضياً فالنصُّ كلُّه في الصفحة */
.dc-sec.docsec {
  display: block;
  padding: 0;
  overflow: hidden;
  scroll-margin-top: calc(var(--header-h) + 20px);
  transition: border-color var(--fast), box-shadow var(--fast);
}
.dc-sec[open] {
  border-color: var(--gline);
  box-shadow: 0 0 0 1px rgba(201, 162, 39, 0.04), 0 18px 40px rgba(0, 0, 0, 0.3);
}
.dc-sec__sum {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  padding: 14px 22px;
  cursor: pointer;
  list-style: none;
  transition: background var(--fast);
}
.dc-sec__sum::-webkit-details-marker {
  display: none;
}
.dc-sec__sum::marker {
  content: '';
}
.dc-sec__sum:hover {
  background: rgba(201, 162, 39, 0.05);
}
.dc-sec[open] > .dc-sec__sum {
  background: linear-gradient(180deg, rgba(201, 162, 39, 0.1), rgba(201, 162, 39, 0.02));
  border-bottom: 1px solid var(--line-soft);
}
.dc-sec .dc-sec__h {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex: 1;
  margin: 0;
  font-size: clamp(18px, 0.4vw + 15px, 21px);
  line-height: 1.35;
}
.dc-sec .docsec__n {
  flex: none;
  min-width: 1.6em;
}
.dc-sec__chev {
  flex: none;
  color: var(--gold-2);
  transition: transform var(--fast) var(--ease);
}
.dc-sec[open] .dc-sec__chev {
  transform: rotate(180deg);
}
.dc-sec__body {
  display: grid;
  gap: 10px;
  padding: 18px 22px 22px;
}
.dc-sec__body p {
  color: var(--muted);
  line-height: 1.85;
}
/* مصادرُ المقال بأيقونة */
.dc-sources h2 {
  display: flex;
  align-items: center;
  gap: 10px;
}
.dc-sources h2 svg {
  color: var(--gold-2);
}

/* ---------- «تعلّم» (14): أحدثُ مقالٍ لوحٌ عريض، والباقي بطاقاتٌ بأيقونة وتاريخ ---------- */
.dc-feat {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  align-items: center;
  gap: 32px;
  padding: 40px 44px;
  margin-bottom: 22px;
  color: var(--ivory);
  transition: transform var(--fast) var(--ease), border-color var(--fast);
}
.dc-feat:hover {
  transform: translateY(-3px);
  border-color: var(--gold);
}
.dc-feat__body {
  display: grid;
  gap: 14px;
  justify-items: start;
}
.dc-feat__h {
  font-size: clamp(26px, 1.1vw + 18px, 40px);
  line-height: 1.2;
}
.dc-feat__p {
  max-width: 58ch;
}
.dc-feat__art {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
}
.dc-feat__ico {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 200px;
  border-radius: 48px;
  border: 1px solid var(--gline);
  background: radial-gradient(circle at 50% 30%, rgba(201, 162, 39, 0.3), rgba(201, 162, 39, 0.04) 62%), linear-gradient(160deg, rgba(27, 30, 32, 0.95), rgba(17, 20, 22, 0.85));
  color: var(--gold-2);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(245, 241, 232, 0.08);
}
.dc-feat__ico::after {
  content: '';
  position: absolute;
  inset: 14px;
  border-radius: 36px;
  border: 1px solid rgba(201, 162, 39, 0.18);
  pointer-events: none;
}
.dc-updated.ik-card__meta {
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}
.dc-updated svg {
  color: var(--gold-2);
  flex: none;
}
.dc-learncard .ik-card__title {
  font-size: 20px;
  line-height: 1.3;
}

/* ---------- الحاسبات (16، 17–20): بطاقاتٌ بأيقونةٍ كبيرة وزرٍّ ذهبي، والنموذجُ في لوحٍ عريض ---------- */
.dc-tools .dc-tool {
  padding: 36px 28px 30px;
}
.dc-tools .dc-tool .ik-card__ico {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  margin-bottom: 4px;
}
.dc-tools .dc-tool .ik-card__ico svg {
  width: 30px;
  height: 30px;
}
.dc-tools .dc-tool .ik-card__go {
  min-height: 46px;
  padding: 0 22px;
  margin-top: auto;
  border-radius: var(--radius-btn);
  border: 1px solid rgba(255, 236, 170, 0.55);
  background: var(--btn-gold);
  color: var(--on-gold);
  font-size: 15px;
  box-shadow: 0 10px 30px rgba(201, 162, 39, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.45);
  transition: background var(--fast), box-shadow var(--fast);
}
.dc-tools .dc-tool .ik-card__text {
  padding-bottom: 10px;
}
.dc-tools a.dc-tool:hover .ik-card__go {
  background: var(--btn-gold-hover);
  box-shadow: 0 14px 40px rgba(201, 162, 39, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.dc-tools .ik-cards--4 .dc-tool {
  padding: 28px 24px 24px;
}
.dc-tools .ik-cards--4 .ik-card__title {
  font-size: 19px;
}
.dc-tools .ik-cards--4 .ik-card__go {
  min-height: 42px;
  padding: 0 18px;
  font-size: 14px;
}

/* النموذج: المدخلاتُ في جهة البداية، والنتيجةُ لوحٌ داكن بوهجٍ ذهبي علوي في الجهة الأخرى */
.dc-calc .calc {
  padding: 36px;
  gap: 36px;
}
.dc-calc .calc__f > span,
.dc-calc .calc__dir legend {
  font-size: 14px;
  color: var(--muted);
}
.dc-calc .calc__out {
  padding: 28px;
  gap: 14px;
  border-color: var(--gline-soft);
  background: radial-gradient(circle at 50% 0%, rgba(201, 162, 39, 0.14), transparent 60%), rgba(0, 0, 0, 0.55);
}
.dc-calc .calc__res--main b {
  letter-spacing: -0.01em;
}
/* صفُّ «قيمة حركة 1» يخفيه calc.js على أزواج الفوركس بسمة hidden — وdisplay: grid في القاعدة المشتركة كان يُبقيه ظاهراً */
.dc-calc .calc__res[hidden] {
  display: none;
}
/* في العربية الرقمُ (LTR) يحاذي جهةَ تسميته لا الجهةَ المقابلة */
html[dir='rtl'] .dc-calc .calc__res b,
html[dir='rtl'] .dc-calc .calc input {
  text-align: right;
}
.dc-calc .calc__note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 4px;
  font-size: 14px;
  color: var(--muted);
}
.dc-calc .calc__note svg {
  flex: none;
  margin-top: 5px;
  color: var(--gold-2);
}

/* الشرحُ ألواحٌ زجاجية جنباً إلى جنب */
.dc-panels.prose {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}
.dc-panels .prose__sec {
  padding: 30px 32px;
  border-radius: var(--radius);
  background: var(--glass);
  border: 1px solid var(--line);
  box-shadow: var(--glass-edge);
  align-content: start;
}
@media (max-width: 900px) {
  .dc-panels.prose {
    grid-template-columns: 1fr;
  }
}

/* ---------- الهاتف ---------- */
@media (max-width: 767px) {
  .dc-doccard {
    padding: 26px 22px 24px;
  }
  .dc-doccard .ik-card__ico.dc-doccard__ico {
    width: 60px;
    height: 60px;
  }
  .dc-band {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 16px;
    padding: 22px;
  }
  .dc-band > .dc-go {
    grid-column: 1 / -1;
    justify-self: end;
    width: 44px;
    height: 44px;
  }
  .dc-dochead {
    padding: 14px 0 34px;
  }
  .dc-dochead__in {
    gap: 12px;
  }
  .dc-chip {
    min-height: 34px;
    padding: 0 12px;
    font-size: 13px;
  }
  .dc-sec__sum {
    min-height: 56px;
    padding: 12px 16px;
  }
  .dc-sec__body {
    padding: 14px 16px 18px;
  }
  .dc-feat {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 26px 22px;
  }
  .dc-feat__art {
    order: -1;
    min-height: 0;
    justify-content: flex-start;
  }
  .dc-feat__ico {
    width: 112px;
    height: 112px;
    border-radius: 30px;
  }
  .dc-feat__ico::after {
    inset: 10px;
    border-radius: 22px;
  }
  .dc-feat__ico svg {
    width: 44px;
    height: 44px;
  }
  .dc-tools .dc-tool {
    padding: 26px 22px 24px;
  }
  .dc-calc .calc {
    padding: 22px;
    gap: 22px;
  }
  .dc-calc .calc__out {
    padding: 20px;
  }
  .dc-panels .prose__sec {
    padding: 22px;
  }
}

/* ---- css/55-pay.css ---- */
/* ============================================================
   قسمُ وسائل الإيداع (ikp-) — [المالك 2026-11-10، ملفُّه iklil-payment-section «بين هالقسم وهالقسم»]
   بين منشور العملات الرقمية وقسم المنصّة في الرئيسية. التصميمُ والحركةُ من ملفّه كما هما، مع: خطُّ الموقع بدل Cairo من Google،
   حالةُ البداية المخفية تحت ‎.js‎ (بلا JavaScript يظهر كلُّ شيء)، لا تباعدَ أحرفٍ في العربية (يقطع الحروف)، وسهمُ الموقع
   بدل «←» فيتّجه مع اللغة. نقطةُ الهاتف 767 كبقية الموقع.
   ============================================================ */
.ikp {
  --ikp-gold: #e9c979;
  --ikp-gold-2: #c9a24a;
  --ikp-gold-light: #f7e3a8;
  --ikp-text: #f4efe6;
  --ikp-muted: #b9b2a6;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  padding: 88px 24px 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--ikp-text);
  background: #000;
  overflow: hidden;
}
.ikp *,
.ikp *::before,
.ikp *::after {
  box-sizing: border-box;
}

/* ---------- الرأس ---------- */
.ikp-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 720px;
}
.ikp-eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid rgba(233, 201, 121, 0.35);
  font-size: 13px;
  font-weight: 500;
  color: var(--ikp-gold);
}
html[dir='ltr'] .ikp-eyebrow {
  letter-spacing: 0.06em;
}
.ikp-title {
  margin: 26px 0 0;
  font-size: clamp(36px, 5.2vw, 68px);
  line-height: 1.4;
  font-weight: 700;
  color: #f7f2e8;
}
html[dir='ltr'] .ikp-title {
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.ikp-gold {
  display: inline-block;
  padding: 0.06em 0.04em 0.22em;
  background: linear-gradient(180deg, var(--ikp-gold-light), var(--ikp-gold-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ikp-sub {
  margin: 18px 0 0;
  max-width: 620px;
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.75;
  color: var(--ikp-muted);
}
.ikp-brand {
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--ikp-text);
  unicode-bidi: isolate;
}

/* ---------- الشريط ---------- */
.ikp-stage {
  position: relative;
  width: min(1040px, 100%);
  margin-top: 64px;
  perspective: 1600px;
  perspective-origin: 50% 0%;
}
.ikp-line {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ikp-gold), transparent);
  transform: scaleX(0);
  opacity: 0;
  pointer-events: none;
}
.ikp-bar {
  position: relative;
  transform: rotateX(9deg) translateY(var(--ikp-py, 0px));
  border-radius: 28px;
  background: linear-gradient(180deg, #0c0c0c 0%, #040404 60%, #000 100%);
  border: 1px solid rgba(233, 201, 121, 0.24);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset;
  padding: 40px 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  will-change: transform;
}
.ikp-bar::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 29px;
  padding: 1.5px;
  background: conic-gradient(from var(--ikp-a, 0deg), transparent 0deg, transparent 250deg, var(--ikp-gold) 300deg, #fff4d2 320deg, var(--ikp-gold) 340deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
}
@property --ikp-a {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

/* البطاقتان (الطريقان الأساسيان) */
.ikp-main {
  display: flex;
  align-items: center;
  gap: 56px;
  flex-shrink: 0;
}
.ikp-pay {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 96px;
}
.ikp-pay img {
  display: block;
  width: auto;
  height: var(--h, 48px);
  object-fit: contain;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.ikp-pay:hover img {
  transform: translateY(-8px);
}
.ikp-sep {
  width: 1px;
  height: 96px;
  flex-shrink: 0;
  background: linear-gradient(180deg, transparent, rgba(233, 201, 121, 0.5), transparent);
}

/* العملاتُ الرقمية المتراكبة */
.ikp-crypto {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-shrink: 0;
}
.ikp-stack {
  display: flex;
  align-items: center;
  padding: 0 6px;
}
.ikp-coin {
  position: relative;
  width: 60px;
  height: 60px;
  padding: 0;
  margin: 0;
  margin-inline-start: -20px;
  border: 0;
  background: none;
  border-radius: 50%;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
  font: inherit;
  color: inherit;
}
.ikp-coin:first-child {
  margin-inline-start: 0;
}
.ikp-coin:focus-visible {
  outline: 2px solid var(--ikp-gold);
  outline-offset: 3px;
}
.ikp-coin-in {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.ikp-coin img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(-3px 0 4px rgba(0, 0, 0, 0.85));
}
.ikp-tip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translate(-50%, 6px);
  white-space: nowrap;
  font-size: 12px;
  color: var(--ikp-text);
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(233, 201, 121, 0.45);
  background: #000;
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
  direction: ltr;
}
.ikp-coin:hover,
.ikp-coin.is-active {
  z-index: 20 !important;
}
.ikp-coin:hover .ikp-coin-in,
.ikp-coin.is-active .ikp-coin-in {
  transform: translateY(-10px) scale(1.08);
}
.ikp-coin:hover .ikp-tip,
.ikp-coin.is-active .ikp-tip {
  opacity: 1;
  transform: translate(-50%, -10px);
}
.ikp-more {
  display: flex;
  flex-direction: column;
  gap: 2px;
  white-space: nowrap;
}
.ikp-more strong {
  font-size: 17px;
  font-weight: 600;
  color: var(--ikp-text);
}
.ikp-more span {
  font-size: 13px;
  color: #a9a398;
}
.ikp-hint-touch {
  display: none;
}

/* الزر */
.ikp-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  margin-top: 72px;
  padding: 0 32px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  color: #f2d58a;
  border: 1px solid rgba(233, 201, 121, 0.55);
  background: #000;
  transition: color 0.35s, background 0.35s;
}
.ikp-cta:hover {
  color: #000;
  background: linear-gradient(180deg, #f2d58a, var(--ikp-gold-2));
}
.ikp-cta:focus-visible {
  outline: 2px solid var(--ikp-gold);
  outline-offset: 3px;
}
.ikp-arrow {
  display: inline-flex;
  --ikp-dx: 6px;
}
html[dir='rtl'] .ikp-arrow {
  --ikp-dx: -6px;
}
.ikp-arrow svg {
  width: 28px;
  height: auto;
}
.ikp-note {
  margin: 18px 0 0;
  font-size: 12.5px;
  color: #8e887e;
}

/* ---------- الحركة: تبدأ حين يظهر القسم (site.js يضيف is-in)؛ بلا JavaScript لا إخفاءَ أصلاً ---------- */
.js .ikp [data-ikp-anim] {
  opacity: 0;
}
.ikp.is-in .ikp-fade {
  animation: ikpUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: var(--d, 0ms);
}
.ikp.is-in .ikp-line {
  animation: ikpLine 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 500ms;
}
.js .ikp .ikp-bar {
  clip-path: inset(50% 0 50% 0 round 28px);
}
.ikp.is-in .ikp-bar {
  animation: ikpOpen 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 1000ms;
}
.ikp.is-in .ikp-bar::before {
  opacity: 1;
  animation: ikpSpin 6s linear infinite;
}
.ikp.is-in .ikp-coin {
  animation: ikpSlide 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: var(--d, 0ms);
}
.ikp.is-in .ikp-arrow {
  animation: ikpArrow 1.6s ease-in-out infinite;
}
@keyframes ikpUp {
  from {
    opacity: 0;
    transform: translateY(46px);
    filter: blur(14px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
}
@keyframes ikpLine {
  0% {
    transform: scaleX(0);
    opacity: 1;
  }
  55% {
    transform: scaleX(1);
    opacity: 1;
  }
  100% {
    transform: scaleX(1);
    opacity: 0;
  }
}
@keyframes ikpOpen {
  to {
    clip-path: inset(-60px -40px -40px -40px round 28px);
  }
}
@keyframes ikpSpin {
  to {
    --ikp-a: 360deg;
  }
}
@keyframes ikpSlide {
  from {
    opacity: 0;
    transform: translateX(calc(var(--i, 0) * 22px)) scale(0.7);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes ikpArrow {
  50% {
    transform: translateX(var(--ikp-dx));
  }
}

/* ---------- الهاتف ---------- */
@media (max-width: 767px) {
  .ikp {
    padding: 72px 16px;
  }
  .ikp-eyebrow {
    font-size: 12px;
    padding: 6px 14px;
  }
  .ikp-title {
    margin-top: 20px;
    font-size: 36px;
    line-height: 1.45;
  }
  html[dir='ltr'] .ikp-title {
    font-size: 32px;
    line-height: 1.25;
  }
  .ikp-sub {
    font-size: 16px;
    margin-top: 14px;
  }
  .ikp-stage {
    margin-top: 40px;
    perspective: none;
  }
  .ikp-bar {
    transform: none;
    flex-direction: column;
    gap: 24px;
    padding: 30px 20px 28px;
    border-radius: 24px;
  }
  .ikp-bar::before {
    border-radius: 25px;
  }
  .js .ikp .ikp-bar {
    clip-path: inset(0 50% 0 50% round 24px);
  }
  .ikp.is-in .ikp-bar {
    animation-name: ikpOpenM;
    animation-delay: 700ms;
  }
  .ikp-main {
    gap: 40px;
  }
  .ikp-pay {
    height: 56px;
  }
  .ikp-pay img {
    height: calc(var(--h, 48px) * 0.7);
  }
  .ikp-pay:hover img {
    transform: none;
  }
  .ikp-sep {
    width: 70%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(233, 201, 121, 0.5), transparent);
  }
  .ikp-crypto {
    flex-direction: column;
    gap: 14px;
  }
  .ikp-coin {
    width: 48px;
    height: 48px;
    margin-inline-start: -14px;
    cursor: pointer;
  }
  .ikp-coin img {
    width: 42px;
    height: 42px;
  }
  .ikp-more {
    align-items: center;
    white-space: normal;
    text-align: center;
  }
  .ikp-more strong {
    font-size: 15px;
  }
  .ikp-more span {
    font-size: 12px;
  }
  .ikp-hint-desk {
    display: none;
  }
  .ikp-hint-touch {
    display: inline;
  }
  .ikp-cta {
    width: 100%;
    justify-content: center;
    margin-top: 40px;
    color: #000;
    border: 0;
    background: linear-gradient(180deg, #f2d58a, var(--ikp-gold-2));
  }
  .ikp-note {
    text-align: center;
  }
}
@keyframes ikpOpenM {
  to {
    clip-path: inset(-50px -30px -30px -30px round 24px);
  }
}
/* أجهزةُ اللمس: الاسمُ يظهر بالضغط وحده */
@media (hover: none) {
  .ikp-coin:hover .ikp-coin-in {
    transform: none;
  }
  .ikp-coin:hover .ikp-tip {
    opacity: 0;
  }
  .ikp-coin.is-active .ikp-coin-in {
    transform: translateY(-8px) scale(1.08);
  }
  .ikp-coin.is-active .ikp-tip {
    opacity: 1;
  }
}

/* ---------- تقليلُ الحركة ---------- */
@media (prefers-reduced-motion: reduce) {
  .ikp [data-ikp-anim],
  .js .ikp [data-ikp-anim] {
    opacity: 1 !important;
    animation: none !important;
  }
  .ikp .ikp-bar,
  .js .ikp .ikp-bar {
    clip-path: none !important;
    animation: none !important;
    transform: none;
  }
  .ikp .ikp-bar::before {
    opacity: 1;
    animation: none !important;
  }
  .ikp .ikp-line {
    display: none;
  }
  .ikp .ikp-arrow {
    animation: none !important;
  }
  .ikp-coin-in,
  .ikp-pay img {
    transition: none;
  }
}