:root{--green:#126b4d;--dark:#0b2f25;--mint:#e9f4ef;--line:#dfe8e3;--ink:#17362d;--muted:#66756f;--white:#fff;--bg:#f7faf8;--shadow:0 18px 50px rgba(14,55,43,.09)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:var(--ink);background:#fff;line-height:1.6}a{text-decoration:none;color:inherit}img{max-width:100%;display:block}.wrap{width:min(1180px,calc(100% - 40px));margin:auto}.nav{height:82px;display:flex;align-items:center;gap:30px}.brand{display:flex;align-items:center;gap:12px;min-width:225px;font-size:12px;line-height:1.05;letter-spacing:1.4px;color:var(--dark)}.brand img{width:76px;height:76px;object-fit:contain}.brand b{color:var(--green)}nav{display:flex;gap:24px;flex:1;justify-content:center;font-size:14px;color:#42534d}nav a:hover{color:var(--green)}header{position:sticky;top:0;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);border-bottom:1px solid rgba(223,232,227,.8);z-index:20}.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;background:var(--green);color:#fff;padding:14px 22px;border-radius:9px;font-weight:700;border:0;cursor:pointer;box-shadow:0 10px 24px rgba(18,107,77,.18)}.btn:hover{transform:translateY(-1px);filter:brightness(.97)}.btn.small{padding:10px 15px;font-size:13px}.btn.ghost{background:#fff;color:var(--green);border:1px solid var(--line);box-shadow:none}.btn.white{background:#fff;color:var(--green);box-shadow:none}.menu{display:none;background:none;border:0;font-size:24px}.hero{padding:70px 0 76px;display:grid;grid-template-columns:1.02fr .98fr;gap:65px;align-items:center}.kicker{font-size:11px;letter-spacing:2px;font-weight:800;color:var(--green);margin-bottom:14px}.hero h1{font-size:clamp(52px,6vw,78px);line-height:.98;letter-spacing:-3px;margin:0 0 26px;color:var(--dark)}.hero h1 em{font-style:normal;color:var(--green)}.lead{font-size:19px;color:var(--muted);max-width:650px}.actions{display:flex;gap:12px;margin:30px 0}.proof{font-size:12px;color:#6c7c76;display:flex;gap:12px;align-items:center;flex-wrap:wrap}.proof span{color:var(--green)}.heroVisual{position:relative}.heroVisual>img{width:100%;height:510px;object-fit:cover;border-radius:26px;box-shadow:var(--shadow)}.float{position:absolute;left:-28px;bottom:28px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:15px 18px;box-shadow:var(--shadow);display:flex;flex-direction:column}.float strong{font-size:14px}.float span{font-size:12px;color:var(--muted)}.trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.trustin{display:flex;justify-content:space-between;gap:20px;padding:20px 0;font-size:11px;font-weight:800;letter-spacing:1.4px;color:#6b7b75}.section{padding:90px 0}.light{background:var(--bg)}.split{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}.split h2,h2{font-size:42px;line-height:1.08;letter-spacing:-1.4px;margin:0;color:var(--dark)}.large{font-size:21px;color:#52635d}.textlink{display:inline-flex;gap:10px;color:var(--green);font-weight:800;margin-top:12px}.sectionhead{display:flex;justify-content:space-between;align-items:end;margin-bottom:35px}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.pcard{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:.25s;box-shadow:0 8px 30px rgba(14,55,43,.035)}.pcard:hover{transform:translateY(-4px);box-shadow:var(--shadow)}.pcard>img{height:240px;width:100%;object-fit:cover}.pbody{padding:22px}.eyebrow{font-size:9px;letter-spacing:1.5px;color:#84928d;font-weight:800}.pcard h3{font-size:23px;margin:8px 0}.pcard p{font-size:14px;color:var(--muted)}.chips{display:flex;flex-wrap:wrap;gap:7px;margin:14px 0}.chips span{font-size:11px;background:var(--mint);color:var(--green);border-radius:999px;padding:6px 9px}.chips.big span{font-size:13px;padding:9px 13px}.qualityBand{background:var(--dark);color:#fff;padding:85px 0}.qgrid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}.qualityBand h2{color:#fff}.qualityBand p{color:#b9cbc4;font-size:17px}.qgrid img{height:400px;width:100%;object-fit:cover;border-radius:20px}.wideimg{margin-top:45px;width:100%;height:390px;object-fit:cover;border-radius:20px}.cta{margin:65px auto 90px;padding:50px 55px;background:var(--mint);border-radius:24px;display:flex;align-items:center;justify-content:space-between;gap:30px}.cta h2{font-size:34px;max-width:750px}.pageHero{background:var(--bg);padding:75px 0 70px;border-bottom:1px solid var(--line)}.pageHero h1{font-size:clamp(46px,6vw,70px);line-height:1;margin:0 0 20px;letter-spacing:-2.5px;color:var(--dark);max-width:900px}.pageHero p{font-size:19px;color:var(--muted);max-width:750px}.productHero{display:grid;grid-template-columns:1fr 1fr;gap:75px;align-items:center;padding:65px 0 80px}.prodImage{border-radius:24px;overflow:hidden;background:var(--bg)}.prodImage img{width:100%;height:500px;object-fit:cover}.productHero h1{font-size:clamp(45px,5vw,68px);line-height:1.02;letter-spacing:-2px;margin:0 0 25px;color:var(--dark)}.specmini{display:flex;gap:10px;margin:28px 0}.specmini span{background:var(--mint);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;font-size:12px}.specmini b{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--green);margin-bottom:4px}.specgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.specbox{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px}.specbox h3{margin:0 0 12px;font-size:17px}.specbox ul{padding:0;margin:0;list-style:none;color:var(--muted);font-size:14px}.specbox li{padding:7px 0;border-bottom:1px solid #eef2f0}.specbox li:last-child{border:0}.note{margin-top:20px;padding:18px 20px;border:1px dashed #b9c9c2;border-radius:12px;color:#60716b;font-size:13px;background:#fff}.featuregrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.feature{border:1px solid var(--line);border-radius:18px;padding:28px}.feature span,.contactcard>span,.pack>span{font-size:11px;color:var(--green);font-weight:900;letter-spacing:1px}.feature h3,.contactcard h3,.pack h3{font-size:22px;margin:12px 0 8px}.feature p,.contactcard p,.pack p{color:var(--muted)}.packgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.pack{background:#fff;border:1px solid var(--line);border-radius:18px;padding:25px;min-height:180px}.casebox{margin-top:25px;padding:28px;background:var(--dark);color:#fff;border-radius:18px}.casebox h3{margin:0}.casebox .chips span{background:#204b3e;color:#dff1e9}.contactgrid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.contactcard{border:1px solid var(--line);border-radius:18px;padding:32px}.rfq{max-width:850px;margin:auto;display:flex;flex-direction:column;gap:18px}.rfq label{font-weight:700;font-size:13px;color:#3c4d47;display:flex;flex-direction:column;gap:8px}.rfq input,.rfq select,.rfq textarea{font:inherit;border:1px solid #cedbd5;border-radius:9px;padding:13px 14px;outline:none;background:#fff;color:var(--ink)}.rfq input:focus,.rfq select:focus,.rfq textarea:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(18,107,77,.08)}.two{display:grid;grid-template-columns:1fr 1fr;gap:18px}.formmsg{color:var(--green);font-weight:700}.footbrand{min-width:auto}.foot{padding:60px 0 45px;display:grid;grid-template-columns:2fr 1fr 1fr;gap:60px}.foot p,.foot span{color:#718079;font-size:13px}.foot h4{margin-top:0}.foot a,.foot span{display:block;margin:8px 0;color:#53635d;font-size:13px}.bottom{border-top:1px solid var(--line);padding:18px 0 25px;color:#7c8984;font-size:12px}footer{border-top:1px solid var(--line)}
@media(max-width:900px){nav{display:none}.menu{display:block;margin-left:auto}.nav>.btn{display:none}.open nav{display:flex;position:absolute;top:82px;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);padding:20px;flex-direction:column;align-items:center}.hero,.qgrid,.productHero{grid-template-columns:1fr;gap:35px}.hero{padding-top:45px}.heroVisual>img{height:380px}.float{left:15px}.grid{grid-template-columns:repeat(2,1fr)}.split,.contactgrid{grid-template-columns:1fr;gap:25px}.specgrid{grid-template-columns:repeat(2,1fr)}.featuregrid{grid-template-columns:1fr}.packgrid{grid-template-columns:repeat(2,1fr)}.foot{grid-template-columns:1fr 1fr}.foot>div:first-child{grid-column:1/-1}}
@media(max-width:600px){.wrap{width:min(100% - 28px,1180px)}.nav{height:72px}.brand img{width:40px;height:40px}.brand{min-width:150px}.hero h1{font-size:49px;letter-spacing:-2px}.lead{font-size:17px}.actions{flex-direction:column}.actions .btn{width:100%}.trustin{overflow:auto;justify-content:flex-start;white-space:nowrap}.section{padding:65px 0}.split h2,h2{font-size:34px}.grid{grid-template-columns:1fr}.sectionhead{align-items:flex-start;flex-direction:column;gap:18px}.qualityBand{padding:65px 0}.cta{margin:45px auto 65px;padding:30px;flex-direction:column;align-items:flex-start}.cta h2{font-size:28px}.pageHero{padding:55px 0}.pageHero h1{font-size:45px}.productHero{padding:45px 0 60px}.prodImage img{height:350px}.specgrid{grid-template-columns:1fr}.packgrid{grid-template-columns:1fr}.two{grid-template-columns:1fr}.foot{grid-template-columns:1fr;gap:28px}.foot>div:first-child{grid-column:auto}.wideimg{height:260px}}

