/* =============================== */
/* PRO v2 styling (FINAL RTL/EN)   */
/* =============================== */

:root{
  --brand:#0b57cf;
  --ink:#0b1b2b;
  --muted:#5e6c7a;
  --bg:#f7fafc;
  --ring:rgba(11,87,207,.25);
}

*{box-sizing:border-box}
html,body{
  margin:0; padding:0;
  font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink); background:var(--bg);
  max-width:100%; overflow-x:hidden;
}
.container{width:min(1160px,92vw); margin-inline:auto}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
.small{font-size:.85rem}
.muted{color:var(--muted)}

/* ================= Header / Nav ================= */
.site-header{
  position:sticky; top:0; z-index:1000;
  background:rgba(255,255,255,.95);
  backdrop-filter:saturate(1.2) blur(10px);
  border-bottom:1px solid #e8eef6;
}
.header-inner{
  display:flex; align-items:center; gap:20px;
  padding:10px 0;
}
.brand{display:flex; align-items:center; gap:12px; color:inherit; text-decoration:none}
.logo{width:40px; height:40px}
.brand-title{font-weight:800}
.brand-sub{font-size:12px; color:#47607b}
.brand .moic-inline{height:40px; width:auto; object-fit:contain; margin-inline-start:8px}

/* القائـمة الافتراضية على الديسكتوب */
.nav{margin-left:auto; display:flex; gap:18px; align-items:center}

/* ألوان روابط المينيو على الديسكتوب */
.site-header .nav a{
  color:#0a1b4d !important;   /* أزرق غامق */
  font-weight:600;
  text-decoration:none;
}
.site-header .nav a:hover{ color:#083c99 !important; }

/* Language buttons */
.lang-switch{display:flex; gap:6px; margin-left:12px}
.lang{
  border:1px solid #cfe0f7; background:#fff;
  border-radius:999px; padding:.35rem .6rem; font-weight:700;
}
.lang.active{background:var(--brand); border-color:var(--brand); color:#fff}

/* ================= Buttons ================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.8rem 1.05rem; border-radius:12px;
  border:1px solid #cfe0f7; font-weight:700;
  box-shadow:0 8px 18px rgba(0,0,0,.06);
}
.btn-nav{background:#fff}
.btn-primary{background:var(--brand); border-color:var(--brand); color:#fff}
.btn-outline{background:#fff; color:#0a273f}
.btn-full{width:100%}

/* ================= Hero ================= */
.hero{position:relative; color:#fff}
.hero-harbour{
  position:relative; min-height:68vh;
  background:#061a30 url('assets/financial-harbour.png') center bottom/contain no-repeat;
  background-attachment:scroll;
}
.hero .backdrop{position:absolute; inset:0; background:linear-gradient(180deg, rgba(6,26,48,.6), rgba(6,26,48,.75));}
.hero-grid{position:relative; display:grid; grid-template-columns:1.1fr .9fr; gap:32px; align-items:stretch; padding:56px 0}
.hero-copy h1{font-size:44px; line-height:1.08; margin:8px 0 10px}
.hero-sub{font-weight:600}
.lead{margin:8px 0 18px; color:#e6f0ff}
.pills{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px}
.pill{background:#ffffff22; border:1px solid #ffffff33; color:#fff; border-radius:999px; padding:.4rem .7rem; font-weight:700}
.glass{backdrop-filter:blur(6px) saturate(1.2); background:linear-gradient(#ffffffee,#ffffffee); border:1px solid #e6eef6; border-radius:16px; padding:18px; color:#0b1b2b}

/* ================= Forms ================= */
.field{display:flex; flex-direction:column; gap:6px; margin:8px 0}
.field input,.field select,.field textarea{padding:.8rem .9rem; border-radius:12px; border:1px solid #d6e3f4; outline:none; background:#fff}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--brand); box-shadow:0 0 0 4px var(--ring)}
.field.two{display:grid; grid-template-columns:.6fr 1fr; gap:10px}
.helper{font-size:.8rem; color:#5b6b7c; margin-top:6px}

/* ================= Sections / Cards ================= */
.section{padding:56px 0}
.alt{background:#ffffff}
.grid.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.card{border:1px solid #e6eef6; border-radius:16px; padding:18px; background:#fff}
.card.dark{background:#0f2341; color:#e6f0ff; border-color:transparent}
.card.accent{border-color:#b9d4ff; background:#f6faff}
.grid.features{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.feature{border:1px solid #e6eef6; border-radius:14px; background:#fff; padding:16px}

.timeline{list-style:none; display:grid; gap:18px; margin:0; padding:0}
.timeline li{display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start; background:#fff; border:1px solid #e6eef6; border-radius:14px; padding:14px}
.t-badge{font-weight:900; color:#6ba0ff}

/* ================= Footer ================= */
.footer{border-top:1px solid #e8eef6; background:#061629; color:#cfe0f7}
.foot-grid{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 0}
.left{display:flex; gap:12px; align-items:center}
.right{display:flex; gap:16px; flex-wrap:wrap}
.footer-accredit{display:flex; justify-content:center; align-items:center; text-align:center; margin-top:8px}
.accredit-text{font-weight:800}

/* ================= WhatsApp ================= */
.float-wa{
  position:fixed; right:16px; bottom:16px;
  width:56px; height:56px; border-radius:50%;
  background:#25D366; display:grid; place-items:center;
  box-shadow:0 10px 24px rgba(2,12,24,.25);
  z-index:12000;
}
.float-wa img{width:28px; height:28px}

/* ================= Responsive ================= */

/* لا تُخفِ الهيدر نهائياً على العربية — نُخفي القائمة فقط */
html[lang="ar"] body{font-family:'Tajawal',Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif}

/* تصغير شعار الوزارة */
.moic-logo{ max-width:220px; height:auto; }
@media (max-width:980px){ .moic-logo{ max-width:150px; } }

/* موبايل & تابلت */
@media (max-width:980px){
  /* ترتيب الهيدر */
  .header-inner{
    display:grid !important;
    grid-template-columns:auto 1fr;
    grid-template-areas:
      "brand lang"
      "nav   nav";
    align-items:center; gap:10px;
  }
  .brand{grid-area:brand}
  .lang-switch{grid-area:lang; justify-self:end}
  .brand-sub, .moic-inline{display:none}

  /* ✅ أخفِ القائمة فقط على الموبايل */
  .site-header .nav{ display:none !important; }

  .hero-grid,.grid.cards,.grid.features{grid-template-columns:1fr}
  .field.two{grid-template-columns:1fr 1fr}
  .hero-copy h1{font-size:clamp(28px,7vw,34px); line-height:1.12}
  .hero-harbour{background-position:center bottom; background-size:contain}
}

/* ديسكتوب */
@media (min-width:981px){
  .header-inner{display:flex}
  .nav{display:flex !important; flex-direction:row; gap:18px; align-items:center; margin-left:auto; overflow:visible}
}

/* تأثير بارالاكس بسيط */
@media (min-width:1024px){
  .hero-harbour{background-attachment:fixed; background-position:center bottom}
}

/* فوتر على الشاشات الصغيرة */
@media (max-width:768px){
  .footer-accredit{display:flex; justify-content:center; align-items:center; text-align:center; margin-top:8px}
}