/* ============================================================
   عالم النماء — الواجهة العامة (مطابقة مرجع Figma)
   Tokens: navy #0F233E · deep #09182B · gold #CF9F42 · cream #FAF8F3
   ============================================================ */

/* ---------- الخطوط: Thmanyah Sans (محلي) ---------- */
@font-face { font-family: 'Thmanyah Sans'; src: url('assets/fonts/thmanyahsans-Light.woff2') format('woff2'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Thmanyah Sans'; src: url('assets/fonts/thmanyahsans-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Thmanyah Sans'; src: url('assets/fonts/thmanyahsans-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Thmanyah Sans'; src: url('assets/fonts/thmanyahsans-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Thmanyah Sans'; src: url('assets/fonts/thmanyahsans-Black.woff2') format('woff2'); font-weight: 900; font-display: swap; }

:root {
  --navy: #0F233E;
  --navy-deep: #09182B;
  --navy-2: #14304F;
  --gold: #CF9F42;
  --gold-light: #E8C980;
  --cream: #FAF8F3;
  --white: #FFFFFF;
  --ink: #0F233E;
  --ink-soft: rgba(15, 35, 62, .70);
  --ink-mute: rgba(15, 35, 62, .48);
  --line: rgba(15, 35, 62, .14);
  --on-navy-soft: rgba(250, 248, 243, .72);
  --on-navy-mute: rgba(250, 248, 243, .45);
  --font: 'Thmanyah Sans', 'Cairo', 'Segoe UI', Tahoma, sans-serif;
  --r-lg: 28px;
  --r-md: 16px;
  --r-sm: 12px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { height: 100%; }
body {
  font-family: var(--font);
  background: var(--navy-deep);
  color: var(--ink);
  min-height: 100vh;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
input { font-family: inherit; }
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 6px; }

/* ============================================================
   أزرار عامة
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-weight: 700; font-size: 16px; line-height: 1;
  border-radius: 999px; padding: 15px 30px;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-gold { background: var(--gold); color: var(--navy); }
.btn-gold:hover { background: #d9ad55; }
.btn-navy { background: var(--navy); color: var(--cream); }
.btn-navy:hover { background: var(--navy-2); }
.btn-outline-light { border: 1px solid rgba(250, 248, 243, .35); color: var(--cream); background: transparent; }
.btn-outline-light:hover { border-color: rgba(250, 248, 243, .7); }
.btn-outline-ink { border: 1px solid var(--line); color: var(--ink); background: var(--white); }
.btn-outline-ink:hover { border-color: rgba(15, 35, 62, .4); }
.btn[disabled] { background: rgba(15, 35, 62, .10); color: var(--ink-mute); cursor: default; pointer-events: none; }
.btn .arr { font-weight: 700; }

/* شريط تقدم الرحلة أعلى الصفحة */
.journey-progress {
  position: fixed; top: 0; right: 0; left: 0; height: 5px; z-index: 40;
  background: transparent; pointer-events: none;
}
.journey-progress { display: flex; justify-content: flex-start; } /* RTL: يبدأ من اليمين */
.journey-progress i {
  display: block; height: 100%; background: var(--gold);
  transition: width .35s ease;
}

/* ============================================================
   شاشة الهوم — ديسكتوب: سبليت (كريمي يسار / كحلي يمين)
   ============================================================ */
.screen { min-height: 100vh; }

/* RTL: العمود الأول يمين (الهيرو الكحلي) والثاني يسار (لوحة المشروعات الكريمي) */
.home { display: grid; grid-template-columns: 1fr 46%; min-height: 100vh; background: var(--navy-deep); }

/* لوحة المشروعات (يسار) */
.home-projects {
  background: var(--cream);
  border-radius: 0 56px 0 0; /* انحناءة كبيرة أعلى يمين اللوحة */
  padding: 26px 34px 30px;
  display: flex; flex-direction: column;
  min-height: 100vh;
  position: relative; overflow: hidden;
  z-index: 2;
  box-shadow: 22px 0 55px rgba(9, 24, 43, .25); /* ظل ناعم يُظهرها فوق الجزء الكحلي */
}
.home-projects-top { display: flex; align-items: flex-start; justify-content: space-between; }
.corner-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.ghost-11 {
  font-size: 110px; font-weight: 900; color: rgba(207, 159, 66, .25);
  line-height: .9; letter-spacing: -2px;
}
.pill-start {
  background: var(--gold); color: var(--navy); font-weight: 700; font-size: 14px;
  border-radius: 999px; padding: 10px 20px; display: inline-flex; align-items: center;
}
.home-projects-head { padding-top: 26px; }
.home-projects-head h2 { font-size: 24px; font-weight: 900; color: var(--navy); }
.home-projects-head p { font-size: 13px; color: var(--ink-mute); margin-top: 6px; }

.logo-grid {
  margin-top: 10px; flex: 1;
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 8px 14px; align-items: center; justify-items: center;
  direction: ltr; /* ترقيم المشروعات في المرجع يمشي من اليسار لليمين */
}
/* الخلايا أزرار: Hover ناعم + ضغطة تعرض المشروع في الهيرو */
.logo-cell {
  display: flex; flex-direction: column; align-items: center; width: 100%; grid-column: span 2;
  border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer;
}
.logo-cell .lg { height: 88px; display: flex; align-items: center; justify-content: center; }
.logo-cell .lg img { max-height: 88px; max-width: 156px; width: auto; object-fit: contain; mix-blend-mode: multiply; /* حل احتياطي لإخفاء الخلفيات البيضاء المدموجة بدون المساس بألوان اللوجو */ transition: transform .2s ease; }
.logo-cell:hover .lg img { transform: scale(1.07); }
.logo-cell:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
/* الرقم + الخط الذهبي: صف واحد في منتصف البلاطة تحت اللوجو مباشرة */
.logo-cell .num {
  align-self: center; display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 8px; font-size: 11px; font-weight: 700; color: var(--ink-mute);
}
.logo-cell .num::after { content: ''; display: block; width: 34px; height: 1px; background: var(--gold); opacity: .7; }

/* الجانب الكحلي (يمين) */
.home-hero { position: relative; padding: 26px 48px 40px; display: flex; flex-direction: column; }
.site-header { display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--cream); font-weight: 700; font-size: 17px; }
.brand img { height: 46px; width: auto; }
/* مجموعة الهيرو: أكبر ومتمركزة بصريًا داخل الجزء الكحلي بعيدًا عن الحواف واللوجو */
.hero-body { flex: 1; display: flex; flex-direction: column; justify-content: center; width: 640px; max-width: 92%; margin: 0 auto; padding-bottom: 30px; }
.tag-pill {
  align-self: flex-start;
  border: 1px solid rgba(207, 159, 66, .65); color: var(--gold);
  font-size: 13px; font-weight: 500; border-radius: 999px; padding: 7px 18px;
  background: rgba(207, 159, 66, .06);
}
.hero-body h1 {
  margin-top: 22px; color: var(--cream);
  font-size: 78px; line-height: 1.14; font-weight: 900; letter-spacing: -.5px;
}
.hero-body .lead { margin-top: 26px; color: var(--on-navy-soft); font-size: 19px; line-height: 1.95; max-width: 560px; }
.hero-ctas { margin-top: 36px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.hero-ctas .btn-gold { padding: 18px 40px; font-size: 18px; }
.hero-foot { margin-top: 34px; display: flex; align-items: center; gap: 10px; color: var(--on-navy-mute); font-size: 13px; }
.hero-foot::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); flex: none; }
.page-index {
  position: absolute; bottom: 34px; left: 26px;
  color: var(--on-navy-mute); font-size: 12px; letter-spacing: 2px;
  writing-mode: vertical-rl; transform: rotate(180deg);
}

/* عرض مشروع مختار داخل الهيرو: لوجو المشروع مكان لوجو عالم النماء على قاعدة كريمي */
#brandLogo.project-logo {
  height: 76px; width: auto; max-width: 190px; object-fit: contain;
  background: var(--cream); padding: 9px 14px; border-radius: 14px;
}
/* ---------- أيقونات التواصل الاجتماعي ---------- */
.social-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.s-icon {
  width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(207, 159, 66, .55); color: var(--gold);
  background: rgba(207, 159, 66, .08);
  transition: background .18s ease, color .18s ease, transform .18s ease, border-color .18s ease;
}
.s-icon svg { width: 20px; height: 20px; fill: currentColor; }
.s-icon:hover { background: var(--gold); color: var(--navy); border-color: var(--gold); transform: translateY(-2px); }
/* داخل المودالات الفاتحة */
.modal-social { justify-content: center; margin-top: 12px; }
.modal-social .s-icon { width: 42px; height: 42px; color: var(--navy); border-color: var(--line); background: var(--white); }
.modal-social .s-icon:hover { background: var(--gold); color: var(--navy); border-color: var(--gold); }
.follow-title { margin-top: 20px; font-size: 15px; font-weight: 700; color: var(--navy); text-align: center; }

