/* ═══════════════════════════════════════════════════════════
   الفنار للتوظيف — نظام التصميم
   اللوحة: أخضر زيتوني عميق + ذهبي، على أرضية عاجية دافئة.
   الفكرة: الفنار = منارة، فالذهبي محجوز للضوء وحده.
   ثلاث حالات للمظهر: مضيء / ليلي / تلقائي (يتبع النظام).
   ═══════════════════════════════════════════════════════════ */

/* ── الرموز اللونية: الوضع المضيء هو الأساس ──────────────── */
:root{
  --deep:#10402f;  --deep-2:#0b2e22;      /* الأشرطة الداكنة والفوتر */
  --on-deep:#eef5f0; --on-deep-2:#a9c6b5; /* النص فوقها (ثابت في الوضعين) */

  --brand:#1b6b4c; --brand-strong:#12523a; --brand-soft:#2a8a63; --on-brand:#ffffff;
  --gold:#c9a227;  --gold-lit:#e3c15c;    --gold-ink:#2a2005;

  --paper:#ffffff; --tint:#f6f4ee; --line:#e4e0d4;
  --ink:#16211c;   --ink2:#4a5a52; --ink3:#5e6e66;
  --heading:var(--deep);                  /* ← ينقلب في الوضع الليلي */

  --ok:#1b6b4c; --err-bg:#fdecea; --err-line:#f0c2bb; --err-ink:#8e2417;
  --shadow:0 1px 2px rgba(16,64,47,.05), 0 10px 30px -14px rgba(16,64,47,.22);
  --shadow-lift:0 2px 4px rgba(16,64,47,.06), 0 22px 44px -18px rgba(16,64,47,.34);

  --r:14px; --r-s:9px;
  --wrap:1180px; --narrow:760px;
  --pad:clamp(1.25rem,4vw,2.5rem);
  --sec:clamp(3.5rem,7vw,6.5rem);
  --font-ar:"IBM Plex Sans Arabic",system-ui,"Segoe UI",Tahoma,sans-serif;
  --font-en:"IBM Plex Sans",system-ui,"Segoe UI",Helvetica,Arial,sans-serif;
  --lh:1.85;
  color-scheme:light;
}
.lang-en{ --lh:1.68; }

/* الوضع الليلي — تلقائياً مع النظام، ما لم يختر الزائر «مضيء» صراحة */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --deep:#07130d; --deep-2:#040c08;
    --brand:#4fbf8b; --brand-strong:#6ed3a3; --brand-soft:#3fa876; --on-brand:#06130c;
    --gold:#e8c557; --gold-lit:#f4d879; --gold-ink:#20190a;
    --paper:#0b1712; --tint:#11201a; --line:#22362c;
    --ink:#e8f0ea; --ink2:#a9bcb1; --ink3:#8ca298;
    --heading:#dcebe1;
    --ok:#4fbf8b; --err-bg:#3a1512; --err-line:#6b2a20; --err-ink:#f5b8ae;
    --shadow:0 1px 2px rgba(0,0,0,.35), 0 10px 30px -14px rgba(0,0,0,.65);
    --shadow-lift:0 2px 6px rgba(0,0,0,.4), 0 24px 48px -18px rgba(0,0,0,.75);
    color-scheme:dark;
  }
}
/* واختياره صراحةً يغلب النظام في الاتجاهين */
:root[data-theme="dark"]{
  --deep:#07130d; --deep-2:#040c08;
  --brand:#4fbf8b; --brand-strong:#6ed3a3; --brand-soft:#3fa876; --on-brand:#06130c;
  --gold:#e8c557; --gold-lit:#f4d879; --gold-ink:#20190a;
  --paper:#0b1712; --tint:#11201a; --line:#22362c;
  --ink:#e8f0ea; --ink2:#a9bcb1; --ink3:#8ca298;
  --heading:#dcebe1;
  --ok:#4fbf8b; --err-bg:#3a1512; --err-line:#6b2a20; --err-ink:#f5b8ae;
  --shadow:0 1px 2px rgba(0,0,0,.35), 0 10px 30px -14px rgba(0,0,0,.65);
  --shadow-lift:0 2px 6px rgba(0,0,0,.4), 0 24px 48px -18px rgba(0,0,0,.75);
  color-scheme:dark;
}

/* ── الأساس ──────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:6.5rem; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-ar); font-size:clamp(1rem,.97rem + .18vw,1.0625rem);
  line-height:var(--lh); font-weight:400; -webkit-font-smoothing:antialiased;
  transition:background-color .35s ease, color .35s ease;
}
.lang-en body{ font-family:var(--font-en); }
img,svg,picture,iframe{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; }
h1,h2,h3{ line-height:1.28; margin:0; font-weight:600; letter-spacing:-.01em; }
h1{ font-size:clamp(2.1rem,1.15rem + 4.2vw,3.85rem); font-weight:700; letter-spacing:-.025em; }
h2{ font-size:clamp(1.6rem,1.1rem + 2.1vw,2.5rem); font-weight:700; letter-spacing:-.02em; }
h3{ font-size:1.125rem; font-weight:600; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
button{ font:inherit; color:inherit; }

[hidden]{ display:none !important; }
::selection{ background:var(--gold); color:var(--gold-ink); }
:focus-visible{ outline:3px solid var(--gold); outline-offset:3px; border-radius:4px; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }
.wrap--narrow{ max-width:var(--narrow); }
.skip{
  position:fixed; inset-block-start:-100px; inset-inline-start:1rem; z-index:99;
  background:var(--deep); color:var(--on-deep); padding:.7rem 1.1rem;
  border-radius:0 0 var(--r-s) var(--r-s); text-decoration:none; transition:inset-block-start .18s;
}
.skip:focus{ inset-block-start:0; }

/* ── الحركة: نظام واحد يغذّي كل الأقسام ──────────────────── */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.22,.72,.3,1), transform .7s cubic-bezier(.22,.72,.3,1); }
.reveal.is-in{ opacity:1; transform:none; }

