/* =============================================================
   مبادرات الابتكار — تنسيقات صفحة الترحيب
   الهوية: كحلي الشعار + برتقالي الشعار على خلفية ورق هندسي فاتح
   كل الألوان معرّفة في :root — غيّرها من مكان واحد.
   ============================================================= */

:root{
  /* --- الألوان (مأخوذة من الشعار) --- */
  --ink:        #1C3A52;   /* كحلي الشعار */
  --ink-deep:   #132635;   /* كحلي أغمق للعناوين */
  --steel:      #6F8496;   /* رمادي الشعار */
  --accent:     #FA7917;   /* برتقالي الشعار (للرسوم) */
  --accent-ink: #C4550A;   /* برتقالي أغمق (للنصوص، لوضوح أعلى) */
  --paper:      #EDF1F4;   /* خلفية الصفحة */
  --surface:    #FFFFFF;   /* خلفية البطاقات */
  --line:       #C3D0DA;   /* الخطوط والحدود */
  --line-soft:  #D8E0E7;

  /* --- الخطوط --- */
  --font: "IBM Plex Sans Arabic", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Courier New", monospace;

  /* --- المقاسات --- */
  --wrap: 1080px;
  --radius: 3px;          /* زوايا شبه حادة — أقرب للطابع الهندسي */
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font);
  font-weight:400;
  line-height:1.75;
  font-size:16px;
  overflow-x:hidden;
}

