/* ==========================================================================
   قلم فرح للدعاية والإعلان — FARAH PEN
   farahpen.com · النظام البصري الكامل
   ========================================================================== */

/* ---------- الخطوط ---------- */
@font-face{font-family:'Tajawal';src:url('../fonts/Tajawal-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Tajawal';src:url('../fonts/Tajawal-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Tajawal';src:url('../fonts/Tajawal-Bold.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Tajawal';src:url('../fonts/Tajawal-ExtraBold.woff2') format('woff2');font-weight:800;font-display:swap}
@font-face{font-family:'Tajawal';src:url('../fonts/Tajawal-Black.woff2') format('woff2');font-weight:900;font-display:swap}
@font-face{font-family:'Montserrat';src:url('../fonts/Montserrat-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Montserrat';src:url('../fonts/Montserrat-SemiBold.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Montserrat';src:url('../fonts/Montserrat-Bold.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/Inter-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/Inter-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/Inter-SemiBold.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Inter';src:url('../fonts/Inter-Bold.woff2') format('woff2');font-weight:700;font-display:swap}

/* ---------- التوكنات ---------- */
:root{
  --navy:#1E2357; --navy-d:#12163A; --navy-l:#2A3070;
  --gold:#C78F2B; --gold-l:#E3C179; --gold-d:#A97620;
  /* الذهبي والرمادي يسقطان كنص على الأسطح الفاتحة (2.84:1 و3.60:1).
     نُبقيهما للخلفيات/الحدود ونضيف نسخاً نصية تجتاز 4.5:1. */
  --gold-text:#8A5F14;  /* 5.63:1 أبيض · 5.13:1 كريمي */
  --cream:#F7F4EE; --white:#fff; --gray:#8B8778; --ink:#2A2C3D; --charcoal:#1A1A1A;
  --gray-text:#6B6758; /* 5.67:1 أبيض · 5.16:1 كريمي */
  --line:rgba(30,35,87,.10); --line-d:rgba(255,255,255,.12);
  --line-field:rgba(30,35,87,.55); /* حدود الحقول تحتاج 3:1 — القديمة 1.21:1 */
  --font-ar:'Tajawal',system-ui,sans-serif;
  --font-en:'Montserrat',system-ui,sans-serif;
  /* Inter لنصوص الجسم اللاتينية — Montserrat للعناوين فقط (دليل الهوية) */
  --font-latin:'Inter',system-ui,sans-serif;
  --r:14px; --r-s:8px;
  --sp:8px;
  --wrap:1240px;
  --shadow:0 18px 50px -20px rgba(18,22,58,.28);
  --shadow-lg:0 40px 90px -30px rgba(18,22,58,.42);
  --ease:cubic-bezier(.22,.9,.25,1);
}

/* ---------- الأساس ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-ar); font-weight:400; font-size:17px; line-height:1.95;
  color:var(--ink); background:var(--white); overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none}
ul{list-style:none}
::selection{background:var(--gold);color:var(--navy)}
/* الذهبي كمؤشر تركيز = 2.84:1 على الأبيض (يحتاج 3:1). الكحلي = 19.5:1 */
:focus-visible{outline:3px solid var(--navy-d);outline-offset:3px;border-radius:4px}
.header :focus-visible,.drawer :focus-visible,.hero :focus-visible,.footer :focus-visible,
.phead :focus-visible,.cta :focus-visible,.wa:focus-visible{outline-color:var(--gold-l)}

.wrap{width:min(100% - 40px,var(--wrap));margin-inline:auto}
.en{font-family:var(--font-en);direction:ltr;unicode-bidi:isolate}
.gold{color:var(--gold)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

h1,h2,h3,h4{font-weight:800;line-height:1.35;color:var(--navy);letter-spacing:-.01em}
h1{font-size:clamp(2.1rem,5.2vw,4rem);line-height:1.25}
h2{font-size:clamp(1.7rem,3.4vw,2.7rem)}
h3{font-size:clamp(1.15rem,1.7vw,1.45rem)}
p{color:#4A4C5E}

/* ---------- عناصر مشتركة ---------- */
.eyebrow{
  font-family:var(--font-en);font-weight:600;font-size:.72rem;letter-spacing:.28em;
  color:var(--gold-text);text-transform:uppercase;direction:ltr;display:inline-block;margin-bottom:14px;
}
.eyebrow-ar{
  font-weight:700;font-size:.9rem;color:var(--gold-text);display:flex;align-items:center;gap:10px;margin-bottom:14px;
}
.eyebrow-ar::before{content:'';width:26px;height:2px;background:var(--gold);display:block}
.section{padding:clamp(72px,9vw,132px) 0;position:relative}
.section-head{max-width:760px;margin-bottom:56px}
.section-head p{margin-top:16px;font-size:1.08rem}
.section-head.center{margin-inline:auto;text-align:center}
.section-head.center .eyebrow-ar{justify-content:center}

.btn{
  display:inline-flex;align-items:center;gap:10px;padding:15px 34px;border-radius:var(--r-s);
  font-weight:700;font-size:1rem;transition:.35s var(--ease);position:relative;overflow:hidden;
  border:2px solid transparent;
}
.btn svg{width:18px;height:18px;transition:transform .35s var(--ease)}
.btn:hover svg{transform:translateX(-4px)}
.btn-primary{background:var(--navy);color:#fff}
.btn-primary:hover{background:var(--navy-d);transform:translateY(-2px);box-shadow:var(--shadow)}
.btn-gold{background:var(--gold);color:var(--navy)}
.btn-gold:hover{background:var(--gold-l);transform:translateY(-2px);box-shadow:0 18px 40px -18px rgba(199,143,43,.7)}
.btn-ghost{border-color:rgba(255,255,255,.35);color:#fff}
.btn-ghost:hover{border-color:var(--gold);background:var(--gold);color:var(--navy)}
.btn-outline{border-color:var(--navy);color:var(--navy)}
.btn-outline:hover{background:var(--navy);color:#fff}

.pattern{
  background-image:url('../img/pattern-gold.png');background-size:120px 120px;background-repeat:repeat;
}
.pattern-navy{background-image:url('../img/pattern-navy.png');background-size:120px 120px}

/* ---------- الهيدر ---------- */
.header{
  position:fixed;inset-block-start:0;inset-inline:0;z-index:100;
  transition:.4s var(--ease);padding:18px 0;
}
.header::before{
  content:'';position:absolute;inset:0;background:rgba(30,35,87,.92);
  backdrop-filter:blur(14px);opacity:0;transition:.4s var(--ease);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.header.scrolled{padding:11px 0}
.header.scrolled::before{opacity:1}
.header .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;position:relative}
.header .logo img{height:52px;width:auto;transition:.4s var(--ease)}
.header.scrolled .logo img{height:42px}
.nav{display:flex;align-items:center;gap:6px}
.nav a{
  padding:10px 16px;font-weight:500;font-size:1rem;color:rgba(255,255,255,.86);
  border-radius:var(--r-s);transition:.28s var(--ease);position:relative;
}
/* التوسيط بـ inset-inline-start:50%+translate:50% يعمل في RTL فقط —
   في LTR يزيح الخط عن مركزه. margin-inline:auto يعمل في الاتجاهين. */
.nav a::after{
  content:'';position:absolute;inset-block-end:4px;inset-inline:0;margin-inline:auto;
  width:0;height:2px;background:var(--gold);transition:width .3s var(--ease);
}
.nav a:hover,.nav a.active{color:#fff}
.nav a:hover::after,.nav a.active::after{width:22px}
.header-cta{display:flex;align-items:center;gap:12px}
.header-cta .btn{padding:11px 24px;font-size:.94rem}
.burger{display:none;width:46px;height:46px;border-radius:var(--r-s);align-items:center;justify-content:center;flex-direction:column;gap:5px}
.burger span{width:22px;height:2px;background:#fff;transition:.3s var(--ease);border-radius:2px}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.drawer{
  position:fixed;inset:0;z-index:99;background:var(--navy);
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;
  clip-path:circle(0% at 100% 0);transition:clip-path .7s var(--ease);
}
.drawer.open{clip-path:circle(160% at 100% 0)}
.drawer a{
  font-size:1.6rem;font-weight:700;color:#fff;padding:12px 30px;opacity:0;transform:translateY(18px);
  transition:.5s var(--ease);
}
.drawer.open a{opacity:1;transform:none}
.drawer.open a:nth-child(1){transition-delay:.16s}.drawer.open a:nth-child(2){transition-delay:.22s}
.drawer.open a:nth-child(3){transition-delay:.28s}.drawer.open a:nth-child(4){transition-delay:.34s}
.drawer.open a:nth-child(5){transition-delay:.4s}.drawer.open a:nth-child(6){transition-delay:.46s}
.drawer a:hover{color:var(--gold)}
.drawer .dr-foot{margin-top:30px;display:flex;gap:18px;opacity:0;transition:.5s .5s var(--ease)}
.drawer.open .dr-foot{opacity:1}

/* ---------- الهيرو ---------- */
.hero{
  min-height:100svh;background:var(--navy);color:#fff;position:relative;overflow:hidden;
  display:flex;align-items:center;padding:150px 0 90px;
}
/* على الجوال كان زر «ابدأ مشروعك» يقع تحت الطيّة — الحشو 150px مصمَّم
   لهيدر سطح المكتب بينما هيدر الجوال ~70px. */
@media(max-width:640px){
  .hero{padding:96px 0 64px}
  /* مؤشّر «SCROLL» مطلق في أسفل الهيرو؛ بعد تقليل الحشو صار يتداخل مع
     زر «تصفّح خدماتنا». وهو زخرفي ولا حاجة له على اللمس أصلاً. */
  .scroll-cue{display:none}
}
.hero::before{content:'';position:absolute;inset:0;background-image:url('../img/pattern-gold.png');background-size:130px 130px;opacity:.5}
.hero::after{
  content:'';position:absolute;inset-block-start:-20%;inset-inline-start:-10%;width:70vw;height:70vw;
  background:radial-gradient(circle,rgba(199,143,43,.16),transparent 62%);pointer-events:none;
}
.hero .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:center}
.hero h1{color:#fff;margin-bottom:24px}
.hero h1 .line{display:block;overflow:hidden}
.hero h1 .line span{display:block;transform:translateY(105%);animation:rise .95s var(--ease) forwards}
.hero h1 .line:nth-child(2) span{animation-delay:.13s}
.hero h1 .line:nth-child(3) span{animation-delay:.26s}
@keyframes rise{to{transform:none}}
.hero-sub{
  font-size:1.16rem;color:rgba(255,255,255,.78);max-width:52ch;margin-bottom:38px;line-height:2.1;
  opacity:0;animation:fade .8s .5s var(--ease) forwards;
}
@keyframes fade{to{opacity:1}}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;opacity:0;animation:fade .8s .65s var(--ease) forwards}
.hero-emblem{
  position:relative;display:flex;justify-content:center;opacity:0;
  animation:fade 1s .35s var(--ease) forwards;
}
.hero-emblem img{width:min(100%,330px);height:auto;filter:drop-shadow(0 30px 70px rgba(0,0,0,.4));animation:float 7s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
.hero-emblem::before{
  content:'';position:absolute;inset-block-start:50%;inset-inline-start:50%;translate:-50% -50%;
  width:340px;height:340px;border:1px solid rgba(199,143,43,.28);border-radius:50%;
  animation:spin 26s linear infinite;
}
.hero-emblem::after{
  content:'';position:absolute;inset-block-start:50%;inset-inline-start:50%;translate:-50% -50%;
  width:440px;height:440px;border:1px dashed rgba(199,143,43,.16);border-radius:50%;
  animation:spin 44s linear infinite reverse;
}
@keyframes spin{to{transform:rotate(360deg)}}
.scroll-cue{
  position:absolute;inset-block-end:34px;inset-inline-start:50%;translate:-50% 0;z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:8px;color:rgba(255,255,255,.5);
  font-family:var(--font-en);font-size:.66rem;letter-spacing:.22em;
}
.scroll-cue .bar{width:1px;height:44px;background:linear-gradient(var(--gold),transparent);animation:cue 1.9s ease-in-out infinite}
@keyframes cue{0%,100%{opacity:.25;transform:scaleY(.5)}50%{opacity:1;transform:scaleY(1)}}

/* ---------- الشريط المتحرك ---------- */
.marquee{background:var(--gold);padding:16px 0;overflow:hidden;position:relative}
.marquee-track{display:flex;gap:60px;width:max-content;animation:slide 34s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(50%)}}
.marquee span{
  font-weight:800;font-size:1.02rem;color:var(--navy);white-space:nowrap;display:flex;align-items:center;gap:60px;
}
.marquee span::after{content:'◆';color:rgba(30,35,87,.42);font-size:.7rem}

/* ---------- الإحصائيات ---------- */
.stats{background:var(--cream);padding:64px 0}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;text-align:center}
.stat .num{
  font-family:var(--font-en);font-weight:700;font-size:clamp(2.2rem,4vw,3.4rem);color:var(--navy);
  line-height:1;display:flex;justify-content:center;align-items:baseline;gap:2px;direction:ltr;
}
.stat .num .suf{color:var(--gold);font-size:.55em}
/* حقائق موثّقة (سجل تجاري/ضريبي/موقع) — أصغر من .num لأن الأرقام طويلة
   (الرقم الضريبي ١٥ خانة) وتُقرأ كبيانات لا كعدّاد */
.stat .fact{
  font-weight:700;color:var(--navy);line-height:1.15;
  font-size:clamp(1.05rem,1.9vw,1.5rem);
  overflow-wrap:anywhere;
}
.stat .fact.en{font-family:var(--font-en);direction:ltr;letter-spacing:.01em}
.stat p{margin-top:10px;font-weight:500;color:var(--gray);font-size:.98rem}

/* ---------- البطاقات ---------- */
.cards{display:grid;gap:26px}
.cards.c3{grid-template-columns:repeat(3,1fr)}
.cards.c2{grid-template-columns:repeat(2,1fr)}
.cards.c4{grid-template-columns:repeat(4,1fr)}

.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:36px 32px;
  transition:.45s var(--ease);position:relative;overflow:hidden;height:100%;
}
.card::before{
  content:'';position:absolute;inset-block-start:0;inset-inline-end:0;width:0;height:3px;background:var(--gold);
  transition:width .45s var(--ease);
}
.card:hover{transform:translateY(-8px);box-shadow:var(--shadow);border-color:transparent}
.card:hover::before{width:100%}
.card .ic{
  width:58px;height:58px;border-radius:var(--r-s);background:var(--cream);color:var(--navy);
  display:grid;place-items:center;margin-bottom:22px;transition:.45s var(--ease);
}
.card:hover .ic{background:var(--navy);color:var(--gold);transform:rotate(-6deg) scale(1.06)}
.card .ic svg{width:26px;height:26px}
.card h3{margin-bottom:12px}
.card p{font-size:.97rem;line-height:1.95}
.card .more{
  margin-top:18px;display:inline-flex;align-items:center;gap:8px;color:var(--gold);
  font-weight:700;font-size:.93rem;
}
.card .num-bg{
  position:absolute;inset-block-start:14px;inset-inline-start:22px;font-family:var(--font-en);font-weight:700;
  font-size:3.6rem;color:var(--navy);opacity:.05;line-height:1;
}

/* ---------- الخدمات (شبكة كبيرة) ---------- */
.svc-filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:42px;justify-content:center}
.svc-filters button{
  padding:10px 22px;border-radius:100px;border:1px solid var(--line);font-weight:500;
  font-size:.94rem;color:var(--gray);transition:.3s var(--ease);background:#fff;
}
.svc-filters button:hover{border-color:var(--gold);color:var(--navy)}
.svc-filters button.active{background:var(--navy);color:#fff;border-color:var(--navy)}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.svc{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:32px 28px;
  transition:.45s var(--ease);position:relative;overflow:hidden;
}
.svc.hide{display:none}
.svc:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:transparent}
.svc .hd{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.svc-ic{
  width:46px;height:46px;flex:none;border-radius:var(--r-s);background:var(--cream);color:var(--navy);
  display:grid;place-items:center;transition:.45s var(--ease);
}
.svc:hover .svc-ic{background:var(--navy);color:var(--gold);transform:rotate(-6deg)}
.svc-ic svg{width:22px;height:22px}
.svc h3{font-size:1.2rem;margin:0}
.svc ul{margin-top:14px;display:grid;gap:9px}
.svc li{
  font-size:.94rem;color:#5A5C6E;padding-inline-start:20px;position:relative;line-height:1.75;
}
.svc li::before{
  content:'';position:absolute;inset-inline-start:0;inset-block-start:11px;width:7px;height:7px;
  background:var(--gold);transform:rotate(45deg);
}

/* ---------- الأعمال ---------- */
.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.work{
  position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;background:var(--navy);
  display:grid;place-items:center;transition:.5s var(--ease);cursor:pointer;
}
.work.tall{aspect-ratio:3/4}
.work::before{content:'';position:absolute;inset:0;background-image:url('../img/pattern-gold.png');background-size:90px;opacity:.45;transition:.5s var(--ease)}
.work.cream{background:var(--cream)}
.work.cream::before{background-image:url('../img/pattern-navy.png');opacity:.7}
.work.gold{background:var(--gold)}
.work img{width:52%;position:relative;z-index:1;transition:.6s var(--ease)}
.work:hover{transform:scale(.985)}
.work:hover img{transform:scale(1.06)}
.work .ov{
  position:absolute;inset:0;z-index:2;background:linear-gradient(to top,rgba(18,22,58,.94),rgba(18,22,58,.35) 55%,transparent);
  display:flex;flex-direction:column;justify-content:flex-end;padding:28px;
  opacity:0;transition:.45s var(--ease);
}
.work:hover .ov{opacity:1}
.work .ov h3{color:#fff;font-size:1.25rem;margin-bottom:6px;transform:translateY(10px);transition:.45s .06s var(--ease)}
.work .ov span{color:var(--gold-l);font-size:.88rem;font-weight:500;transform:translateY(10px);transition:.45s .12s var(--ease)}
.work:hover .ov h3,.work:hover .ov span{transform:none}

/* ---------- خطوات العمل ---------- */
.steps{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:20px}
.steps::before{
  content:'';position:absolute;inset-block-start:33px;inset-inline:60px;height:1px;
  background:repeating-linear-gradient(to left,var(--gold) 0 8px,transparent 8px 16px);
}
.step{text-align:center;position:relative}
.step .n{
  width:66px;height:66px;border-radius:50%;background:#fff;border:2px solid var(--gold);
  color:var(--navy);font-family:var(--font-en);font-weight:700;font-size:1.2rem;
  display:grid;place-items:center;margin:0 auto 20px;position:relative;z-index:1;transition:.4s var(--ease);
}
.step:hover .n{background:var(--navy);color:var(--gold);border-color:var(--navy);transform:scale(1.08)}
.step h3{font-size:1.1rem;margin-bottom:8px}
.step p{font-size:.93rem}

/* ---------- لماذا نحن ---------- */
.why{background:var(--navy);color:#fff;position:relative;overflow:hidden}
.why::before{content:'';position:absolute;inset:0;background-image:url('../img/pattern-gold.png');background-size:120px;opacity:.4}
.why .wrap{position:relative;z-index:1}
.why h2,.why h3{color:#fff}
.why p{color:rgba(255,255,255,.72)}
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.why-card{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:var(--r);
  padding:34px 30px;transition:.45s var(--ease);backdrop-filter:blur(6px);
}
.why-card:hover{background:rgba(255,255,255,.09);border-color:rgba(199,143,43,.5);transform:translateY(-6px)}
.why-card .ic{width:52px;height:52px;border-radius:var(--r-s);background:rgba(199,143,43,.16);color:var(--gold);display:grid;place-items:center;margin-bottom:20px}
.why-card .ic svg{width:24px;height:24px}

/* ---------- شهادات ---------- */
.quote{
  background:var(--cream);border-inline-start:4px solid var(--gold);border-radius:var(--r);
  padding:38px 34px;position:relative;height:100%;
}
.quote .q{font-family:var(--font-en);font-size:3.4rem;color:var(--gold);opacity:.3;line-height:.8;margin-bottom:10px}
.quote p{font-size:1.02rem;color:var(--ink);line-height:2.05}
.quote .who{margin-top:22px;display:flex;align-items:center;gap:12px}
.quote .who .av{width:44px;height:44px;border-radius:50%;background:var(--navy);color:var(--gold);display:grid;place-items:center;font-weight:800}
.quote .who b{display:block;color:var(--navy);font-size:.98rem}
.quote .who span{font-size:.86rem;color:var(--gray)}

/* ---------- CTA ---------- */
.cta{
  background:var(--gold);color:var(--navy);position:relative;overflow:hidden;text-align:center;
  padding:clamp(64px,8vw,104px) 0;
}
.cta::before{content:'';position:absolute;inset:0;background-image:url('../img/pattern-navy.png');background-size:110px;opacity:.55}
.cta .wrap{position:relative;z-index:1}
.cta h2{color:var(--navy);margin-bottom:16px}
.cta p{color:rgba(30,35,87,.78);font-size:1.1rem;max-width:56ch;margin:0 auto 34px}
.cta .btn-primary:hover{background:var(--navy-d)}

/* ---------- النماذج ---------- */
.form{display:grid;gap:20px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.field label{display:block;font-weight:700;font-size:.94rem;color:var(--navy);margin-bottom:8px}
.field label .req{color:var(--gold)}
.field input,.field select,.field textarea{
  width:100%;padding:14px 18px;border:1px solid var(--line-field);border-radius:var(--r-s);
  font-family:inherit;font-size:1rem;color:var(--ink);background:#fff;transition:.28s var(--ease);
}
.field textarea{min-height:150px;resize:vertical;line-height:1.9}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0;border-color:var(--gold);box-shadow:0 0 0 4px rgba(199,143,43,.14);
}
.field input::placeholder,.field textarea::placeholder{color:#B7B4AC}
.field .err{color:#B3261E;font-size:.86rem;margin-top:6px;display:none}
.field.invalid input,.field.invalid textarea,.field.invalid select{border-color:#B3261E}
.field.invalid .err{display:block}
.form-note{font-size:.88rem;color:var(--gray)}
.form-msg{
  padding:16px 20px;border-radius:var(--r-s);font-weight:500;display:none;
}
.form-msg.ok{display:block;background:#EAF5EF;color:#2E7D5B;border:1px solid #BFE0CE}
.form-msg.bad{display:block;background:#FBEDEC;color:#B3261E;border:1px solid #F0CFCC}
.btn[disabled]{opacity:.6;pointer-events:none}
.spinner{
  width:16px;height:16px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;
  animation:spin .7s linear infinite;display:none;
}
.btn.loading .spinner{display:block}

/* ---------- بطاقات التواصل ---------- */
.contact-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:50px;align-items:start}
.info-card{
  background:var(--navy);color:#fff;border-radius:var(--r);padding:40px 36px;position:relative;overflow:hidden;
}
.info-card::before{content:'';position:absolute;inset:0;background-image:url('../img/pattern-gold.png');background-size:100px;opacity:.45}
.info-card>*{position:relative;z-index:1}
.info-card h3{color:#fff;margin-bottom:26px}
.info-list{display:grid;gap:22px}
.info-list li{display:flex;gap:14px;align-items:flex-start}
.info-list .ic{
  width:42px;height:42px;flex:none;border-radius:var(--r-s);background:rgba(199,143,43,.18);
  color:var(--gold);display:grid;place-items:center;
}
.info-list .ic svg{width:19px;height:19px}
.info-list b{display:block;font-size:.86rem;color:var(--gold-l);font-weight:500;margin-bottom:2px}
.info-list a,.info-list span{color:#fff;font-weight:500;font-size:1rem;transition:.25s}
.info-list a:hover{color:var(--gold)}
.map{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);height:330px;margin-top:26px}
.map iframe{width:100%;height:100%;border:0;filter:grayscale(.35) contrast(1.05)}

/* ---------- الفوتر ---------- */
.footer{background:var(--navy-d);color:#fff;padding:80px 0 0;position:relative;overflow:hidden}
.footer::before{content:'';position:absolute;inset:0;background-image:url('../img/pattern-gold.png');background-size:120px;opacity:.3}
.footer .wrap{position:relative;z-index:1}
.f-grid{display:grid;grid-template-columns:1.4fr .8fr .8fr 1.1fr;gap:44px;padding-bottom:56px}
.footer img.f-logo{height:76px;width:auto;margin-bottom:22px}
.footer p{color:rgba(255,255,255,.62);font-size:.96rem;max-width:34ch}
.footer h4{color:#fff;font-size:1.02rem;margin-bottom:20px;position:relative;padding-bottom:12px}
.footer h4::after{content:'';position:absolute;inset-block-end:0;inset-inline-start:0;width:24px;height:2px;background:var(--gold)}
.footer .f-links{display:grid;gap:11px}
.footer .f-links a{color:rgba(255,255,255,.66);font-size:.96rem;transition:.25s;display:inline-block}
.footer .f-links a:hover{color:var(--gold);transform:translateX(-4px)}
.socials{display:flex;gap:10px;margin-top:22px}
.socials a{
  width:42px;height:42px;border-radius:var(--r-s);background:rgba(255,255,255,.07);
  display:grid;place-items:center;color:#fff;transition:.3s var(--ease);
}
.socials a:hover{background:var(--gold);color:var(--navy);transform:translateY(-3px)}
.socials svg{width:18px;height:18px}
.f-bottom{
  border-top:1px solid rgba(255,255,255,.09);padding:24px 0;display:flex;justify-content:space-between;
  align-items:center;gap:16px;flex-wrap:wrap;
}
.f-bottom p,.f-bottom span{color:rgba(255,255,255,.44);font-size:.86rem;margin:0}
.f-bottom .en{letter-spacing:.1em}

/* ---------- واتساب عائم ---------- */
.wa{
  position:fixed;inset-block-end:26px;inset-inline-start:26px;z-index:80;width:58px;height:58px;
  border-radius:50%;background:#25D366;display:grid;place-items:center;color:#fff;
  box-shadow:0 14px 34px -10px rgba(37,211,102,.7);transition:.35s var(--ease);
}
.wa:hover{transform:scale(1.1) translateY(-3px)}
.wa svg{width:29px;height:29px}
.wa::after{
  content:'';position:absolute;inset:0;border-radius:50%;border:2px solid #25D366;
  animation:pulse 2.4s ease-out infinite;
}
@keyframes pulse{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.65);opacity:0}}

/* شريط التقدم */
.progress{position:fixed;inset-block-start:0;inset-inline-start:0;height:3px;background:var(--gold);z-index:101;width:0;transition:width .1s linear}

/* ---------- الترويسة الداخلية ---------- */
.phead{
  background:var(--navy);color:#fff;padding:190px 0 82px;position:relative;overflow:hidden;text-align:center;
}
.phead::before{content:'';position:absolute;inset:0;background-image:url('../img/pattern-gold.png');background-size:120px;opacity:.45}
.phead .wrap{position:relative;z-index:1}
.phead h1{color:#fff;font-size:clamp(1.9rem,4vw,3rem)}
.phead p{color:rgba(255,255,255,.72);margin-top:14px;max-width:62ch;margin-inline:auto;font-size:1.06rem}
.crumbs{
  display:flex;justify-content:center;gap:10px;align-items:center;margin-top:22px;
  font-size:.88rem;color:rgba(255,255,255,.55);
}
.crumbs a:hover{color:var(--gold)}
.crumbs .sep{color:var(--gold)}

/* ---------- الحركة عند التمرير ---------- */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.09s}
.reveal[data-d="2"]{transition-delay:.18s}
.reveal[data-d="3"]{transition-delay:.27s}
.reveal[data-d="4"]{transition-delay:.36s}
.reveal[data-d="5"]{transition-delay:.45s}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  .hero h1 .line span{transform:none}
  /* ⚠️ حرج: هذه الثلاثة تبدأ opacity:0 وتظهر بالـ animation فقط.
     بإلغاء الحركة كانت تبقى مخفية — أي أن الزائر يفقد نص الهيرو
     وزرّي الدعوة للفعل والشعار بالكامل. */
  .hero-sub,.hero-actions,.hero-emblem{opacity:1}
  html{scroll-behavior:auto}
}

/* ---------- الاستجابة ---------- */
@media(max-width:1080px){
  .hero .wrap{grid-template-columns:1fr;text-align:center;gap:40px}
  .hero-actions{justify-content:center}
  .hero-emblem{order:-1}
  .hero-emblem img{width:190px}
  .hero-emblem::before{width:250px;height:250px}
  .hero-emblem::after{width:320px;height:320px}
  .cards.c4,.svc-grid,.why-grid,.work-grid{grid-template-columns:repeat(2,1fr)}
  .f-grid{grid-template-columns:1fr 1fr;gap:36px}
  .contact-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:repeat(2,1fr);gap:36px}
  .steps::before{display:none}
}
@media(max-width:860px){
  .nav,.header-cta .btn{display:none}
  .burger{display:flex}
  .cards.c3,.cards.c2{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:36px}
}
@media(max-width:640px){
  body{font-size:16px}
  .svc-grid,.why-grid,.work-grid,.cards.c4{grid-template-columns:1fr}
  .row2{grid-template-columns:1fr}
  .f-grid{grid-template-columns:1fr}
  .section{padding:64px 0}
  .phead{padding:150px 0 64px}
  .work.tall{aspect-ratio:4/3}
  .wa{width:52px;height:52px;inset-block-end:18px;inset-inline-start:18px}
}

/* ---------- الطباعة ---------- */
@media print{
  .header,.footer,.wa,.progress,.cta{display:none}
  body{color:#000}
}

/* ---------- صفحة دليل الهوية ---------- */
.dl-bar{
  display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;
  background:var(--cream);border:1px solid var(--line);border-radius:var(--r);padding:30px 34px;
}
.dl-actions{display:flex;gap:12px;flex-wrap:wrap}
.lv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.lv{text-align:center}
.lv-box{
  background:var(--cream);border:1px solid var(--line);border-radius:var(--r);
  height:190px;display:grid;place-items:center;padding:26px;margin-bottom:14px;transition:.4s var(--ease);
}
.lv:hover .lv-box{background:#fff;box-shadow:var(--shadow);border-color:transparent}
.lv-box{overflow:hidden}
.lv-box img{max-height:138px;width:auto;max-width:100%;object-fit:contain}
.lv b{display:block;color:var(--navy);font-size:1rem}
.lv span{font-size:.88rem;color:var(--gray)}
.sw-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.sw{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff;transition:.4s var(--ease)}
.sw:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.chip-copy{
  width:100%;height:120px;position:relative;display:block;border:0;cursor:pointer;
}
.chip-copy span{
  position:absolute;inset-block-end:12px;inset-inline-end:12px;background:rgba(255,255,255,.9);
  color:var(--navy);font-size:.76rem;font-weight:700;padding:5px 12px;border-radius:100px;
  opacity:0;transition:.3s var(--ease);
}
.chip-copy:hover span,.chip-copy.copied span{opacity:1}
.sw-body{padding:20px 22px}
.sw-body b{display:block;color:var(--navy);font-size:1.05rem}
.sw-body>.en{font-size:.78rem;color:var(--gray);letter-spacing:.1em}
.sw-body dl{margin-top:14px;display:grid;gap:7px}
.sw-body dl div{display:flex;justify-content:space-between;gap:10px;font-size:.84rem}
.sw-body dt{color:var(--gray);font-weight:500}
.sw-body dd{color:var(--ink);font-weight:500}
.ratio{display:flex;height:56px;border-radius:var(--r-s);overflow:hidden;margin-top:34px}
.ratio div{display:grid;place-items:center;font-weight:700;font-size:.9rem}
@media(max-width:900px){.lv-grid,.sw-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.lv-grid,.sw-grid{grid-template-columns:1fr}.dl-bar{flex-direction:column;align-items:stretch;text-align:center}.dl-actions{justify-content:center}}

/* مصيدة الروبوتات — مخفية بصرياً وعن قارئات الشاشة، لكنها ليست display:none
   حتى لا تتجاهلها الروبوتات الذكية.

   ⚠️ لا تستخدم left:-9999px هنا: كانت تمدّ المستند أفقياً إلى 10703px
   (overflow-x:hidden يخفي الأثر لكن البنية تبقى هشّة وتُفسد كل قياس تجاوب).
   clip-path يُخفيها في مكانها دون أي أثر على التخطيط. */
.hp {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  pointer-events: none;
}


/* ══════════════════════════════════════════════════════════════════
   النسخة الإنجليزية (LTR)
   دليل الهوية: Montserrat للعناوين والاسم اللاتيني فقط · Inter للنصوص.
   لا نقلب أي شيء يدوياً — التنسيق كله بخصائص منطقية (margin-inline…)
   فينعكس تلقائياً مع dir="ltr".
   ══════════════════════════════════════════════════════════════════ */
[dir="ltr"] body{font-family:var(--font-latin);line-height:1.7}
[dir="ltr"] h1,[dir="ltr"] h2,[dir="ltr"] h3,[dir="ltr"] .btn,[dir="ltr"] .nav a{font-family:var(--font-en)}
[dir="ltr"] .eyebrow-ar{font-family:var(--font-en);letter-spacing:.14em}
/* الشعار الأفقي العربي يُستبدل بالنسخة اللاتينية في صفحات EN عبر HTML */
[dir="ltr"] .hero-sub{max-width:62ch}

/* مبدّل اللغة */
.lang-switch{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-en);font-weight:600;font-size:.82rem;letter-spacing:.04em;
  color:var(--cream);border:1px solid rgba(255,255,255,.28);
  border-radius:999px;padding:8px 14px;min-height:44px;box-sizing:border-box;
  transition:.3s var(--ease);text-decoration:none;
}
.lang-switch:hover,.lang-switch:focus-visible{background:rgba(255,255,255,.12);border-color:var(--gold)}
.lang-switch svg{width:15px;height:15px;flex:none}
.drawer .lang-switch{color:var(--navy);border-color:var(--line);justify-content:center;width:100%}
.drawer .lang-switch:hover{background:var(--cream)}


/* قسم «من نحن» — كانت الشبكة inline فلا تستطيع أي media query تجاوزها،
   فتنسحق الفقرات في عمود 156px على الجوال. */
.about-hero{display:grid;grid-template-columns:1.2fr .8fr;gap:60px;align-items:center}
@media(max-width:860px){.about-hero{grid-template-columns:1fr;gap:36px}}

/* رابط تخطّي المحتوى (WCAG 2.4.1) */
.skip{
  position:absolute;inset-block-start:-100px;inset-inline-start:12px;z-index:200;
  background:var(--navy);color:#fff;padding:12px 20px;border-radius:var(--r-s);font-weight:700;
}
.skip:focus{inset-block-start:12px}

/* أهداف اللمس: 44×44 حد أدنى (WCAG 2.5.8) */
.socials a{width:44px;height:44px}
.footer .f-links a,.crumbs a,.info-list a,.card .more{display:inline-flex;align-items:center;min-height:44px}

/* إصلاحات الاتجاه للنسخة الإنجليزية */
/* قلب السهم: مساره يشير يساراً (صحيح في RTL) فينعكس في الإنجليزية */
[dir="ltr"] .btn svg{scale:-1 1}
[dir="ltr"] .btn:hover svg{transform:translateX(4px)}
[dir="ltr"] .footer .f-links a:hover{transform:translateX(4px)}
[dir="ltr"] .marquee-track{animation-name:slide-ltr}
@keyframes slide-ltr{to{transform:translateX(-50%)}}

/* الرقم الضريبي (١٥ خانة) ينكسر منتصفه في عمودين على الشاشات الضيقة */
@media(max-width:420px){.stats-grid{grid-template-columns:1fr}}