.stagger.reveal{ transform:none; }                 /* الأبناء هم من يتحرك */
.stagger > *{ opacity:0; transform:translateY(24px) scale(.985); }
.stagger.is-in > *{ animation:rise .68s cubic-bezier(.22,.72,.3,1) forwards; animation-delay:calc(var(--i,0) * 85ms); }
@keyframes rise{ to{ opacity:1; transform:none; } }

@keyframes sweepIn{ from{ opacity:0; transform:translateY(28px); } to{ opacity:1; transform:none; } }
@keyframes glowPulse{ 0%,100%{ opacity:.86; } 50%{ opacity:1; } }
@keyframes shimmer{ 0%{ transform:translateX(-135%) skewX(-18deg); } 26%,100%{ transform:translateX(135%) skewX(-18deg); } }
@keyframes floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-7px); } }

/* ── الأزرار ─────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.78rem 1.5rem; border-radius:var(--r-s); border:1px solid transparent;
  font-weight:600; font-size:.98rem; text-decoration:none; cursor:pointer;
  position:relative; overflow:hidden; isolation:isolate;
  transition:background-color .18s, color .18s, border-color .18s, transform .18s, box-shadow .18s;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn svg{ inline-size:1.15em; block-size:1.15em; fill:currentColor; }
.btn--solid{ background:var(--brand); color:var(--on-brand); box-shadow:0 6px 18px -10px var(--brand); }
.btn--solid:hover{ background:var(--brand-strong); box-shadow:0 12px 26px -12px var(--brand); }
.btn--gold{ background:var(--gold); color:var(--gold-ink); box-shadow:0 8px 22px -12px var(--gold); }
.btn--gold:hover{ background:var(--gold-lit); box-shadow:0 14px 30px -12px var(--gold); }
/* لمعة تمر على الزر الذهبي — دعوة العمل الوحيدة التي تلفت النظر */
.btn--gold::after{
  content:""; position:absolute; inset-block:-50%; inline-size:38%; inset-inline-start:0; z-index:-1;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.72), transparent);
  animation:shimmer 5.5s 1.8s ease-in-out infinite;
}
.btn--ghost{ border-color:rgba(255,255,255,.42); color:#fff; }
.btn--ghost:hover{ background:rgba(255,255,255,.14); border-color:#fff; }
.btn--outline{ border-color:var(--line); background:var(--paper); color:var(--brand); }
.btn--outline:hover{ border-color:var(--brand); background:var(--tint); }
.btn--wa{ background:#1da851; color:#fff; }
.btn--wa:hover{ background:#179044; }
.btn[disabled]{ opacity:.55; pointer-events:none; transform:none; }

.lnk{ color:var(--brand); text-decoration:underline; text-underline-offset:.22em; text-decoration-thickness:1px; }
.lnk:hover{ color:var(--brand-strong); text-decoration-thickness:2px; }

/* ── ختم الترخيص: نقطة الضوء ─────────────────────────────── */
.seal{
  inline-size:.55rem; block-size:.55rem; border-radius:50%; flex:none;
  background:var(--gold); box-shadow:0 0 0 3px color-mix(in srgb, var(--gold) 26%, transparent);
  display:inline-block; animation:glowPulse 3.4s ease-in-out infinite;
}
.seal--lg{ inline-size:.7rem; block-size:.7rem; box-shadow:0 0 0 5px color-mix(in srgb, var(--gold) 22%, transparent); }

/* ── الشريط العلوي ───────────────────────────────────────── */
.topbar{ background:var(--deep); color:var(--on-deep-2); font-size:.845rem; }
.topbar__in{ display:flex; align-items:center; justify-content:space-between; gap:1rem; min-block-size:2.7rem; flex-wrap:wrap; }
.topbar__lic{ display:flex; align-items:center; gap:.5rem; }
.topbar__side{ display:flex; align-items:center; gap:1rem; }
.topbar__link{ display:inline-flex; align-items:center; gap:.4rem; text-decoration:none; transition:color .16s; }
.topbar__link:hover{ color:var(--on-deep); }
.topbar__link svg{ inline-size:1rem; block-size:1rem; fill:currentColor; opacity:.72; }
.topbar__link svg .s{ fill:none; stroke:var(--deep); stroke-width:1.6; }

.langbtn,.themebtn{
  background:none; border:1px solid rgba(255,255,255,.26); color:inherit;
  padding:.24rem .7rem; border-radius:99px; cursor:pointer; font-size:.82rem; font-weight:500;
  display:inline-flex; align-items:center; gap:.4rem;
  transition:background-color .18s, border-color .18s, color .18s;
}
.langbtn:hover,.themebtn:hover{ background:rgba(255,255,255,.14); color:var(--on-deep); border-color:rgba(255,255,255,.55); }
.themebtn .ico{ width:1rem; height:1rem; flex:none; fill:currentColor; }
.themebtn .ico .s{ fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; }
.themebtn .ico{ display:none; }
.themebtn[data-mode="auto"]  .ico--auto,
.themebtn[data-mode="light"] .ico--light,
.themebtn[data-mode="dark"]  .ico--dark{ display:block; animation:rise .3s ease; }

@media (max-width:700px){
  .topbar{ font-size:.8rem; }
  .topbar__link{ display:none; }
  .topbar__in{ flex-wrap:nowrap; }
  .topbar__lic{ min-inline-size:0; }
  .topbar__lic span:last-child{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .themebtn span{ display:none; }
  .themebtn{ padding:.3rem .5rem; }
}

/* ── الهيدر ──────────────────────────────────────────────── */
.site{
  position:sticky; inset-block-start:0; z-index:40;
  background:color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter:blur(12px); border-block-end:1px solid var(--line);
  transition:box-shadow .25s, background-color .35s;
}
.site.is-stuck{ box-shadow:0 8px 28px -20px rgba(16,64,47,.6); }
.site__in{ display:flex; align-items:center; gap:1.5rem; min-block-size:4.4rem; }
.brand{ display:block; }
.brand img{ block-size:2.35rem; inline-size:auto; transition:transform .3s; }
.brand:hover img{ transform:scale(1.04); }
/* اللوجو الأزرق يذوب في الخلفية الداكنة، فتظهر النسخة البيضاء بدلاً منه */
.brand__on-dark{ display:none; }
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .brand__on-light{ display:none; }
  :root:not([data-theme="light"]) .brand__on-dark{ display:block; }
}
:root[data-theme="dark"] .brand__on-light{ display:none; }
:root[data-theme="dark"] .brand__on-dark{ display:block; }
:root[data-theme="light"] .brand__on-light{ display:block; }
:root[data-theme="light"] .brand__on-dark{ display:none; }
.nav{ display:flex; gap:1.4rem; margin-inline-start:auto; font-size:.95rem; }
.nav a{ text-decoration:none; color:var(--ink2); padding-block:.35rem; position:relative; font-weight:500; transition:color .18s; }
.nav a::after{
  content:""; position:absolute; inset-block-end:0; inset-inline:0; block-size:2px;
  background:var(--gold); transform:scaleX(0); transition:transform .22s cubic-bezier(.22,.72,.3,1);
}
.nav a:hover{ color:var(--brand); }
.nav a:hover::after{ transform:scaleX(1); }
.site__cta{ padding:.62rem 1.25rem; }
.burger{ display:none; background:none; border:0; padding:.5rem; cursor:pointer; margin-inline-start:auto; }
.burger span{ display:block; inline-size:22px; block-size:2px; background:var(--ink); border-radius:2px; transition:transform .28s, opacity .2s; }
.burger span+span{ margin-block-start:5px; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (max-width:960px){
  .site__cta{ display:none; }
  .burger{ display:block; }
  .nav{
    position:absolute; inset-block-start:100%; inset-inline:0; background:var(--paper);
    border-block-end:1px solid var(--line); flex-direction:column; gap:0;
    padding:.5rem var(--pad) 1.25rem; display:none; box-shadow:var(--shadow);
  }
  .nav.is-open{ display:flex; animation:sweepIn .3s cubic-bezier(.22,.72,.3,1); }
  .nav a{ padding-block:.85rem; border-block-end:1px solid var(--line); }
  .nav a::after{ display:none; }
}

/* ── الهيرو ──────────────────────────────────────────────── */
.hero{
  position:relative; overflow:hidden; color:#fff;
  background:radial-gradient(135% 120% at 78% -10%, #1d6b4c 0%, var(--deep) 44%, var(--deep-2) 100%);
}
/* شعاع المنارة — العنصر الجريء الوحيد، يمسح ثم يتنفّس */
.hero__beam{
  position:absolute; inset-block-start:-20%; inset-inline-end:26%;
  inline-size:min(62vw,760px); block-size:165%;
  background:linear-gradient(to bottom,
    rgba(255,241,205,.85) 0%, rgba(240,205,120,.44) 20%,
    rgba(120,220,175,.18) 52%, transparent 82%);
  -webkit-mask-image:linear-gradient(to right, transparent 4%, #000 34%, #000 66%, transparent 96%);
          mask-image:linear-gradient(to right, transparent 4%, #000 34%, #000 66%, transparent 96%);
  filter:blur(16px); transform:rotate(16deg); transform-origin:50% 0;
  opacity:0; pointer-events:none; mix-blend-mode:screen;
  animation:beam 2.1s .3s cubic-bezier(.22,.72,.3,1) forwards, glowPulse 6.5s 2.5s ease-in-out infinite;
}
.hero__beam::after{
  content:""; position:absolute; inset-block:0; inset-inline-start:38%;
  inline-size:24%; filter:blur(10px);
  background:linear-gradient(to bottom, rgba(255,250,232,.92), rgba(255,232,180,.32) 30%, transparent 62%);
  -webkit-mask-image:linear-gradient(to right, transparent, #000 50%, transparent);
          mask-image:linear-gradient(to right, transparent, #000 50%, transparent);
}
.hero::before{
  content:""; position:absolute; inset-block-start:-7rem; inset-inline-end:31%;
  inline-size:18rem; block-size:18rem; border-radius:50%; pointer-events:none; z-index:1;
  background:radial-gradient(closest-side, rgba(255,244,214,.72), rgba(240,205,120,.24) 45%, transparent 72%);
  filter:blur(16px); animation:glowPulse 6.5s 2.5s ease-in-out infinite;
}
@keyframes beam{
  from{ opacity:0; transform:rotate(-2deg) scaleX(.4); }
  to  { opacity:1; transform:rotate(16deg) scaleX(1); }
}

.hero__in{
  position:relative; z-index:2; display:grid; gap:clamp(2rem,5vw,4rem);
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); align-items:center;
  padding-block:clamp(3.5rem,7vw,6rem);
}
/* دخول متتابع لعناصر الهيرو عند التحميل */
.hero__badge,.hero h1,.hero__lead,.hero__acts{ opacity:0; animation:sweepIn .85s cubic-bezier(.22,.72,.3,1) forwards; }
.hero__art{ opacity:0; animation:fadeIn .85s .4s cubic-bezier(.22,.72,.3,1) forwards; }
@keyframes fadeIn{ to{ opacity:1; } }
.hero__badge{ animation-delay:.15s; }
.hero h1{ animation-delay:.3s; }
.hero__lead{ animation-delay:.45s; }
.hero__acts{ animation-delay:.6s; }

.hero__badge{
  display:inline-flex; align-items:flex-start; gap:.6rem; font-size:.9rem; color:#ffeec4;
  border:1px solid color-mix(in srgb, var(--gold) 45%, transparent); border-radius:99px;
  padding:.45rem 1rem; margin-block-end:1.6rem; line-height:1.5;
  background:color-mix(in srgb, var(--gold) 12%, transparent);
}
.hero__badge .seal{ margin-block-start:.42em; }
.hero h1{ text-wrap:balance; }
.hero__lead{ margin-block-start:1.35rem; color:#c8ddd0; max-inline-size:52ch; font-size:1.08rem; }
.hero__acts{ margin-block-start:2.2rem; display:flex; gap:.85rem; flex-wrap:wrap; }
.hero__art{ position:relative; will-change:transform; transform:translate3d(0,var(--py,0px),0); }
.hero__art img{ border-radius:var(--r); inline-size:100%; box-shadow:0 34px 74px -30px rgba(0,0,0,.72); }

@media (max-width:900px){
  .hero__in{ grid-template-columns:1fr; }
  .hero__art{ order:-1; max-inline-size:560px; }
  .hero__beam{ inset-inline-end:-10%; }
}

/* ── شريط الثقة ──────────────────────────────────────────── */
.trust{ background:var(--deep); color:var(--on-deep); border-block-start:1px solid rgba(255,255,255,.08); }
.trust__in{ display:grid; grid-template-columns:repeat(4,1fr); }
.trust__i{ padding:1.6rem .5rem; text-align:center; border-inline-start:1px solid rgba(255,255,255,.12); }
.trust__i:first-child{ border-inline-start:0; }
.trust__i b{ display:block; font-size:1.25rem; font-weight:600; font-variant-numeric:tabular-nums; }
.trust__i span{ display:block; font-size:.83rem; color:var(--on-deep-2); margin-block-start:.2rem; }
@media (max-width:680px){
  .trust__in{ grid-template-columns:1fr 1fr; }
  .trust__i:nth-child(odd){ border-inline-start:0; }
  .trust__i:nth-child(n+3){ border-block-start:1px solid rgba(255,255,255,.12); }
}

/* ── الأقسام ─────────────────────────────────────────────── */
.sec{ padding-block:var(--sec); }
.sec--tint{ background:var(--tint); }
.sec__head{ max-inline-size:62ch; margin-block-end:clamp(2.25rem,4vw,3.25rem); }
.sec__head h2{ text-wrap:balance; color:var(--heading); }
.sec__head p{ margin-block-start:.9rem; color:var(--ink2); font-size:1.05rem; }

/* ── شبكة المجالات ───────────────────────────────────────── */
.grid6{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
}
.cell{ background:var(--paper); padding:1.9rem 1.6rem; transition:background-color .25s; }
.cell:hover{ background:var(--tint); }
.cell__i{ inline-size:2rem; block-size:2rem; fill:var(--brand); margin-block-end:1rem; transition:transform .35s cubic-bezier(.34,1.4,.64,1), fill .25s; }
.cell:hover .cell__i{ transform:translateY(-5px) rotate(-7deg) scale(1.08); fill:var(--gold); }
.cell__i .s{ fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.cell h3{ color:var(--heading); }
.cell p{ margin-block-start:.5rem; color:var(--ink2); font-size:.96rem; }
@media (max-width:860px){ .grid6{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .grid6{ grid-template-columns:1fr; } }

/* ── لماذا الفنار ────────────────────────────────────────── */
.whys{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1.5rem,3vw,2.5rem); }
.why{ padding-block-start:1.1rem; border-block-start:3px solid var(--brand); position:relative; }
.why::before{
  content:""; position:absolute; inset-block-start:-3px; inset-inline-start:0; block-size:3px;
  inline-size:0; background:var(--gold); transition:inline-size .6s cubic-bezier(.22,.72,.3,1);
}
.why:hover::before{ inline-size:100%; }
.why:last-child{ border-block-start-color:var(--gold); }
.why h3{ color:var(--heading); }
.why p{ margin-block-start:.55rem; color:var(--ink2); font-size:.96rem; }
@media (max-width:880px){ .whys{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .whys{ grid-template-columns:1fr; } }

/* ── الرحلة: خط سير يُرسم محطة بمحطة ─────────────────────── */
.path{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1.25rem,2.5vw,2rem); }
.path__s{ position:relative; padding-block-start:2.5rem; }
.path__s::before{
  content:""; position:absolute; inset-block-start:.44rem; inset-inline-start:0; inline-size:100%;
  block-size:2px; background:var(--line);
  transform:scaleX(0); transform-origin:left; transition:transform .75s cubic-bezier(.22,.72,.3,1);
}
[dir="rtl"] .path__s::before{ transform-origin:right; }
.path.is-in .path__s::before{ transform:scaleX(1); transition-delay:calc(var(--i,0) * 150ms); }
.path__s--end::before{ background:linear-gradient(to left,transparent,var(--line)); }
.lang-en .path__s--end::before{ background:linear-gradient(to right,transparent,var(--line)); }
.path__d{
  position:absolute; inset-block-start:0; inset-inline-start:0;
  inline-size:1rem; block-size:1rem; border-radius:50%;
  background:var(--paper); border:3px solid var(--brand);
  transform:scale(0); transition:transform .5s cubic-bezier(.34,1.56,.64,1);
}
.path.is-in .path__d{ transform:scale(1); transition-delay:calc(var(--i,0) * 150ms + 130ms); }
.path__s--end .path__d{ border-color:var(--gold); background:var(--gold); }
.path.is-in .path__s--end .path__d{ animation:glowPulse 3s 1.2s ease-in-out infinite; }
.path h3{ color:var(--heading); }
.path p{ margin-block-start:.5rem; color:var(--ink2); font-size:.96rem; }
@media (max-width:860px){
  .path{ grid-template-columns:1fr; gap:0; }
  .path__s{ padding-block-start:0; padding-block-end:2rem; padding-inline-start:2.25rem; }
  .path__s::before{ inset-block-start:.5rem; inset-inline-start:.44rem; inline-size:2px; block-size:100%;
    transform:scaleY(0); transform-origin:top; }
  [dir="rtl"] .path__s::before{ transform-origin:top; }
  .path.is-in .path__s::before{ transform:scaleY(1); }
  .path__s--end::before{ block-size:1.2rem; background:var(--line); }
  .lang-en .path__s--end::before{ background:var(--line); }
  .path__d{ inset-block-start:.05rem; }
}

/* ── الوظائف ─────────────────────────────────────────────── */
.filters{ display:flex; flex-wrap:wrap; gap:.5rem; margin-block-end:2rem; }
.chip{
  border:1px solid var(--line); background:var(--paper); color:var(--ink2);
  padding:.45rem 1rem; border-radius:99px; cursor:pointer; font-size:.9rem; font-weight:500;
  transition:background-color .2s, color .2s, border-color .2s, transform .2s;
}
.chip:hover{ border-color:var(--brand); color:var(--brand); transform:translateY(-2px); }
.chip[aria-pressed="true"]{ background:var(--deep); border-color:var(--deep); color:var(--on-deep); }

.joblist{ display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:1.5rem; }
.job{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--shadow);
  opacity:0; animation:rise .7s cubic-bezier(.22,.72,.3,1) forwards; animation-delay:calc(var(--i,0) * 110ms);
  transition:transform .3s cubic-bezier(.22,.72,.3,1), box-shadow .3s, border-color .3s;
}
.job:hover{ transform:translateY(-7px); box-shadow:var(--shadow-lift); border-color:color-mix(in srgb, var(--brand) 35%, var(--line)); }
.job__pic{ position:relative; aspect-ratio:16/9; background:var(--tint); overflow:hidden; }
.job__pic picture{ position:absolute; inset:0; }
.job__pic img{ inline-size:100%; block-size:100%; object-fit:cover; object-position:center 12%; transition:transform .55s cubic-bezier(.22,.72,.3,1); }
.job:hover .job__pic img{ transform:scale(1.06); }
.job__tags{ position:absolute; inset-block-start:.7rem; inset-inline-start:.7rem; display:flex; gap:.4rem; flex-wrap:wrap; z-index:1; }
.tag{
  font-size:.74rem; font-weight:600; padding:.22rem .6rem; border-radius:99px;
  background:color-mix(in srgb, var(--paper) 94%, transparent); color:var(--heading); backdrop-filter:blur(4px);
}
.tag--open{ background:var(--gold); color:var(--gold-ink); }
.tag--closed{ background:var(--tint); color:var(--ink3); }
.job__body{ padding:1.4rem 1.4rem 1.5rem; display:flex; flex-direction:column; flex:1; }
.job__meta{ font-size:.85rem; color:var(--ink3); }
.job__t{ margin-block-start:.35rem; color:var(--heading); font-size:1.2rem; }
.job__emp{ margin-block-start:.3rem; color:var(--ink2); font-size:.92rem; }
.job__sum{ margin-block-start:.85rem; color:var(--ink2); font-size:.95rem; }
.job details{ margin-block-start:1rem; border-block-start:1px solid var(--line); padding-block-start:.9rem; }
.job summary{ cursor:pointer; font-weight:600; color:var(--brand); font-size:.93rem; list-style:none; display:flex; align-items:center; gap:.45rem; }
.job summary::-webkit-details-marker{ display:none; }
.job summary::before{ content:"+"; font-size:1.1em; line-height:1; inline-size:1em; text-align:center; transition:transform .25s; }
.job details[open] summary::before{ content:"–"; transform:rotate(180deg); }
.job details[open] .job__d{ animation:sweepIn .4s cubic-bezier(.22,.72,.3,1); }
.job__d h4{ margin:1rem 0 .45rem; font-size:.85rem; color:var(--ink3); font-weight:600; }
.job__d ul{ display:grid; gap:.4rem; }
.job__d li{ position:relative; padding-inline-start:1.05rem; font-size:.93rem; color:var(--ink2); }
.job__d li::before{
  content:""; position:absolute; inset-inline-start:0; inset-block-start:.62em;
  inline-size:.35rem; block-size:.35rem; border-radius:50%; background:var(--gold);
}
.job__foot{ margin-block-start:1.35rem; }
.job__foot .btn{ inline-size:100%; }

.note{ margin-block-start:2rem; color:var(--ink2); font-size:.92rem; }
.note--seal{ display:flex; align-items:center; gap:.6rem; }
.empty{
  grid-column:1/-1; text-align:center; padding:3rem 1.5rem; border:1px dashed var(--line);
  border-radius:var(--r); background:var(--paper);
}
.empty p+p{ margin-block-start:.5rem; color:var(--ink2); font-size:.95rem; }
.empty .btn{ margin-block-start:1.25rem; }

/* ── شريط أصحاب العمل ────────────────────────────────────── */
.band{ position:relative; overflow:hidden; color:#fff; background:var(--deep); padding-block:var(--sec); }
.band__beam{
  position:absolute; inset-block-start:-40%; inset-inline-start:8%;
  inline-size:min(40vw,460px); block-size:180%; transform:rotate(-16deg);
  background:linear-gradient(to bottom,rgba(240,205,120,.20),rgba(120,220,175,.07) 45%,transparent 72%);
  -webkit-mask-image:linear-gradient(to right,transparent,#000 45%,#000 55%,transparent);
          mask-image:linear-gradient(to right,transparent,#000 45%,#000 55%,transparent);
  filter:blur(30px); pointer-events:none; mix-blend-mode:screen;
  animation:glowPulse 8s ease-in-out infinite;
}
.band__in{ position:relative; display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.band__lead{ margin-block:1.1rem 2rem; color:var(--on-deep-2); max-inline-size:52ch; }
.band__list{ display:grid; gap:.85rem; }
.band__list li{ position:relative; padding-inline-start:1.85rem; color:var(--on-deep); font-size:.98rem; }
.band__list li::before{
  content:""; position:absolute; inset-inline-start:0; inset-block-start:.52em;
  inline-size:.7rem; block-size:.7rem; border-radius:50%; border:2px solid var(--gold);
}
@media (max-width:820px){ .band__in{ grid-template-columns:1fr; } }

/* ── من نحن ──────────────────────────────────────────────── */
.about{ display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(2rem,5vw,4rem); align-items:center; margin-block-end:clamp(2.5rem,5vw,4rem); }
.about__copy h2{ color:var(--heading); }
.about__copy p{ margin-block-start:1.1rem; color:var(--ink2); max-inline-size:62ch; }
.about__team{ margin:0; }
.about__team img{ border-radius:var(--r); inline-size:100%; box-shadow:var(--shadow); }
.gal__h{ color:var(--heading); margin-block-end:1.25rem; }
.gal{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.gal__b{ padding:0; border:0; background:none; cursor:pointer; border-radius:var(--r); overflow:hidden; position:relative; }
.gal__b img{ inline-size:100%; aspect-ratio:3/2; object-fit:cover; transition:transform .55s cubic-bezier(.22,.72,.3,1); }
.gal__b::after{
  content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(16,64,47,.5), transparent 55%);
  opacity:0; transition:opacity .35s;
}
.gal__b:hover img{ transform:scale(1.07); }
.gal__b:hover::after{ opacity:1; }
@media (max-width:820px){ .about{ grid-template-columns:1fr; } .about__team{ max-inline-size:360px; } }
@media (max-width:560px){ .gal{ grid-template-columns:1fr; } }

/* ── بوابة الإسكندرية ────────────────────────────────────── */
.gate{ position:relative; overflow:hidden; color:#fff; background:var(--deep); padding-block:var(--sec); }
.gate__beam{
  position:absolute; inset-block-start:-45%; inset-inline-end:14%;
  inline-size:min(44vw,520px); block-size:190%; transform:rotate(15deg);
  background:linear-gradient(to bottom,rgba(240,205,120,.24),rgba(120,220,175,.08) 45%,transparent 72%);
  -webkit-mask-image:linear-gradient(to right,transparent,#000 45%,#000 55%,transparent);
          mask-image:linear-gradient(to right,transparent,#000 45%,#000 55%,transparent);
  filter:blur(26px); pointer-events:none; mix-blend-mode:screen;
  animation:glowPulse 7.5s ease-in-out infinite;
}
.gate__in{ position:relative; display:grid; grid-template-columns:1fr minmax(0,340px); gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.gate__k{ color:var(--gold); font-size:.9rem; font-weight:600; }
.gate h2{ margin-block-start:.7rem; max-inline-size:18ch; text-wrap:balance; }
.gate__p{ margin-block-start:1.2rem; max-inline-size:54ch; color:var(--on-deep-2); }
.gate__fig{ margin:0; will-change:transform; transform:translate3d(0,var(--py,0px),0); }
.gate__fig img{ border-radius:var(--r); inline-size:100%; box-shadow:0 26px 60px -28px rgba(0,0,0,.78); }
@media (max-width:820px){
  .gate__in{ grid-template-columns:1fr; }
  .gate__fig{ max-inline-size:300px; }
}

/* ── الأسئلة الشائعة ─────────────────────────────────────── */
.faq{ border-block-start:1px solid var(--line); }
.faq details{ border-block-end:1px solid var(--line); }
.faq summary{
  cursor:pointer; list-style:none; padding-block:1.15rem; padding-inline-end:2rem;
  font-weight:600; color:var(--heading); position:relative; font-size:1.03rem; transition:color .2s;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; position:absolute; inset-inline-end:.35rem; inset-block-start:1.55rem;
  inline-size:.6rem; block-size:.6rem; border-right:2px solid var(--brand);
  border-bottom:2px solid var(--brand); transform:rotate(45deg); transition:transform .28s, inset-block-start .28s;
}
.faq details[open] summary::after{ transform:rotate(225deg); inset-block-start:1.75rem; }
.faq details[open] p{ animation:sweepIn .4s cubic-bezier(.22,.72,.3,1); }
.faq summary:hover{ color:var(--brand); }
.faq p{ padding-block-end:1.35rem; padding-inline-end:2rem; color:var(--ink2); max-inline-size:68ch; }

/* ── النموذج ─────────────────────────────────────────────── */
.form{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.f{ display:flex; flex-direction:column; gap:.4rem; grid-column:1/-1; margin:0; }
.f--2{ grid-column:auto; }
.f label,.lbl{ font-size:.9rem; font-weight:600; color:var(--heading); }
.f input,.f select,.f textarea{
  font:inherit; font-size:.98rem; color:var(--ink); background:var(--paper);
  border:1px solid var(--line); border-radius:var(--r-s); padding:.72rem .9rem; inline-size:100%;
  transition:border-color .2s, box-shadow .2s, transform .2s;
}
.f textarea{ resize:vertical; min-block-size:6rem; }
.f input:focus,.f select:focus,.f textarea:focus{
  outline:none; border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent);
}
.f input:user-invalid,.f select:user-invalid{ border-color:#c0392b; }
.f input::placeholder,.f textarea::placeholder{ color:var(--ink3); }
.hint{ font-size:.83rem; color:var(--ink3); }
.hp{ position:absolute; inline-size:1px; block-size:1px; opacity:0; pointer-events:none; }

.file{ display:flex; align-items:center; gap:.85rem; flex-wrap:wrap; }
.file input[type=file]{ position:absolute; inline-size:1px; block-size:1px; opacity:0; }
.file label{ cursor:pointer; }
.file:has(input:focus-visible) label{ outline:3px solid var(--gold); outline-offset:3px; }
.file__name{ font-size:.9rem; color:var(--ink3); overflow-wrap:anywhere; }
.file__name.is-set{ color:var(--ok); font-weight:500; }

.cvwa{
  grid-column:1/-1; background:var(--tint); border:1px solid var(--line);
  border-inline-start:3px solid var(--gold); border-radius:var(--r-s);
  padding:.9rem 1.05rem; font-size:.93rem; color:var(--ink2);
}
.formerr{
  grid-column:1/-1; background:var(--err-bg); border:1px solid var(--err-line); color:var(--err-ink);
  padding:.85rem 1rem; border-radius:var(--r-s); font-size:.93rem;
  animation:sweepIn .35s cubic-bezier(.22,.72,.3,1);
}
.form__foot{ grid-column:1/-1; display:flex; align-items:center; gap:1.25rem; flex-wrap:wrap; }
.form__foot .hint{ max-inline-size:44ch; }
@media (max-width:640px){ .form{ grid-template-columns:1fr; } .f--2{ grid-column:1/-1; } }

.sent{
  background:var(--paper); border:1px solid var(--line); border-inline-start:4px solid var(--ok);
  border-radius:var(--r); padding:2rem; animation:sweepIn .5s cubic-bezier(.22,.72,.3,1);
}
.sent h3{ color:var(--ok); }
.sent p{ margin-block:.7rem 1.4rem; color:var(--ink2); }

.wafall{
  margin-block-start:2.25rem; padding-block-start:1.75rem; border-block-start:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:1.25rem; flex-wrap:wrap;
}
.wafall p{ color:var(--ink2); font-size:.95rem; max-inline-size:52ch; }

/* ── التواصل ─────────────────────────────────────────────── */
.contact{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2rem,4vw,3.5rem); align-items:start; }
.contact__info{ display:grid; gap:1.75rem; }
.ci h3{ color:var(--heading); font-size:.9rem; margin-block-end:.4rem; }
.ci p{ color:var(--ink2); font-size:.98rem; }
.ci p+p{ margin-block-start:.3rem; }
.ci .lnk{ display:inline-block; margin-block-start:.5rem; font-size:.95rem; }
.contact__map{ border-radius:var(--r); overflow:hidden; border:1px solid var(--line); }
.contact__map iframe{ inline-size:100%; block-size:clamp(300px,42vw,430px); border:0; }
@media (max-width:820px){ .contact{ grid-template-columns:1fr; } }

/* ── الفوتر ──────────────────────────────────────────────── */
.foot{ background:var(--deep); color:var(--on-deep-2); padding-block:clamp(3rem,5vw,4rem) 0; }
.foot__in{ display:grid; grid-template-columns:1.4fr .8fr .8fr; gap:2.5rem; padding-block-end:2.5rem; }
.foot__brand img{ block-size:2.6rem; inline-size:auto; margin-block-end:1.1rem; }
.foot__brand p{ font-size:.95rem; max-inline-size:38ch; }
.foot__lic{ display:flex; align-items:center; gap:.55rem; margin-block-start:1rem; font-size:.86rem; }
.foot__nav{ display:grid; gap:.7rem; align-content:start; }
.foot__nav a{ text-decoration:none; font-size:.95rem; transition:color .18s, padding-inline-start .18s; }
.foot__nav a:hover{ color:var(--gold); padding-inline-start:.35rem; }
.foot__soc a:hover{ color:var(--gold); }
.foot__soc span{ display:block; font-size:.86rem; margin-block-end:.85rem; }
.soc{ display:flex; gap:.6rem; }
.soc a{
  inline-size:2.4rem; block-size:2.4rem; display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.2); border-radius:50%;
  transition:background-color .2s, border-color .2s, transform .2s;
}
.soc a:hover{ background:rgba(255,255,255,.12); border-color:var(--gold); transform:translateY(-3px); }
.soc svg{ inline-size:1.1rem; block-size:1.1rem; fill:currentColor; }
.foot__base{ border-block-start:1px solid rgba(255,255,255,.12); padding-block:1.4rem; font-size:.85rem; }
@media (max-width:760px){ .foot__in{ grid-template-columns:1fr; gap:2rem; } }

/* ── زر واتساب عائم ──────────────────────────────────────── */
.wafab{
  position:fixed; inset-block-end:1.15rem; inset-inline-end:1.15rem; z-index:45;
  inline-size:3.4rem; block-size:3.4rem; border-radius:50%; background:#1da851; color:#fff;
  display:grid; place-items:center; box-shadow:0 10px 28px -8px rgba(29,168,81,.65);
  animation:floaty 4.5s ease-in-out infinite; transition:transform .2s, box-shadow .2s;
}
.wafab:hover{ transform:scale(1.1); box-shadow:0 14px 34px -8px rgba(29,168,81,.8); animation-play-state:paused; }
.wafab svg{ inline-size:1.7rem; block-size:1.7rem; fill:currentColor; }

/* ── معرض الصور ──────────────────────────────────────────── */
.lb{ border:0; padding:0; background:none; max-inline-size:min(1100px,92vw); max-block-size:92vh; }
.lb::backdrop{ background:rgba(6,20,14,.9); }
.lb[open]{ animation:rise .35s cubic-bezier(.22,.72,.3,1); }
.lb img{ inline-size:100%; block-size:auto; border-radius:var(--r); }
.lb__x{
  position:absolute; inset-block-start:.6rem; inset-inline-end:.6rem; z-index:2;
  inline-size:2.4rem; block-size:2.4rem; border:0; border-radius:50%; cursor:pointer;
  background:rgba(0,0,0,.55); color:#fff; font-size:1.5rem; line-height:1;
}

/* ── احترام تفضيل تقليل الحركة: يوقف كل ما سبق ───────────── */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .hero__beam{ opacity:1; transform:rotate(16deg); }
  .reveal,.stagger > *,.job,
  .hero__badge,.hero h1,.hero__lead,.hero__acts,.hero__art{ opacity:1; transform:none; }
  .path__s::before{ transform:scaleX(1); }
  .path__d{ transform:scale(1); }
  [data-parallax]{ transform:none !important; }
}
/* وشبكة أمان: إن لم يعمل IntersectionObserver لأي سبب، لا يختفي نص */
.no-io .reveal,.no-io .stagger > *,.no-io .job{ opacity:1 !important; transform:none !important; }
@media print{
  .reveal,.stagger > *,.job{ opacity:1 !important; transform:none !important; }
}