/* Subtle motion: restrained, premium, and disabled for reduced-motion users. */
html{scroll-behavior:smooth}
.btn,.textlink,.pcard,.feature,.specbox,.pack,.contactcard,.trustin span{transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease,background-color .28s ease}
.btn:hover{transform:translateY(-2px)}
.textlink:hover{transform:translateX(-3px)}
.pcard:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(12,54,42,.09)}
.pcard img{transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.pcard:hover img{transform:scale(1.025)}
.feature:hover,.specbox:hover,.pack:hover,.contactcard:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(12,54,42,.06)}
.heroVisual{animation:heroFloat 7s ease-in-out infinite}
.float{animation:floatCard 5s ease-in-out infinite}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .65s ease,transform .65s cubic-bezier(.2,.7,.2,1);transition-delay:var(--delay,0ms)}
.reveal.is-visible{opacity:1;transform:none}
@keyframes heroFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes floatCard{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.heroVisual,.float{animation:none}.reveal{opacity:1;transform:none;transition:none}.btn,.textlink,.pcard,.feature,.specbox,.pack,.contactcard,.trustin span{transition:none}.pcard:hover,.feature:hover,.specbox:hover,.pack:hover,.contactcard:hover{transform:none;box-shadow:none}.pcard:hover img{transform:none}}