/* ورقة الرسم: شبكة هندسية خفيفة تتلاشى عند الأطراف */
.sheet{ position:relative; min-height:100vh; display:flex; flex-direction:column; }
.sheet::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px),
    linear-gradient(rgba(111,132,150,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(111,132,150,.16) 1px, transparent 1px);
  background-size: 96px 96px, 96px 96px, 16px 16px, 16px 16px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 22%, #000 25%, transparent 82%);
  mask-image: radial-gradient(120% 90% at 50% 22%, #000 25%, transparent 82%);
  opacity:.85;
}
.sheet > *{ position:relative; z-index:1; }

/* ============ الشريط العلوي ============ */
.rail{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  max-width:var(--wrap); width:100%; margin:0 auto;
  padding:18px 24px;
}
.rail__code{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  color:var(--steel); text-transform:uppercase;
}

/* زر تبديل اللغة */
.lang{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:6px 12px;
  font-family:var(--font); font-size:13px; font-weight:500;
  color:var(--steel); cursor:pointer;
  transition:border-color .2s, box-shadow .2s;
}
.lang:hover{ border-color:var(--ink); }
.lang:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.lang__sep{ width:1px; height:14px; background:var(--line); }
.lang__opt{ transition:color .2s; }
.lang__opt.is-active{ color:var(--ink); font-weight:600; }

/* ============ الواجهة الرئيسية ============ */
main{ flex:1 0 auto; }

.hero{
  max-width:var(--wrap); margin:0 auto;
  padding:24px 24px 72px;
  text-align:center;
}

.hero__logo{
  display:block; width:min(420px, 78vw); height:auto; margin:8px auto 0;
}

/* --- خط القياس الهندسي (العنصر المميّز) --- */
.dim{
  direction:ltr;                 /* رسم متماثل: يبقى بنفس الاتجاه دائماً */
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin:30px auto 34px; width:min(620px, 92vw);
}
.dim__tick{ width:1px; height:44px; background:var(--ink); opacity:.55; flex:none; }
.dim__bar{
  position:relative; flex:1 1 auto; height:1px; background:var(--ink); opacity:.55;
}
.dim__head{
  position:absolute; top:50%; width:0; height:0;
  border-top:4px solid transparent; border-bottom:4px solid transparent;
}
.dim__head--s{ left:0;  transform:translateY(-50%); border-right:9px solid var(--ink); }
.dim__head--e{ right:0; transform:translateY(-50%); border-left:9px solid var(--ink); }
.dim__label{
  flex:none; font-family:var(--font);
  font-size:clamp(22px, 3.6vw, 32px); font-weight:700;
  color:var(--accent-ink); white-space:nowrap; padding:0 6px;
}
[dir="rtl"] .dim__label{ direction:rtl; }

/* --- النصوص --- */
.hero__title{
  margin:0 auto; max-width:22ch;
  font-size:clamp(28px, 5.2vw, 46px); font-weight:700; line-height:1.35;
  color:var(--ink-deep); letter-spacing:-.005em;
}
.hero__lede{
  margin:20px auto 0; max-width:56ch;
  font-size:clamp(15px, 1.9vw, 17.5px); font-weight:300; color:#42586B;
}

.scope{
  list-style:none; margin:34px auto 0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px 12px;
}
.scope li{
  border:1px solid var(--line); background:rgba(255,255,255,.7);
  border-radius:var(--radius); padding:7px 16px;
  font-size:13.5px; font-weight:500; color:var(--ink);
}

/* --- الأزرار --- */
.actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:34px; }
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:13px 30px; border-radius:var(--radius);
  font-family:var(--font); font-size:15px; font-weight:600;
  text-decoration:none; cursor:pointer; border:1px solid var(--ink);
  transition:transform .15s, background-color .2s, color .2s, box-shadow .2s;
}
.btn--solid{ background:var(--ink); color:#fff; }
.btn--solid:hover{ background:var(--ink-deep); box-shadow:0 6px 18px rgba(28,58,82,.22); }
.btn--ghost{ background:transparent; color:var(--ink); }
.btn--ghost:hover{ background:rgba(28,58,82,.06); }
.btn:active{ transform:translateY(1px); }
.btn:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.btn--full{ width:100%; margin-top:8px; }

/* ============ ترويسة صفحة التواصل ============ */
.pagehead{ max-width:var(--wrap); margin:0 auto; padding:56px 24px 8px; text-align:center; }
.pagehead__eyebrow{
  margin:0; font-size:13px; font-weight:600; color:var(--steel);
}
.pagehead__title{
  margin:10px 0 0; font-size:clamp(26px, 4.4vw, 38px); font-weight:700; color:var(--ink-deep);
}
.pagehead__lede{
  margin:14px auto 0; max-width:52ch; font-size:16px; font-weight:300; color:#42586B;
}

/* رابط العودة في الشريط العلوي — بنفس شكل زر تبديل اللغة */
.rail__back{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:6px 12px;
  font-family:var(--font); font-size:13px; font-weight:500;
  color:var(--steel); text-decoration:none;
  transition:border-color .2s, color .2s;
}
.rail__back:hover{ border-color:var(--ink); color:var(--ink); }
.rail__back:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.rail__arrow{
  width:0; height:0; flex:none;
  border-top:4px solid transparent; border-bottom:4px solid transparent;
  border-inline-end:7px solid currentColor;
}

/* ============ التواصل ============ */
.contact{ max-width:var(--wrap); margin:0 auto; padding:34px 24px 64px; }

.contact__grid{
  display:grid; grid-template-columns:1fr 1fr; gap:20px;
}
/* عمود واحد في المنتصف (عند وجود بطاقة واحدة فقط) */
.contact__grid--single{
  grid-template-columns:minmax(0, 560px); justify-content:center;
}

.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:26px 24px;
  display:flex; flex-direction:column;
}
/* العناصر التالية (.card__kicker و .row) غير مستخدمة حالياً،
   وهي محفوظة لإعادة بطاقة بيانات الاتصال مستقبلاً */
.card__kicker{
  margin:0 0 16px; font-size:12.5px; font-weight:500; color:var(--steel);
}

