/* ============================================================================
   بطاقات الإهداء — هوية فيصل لذكاء الأعمال
   يُحمَّل بعد تنسيقات الصفحة فيتجاوزها.

   واجهة البطاقات مبنية على خمسة متغيرات فقط، فإعادة تعريفها يكفي لتغيير
   الواجهة كلها. وما بعدها لمسات على العناصر التي كانت تستعمل اللون
   الأساسي في موضع يليق به الذهبي.
   ============================================================================ */

:root{
  /* الهوية */
  --navy:#071A33; --navy-2:#0B294E; --navy-3:#123A6B;
  --gold:#C6A15B; --gold-2:#E2C584; --gold-soft:#F7EEDC;

  /* المتغيرات الخمسة التي تقوم عليها الصفحة */
  --main:#123A6B;
  --bg:#F5F7FB;
  --line:#E2E8F0;
  --text:#13243B;
  --muted:#5F6D7C;
}

/* ── الترويسة ── */
.top{background:var(--navy);border-bottom:0;color:#fff}
.top a{color:#fff;text-decoration:none}
.top .brand{color:#fff;font-weight:700}
.top .dot{background:var(--gold)}

/* ── الواجهة العلوية ── */
.hero{
  background:linear-gradient(135deg,var(--navy) 0%,var(--navy-2) 55%,var(--navy-3) 100%);
  color:#fff;
}
.hero h1{color:#fff}
.hero p{color:#c2d0e2}
.hero .ic{filter:drop-shadow(0 6px 18px rgba(198,161,91,.35))}

/* ── البطاقات واللوحات ── */
.panel{border:1px solid var(--line);box-shadow:0 1px 2px rgba(19,36,59,.04),0 10px 30px rgba(19,36,59,.07)}
.occ{box-shadow:0 1px 2px rgba(19,36,59,.04),0 10px 26px rgba(19,36,59,.07)}
.occ:hover{transform:translateY(-3px)}

/* ── أرقام الخطوات: ذهبي داكن على ذهبي فاتح ── */
.num{background:var(--gold-soft);color:#8D6828;border:1px solid #EBDCBE;font-weight:700}

/* ── الإجراء الرئيسي ذهبي، وما دونه كحلي ── */
.go{
  background:linear-gradient(135deg,var(--gold),var(--gold-2));
  color:var(--navy);
}
.go:hover{filter:brightness(1.05)}

/* ── التصميم المختار: حلقة ذهبية ── */
.design.on{
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(198,161,91,.28);
}
.occ.on,.t.on{border-color:var(--gold)}

/* ── شريط التقدّم ── */
.bar{background:#E8EDF4}
.bar>*{background:linear-gradient(90deg,var(--gold),var(--gold-2))}

/* ── الروابط ── */
.link,a.link{color:var(--navy-3)}
.link:hover,a.link:hover{color:var(--gold)}

/* ── الشعار بدل الرموز التعبيرية ──
   العنصران يحملان ✨ و ✦ نصًّا داخل الصفحة. نُخفي النص ونضع الشعار
   خلفيةً، فيُستبدلان بلا تعديل في بنية الصفحة. */
.hero .ic{
  font-size:0 !important; color:transparent !important; line-height:0;
  width:120px; height:80px; margin:0 auto 10px;
  background-image:url("/ft-site/assets/brand/logo-mark.png");
  background-size:contain; background-repeat:no-repeat; background-position:center;
  filter:drop-shadow(0 10px 22px rgba(198,161,91,.30));
}
.top .dot{
  font-size:0 !important; color:transparent !important;
  display:inline-block; width:30px; height:30px; vertical-align:middle;
  background-image:url("/ft-site/assets/brand/icon-192.png");
  background-size:contain; background-repeat:no-repeat; background-position:center;
  border-radius:9px;
}

@media(max-width:600px){ .hero .ic{width:96px;height:64px} }

/* ── التذييل بهوية الموقع ── */
footer{
  background:var(--navy);
  color:#8FA3BC;
  border-top:3px solid var(--gold);
}
footer a{color:#C7D3E2;font-weight:600;text-decoration:none}
footer a:hover{color:var(--gold-2)}