/* ---------- رقم التواصل في صفحة الفيديو ---------- */
.contact-box {
  display: inline-flex; align-items: center; gap: 12px; margin-top: 16px;
  border: 1px solid var(--line); background: var(--white); border-radius: 14px;
  padding: 11px 18px; min-height: 48px;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.contact-box:hover { border-color: rgba(207, 159, 66, .7); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(9, 24, 43, .1); }
.contact-box .cb-icon {
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  background: var(--gold); color: var(--navy);
  display: inline-flex; align-items: center; justify-content: center;
}
.contact-box .cb-icon svg { width: 18px; height: 18px; fill: currentColor; }
.contact-box .cb-text { display: flex; flex-direction: column; line-height: 1.35; }
.contact-box .cb-text i { font-style: normal; font-size: 11.5px; color: var(--ink-mute); }
.contact-box .cb-text b { font-size: 17px; font-weight: 900; color: var(--navy); letter-spacing: .5px; }

.hero-project h1 { font-size: clamp(30px, 3vw, 44px); line-height: 1.3; margin-top: 0; }
.hero-project .lead { font-size: 16px; line-height: 2; max-width: 580px; }
.hero-project .hero-ctas .btn-outline-light { display: inline-flex; }

/* عنوان قسم المشروعات في الموبايل */
.m-projects-title { display: none; }
.home-top-rule { display: none; }

/* ============================================================
   سلايدات الرحلة — ديسكتوب
   ============================================================ */
.slide { background: var(--cream); min-height: 100vh; display: flex; flex-direction: column; padding: 26px 44px 30px; }
.slide-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.slide-group { font-size: 17px; font-weight: 900; color: var(--navy); justify-self: end; }
.slide-count { font-size: 13px; color: var(--ink-mute); justify-self: center; }
.slide-back {
  justify-self: start;
  border: 1px solid var(--line); background: var(--white); color: var(--ink);
  border-radius: 999px; padding: 9px 18px; font-size: 13px; font-weight: 500;
}
.slide-back:hover { border-color: rgba(15, 35, 62, .4); }

.slide-body {
  flex: 1; display: grid; grid-template-columns: 1fr 44%; gap: 56px;
  align-items: center; padding: 18px 8px 0;
}
.slide-copy { max-width: 560px; justify-self: end; width: 100%; }
.eyebrow { color: var(--gold); font-size: 14px; font-weight: 700; }
.slide-copy h1 { margin-top: 12px; margin-bottom: 12px; font-size: 48px; line-height: 1.25; font-weight: 900; color: var(--navy); letter-spacing: -.5px; }
.slide-copy .para { margin-top: 20px; color: var(--ink-soft); font-size: 16px; line-height: 1.95; }
.slide-copy .para + .para { margin-top: 16px; }

.note { margin-top: 26px; }
/* خلاصة قسم «فرص النماء»: مستطيل كحلي ممتلئ بنص أبيض */
.note-dark {
  background: var(--navy); color: #FFFFFF;
  border-radius: 12px; padding: 16px 22px;
  font-size: 15px; font-weight: 700; line-height: 1.8;
}
.note-dark b { display: block; color: var(--gold-light); margin-bottom: 4px; font-size: 14px; }
/* خلاصة قسم «بنك الأنشطة والأعمال»: أبيض بإطار ذهبي رفيع ونص كحلي */
.note-line {
  border: 1px solid rgba(207, 159, 66, .6); background: var(--white);
  border-radius: 12px; padding: 16px 22px;
  font-size: 15px; font-weight: 700; color: var(--navy); line-height: 1.8;
}
.note-bold { font-size: 16px; font-weight: 900; color: var(--navy); }
/* تسلسل بأسهم داخل الخلاصة — RTL: أول جملة يمينًا والسهم يشير لليسار */
.note-steps { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 10px; }
.note-steps .ns-item { white-space: nowrap; }
.note-steps .ns-arrow { color: var(--gold); font-style: normal; font-weight: 900; line-height: 1; }

.slide-nav { display: flex; align-items: center; gap: 12px; padding-top: 10px; }
.slide-nav .btn { padding: 13px 26px; font-size: 15px; }
/* عكس بصري فقط: «السابق» يمين و«التالي» يسار — الوظائف كما هي */
.slide-nav #slidePrev { order: 1; }
.slide-nav #slideNext { order: 2; }

/* البطاقة البصرية */
.visual {
  border-radius: 30px; min-height: 480px; height: 62vh; max-height: 560px;
  padding: 34px 30px; display: flex; flex-direction: column;
  justify-self: start; width: 100%;
}
.visual-dark { background: var(--navy); color: var(--cream); box-shadow: 0 30px 60px rgba(9, 24, 43, .18); }
.visual-light { background: #FDFCF8; border: 1px solid var(--line); box-shadow: 0 24px 50px rgba(9, 24, 43, .08); color: var(--navy); position: relative; overflow: hidden; }
.visual h3 { font-size: 22px; font-weight: 900; text-align: center; }
.visual .v-tag { text-align: center; font-size: 12px; font-weight: 700; color: var(--gold); margin-bottom: 8px; }

/* v1: أعمدة التكلفة والدخل */
.v-chart { flex: 1; display: flex; flex-direction: column; }
.v-chart .bars { flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 56px; padding: 30px 10px 0; position: relative; direction: ltr; /* الدخل يسارًا والأسعار يمينًا كما في المرجع */ }
/* خط الأساس عند قاعدة المستطيلات — لا يقطعها */
.v-chart .axis { position: absolute; right: 8%; left: 8%; bottom: 0; height: 2px; background: var(--navy); opacity: .85; }
.v-chart .bar { width: 64px; border-radius: 10px; background: #EFE6D2; position: relative; }
.v-chart .bar.gold { background: var(--gold); }
.v-chart .bar .bl { position: absolute; top: -26px; right: 50%; transform: translateX(50%); font-size: 12px; font-weight: 700; color: var(--ink-soft); white-space: nowrap; }
.v-chart .pill {
  align-self: center; margin-top: 18px;
  border: 1px solid var(--line); background: var(--white); border-radius: 999px;
  padding: 10px 20px; font-size: 13px; font-weight: 700; color: var(--navy);
}

/* v2: تايم لاين 2008 */
.v-ghost { position: absolute; top: 14px; left: 26px; font-size: 92px; font-weight: 900; color: rgba(207, 159, 66, .18); line-height: 1; }
.v-timeline { flex: 1; display: flex; flex-direction: column; padding-top: 40px; }
.v-timeline .tl { flex: 1; position: relative; margin-right: 90px; }
.v-timeline .tl::before { content: ''; position: absolute; top: 8px; bottom: 8px; right: 5px; width: 2px; background: rgba(15, 35, 62, .18); }
.v-timeline .tl-item { position: relative; padding-right: 34px; display: flex; align-items: center; height: 33.3%; }
.v-timeline .tl-item::before { content: ''; position: absolute; right: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--navy); }
.v-timeline .tl-item.gold { color: var(--gold); font-weight: 700; }
.v-timeline .tl-item.gold::before { background: var(--gold); }
.v-timeline .tl-item { font-size: 15px; font-weight: 500; color: var(--navy); }
.v-timeline .cap {
  border: 1px solid rgba(207, 159, 66, .6); border-radius: 12px; background: var(--white);
  text-align: center; padding: 16px; font-size: 16px; font-weight: 900; color: var(--navy);
}

/* إزاحة عمود المحتوى قليلًا ناحية اليمين في كل صفحات الرحلة (ديسكتوب فقط) */
@media (min-width: 821px) {
  .slide-copy { margin-left: 28px; margin-right: -12px; }
}

/* v3: أربع خبرات حول دائرة */
.v-orbit { flex: 1; position: relative; margin-top: 10px; }
.v-orbit .center {
  position: absolute; top: 50%; right: 50%; transform: translate(50%, -50%);
  width: 132px; height: 132px; border-radius: 50%; background: var(--gold);
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-weight: 900; font-size: 17px; color: var(--navy); z-index: 2; line-height: 1.4; padding: 10px;
}
.v-orbit .xline, .v-orbit .yline { position: absolute; background: rgba(15, 35, 62, .12); }
.v-orbit .xline { top: 50%; right: 6%; left: 6%; height: 1px; }
.v-orbit .yline { right: 50%; top: 4%; bottom: 4%; width: 1px; }
.v-orbit .node {
  position: absolute; width: 154px; background: var(--white); border: 1px solid var(--line);
  border-radius: 12px; padding: 16px 12px; text-align: center; box-shadow: 0 10px 24px rgba(9, 24, 43, .06);
}
.v-orbit .node b { display: block; font-size: 17px; color: var(--navy); }
.v-orbit .node span { font-size: 12.5px; color: var(--ink-mute); }
.v-orbit .n1 { top: 4%; right: 12%; }
.v-orbit .n2 { top: 4%; left: 12%; }
.v-orbit .n3 { bottom: 4%; right: 12%; }
.v-orbit .n4 { bottom: 4%; left: 12%; }

/* v4: المعادلة قبل التنظيم */
.v-eq { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 14px; padding-top: 16px; }
.v-eq .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.v-eq .chip {
  background: var(--navy-2); border: 1px solid rgba(250, 248, 243, .10);
  border-radius: 10px; padding: 15px 12px; text-align: center; font-size: 14px; font-weight: 500;
}
.v-eq .down { text-align: center; color: var(--gold); font-size: 22px; line-height: 1; }
.v-eq .result { background: var(--gold); color: var(--navy); border-radius: 12px; padding: 16px; text-align: center; }
.v-eq .result b { display: block; font-size: 16px; font-weight: 900; }
.v-eq .result span { font-size: 12px; font-weight: 500; opacity: .8; }

/* v5: مقارنة بنكين */
.v-compare { flex: 1; display: flex; flex-direction: column; padding-top: 18px; }
.v-compare .cols { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.v-compare .col-h { text-align: center; font-size: 14.5px; font-weight: 700; margin-bottom: 12px; color: var(--on-navy-soft); }
.v-compare .col-h.gold { color: var(--gold); }
.v-compare .chip {
  background: var(--navy-2); border: 1px solid rgba(250, 248, 243, .10);
  border-radius: 10px; padding: 18px 10px; text-align: center; font-size: 15.5px; margin-bottom: 13px;
  overflow-wrap: break-word;
}
.v-compare .col.main .chip { background: #1B3B60; border-color: rgba(207, 159, 66, .35); font-weight: 700; }
.v-compare .cap { text-align: center; font-size: 12px; color: var(--on-navy-mute); margin-top: 6px; }

/* v6: نموذج يخدم ولا يمتلك */
.v-flow { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.v-flow .root {
  background: var(--gold); color: var(--navy); font-weight: 900; font-size: 15px;
  border-radius: 999px; padding: 18px 30px; text-align: center;
}
.v-flow .arrows { display: flex; gap: 90px; color: var(--gold); font-size: 18px; line-height: 1; }
.v-flow .pair { display: flex; gap: 18px; }
.v-flow .chip { background: var(--navy-2); border: 1px solid rgba(250, 248, 243, .12); border-radius: 10px; padding: 13px 26px; font-size: 14px; font-weight: 700; }
.v-flow .down { color: var(--gold); font-size: 18px; line-height: 1; }
.v-flow .wide { background: #F2EDE2; color: var(--navy); border-radius: 10px; padding: 14px 40px; font-size: 14px; font-weight: 700; }
.v-flow .cap { font-size: 12px; color: var(--on-navy-mute); margin-top: 6px; }

/* v7: عناصر مشروع (مدار دائري) — دائرة حقيقية متساوية الأبعاد تربط العناصر الأربعة */
.v-ring { flex: none; position: relative; align-self: center; width: min(100%, 360px); aspect-ratio: 1 / 1; margin: 14px 0 4px; }
/* الدائرة أصبحت SVG (انظر قسم Motion) — نفس الشكل الساكن */
.v-ring .center {
  position: absolute; top: 50%; right: 50%; transform: translate(50%, -50%);
  width: 118px; height: 118px; border-radius: 50%; background: var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 17px; color: var(--navy); z-index: 2;
}
.v-ring .node {
  position: absolute; background: var(--white); border: 1px solid rgba(207, 159, 66, .55);
  border-radius: 999px; padding: 11px 22px; font-size: 14px; font-weight: 700; color: var(--navy);
  box-shadow: 0 8px 18px rgba(9, 24, 43, .06); white-space: nowrap;
}
/* العناصر الأربعة متمركزة على خط الدائرة نفسه */
.v-ring .n1 { top: 8%; right: 50%; transform: translate(50%, -50%); }
.v-ring .n2 { top: 50%; left: 8%; transform: translate(-50%, -50%); }
.v-ring .n3 { top: 92%; right: 50%; transform: translate(50%, -50%); }
.v-ring .n4 { top: 50%; right: 8%; transform: translate(50%, -50%); }

/* v8: مسار المشاركة */
.v-steps { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: 10px 8px 0; }
.v-steps .step { background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 15px; text-align: center; }
.v-steps .step b { display: block; font-size: 15px; font-weight: 900; color: var(--navy); }
.v-steps .step span { font-size: 12px; color: var(--ink-mute); }
.v-steps .step.gold { background: #F7ECD6; border-color: rgba(207, 159, 66, .6); }
.v-steps .sep { text-align: center; color: var(--gold); font-size: 15px; line-height: .4; }

/* v9: مهارات ← احتياج */
.v-skills { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 16px; padding-top: 12px; }
.v-skills .chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.v-skills .chip { border: 1px solid rgba(207, 159, 66, .55); border-radius: 999px; padding: 10px 20px; font-size: 13px; font-weight: 500; }
.v-skills .down { text-align: center; color: var(--gold); font-size: 20px; line-height: 1; }
.v-skills .need { background: var(--navy-2); border: 1px solid rgba(250, 248, 243, .10); border-radius: 14px; padding: 18px 22px; }
.v-skills .need b { display: block; text-align: center; font-size: 15px; font-weight: 900; margin-bottom: 12px; }
.v-skills .need li { list-style: none; font-size: 13px; color: var(--on-navy-soft); padding: 4px 0; display: flex; align-items: center; gap: 8px; }
.v-skills .need li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); flex: none; }

/* v10: فين — التنفيذ + رأس المال */
.v-venn { flex: 1; display: flex; flex-direction: column; }
.v-venn .stage { flex: 1; position: relative; }
.v-venn .c { position: absolute; top: 50%; transform: translateY(-50%); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 19px; text-align: center; }
/* تكبير عنوان رسم التكامل فقط */
.visual:has(.v-venn) h3 { font-size: 27px; }
.v-venn .c1 { width: 170px; height: 170px; background: var(--gold); color: var(--navy); right: 14%; }
.v-venn .c2 { width: 170px; height: 170px; background: var(--white); color: var(--navy); left: 14%; }
.v-venn .cap { background: var(--white); color: var(--navy); border-radius: 12px; padding: 14px; text-align: center; }
.v-venn .cap b { display: block; font-size: 15px; font-weight: 900; }
.v-venn .cap span { font-size: 12px; color: var(--ink-mute); }

/* ============================================================
   شاشة الفيديو
   ============================================================ */
.video-screen { background: var(--cream); min-height: 100vh; display: flex; flex-direction: column; padding: 26px 44px 40px; }
.video-screen .site-header .brand { color: var(--navy); }
/* المجموعة كلها (نصوص + فيديو) متوسطة أفقيًا داخل الصفحة */
.video-body { flex: 1; display: flex; align-items: center; justify-content: center; gap: 64px; padding-top: 10px; }
.video-copy { width: 440px; flex: none; }
.video-copy h1 { margin-top: 12px; font-size: 48px; line-height: 1.2; font-weight: 900; color: var(--navy); }
.video-copy .para { margin-top: 18px; color: var(--ink-soft); font-size: 16px; line-height: 1.95; }
.video-actions { margin-top: 28px; display: flex; flex-direction: column; gap: 14px; max-width: 380px; }
.video-actions .btn { width: 100%; border-radius: 14px; padding: 16px 24px; }
.video-hint { margin-top: 14px; font-size: 12px; color: var(--ink-mute); }
.eyebrow-m { display: none; }

.video-card {
  position: relative; overflow: hidden; border-radius: 26px; background: var(--navy);
  aspect-ratio: 16 / 10.4; width: 600px; max-width: 48vw; flex: none;
  box-shadow: 0 30px 60px rgba(9, 24, 43, .22);
}
.video-card .deco-a { position: absolute; width: 380px; height: 380px; border-radius: 50%; background: var(--gold); top: -170px; left: -110px; opacity: .95; }
.video-card .deco-b { position: absolute; width: 420px; height: 420px; border-radius: 50%; border: 44px solid var(--gold); bottom: -190px; right: -150px; }
.video-card .vc-tag {
  position: absolute; top: 22px; right: 24px; z-index: 2;
  background: rgba(9, 24, 43, .55); color: var(--gold-light); border: 1px solid rgba(207, 159, 66, .5);
  border-radius: 999px; padding: 7px 16px; font-size: 12px; font-weight: 700;
}
.video-card .vc-title { position: absolute; top: 44%; right: 8%; left: 8%; z-index: 2; text-align: center; color: var(--cream); font-size: 24px; font-weight: 900; text-shadow: 0 2px 20px rgba(9, 24, 43, .6); }
.video-card .vc-play {
  position: absolute; top: 58%; right: 50%; transform: translate(50%, 0); z-index: 3;
  width: 74px; height: 74px; border-radius: 50%; background: var(--gold);
  display: flex; align-items: center; justify-content: center;
  transition: transform .15s ease;
}
.video-card .vc-play:hover { transform: translate(50%, 0) scale(1.06); }
.video-card .vc-play::after { content: ''; border-style: solid; border-width: 12px 18px 12px 0; border-color: transparent var(--navy) transparent transparent; margin-right: -4px; }
.video-card .vc-foot { position: absolute; bottom: 20px; right: 24px; left: 24px; z-index: 2; display: flex; align-items: center; gap: 14px; color: var(--cream); font-size: 13px; font-weight: 700; direction: ltr; }
.video-card .vc-foot .track { flex: 1; height: 4px; border-radius: 4px; background: rgba(250, 248, 243, .28); }
.video-card iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 5; }

/* ============================================================
   المودالات: احجز مكالمة + النجاح
   ============================================================ */
.overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(9, 24, 43, .94);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  overflow: auto;
}
.modal-card {
  width: 100%; max-width: 420px; background: var(--cream); border-radius: 22px;
  padding: 26px 30px 24px; position: relative; overflow: hidden;
  box-shadow: 0 40px 90px rgba(0, 0, 0, .45);
}
.modal-card::before { content: ''; position: absolute; top: 0; right: 0; left: 0; height: 6px; background: var(--gold); }
.modal-close { position: absolute; top: 18px; left: 18px; font-size: 20px; color: var(--navy); line-height: 1; padding: 6px; }
.modal-logo { display: flex; justify-content: center; }
.modal-logo img { height: 48px; width: auto; }
.modal-card h2 { margin-top: 18px; font-size: 34px; font-weight: 900; color: var(--navy); }
.modal-card .m-desc { margin-top: 8px; font-size: 14px; color: var(--ink-mute); line-height: 1.8; }
.field { margin-top: 18px; }
.field label { display: block; font-size: 14px; font-weight: 700; color: var(--navy); margin-bottom: 8px; }
.field input {
  width: 100%; border: 1px solid var(--line); border-radius: 12px; background: var(--white);
  padding: 13px 16px; font-size: 15px; color: var(--navy);
}
.field input::placeholder { color: rgba(15, 35, 62, .3); }
.field input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(207, 159, 66, .18); }
.field input.ltr { direction: ltr; text-align: left; }
.form-error { margin-top: 12px; font-size: 13px; color: #B4232A; font-weight: 500; min-height: 18px; }
.field .flabel { display: block; font-size: 14px; font-weight: 700; color: var(--navy); margin-bottom: 8px; }
.interest-row { display: flex; gap: 10px; }
.interest-btn {
  flex: 1; border: 1px solid var(--line); background: var(--white); color: var(--navy);
  border-radius: 12px; padding: 13px 10px; font-size: 15px; font-weight: 700;
  transition: background .12s ease, border-color .12s ease;
}
.interest-btn:hover { border-color: rgba(207, 159, 66, .6); }
.interest-btn.sel { background: var(--gold); border-color: var(--gold); color: var(--navy); }
.modal-submit { width: 100%; margin-top: 8px; border-radius: 12px; padding: 15px; font-size: 16px; }
.modal-foot { margin-top: 14px; text-align: center; font-size: 11px; color: var(--ink-mute); }

.success-card { text-align: center; padding-top: 42px; }
.success-icon {
  width: 82px; height: 82px; border-radius: 50%; background: var(--gold);
  margin: 0 auto; display: flex; align-items: center; justify-content: center;
}
.success-icon svg { width: 36px; height: 36px; stroke: var(--navy); stroke-width: 3.4; fill: none; }
.success-card h2 { margin-top: 20px; }
.success-card .m-desc { margin-top: 6px; }
.success-card .btn { width: 100%; margin-top: 26px; border-radius: 999px; padding: 14px; }

/* ============================================================
   موبايل ≤ 820px — كل الشاشات
   ============================================================ */
@media (max-width: 820px) {
  body { background: var(--cream); }

  /* --- الهوم موبايل: كريمي مكدّس --- */
  .home { display: block; background: var(--cream); }
  .home-top-rule { display: block; height: 6px; background: var(--gold); }
  .home-hero { padding: 18px 20px 34px; min-height: 0; }
  .site-header { flex-direction: row-reverse; }
  .home .brand, .video-screen .brand { color: var(--navy); flex-direction: row-reverse; }
  .home .brand { color: var(--navy); }
  .brand img { height: 52px; }
  .pill-start-h { order: 2; }
  .hero-body { width: auto; max-width: none; margin: 44px 0 0; padding-bottom: 0; }
  .tag-pill { border: 0; padding: 0; background: none; font-size: 15px; font-weight: 700; }
  .hero-body h1 { color: var(--navy); font-size: 46px; line-height: 1.22; margin-top: 12px; }
  .hero-body .lead { color: var(--ink-soft); font-size: 18px; max-width: none; margin-top: 20px; }
  .hero-ctas { margin-top: 30px; }
  #heroDefault .hero-ctas .btn-gold { display: none; } /* في الهوم الافتراضي فقط — زر المشروع الذهبي يظل ظاهرًا */
  /* عرض المشروع على الموبايل: أزرار كاملة العرض وألوان مناسبة للخلفية الكريمي */
  .hero-project .hero-ctas { flex-direction: column; }
  .hero-project .btn { width: 100%; border-radius: 18px; padding: 18px; font-size: 17px; }
  .hero-project .btn-outline-light { border-color: rgba(15, 35, 62, .35); color: var(--navy); }
  .hero-project h1 { font-size: 34px; }
  .hero-project .lead { max-width: none; }
  #brandLogo.project-logo { height: 64px; }
  /* أيقونات سوشيال الشركة: صف متمركز بمساحات ضغط مريحة */
  .hero-project .social-row { width: 100%; justify-content: center; gap: 12px; margin-top: 4px; }
  .hero-project .s-icon { width: 50px; height: 50px; }
  .hero-project .s-icon svg { width: 22px; height: 22px; }
  /* تسلسل الأسهم: يلتف بأمان داخل المستطيل */
  .note-steps { gap: 8px; font-size: 14.5px; }
  /* رقم التواصل: عرض كامل أسفل أزرار صفحة الفيديو */
  .contact-box { order: 7; width: 100%; justify-content: center; margin-top: 18px; padding: 15px 18px; border-radius: 18px; min-height: 56px; }
  .contact-box .cb-text b { font-size: 19px; }
  .contact-box .cb-icon { width: 40px; height: 40px; }
  /* الخلاصة لا تلتصق بأزرار التنقل */
  .note { margin-top: 22px; }
  .hero-ctas .btn-m-start {
    display: inline-flex; width: 100%; background: var(--navy); color: var(--cream);
    border-radius: 18px; padding: 22px; font-size: 19px; font-weight: 900;
  }
  .hero-foot, .page-index { display: none; }

  .home-projects { border-radius: 0; border-top: 6px solid var(--gold); padding: 30px 20px 46px; min-height: 0; }
  .home-projects-top, .home-projects-head { display: none; }
  .m-projects-title { display: block; font-size: 22px; font-weight: 900; color: var(--navy); text-align: right; }
  .logo-grid { margin-top: 26px; gap: 26px 18px; }
  .logo-cell .lg { height: 74px; }
  .logo-cell .lg img { max-height: 74px; max-width: 108px; }

  /* --- السلايدات موبايل --- */
  .slide { padding: 26px 20px 34px; }
  .slide-head { grid-template-columns: 1fr auto; grid-template-areas: 'back group' '. count'; row-gap: 4px; }
  .slide-group { grid-area: group; font-size: 20px; }
  .slide-count { grid-area: count; justify-self: end; }
  .slide-back { grid-area: back; border: 0; background: none; padding: 0; font-size: 15px; color: var(--ink-soft); min-height: 40px; display: inline-flex; align-items: center; justify-self: start; }
  .slide-body { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 22px 0 0; }
  .slide-copy { max-width: none; }
  .slide-copy h1 { font-size: 38px; line-height: 1.3; }
  .slide-copy .para { font-size: 17px; }
  /* البورد على الموبايل: عرض كامل وارتفاع على قدر المحتوى وحشوة أخف */
  .visual { margin-top: 30px; min-height: 0; height: auto; max-height: none; order: 5; width: 100%; padding: 28px 20px; }

  /* نصوص الرسوم: المحتوى ≥13px والعناوين الصغيرة ≥16px */
  .v-chart .bl, .v-flow .cap, .v-compare .cap, .v-orbit .node span,
  .v-steps .step span, .v-venn .cap span, .v-skills .need li { font-size: 13px; }
  .v-steps .step b, .v-skills .need b, .v-venn .cap b, .v-eq .result b { font-size: 16px; }

  /* J1: الرسم نفسه أكبر — أعمدة أعرض وأطول (~70% من الكارت) وخط أساس وتسميات أوضح */
  .v-chart .bars { flex: none; height: 340px; gap: 58px; padding-top: 40px; } /* flex:none + ارتفاع محدد حتى تعمل نسب الأعمدة المئوية */
  .v-chart .bar { width: 96px; border-radius: 12px; }
  .v-chart .bar .bl { font-size: 15px; top: -30px; }
  .v-chart .axis { height: 3px; right: 4%; left: 4%; }
  .v-chart .pill { font-size: 14px; padding: 12px 22px; margin-top: 22px; }

  /* J2: «2008» والعنوان كبلوك مكدس (بلا تداخل) وتايم لاين يملأ الكارت */
  .v-ghost { position: static; font-size: 100px; line-height: .85; }
  .v-timeline { padding-top: 10px; }
  .v-timeline .tl { flex: none; height: 310px; min-height: 0; margin-right: 16px; display: flex; flex-direction: column; }
  .v-timeline .tl-item { flex: 1; height: auto; }
  .v-timeline .tl::before { width: 3px; }
  .v-timeline .tl-item { font-size: 17px; padding-right: 44px; }
  .v-timeline .tl-item::before { width: 16px; height: 16px; }
  .v-timeline .cap { font-size: 17px; padding: 18px; }

  /* J3: شبكة موبايل حقيقية — كرتان فوق، الدائرة في المنتصف، كرتان تحت (اقتصاد/مصارف ثم طب/تعليم) */
  .v-orbit { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: stretch; min-height: 0; margin-top: 16px; }
  .v-orbit .xline, .v-orbit .yline { display: none; }
  .v-orbit .node { position: static; width: auto; transform: none; padding: 18px 10px; }
  .v-orbit .center { position: static; transform: none; grid-column: 1 / -1; justify-self: center; margin: 6px 0; }
  .v-orbit .n2 { order: 1; } /* اقتصاد — يمين */
  .v-orbit .n1 { order: 2; } /* مصارف */
  .v-orbit .center { order: 3; }
  .v-orbit .n4 { order: 4; } /* طب — يمين */
  .v-orbit .n3 { order: 5; } /* تعليم */

  /* J6: المخطط يملأ الكارت بعناصر أكبر ومتمركزة */
  .v-flow { gap: 16px; }
  .v-flow .root { padding: 20px 36px; font-size: 17px; }
  .v-flow .arrows { width: 100%; justify-content: space-around; gap: 0; }
  .v-flow .pair { width: 100%; gap: 12px; }
  .v-flow .pair .chip { flex: 1; text-align: center; padding: 16px 10px; font-size: 15px; }
  .v-flow .wide { width: 100%; text-align: center; padding: 17px 10px; font-size: 15px; }

  .v-venn .stage { min-height: 240px; }
  /* دوائر أصغر ومتباعدة على الموبايل حتى لا تتداخل النصوص */
  .v-venn .c1, .v-venn .c2 { width: 148px; height: 148px; font-size: 14px; }
  .v-venn .c1 { right: 2%; }
  .v-venn .c2 { left: 2%; }
  .slide-nav { margin-top: 24px; padding-top: 0; }
  .slide-nav .btn-gold { flex: 1; border-radius: 18px; padding: 20px; font-size: 18px; font-weight: 900; }
  .slide-nav .btn-outline-ink { display: none; }
  .note-cta .btn { width: 100%; border-radius: 18px; padding: 20px; }

  /* --- الفيديو موبايل: العنوان ← الفيديو ← الملاحظة ← الأزرار --- */
  .video-screen { padding: 18px 20px 40px; border-top: 6px solid var(--gold); }
  .video-body { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .video-copy { display: contents; }
  .eyebrow-d { display: none; }
  .eyebrow-m { display: inline; }
  .video-body .eyebrow { order: 1; margin-top: 40px; font-size: 15px; }
  .video-copy h1 { order: 2; font-size: 42px; margin-top: 10px; line-height: 1.22; color: var(--navy); font-weight: 900; }
  .video-copy .para { display: none; }
  .video-card { order: 3; margin-top: 26px; width: 100%; max-width: none; aspect-ratio: 16 / 8.4; border-radius: 22px; }
  .m-video-note { order: 4; }
  .video-actions { order: 5; }
  .video-hint { order: 6; }
  .video-card .vc-title, .video-card .vc-tag { display: none; }
  .video-card .vc-play { top: 50%; transform: translate(50%, -50%); }
  .video-card .vc-play:hover { transform: translate(50%, -50%); }
  .video-card .deco-a { top: auto; bottom: -90px; right: -120px; width: 300px; height: 300px; border-radius: 50%; background: transparent; border: 40px solid var(--gold); }
  .video-card .deco-b { display: none; }
  .video-card .vc-foot .track { display: none; }
  .m-video-note { margin-top: 26px; font-size: 17px; color: var(--ink-soft); }
  .video-actions { max-width: none; margin-top: 24px; }
  .video-actions .btn { border-radius: 18px; padding: 21px; font-size: 18px; font-weight: 900; }
  .video-actions .btn-navy { background: var(--gold); color: var(--navy); }
  .video-actions .btn-outline-ink { background: transparent; }
  .video-hint { display: none; }

  /* --- المودالات موبايل: النافذة داخل الشاشة والتمرير داخلها فقط --- */
  .overlay { padding: 12px; align-items: center; }
  .overlay.center-m { align-items: center; padding: 24px 16px; }
  .modal-card {
    max-width: none; border-radius: 28px; margin: 0; padding: 30px 28px;
    display: flex; flex-direction: column;
    max-height: calc(100dvh - 24px); overflow-y: auto;
  }
  .modal-logo { justify-content: center; }
  .modal-logo img { height: 60px; }
  /* مساحات ضغط لا تقل عن 40px للأزرار الثانوية */
  .modal-close { min-width: 40px; min-height: 40px; display: flex; align-items: center; justify-content: center; padding: 0; }
  .pill-start { min-height: 40px; }
  .modal-card h2 { font-size: 42px; margin-top: 24px; }
  .modal-card .m-desc { font-size: 17px; }
  .field { margin-top: 30px; }
  .field label { font-size: 17px; }
  .field input { padding: 20px 18px; border-radius: 16px; font-size: 17px; }
  .field .flabel { font-size: 17px; }
  .interest-btn { padding: 18px 10px; border-radius: 16px; font-size: 17px; }
  .modal-submit { margin-top: 26px; border-radius: 18px; padding: 20px; font-size: 18px; }
  .modal-foot { font-size: 13px; margin-top: 20px; }

  .center-m .modal-card { margin: 16px; padding: 44px 28px; }
  .success-card h2 { margin-top: 26px; font-size: 38px; }
}

/* ============================================================
   Motion — حركة هادئة تخدم المعنى (transform/opacity فقط، بلا layout shift)
   تُفعَّل عبر JS فقط عندما لا يكون prefers-reduced-motion مفعّلًا.
   ============================================================ */
@keyframes mFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mFadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes mScaleIn { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes mCardScale { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: none; } }
@keyframes mIn2 { from { opacity: 0; transform: translate(var(--fx, 0), var(--fy, 12px)); } to { opacity: 1; transform: none; } }
/* للعناصر التي لها transform أساسي للتوسيط (--bx/--by): الإزاحة مؤقتة للدخول فقط
   وتنتهي الحركة على قيمة التوسيط الأصلية بالضبط — بلا أي offset باقٍ */
@keyframes mIn2B {
  from { opacity: 0; transform: translate(var(--bx, 0%), var(--by, 0%)) translate(var(--fx, 0px), var(--fy, 0px)); }
  to { opacity: 1; transform: translate(var(--bx, 0%), var(--by, 0%)); }
}
@keyframes mScaleInB {
  from { opacity: 0; transform: translate(var(--bx, 0%), var(--by, 0%)) scale(.96); }
  to { opacity: 1; transform: translate(var(--bx, 0%), var(--by, 0%)); }
}
@keyframes mGrowX { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes mGrowY { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes mPop { 0% { opacity: 0; transform: scale(.6); } 60% { transform: scale(1.12); } 100% { opacity: 1; transform: scale(1); } }
@keyframes mDot { 0% { transform: scale(0); } 55% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes mGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(207, 159, 66, 0); } 45% { box-shadow: 0 0 0 7px rgba(207, 159, 66, .22); } }
@keyframes mRing { from { stroke-dashoffset: 290; } to { stroke-dashoffset: 0; } }
@keyframes mModalIn { from { opacity: 0; transform: translateY(15px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes mRot { to { transform: rotate(360deg); } }
@keyframes mSwapOut { 0%, 55% { opacity: 1; } 100% { opacity: 0; } }
@keyframes mSwapIn { 0%, 55% { opacity: 0; } 100% { opacity: 1; } }
/* صعود بلا opacity — للخلايا التي تحتوي blend حتى لا يظهر وميض أبيض */
@keyframes mRise { from { transform: translateY(16px); } to { transform: none; } }

/* أصول التحويل للرسوم (بلا تأثير بدون حركة) */
.v-chart .bar { transform-origin: bottom; }
.v-chart .axis { transform-origin: left; }
.v-timeline .tl::before { transform-origin: top; }
.hline { display: inline-block; }

/* Crossfade «إيداع → إبداع»: الوضع الساكن يعرض «إبداع» فقط */
.v-compare .chip.swap { position: relative; }
.v-compare .chip.swap .w1 { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; }

/* دائرة الاستثمار SVG (نفس الشكل الساكن السابق تمامًا) */
.v-ring svg.circle { position: absolute; inset: 8%; width: 84%; height: 84%; overflow: visible; }
.v-ring svg.circle circle { fill: none; stroke: rgba(207, 159, 66, .85); stroke-width: 1.6; }

/* سبينر زر الإرسال */
.spin {
  display: inline-block; width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid rgba(15, 35, 62, .3); border-top-color: var(--navy);
  vertical-align: -2px; margin-inline-start: 2px;
}

@media (prefers-reduced-motion: no-preference) {
  .btn { transition: transform .18s ease, box-shadow .18s ease, background .15s ease; }
  .btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(9, 24, 43, .16); }
  .btn:active { transform: translateY(0); }
  .btn .arr { display: inline-block; transition: transform .18s ease; }
  .btn:hover .arr { transform: translateX(-4px); } /* الأسهم كلها تشير لليسار (←) */
  .interest-btn { transition: background .12s ease, border-color .12s ease, transform .15s ease; }
  .interest-btn:hover { transform: translateY(-1px); }

  /* عناصر محجوزة لحين دخولها */
  .pre { opacity: 0; }

  /* حركات العناصر الزائفة داخل الرسوم — تُفعّل بإضافة .anim على البطاقة */
  .anim .v-timeline .tl::before { animation: mGrowY 550ms ease var(--d-line, 450ms) both; }
  .anim .v-timeline .tl-item::before { animation: mDot 500ms ease var(--d, 0ms) both; }
  .anim .v-ring svg.circle circle { stroke-dasharray: 290; animation: mRing 750ms ease-out var(--d, 0ms) both; }
  .anim .v-compare .chip.swap .w1 { animation: mSwapOut 1000ms ease var(--d, 1000ms) both; }
  .anim .v-compare .chip.swap .w2 { animation: mSwapIn 1000ms ease var(--d, 1000ms) both; }
  .spin { animation: mRot .7s linear infinite; }
}

/* ديسكتوب فقط: إخفاء عناصر الموبايل */
@media (min-width: 821px) {
  .btn-m-start, .m-video-note { display: none; }

  /* هوم ديسكتوب: اللوجو وحده أعلى اليمين (أكبر قليلاً)، بدون نص «عالم النماء»
     وبدون بادج «ابدأ رحلتك» في الهيدر وبدون الـ Kicker — تبقى في الموبايل كما هي */
  .home .pill-start-h { display: none; }
  .home .brand span { display: none; }
  .home .tag-pill { display: none; }
  .home .brand img { height: 72px; }
}