.row{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:12px 0; border-top:1px solid var(--line-soft);
  text-decoration:none; color:inherit;
}
.row:first-of-type{ border-top:0; padding-top:0; }
.row__label{ font-size:13px; color:var(--steel); flex:none; }
.row__value{ font-size:14.5px; font-weight:500; color:var(--ink); text-align:end; }
a.row:hover .row__value{ color:var(--accent-ink); }
a.row:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* --- النموذج --- */
/* حقل مصيدة السبام: مخفي عن الزائر وعن قارئات الشاشة */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.field{ margin-bottom:14px; }
.field label{
  display:block; margin-bottom:6px; font-size:12.5px; font-weight:500; color:var(--steel);
}
.field input, .field textarea{
  width:100%; padding:11px 13px;
  background:#F7FAFC; border:1px solid var(--line); border-radius:var(--radius);
  font-family:var(--font); font-size:15px; color:var(--ink); line-height:1.6;
  transition:border-color .18s, background-color .18s;
}
.field textarea{ resize:vertical; min-height:104px; }
.field input:focus, .field textarea:focus{
  outline:none; border-color:var(--ink); background:#fff;
}
.field input.is-invalid, .field textarea.is-invalid{ border-color:#B3261E; background:#FEF6F5; }

.form__note{
  margin:12px 0 0; min-height:20px; font-size:13px; color:var(--steel);
}
.form__note.is-error{ color:#B3261E; }
.form__note.is-ok{ color:#1D6B45; }

/* ============ التذييل ============ */
.pagefoot{
  border-top:1px solid var(--line);
  background:rgba(255,255,255,.72);
  padding:18px 24px; text-align:center;
  font-size:12.5px; color:var(--steel);
}

/* ============ الاستجابة للأجهزة ============ */
@media (max-width: 860px){
  .contact__grid{ grid-template-columns:1fr; }
}
@media (max-width: 520px){
  body{ font-size:15.5px; }
  .hero{ padding-bottom:52px; }
  .dim{ gap:8px; }
  .dim__tick{ height:34px; }
  .actions .btn{ width:100%; }
  .row{ flex-direction:column; align-items:flex-start; gap:2px; }
  .row__value{ text-align:start; }
}

/* ============ حركة الدخول ============ */
/* تعتمد على CSS فقط، لذلك تعمل حتى لو تعطّلت أكواد JavaScript */
@keyframes rise{ from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:none; } }
@keyframes draw{ from{ transform:scaleX(0);} to{ transform:scaleX(1);} }
@keyframes fadeIn{ from{ opacity:0;} to{ opacity:1;} }
@keyframes fadeTick{ from{ opacity:0;} to{ opacity:.55;} }

.reveal{ animation:rise .6s cubic-bezier(.2,.7,.3,1) both; }
.hero__logo.reveal{ animation-delay:.05s; }
.dim.reveal{ animation-delay:.18s; }
.hero__title.reveal{ animation-delay:.34s; }
.hero__lede.reveal{ animation-delay:.42s; }
.scope.reveal{ animation-delay:.50s; }
.actions.reveal{ animation-delay:.58s; }
.pagehead__eyebrow.reveal{ animation-delay:.05s; }
.pagehead__title.reveal{ animation-delay:.14s; }
.pagehead__lede.reveal{ animation-delay:.24s; }

/* خط القياس يُرسم من المنتصف نحو الطرفين */
.dim__bar{ animation:draw .7s cubic-bezier(.2,.8,.25,1) .30s both; }
.dim__tick{ animation:fadeTick .35s ease .95s both; }
.dim__head{ animation:fadeIn .35s ease .95s both; }

/* احترام تفضيل تقليل الحركة */
@media (prefers-reduced-motion: reduce){
  .reveal, .dim__bar, .dim__tick, .dim__head{ animation:none; }
  .btn, .lang, .row, .field input, .field textarea{ transition:none; }
}

/* ============ الطباعة ============ */
@media print{
  .sheet::before, .lang, .actions{ display:none; }
  body{ background:#fff; }
}