/* Compact bilingual language switch — visible on desktop and mobile. */
.lang-switch{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;border:1px solid var(--line);border-radius:999px;padding:5px 8px;background:rgba(255,255,255,.9);box-shadow:0 5px 16px rgba(14,55,43,.05)}
.lang-item{display:inline-flex;align-items:center;gap:5px;padding:5px 7px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.4px;color:#62716b;transition:.2s}
.lang-item:hover{color:var(--green);background:var(--mint)}
.lang-item.active{color:var(--green);background:var(--mint)}
.flag{font-size:14px;line-height:1}
.lang-divider{color:#cbd7d1;font-size:11px}
@media(max-width:900px){.lang-switch{order:2;margin-left:auto;margin-right:8px}.menu{order:3}.nav>.btn{display:none}.open nav{z-index:30}}
@media(max-width:600px){.lang-switch{padding:4px 6px;gap:4px}.lang-item{padding:4px 6px;font-size:10px}.flag{font-size:13px}.brand{min-width:130px}}

/* ══════════════════════════════════════════════════════════════════
   إضافات نسخة PHP: RTL، الفورم، مسار التصفح، زر واتساب، صفحة الشكر
   ══════════════════════════════════════════════════════════════════ */

/* رابط تخطّي المحتوى — لقارئات الشاشة ولوحة المفاتيح.
   بيتخفي بـ translate مش بـ left سالب، عشان ما يعملش تمرير أفقي في النسخة العربية. */
.skiplink{position:absolute;top:0;inset-inline-start:0;transform:translateY(-200%);background:var(--green);color:#fff;padding:12px 18px;border-radius:0 0 8px 0;z-index:100}
.skiplink:focus{transform:translateY(0)}

/* إبراز الصفحة الحالية في القائمة */
nav a{position:relative;padding-bottom:3px}
nav a.active{color:var(--green);font-weight:700}
nav a.active::after{content:"";position:absolute;inset-inline:0;bottom:-2px;height:2px;background:var(--green);border-radius:2px}

/* روابط داخل عناوين كروت المنتجات */
.pcard h3 a{color:inherit}
.pcard h3 a:hover{color:var(--green)}
/* الصورة بقت جوه رابط، فقاعدة .pcard>img الأصلية مابقتش تنطبق عليها.
   لازم نعيد تحديد المقاس هنا وإلا الصورة تتمطط وتتشوّه. */
.pcard-img{display:block;overflow:hidden}
.pcard-img img{display:block;width:100%;height:240px;object-fit:cover}

/* مسار التصفح */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:16px 0 0;font-size:12px;color:#7b8a84}
.crumbs a{color:#64756f}
.crumbs a:hover{color:var(--green)}
.crumbs .sep{color:#bdcbc5}
.crumbs [aria-current]{color:var(--ink);font-weight:700}

/* ── الفورم ─────────────────────────────────────────────────────── */
.fld{position:relative}
.formalert{max-width:850px;margin:0 auto 24px;padding:16px 18px;border-radius:12px;background:#fdf1f1;border:1px solid #f0cdcd;color:#8c2f2f;display:flex;flex-direction:column;gap:5px;font-size:14px}
.formalert strong{font-size:15px}
.formalert .alt{margin-top:4px}
.formalert a{color:#8c2f2f;text-decoration:underline;font-weight:700}
.fielderr{color:#b3413f;font-size:12px;font-weight:600}
.fld.has-error input,.fld.has-error select,.fld.has-error textarea{border-color:#d98b8b;background:#fffafa}
.fld.has-error input:focus,.fld.has-error select:focus,.fld.has-error textarea:focus{border-color:#b3413f;box-shadow:0 0 0 3px rgba(179,65,63,.09)}
.rfq .privacy{font-size:12px;color:#8a9793;font-weight:400;margin:0}
/* خانة الفخ: مخفية عن البشر، مرئية للبوتات — من غير ما تعمل تمرير أفقي */
.hp-trap{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* ── صفحة الشكر ─────────────────────────────────────────────────── */
.pageHero.success{background:linear-gradient(180deg,var(--mint),var(--bg))}
.pageHero .tick{width:62px;height:62px;border-radius:50%;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:22px;box-shadow:0 12px 28px rgba(18,107,77,.22)}

/* ── زر واتساب العائم ───────────────────────────────────────────── */
.wa-float{position:fixed;inset-inline-end:20px;bottom:20px;width:54px;height:54px;border-radius:50%;background:#25d366;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 26px rgba(37,211,102,.38);z-index:50;transition:transform .25s ease}
.wa-float:hover{transform:scale(1.07)}
@media(max-width:600px){.wa-float{width:48px;height:48px;inset-inline-end:14px;bottom:14px}}
@media(prefers-reduced-motion:reduce){.wa-float{transition:none}.wa-float:hover{transform:none}}

/* ── تعديلات الاتجاه من اليمين لليسار ───────────────────────────── */
[dir="rtl"] .textlink:hover{transform:translateX(3px)}
[dir="rtl"] .float{left:auto;right:-28px}
@media(max-width:900px){[dir="rtl"] .float{right:15px;left:auto}}
[dir="rtl"] .menu{margin-left:0;margin-right:auto}
@media(max-width:900px){[dir="rtl"] .lang-switch{margin-left:8px;margin-right:auto}}
[dir="rtl"] .skiplink{border-radius:0 0 0 8px}
/* الأرقام والبريد والمقاسات تفضل من الشمال لليمين جوه نص عربي */
[dir="rtl"] .specmini span,[dir="rtl"] .chips span,[dir="rtl"] .casebox .chips span{unicode-bidi:plaintext}
[dir="rtl"] input[type="email"],[dir="rtl"] .foot a[href^="mailto"],[dir="rtl"] .foot a[href*="wa.me"]{direction:ltr;text-align:right}

/* خط عربي أوضح للنسخة العربية */
[dir="rtl"] body,[dir="rtl"] .rfq input,[dir="rtl"] .rfq select,[dir="rtl"] .rfq textarea{font-family:"Segoe UI","Noto Naskh Arabic",Tahoma,Arial,sans-serif}
[dir="rtl"] h1,[dir="rtl"] h2{letter-spacing:0}
[dir="rtl"] .hero h1{letter-spacing:0;line-height:1.18}
[dir="rtl"] .pageHero h1{letter-spacing:0;line-height:1.2}
[dir="rtl"] .kicker{letter-spacing:0}

/* الشعار مايتمططش قبل تحميل الصفحة */
.brand img{flex:0 0 auto}

/* ══════════════════════════════════════════════════════════════════
   الموبايل: الشريط العلوي كان بيطلع برّه الشاشة على 320px، وأهداف
   اللمس كانت أصغر من 44px المتعارف عليها.
   ══════════════════════════════════════════════════════════════════ */
@media(max-width:900px){
  /* زرار القائمة بحجم إصبع */
  .menu{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;font-size:22px;padding:0;flex:0 0 auto}
  /* روابط القائمة المفتوحة بمساحة ضغط مريحة */
  .open nav a{width:100%;text-align:center;padding:12px 8px}
  .open nav a.active::after{display:none}
}
@media(max-width:600px){
  .nav{gap:12px}
  .brand{min-width:0;flex:0 1 auto}
  .lang-switch{flex:0 0 auto}
  /* الأعلام بتاخد عرض من غير ما تضيف معنى — النص أوضح على الشاشة الصغيرة */
  .lang-switch .flag{display:none}
  .lang-item{font-size:11px;padding:6px 8px}
}
@media(max-width:900px){
  /* سفاري على الآيفون بيكبّر الصفحة لوحده لما تضغط على حقل خطه أقل من 16px.
     ده بيخرّب تجربة ملء الفورم، فبنثبّت 16px على الموبايل. */
  .rfq input,.rfq select,.rfq textarea{font-size:16px}
  .rfq input,.rfq select{min-height:48px}
}
@media(max-width:600px){
  /* صناديق المواصفات تنزل تحت بعض بدل ما تتزنق لو النص طوّل */
  .specmini{flex-wrap:wrap}
}
@media(max-width:380px){
  .nav{gap:8px}
  .brand span{font-size:10px;letter-spacing:.6px}
  .lang-switch{padding:3px 4px;gap:3px}
  .lang-item{padding:5px 6px}
}


/* ══════════════════════════════════════════════════════════════════
   الحركة — خفيفة ومقصودة. القاعدة: كل حركة لها سبب،
   وكلها بتتوقف تمامًا لو المستخدم مفعّل "تقليل الحركة" في نظامه.
   ══════════════════════════════════════════════════════════════════ */

@keyframes hpRise { from { opacity:0; transform:translateY(24px) } to { opacity:1; transform:none } }
@keyframes hpZoom { from { opacity:0; transform:scale(.965) }     to { opacity:1; transform:none } }
@keyframes hpPulse{
  0%   { box-shadow:0 0 0 0   rgba(37,211,102,.5) }
  70%  { box-shadow:0 0 0 15px rgba(37,211,102,0)  }
  100% { box-shadow:0 0 0 0   rgba(37,211,102,0)  }
}

/* ── دخول الصفحة: العناصر تطلع واحد ورا التاني بدل ما تظهر دفعة واحدة ──
   كلها مشروطة بـ .js-ready: من غيرها المحتوى يظهر عادي فورًا. */
.js-ready .hero .heroCopy > *          { animation:hpRise .75s cubic-bezier(.2,.7,.2,1) both }
.js-ready .hero .heroCopy > :nth-child(1){ animation-delay:.05s }
.js-ready .hero .heroCopy > :nth-child(2){ animation-delay:.15s }
.js-ready .hero .heroCopy > :nth-child(3){ animation-delay:.27s }
.js-ready .hero .heroCopy > :nth-child(4){ animation-delay:.39s }
.js-ready .hero .heroCopy > :nth-child(5){ animation-delay:.50s }
.js-ready .heroVisual { animation:hpZoom .9s cubic-bezier(.2,.7,.2,1) .18s both, heroFloat 7s ease-in-out 1.1s infinite }

.js-ready .pageHero .wrap > *          { animation:hpRise .65s cubic-bezier(.2,.7,.2,1) both }
.js-ready .pageHero .wrap > :nth-child(1){ animation-delay:.04s }
.js-ready .pageHero .wrap > :nth-child(2){ animation-delay:.13s }
.js-ready .pageHero .wrap > :nth-child(3){ animation-delay:.22s }
.js-ready .pageHero .wrap > :nth-child(4){ animation-delay:.31s }

/* ── خط صغير تحت العنوان الفرعي، بيتمدّ لما القسم يدخل الشاشة ── */
.kicker { position:relative; display:inline-block; padding-bottom:9px }
.kicker::after{
  content:""; position:absolute; inset-inline-start:0; bottom:0;
  height:2px; width:34px; background:var(--green); border-radius:2px;
  transition:width .75s cubic-bezier(.2,.7,.2,1) .12s;
}
.reveal:not(.is-visible) .kicker::after { width:0 }
.qualityBand .kicker::after { background:#6fd3ab }

/* ── القائمة العلوية: خط ينمو تحت الرابط ── */
nav a::after{
  content:""; position:absolute; inset-inline:0; bottom:-2px; height:2px;
  background:var(--green); border-radius:2px;
  transform:scaleX(0); transform-origin:left;
  transition:transform .3s cubic-bezier(.2,.7,.2,1);
}
[dir="rtl"] nav a::after { transform-origin:right }
nav a:hover::after, nav a.active::after { transform:scaleX(1) }

/* ── السهم يتحرك في اتجاه القراءة عند المرور على الزر ── */
.btn span, .textlink span { display:inline-block; transition:transform .3s cubic-bezier(.2,.7,.2,1) }
.btn:hover span, .textlink:hover span            { transform:translateX(5px) }
[dir="rtl"] .btn:hover span, [dir="rtl"] .textlink:hover span { transform:translateX(-5px) }
/* الرابط نفسه يفضل ثابت — السهم هو اللي يتحرك */
.textlink:hover, [dir="rtl"] .textlink:hover { transform:none }

/* ── أرقام البطاقات: الخط تحت الرقم يطول عند المرور ── */
.feature > span::after, .pack > span::after, .contactcard > span::after{
  content:""; display:block; height:2px; width:14px; margin-top:7px;
  background:var(--green); border-radius:2px;
  transition:width .35s cubic-bezier(.2,.7,.2,1);
}
.feature:hover > span::after, .pack:hover > span::after, .contactcard:hover > span::after { width:32px }

/* ── نبضة هادئة على زر واتساب ── */
.wa-float::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  animation:hpPulse 3s ease-out infinite; pointer-events:none;
}

/* ── الشرائح الصغيرة تتلوّن عند المرور ── */
.chips span { transition:background-color .25s ease, color .25s ease }
.pcard:hover .chips span { background:#dcefe6 }

/* ── إيقاف كل ما سبق لمن يطلب تقليل الحركة ── */
@media (prefers-reduced-motion: reduce){
  .js-ready .hero .heroCopy > *, .js-ready .pageHero .wrap > *, .js-ready .heroVisual { animation:none }
  .kicker::after, .reveal:not(.is-visible) .kicker::after { width:34px; transition:none }
  nav a::after { transition:none }
  .btn span, .textlink span { transition:none }
  .btn:hover span, .textlink:hover span,
  [dir="rtl"] .btn:hover span, [dir="rtl"] .textlink:hover span { transform:none }
  .feature > span::after, .pack > span::after, .contactcard > span::after { transition:none }
  .feature:hover > span::after, .pack:hover > span::after, .contactcard:hover > span::after { width:14px }
  .wa-float::after { animation:none }
  .chips span { transition:none }
  .pcard:hover .chips span { background:var(--mint) }
}


/* ══════════════════════════════════════════════════════════════════
   الرؤية والرسالة والقيم — صفحة "من نحن"
   ══════════════════════════════════════════════════════════════════ */
.vmgrid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.vmcard{
  background:#fff;border:1px solid var(--line);border-radius:18px;padding:34px;
  transition:transform .28s ease,box-shadow .28s ease;
}
.vmcard:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(12,54,42,.07)}
.vmlabel{
  display:inline-block;font-size:11px;font-weight:900;letter-spacing:1.6px;
  color:var(--green);background:var(--mint);padding:7px 13px;border-radius:999px;
}
.vmcard p{font-size:19px;line-height:1.7;color:#42534d;margin:18px 0 0}

.valuestrip{
  display:grid;grid-template-columns:repeat(3,1fr);gap:26px;
  margin-top:22px;padding:32px 34px;background:var(--dark);border-radius:18px;
}
.valuestrip > div{display:flex;flex-direction:column;gap:7px;position:relative;padding-top:14px}
.valuestrip > div::before{
  content:"";position:absolute;top:0;inset-inline-start:0;
  width:26px;height:2px;background:#6fd3ab;border-radius:2px;
}
.valuestrip b{font-size:18px;color:#fff;line-height:1.35}
.valuestrip span{font-size:14px;color:#b9cbc4;line-height:1.6}

@media(max-width:900px){
  .vmgrid{grid-template-columns:1fr}
  .valuestrip{grid-template-columns:1fr;gap:22px;padding:28px}
}
@media(max-width:600px){
  .vmcard{padding:26px}
  .vmcard p{font-size:17px}
}
@media(prefers-reduced-motion:reduce){
  .vmcard{transition:none}
  .vmcard:hover{transform:none;box-shadow:none}
}


/* ══════════════════════════════════════════════════════════════════
   الشعار — صورة عريضة فيها اسم الشركة كاملًا.
   كان متحشور في مربع 76×76 جنب نص مكرر، فكان ارتفاعه الظاهر 30px بس.
   ══════════════════════════════════════════════════════════════════ */
.brand{min-width:0;gap:0}
.brand img{width:auto;height:52px;max-width:100%;object-fit:contain}
.footbrand img{height:58px}

@media(max-width:900px){ .brand img{height:46px} }
@media(max-width:600px){ .brand img{height:40px} .footbrand img{height:48px} }
@media(max-width:380px){ .brand img{height:36px} }

/* ══════════════════════════════════════════════════════════════════
   مبدّل اللغة بعد إزالة الأعلام — نص أوضح ومساحة ضغط أكبر.
   ══════════════════════════════════════════════════════════════════ */
.lang-switch{gap:2px;padding:4px 6px}
.lang-item{font-size:12px;letter-spacing:.8px;padding:7px 11px;min-width:40px;justify-content:center}
.lang-divider{margin:0 1px}
@media(max-width:600px){ .lang-item{font-size:12px;padding:7px 10px} }

/* الشريط العريض بيقص ربع الصورة من فوق وربعها من تحت. في صورة خط الفراولة
   ده كان بيقطع وش العامل اللي قدام، فبنرفع نقطة التركيز شوية. */
.wideimg.focus-high{object-position:50% 35%}

/* ══════════════════════════════════════════════════════════════════
   خريطة الأسواق — الخريطة كانت صورة ساكنة، فبقت تحكي حاجة:
   نقطة ثابتة على مصر، ومسارات تتحرك منها إلى كل سوق، ونبضة على كل وجهة.
   الطبقة كلها SVG فوق الصورة بنفس أبعادها، و slice = object-fit:cover،
   عشان النقاط تفضل مظبوطة مع أي عرض شاشة.
   ══════════════════════════════════════════════════════════════════ */
/* --k: معامل تكبير النقاط والخطوط. الطبقة بتصغر مع الصورة، فعلى الموبايل
   لازم نكبّرها وإلا النقطة تبقى أصغر من بكسل ونص. */
.mapwrap{position:relative;margin-top:45px;border-radius:20px;overflow:hidden;--k:1}
.mapwrap .wideimg{margin-top:0;border-radius:0}
.maplayer{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

/* خط المسار الباهت — موجود دايمًا حتى لو الحركة متوقفة */
.mroute{fill:none;stroke:var(--green);opacity:.16;stroke-width:calc(1.6px * var(--k));stroke-linecap:round}
/* الشرارة اللي بتجري على المسار من مصر إلى الوجهة */
.mspark{
  fill:none;stroke:var(--green);stroke-width:calc(2.6px * var(--k));stroke-linecap:round;
  stroke-dasharray:13 87;stroke-dashoffset:100;
  animation:mapFly 5.4s linear infinite;
  animation-delay:calc(var(--i) * .85s);
}
@keyframes mapFly{ from{stroke-dashoffset:100} to{stroke-dashoffset:0} }

/* النقاط: وجهة ثابتة + حلقة بتتوسّع حواليها */
.mdot{fill:var(--green);opacity:.9;r:calc(4.5px * var(--k))}
.mdot.faint{opacity:.45;r:calc(3.4px * var(--k))}
.mping{
  fill:none;stroke:var(--green);stroke-width:calc(1.6px * var(--k));opacity:0;
  animation:mapPing 3.4s ease-out infinite;
  animation-delay:calc(var(--i) * .55s);
}
@keyframes mapPing{
  0%  { r:calc(4px * var(--k));  opacity:.55 }
  75% { r:calc(15px * var(--k)); opacity:0   }
  100%{ r:calc(15px * var(--k)); opacity:0   }
}
/* مصر: نقطة الانطلاق — أكبر شوية وحواليها هالة بيضا تفصلها عن الخريطة */
.mhome{fill:var(--green);stroke:#fff;stroke-width:calc(2.5px * var(--k));r:calc(6px * var(--k))}
.mping.home{stroke-width:calc(2px * var(--k));animation-duration:2.8s}

/* الحركة تقف لو القسم لسه ما دخلش الشاشة — ما نتعبش المعالج على الفاضي */
.reveal:not(.is-visible) .mspark, .reveal:not(.is-visible) .mping{animation-play-state:paused}

/* على الموبايل: الخريطة بأبعادها الطبيعية بدل القص، عشان الأسواق كلها تبان،
   والنقاط والخطوط أكبر عشان تفضل واضحة بعد التصغير */
@media(max-width:900px){ .mapwrap{--k:1.6} }
@media(max-width:600px){ .mapwrap{--k:2.6} .mapwrap .wideimg{height:auto} }

@media(prefers-reduced-motion:reduce){
  .mspark{animation:none;stroke-dasharray:none;stroke-dashoffset:0;stroke-width:calc(1.6px * var(--k));opacity:.3}
  .mping{animation:none;opacity:.3;r:calc(8px * var(--k))}
}
@media(max-width:380px){ .lang-item{font-size:11px;padding:6px 9px;min-width:34px} }
/* ══════════════════════════════════════════════════════════════════
   بانر الدعوة للتواصل بصورة (.ctab) — نص + زر على جنب، وصورة على الجنب التاني.
   الشبكة بتنقلب لوحدها في العربي: النص يمين والصورة شمال.
   ══════════════════════════════════════════════════════════════════ */
.ctab{
  margin:65px auto 90px; display:grid; grid-template-columns:1.05fr .95fr; align-items:center;
  background:linear-gradient(135deg,#eef6f2 0%,#e5f0eb 100%);
  border:1px solid #dcebe4; border-radius:26px; overflow:hidden;
}
.ctab-copy{ padding:56px 58px }
.ctab-copy h2{ font-size:40px; line-height:1.22; margin:0 0 18px; color:var(--dark) }
.ctab-copy > p:not(.kicker){ font-size:18px; line-height:1.75; color:#52635d; margin:0 0 30px; max-width:560px }
.ctab-copy .btn{ padding:16px 28px; font-size:16px }
.ctab-visual{ align-self:stretch; display:flex; align-items:flex-end; justify-content:center; min-height:340px }
/* multiply بيخلّي الخلفية البيضا للصورة تندمج مع لون البانر */
.ctab-visual img{ width:100%; height:100%; max-height:420px; object-fit:contain; object-position:center bottom; mix-blend-mode:multiply }

@media(max-width:900px){
  .ctab{ grid-template-columns:1fr }
  .ctab-copy{ padding:40px 32px 8px }
  .ctab-copy h2{ font-size:32px }
  .ctab-visual{ min-height:0 }
  .ctab-visual img{ max-height:260px }
}
@media(max-width:600px){
  .ctab{ margin:45px auto 65px; border-radius:22px }
  .ctab-copy{ padding:32px 24px 4px }
  .ctab-copy h2{ font-size:28px }
  .ctab-copy > p:not(.kicker){ font-size:16px; margin-bottom:24px }
  .ctab-copy .btn{ width:100% }
  .ctab-visual img{ max-height:210px }
}
/* صورة بخلفية (زي الصورة المؤقتة): تملى جنب البانر لحد الحواف بدل ما تبان صندوق عايم */
.ctab-visual.is-photo{ position:relative; min-height:360px }
.ctab-visual.is-photo img{ position:absolute; inset:0; width:100%; height:100%; max-height:none; object-fit:cover; object-position:center; mix-blend-mode:normal }
@media(max-width:900px){ .ctab-visual.is-photo{ min-height:240px; margin-top:24px } }
@media(max-width:600px){ .ctab-visual.is-photo{ min-height:200px } }
/* ══ البانر بطبقتين: رسمة الكرة الأرضية ورا، وصورة الخضار قدام ══ */
.ctab-visual.has-globe{ position:relative; min-height:380px; align-self:stretch }
.ctab-visual.has-globe .ctab-globe{
  position:absolute; inset:0; width:100%; height:100%; max-height:none;
  object-fit:contain; object-position:center top; mix-blend-mode:normal;
}
/* الخضار في الركن البعيد عن النص (تحت وعلى الحافة الخارجية)، والسفينة ناحية النص.
   الصندوق بنفس نسبة أبعاد الصورة بالظبط (height:auto)، عشان التلاشي يتحسب على
   حواف الصورة نفسها مش على مساحة فاضية حواليها. */
.ctab-visual.has-globe .ctab-produce{
  position:absolute; bottom:0; inset-inline-end:0; width:74%; height:auto; max-height:none;
  mix-blend-mode:multiply;
}
html:not([dir="rtl"]) .ctab-visual.has-globe .ctab-globe{ transform:scaleX(-1) }
/* الصورة المؤقتة مقصوصة من يمينها وتحتها (الفراولة والبروكلي متقطعين).
   الحافتين دول لازم يقعوا على حافة البانر فيختفوا: في الإنجليزي هم كده أصلًا،
   وفي العربي البانر مقلوب فبنقلب الصورة. وبعدين بنبهّت الناحيتين التانيين
   (فوق وناحية النص) عشان الخلفية الرمادي تذوب في البانر. */
[dir="rtl"] .ctab-visual.has-globe .ctab-produce.is-placeholder{ transform:scaleX(-1) }
.ctab-produce.is-placeholder{
  -webkit-mask-image:radial-gradient(ellipse 125% 140% at 100% 100%,#000 52%,transparent 88%);
          mask-image:radial-gradient(ellipse 125% 140% at 100% 100%,#000 52%,transparent 88%);
}
@media(max-width:900px){
  .ctab-visual.has-globe{ min-height:280px; margin-top:12px }
  .ctab-visual.has-globe .ctab-produce{ width:55% }
}
@media(max-width:600px){
  .ctab-visual.has-globe{ min-height:230px }
  .ctab-visual.has-globe .ctab-produce{ width:78% }
}

/* ══════════════════════════════════════════════════════════════════
   واجهة الصفحة الرئيسية — الصورة من غير كارت، ذايبة في الأبيض
   على الكمبيوتر: الصورة بحجمها الطبيعي في الركن تحت ناحية الخضار، وحافتها
   الداخلية وحافتها اللي فوق بيذوبوا في الأبيض. (جرّبنا تملى الطول كله فكانت
   الفراولة ضخمة.) في العربي الصورة مقلوبة: الخضار شمال والنص يمين.
   الصورة نفسها مقصوصة من يمينها وتحتها، فالحافتين دول بيقعوا على حافة الشاشة.
   ══════════════════════════════════════════════════════════════════ */
.hero.hero-bleed{position:relative;display:block;padding:0;overflow:hidden;isolation:isolate}
.hero-bleed .heroBg{
  position:absolute;top:auto;bottom:0;right:0;left:auto;width:min(54%,820px);height:auto;z-index:-2;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%),linear-gradient(180deg,transparent 0,#000 30%);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(90deg,transparent 0,#000 30%),linear-gradient(180deg,transparent 0,#000 30%);
          mask-composite:intersect;
}
[dir="rtl"] .hero-bleed .heroBg{right:auto;left:0;transform:scaleX(-1)}
.hero-bleed .heroIn{position:relative;min-height:500px;padding:56px 0 64px;display:flex;align-items:center}
.hero-bleed .heroCopy{max-width:680px}
/* عنوان أصغر عشان يبقى سطرين بدل أربعة — الواجهة كانت طويلة بسببه */
@media(min-width:901px){ .hero.hero-bleed h1{font-size:clamp(42px,4vw,58px)} }
/* الكارت الصغير فوق الصورة، بعيد شوية عن زرار واتساب اللي في الركن */
.hero-bleed .float{left:auto;right:0;bottom:72px}
[dir="rtl"] .hero-bleed .float{right:auto;left:0}

@keyframes hpFade{ from{opacity:0} to{opacity:1} }
.js-ready .hero-bleed .heroBg{animation:hpFade 1.1s ease .1s both}

/* الموبايل: النص فوق على أبيض، والصورة شريط بعرض الشاشة تحته بيذوب فيه من فوق */
@media(max-width:900px){
  .hero-bleed .heroIn{min-height:0;display:block;padding:45px 0 330px}
  .hero-bleed .heroBg,[dir="rtl"] .hero-bleed .heroBg{
    top:auto;left:0;right:0;width:100%;height:370px;object-fit:cover;object-position:70% 60%;
    -webkit-mask-image:none;mask-image:none;
  }
  .hero-bleed::before{
    content:"";position:absolute;left:0;right:0;bottom:0;height:370px;z-index:-1;
    background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,.55) 20%,rgba(255,255,255,0) 42%);
  }
  /* في الركن العكسي لزرار واتساب عشان ما يغطّوش بعض */
  .hero-bleed .float{bottom:22px;left:15px;right:auto}
  [dir="rtl"] .hero-bleed .float{right:15px;left:auto}
}
@media(prefers-reduced-motion:reduce){ .js-ready .hero-bleed .heroBg{animation:none} }