PageSourceSearch

https://wilow.app/

html wilow.app collected 2026-10-02 01:15:25 UTC 184,849 bytes, 4,376 lines download raw bytes

1<!doctype html>
2<html lang="ar-SA" dir="rtl">
3  <head>
4    <meta charset="utf-8" />
5    <meta
6      name="viewport"
7      content="width=device-width, initial-scale=1, maximum-scale=5"
8    />
9
10    <title>ويلو | مغسلة ملابس تسهل حياتك</title>
11    <meta
12      name="description"
13      content="ويلو: مغسلة ملابس تسهل حياتك. نستلم من البيت، نغسل ونكوي، ونوصّل خلال 24 ساعة. باقات تبدأ من 99 ريال للغسلة: ثوب، عباية، جزمة، مفارش."
14    />
15    <meta
16      name="keywords"
17      content="مغسلة ملابس تسهل حياتك, مغسلة الرياض, غسيل ملابس الرياض, توصيل غسيل, تطبيق غسيل ملابس"
18    />
19
20    <link rel="alternate" hreflang="ar-SA" href="https://wilow.app/" />
21    <link rel="alternate" hreflang="x-default" href="https://wilow.app/" />
22    <link rel="canonical" href="https://wilow.app/" />
23
24    <meta property="og:locale" content="ar_SA" />
25    <meta property="og:type" content="website" />
26    <meta property="og:site_name" content="ويلو" />
27    <meta property="og:url" content="https://wilow.app/" />
28    <meta property="og:title" content="ويلو | مغسلة ملابس تسهل حياتك" />
29    <meta
30      property="og:description"
31      content="نستلم، نغسل، نكوي، نوصّل خلال 24 ساعة. باقات تبدأ من 99 ريال للغسلة."
32    />
33    <meta
34      property="og:image"
35      content="https://wilow.app/assets/og/ar-updated.png"
36    />
37    <meta property="og:image:width" content="1200" />
38    <meta property="og:image:height" content="630" />
39    <meta name="twitter:card" content="summary_large_image" />
40    <meta name="twitter:site" content="@wilow_app" />
41    <meta name="twitter:title" content="ويلو | مغسلة ملابس تسهل حياتك" />
42    <meta
43      name="twitter:description"
44      content="نستلم، نغسل، نكوي، نوصّل خلال 24 ساعة. باقات تبدأ من 99 ريال للغسلة."
45    />
46    <meta
47      name="twitter:image"
48      content="https://wilow.app/assets/og/ar-updated.png"
49    />
50    <meta
51      name="google-site-verification"
52      content="NimHZUv4s_IHPmtIR2OzEnUt99izsLmBTeO7sPxiEQk"
53    />
54    <meta
55      name="robots"
56      content="index,follow,max-snippet:-1,max-image-preview:large,max-video-preview:-1"
57    />
58    <meta name="geo.region" content="SA-01" />
59    <meta name="geo.placename" content="Riyadh, Saudi Arabia" />
60    <meta name="geo.position" content="24.7136;46.6753" />
61    <meta name="ICBM" content="24.7136, 46.6753" />
62
63    <!-- Google tag (gtag.js) -->
vendor: 80 bytes, lines 63-66
63
64    <script
65      async
66      src="https://www.googletagmanager.com/gtag/js?id=
66G-L5P6LZ4SBB
vendor: 21 bytes, lines 66-68
66"
67    ></script>
68    
68<script>
69      
vendor: 162 bytes, lines 69-74
69window.dataLayer = window.dataLayer || [];
70      function gtag() {
71        dataLayer.push(arguments);
72      }
73      gtag("js", new Date());
74      gtag("config", "
74G-L5P6LZ4SBB
vendor: 30 bytes, lines 74-75
74", { debug_mode: true });
75    
75</script>
75
76    <!-- Preconnect to analytics origins (loaded deferred — warm up DNS+TLS early) -->
77    <link rel="preconnect" href="https://www.googletagmanager.com" />
78    <link rel="dns-prefetch" href="https://www.googletagmanager.com" />
79    <link rel="dns-prefetch" href="https://cdn.mxpnl.com" />
80
81    
81<script type="application/ld+json">
82      {
83        "@context": "https://schema.org",
84        "@type": ["LocalBusiness", "CleaningBusiness"],
85        "@id": "https://wilow.app/#org",
86        "name": "ويلو",
87        "alternateName": "Wilow",
88        "description": "خدمة غسيل الملابس بالاشتراك الشهري في الرياض مع الاستلام والتوصيل من الباب خلال 24 ساعة. Laundry-as-a-Service subscription app in Riyadh, Saudi Arabia.",
89        "url": "https://wilow.app",
90        "telephone": "+966530092588",
91        "areaServed":[{"@type":"Place","name":"العليا"},{"@type":"Place","name":"الملقا"},{"@type":"Place","name":"حطين"},{"@type":"Place","name":"الياسمين"},{"@type":"Place","name":"النرجس"},{"@type":"Place","name":"القيروان"},{"@type":"Place","name":"الورود"},{"@type":"Place","name":"الصحافة"},{"@type":"Place","name":"الغدير"},{"@type":"Place","name":"الروابي"},{"@type":"Place","name":"ظهرة لبن"},{"@type":"Place","name":"الربيع"},{"@type":"Place","name":"النخيل"},{"@type":"Place","name":"الواحة"},{"@type":"Place","name":"الوادي"},{"@type":"Place","name":"العقيق"},{"@type":"Place","name":"الملك عبدالعزيز"},{"@type":"Place","name":"العارض"},{"@type":"Place","name":"الأندلس"},{"@type":"Place","name":"المروج"},{"@type":"Place","name":"التعاون"},{"@type":"Place","name":"الخزامى"},{"@type":"Place","name":"السليمانية"},{"@type":"Place","name":"أشبيلية"},{"@type":"Place","name":"المهدية"},{"@type":"Place","name":"قرطبة"},{"@type":"Place","name":"الريان"},{"@type":"Place","name":"الجنادرية"},{"@type":"Place","name":"النزهة"},{"@type":"Place","name":"بنبان"},{"@type":"Place","name":"لبن"},{"@type":"Place","name":"الفلاح"},{"@type":"Place","name":"الدار البيضاء"},{"@type":"Place","name":"الحمراء"},{"@type":"Place","name":"المصيف"},{"@type":"Place","name":"المشاعل"},{"@type":"Place","name":"الأرجان"},{"@type":"Place","name":"الرفيعة"},{"@type":"Place","name":"الملز"},{"@type":"Place","name":"الرمال"},{"@type":"Place","name":"الخليج"},{"@type":"Place","name":"الرائد"},{"@type":"Place","name":"النسيم"},{"@type":"Place","name":"الروضة"},{"@type":"Place","name":"عرقة"},{"@type":"Place","name":"المونسية"},{"@type":"Place","name":"النفل"},{"@type":"Place","name":"الربوة"},{"@type":"Place","name":"الشفا"},{"@type":"Place","name":"الحزم"},{"@type":"Place","name":"العوالي"},{"@type":"Place","name":"طويق"},{"@type":"Place","name":"أم الحمام"},{"@type":"Place","name":"المغرزات"},{"@type":"Place","name":"القدس"},{"@type":"Place","name":"النهضة"},{"@type":"Place","name":"الازدهار"},{"@type":"Place","name":"المرسلات"}],
92        "priceRange": "SAR 396–799/month",
93        "foundingDate": "2024-05",
94        "founders": [
95          {
96            "@type": "Person",
97            "name": "Wejdan Al Ghubaiwi",
98            "jobTitle": "CEO",
99            "sameAs": "https://www.linkedin.com/in/wejdan-m-o/"
100          },
101          {
102            "@type": "Person",
103            "name": "Mohammed Almarri",
104            "jobTitle": "CTO",
105            "sameAs": "https://www.linkedin.com/in/mohammed-almarri-b80aa1135/"
106          }
107        ],
108        "address": {
109          "@type": "PostalAddress",
110          "streetAddress": "7395 دخنة، حي ظهرة لبن 1",
111          "addressLocality": "الرياض",
112          "addressRegion": "الرياض",
113          "postalCode": "13271",
114          "addressCountry": "SA"
115        },
116        "email": "[email protected]",
117        "sameAs": [
118          "https://www.instagram.com/wilow_app/",
119          "https://www.tiktok.com/@wilow_app",
120          "https://www.threads.net/@wilow_app",
121          "https://twitter.com/wilow_app",
122          "https://www.wamda.com/2025/01/demand-laundry-services-app-wilow-secures-pre-seed-round",
123          "https://zto.sa/4087"
124        ],
125        "areaServed": [
126          { "@type": "Place", "name": "العليا" },
127          { "@type": "Place", "name": "الملقا" },
128          { "@type": "Place", "name": "حطين" },
129          { "@type": "Place", "name": "الياسمين" },
130          { "@type": "Place", "name": "النرجس" },
131          { "@type": "Place", "name": "القيروان" },
132          { "@type": "Place", "name": "الورود" },
133          { "@type": "Place", "name": "الصحافة" },
134          { "@type": "Place", "name": "الغدير" },
135          { "@type": "Place", "name": "الروابي" },
136          { "@type": "Place", "name": "ظهرة لبن" },
137          { "@type": "Place", "name": "الربيع" },
138          { "@type": "Place", "name": "النخيل" },
139          { "@type": "Place", "name": "الواحة" },
140          { "@type": "Place", "name": "الوادي" },
141          { "@type": "Place", "name": "العقيق" },
142          { "@type": "Place", "name": "الملك عبدالعزيز" },
143          { "@type": "Place", "name": "العارض" },
144          { "@type": "Place", "name": "الأندلس" },
145          { "@type": "Place", "name": "المروج" },
146          { "@type": "Place", "name": "التعاون" },
147          { "@type": "Place", "name": "الخزامى" },
148          { "@type": "Place", "name": "السليمانية" },
149          { "@type": "Place", "name": "أشبيلية" },
150          { "@type": "Place", "name": "المهدية" },
151          { "@type": "Place", "name": "قرطبة" },
152          { "@type": "Place", "name": "الريان" },
153          { "@type": "Place", "name": "الجنادرية" },
154          { "@type": "Place", "name": "النزهة" },
155          { "@type": "Place", "name": "بنبان" },
156          { "@type": "Place", "name": "لبن" },
157          { "@type": "Place", "name": "الفلاح" },
158          { "@type": "Place", "name": "الدار البيضاء" },
159          { "@type": "Place", "name": "الحمراء" },
160          { "@type": "Place", "name": "المصيف" },
161          { "@type": "Place", "name": "المشاعل" },
162          { "@type": "Place", "name": "الأرجان" },
163          { "@type": "Place", "name": "الرفيعة" },
164          { "@type": "Place", "name": "الملز" },
165          { "@type": "Place", "name": "الرمال" },
166          { "@type": "Place", "name": "الخليج" },
167          { "@type": "Place", "name": "الرائد" },
168          { "@type": "Place", "name": "النسيم" },
169          { "@type": "Place", "name": "الروضة" },
170          { "@type": "Place", "name": "عرقة" },
171          { "@type": "Place", "name": "المونسية" },
172          { "@type": "Place", "name": "النفل" },
173          { "@type": "Place", "name": "الربوة" },
174          { "@type": "Place", "name": "الشفا" },
175          { "@type": "Place", "name": "الحزم" },
176          { "@type": "Place", "name": "العوالي" },
177          { "@type": "Place", "name": "طويق" },
178          { "@type": "Place", "name": "أم الحمام" },
179          { "@type": "Place", "name": "المغرزات" },
180          { "@type": "Place", "name": "القدس" },
181          { "@type": "Place", "name": "النهضة" },
182          { "@type": "Place", "name": "الازدهار" },
183          { "@type": "Place", "name": "المرسلات" }
184        ],
185        "aggregateRating": {
186          "@type": "AggregateRating",
187          "ratingValue": "4.5",
188          "reviewCount": "2043"
189        }
190      }
191    </script>
191
192    
192<script type="application/ld+json">
193      {
194        "@context": "https://schema.org",
195        "@type": "MobileApplication",
196        "name": "ويلو",
197        "alternateName": "Wilow",
198        "description": "تطبيق غسيل ملابس بالاشتراك الشهري في الرياض، استلام وتوصيل من الباب خلال 24 ساعة.",
199        "operatingSystem": "iOS, Android",
200        "applicationCategory": "LifestyleApplication",
201        "downloadUrl": "https://get.wilow.app/?src=landing-page",
202        "installUrl": [
203          "https://apps.apple.com/sa/app/%D9%88%D9%8A%D9%84%D9%88-wilow/id6511166967",
204          "https://play.google.com/store/apps/details?id=com.wilow.app"
205        ],
206        "offers": { "@type": "Offer", "price": "0", "priceCurrency": "SAR" },
207        "aggregateRating": {
208          "@type": "AggregateRating",
209          "ratingValue": "4.5",
210          "reviewCount": "2043"
211        }
212      }
213    </script>
213
214    
214<script type="application/ld+json">
215      {
216        "@context": "https://schema.org",
217        "@type": "WebSite",
218        "@id": "https://wilow.app/#website",
219        "url": "https://wilow.app",
220        "name": "ويلو",
221        "inLanguage": "ar-SA",
222        "publisher": { "@id": "https://wilow.app/#org" }
223      }
224    </script>
224
225    <!-- BreadcrumbList omitted on homepage — single-item breadcrumbs add no signal -->
226    
226<script type="application/ld+json">
227      {
228        "@context": "https://schema.org",
229        "@type": "HowTo",
230        "name": "كيف تستخدم تطبيق ويلو لغسيل الملابس بالتوصيل في الرياض",
231        "description": "أربع خطوات بسيطة للاستفادة من خدمة ويلو لغسيل الملابس بالاستلام والتوصيل في الرياض",
232        "totalTime": "PT24H",
233        "step": [
234          {
235            "@type": "HowToStep",
236            "position": "1",
237            "name": "حمّل التطبيق واختر الكمية",
238            "text": "نزّل تطبيق ويلو واختر الباقة الشهرية المناسبة (ميني 3كجم، بيسك 5كجم، بلس 7كجم، أو ماكس 10كجم) حسب كمية غسيلك. سيُوصَل إليك كيس ويلو المخصص لتعبئته."
239          },
240          {
241            "@type": "HowToStep",
242            "position": "2",
243            "name": "اختر يوم الاستلام",
244            "text": "حدد اليوم والفترة المناسبة (صباحية أو مسائية) من التطبيق. سيأتي المندوب إلى بابك لاستلام الكيس المعبأ وينتظرك حتى تنتهي من التعبئة."
245          },
246          {
247            "@type": "HowToStep",
248            "position": "3",
249            "name": "الغسيل والكوي والتغليف",
250            "text": "تُفرز الملابس وتُفحص وتُغسَل بالطريقة المناسبة لكل قماش (بخار للحساسة، غسيل عادي، أو يدوي للمطرزة)، ثم تُكوى وتُغلَّف حسب تفضيلاتك المحفوظة في التطبيق."
251          },
252          {
253            "@type": "HowToStep",
254            "position": "4",
255            "name": "التوصيل خلال 24 ساعة",
256            "text": "تُوصَل الملابس نظيفة ومكوية إلى باب المنزل خلال 24 ساعة من الاستلام. الأحذية والقطع الحساسة تُوصَل خلال 48 ساعة."
257          }
258        ]
259      }
260    </script>
260
261    
261<script type="application/ld+json">
262      {
263        "@context": "https://schema.org",
264        "@type": "Service",
265        "name": "باقة ميني — غسيل الملابس بالتوصيل في الرياض",
266        "provider": { "@id": "https://wilow.app/#org" },
267        "serviceType": "Laundry Subscription Service",
268        "areaServed": { "@type": "City", "name": "الرياض" },
269        "description": "باقة شهرية تشمل 4 غسلات بسعة 3 كيلوغرام لكل غسلة (7–20 قطعة تقريباً)، مع استلام وتوصيل مجاني خلال 24 ساعة.",
270        "offers": {
271          "@type": "Offer",
272          "price": "396",
273          "priceCurrency": "SAR",
274          "description": "396 ريال شهرياً، 99 ريال للغسلة الواحدة"
275        }
276      }
277    </script>
277
278    
278<script type="application/ld+json">
279      {
280        "@context": "https://schema.org",
281        "@type": "Service",
282        "name": "باقة بيسك — غسيل الملابس بالتوصيل في الرياض",
283        "provider": { "@id": "https://wilow.app/#org" },
284        "serviceType": "Laundry Subscription Service",
285        "areaServed": { "@type": "City", "name": "الرياض" },
286        "description": "باقة شهرية تشمل 4 غسلات بسعة 5 كيلوغرام لكل غسلة (15–30 قطعة تقريباً)، مع أولوية في الحجز واستلام وتوصيل مجاني.",
287        "offers": {
288          "@type": "Offer",
289          "price": "499",
290          "priceCurrency": "SAR",
291          "description": "499 ريال شهرياً، 139 ريال للغسلة الواحدة"
292        }
293      }
294    </script>
294
295    
295<script type="application/ld+json">
296      {
297        "@context": "https://schema.org",
298        "@type": "Service",
299        "name": "باقة بلس — غسيل الملابس بالتوصيل في الرياض",
300        "provider": { "@id": "https://wilow.app/#org" },
301        "serviceType": "Laundry Subscription Service",
302        "areaServed": { "@type": "City", "name": "الرياض" },
303        "description": "باقة شهرية تشمل 4 غسلات بسعة 7 كيلوغرام لكل غسلة (30–45 قطعة تقريباً)، مع كوي يدوي وتخفيض على خدمة تنظيف الأحذية.",
304        "offers": {
305          "@type": "Offer",
306          "price": "599",
307          "priceCurrency": "SAR",
308          "description": "599 ريال شهرياً، 159 ريال للغسلة الواحدة"
309        }
310      }
311    </script>
311
312    
312<script type="application/ld+json">
313      {
314        "@context": "https://schema.org",
315        "@type": "Service",
316        "name": "باقة ماكس — غسيل الملابس بالتوصيل في الرياض",
317        "provider": { "@id": "https://wilow.app/#org" },
318        "serviceType": "Laundry Subscription Service",
319        "areaServed": { "@type": "City", "name": "الرياض" },
320        "description": "باقة شهرية تشمل 4 غسلات بسعة 10 كيلوغرام لكل غسلة (45–60 قطعة تقريباً)، مع استلام وتوصيل في نفس اليوم وعناية خاصة بالبشت والعبايات.",
321        "offers": {
322          "@type": "Offer",
323          "price": "799",
324          "priceCurrency": "SAR",
325          "description": "799 ريال شهرياً، 209 ريال للغسلة الواحدة"
326        }
327      }
328    </script>
328
329    
329<script type="application/ld+json">
330      {
331        "@context": "https://schema.org",
332        "@type": "ItemList",
333        "name": "آراء عملاء ويلو",
334        "itemListElement": [
335          {
336            "@type": "Review",
337            "position": 1,
338            "itemReviewed": { "@id": "https://wilow.app/#org" },
339            "reviewRating": {
340              "@type": "Rating",
341              "ratingValue": "5",
342              "bestRating": "5"
343            },
344            "author": { "@type": "Person", "name": "مرام الغامدي" },
345            "reviewBody": "بدأت رحلتي مع ويلو من أول شهر لهم، واشتراكي معهم على باقة الخمسة كيلو. الباقة تكفي ملابس متراكمة لمدة أسبوع لشخصين. ملتزمين بالوقت وخدمة العملاء متجاوبين بشكل سريع. تجربة أنصح فيها بشدة لكل شخص مشغول."
346          },
347          {
348            "@type": "Review",
349            "position": 2,
350            "itemReviewed": { "@id": "https://wilow.app/#org" },
351            "reviewRating": {
352              "@type": "Rating",
353              "ratingValue": "5",
354              "bestRating": "5"
355            },
356            "author": { "@type": "Person", "name": "سلطان سمير" },
357            "reviewBody": "This app is unusually friendly for a laundry service, it's honestly a game-changer! Professional, clear, and genuinely caring from start to finish."
358          },
359          {
360            "@type": "Review",
361            "position": 3,
362            "itemReviewed": { "@id": "https://wilow.app/#org" },
363            "reviewRating": {
364              "@type": "Rating",
365              "ratingValue": "5",
366              "bestRating": "5"
367            },
368            "author": { "@type": "Person", "name": "محمد جداوي" },
369            "reviewBody": "I've been using ويلو for almost 3 months now and I can't even describe how convenient it is! The headache of cleaning my laundry is something from the past now."
370          }
371        ]
372      }
373    </script>
373
374    <!-- [generated:faq-schema] -->
374<script type="application/ld+json">
375{"@context":"https://schema.org","@type":"FAQPage","mainEntity":[
376{"@type":"Question","name":"كيف نشتغل في ويلو؟","acceptedAnswer":{"@type":"Answer","text":"تنزّل تطبيق ويلو، تختار الكمية المناسبة (ميني، بيسك، بلس، أو ماكس) حسب حجم غسيلك، وتحدّد وقت الاستلام. احنا نجي للبيت نستلم الكيس، نغسل ونكوي ونغلف، ونرجعه لك على نفس الباب خلال 24 ساعة."}},
377{"@type":"Question","name":"كم أسعار خدمات الغسيل و الكوي؟","acceptedAnswer":{"@type":"Answer","text":"ميني 3 كيلو 99 <img src=\"/assets/sar.svg\" width=\"11\" height=\"12\" alt=\"ريال\" style=\"vertical-align: middle\" /> للغسلة (396 شهرياً)، بيسك 5 كيلو 139 <img src=\"/assets/sar.svg\" width=\"11\" height=\"12\" alt=\"ريال\" style=\"vertical-align: middle\" /> (499 شهرياً)، بلس 7 كيلو 159 <img src=\"/assets/sar.svg\" width=\"11\" height=\"12\" alt=\"ريال\" style=\"vertical-align: middle\" /> (599 شهرياً)، ماكس 10 كيلو 209 <img src=\"/assets/sar.svg\" width=\"11\" height=\"12\" alt=\"ريال\" style=\"vertical-align: middle\" /> (799 شهرياً)."}},
378{"@type":"Question","name":"كم يستغرق الغسيل يرجع لي؟","acceptedAnswer":{"@type":"Answer","text":"الملابس العادية ترجع خلال 24 ساعة من الاستلام. الأحذية ترجع خلال 48 ساعة."}},
379{"@type":"Question","name":"وش طرق الدفع؟","acceptedAnswer":{"@type":"Answer","text":"مدى، أبل باي، STC Pay، فيزا/ماستركارد. الفاتورة تطلع في التطبيق بعد كل عملية دفع."}},
380{"@type":"Question","name":"هل تقدرون تستلمون في نفس اليوم؟","acceptedAnswer":{"@type":"Answer","text":"نعم لو طلبت قبل بداية الفترة الصباحية او المسائية و بحسبب توفر الحجوزات"}},
381{"@type":"Question","name":"ممكن أعيد جدولة طلب أو أغيّر الباقة؟","acceptedAnswer":{"@type":"Answer","text":"أكيد. كل شيئ من التطبيق حيث يمكنك إعادة جدولة طلباتك او ترقية طلبك في حالة حبيت تزيد الكمية"}},
382{"@type":"Question","name":"كم غسلة تدخل في اشتراك الشهر؟","acceptedAnswer":{"@type":"Answer","text":"4 غسلات في الشهر إسبوعياً لكل الباقات. مع 10 أيام مدة إضافية"}},
383{"@type":"Question","name":"كيف أضمن إن ملابسي ما تتخلط مع ملابس عميل ثاني؟","acceptedAnswer":{"@type":"Answer","text":"وعد ويلو من البداية غسيل فردي و صحي لكل عميل علي حدة"}},
384{"@type":"Question","name":"هل عندكم خدمة للمفارش و أغطية السرير؟","acceptedAnswer":{"@type":"Answer","text":"نعم يوجد خدمة غسيل المفارش و أغطية السرير و سيتم توفير خدمة غسيل البطانيات الكبيرة قريباً"}},
385{"@type":"Question","name":"هل لديكم مغسلة خاصة ولا تعطون الغسيل لمغسلة ثانية؟","acceptedAnswer":{"@type":"Answer","text":"ويلو تمتلك مغسلتها الخاصة وتديرها بالكامل من داخل الرياض. هذا ما يضمن لك جودة ثابتة وخصوصية تامة في كل طلب."}},
386{"@type":"Question","name":"أقدر أكبّر طلبي بعد ما أحجز؟","acceptedAnswer":{"@type":"Answer","text":"أيوه، تقدر ترقّي حجم الطلب لباقة أكبر قبل موعد الاستلام. افتح التطبيق وغيّر الباقة من الصفحة الرئيسية."}},
387{"@type":"Question","name":"وش يصير لو فيه قطعة تحتاج عناية خاصة؟","acceptedAnswer":{"@type":"Answer","text":"لما نفرز غسيلك، لو لقينا قطعة تحتاج تعليمات خاصة، نرسل لك صورة إشعار في التطبيق والإيميل قبل لا نبدأ الغسيل."}}
387,
388{"@type":"Question","name":"كيف يشتغل برنامج الدعوات؟","acceptedAnswer":{"@type":"Answer","text":"شارك رابط الدعوة الخاص فيك مع أي شخص. لما يكمّل أول طلب، انت تاخد 30 ريال في المحفظة فوراً. الرابط موجود في التطبيق تحت \"اعزم خويك\"."}}
389]}
390</script>
390<!-- [/generated:faq-schema] -->
391
392    <link rel="icon" type="image/svg+xml" href="assets/favicon.svg" />
393    <link rel="sitemap" type="application/xml" href="/sitemap.xml" />
394    <link
395      rel="preload"
396      as="font"
397      type="font/ttf"
398      href="fonts/Din.ttf"
399      crossorigin
400    />
401    <link
402      rel="preload"
403      as="font"
404      type="font/ttf"
405      href="fonts/NotoArabic.ttf"
406      crossorigin
407    />
408    <!-- Hero image preloads — only emitted on production builds where the Netlify
409     Image CDN can serve optimized WebP variants. Locally these are skipped
410     (the regular <img>/<picture> tags below load plain PNGs from /assets/). -->
411    <!-- [generated:hero-preloads] -->
412<!-- Hero image preload — LCP element, Netlify Image CDN serves WebP automatically -->
413<link rel="preload" as="image"
414      href="/.netlify/images?url=/assets/hero-screenshot.png&w=560&fm=webp&q=80"
415      imagesrcset="/.netlify/images?url=/assets/hero-screenshot.png&w=280&fm=webp&q=80 280w, /.netlify/images?url=/assets/hero-screenshot.png&w=560&fm=webp&q=80 560w"
416      imagesizes="280px"
417      fetchpriority="high"/>
418<link rel="preload" as="image" href="/.netlify/images?url=/assets/bag.png&w=360&fm=webp&q=80"/>
419<!-- [/generated:hero-preloads] -->
420    <!-- [generated:inline-css] --><style>/* ============================================================
421   Wilow Design System — Colors & Type
422   Sourced from wilow-mobile-app/lib/theme/colors.dart +
423   /Design Figma /METADATA.md top-used colors and fonts.
424   ============================================================ */
425
426/* --- Fonts (OTF/TTF shipped from mobile app) --------------- */
427@font-face {
428  font-family: "Mint Grotesk";
429  src: url("/fonts/Mint-Light.otf") format("opentype");
430  font-weight: 400;
431  font-style: normal;
432  font-display: swap;
433}
434@font-face {
435  font-family: "Mint Grotesk";
436  src: url("/fonts/Mint-Regular.otf") format("opentype");
437  font-weight: 500;
438  font-style: normal;
439  font-display: swap;
440}
441@font-face {
442  font-family: "Mint Grotesk";
443  src: url("/fonts/Mint-Bold.otf") format("opentype");
444  font-weight: 700;
445  font-style: normal;
446  font-display: swap;
447}
448@font-face {
449  font-family: "Noto Sans";
450  src: url("/fonts/Noto-Light.ttf") format("truetype");
451  font-weight: 400;
452  font-style: normal;
453  font-display: swap;
454}
455@font-face {
456  font-family: "Noto Sans";
457  src: url("/fonts/Noto-Medium.ttf") format("truetype");
458  font-weight: 500;
459  font-style: normal;
460  font-display: swap;
461}
462@font-face {
463  font-family: "Noto Sans";
464  src: url("/fonts/Noto-Bold.ttf") format("truetype");
465  font-weight: 700;
466  font-style: normal;
467  font-display: swap;
468}
469@font-face {
470  font-family: "Noto Arabic";
471  src: url("/fonts/NotoArabic.ttf") format("truetype");
472  font-weight: 500;
473  font-style: normal;
474  font-display: swap;
475}
476@font-face {
477  font-family: "DIN Arabic";
478  src: url("/fonts/Din.ttf") format("truetype");
479  font-weight: 500;
480  font-style: normal;
481  font-display: swap;
482}
483
484:root {
485  /* ------- Brand Colors ------- */
486  --wilow-blue:        #ABD4FD; /* primary — logo badge, headers, buttons */
487  --wilow-blue-light:  #D4E6FC; /* big fill for illustrations / containers */
488  --wilow-blue-soft:   #DFECFC; /* subtle blue backgrounds */
489  --wilow-blue-mid:    #9FC9FC; /* splash / alt primary in figma */
490  --wilow-orange:      #FF7132; /* accent — duck feet, CTAs, highlights */
491  --wilow-orange-deep: #EF5815; /* press / hover orange */
492  --wilow-yellow:      #FFDF70; /* secondary — tags, avatar tiles */
493  --wilow-yellow-deep: #FFD132; /* deeper yellow chip / highlight */
494  --wilow-green:       #6BA638; /* success — delivered state */
495  --wilow-green-dark:  #639334; /* darker green variant */
496  --wilow-green-soft:  #BDE377; /* success chip background */
497  --wilow-red:         #B50000; /* error / destructive */
498  --wilow-indigo:      #3D3D5C; /* deep accent (rare) */
499
500  /* ------- Cream / Off-white surfaces (signature) ------- */
501  --cream-0:  #FDFBF9; /* scaffold background — app default bg */
502  --cream-1:  #FEF8F6; /* softer off-white section */
503  --cream-2:  #F8F4EF; /* card surface */
504  --cream-3:  #F3EDE4; /* header gradient top */
505  --cream-4:  #F3F0EC; /* subtle divider surface */
506  --cream-5:  #F9F5F0; /* muted surface */
507
508  /* ------- Neutrals ------- */
509  --ink:        #000000; /* primary text */
510  --ink-900:    #111111; /* near-black */
511  --ink-800:    #242424; /* bold text */
512  --ink-700:    #3F3F3F; /* body */
513  --ink-600:    #3A3939; /* b2b black */
514  --ink-500:    #686868; /* secondary text / labels */
515  --ink-400:    #878787; /* dark gray 50 */
516  --ink-300:    #BDB9B2; /* placeholder */
517  --ink-250:    #BFBFBF; /* disabled text */
518  --ink-200:    #D0CDC8; /* hairline / separator */
519  --ink-150:    #D9D9D9; /* border */
520  --ink-100:    #F2F2F2; /* gray95 — disabled btn */
521  --ink-50:     #F7F7F7; /* field background */
522  --white:      #FFFFFF;
523  --black:      #000000;
524
525  /* ------- Semantic ------- */
526  --fg-1: var(--ink);
527  --fg-2: var(--ink-500);
528  --fg-3: var(--ink-400);
529  --fg-muted: var(--ink-300);
530  --fg-inverse: var(--white);
531  --fg-error: var(--wilow-red);
532  --fg-success: var(--wilow-green);
533
534  --bg-app:     var(--cream-0);
535  --bg-surface: var(--white);
536  --bg-header:  var(--cream-3);
537  --bg-field:   var(--ink-50);
538  --bg-chip:    var(--cream-2);
539  --bg-chip-selected: var(--ink);
540  --bg-tag-yellow: var(--wilow-yellow);
541  --bg-tag-orange: var(--wilow-orange);
542
543  --border-hairline: rgba(0, 0, 0, 0.05);
544  --border-card:     rgba(0, 0, 0, 0.08);
545  --border-strong:   var(--ink-150);
546
547  /* ------- Type families ------- */
548  --font-display: "Mint Grotesk", "Mint Grotesk Trial", "DM Sans",
549    "Nunito Sans", system-ui, -apple-system, sans-serif;
550  --font-body: "Noto Sans", "Inter", system-ui, -apple-system, sans-serif;
551  --font-arabic: "DIN Arabic", "Noto Arabic", "Noto Sans Arabic", sans-serif;
552
553  /* ------- Type scale (mobile 390px reference) ------- */
554  --text-display-xl: 700 32px/1.1 var(--font-display);   /* Hi, Mariia 👋  */
555  --text-display-lg: 500 24px/1.1 var(--font-display);   /* section titles */
556  --text-display-md: 500 20px/1.2 var(--font-display);
557  --text-title:      500 18px/1.25 var(--font-display);
558  --text-body-lg:    500 16px/1.35 var(--font-body);
559  --text-body:       400 14px/1.4  var(--font-body);
560  --text-body-sm:    400 12px/1.4  var(--font-body);
561  --text-label:      500 12px/1.0  var(--font-body);     /* UI labels */
562  --text-label-sm:   500 10px/1.0  var(--font-body);     /* caption labels */
563  --text-price:      700 32px/1.1  var(--font-display);
564
565  /* ------- Spacing (4pt grid; native Flutter layouts use 16 / 20 frequently) ------- */
566  --space-0:  0;
567  --space-1:  4px;
568  --space-2:  8px;
569  --space-3:  12px;
570  --space-4:  16px; /* primary gutter */
571  --space-5:  20px; /* appbar titleSpacing */
572  --space-6:  24px;
573  --space-7:  32px;
574  --space-8:  40px;
575  --space-9:  48px;
576
577  /* ------- Radii ------- */
578  --radius-xs:  4px;
579  --radius-sm:  8px;   /* buttons */
580  --radius-md:  12px;
581  --radius-lg:  16px;  /* cards */
582  --radius-xl:  20px;
583  --radius-2xl: 24px;  /* plan cards */
584  --radius-pill: 999px;
585
586  /* ------- Elevation ------- */
587  --shadow-xs: 0 1px 2px rgba(17, 17, 17, 0.04);
588  --shadow-sm: 0 2px 6px rgba(17, 17, 17, 0.06);
589  --shadow-md: 0 6px 20px rgba(17, 17, 17, 0.06),
590               0 2px 6px rgba(17, 17, 17, 0.04);
591  --shadow-lg: 0 16px 40px rgba(17, 17, 17, 0.10);
592  --shadow-card: 0 2px 12px rgba(17, 17, 17, 0.05);
593
594  /* ------- Motion ------- */
595  --ease-standard: cubic-bezier(.2, .0, .0, 1);
596  --ease-out-soft: cubic-bezier(.22, 1, .36, 1);
597  --dur-fast: 140ms;
598  --dur-med:  220ms;
599  --dur-slow: 360ms;
600}
601
602/* ------- Semantic element styles ------- */
603body {
604  background: var(--bg-app);
605  color: var(--fg-1);
606  font: var(--text-body-lg);
607  -webkit-font-smoothing: antialiased;
608  text-rendering: optimizeLegibility;
609}
610
611h1, .h1 { font: var(--text-display-xl); letter-spacing: -0.01em; color: var(--fg-1); margin: 0; }
612h2, .h2 { font: var(--text-display-lg); color: var(--fg-1); margin: 0; }
613h3, .h3 { font: var(--text-display-md); color: var(--fg-1); margin: 0; }
614h4, .h4 { font: var(--text-title);      color: var(--fg-1); margin: 0; }
615p,  .p  { font: var(--text-body);       color: var(--fg-2); margin: 0; }
616small, .small { font: var(--text-body-sm); color: var(--fg-2); }
617.caption { font: var(--text-label-sm); color: var(--fg-2); }
618.label   { font: var(--text-label);     color: var(--fg-1); }
619.price   { font: var(--text-price);     color: var(--fg-1); }
620
621/* ============================================================
622   Wilow Landing — site-specific styles on top of design system
623   ============================================================ */
624
625html, body { margin: 0; padding: 0; }
626html { scroll-behavior: smooth; }
627
628/* Override the design-system body bg so palette tokens win over colors_and_type.css cascade */
629body { background: var(--page-bg); color: var(--on-page); }
630
631html[dir="rtl"] body {
632  font-family: var(--font-arabic);
633}
634
635/* ═════════ Palette tokens (default = cream). Overridden by JS ═════════ */
636:root {
637  --page-bg:         var(--cream-0);
638  --section-alt-bg:  var(--cream-1);
639  --section-blue-bg: var(--wilow-blue-soft);
640  --card-bg:         var(--white);
641  --nav-blur-bg:     rgba(253,251,249,.85);
642  --hero-blob:       var(--wilow-blue);
643  --on-page:         var(--ink);
644  --on-page-muted:   var(--ink-500);
645  --hairline:        rgba(0,0,0,.06);
646  --chip-ink:        var(--cream-2);
647}
648
649.site {
650  background: var(--page-bg);
651  color: var(--on-page);
652  font-family: var(--font-arabic);
653  min-height: 100vh;
654  overflow-x: hidden;
655  transition: background .3s ease;
656}
657
658/* Dark-palette inversion helpers */
659body[data-palette="ink-mono"] .nav-logo { filter: invert(1) brightness(1.2); }
660body[data-palette="ink-mono"] .plan img,
661body[data-palette="ink-mono"] .step-ico img,
662body[data-palette="ink-mono"] .wash-card img,
663body[data-palette="ink-mono"] .extra-ico img { filter: none; }
664body[data-palette="ink-mono"] .h-display,
665body[data-palette="ink-mono"] .h-xl,
666body[data-palette="ink-mono"] .h-lg,
667body[data-palette="ink-mono"] .h-md,
668body[data-palette="ink-mono"] h1, body[data-palette="ink-mono"] h2,
669body[data-palette="ink-mono"] h3, body[data-palette="ink-mono"] h4,
670body[data-palette="ink-mono"] .nav a,
671body[data-palette="ink-mono"] .plan-name,
672body[data-palette="ink-mono"] .plan-price .num,
673body[data-palette="ink-mono"] .trust-stat .num,
674body[data-palette="ink-mono"] .faq-list > details > summary { color: var(--on-page); }
675body[data-palette="ink-mono"] .body,
676body[data-palette="ink-mono"] .lead,
677body[data-palette="ink-mono"] .plan-weight,
678body[data-palette="ink-mono"] .trust-stat .lbl,
679body[data-palette="ink-mono"] .faq-answer { color: var(--on-page-muted); }
680body[data-palette="ink-mono"] .btn.primary { background: var(--wilow-orange); color: #fff; }
681body[data-palette="ink-mono"] .btn.outline { border-color: rgba(255,255,255,.25); color: #fff; }
682body[data-palette="ink-mono"] .btn.ghost { color: #fff; }
683body[data-palette="ink-mono"] .plan.featured { background: #242424; color: #fff; }
684body[data-palette="ink-mono"] .plan.featured .plan-name,
685body[data-palette="ink-mono"] .plan.featured .plan-price .num,
686body[data-palette="ink-mono"] .plan.featured ul li { color: #fff; }
687body[data-palette="ink-mono"] .hero-pricing .price-chip.featured { background: var(--wilow-orange); border-color: var(--wilow-orange); }
688body[data-palette="ink-mono"] .tldr { background: #1f1f1f; color: rgba(255,255,255,.9); border-color: rgba(255,255,255,.1); }
689body[data-palette="ink-mono"] .updated-pill { background: rgba(255,255,255,.08); color: rgba(255,255,255,.75); }
690body[data-palette="ink-mono"] .extra-dots { border-bottom-color: rgba(255,255,255,.18); }
691body[data-palette="ink-mono"] .footer { background: #000; }
692body[data-palette="ink-mono"] .neigh-chip { background: #1a1a1a; color: #fff; border-color: rgba(255,255,255,.1); }
693
694/* Blue-palette small tweaks — hero pricing featured tile shouldn't disappear */
695body[data-palette="blue"] .hero-pricing .price-chip.featured,
696body[data-palette="blue-deep"] .hero-pricing .price-chip.featured { background: var(--wilow-orange); border-color: var(--wilow-orange); }
697body[data-palette="blue"] .hero-pricing .price-chip.featured .chip-meta,
698body[data-palette="blue-deep"] .hero-pricing .price-chip.featured .chip-meta { color: rgba(255,255,255,.85); }
699body[data-palette="blue"] .nav-logo,
700body[data-palette="blue-deep"] .nav-logo,
701body[data-palette="yellow-warm"] .nav-logo { background: var(--wilow-yellow); padding: 4px 8px; border-radius: 10px; }
702
703/* Arabic display (mirror of Mint Grotesk for headlines) */
704.ar-display { font-family: "DIN Arabic", var(--font-arabic); font-weight: 500; letter-spacing: 0; }
705.ar-body    { font-family: "Noto Arabic", var(--font-arabic); font-weight: 500; }
706
707/* ------- Layout primitives ------- */
708.container {
709  max-width: 1200px;
710  margin: 0 auto;
711  padding: 0 32px;
712  box-sizing: border-box;
713}
714
715.section { padding: 96px 0; position: relative; }
716.section.tight { padding: 64px 0; }
717.section.cream { background: var(--section-alt-bg); }
718.section.cream-deep { background: var(--cream-3); }
719.section.white { background: var(--card-bg); }
720.section.blue-soft { background: var(--section-blue-bg); }
721
722/* Wilow-blue section with proportional edge fades.
723   25 % of the section height fades in from the section above, and the
724   bottom 25 % fades out into the section below.  Percentage-based zones
725   scale with content height so the transition always looks natural — no
726   media-query override needed.
727   • --fade-top    → bg colour of the section ABOVE  (default cream-0)
728   • --fade-bottom → bg colour of the section BELOW  (default cream-0) */
729.section--blue-fade {
730  --fade-top:    var(--cream-0);
731  --fade-bottom: var(--cream-0);
732  background: linear-gradient(
733    to bottom,
734    var(--fade-top)    0%,
735    var(--wilow-blue) 25%,
736    var(--wilow-blue) 75%,
737    var(--fade-bottom) 100%
738  );
739}
740
741/* Contrast on blue — kicker orange (#b55023) is ~3.25:1 on #ABD4FD
742   (WCAG AA fail). Swap to near-black; lead text bumped from ink-500 too. */
743.section--blue-fade .kicker { color: var(--ink-800); }   /* 11.8:1 on blue — AAA */
744.section--blue-fade .lead   { color: var(--ink-700); }   /*  7.2:1 on blue — AAA */
745
746/* Eyebrow tag */
747.eyebrow {
748  display: inline-flex;
749  align-items: center;
750  gap: 8px;
751  padding: 6px 14px;
752  border-radius: 999px;
753  background: var(--wilow-yellow);
754  font: 500 12px/1 var(--font-arabic);
755  color: var(--ink);
756}
757
758/* Section kicker */
759.kicker {
760  font: 500 14px/1 var(--font-arabic);
761  color: #b55023; /* darkened from #ff7132 — passes WCAG AA 4.83:1 on cream bg */
762  letter-spacing: 0;
763  margin-bottom: 12px;
764  display: inline-block;
765}
766
767/* Headlines — large Arabic */
768.h-display {
769  font-family: "DIN Arabic";
770  font-weight: 700;
771  font-size: clamp(42px, 5.4vw, 76px);
772  line-height: 1.08;
773  letter-spacing: -0.01em;
774  color: var(--ink);
775  margin: 0;
776}
777.h-xl {
778  font-family: "DIN Arabic";
779  font-weight: 700;
780  font-size: clamp(32px, 3.6vw, 52px);
781  line-height: 1.1;
782  color: var(--ink);
783  margin: 0;
784}
785.h-lg {
786  font-family: "DIN Arabic";
787  font-weight: 700;
788  font-size: clamp(24px, 2.4vw, 32px);
789  line-height: 1.15;
790  color: var(--ink);
791  margin: 0;
792}
793.h-md {
794  font-family: "DIN Arabic";
795  font-weight: 700;
796  font-size: 20px;
797  line-height: 1.25;
798  color: var(--ink);
799  margin: 0;
800}
801
802.lead {
803  font-family: "Noto Arabic";
804  font-size: clamp(16px, 1.4vw, 19px);
805  line-height: 1.55;
806  color: var(--ink-500);
807  margin: 0;
808}
809.body {
810  font-family: "Noto Arabic";
811  font-size: 15px;
812  line-height: 1.6;
813  color: var(--ink-500);
814  margin: 0;
815}
816
817/* ------- Nav bar ------- */
818/* Single-state nav: always tinted wilow-blue with a frosted backdrop blur.
819   The bg is rgba (85% opacity over --wilow-blue) so content scrolling
820   beneath is blurred AND tinted blue — gives the navbar a true "frosted
821   blue glass" feel rather than a flat blue stripe. At the top of the page
822   it visually merges with the solid blue hero (since the same blue shows
823   through); past the hero it reads as a blurred blue lens over the cream
824   sections beneath. */
825.nav {
826  position: sticky;
827  top: 0;
828  z-index: 40;
829  background: rgba(171, 212, 253, 0.78);  /* --wilow-blue with 78 % alpha */
830  backdrop-filter: saturate(180%) blur(16px);
831  -webkit-backdrop-filter: saturate(180%) blur(16px);
832  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
833  box-shadow: 0 1px 8px rgba(31, 69, 130, .07);
834}
835/* (link colour/weight handled below on the original .nav-links a rule
836    so source-order conflicts don't bring back the muted grey.) */
837.nav-inner {
838  display: flex;
839  align-items: center;
840  justify-content: space-between;
841  height: 72px;
842}
843/* Logo is a fixed size at all scroll positions — the bar no longer morphs.
844   width="92" height="48" on the <img> preserves the aspect ratio. */
845.nav-logo {
846  height: 38px;
847  display: block;
848}
849@media (max-width: 600px) {
850  .nav-logo { height: 32px; }
851}
852.nav-links {
853  display: flex;
854  gap: 28px;
855  align-items: center;
856}
857/* Nav links: pure black with weight 600 for maximum contrast against BOTH
858   nav states.
859   • On the blue hero (#ABD4FD) → 14.4:1 (AAA).
860   • On the frosted-white scrolled state → ~16:1 (AAA).
861   White would fail (both backgrounds are light); ink-700 read too quietly. */
862.nav-links a {
863  font: 600 14px/1 var(--font-arabic);
864  color: var(--ink);
865  text-decoration: none;
866}
867.nav-links a:hover { color: var(--wilow-orange-deep); }
868
869/* ------- Buttons ------- */
870.btn {
871  display: inline-flex;
872  align-items: center;
873  justify-content: center;
874  gap: 8px;
875  height: 52px;
876  padding: 0 24px;
877  border-radius: 8px;
878  border: 0;
879  cursor: pointer;
880  font: 500 16px/1 var(--font-arabic);
881  text-decoration: none;
882  transition: opacity .14s var(--ease-standard), transform .14s var(--ease-standard);
883}
884.btn:active { transform: scale(.98); }
885.btn:hover { opacity: .88; }
886.btn.primary { background: var(--ink); color: var(--white); }
887.btn.orange { background: var(--wilow-orange); color: var(--white); }
888.btn.outline { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
889.btn.ghost { background: var(--white); color: var(--ink); border: 1px solid var(--border-card); }
890.btn.pill { border-radius: 999px; }
891.btn.sm { height: 40px; padding: 0 16px; font-size: 14px; }
892.btn.lg { height: 60px; padding: 0 32px; font-size: 18px; }
893
894/* App store badges */
895.store {
896  display: inline-flex;
897  align-items: center;
898  gap: 12px;
899  padding: 10px 20px 10px 18px;
900  height: 60px;
901  background: var(--ink);
902  color: var(--white);
903  border-radius: 12px;
904  text-decoration: none;
905  box-sizing: border-box;
906  transition: transform .18s var(--ease-standard), opacity .18s var(--ease-standard);
907}
908.store:hover { transform: translateY(-2px); }
909.store .store-ico { width: 28px; height: 28px; flex: 0 0 28px; }
910.store .store-label { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; }
911.store .store-label small { font: 400 10px/1.2 var(--font-body); opacity: .8; margin-bottom: 3px; }
912.store .store-label span  { font: 700 18px/1 var(--font-display); letter-spacing: .01em; }
913html[dir="rtl"] .store .store-label { align-items: flex-end; }
914
915/* Cards */
916.card {
917  background: var(--white);
918  border-radius: 20px;
919  border: 1px solid var(--border-hairline);
920  box-shadow: var(--shadow-card);
921}
922
923/* Hairline divider */
924.hr {
925  height: 1px;
926  background: var(--border-hairline);
927  border: 0;
928  margin: 0;
929}
930
931/* Phone frame (mobile preview of landing page) */
932.phone-frame {
933  width: 390px;
934  height: 844px;
935  background: var(--cream-0);
936  border-radius: 48px;
937  overflow: hidden;
938  box-shadow: 0 30px 80px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.05);
939  position: relative;
940}
941.phone-frame .phone-scroll {
942  width: 100%;
943  height: 100%;
944  overflow-y: auto;
945  overflow-x: hidden;
946  scrollbar-width: thin;
947}
948.phone-frame .phone-scroll::-webkit-scrollbar { width: 0; }
949
950/* ═════════════════════════════════════════════════════════════════════════
951   Hero — Wilow-Blue theme
952   ─────────────────────────────────────────────────────────────────────────
953   Brand-blue fills 0–78 % of the hero, then fades smoothly to cream so the
954   trust-strip section below blends in without a hard seam.  Body copy is
955   bumped one shade darker (ink-700) to keep WCAG AA contrast on the blue.
956   ═════════════════════════════════════════════════════════════════════════ */
957.hero {
958  position: relative;
959  padding: 56px 0 96px;
960  background:
961    linear-gradient(180deg,
962      var(--wilow-blue) 0%,
963      var(--wilow-blue) 78%,
964      var(--cream-1)    100%);
965  overflow: hidden;
966}
967.hero-grid {
968  display: grid;
969  grid-template-columns: 1.05fr .95fr;
970  gap: 48px;
971  align-items: center;
972}
973.hero h1 { margin: 16px 0 20px; }
974.hero .hero-cta { display: flex; gap: 14px; margin-top: 28px; flex-wrap: wrap; }
975.hero .hero-proof { display: flex; gap: 24px; margin-top: 28px; align-items: center; flex-wrap: wrap; }
976
977/* Bump muted greys to ink-700 so .lead / .tldr / breadcrumb pass AA on blue */
978.hero .lead,
979.hero .tldr             { color: var(--ink-700); }
980.hero .breadcrumb,
981.hero .breadcrumb a     { color: var(--ink-700); }
982.hero .breadcrumb a:hover { color: var(--wilow-orange-deep); }
983.hero .breadcrumb .sep  { color: var(--ink-500); }
984
985/* TLDR card — soft blue-tinted shadow & border lift it off the blue bg */
986.hero .tldr {
987  border-color: rgba(31, 69, 130, .08);
988  box-shadow: 0 4px 16px rgba(31, 69, 130, .07);
989}
990
991/* Hero pricing chips — same idea: small blue-cast shadow so the white
992   cards feel anchored on the blue field rather than floating awkwardly. */
993.hero .hero-pricing .price-chip {
994  border-color: rgba(255,255,255,.7);
995  box-shadow: 0 4px 14px rgba(31, 69, 130, .10), 0 1px 2px rgba(0,0,0,.04);
996}
997
998/* Hero visual — phone + bag vignette */
999.hero-stage {
1000  position: relative;
1001  height: 560px;
1002  display: flex;
1003  align-items: center;
1004  justify-content: center;
1005}
1006.hero-stage .blob {
1007  position: absolute;
1008  inset: 20px 30px;
1009  /* Warm yellow halo — pops against the brand-blue background and
1010     reinforces the existing yellow eyebrow / floating-card accents. */
1011  background: radial-gradient(60% 50% at 50% 55%,
1012    color-mix(in oklab, var(--wilow-yellow) 55%, transparent) 0%,
1013    transparent 70%);
1014  z-index: 0;
1015}
1016
1017.mini-phone {
1018  width: 280px;
1019  height: 580px;
1020  background: var(--cream-0);
1021  border-radius: 40px;
1022  box-shadow: 0 30px 80px rgba(0,0,0,.18), 0 0 0 10px #111, 0 0 0 11px rgba(0,0,0,.1);
1023  position: relative;
1024  overflow: hidden;
1025  z-index: 2;
1026  transform: rotate(-4deg) translateZ(0);
1027  will-change: transform;
1028  -webkit-backface-visibility: hidden;
1029  backface-visibility: hidden;
1030}
1031
1032/* ------- Trust strip ------- */
1033.trust-strip {
1034  display: grid;
1035  grid-template-columns: repeat(4, 1fr);
1036  gap: 0;
1037  border-top: 1px solid var(--border-hairline);
1038  border-bottom: 1px solid var(--border-hairline);
1039  padding: 36px 0;
1040}
1041.trust-stat { text-align: center; padding: 0 16px; border-left: 1px solid var(--border-hairline); }
1042.trust-stat:first-child { border-left: 0; }
1043.trust-stat .num { font: 700 clamp(32px, 3.6vw, 44px)/1 "DIN Arabic"; color: var(--ink); }
1044.trust-stat .lbl { font: 500 13px/1.3 "Noto Arabic"; color: var(--ink-500); margin-top: 8px; }
1045
1046/* ------- How it works ------- */
1047.steps {
1048  display: grid;
1049  grid-template-columns: repeat(4, 1fr);
1050  gap: 24px;
1051}
1052.step {
1053  background: var(--white);
1054  border-radius: 24px;
1055  padding: 32px 28px;
1056  position: relative;
1057  border: 1px solid var(--border-hairline);
1058  box-shadow: var(--shadow-card);
1059}
1060.step .step-num {
1061  width: 36px; height: 36px;
1062  border-radius: 50%;
1063  background: var(--ink);
1064  color: var(--white);
1065  display: grid;
1066  place-items: center;
1067  font: 700 16px/1 "DIN Arabic";
1068  margin-bottom: 18px;
1069}
1070.step .step-ico {
1071  width: 64px; height: 64px;
1072  display: grid;
1073  place-items: center;
1074  background: var(--wilow-blue-soft);
1075  border-radius: 18px;
1076  margin-bottom: 20px;
1077}
1078.step .step-ico.yellow { background: var(--wilow-yellow); }
1079.step .step-ico.blue   { background: var(--wilow-blue-light); }
1080.step .step-ico.orange { background: #FFD9C7; }
1081.step .step-ico.cream  { background: var(--cream-3); }
1082.step h3 { margin-bottom: 10px; }
1083
1084/* ------- What we wash grid ------- */
1085.wash-grid {
1086  display: grid;
1087  grid-template-columns: repeat(4, 1fr);
1088  gap: 16px;
1089}
1090.wash-card {
1091  background: var(--white);
1092  border-radius: 20px;
1093  padding: 24px;
1094  border: 1px solid var(--border-hairline);
1095  display: flex;
1096  flex-direction: column;
1097  gap: 12px;
1098  min-height: 220px;
1099  position: relative;
1100  overflow: hidden;
1101  transition: transform .2s var(--ease-out-soft);
1102}
1103.wash-card:hover { transform: translateY(-4px); }
1104.wash-card.accent-blue   { background: var(--wilow-blue-soft); }
1105.wash-card.accent-yellow { background: var(--wilow-yellow); }
1106.wash-card.accent-cream  { background: var(--cream-3); }
1107.wash-card.accent-white  { background: var(--white); }
1108/* Icon badge — white pill that floats off the coloured card with a shadow.
1109   White gives maximum contrast for all icon palettes regardless of card bg. */
1110.wash-card .wash-ico {
1111  width: 76px; height: 76px;
1112  display: grid; place-items: center;
1113  border-radius: 20px;
1114  background: var(--white);
1115  box-shadow:
1116    0 6px 20px rgba(0, 0, 0, .13),
1117    0 2px  6px rgba(0, 0, 0, .08);
1118  font-size: 40px;
1119  flex-shrink: 0;
1120}
1121.wash-card .wash-ico-img { width: 60px; height: 60px; }
1122.wash-card h3 { margin-top: auto; }
1123
1124/* ------- Plans ------- */
1125.plans {
1126  display: grid;
1127  grid-template-columns: repeat(4, 1fr);
1128  gap: 18px;
1129}
1130.plan {
1131  background: var(--white);
1132  border-radius: 24px;
1133  border: 1.5px solid var(--border-hairline);
1134  padding: 28px 24px;
1135  display: flex;
1136  flex-direction: column;
1137  gap: 18px;
1138  position: relative;
1139  transition: transform .2s var(--ease-out-soft), border-color .2s var(--ease-out-soft);
1140}
1141.plan.featured {
1142  border-color: var(--ink);
1143  background: var(--cream-2);
1144  transform: translateY(-8px);
1145}
1146.plan:hover { transform: translateY(-4px); }
1147.plan.featured:hover { transform: translateY(-12px); }
1148.plan .badge {
1149  position: absolute;
1150  top: -14px;
1151  right: 24px;
1152  background: var(--wilow-orange);
1153  color: var(--white);
1154  padding: 6px 14px;
1155  border-radius: 999px;
1156  font: 700 11px/1 "DIN Arabic";
1157}
1158.new-badge {
1159  position: absolute;
1160  top: -16px;
1161  left: 10px;
1162  background: var(--wilow-orange);
1163  color: var(--white);
1164  padding: 6px 14px;
1165  border-radius: 999px;
1166  font: 700 11px/1 "DIN Arabic";
1167}
1168html[dir="rtl"] .plan .badge { right: auto; left: 24px; }
1169.plan .plan-name { font: 700 22px/1.1 "DIN Arabic"; color: var(--ink); }
1170.plan .plan-weight { font: 500 13px/1 "Noto Arabic"; color: var(--ink-500); }
1171.plan .plan-price-block { display: flex; flex-direction: column; gap: 6px; }
1172.plan .plan-price { display: flex; align-items: baseline; gap: 6px; }
1173.plan .plan-price .num { font: 700 38px/1 "DIN Arabic"; color: var(--ink); }
1174.plan .plan-price .unit { font: 500 13px/1 "Noto Arabic"; color: var(--ink-500); }
1175.plan .plan-once { font: 500 12px/1 "Noto Arabic"; color: var(--ink-400); }
1176.plan ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
1177.plan ul li { font: 500 14px/1.4 "Noto Arabic"; color: var(--ink-700); display: flex; gap: 8px; align-items: flex-start; }
1178.plan ul li::before {
1179  content: "";
1180  width: 16px; height: 16px; flex: 0 0 16px;
1181  background: var(--wilow-green-soft);
1182  border-radius: 50%;
1183  margin-top: 2px;
1184  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 8l3 3 6-6' stroke='%23000' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
1185  background-size: 12px;
1186  background-repeat: no-repeat;
1187  background-position: center;
1188}
1189
1190/* ------- Testimonials ------- */
1191.testimonials {
1192  display: grid;
1193  grid-template-columns: repeat(3, 1fr);
1194  gap: 20px;
1195}
1196.quote {
1197  background: var(--white);
1198  border-radius: 20px;
1199  padding: 28px;
1200  border: 1px solid var(--border-hairline);
1201  display: flex;
1202  flex-direction: column;
1203  gap: 16px;
1204}
1205.quote .stars { display: flex; gap: 2px; color: var(--wilow-orange); font-size: 16px; }
1206.quote .q { font: 500 17px/1.55 "DIN Arabic"; color: var(--ink); }
1207.quote .who { display: flex; gap: 12px; align-items: center; margin-top: auto; }
1208.quote .avatar {
1209  width: 40px; height: 40px; border-radius: 50%;
1210  display: grid; place-items: center;
1211  background: var(--wilow-yellow);
1212  font: 700 15px/1 "DIN Arabic"; color: var(--ink);
1213}
1214.quote .avatar.blue  { background: var(--wilow-blue); }
1215.quote .avatar.cream { background: var(--cream-3); }
1216.quote .name { font: 700 14px/1 "DIN Arabic"; color: var(--ink); }
1217.quote .meta { font: 500 12px/1 "Noto Arabic"; color: var(--ink-500); margin-top: 4px; }
1218
1219/* ------- FAQ ------- */
1220.faq-item {
1221  border-top: 1px solid var(--border-hairline);
1222}
1223.faq-item:last-child { border-bottom: 1px solid var(--border-hairline); }
1224.faq-q {
1225  width: 100%;
1226  background: transparent;
1227  border: 0;
1228  padding: 24px 0;
1229  display: flex;
1230  justify-content: space-between;
1231  align-items: center;
1232  gap: 20px;
1233  cursor: pointer;
1234  font: 700 18px/1.3 "DIN Arabic";
1235  color: var(--ink);
1236  text-align: inherit;
1237}
1238.faq-q .chev {
1239  width: 36px; height: 36px;
1240  border-radius: 50%;
1241  background: var(--cream-2);
1242  display: grid; place-items: center;
1243  transition: transform .22s var(--ease-standard), background .22s;
1244  flex: 0 0 36px;
1245}
1246.faq-item.open .faq-q .chev { transform: rotate(45deg); background: var(--ink); color: var(--white); }
1247.faq-item.open .faq-q .chev svg path { stroke: var(--white); }
1248.faq-a {
1249  font: 500 15px/1.7 "Noto Arabic";
1250  color: var(--ink-500);
1251  padding-bottom: 0;
1252  max-height: 0;
1253  overflow: hidden;
1254  transition: max-height .3s var(--ease-standard), padding .3s var(--ease-standard);
1255}
1256.faq-item.open .faq-a {
1257  max-height: 400px;
1258  padding-bottom: 24px;
1259}
1260
1261/* ------- Neighborhoods (footer / mini) ------- */
1262.neigh-grid {
1263  display: grid;
1264  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
1265  gap: 10px;
1266}
1267.neigh-chip {
1268  padding: 10px 16px;
1269  background: var(--white);
1270  border: 1px solid var(--border-hairline);
1271  border-radius: 999px;
1272  font: 500 14px/1 "DIN Arabic";
1273  color: var(--ink);
1274  text-align: center;
1275}
1276a.neigh-chip { text-decoration: none; color: inherit; transition: background .15s; }
1277a.neigh-chip:hover { background: rgba(0,0,0,.05); }
1278
1279/* ------- Blog teaser ------- */
1280.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
1281.blog-card {
1282  background: var(--white);
1283  border-radius: 20px;
1284  overflow: hidden;
1285  border: 1px solid var(--border-hairline);
1286  transition: transform .2s var(--ease-out-soft);
1287  text-decoration: none;
1288  color: var(--ink);
1289  display: block;
1290}
1291.blog-card:hover { transform: translateY(-4px); }
1292.blog-card .blog-img {
1293  height: 180px;
1294  background: var(--wilow-blue-soft);
1295  background-size: cover;
1296  background-position: center;
1297}
1298.blog-card .blog-body { padding: 20px 22px 24px; }
1299.blog-card .blog-cat {
1300  font: 500 11px/1 "DIN Arabic";
1301  color: var(--wilow-orange);
1302  text-transform: uppercase;
1303  letter-spacing: .05em;
1304}
1305.blog-card h3 { margin-top: 10px; font-size: 18px; }
1306.blog-card .blog-meta { margin-top: 12px; font: 500 12px/1 "Noto Arabic"; color: var(--ink-400); }
1307
1308/* ------- Final CTA with QR ------- */
1309.final-cta {
1310  background: var(--wilow-blue);
1311  border-radius: 32px;
1312  padding: 64px 56px;
1313  display: grid;
1314  grid-template-columns: 1.4fr 1fr;
1315  align-items: center;
1316  gap: 48px;
1317  position: relative;
1318  overflow: hidden;
1319}
1320.qr-card {
1321  background: var(--white);
1322  border-radius: 24px;
1323  padding: 24px;
1324  display: flex;
1325  flex-direction: column;
1326  align-items: center;
1327  gap: 14px;
1328  box-shadow: var(--shadow-lg);
1329}
1330.qr-box {
1331  width: 180px;
1332  height: 180px;
1333  background: var(--ink);
1334  border-radius: 12px;
1335  display: grid;
1336  place-items: center;
1337  color: var(--white);
1338  position: relative;
1339  overflow: hidden;
1340}
1341
1342/* ------- Footer ------- */
1343.footer {
1344  background: var(--ink);
1345  color: var(--white);
1346  padding: 72px 0 32px;
1347}
1348.footer a { color: rgba(255,255,255,.7); text-decoration: none; font: 500 14px/1.8 "Noto Arabic"; }
1349.footer a:hover { color: var(--white); }
1350.footer-grid {
1351  display: grid;
1352  grid-template-columns: 1.6fr 1fr 1fr 1fr;
1353  gap: 48px;
1354  padding-bottom: 48px;
1355  border-bottom: 1px solid rgba(255,255,255,.1);
1356}
1357.footer h3,
1358.footer h4 { color: var(--white); margin: 0 0 16px; font: 700 14px/1 "DIN Arabic"; text-transform: uppercase; letter-spacing: .06em; }
1359.footer .footer-bottom {
1360  padding-top: 32px;
1361  display: flex;
1362  justify-content: space-between;
1363  align-items: center;
1364  gap: 24px;
1365  font: 500 13px/1.5 "Noto Arabic";
1366  color: rgba(255,255,255,.6);
1367  flex-wrap: wrap;
1368}
1369
1370/* ------- Native FAQ via <details> ------- */
1371.faq-item details {
1372  border-top: 1px solid var(--border-hairline);
1373  padding: 0;
1374}
1375.faq-list { border-bottom: 1px solid var(--border-hairline); }
1376.faq-list > details {
1377  border-top: 1px solid var(--border-hairline);
1378}
1379.faq-list > details > summary {
1380  list-style: none;
1381  cursor: pointer;
1382  padding: 24px 0;
1383  display: flex;
1384  justify-content: space-between;
1385  align-items: center;
1386  gap: 20px;
1387  font: 700 18px/1.3 "DIN Arabic";
1388  color: var(--ink);
1389}
1390.faq-list > details > summary::-webkit-details-marker { display: none; }
1391.faq-list > details > summary .chev {
1392  width: 36px; height: 36px;
1393  border-radius: 50%;
1394  background: var(--cream-2);
1395  display: grid; place-items: center;
1396  transition: transform .22s var(--ease-standard), background .22s;
1397  flex: 0 0 36px;
1398}
1399.faq-list > details[open] > summary .chev { transform: rotate(45deg); background: var(--ink); }
1400.faq-list > details[open] > summary .chev svg path { stroke: var(--white); }
1401.faq-list > details > .faq-answer {
1402  font: 500 15px/1.7 "Noto Arabic";
1403  color: var(--ink-500);
1404  padding: 0 0 24px;
1405  max-width: 820px;
1406}
1407
1408/* Updated-date pill */
1409.updated-pill {
1410  display: inline-flex;
1411  align-items: center;
1412  gap: 6px;
1413  padding: 6px 12px;
1414  border-radius: 999px;
1415  background: var(--cream-2);
1416  font: 500 12px/1 "Noto Arabic";
1417  color: var(--ink-500);
1418}
1419.updated-pill::before {
1420  content: "";
1421  width: 6px; height: 6px; border-radius: 50%;
1422  background: var(--wilow-green);
1423}
1424
1425/* TL;DR answer card (LLM-quotable) */
1426.tldr {
1427  background: var(--white);
1428  border: 1px solid var(--border-hairline);
1429  border-radius: 16px;
1430  padding: 20px 24px;
1431  margin: 24px 0 0;
1432  max-width: 640px;
1433  font: 500 16px/1.6 "Noto Arabic";
1434  color: var(--ink-700);
1435  position: relative;
1436}
1437
1438
1439/* Visible pricing chips in hero */
1440.hero-pricing {
1441  display: flex;
1442  gap: 12px;
1443  margin-top: 20px;
1444  flex-wrap: wrap;
1445}
1446.hero-pricing .price-chip {
1447  background: var(--white);
1448  border: 1px solid var(--border-hairline);
1449  border-radius: 12px;
1450  padding: 10px 14px 12px;
1451  min-width: 96px;
1452  box-shadow: var(--shadow-xs);
1453}
1454.hero-pricing .price-chip .chip-name {
1455  font: 700 12px/1 "DIN Arabic";
1456  color: var(--ink);
1457}
1458.hero-pricing .price-chip .chip-meta {
1459  font: 500 10px/1 "Noto Arabic";
1460  color: var(--ink-500);
1461  margin-top: 4px;
1462}
1463.hero-pricing .price-chip .chip-price {
1464  display: flex;
1465  align-items: baseline;
1466  gap: 4px;
1467  margin-top: 8px;
1468}
1469.hero-pricing .price-chip .chip-price .num {
1470  font: 700 22px/1 "DIN Arabic";
1471  color: var(--ink);
1472}
1473.hero-pricing .price-chip.featured {
1474  background: var(--ink);
1475  border-color: var(--ink);
1476}
1477.hero-pricing .price-chip.featured .chip-name,
1478.hero-pricing .price-chip.featured .chip-price .num { color: var(--white); }
1479.hero-pricing .price-chip.featured .chip-meta { color: rgba(255,255,255,.7); }
1480
1481/* ═════════ Extras v2 — menu-style cards ═════════ */
1482.extras-grid-v2 {
1483  display: grid;
1484  grid-template-columns: 1fr 1fr;
1485  gap: 24px;
1486}
1487.extra-card {
1488  background: var(--card-bg);
1489  border: 1px solid var(--hairline);
1490  border-radius: 24px;
1491  padding: 32px;
1492  display: flex;
1493  flex-direction: column;
1494  gap: 20px;
1495  position: relative;
1496  overflow: hidden;
1497}
1498.extra-card::before {
1499  content: "";
1500  position: absolute; inset: 0;
1501  background: radial-gradient(120% 60% at 100% 0%, color-mix(in oklab, var(--hero-blob) 22%, transparent) 0%, transparent 60%);
1502  pointer-events: none;
1503}
1504.extra-head {
1505  display: grid;
1506  grid-template-columns: auto 1fr auto;
1507  gap: 16px;
1508  align-items: start;
1509  position: relative;
1510}
1511.extra-ico {
1512  width: 72px; height: 72px;
1513  border-radius: 18px;
1514  background: var(--wilow-blue);
1515  display: grid; place-items: center;
1516  flex: 0 0 72px;
1517}
1518.extra-ico.yellow { background: var(--wilow-yellow); }
1519.extra-title { font: 700 22px/1.2 "DIN Arabic"; color: var(--on-page); margin-bottom: 6px; }
1520.extra-sub { font: 500 13px/1.5 "Noto Arabic"; color: var(--on-page-muted); max-width: 280px; }
1521.extra-tag {
1522  background: var(--ink);
1523  color: #fff;
1524  padding: 6px 10px;
1525  border-radius: 999px;
1526  font: 700 11px/1 "DIN Arabic";
1527  white-space: nowrap;
1528  align-self: start;
1529}
1530.extra-menu {
1531  display: flex;
1532  flex-direction: column;
1533  gap: 0;
1534  padding: 4px 6px;
1535  background: var(--section-alt-bg);
1536  border-radius: 14px;
1537  position: relative;
1538}
1539.extra-row {
1540  display: grid;
1541  grid-template-columns: auto 1fr auto;
1542  align-items: center;
1543  gap: 10px;
1544  padding: 12px 10px;
1545  border-bottom: 1px dashed var(--hairline);
1546}
1547.extra-row:last-child { border-bottom: 0; }
1548.extra-qty {
1549  font: 500 14px/1 "Noto Arabic";
1550  color: var(--on-page);
1551}
1552.extra-qty b { font: 700 17px/1 "DIN Arabic"; margin-inline-end: 2px; }
1553.extra-dots {
1554  border-bottom: 1.5px dotted rgba(0,0,0,.22);
1555  height: 10px;
1556  align-self: end;
1557  margin-bottom: 4px;
1558}
1559.extra-price {
1560  font: 700 17px/1 "DIN Arabic";
1561  color: var(--on-page);
1562  display: inline-flex;
1563  align-items: center;
1564  gap: 4px;
1565}
1566.extra-price img { display: inline-block; }
1567.extra-save {
1568  font: 500 10px/1 "DIN Arabic";
1569  color: var(--wilow-orange);
1570  background: #FFE6D9;
1571  padding: 3px 7px;
1572  border-radius: 999px;
1573  margin-inlin
1573e-start: 6px;
1574}
1575.extra-cta {
1576  align-self: flex-start;
1577  margin-top: 4px;
1578}
1579@media (max-width: 860px) {
1580  .extras-grid-v2 { grid-template-columns: 1fr; }
1581  .extra-card { padding: 24px; }
1582  .extra-head { grid-template-columns: auto 1fr; }
1583  .extra-tag { grid-column: 1 / -1; justify-self: start; }
1584}
1585
1586/* palette swatch inside tweaks */
1587.palette-opts { flex-wrap: wrap; gap: 6px !important; }
1588.palette-opts button { display: inline-flex !important; align-items: center; gap: 6px; }
1589.palette-opts .sw {
1590  display: inline-block; width: 14px; height: 14px;
1591  border-radius: 4px; border: 1px solid rgba(0,0,0,.15);
1592}
1593
1594/* Plan card bg should follow palette */
1595.plan { background: var(--card-bg); }
1596.quote { background: var(--card-bg); }
1597.final-cta { background: var(--wilow-blue); }
1598.card { background: var(--card-bg); }
1599
1600/* Hero pricing chips — use card-bg so they pop on blue/yellow palettes */
1601.hero-pricing .price-chip { background: var(--card-bg); border-color: var(--hairline); }
1602.sticky-cta {
1603  position: sticky;
1604  bottom: 0;
1605  background: var(--ink);
1606  padding: 14px 16px;
1607  display: flex;
1608  gap: 10px;
1609  justify-content: space-between;
1610  align-items: center;
1611  z-index: 30;
1612}
1613.sticky-cta .sticky-left { font: 700 14px/1.2 "DIN Arabic"; color: var(--white); }
1614.sticky-cta .sticky-left small { display: block; font: 500 11px/1.4 "Noto Arabic"; color: rgba(255,255,255,.7); margin-top: 3px; }
1615.sticky-cta .sticky-btn {
1616  background: var(--wilow-orange);
1617  color: #000000; /* black on orange — 7.66:1 contrast, was white at 2.74:1 (WCAG fail) */
1618  border-radius: 8px;
1619  padding: 12px 18px;
1620  font: 700 13px/1 "DIN Arabic";
1621  text-decoration: none;
1622}
1623
1624/* WhatsApp floater */
1625.wa-fab {
1626  position: fixed;
1627  bottom: 24px;
1628  left: 24px;
1629  width: 56px;
1630  height: 56px;
1631  border-radius: 50%;
1632  background: #25D366;
1633  display: grid;
1634  place-items: center;
1635  box-shadow: 0 12px 28px rgba(37,211,102,.3);
1636  cursor: pointer;
1637  z-index: 45;
1638  text-decoration: none;
1639  transition: transform .2s var(--ease-out-soft);
1640}
1641.wa-fab:hover { transform: scale(1.08); }
1642html[dir="rtl"] .wa-fab { left: auto; right: 24px; }
1643
1644/* ------- Viewport / mode toggles ------- */
1645.mode-toggle {
1646  position: fixed;
1647  top: 14px;
1648  right: 14px;
1649  background: var(--white);
1650  border-radius: 999px;
1651  padding: 5px;
1652  box-shadow: var(--shadow-md);
1653  display: flex;
1654  gap: 4px;
1655  z-index: 60;
1656  border: 1px solid var(--border-hairline);
1657}
1658.mode-toggle button {
1659  border: 0;
1660  background: transparent;
1661  color: var(--ink-500);
1662  font: 500 12px/1 var(--font-arabic);
1663  padding: 8px 14px;
1664  border-radius: 999px;
1665  cursor: pointer;
1666}
1667.mode-toggle button.active { background: var(--ink); color: var(--white); }
1668
1669/* ------- Mobile preview viewport (phone frame presenting full landing) ------- */
1670.phone-preview-stage {
1671  min-height: 100vh;
1672  background:
1673    radial-gradient(60% 50% at 50% 30%, var(--wilow-blue-soft) 0%, transparent 60%),
1674    var(--cream-2);
1675  display: flex;
1676  align-items: flex-start;
1677  justify-content: center;
1678  padding: 60px 20px 60px;
1679}
1680
1681/* Mobile-scaled versions of layout grids (when inside phone-frame) */
1682.phone-frame .container { padding: 0 16px; max-width: 100%; }
1683.phone-frame .section { padding: 56px 0; }
1684.phone-frame .section.tight { padding: 40px 0; }
1685.phone-frame .nav { height: auto; }
1686.phone-frame .nav-inner { height: 60px; }
1687.phone-frame .nav-links { display: none; }
1688.phone-frame .hero { padding: 56px 0 48px; }
1689.phone-frame .hero-grid { grid-template-columns: 1fr; gap: 32px; }
1690.phone-frame .h-display { font-size: 38px; }
1691.phone-frame .h-xl { font-size: 28px; }
1692.phone-frame .h-lg { font-size: 22px; }
1693.phone-frame .hero-stage { height: 420px; }
1694.phone-frame .mini-phone { width: 210px; height: 430px; }
1695.phone-frame .trust-strip { grid-template-columns: repeat(2, 1fr); gap: 24px 0; padding: 28px 0; }
1696.phone-frame .trust-stat:nth-child(3) { border-left: 0; }
1697.phone-frame .steps { grid-template-columns: 1fr; gap: 14px; }
1698.phone-frame .wash-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
1699.phone-frame .plans { grid-template-columns: 1fr; gap: 14px; }
1700.phone-frame .plan.featured { transform: none; }
1701.phone-frame .testimonials { grid-template-columns: 1fr; gap: 12px; }
1702.phone-frame .blog-grid { grid-template-columns: 1fr; gap: 14px; }
1703.phone-frame .final-cta { grid-template-columns: 1fr; padding: 32px 24px; gap: 24px; border-radius: 24px; }
1704.phone-frame .footer { padding: 40px 0 100px; }
1705.phone-frame .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; padding-bottom: 28px; }
1706.phone-frame .footer-bottom { flex-direction: column; align-items: flex-start; }
1707.phone-frame .neigh-grid { grid-template-columns: 1fr 1fr; }
1708
1709/* Responsive (for actual desktop/mobile viewport when NOT wrapping in phone) */
1710@media (max-width: 960px) {
1711  .hero-grid { grid-template-columns: 1fr; gap: 24px; }
1712  .trust-strip { grid-template-columns: repeat(2, 1fr); }
1713  .trust-stat:nth-child(3) { border-left: 0; }
1714  .steps { grid-template-columns: 1fr 1fr; }
1715  .wash-grid { grid-template-columns: 1fr 1fr; }
1716  .plans { grid-template-columns: 1fr 1fr; }
1717  .testimonials { grid-template-columns: 1fr; }
1718  .blog-grid { grid-template-columns: 1fr; }
1719  .final-cta { grid-template-columns: 1fr; padding: 40px 28px; }
1720  .footer-grid { grid-template-columns: 1fr 1fr; }
1721}
1722
1723/* ── Mobile breakpoint (real viewport, not phone-frame) ───────────────────── */
1724@media (max-width: 768px) {
1725  /* 1. Nav — collapse links; logo + CTA button only */
1726  .nav-links { display: none; }
1727
1728  /* 2. Hero — hide the illustration so h1/pricing/badges fill the screen */
1729  .hero-stage { display: none; }
1730
1731  /* 3. WhatsApp FAB — lift it above the sticky download banner (~68px) */
1732  .wa-fab { bottom: 82px; }
1733}
1734
1735/* Hide sticky cta on desktop view */
1736.desktop-view .sticky-cta { display: none; }
1737
1738/* Toggle panel (Tweaks) */
1739.tweaks-panel {
1740  position: fixed;
1741  bottom: 20px;
1742  right: 20px;
1743  background: var(--white);
1744  border-radius: 16px;
1745  padding: 20px;
1746  box-shadow: var(--shadow-lg);
1747  border: 1px solid var(--border-card);
1748  width: 280px;
1749  z-index: 55;
1750  font-family: var(--font-arabic);
1751}
1752html[dir="rtl"] .tweaks-panel { right: auto; left: 20px; }
1753.tweaks-panel h5 { font: 700 13px/1 "DIN Arabic"; color: var(--ink); margin: 0 0 14px; text-transform: uppercase; letter-spacing: .08em; }
1754.tweaks-panel .tweaks-row { margin-bottom: 16px; }
1755.tweaks-panel .tweaks-row:last-child { margin-bottom: 0; }
1756.tweaks-panel label { font: 500 12px/1 "Noto Arabic"; color: var(--ink-500); display: block; margin-bottom: 8px; }
1757.tweaks-panel .tweak-opts { display: flex; gap: 6px; flex-wrap: wrap; }
1758.tweaks-panel .tweak-opts button {
1759  background: var(--cream-2);
1760  border: 0;
1761  border-radius: 8px;
1762  padding: 8px 12px;
1763  font: 500 12px/1 "DIN Arabic";
1764  color: var(--ink);
1765  cursor: pointer;
1766  flex: 1;
1767  min-width: 72px;
1768}
1769.tweaks-panel .tweak-opts button.active { background: var(--ink); color: var(--white); }
1770
1771/* SEO annotation panel */
1772.seo-panel {
1773  position: fixed;
1774  top: 70px;
1775  right: 14px;
1776  width: 360px;
1777  max-height: 80vh;
1778  overflow-y: auto;
1779  background: var(--ink-900);
1780  color: #c7d5c7;
1781  border-radius: 14px;
1782  padding: 18px 20px;
1783  font: 400 11px/1.55 'SFMono-Regular', ui-monospace, Menlo, monospace;
1784  z-index: 55;
1785  box-shadow: var(--shadow-lg);
1786}
1787.seo-panel h5 { color: #F8F4EF; font: 700 12px/1 "DIN Arabic"; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 10px; }
1788.seo-panel h6 { color: var(--wilow-yellow); font: 700 11px/1 "DIN Arabic"; margin: 14px 0 6px; }
1789.seo-panel code { color: #F8F4EF; }
1790.seo-panel pre { margin: 0 0 6px; white-space: pre-wrap; word-break: break-word; }
1791.seo-panel .seo-badge { display: inline-block; padding: 3px 8px; border-radius: 999px; background: var(--wilow-orange); color: var(--white); font: 700 10px/1 "DIN Arabic"; margin-left: 6px; }
1792
1793/* Dev annotation tags floating on page */
1794.seo-annot {
1795  position: absolute;
1796  top: 12px;
1797  right: 12px;
1798  background: var(--ink);
1799  color: var(--wilow-yellow);
1800  font: 700 9px/1 'SFMono-Regular', ui-monospace, Menlo, monospace;
1801  padding: 4px 8px;
1802  border-radius: 999px;
1803  letter-spacing: .05em;
1804  z-index: 10;
1805  pointer-events: none;
1806}
1807html[dir="rtl"] .seo-annot { right: auto; left: 12px; }
1808
1809/* Duck decoration */
1810.duck-float {
1811  position: absolute;
1812  pointer-events: none;
1813  opacity: .9;
1814}
1815
1816/* Reveal animation */
1817@media (prefers-reduced-motion: no-preference) {
1818  [data-reveal] {
1819    opacity: 0;
1820    transform: translateY(24px);
1821    transition: opacity .6s var(--ease-out-soft), transform .6s var(--ease-out-soft);
1822  }
1823  [data-reveal].in {
1824    opacity: 1;
1825    transform: none;
1826  }
1827}
1828</style><!-- [/generated:inline-css] -->
1829  </head>
1830  <body>
1831    <!-- Google Tag Manager (noscript) -->
vendor: 87 bytes, lines 1831-1834
1831
1832    <noscript
1833      ><iframe
1834        src="https://www.googletagmanager.com/ns.html?id=
1834GTM-NC7FC4QW
vendor: 126 bytes, lines 1834-1840
1834"
1835        height="0"
1836        width="0"
1837        style="display: none; visibility: hidden"
1838      ></iframe
1839    ></noscript>
1840    
1840<!-- End Google Tag Manager (noscript) -->
1841
1842    <div id="landing-root">
1843      <div class="site" id="site-root">
1844        <!-- ─── Nav ───────────────────────────────────────────────── -->
1845        <!-- [extract:nav] -->
1846        <header class="nav">
1847          <div class="container nav-inner">
1848            <a
1849              href="/"
1850              style="
1851                display: flex;
1852                align-items: center;
1853                gap: 10px;
1854                text-decoration: none;
1855              "
1856            >
1857              <img
1858                src="assets/logos/black-plain.svg"
1859                class="nav-logo"
1860                alt="شعار ويلو"
1861                width="92"
1862                height="48"
1863              />
1864            </a>
1865            <nav class="nav-links" aria-label="التنقّل الرئيسي">
1866              <a
1867                href="#how"
1868                data-ga-event="nav_click"
1869                data-ga-section="كيف_نشتغل"
1870                >كيف نشتغل</a
1871              >
1872              <a
1873                href="#what"
1874                data-ga-event="nav_click"
1875                data-ga-section="الخدمات"
1876                >الخدمات</a
1877              >
1878              <a
1879                href="#plans"
1880                data-ga-event="nav_click"
1881                data-ga-section="الاشتراكات"
1882                >الاشتراكات</a
1883              >
1884              <a
1885                href="#coverage"
1886                data-ga-event="nav_click"
1887                data-ga-section="التغطية"
1888                >التغطية</a
1889              >
1890              <a href="#faq" data-ga-event="nav_click" data-ga-section="الأسئلة"
1891                >الأسئلة</a
1892              >
1893            </nav>
1894            <div style="display: flex; gap: 10px; align-items: center">
1895              <a
1896                href="https://get.wilow.app/?src=landing-page"
1897                target="_blank"
1898                rel="noopener"
1899                class="btn primary sm nav-dl"
1900                data-ga-event="app_download_click"
1901                data-ga-platform="universal"
1902                data-ga-location="nav"
1903                >حمّل التطبيق</a
1904              >
1905            </div>
1906          </div>
1907        </header>
1908        <!-- [/extract:nav] -->
1909
1910        <main>
1911          <!-- ─── Hero ─────────────────────────────────────────────── -->
1912          <section class="hero" id="hero">
1913            <div class="container">
1914              <div class="hero-grid">
1915                <div>
1916                  <h1 class="h-display">مغسلة ملابس تسهل حياتك</h1>
1917
1918                  <div class="tldr" role="note">
1919                    ويلو تطبيق غسيل ملابس بنظام الباقات، على حسب الكمية اللي
1920                    تختارها يوصلك كيس من ويلو، عبي الكيس إلى أن يقفل بدون حد
1921                    لعدد القطع! والطلب مرة أو إشتراك شهري شامل الغسيل والكي
1922                    والإستلام والتوصيل، مع خدمات إضافية مثل الكي فقط أو تنظيف
1923                    الأحذية
1924                  </div>
1925
1926                  <div class="hero-pricing" aria-label="أسعار الاشتراكات">
1927                    <a href='/checkout/?plan=mini&type=1' style='text-decoration: none'>
1928                      <div
1929                        class="price-chip"
1930                        onclick="document.getElementById('plans')"
1931                        style="cursor: pointer"
1932                        data-ga-event="plan_interest"
1933                        data-ga-plan="ميني"
1934                      >
1935                        <div class="chip-name">ميني 3 كيلو</div>
1936                        <div class="chip-meta">سعة 20 قطعة تقريباً</div>
1937                        <div class="chip-price">
1938                          <span class="num">99</span
1939                          ><img
1940                            src="assets/sar.svg"
1941                            width="12"
1942                            height="14"
1943                            alt="ريال"
1944                          />
1945                        </div>
1946                        <div class="chip-unit">للغسلة</div>
1947                      </div>
1948                    </a>
1949                    <div style="position: relative;">
1950<a href='/checkout/?plan=basic&type=1' style='text-decoration: none'>
1951                    <span style="
1952                      position: absolute;
1953                      top: -16px;
1954                      left: 10px;
1955                      background: var(--wilow-orange);
1956                      color: var(--white);
1957                      padding: 6px 14px;
1958                      border-radius: 999px;
1959                      font-size: 11px;
1960                      font: 700 11px/1 "DIN Arabic";">
1961                        
1962                      الأكثر طلباً
1963                    </span>
1964                      <div
1965                        class="price-chip"
1966                        onclick="document.getElementById('plans')"
1967                        style="cursor: pointer"
1968                        data-ga-event="plan_interest"
1969                        data-ga-plan="بيسك"
1970                      >
1971                        <div class="chip-name">بيسك 5 كيلو</div>
1972                        <div class="chip-meta">سعة 32 قطعة تقريباً</div>
1973                        <div class="chip-price">
1974                          <span class="num">139</span
1975                          ><img
1976                            src="assets/sar.svg"
1977                            width="12"
1978                            height="14"
1979                            alt="ريال"
1980                          />
1981                        </div>
1982                        <div class="chip-unit">للغسلة</div>
1983                      </div>
1984                    </a>
1985                    </div>
1986                    
1987                    <a href='/checkout/?plan=plus&type=1' style='text-decoration: none'>
1988                      <div
1989                        class="price-chip"
1990                        onclick="document.getElementById('plans')"
1991                        style="cursor: pointer"
1992                        data-ga-event="plan_interest"
1993                        data-ga-plan="بلس"
1994                      >
1995                        <div class="chip-name">بلس 7 كيلو</div>
1996                        <div class="chip-meta">سعة 45 قطعة تقريباً</div>
1997                        <div class="chip-price">
1998                          <span class="num">159</span
1999                          ><img
2000                            src="assets/sar.svg"
2001                            width="12"
2002                            height="14"
2003                            alt="ريال"
2004                          />
2005                        </div>
2006                        <div class="chip-unit">للغسلة</div>
2007                      </div>
2008                    </a>
2009                    <a href='/checkout/?plan=max&type=1' style='text-decoration: none'>
2010                      <div
2011                        class="price-chip"
2012                        onclick="document.getElementById('plans')"
2013                        style="cursor: pointer"
2014                        data-ga-event="plan_interest"
2015                        data-ga-plan="ماكس"
2016                      >
2017                        <div class="chip-name">ماكس 10 كيلو</div>
2018                        <div class="chip-meta">سعة 64 قطعة تقريباً</div>
2019                        <div class="chip-price">
2020                          <span class="num">209</span
2021                          ><img
2022                            src="assets/sar.svg"
2023                            width="12"
2024                            height="14"
2025                            alt="ريال"
2026                          />
2027                        </div>
2028                        <div class="chip-unit">للغسلة</div>
2029                      </div>
2030                    </a>
2031                  </div>
2032
2033                  <div class="hero-cta">
2034                    <a
2035                      href="https://apps.apple.com/sa/app/%D9%88%D9%8A%D9%84%D9%88-wilow/id6511166967"
2036                      target="_blank"
2037                      rel="noopener"
2038                      aria-label="تحميل تطبيق ويلو من App Store"
2039                      data-ga-event="app_download_click"
2040                      data-ga-platform="ios"
2041                      data-ga-location="hero"
2042                    >
2043                      <img
2044                        src="assets/download-icons/apple-dark.png"
2045                        alt="Download on the App Store"
2046                        width="132"
2047                        height="44"
2048                        style="display: block; height: 44px; width: auto"
2049                      />
2050                    </a>
2051                    <a
2052                      href="https://play.google.com/store/apps/details?id=com.wilow.app"
2053                      target="_blank"
2054                      rel="noopener"
2055                      aria-label="تحميل تطبيق ويلو من Google Play"
2056                      data-ga-event="app_download_click"
2057                      data-ga-platform="android"
2058                      data-ga-location="hero"
2059                    >
2060                      <img
2061                        src="assets/download-icons/google-play-dark.png"
2062                        alt="Get it on Google Play"
2063                        width="150"
2064                        height="44"
2065                        style="display: block; height: 44px; width: auto"
2066                      />
2067                    </a>
2068                  </div>
2069
2070                  <div class="hero-proof">
2071                    <div style="display: flex; align-items: center; gap: 10px">
2072                      <div style="display: flex">
2073                        <div
2074                          style="
2075                            width: 32px;
2076                            height: 32px;
2077                            border-radius: 50%;
2078                            background: #ffe3a8;
2079                            border: 2px solid #fff;
2080                            display: grid;
2081                            place-items: center;
2082                            font: 700 12px/1 &quot;DIN Arabic&quot;;
2083                          "
2084                        >
2085                          <span style="margin-top: -3px">ز</span>
2086                        </div>
2087                        <div
2088                          style="
2089                            width: 32px;
2090                            height: 32px;
2091                            border-radius: 50%;
2092                            background: #ffdf70;
2093                            margin-right: -8px;
2094                            border: 2px solid #fff;
2095                            display: grid;
2096                            place-items: center;
2097                            font: 700 12px/1 &quot;DIN Arabic&quot;;
2098                          "
2099                        >
2100                          <span style="margin-top: -3px">س</span>
2101                        </div>
2102                        <div
2103                          style="
2104                            width: 32px;
2105                            height: 32px;
2106                            border-radius: 50%;
2107                            background: #ffd9c7;
2108                            margin-right: -8px;
2109                            border: 2px solid #fff;
2110                            display: grid;
2111                            place-items: center;
2112                            font: 700 12px/1 &quot;DIN Arabic&quot;;
2113                          "
2114                        >
2115                          <span style="margin-top: -3px">م</span>
2116                        </div>
2117                        <div
2118                          style="
2119                            width: 32px;
2120                            height: 32px;
2121                            border-radius: 50%;
2122                            background: #bde377;
2123                            margin-right: -8px;
2124                            border: 2px solid #fff;
2125                            display: grid;
2126                            place-items: center;
2127                            font: 700 12px/1 &quot;DIN Arabic&quot;;
2128                          "
2129                        >
2130                          <span style="margin-top: -3px">Ø£</span>
2131                        </div>
2132                      </div>
2133                      <div>
2134                        <div
2135                          style="display: flex; align-items: center; gap: 1px"
2136                        >
2137                          <svg
2138                            width="14"
2139                            height="14"
2140                            viewBox="0 0 24 24"
2141                            fill="#FF7132"
2142                            aria-hidden="true"
2143                          >
2144                            <path
2145                              d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
2146                            />
2147                          </svg>
2148                          <svg
2149                            width="14"
2150                            height="14"
2151                            viewBox="0 0 24 24"
2152                            fill="#FF7132"
2153                            aria-hidden="true"
2154                          >
2155                            <path
2156                              d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
2157                            />
2158                          </svg>
2159                          <svg
2160                            width="14"
2161                            height="14"
2162                            viewBox="0 0 24 24"
2163                            fill="#FF7132"
2164                            aria-hidden="true"
2165                          >
2166                            <path
2167                              d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
2168                            />
2169                          </svg>
2170                          <svg
2171                            width="14"
2172                            height="14"
2173                            viewBox="0 0 24 24"
2174                            fill="#FF7132"
2175                            aria-hidden="true"
2176                          >
2177                            <path
2178                              d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
2179                            />
2180                          </svg>
2181                          <svg
2182                            width="14"
2183                            height="14"
2184                            viewBox="0 0 24 24"
2185                            aria-hidden="true"
2186                          >
2187                            <defs>
2188                              <linearGradient
2189                                id="hstar"
2190                                x1="0%"
2191                                y1="0%"
2192                                x2="100%"
2193                                y2="0%"
2194                              >
2195                                <stop offset="50%" stop-color="#d9d9d9" />
2196                                <stop offset="50%" stop-color="#FF7132" />
2197                              </linearGradient>
2198                            </defs>
2199                            <path
2200                              fill="url(#hstar)"
2201                              d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
2202                            />
2203                          </svg>
2204                        </div>
2205                        <div
2206                          style="
2207                            font: 500 12px/1 &quot;Noto Arabic&quot;;
2208                            color: #686868;
2209                            margin-top: 4px;
2210                          "
2211                        >
2212                          4.5 • أكثر من 2,000 عميل في الرياض
2213                        </div>
2214                      </div>
2215                    </div>
2216                  </div>
2217                </div>
2218
2219                <!-- Hero visual: phone + bag. LCP image, not lazy -->
2220                <div class="hero-stage" id="hero-visual">
2221                  <div class="blob"></div>
2222                  <img
2223                    src="/assets/bag.png"
2224                    width="180"
2225                    height="220"
2226                    style="
2227                      position: absolute;
2228                      right: 2%;
2229                      bottom: 0;
2230                      width: 180px;
2231                      z-index: 3;
2232                      transform: rotate(6deg);
2233                      filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.15));
2234                    "
2235                    alt="كيس غسيل ويلو عند باب البيت في الرياض"
2236                  />
2237                  <img
2238                    src="assets/wilow-stamp.png"
2239                    alt="ضمان المعالجة الصحية"
2240                    style="
2241                      position: absolute;
2242                      top: 2%;
2243                      left: -10px;
2244                      width: 96px;
2245                      height: 96px;
2246                      transform: rotate(14deg);
2247                      z-index: 5;
2248                      filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.3));
2249                      pointer-events: none;
2250                    "
2251                  />
2252
2253                  <div
2254                    style="
2255                      position: absolute;
2256                      top: 14%;
2257                      right: 6%;
2258                      background: #fff;
2259                      border-radius: 14px;
2260                      padding: 10px 14px;
2261                      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
2262                      display: flex;
2263                      align-items: center;
2264                      gap: 10px;
2265                      z-index: 4;
2266                      transform: rotate(3deg);
2267                    "
2268                  >
2269                    <div
2270                      style="
2271                        width: 32px;
2272                        height: 32px;
2273                        border-radius: 50%;
2274                        background: #bde377;
2275                        display: grid;
2276                        place-items: center;
2277                      "
2278                    >
2279                      <svg
2280                        width="16"
2281                        height="16"
2282                        viewBox="0 0 24 24"
2283                        fill="none"
2284                        stroke="#000"
2285                        stroke-width="1.8"
2286                        stroke-linecap="round"
2287                      >
2288                        <path d="M2 7h11v10H2z" />
2289                        <path d="M13 10h5l3 3v4h-8" />
2290                        <circle cx="6" cy="18" r="2" />
2291                        <circle cx="17" cy="18" r="2" />
2292                      </svg>
2293                    </div>
2294                    <div>
2295                      <div style="font: 700 12px/1 &quot;DIN Arabic&quot;">
2296                        الاستلام اليوم
2297                      </div>
2298                    </div>
2299                  </div>
2300
2301                  <div
2302                    style="
2303                      position: absolute;
2304                      bottom: 18%;
2305                      left: 4%;
2306                      background: #fff;
2307                      border-radius: 14px;
2308                      padding: 10px 14px;
2309                      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
2310                      display: flex;
2311                      align-items: center;
2312                      gap: 10px;
2313                      z-index: 4;
2314                      transform: rotate(-4deg);
2315                    "
2316                  >
2317                    <div
2318                      style="
2319                        width: 32px;
2320                        height: 32px;
2321                        border-radius: 50%;
2322                        background: #ffdf70;
2323                        display: grid;
2324                        place-items: center;
2325                      "
2326                    >
2327                      <img
2328                        src="assets/duck.svg"
2329                        width="22"
2330                        height="22"
2331                        alt=""
2332                      />
2333                    </div>
2334                    <div>
2335                      <div style="font: 700 12px/1 &quot;DIN Arabic&quot;">
2336                        نظيفة خلال 24 ساعة
2337                      </div>
2338                    </div>
2339                  </div>
2340
2341                  <div class="mini-phone" id="mini-phone-mount">
2342                    <picture>
2343                      <!-- [generated:hero-screenshot-source] --><source type="image/webp" srcset="/.netlify/images?url=/assets/hero-screenshot.png&w=280&fm=webp&q=80 280w, /.netlify/images?url=/assets/hero-screenshot.png&w=560&fm=webp&q=80 560w" sizes="280px"/><!-- [/generated:hero-screenshot-source] -->
2344                      <img
2345                        src="assets/hero-screenshot.png"
2346                        alt="تطبيق ويلو - شاشة الاشتراك"
2347                        width="280"
2348                        height="580"
2349                        style="
2350                          width: 100%;
2351                          height: 100%;
2352                          object-fit: cover;
2353                          object-position: top;
2354                          display: block;
2355                          border-radius: inherit;
2356                        "
2357                        fetchpriority="high"
2358                      />
2359                    </picture>
2360                  </div>
2361                </div>
2362              </div>
2363            </div>
2364          </section>
2365
2366          <!-- ─── Trust strip ─────────────────────────────────────── -->
2367          <!-- [extract:trust-strip] -->
2368          <section class="section tight white" aria-label="إحصاءات">
2369            <div class="container">
2370              <div class="trust-strip">
2371                <div class="trust-stat">
2372                  <div class="num" style="font-size: 35px">غسيل فردي</div>
2373                  <div class="lbl">لضمان معايير ويلو</div>
2374                </div>
2375                <div class="trust-stat">
2376                  <div class="num" style="font-size: 35px">بدون حد للقطع</div>
2377                  <div class="lbl">إملى الكيس لآخره</div>
2378                </div>
2379                <div class="trust-stat">
2380                  <div class="num" style="font-size: 35px">24 ساعة</div>
2381                  <div class="lbl">ترجع نظيفة لبيتك</div>
2382                </div>
2383                <div class="trust-stat">
2384                  <div class="num" style="font-size: 35px">
23844.5 ★</div>
2385                  <div class="lbl">تقييمات العملاء</div>
2386                </div>
2387              </div>
2388            </div>
2389          </section>
2390          <!-- [/extract:trust-strip] -->
2391
2392          <!-- ─── About ويلو ──────────────────────────────────── -->
2393          <!-- <section class="section cream" id="about">
2394      <div class="container" style="max-width:880px">
2395        <div style="text-align:center;max-width:720px;margin:0 auto 48px" data-reveal>
2396          <span class="kicker">عن ويلو</span>
2397          <h2 class="h-xl" style="margin-bottom:16px">مغسلة بنيناها لأننا أحسسنا بالمشكلة</h2>
2398          <p class="lead">في 2024، انطلقنا من الرياض بفكرة بسيطة: الغسيل يأخذ وقتاً وجهداً لا يستحقان. ويلو (ويلو) هي خدمة غسيل ملابس بالاشتراك الشهري (<strong>Laundry-as-a-Service</strong>) تستلم من بيتك وتوصّل خلال 24 ساعة، بدون عدّ قطع وبدون مفاجآت.</p>
2399        </div>
2400        <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:24px" data-reveal>
2401          <div style="background:#fff;border-radius:20px;padding:28px 24px;text-align:center">
2402            <div style="font:700 32px/1 'DIN Arabic';color:var(--wilow-orange)">+37</div>
2403            <div style="font:700 14px/1.4 'DIN Arabic';margin-top:8px">حياً في الرياض</div>
2404            <div style="font:400 12px/1.5 'Noto Arabic';color:var(--ink-500);margin-top:4px">شمال ووسط وغرب الرياض</div>
2405          </div>
2406          <div style="background:#fff;border-radius:20px;padding:28px 24px;text-align:center">
2407            <div style="font:700 32px/1 'DIN Arabic';color:var(--wilow-orange)">4.5 ★</div>
2408            <div style="font:700 14px/1.4 'DIN Arabic';margin-top:8px">تقييم العملاء</div>
2409            <div style="font:400 12px/1.5 'Noto Arabic';color:var(--ink-500);margin-top:4px">من أكثر من 2,000 تقييم</div>
2410          </div>
2411          <div style="background:#fff;border-radius:20px;padding:28px 24px;text-align:center">
2412            <div style="font:700 32px/1 'DIN Arabic';color:var(--wilow-orange)">مغسلتنا</div>
2413            <div style="font:700 14px/1.4 'DIN Arabic';margin-top:8px">خاصة ومُدارة بالكامل</div>
2414            <div style="font:400 12px/1.5 'Noto Arabic';color:var(--ink-500);margin-top:4px">بدون تعهيد لمغاسل خارجية</div>
2415          </div>
2416        </div>
2417        <p class="body" style="text-align:center;color:var(--ink-500);margin-top:32px;font:400 14px/1.7 var(--font-arabic)" data-reveal>ويلو شركة سعودية مرخّصة (سجل تجاري: 1009010804)، تعمل من مقرها في ظهرة لبن بالرياض. نمتلك مغسلتنا الخاصة ولا نُعهِّد الغسيل لأي طرف آخر، هذا ما يضمن لك جودة ثابتة في كل غسلة.</p>
2418        <div style="display:flex;justify-content:center;gap:32px;flex-wrap:wrap;margin-top:40px" data-reveal>
2419          <div style="text-align:center">
2420            <div style="font:700 14px/1 'DIN Arabic';color:var(--ink-900)">وجدان الغبيوي</div>
2421            <div style="font:400 12px/1.5 'Noto Arabic';color:var(--ink-500);margin-top:4px">المؤسِّسة والرئيسة التنفيذية</div>
2422            <a href="https://www.linkedin.com/in/wejdan-m-o/" target="_blank" rel="noopener" style="font:500 11px/1 'Noto Arabic';color:var(--wilow-orange);margin-top:6px;display:inline-block">LinkedIn</a>
2423          </div>
2424          <div style="text-align:center">
2425            <div style="font:700 14px/1 'DIN Arabic';color:var(--ink-900)">محمد المرّي</div>
2426            <div style="font:400 12px/1.5 'Noto Arabic';color:var(--ink-500);margin-top:4px">المؤسِّس والمدير التقني</div>
2427            <a href="https://www.linkedin.com/in/mohammed-almarri-b80aa1135/" target="_blank" rel="noopener" style="font:500 11px/1 'Noto Arabic';color:var(--wilow-orange);margin-top:6px;display:inline-block">LinkedIn</a>
2428          </div>
2429        </div>
2430      </div>
2431    </section> -->
2432
2433          <!-- ─── How it works ───────────────────────────────────── -->
2434          <!-- [extract:how] -->
2435          <section
2436            class="section section--blue-fade"
2437            id="how"
2438            style="--fade-top: var(--cream-0); --fade-bottom: var(--cream-1)"
2439          >
2440            <div class="container">
2441              <div
2442                style="
2443                  text-align: center;
2444                  max-width: 720px;
2445                  margin: 0 auto 56px;
2446                "
2447              >
2448                <span class="kicker">كيف التجربة في تطبيق ويلو</span>
2449                <h2 class="h-xl" style="margin-bottom: 16px">
2450                  مغسلة ذكية للناس المشغولة<!--LOC_PREP-->
2451                </h2>
2452                <p class="lead">من الإستلام إلى التوصيل، كل شي واضح وسهل</p>
2453              </div>
2454              <div class="steps">
2455                <article class="step" data-reveal>
2456                  <div class="step-num">1</div>
2457                  <div class="step-ico blue">
2458                    <img
2459                      src="assets/plan-basic.svg"
2460                      width="48"
2461                      height="48"
2462                      alt="أيقونة تحميل التطبيق واختيار الباقة"
2463                    />
2464                  </div>
2465                  <h3 class="h-md" style="margin-bottom: 10px">
2466                    حمّل التطبيق واختر الكمية
2467                  </h3>
2468                  <p class="body">
2469                    ميني أو بلس، راح يوصلك كيس وعبيه بكل ملابسك إلى أن يسكر ولا
2470                    تشيل هم يوجد ترقية طلب لو ودك أكثر!
2471                  </p>
2472                </article>
2473                <article class="step" data-reveal>
2474                  <div class="step-num">2</div>
2475                  <div class="step-ico yellow">
2476                    <svg
2477                      viewBox="0 0 24 24"
2478                      fill="none"
2479                      xmlns="http://www.w3.org/2000/svg"
2480                      stroke="#000"
2481                      width="35"
2482                    >
2483                      <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
2484                      <g
2485                        id="SVGRepo_tracerCarrier"
2486                        stroke-linecap="round"
2487                        stroke-linejoin="round"
2488                      ></g>
2489                      <g id="SVGRepo_iconCarrier">
2490                        <path
2491                          d="M3 9H21M7 3V5M17 3V5M11.9976 12.7119C11.2978 11.9328 10.1309 11.7232 9.25414 12.4367C8.37738 13.1501 8.25394 14.343 8.94247 15.1868C9.33119 15.6632 10.2548 16.4983 10.9854 17.1353C11.3319 17.4374 11.5051 17.5885 11.7147 17.6503C11.8934 17.703 12.1018 17.703 12.2805 17.6503C12.4901 17.5885 12.6633 17.4374 13.0098 17.1353C13.7404 16.4983 14.664 15.6632 15.0527 15.1868C15.7413 14.343 15.6329 13.1426 14.7411 12.4367C13.8492 11.7307 12.6974 11.9328 11.9976 12.7119ZM6.2 21H17.8C18.9201 21 19.4802 21 19.908 20.782C20.2843 20.5903 20.5903 20.2843 20.782 19.908C21 19.4802 21 18.9201 21 17.8V8.2C21 7.07989 21 6.51984 20.782 6.09202C20.5903 5.71569 20.2843 5.40973 19.908 5.21799C19.4802 5 18.9201 5 17.8 5H6.2C5.0799 5 4.51984 5 4.09202 5.21799C3.71569 5.40973 3.40973 5.71569 3.21799 6.09202C3 6.51984 3 7.07989 3 8.2V17.8C3 18.9201 3 19.4802 3.21799 19.908C3.40973 20.2843 3.71569 20.5903 4.09202 20.782C4.51984 21 5.07989 21 6.2 21Z"
2492                          stroke="#000"
2493                          stroke-width="2"
2494                          stroke-linecap="round"
2495                          stroke-linejoin="round"
2496                        ></path>
2497                      </g>
2498                    </svg>
2499                  </div>
2500                  <h3 class="h-md" style="margin-bottom: 10px">
2501                    اختر يوم الاستلام
2502                  </h3>
2503                  <p class="body">
2504                    اختر اليوم والفترة المناسبة لك من التطبيق ونجيك للإستلام
2505                    وبعد 24 ساعة للتوصيل.
2506                  </p>
2507                </article>
2508                <article class="step" data-reveal>
2509                  <div class="step-num">3</div>
2510                  <div class="step-ico cream">
2511                    <img
2512                      src="assets/detergent.svg"
2513                      width="48"
2514                      height="48"
2515                      alt="أيقونة غسيل وكي وتغليف الملابس"
2516                    />
2517                  </div>
2518                  <h3 class="h-md" style="margin-bottom: 10px">
2519                    غسيل وكي وتغليف
2520                  </h3>
2521                  <p class="body">
2522                    تفاصيل عدد الملابس وأنواعها وفرز ألوان الغسيل والإهتمام
2523                    بالتنظيف وإزالة البقع حسب القماش أو حسب نوع البقعة.
2524                  </p>
2525                </article>
2526                <article class="step" data-reveal>
2527                  <div class="step-num">4</div>
2528                  <div class="step-ico orange">
2529                    <svg
2530                      width="34"
2531                      height="34"
2532                      viewBox="0 0 24 24"
2533                      fill="none"
2534                      stroke="#000"
2535                      stroke-width="1.6"
2536                      stroke-linecap="round"
2537                      stroke-linejoin="round"
2538                    >
2539                      <path d="M2 7h11v10H2z" />
2540                      <path d="M13 10h5l3 3v4h-8" />
2541                      <circle cx="6" cy="18" r="2" />
2542                      <circle cx="17" cy="18" r="2" />
2543                    </svg>
2544                  </div>
2545                  <h3 class="h-md" style="margin-bottom: 10px">
2546                    يرجع خلال 24 ساعة
2547                  </h3>
2548                  <p class="body">
2549                    نظيف ومكوي إلى باب بيتك بدون تواصل، وللأحذية خلال 48 ساعة.
2550                  </p>
2551                </article>
2552              </div>
2553            </div>
2554          </section>
2555          <!-- [/extract:how] -->
2556
2557          <!-- ─── What we wash ───────────────────────────────────── -->
2558          <!-- [extract:what] -->
2559          <section class="section cream" id="what">
2560            <div class="container">
2561              <div
2562                style="
2563                  text-align: center;
2564                  max-width: 720px;
2565                  margin: 0 auto 56px;
2566                "
2567              >
2568                <span class="kicker">الخدمات</span>
2569                <h2 class="h-xl" style="margin-bottom: 16px">
2570                  خدمات مختلفة لتجربة تنظيف تشبهك
2571                </h2>
2572                <p class="lead">كل التفاصيل اللي تطرأ على بالك وأكثر..</p>
2573              </div>
2574              <div class="wash-grid">
2575                <article class="wash-card accent-blue" data-reveal>
2576                  <div class="wash-ico">
2577                    <img
2578                      src="assets/hanging.svg"
2579                      width="54"
2580                      height="54"
2581                      alt="أيقونة غسيل الثوب"
2582                    />
2583                  </div>
2584                  <h3 class="h-md" style="font-size: 17px">غسيل وكي</h3>
2585                  <p class="body" style="font-size: 13px">
2586                    خدمة ويلو الاساسية شاملة الغسيل و الكي
2587                  </p>
2588                </article>
2589                <article class="wash-card accent-yellow" data-reveal>
2590                  <div class="wash-ico">
2591                    <img
2592                      src="assets/spray.svg"
2593                      width="54"
2594                      height="54"
2595                      alt="أيقونة باخاخ إزالة البقع"
2596                    />
2597                  </div>
2598                  <h3 class="h-md" style="font-size: 17px">إزالة البقع</h3>
2599                  <p class="body" style="font-size: 13px">
2600                    نعالج البقع قبل الغسيل و توصلك صور في التطبيق قبل ما نبدأ في
2601                    العمل.
2602                  </p>
2603                </article>
2604                <article class="wash-card accent-cream" data-reveal>
2605                  <div class="wash-ico">
2606                    <img
2607                      src="assets/plan-shoes.svg"
2608                      width="60"
2609                      height="60"
2610                      alt="أيقونة تلميع الجزم"
2611                    />
2612                  </div>
2613                  <h3 class="h-md" style="font-size: 17px">تنظيف أحذية</h3>
2614                  <p class="body" style="font-size: 13px">
2615                    تنظيف عميق و تلميع لكل أنواع الأحذية, ترجع خلال 48 ساعة.
2616                  </p>
2617                </article>
2618                <article class="wash-card accent-white" data-reveal>
2619                  <div class="wash-ico">
2620                    <img
2621                      src="assets/folding.svg"
2622                      width="54"
2623                      height="54"
2624                      alt="أيقونة غسيل المفارش"
2625                    />
2626                  </div>
2627                  <h3 class="h-md" style="font-size: 17px">
2628                    أغطية مخدات أو مفرش سرير
2629                  </h3>
2630                  <p class="body" style="font-size: 13px">
2631                    غسيل بحرارة عالية لقتل الجراثيم. تُعقَّم وتُعطَّر وتُعاد
2632                    مطوية.
2633                  </p>
2634                </article>
2635                <article class="wash-card accent-blue" data-reveal>
2636                  <div class="wash-ico">
2637                    <img
2638                      src="assets/shemagh.svg"
2639                      width="54"
2640                      height="54"
2641                      alt="أيقونة شماغ للنشاء والمرزام"
2642                    />
2643                  </div>
2644                  <h3 class="h-md" style="font-size: 17px">نشاء ومرزام</h3>
2645                  <p class="body" style="font-size: 13px">
2646                    خيارات متنوعة للنشا و المرزام بحسب تفضيلاتك.
2647                  </p>
2648                </article>
2649                <article class="wash-card accent-yellow" data-reveal>
2650                  <div class="wash-ico">
2651                    <img
2652                      src="assets/scent.svg"
2653                      width="54"
2654                      height="54"
2655                      alt="أيقونة معطر ملابس"
2656                    />
2657                  </div>
2658                  <h3 class="h-md" style="font-size: 17px">معطر ملابس</h3>
2659                  <p class="body" style="font-size: 13px">
2660                    إضافة تعطير إضافي لطلبك علشان توصلك ملابسك ريحتها حلوة.
2661                  </p>
2662                </article>
2663                <article class="wash-card accent-cream" data-reveal>
2664                  <div class="wash-ico">
2665                    <img
2666                      src="assets/detergent.svg"
2667                      width="54"
2668                      height="54"
2669                      alt="أيقونة صابون عضوي"
2670                    />
2671                  </div>
2672                  <h3 class="h-md" style="font-size: 17px">صابون عضوي</h3>
2673                  <p class="body" style="font-size: 13px">
2674                    مواد عضوية معتمدة، لطيفة على الجلد والقماش، بدون كيماويات
2675                    قوية.
2676                  </p>
2677                </article>
2678                <article class="wash-card accent-white" data-reveal>
2679                  <div class="wash-ico">
2680                    <img
2681                      src="assets/fold-hang.svg"
2682                      width="54"
2683                      height="54"
2684                      alt="أيقونة تغليف وتعليق الملابس"
2685                    />
2686                  </div>
2687                  <h3 class="h-md" style="font-size: 17px">تفضيلات تغليف</h3>
2688                  <p class="body" style="font-size: 13px">
2689                    إذا ودك ملابسك معلقة أو مطوية بحسب ترتيبك لدولابك.
2690                  </p>
2691                </article>
2692              </div>
2693            </div>
2694          </section>
2695          <!-- [/extract:what] -->
2696
2697          <!-- ─── Plans ───────────────────────────────────────────── -->
2698          <!-- [extract:plans] -->
2699          <section
2700            class="section section--blue-fade"
2701            id="plans"
2702            style="--fade-top: var(--cream-1); --fade-bottom: var(--cream-1)"
2703          >
2704            <div class="container">
2705              <div
2706                style="
2707                  text-align: center;
2708                  max-width: 720px;
2709                  margin: 0 auto 56px;
2710                "
2711              >
2712                <span class="kicker">الاشتراكات</span>
2713                <h2 class="h-xl" style="margin-bottom: 16px">
2714                  إشتراكات غسيل شهرية تناسب أسلوب حياتك
2715                </h2>
2716                <p class="lead">
2717                  اختر الباقة اللي تناسبك لمدة شهر شاملة الغسيل والكوي والإستلام
2718                  والتوصيل مع أولوية المواعيد والمرونة في ترقية الباقات.
2719                </p>
2720              </div>
2721
2722              <div class="plans">
2723                <article class="plan" data-reveal>
2724                  <img
2725                    src="assets/plan-mini.svg"
2726                    width="64"
2727                    height="64"
2728                    alt="أيقونة باقة ميني"
2729                  />
2730                  <div>
2731                    <div class="plan-name">ميني</div>
2732                    <div class="plan-weight">4 غسلات</div>
2733                  </div>
2734                  <div class="plan-price-block">
2735                    <div class="plan-price">
2736                      <span class="num">396</span
2737                      ><img
2738                        src="assets/sar.svg"
2739                        width="16"
2740                        height="18"
2741                        alt="ريال سعودي"
2742                        style="vertical-align: baseline"
2743                      /><span class="unit">/ شهر</span>
2744                    </div>
2745                  </div>
2746                  <ul>
2747                    <li>🛍️ أكياس لجمع غسيلك</li>
2748                    <li>🚐 الإستلام والتوصيل</li>
2749                    <li>🗓️ إعادة جدولة</li>
2750                    <li>🔎 فرز الألوان</li>
2751                    <li>👔 كي عادي أو بخار</li>
2752                  </ul>
2753                  <a class='btn outline' data-ga-event='app_download_click' data-ga-location='plan_card' data-ga-plan='ميني' data-ga-platform='universal' href='/checkout/?plan=mini&type=4' rel='noopener' style='
2754                      width: 100%;
2755                      box-sizing: border-box;
2756                      margin-top: auto;
2757                    '>اشترك في ميني</a
2758                  >
2759                </article>
2760
2761                <article class="plan featured" data-reveal>
2762                  <span class="badge">الأكثر طلباً</span>
2763                  <img
2764                    src="assets/plan-basic.svg"
2765                    width="64"
2766                    height="64"
2767                    alt="أيقونة باقة بيسك"
2768                  />
2769                  <div>
2770                    <div class="plan-name">بيسك</div>
2771                    <div class="plan-weight">4 غسلات</div>
2772                  </div>
2773                  <div class="plan-price-block">
2774                    <div class="plan-price">
2775                      <span class="num">499</span
2776                      ><img
2777                        src="assets/sar.svg"
2778                        width="16"
2779                        height="18"
2780                        alt="ريال سعودي"
2781                        style="vertical-align: baseline"
2782                      /><span class="unit">/ شهر</span>
2783                    </div>
2784                  </div>
2785                  <ul>
2786                    <li>🛍️ أكياس لجمع غسيلك</li>
2787                    <li>🚐 الإستلام والتوصيل</li>
2788                    <li>🗓️ إعادة جدولة</li>
2789                    <li>🔎 فرز الألوان</li>
2790                    <li>👔 كي عادي أو بخار</li>
2791                  </ul>
2792                  <a class='btn primary' data-ga-event='app_download_click' data-ga-location='plan_card' data-ga-plan='بيسك' data-ga-platform='universal' href='/checkout/?plan=basic&type=4' rel='noopener' style='
2793                      width: 100%;
2794                      box-sizing: border-box;
2795                      margin-top: auto;
2796                    '>اشترك في بيسك</a
2797                  >
2798                </article>
2799
2800                <article class="plan" data-reveal>
2801                  <img
2802                    src="assets/plan-couples.svg"
2803                    width="64"
2804                    height="64"
2805                    alt="أيقونة باقة بلس"
2806                  />
2807                  <div>
2808                    <div class="plan-name">بلس</div>
2809                    <div class="plan-weight">4 غسلات</div>
2810                  </div>
2811                  <div class="plan-price-block">
2812                    <div class="plan-price">
2813                      <span class="num">599</span
2814                      ><img
2815                        src="assets/sar.svg"
2816                        width="16"
2817                        height="18"
2818                        alt="ريال سعودي"
2819                        style="vertical-align: baseline"
2820                      /><span class="unit">/ شهر</span>
2821                    </div>
2822                  </div>
2823                  <ul>
2824                    <li>🛍️ أكياس لجمع غسيلك</li>
2825                    <li>🚐 الإستلام والتوصيل</li>
2826                    <li>🗓️ إعادة جدولة</li>
2827                    <li>🔎 فرز الألوان</li>
2828                    <li>👔 كي عادي أو بخار</li>
2829                  </ul>
2830                  <a class='btn outline' data-ga-event='app_download_click' data-ga-location='plan_card' data-ga-plan='بلس' data-ga-platform='universal' href='/checkout/?plan=plus&type=4' rel='noopener' style='
2831                      width: 100%;
2832                      box-sizing: border-box;
2833                      margin-top: auto;
2834                    '>اشترك في بلس</a
2835                  >
2836                </article>
2837
2838                <article class="plan" data-reveal>
2839                  <img
2840                    src="assets/plan-family.svg"
2841                    width="64"
2842                    height="64"
2843                    alt="أيقونة باقة ماكس"
2844                  />
2845                  <div>
2846                    <div class="plan-name">ماكس</div>
2847                    <div class="plan-weight">4 غسلات</div>
2848                  </div>
2849                  <div class="plan-price-block">
2850                    <div class="plan-price">
2851                      <span class="num">799</span
2852                      ><img
2853                        src="assets/sar.svg"
2854                        width="16"
2855                        height="18"
2856                        alt="ريال سعودي"
2857                        style="vertical-align: baseline"
2858                      /><span class="unit">/ شهر</span>
2859                    </div>
2860                  </div>
2861                  <ul>
2862                    <li>🛍️ أكياس لجمع غسيلك</li>
2863                    <li>🚐 الإستلام والتوصيل</li>
2864                    <li>🗓️ إعادة جدولة</li>
2865                    <li>🔎 فرز الألوان</li>
2866                    <li>👔 كي عادي أو بخار</li>
2867                  </ul>
2868                  <a class='btn outline' data-ga-event='app_download_click' data-ga-location='plan_card' data-ga-plan='ماكس' data-ga-platform='universal' href='/checkout/?plan=max&type=4' rel='noopener' style='
2869                      width: 100%;
2870                      box-sizing: border-box;
2871                      margin-top: auto;
2872                    '>اشترك في ماكس</a
2873                  >
2874                </article>
2875              </div>
2876            </div>
2877          </section>
2878
2879          <!-- ─── Extra services ───────────────────────────────────── -->
2880          <section class="section cream" id="extras">
2881            <div class="container">
2882              <div
2883                style="
2884                  text-align: center;
2885                  max-width: 620px;
2886                  margin: 0 auto 36px;
2887                "
2888              >
2889                <span class="kicker">خدمات إضافية</span>
2890                <h2 class="h-xl" style="margin: 12px 0 8px">
2891                  تحتاج خدمة لا تشمل غسيل الملابس؟ ممكن.
2892                </h2>
2893                <p class="lead" style="font-size: 15px">
2894                  خدمات أضافية حسب حاجتك من كوي منفصل أو تنظيف أحذية وأكثر
2895                </p>
2896              </div>
2897
2898              <div class="extras-grid-v2">
2899                <article class="extra-card">
2900                  <header class="extra-head">
2901                    <div class="extra-ico">
2902                      <img
2903                        src="assets/plan-shoes.svg"
2904                        width="56"
2905                        height="56"
2906                        alt="أيقونة تنظيف الأحذية"
2907                      />
2908                    </div>
2909                    <div>
2910                      <div class="extra-title">تنظيف الجزم</div>
2911                      <div class="extra-sub">
2912                        جلد، رياضي، أو قماش، تلميع وتعقيم. ترجع خلال 48 ساعة في
2913                        أكياس مستقلة.
2914                      </div>
2915                    </div>
2916                    <div class="extra-tag">48 ساعة</div>
2917                  </header>
2918                  <div class="extra-menu" role="list">
2919                    <div class="extra-row" role="listitem">
2920                      <div class="extra-qty">زوجين</div>
2921                      <div class="extra-dots" aria-hidden="true"></div>
2922                      <div class="extra-price">
2923                        99
2924                        <img
2925                          src="assets/sar.svg"
2926                          width="12"
2927                          height="13"
2928                          alt="ريال"
2929                        />
2930                      </div>
2931                    </div>
2932                    <div class="extra-row" role="listitem">
2933                      <div class="extra-qty">3 أزواج</div>
2934                      <div class="extra-dots" aria-hidden="true"></div>
2935                      <div class="extra-price">
2936                        138
2937                        <img
2938                          src="assets/sar.svg"
2939                          width="12"
2940                          height="13"
2941                          alt="ريال"
2942                        />
2943                        <span class="extra-save"
2944                          >وفّر 15
2945                          <img
2946                            src="assets/sar-orange.svg"
2947                            width="10"
2948                            height="11"
2949                            alt="ريال"
2950                            style="vertical-align: middle"
2951                        /></span>
2952                      </div>
2953                    </div>
2954                    <div class="extra-row" role="listitem">
2955                      <div class="extra-qty">4 أزواج</div>
2956                      <div class="extra-dots" aria-hidden="true"></div>
2957                      <div class="extra-price">
2958                        177
2959                        <img
2960                          src="assets/sar.svg"
2961                          width="12"
2962                          height="13"
2963                          alt="ريال"
2964                        />
2965                        <span class="extra-save"
2966                          >وفّر 25
2967                          <img
2968                            src="assets/sar-orange.svg"
2969                            width="10"
2970                            height="11"
2971                            alt="ريال"
2972                            style="vertical-align: middle"
2973                        /></span>
2974                      </div>
2975                    </div>
2976                  </div>
2977                  <a class='btn outline sm pill extra-cta' data-ga-event='app_download_click' data-ga-location='extra_service' data-ga-platform='universal' data-ga-service='shoe_cleaning' href='/checkout/?service=shoes'>اطلب تنظيف جزم</a
2978                  >
2979                </article>
2980
2981                <article class="extra-card">
2982                  <header class="extra-head">
2983                    <div class="extra-ico yellow">
2984                      <img
2985                        src="assets/starch.svg"
2986                        width="56"
2987                        height="56"
2988                        alt="أيقونة خدمة الكوي"
2989                      />
2990                    </div>
2991                    <div>
2992                      <div class="extra-title">خدمة الكوي فقط</div>
2993                      <div class="extra-sub">
2994                        إذا غاسل في البيت وتبي بس الكوي. تنشية اختيارية، تعطير،
2995                        وتغليف على الشمّاعة.
2996                      </div>
2997                    </div>
2998                    <div class="extra-tag">24 ساعة</div>
2999                  </header>
3000                  <div class="extra-menu" role="list">
3001                    <div class="extra-row" role="listitem">
3002                      <div class="extra-qty"><b>3</b> كيلو</div>
3003                      <div class="extra-dots" aria-hidden="true"></div>
3004                      <div class="extra-price">
3005                        79
3006                        <img
3007                          src="assets/sar.svg"
3008                          width="12"
3009                          height="13"
3010                          alt="ريال"
3011                        />
3012                      </div>
3013                    </div>
3014                    <div class="extra-row" role="listitem">
3015                      <div class="extra-qty"><b>5</b> كيلو</div>
3016                      <div class="extra-dots" aria-hidden="true"></div>
3017                      <div class="extra-price">
3018                        109
3019                        <img
3020                          src="assets/sar.svg"
3021                          width="12"
3022                          height="13"
3023                          alt="ريال"
3024                        />
3025                      </div>
3026                    </div>
3027                    <div class="extra-row" role="listitem">
3028                      <div class="extra-qty"><b>7</b> كيلو</div>
3029                      <div class="extra-dots" aria-hidden="true"></div>
3030                      <div class="extra-price">
3031                        130
3032                        <img
3033                          src="assets/sar.svg"
3034                          width="12"
3035                          height="13"
3036                          alt="ريال"
3037                        />
3038                        <span class="extra-save">الأكثر طلباً</span>
3039                      </div>
3040                    </div>
3041                    <div class="extra-row" role="listitem">
3042                      <div class="extra-qty"><b>10</b> كيلو</div>
3043                      <div class="extra-dots" aria-hidden="true"></div>
3044                      <div class="extra-price">
3045                        150
3046                        <img
3047                          src="assets/sar.svg"
3048                          width="12"
3049                          height="13"
3050                          alt="ريال"
3051                        />
3052                      </div>
3053                    </div>
3054                  </div>
3055                  <a class='btn outline sm pill extra-cta' data-ga-event='app_download_click' data-ga-location='extra_service' data-ga-platform='universal' data-ga-service='ironing' href='/checkout/?service=ironing'>اطلب كوي فقط</a
3056                  >
3057                </article>
3058              </div>
3059            </div>
3060          </section>
3061          <!-- [/extract:plans] -->
3062
3063          <!-- ─── Testimonials ──────────────────────────────────── -->
3064          <!-- [extract:testimonials] -->
3065          <section
3066            class="section section--blue-fade"
3067            id="testimonials"
3068            style="--fade-top: var(--cream-1); --fade-bottom: var(--white)"
3069          >
3070            <div class="container">
3071              <div
3072                style="
3073                  text-align: center;
3074                  max-width: 720px;
3075                  margin: 0 auto 56px;
3076                "
3077              >
3078                <h2 class="h-xl" style="margin-bottom: 16px">
3079                  الناس اللي سهلنا روتين حياتهم
3080                </h2>
3081                <p class="lead">
3082                  تعليقات مختارة من عملاء ويلو على App Store أو Google Play
3083                </p>
3084              </div>
3085              <div class="testimonials">
3086                <article class="quote" data-reveal>
3087                  <div class="stars">★★★★★</div>
3088                  <div class="q">
3089                    «بدأت رحلتي مع ويلو من أول شهر لهم، واشتراكي معهم على باقة
3090                    الخمسة كيلو. الباقة تكفي ملابس متراكمة لمدة أسبوع لشخصين،
3091                    تكفيني أنا وزوجي وتشيل عني تحديداً هم الغسيل والكوي. ملتزمين
3092                    بالوقت وخدمة العملاء متجاوبين بشكل سريع، وكذلك المناديب قمة
3093                    في الأخلاق. تجربة أنصح فيها بشدة لكل شخص مشغول ووده يرتاح.»
3094                  </div>
3095                  <div class="who">
3096                    <div class="avatar">
3097                      <span style="margin-top: -3px">م</span>
3098                    </div>
3099                    <div>
3100                      <div class="name">مرام الغامدي</div>
3101                      <div class="meta">مشتركة • باقة البيسك</div>
3102                    </div>
3103                  </div>
3104                </article>
3105                <article class="quote" data-reveal>
3106                  <div class="stars">★★★★★</div>
3107                  <div class="q">
3108                    «This app is unusually friendly for a laundry service, it's
3109                    honestly a game-changer! I loved the sleek design and
3110                    intuitive interface, making the whole experience smooth and
3111                    hassle-free. What truly stands out is how they treat their
3112                    customers: professional, clear, and genuinely caring. From
3113                    start to finish, everything feels effortless. Highly
3114                    recommend!»
3115                  </div>
3116                  <div class="who">
3117                    <div class="avatar blue">
3118                      <span style="margin-top: -3px">س</span>
3119                    </div>
3120                    <div>
3121                      <div class="name">سلطان سمير</div>
3122                      <div class="meta">مشترك منذ سنة</div>
3123                    </div>
3124                  </div>
3125                </article>
3126                <article class="quote" data-reveal>
3127                  <div class="stars">★★★★★</div>
3128                  <div class="q">
3129                    «I've been using ويلو for almost 3 months now and I can't
3130                    even describe how convenient it is! The headache of cleaning
3131                    my laundry is something from the past now 🙏»
3132                  </div>
3133                  <div class="who">
3134                    <div class="avatar cream">
3135                      <span style="margin-top: -3px">م</span>
3136                    </div>
3137                    <div>
3138                      <div class="name">محمد جداوي</div>
3139                      <div class="meta">مشترك منذ 3 أشهر</div>
3140                    </div>
3141                  </div>
3142                </article>
3143              </div>
3144            </div>
3145          </section>
3146          <!-- [/extract:testimonials] -->
3147
3148          <!-- ─── Coverage ─────────────────────────────────────── -->
3149          <!-- [extract:coverage] -->
3150          <section class="section white" id="coverage">
3151            <div class="container">
3152              <div
3153                style="
3154                  text-align: center;
3155                  max-width: 720px;
3156                  margin: 0 auto 40px;
3157                "
3158                data-reveal
3159              >
3160                <span class="kicker">التغطية</span>
3161                <h2 class="h-xl" style="margin-bottom: 16px">
3162                  مغسلة ملابس توصيل وإستلام في الرياض
3163                </h2>
3164                <p class="lead">
3165                  نغطي أكثر من
3166                  <!-- [generated:coverage-count] -->50<!-- [/generated:coverage-count] -->
3167                  حياً في شمال ووسط وجنوب الرياض. اكتب موقعك في التطبيق ويتأكد
3168                  لك تلقائياً.
3169                </p>
3170              </div>
3171              <div class="neigh-grid" id="neigh-grid" data-reveal>
3172                <!-- [generated:coverage-chips] -->
3173          <a class="neigh-chip" href="/ar/riyadh/al-ulaya/">العليا</a>
3174          <a class="neigh-chip" href="/ar/riyadh/al-malqa/">الملقا</a>
3175          <a class="neigh-chip" href="/ar/riyadh/hittin/">حطين</a>
3176          <a class="neigh-chip" href="/ar/riyadh/al-yasmin/">الياسمين</a>
3177          <a class="neigh-chip" href="/ar/riyadh/al-narjis/">النرجس</a>
3178          <a class="neigh-chip" href="/ar/riyadh/al-qirawan/">القيروان</a>
3179          <a class="neigh-chip" href="/ar/riyadh/al-wurud/">الورود</a>
3180          <a class="neigh-chip" href="/ar/riyadh/al-sahafa/">الصحافة</a>
3181          <a class="neigh-chip" href="/ar/riyadh/al-ghadir/">الغدير</a>
3182          <a class="neigh-chip" href="/ar/riyadh/al-rawabi/">الروابي</a>
3183          <a class="neigh-chip" href="/ar/riyadh/zahrat-laban/">ظهرة لبن</a>
3184          <a class="neigh-chip" href="/ar/riyadh/al-rabee/">الربيع</a>
3185          <a class="neigh-chip" href="/ar/riyadh/al-nakhil/">النخيل</a>
3186          <a class="neigh-chip" href="/ar/riyadh/al-wahah/">الواحة</a>
3187          <a class="neigh-chip" href="/ar/riyadh/al-wadi/">الوادي</a>
3188          <a class="neigh-chip" href="/ar/riyadh/al-aqiq/">العقيق</a>
3189          <a class="neigh-chip neigh-more" href="/ar/riyadh/king-abdulaziz/" style="display:none">الملك عبدالعزيز</a>
3190          <a class="neigh-chip neigh-more" href="/ar/riyadh/al-arid/" style="display:none">العارض</a>
3191          <a class="neigh-chip neigh-more" href="/ar/riyadh/al-andalus/" style="display:none">الأندلس</a>
3192          <a class="neigh-chip neigh-more" href="/ar/riyadh/al-muruj/" style="display:none">المروج</a>
3193          <a class="neigh-chip neigh-more" href="/ar/riyadh/al-taawun/" style="display:none">التعاون</a>
3194          <a class="neigh-chip neigh-more" href="/ar/riyadh/al-khuzama/" style="display:none">الخزامى</a>
3195          <a class="neigh-chip neigh-more" href="/ar/riyadh/al-sulaymaniyah/" style="display:none">السليمانية</a>
3196          <a class="neigh-chip neigh-more" href="/ar/riyadh/ishbiliyah/" style="display:none">أشبيلية</a>
3197          <a class="neigh-chip neigh-more" href="/ar/riyadh/al-mahdiyah/" style="display:none">المهدية</a>
3198          <a class="neigh-chip neigh-more" href="/ar/riyadh/qurtubah/" style="display:none">قرطبة</a>
3199          <a class="neigh-chip neigh-more" href="/ar/riyadh/al-rayyan/" style="display:none">الريان</a>
3200          <a class="neigh-chip neigh-more" href="/ar/riyadh/al-janadiriyah/" style="display:none">الجنادرية</a>
3201          <a class="neigh-chip neigh-more" href="/ar/riyadh/al-nuzha/" style="display:none">النزهة</a>
3202          <a class="neigh-chip neigh-more" href="/ar/riyadh/banban/" style="display:none">بنبان</a>
3203          <a class="neigh-chip neigh-more" href="/ar/riyadh/laban/" style="display:none">لبن</a>
3204          <a class="neigh-chip neigh-more" href="/ar/riyadh/al-falah/" style="display:none">الفلاح</a>
3205          <a class="neigh-chip neigh-more" href="/ar/riyadh/al-dar-al-baida/" style="display:none">الدار البيضاء</a>
3206          <a class="neigh-chip neigh-more" href="/ar/riyadh/al-hamra/" style="display:none">الحمراء</a>
3207          <a class="neigh-chip neigh-more" href="/ar/riyadh/al-masif/" style="display:none">المصيف</a>
3208          <a class="neigh-chip neigh-more" href="/ar/riyadh/al-mashaael/" style="display:none">المشاعل</a>
3209          <a class="neigh-chip neigh-more" href="/ar/riyadh/al-arjan/" style="display:none">الأرجان</a>
3210          <a class="neigh-chip neigh-more" href="/ar/riyadh/al-rafiah/" style="display:none">الرفيعة</a>
3211          <a class="neigh-chip neigh-more" href="/ar/riyadh/al-malaz/" style="display:none">الملز</a>
3212          <a class="neigh-chip neigh-more" href="/ar/riyadh/al-rimal/" style="display:none">الرمال</a>
3213          <a class="neigh-chip neigh-more" href="/ar/riyadh/al-khalij/" style="display:none">الخليج</a>
3214          <a class="neigh-chip neigh-more" href="/ar/riyadh/al-raid/" style="display:none">الرائد</a>
3215          <a class="neigh-chip neigh-more" href="/ar/riyadh/al-naseem/" style="display:none">النسيم</a>
3216          <a class="neigh-chip neigh-more" href="/ar/riyadh/al-rawdah/" style="display:none">الروضة</a>
3217          <a class="neigh-chip neigh-more" href="/ar/riyadh/urqah/" style="display:none">عرقة</a>
3218          <a class="neigh-chip neigh-more" href="/ar/riyadh/al-munsiyah/" style="display:none">المونسية</a>
3219          <a class="neigh-chip neigh-more" href="/ar/riyadh/al-nafl/" style="display:none">النفل</a>
3220          <a class="neigh-chip neigh-more" href="/ar/riyadh/al-rabwah/" style="display:none">الربوة</a>
3221          <a class="neigh-chip neigh-more" href="/ar/riyadh/al-shafa/" style="display:none">الشفا</a>
3222          <a class="neigh-chip neigh-more" href="/ar/riyadh/al-hazm/" style="display:none">الحزم</a>
3223          <a class="neigh-chip neigh-more" href="/ar/riyadh/al-awali/" style="display:none">العوالي</a>
3224          <a class="neigh-chip neigh-more" href="/ar/riyadh/tuwaiq/" style="display:none">طويق</a>
3225          <a class="neigh-chip neigh-more" href="/ar/riyadh/umm-al-hamam/" style="display:none">أم الحمام</a>
3226          <a class="neigh-chip neigh-more" href="/ar/riyadh/al-mughrizat/" style="display:none">المغرزات</a>
3227          <a class="neigh-chip neigh-more" href="/ar/riyadh/al-quds/" style="display:none">القدس</a>
3228          <a class="neigh-chip neigh-more" href="/ar/riyadh/al-nahdah/" style="display:none">النهضة</a>
3229          <a class="neigh-chip neigh-more" href="/ar/riyadh/al-izdihaar/" style="display:none">الازدهار</a>
3230          <a class="neigh-chip neigh-more" href="/ar/riyadh/al-mursalat/" style="display:none">المرسلات</a>
3231          <!-- [/generated:coverage-chips] -->
3232              </div>
3233              <div style="text-align: center; margin-top: 20px">
3234                <button
3235                  id="neigh-toggle"
3236                  onclick="toggleNeigh()"
3237                  class="btn outline sm pill"
3238                  style="font: 500 14px/1 var(--font-arabic)"
3239                >
3240                  عرض المزيد من الأحياء
3241                </button>
3242              </div>
3243            </div>
3244          </section>
3245          <!-- [/extract:coverage] -->
3246
3247          <!-- ─── FAQ ──────────────────────────────────────────── -->
3248          <!-- [extract:faq] -->
3249          <section
3250            class="section section--blue-fade"
3251            id="faq"
3252            style="--fade-top: var(--white); --fade-bottom: var(--cream-0)"
3253          >
3254            <div class="container" style="max-width: 880px">
3255              <div
3256                style="
3257                  text-align: center;
3258                  max-width: 720px;
3259                  margin: 0 auto 48px;
3260                "
3261              >
3262                <span class="kicker">الأسئلة المتكررة</span>
3263                <h2 class="h-xl" style="margin-bottom: 16px">
3264                  الأسئلة الي تخطر على بالك<!--LOC_PREP-->
3265                </h2>
3266                <p class="lead">
3267                  لو فيه شي ما لقيته هنا، تواصل معنا من داخل التطبيق.
3268                </p>
3269              </div>
3270
3271              <div class="faq-list">
3272                <!--LOC_FAQ_FIRST-->
3273                <details open>
3274                  <summary>
3275                    كيف نشتغل في ويلو؟
3276                    <span class="chev"
3277                      ><svg
3278                        width="16"
3279                        height="16"
3280                        viewBox="0 0 24 24"
3281                        fill="none"
3282                        stroke="#000"
3283                        stroke-width="2"
3284                      >
3285                        <path
3286                          d="M12 5v14M5 12h14"
3287                          stroke-linecap="round"
3288                        /></svg
3289                    ></span>
3290                  </summary>
3291                  <p class="faq-answer">
3292                    تنزّل تطبيق ويلو، تختار الكمية المناسبة (ميني، بيسك، بلس، أو
3293                    ماكس) حسب حجم غسيلك، وتحدّد وقت الاستلام. احنا نجي للبيت
3294                    نستلم الكيس، نغسل ونكوي ونغلف، ونرجعه لك على نفس الباب خلال
3295                    24 ساعة.
3296                  </p>
3297                </details>
3298                <details>
3299                  <summary>
3300                    كم أسعار خدمات الغسيل و الكوي؟
3301                    <span class="chev"
3302                      ><svg
3303                        width="16"
3304                        height="16"
3305                        viewBox="0 0 24 24"
3306                        fill="none"
3307                        stroke="#000"
3308                        stroke-width="2"
3309                      >
3310                        <path
3311                          d="M12 5v14M5 12h14"
3312                          stroke-linecap="round"
3313                        /></svg
3314                    ></span>
3315                  </summary>
3316                  <p class="faq-answer">
3317                    ميني 3 كيلو 99
3318                    <img
3319                      src="assets/sar.svg"
3320                      width="11"
3321                      height="12"
3322                      alt="ريال"
3323                      style="vertical-align: middle"
3324                    />
3325                    للغسلة (396 شهرياً)، بيسك 5 كيلو 139
3326                    <img
3327                      src="assets/sar.svg"
3328                      width="11"
3329                      height="12"
3330                      alt="ريال"
3331                      style="vertical-align: middle"
3332                    />
3333                    (499 شهرياً)، بلس 7 كيلو 159
3334                    <img
3335                      src="assets/sar.svg"
3336                      width="11"
3337                      height="12"
3338                      alt="ريال"
3339                      style="vertical-align: middle"
3340                    />
3341                    (599 شهرياً)، ماكس 10 كيلو 209
3342                    <img
3343                      src="assets/sar.svg"
3344                      width="11"
3345                      height="12"
3346                      alt="ريال"
3347                      style="vertical-align: middle"
3348                    />
3349                    (799 شهرياً).
3350                  </p>
3351                </details>
3352                <details>
3353                  <summary>
3354                    كم يستغرق الغسيل يرجع لي؟
3355                    <span class="chev"
3356                      ><svg
3357                        width="16"
3358                        height="16"
3359                        viewBox="0 0 24 24"
3360                        fill="none"
3361                        stroke="#000"
3362                        stroke-width="2"
3363                      >
3364                        <path
3365                          d="M12 5v14M5 12h14"
3366                          stroke-linecap="round"
3367                        /></svg
3368                    ></span>
3369                  </summary>
3370                  <p class="faq-answer">
3371                    الملابس العادية ترجع خلال 24 ساعة من الاستلام. الأحذية ترجع
3372                    خلال 48 ساعة.
3373                  </p>
3374                </details>
3375                <details>
3376                  <summary>
3377                    وش طرق الدفع؟
3378                    <span class="chev"
3379                      ><svg
3380                        width="16"
3381                        height="16"
3382                        viewBox="0 0 24 24"
3383                        fill="none"
3384                        stroke="#000"
3385                        stroke-width="2"
3386                      >
3387                        <path
3388                          d="M12 5v14M5 12h14"
3389                          stroke-linecap="round"
3390                        /></svg
3391                    ></span>
3392                  </summary>
3393                  <p class="faq-answer">
3394                    مدى، أبل باي، STC Pay، فيزا/ماستركارد. الفاتورة تطلع في
3395                    التطبيق بعد كل عملية دفع.
3396                  </p>
3397                </details>
3398                <details>
3399                  <summary>
3400                    هل تقدرون تستلمون في نفس اليوم؟
3401                    <span class="chev"
3402                      ><svg
3403                        width="16"
3404                        height="16"
3405                        viewBox="0 0 24 24"
3406                        fill="none"
3407                        stroke="#000"
3408                        stroke-width="2"
3409                      >
3410                        <path
3411                          d="M12 5v14M5 12h14"
3412                          stroke-linecap="round"
3413                        /></svg
3414                    ></span>
3415                  </summary>
3416                  <p class="faq-answer">
3417                    نعم لو طلبت قبل بداية الفترة الصباحية او المسائية و بحسبب
3418                    توفر الحجوزات
3419                  </p>
3420                </details>
3421                <details>
3422                  <summary>
3423                    ممكن أعيد جدولة طلب أو أغيّر الباقة؟
3424                    <span class="chev"
3425                      ><svg
3426                        width="16"
3427                        height="16"
3428                        viewBox="0 0 24 24"
3429                        fill="none"
3430                        stroke="#000"
3431                        stroke-width="2"
3432                      >
3433                        <path
3434                          d="M12 5v14M5 12h14"
3435                          stroke-linecap="round"
3436                        /></svg
3437                    ></span>
3438                  </summary>
3439                  <p class="faq-answer">
3440                    أكيد. كل شيئ من التطبيق حيث يمكنك إعادة جدولة طلباتك او
3441                    ترقية طلبك في حالة حبيت تزيد الكمية
3442                  </p>
3443                </details>
3444                <details>
3445                  <summary>
3446                    كم غسلة تدخل في اشتراك الشهر؟
3447                    <span class="chev"
3448                      ><svg
3449                        width="16"
3450                        height="16"
3451                        viewBox="0 0 24 24"
3452                        fill="none"
3453                        stroke="#000"
3454                        stroke-width="2"
3455                      >
3456                        <path
3457                          d="M12 5v14M5 12h14"
3458                          stroke-linecap="round"
3459                        /></svg
3460                    ></span>
3461                  </summary>
3462                  <p class="faq-answer">
3463                    4 غسلات في الشهر إسبوعياً لكل الباقات. مع 10 أيام مدة إضافية
3464                  </p>
3465                </details>
3466                <details>
3467                  <summary>
3468                    كيف أضمن إن ملابسي ما تتخلط مع ملابس عميل ثاني؟
3469                    <span class="chev"
3470                      ><svg
3471                        width="16"
3472                        height="16"
3473                        viewBox="0 0 24 24"
3474                        fill="none"
3475                        stroke="#000"
3476                        stroke-width="2"
3477                      >
3478                        <path
3479                          d="M12 5v14M5 12h14"
3480                          stroke-linecap="round"
3481                        /></svg
3482                    ></span>
3483                  </summary>
3484                  <p class="faq-answer">
3485                    وعد ويلو من البداية غسيل فردي و صحي لكل عميل علي حدة
3486                  </p>
3487                </details>
3488                <details>
3489                  <summary>
3490                    هل عندكم خدمة للمفارش و أغطية السرير؟
3491                    <span class="chev"
3492                      ><svg
3493                        width="16"
3494                        height="16"
3495                        viewBox="0 0 24 24"
3496                        fill="none"
3497                        stroke="#000"
3498                        stroke-width="2"
3499                      >
3500                        <path
3501                          d="M12 5v14M5 12h14"
3502                          stroke-linecap="round"
3503                        /></svg
3504                    ></span>
3505                  </summary>
3506                  <p class="faq-answer">
3507                    نعم يوجد خدمة غسيل المفارش و أغطية السرير و سيتم توفير خدمة
3508                    غسيل البطانيات الكبيرة قريباً
3509                  </p>
3510                </details>
3511                <details>
3512                  <summary>
3513                    هل لديكم مغسلة خاصة ولا تعطون الغسيل لمغسلة ثانية؟
3514                    <span class="chev"
3515                      ><svg
3516                        width="16"
3517                        height="16"
3518                        viewBox="0 0 24 24"
3519                        fill="none"
3520                        stroke="#000"
3521                        stroke-width="2"
3522                      >
3523                        <path
3524                          d="M12 5v14M5 12h14"
3525                          stroke-linecap="round"
3526                        /></svg
3527                    ></span>
3528                  </summary>
3529                  <p class="faq-answer">
3530                    ويلو تمتلك مغسلتها الخاصة وتديرها بالكامل من داخل الرياض.
3531                    هذا ما يضمن لك جودة ثابتة وخصوصية تامة في كل طلب.
3532                  </p>
3533                </details>
3534                <details>
3535                  <summary>
3536                    أقدر أكبّر طلبي بعد ما أحجز؟
3537                    <span class="chev"
3538                      ><svg
3539                        width="16"
3540                        height="16"
3541                        viewBox="0 0 24 24"
3542                        fill="none"
3543                        stroke="#000"
3544                        stroke-width="2"
3545                      >
3546                        <path
3547                          d="M12 5v14M5 12h14"
3548                          stroke-linecap="round"
3549                        /></svg
3550                    ></span>
3551                  </summary>
3552                  <p class="faq-answer">
3553                    أيوه، تقدر ترقّي حجم الطلب لباقة أكبر قبل موعد الاستلام.
3554                    افتح التطبيق وغيّر الباقة من الصفحة الرئيسية.
3555                  </p>
3556                </details>
3557                <details>
3558                  <summary>
3559                    وش يصير لو فيه قطعة تحتاج عناية خاصة؟
3560                    <span class="chev"
3561                      ><svg
3562                        width="16"
3563                        height="16"
3564                        viewBox="0 0 24 24"
3565                        fill="none"
3566                        stroke="#000"
3567                        stroke-width="2"
3568                      >
3569                        <path
3570                          d="M12 5v14M5 12h14"
3571                          stroke-linecap="round"
3572                        /></svg
3573                    ></span>
3574                  </summary>
3575                  <p class="faq-answer">
3576                    لما نفرز غسيلك، لو لقينا قطعة تحتاج تعليمات خاصة، نرسل لك
3577                    صورة إشعار في التطبيق والإيميل قبل لا نبدأ الغسيل.
3578                  </p>
3579                </details>
3580                <details>
3581                  <summary>
3582                    كيف يشتغل برنامج الدعوات؟
3583                    <span class="chev"
3584                      ><svg
3585                        width="16"
3586                        height="16"
3587                        viewBox="0 0 24 24"
3588                        fill="none"
3589                        stroke="#000"
3590                        stroke-width="2"
3591                      >
3592                        <path
3593                          d="M12 5v14M5 12h14"
3594                          stroke-linecap="round"
3595                        /></svg
3596                    ></span>
3597                  </summary>
3598                  <p class="faq-answer">
3599                    شارك رابط الدعوة الخاص فيك مع أي شخص. لما يكمّل أول طلب، انت
3600                    تاخد 30 ريال في المحفظة فوراً. الرابط موجود في التطبيق تحت
3601                    "اعزم خويك".
3602                  </p>
3603                </details>
3604              </div>
3605            </div>
3606          </section>
3607          <!-- [/extract:faq] -->
3608
3609          <!-- ─── Final CTA ─────────────────────────────────────── -->
3610          <!-- [extract:cta] -->
3611          <section class="section" id="download">
3612            <div class="container">
3613              <div class="final-cta" style="overflow: hidden">
3614                <div style="position: relative; z-index: 2">
3615                  <h2 class="h-xl" style="margin-bottom: 16px">
3616                    أسهل تطبيق<!--LOC_PREP--><br />غسيل ملابس!
3617                  </h2>
3618                  <p class="lead" style="margin-bottom: 28px; max-width: 460px">
3619                    حمّل التطبيق، اختر الكمية وحدد موعد أول استلام<!--LOC_PREP-->.
3620                    نستلم من بيتك، نغسل ونكوي، ونوصّل خلال 24 ساعة.
3621                  </p>
3622                  <div style="display: flex; gap: 14px; flex-wrap: wrap">
3623                    <a
3624                      href="https://apps.apple.com/sa/app/%D9%88%D9%8A%D9%84%D9%88-wilow/id6511166967"
3625                      target="_blank"
3626                      rel="noopener"
3627                      aria-label="تحميل تطبيق ويلو من App Store"
3628                      data-ga-event="app_download_click"
3629                      data-ga-platform="ios"
3630                      data-ga-location="final_cta"
3631                    >
3632                      <img
3633                        src="assets/download-icons/apple-light.png"
3634                        alt="Download on the App Store"
3635                        width="132"
3636                        height="44"
3637                        style="display: block; height: 44px; width: auto"
3638                      />
3639                    </a>
3640                    <a
3641                      href="https://play.google.com/store/apps/details?id=com.wilow.app"
3642                      target="_blank"
3643                      rel="noopener"
3644                      aria-label="تحميل تطبيق ويلو من Google Play"
3645                      data-ga-event="app_download_click"
3646                      data-ga-platform="android"
3647                      data-ga-location="final_cta"
3648                    >
3649                      <img
3650                        src="assets/download-icons/google-play-light.png"
3651                        alt="Get it on Google Play"
3652                        width="150"
3653                        height="44"
3654                        style="display: block; height: 44px; width: auto"
3655                      />
3656                    </a>
3657                  </div>
3658                </div>
3659                <div class="qr-card desktop-only-qr" style="position: relative">
3660                  <!-- Stamp pressed onto the corner of the QR card -->
3661                  <img
3662                    src="assets/wilow-stamp.png"
3663                    alt="ضمان المعالجة الصحية"
3664                    style="
3665                      position: absolute;
3666                      bottom: -22px;
3667                      left: -22px;
3668                      width: 108px;
3669                      height: 108px;
3670                      transform: rotate(14deg);
3671                      z-index: 5;
3672                      pointer-events: none;
3673                      filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.35));
3674                    "
3675                  />
3676                  <div class="qr-box">
3677                    <img
3678                      src="assets/get-wilow-app.png"
3679                      width="160"
3680                      height="160"
3681                      alt="QR code لتحميل تطبيق ويلو"
3682                      style="display: block; border-radius: 4px"
3683                    />
3684                  </div>
3685                  <div style="text-align: center">
3686                    <div class="h-md" style="font-size: 16px">
3687                      صوّر الرمز بالجوال
3688                    </div>
3689                    <div class="body" style="font-size: 12px; margin-top: 4px">
3690                      يفتح على المتجر المناسب لجهازك
3691                    </div>
3692                  </div>
3693                </div>
3694              </div>
3695            </div>
3696          </section>
3697          <!-- [/extract:cta] -->
3698        </main>
3699
3700        <!-- ─── Footer ────────────────────────────────────────── -->
3701        <!-- [extract:footer] -->
3702        <footer class="footer">
3703          <div class="container">
3704            <div class="footer-grid">
3705              <div>
3706                <img
3707                  src="assets/logos/white-plain.svg"
3708                  alt="شعار ويلو"
3709                  width="92"
3710                  height="48"
3711                  style="height: 40px; width: auto; margin-bottom: 20px"
3712                />
3713                <p
3714                  style="
3715                    font: 500 14px/1.7 &quot;Noto Arabic&quot;;
3716                    color: rgba(255, 255, 255, 0.7);
3717                    max-width: 340px;
3718                    margin: 0;
3719                  "
3720                >
3721                  تطبيق "ويلو" لغسيل الملابس بنظام الباقات: اطلب كيسك وعبّيه
3722                  بدون حد للقطع! متوفر كطلب لمرة واحدة أو اشتراك شهري شامل
3723                  الغسيل، الكي، والتوصيل، مع خدمات إضافية.
3724                </p>
3725                <div style="display: flex; gap: 10px; margin-top: 24px">
3726                  <a
3727                    href="https://www.instagram.com/wilow_app/"
3728                    target="_blank"
3729                    rel="noopener"
3730                    aria-label="Instagram"
3731                    style="
3732                      width: 36px;
3733                      height: 36px;
3734                      border-radius: 50%;
3735                      background: rgba(255, 255, 255, 0.1);
3736                      display: grid;
3737                      place-items: center;
3738                    "
3739                  >
3740                    <img
3741                      src="assets/icon-instagram.svg"
3742                      width="16"
3743                      height="16"
3744                      alt="Instagram"
3745                    />
3746                  </a>
3747                  <a
3748                    href="https://www.tiktok.com/@wilow_app"
3749                    target="_blank"
3750                    rel="noopener"
3751                    aria-label="TikTok"
3752                    style="
3753                      width: 36px;
3754                      height: 36px;
3755                      border-radius: 50%;
3756                      background: rgba(255, 255, 255, 0.1);
3757                      display: grid;
3758                      place-items: center;
3759                    "
3760                  >
3761                    <img
3762                      src="assets/icon-tiktok.svg"
3763                      width="16"
3764                      height="16"
3765                      alt="TikTok"
3766                    />
3767                  </a>
3768                  <a
3769                    href="https://www.threads.net/@wilow_app"
3770                    target="_blank"
3771                    rel="noopener"
3772                    aria-label="Threads"
3773                    style="
3774                      width: 36px;
3775                      height: 36px;
3776                      border-radius: 50%;
3777                      background: rgba(255, 255, 255, 0.1);
3778                      display: grid;
3779                      place-items: center;
3780                    "
3781                  >
3782                    <img
3783                      src="assets/icon-threads.svg"
3784                      width="16"
3785                      height="16"
3786                      alt="Threads"
3787                    />
3788                  </a>
3789                  <a
3790                    href="https://twitter.com/wilow_app"
3791                    target="_blank"
3792                    rel="noopener"
3793                    aria-label="X (Twitter)"
3794                    style="
3795                      width: 36px;
3796                      height: 36px;
3797                      border-radius: 50%;
3798                      background: rgba(255, 255, 255, 0.1);
3799                      display: grid;
3800                      place-items: center;
3801                    "
3802                  >
3803                    <img
3804                      src="assets/icon-x.svg"
3805                      width="16"
3806                      height="16"
3807                      alt="X"
3808                    />
3809                  </a>
3810                </div>
3811              </div>
3812              <div>
3813                <h3>التطبيق</h3>
3814                <a href="#how">كيف نشتغل</a><br />
3815                <a href="#what">الخدمات</a><br />
3816                <a href="#plans">الاشتراكات</a><br />
3817                <a href="#coverage">التغطية</a><br />
3818                <a href="#faq">الأسئلة</a>
3819              </div>
3820              <div>
3821                <h3>الشركة</h3>
3822                <a href="/terms-and-conditions/">شروط الاستخدام</a><br />
3823                <a href="/privacy-policy/">سياسة الخصوصية</a><br />
3824                <a
3825                  href="https://www.wamda.com/2025/01/demand-laundry-services-app-wilow-secures-pre-seed-round"
3826                  target="_blank"
3827                  rel="noopener"
3828                  >تغطية Wamda</a
3829                ><br />
3830                <a href="https://zto.sa/4087" target="_blank" rel="noopener"
3831                  >
3831تغطية Zero To One</a
3832                ><br />
3833                <a href="./become_partner" target="_blank" rel="noopener"
3834                  >كن شريكًا</a
3835                >
3836                <!-- افلييت -->
3837                 <br />
3838                <a href="http://affiliate.wilow.app/" target="_blank" rel="noopener"
3839                  >تسويق بالعمولة</a
3840                >
3841              </div>
3842              <div>
3843                <h3>تواصل</h3>
3844                <a href="mailto:[email protected]">[email protected]</a><br />
3845                <a href="https://wa.me/966530092588">واتساب الدعم</a><br />
3846                <a href="https://get.wilow.app/?src=landing-page/">المحادثة مباشرة التطبيق</a>
3847              </div>
3848            </div>
3849
3850            <div
3851              style="
3852                padding: 24px 0;
3853                border-bottom: 1px solid rgba(255, 255, 255, 0.1);
3854                display: flex;
3855                justify-content: space-between;
3856                align-items: center;
3857                gap: 16px;
3858                flex-wrap: wrap;
3859              "
3860            >
3861              <div
3862                style="
3863                  font: 500 12px/1 &quot;DIN Arabic&quot;;
3864                  color: rgba(255, 255, 255, 0.6);
3865                  letter-spacing: 0.06em;
3866                "
3867              >
3868                طرق الدفع المقبولة
3869              </div>
3870              <div style="display: flex; gap: 10px; flex-wrap: wrap">
3871                <div
3872                  style="
3873                    background: rgba(255, 255, 255, 0.08);
3874                    border-radius: 6px;
3875                    padding: 8px 14px;
3876                    font: 700 12px/1 &quot;DIN Arabic&quot;;
3877                    color: #fff;
3878                  "
3879                >
3880                  مدى
3881                </div>
3882                <div
3883                  style="
3884                    background: rgba(255, 255, 255, 0.08);
3885                    border-radius: 6px;
3886                    padding: 8px 14px;
3887                    font: 700 12px/1 &quot;DIN Arabic&quot;;
3888                    color: #fff;
3889                  "
3890                >
3891                  Apple Pay
3892                </div>
3893                <div
3894                  style="
3895                    background: rgba(255, 255, 255, 0.08);
3896                    border-radius: 6px;
3897                    padding: 8px 14px;
3898                    font: 700 12px/1 &quot;DIN Arabic&quot;;
3899                    color: #fff;
3900                  "
3901                >
3902                  Visa
3903                </div>
3904                <div
3905                  style="
3906                    background: rgba(255, 255, 255, 0.08);
3907                    border-radius: 6px;
3908                    padding: 8px 14px;
3909                    font: 700 12px/1 &quot;DIN Arabic&quot;;
3910                    color: #fff;
3911                  "
3912                >
3913                  Mastercard
3914                </div>
3915              </div>
3916            </div>
3917
3918            <div class="footer-bottom">
3919              <div>
3920                © 2026 ويلو. جميع الحقوق محفوظة. • السجل التجاري: 1009010804 •
3921                الرقم الضريبي: 312660579900003
3922              </div>
3923              <div style="display: flex; gap: 8px; align-items: center">
3924                <img
3925                  src="assets/flag.svg"
3926                  width="24"
3927                  height="16"
3928                  alt="علم السعودية"
3929                />
3930                <span>صُنع في الرياض</span>
3931              </div>
3932            </div>
3933          </div>
3934        </footer>
3935        <!-- [/extract:footer] -->
3936      </div>
3937    </div>
3938
3939    <!-- Sticky mobile CTA -->
3940    <div class="sticky-cta" id="sticky-cta">
3941      <div class="sticky-left">
3942        حمّل تطبيق ويلو<small>استلام وتوصيل مجاني لباب البيت</small>
3943      </div>
3944      <a
3945        href="https://get.wilow.app/?src=landing-page"
3946        target="_blank"
3947        rel="noopener"
3948        class="sticky-btn"
3949        data-ga-event="app_download_click"
3950        data-ga-platform="universal"
3951        data-ga-location="sticky"
3952        >حمّل الآن</a
3953      >
3954    </div>
3955
3956    <!-- WhatsApp FAB -->
3957    <a
3958      class="wa-fab"
3959      href="https://wa.me/966530092588"
3960      aria-label="تواصل على واتساب"
3961    >
3962      <svg
3963        width="28"
3964        height="28"
3965        viewBox="0 0 24 24"
3966        fill="#fff"
3967        xmlns="http://www.w3.org/2000/svg"
3968      >
3969        <path
3970          d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"
3971        />
3972      </svg>
3973    </a>
3974
3975    <style>
3976      /* Fixed nav override */
3977      .nav {
3978        position: fixed;
3979        width: 100%;
3980      }
3981      .site {
3982        padding-top: 72px;
3983      }
3984      /* .nav-logo size is handled in landing.css (responsive + scroll-state aware) */
3985
3986      /* Active nav link */
3987      .nav-links a.active {
3988        color: var(--wilow-orange);
3989      }
3990
3991      /* Plan weight spacing */
3992      .plan-weight {
3993        margin-top: 6px;
3994      }
3995
3996      /* Responsive sticky CTA: visible only on mobile */
3997      .sticky-cta {
3998        display: none;
3999      }
4000      @media (max-width: 768px) {
4001        .sticky-cta {
4002          display: flex;
4003        }
4004      }
4005
4006      /* Desktop-only QR card */
4007      @media (max-width: 768px) {
4008        .desktop-only-qr {
4009          display: none;
4010        }
4011      }
4012
4013      /* Responsive layout adjustments */
4014      @media (max-width: 960px) {
4015        .hero-grid {
4016          grid-template-columns: 1fr;
4017          gap: 24px;
4018        }
4019        .trust-strip {
4020          grid-template-columns: repeat(2, 1fr);
4021          row-gap: 28px;
4022        }
4023        .trust-stat:nth-child(3) {
4024          border-left: 0;
4025        }
4026        .steps {
4027          grid-template-columns: 1fr 1fr;
4028        }
4029        .wash-grid {
4030          grid-template-columns: 1fr 1fr;
4031        }
4032        .plans {
4033          grid-template-columns: 1fr 1fr;
4034        }
4035        .plan.featured {
4036          transform: none;
4037        }
4038        .testimonials {
4039          grid-template-columns: 1fr;
4040        }
4041        .blog-grid {
4042          grid-template-columns: 1fr;
4043        }
4044        .final-cta {
4045          grid-template-columns: 1fr;
4046          padding: 40px 28px;
4047        }
4048        .final-cta > div:first-child {
4049          text-align: center;
4050        }
4051        .final-cta > div:first-child > div:last-child {
4052          justify-content: center;
4053        }
4054        .footer-grid {
4055          grid-template-columns: 1fr 1fr;
4056        }
4057      }
4058
4059      @media (max-width: 600px) {
4060        .container {
4061          padding: 0 16px;
4062        }
4063        .section {
4064          padding: 56px 0;
4065        }
4066        .hero {
4067          padding: 40px 0;
4068        }
4069        .h-display {
4070          font-size: 34px;
4071        }
4072        .h-xl {
4073          font-size: 26px;
4074        }
4075        .hero-stage {
4076          height: 360px;
4077        }
4078        .mini-phone {
4079          width: 200px;
4080          height: 400px;
4081        }
4082        .trust-strip {
4083          padding: 24px 0;
4084        }
4085        .steps {
4086          grid-template-columns: 1fr;
4087        }
4088        .wash-grid {
4089          grid-template-columns: 1fr 1fr;
4090          gap: 12px;
4091        }
4092        .plans {
4093          grid-template-columns: 1fr;
4094        }
4095        .testimonials {
4096          grid-template-columns: 1fr;
4097        }
4098        .blog-grid {
4099          grid-template-columns: 1fr;
4100        }
4101        .extras-grid-v2 {
4102          grid-template-columns: 1fr;
4103        }
4104        .final-cta {
4105          border-radius: 20px;
4106          padding: 28px 20px;
4107        }
4108        .footer {
4109          padding: 40px 0 100px;
4110        }
4111        .footer-grid {
4112          grid-template-columns: 1fr 1fr;
4113          gap: 24px;
4114        }
4115        .footer-bottom {
4116          flex-direction: column;
4117          align-items: flex-start;
4118        }
4119        .neigh-grid {
4120          grid-template-columns: 1fr 1fr;
4121        }
4122        .hero-pricing .price-chip {
4123          min-width: 78px;
4124          padding: 8px 10px 10px;
4125        }
4126        .hero-pricing .price-chip .num {
4127          font-size: 18px;
4128        }
4129        .nav-logo {
4130          height: 40px;
4131          width: auto;
4132        }
4133        .nav.nav--scrolled .nav-logo {
4134          height: 30px;
4135          width: auto;
4136        }
4137        .hero-pricing {
4138          display: grid;
4139          grid-template-columns: 1fr 1fr;
4140          gap: 10px;
4141        }
4142      }
4143      .hero-pricing .price-chip .chip-unit {
4144        font:
4145          500 9px/1 "Noto Arabic",
4146          sans-serif;
4147        color: var(--ink-400);
4148        margin-top: 2px;
4149      }
4150    </style>
4151
4152    
4152<script>
4153      document.addEventListener("DOMContentLoaded", () => {
4154        // Reveal animations
4155        const io = new IntersectionObserver(
4156          (es) => {
4157            es.forEach((e) => {
4158              if (e.isIntersecting) {
4159                e.target.classList.add("in");
4160                io.unobserve(e.target);
4161              }
4162            });
4163          },
4164          { threshold: 0.12 },
4165        );
4166        document
4167          .querySelectorAll("[data-reveal]")
4168          .forEach((el) => io.observe(el));
4169
4170        // Coverage show more
4171        window.toggleNeigh = function () {
4172          var chips = document.querySelectorAll(".neigh-more");
4173          var btn = document.getElementById("neigh-toggle");
4174          var hidden = chips[0].style.display === "none";
4175          chips.forEach(function (c) {
4176            c.style.display = hidden ? "" : "none";
4177          });
4178          btn.textContent = hidden ? "عرض أقل" : "عرض المزيد من الأحياء";
4179        };
4180
4181        // Active nav link tracking
4182        // Observation band is a narrow strip just below the nav (72px → 25 %
4183        // of viewport height). A section is "active" only when it actually
4184        // occupies the top of the viewport — so at scroll=0 the hero sits at
4185        // the top (and the hero isn't in the navLinks list), which means no
4186        // link gets the active class until the user has scrolled past it.
4187        const navLinks = document.querySelectorAll(".nav-links a[href^='#']");
4188        const sectionIds = Array.from(navLinks).map((a) =>
4189          a.getAttribute("href").slice(1),
4190        );
4191        const sections = sectionIds
4192          .map((id) => document.getElementById(id))
4193          .filter(Boolean);
4194        const spy = new IntersectionObserver(
4195          (entries) => {
4196            entries.forEach((entry) => {
4197              if (entry.isIntersecting) {
4198                navLinks.forEach((a) => a.classList.remove("active"));
4199                const link = document.querySelector(
4200                  ".nav-links a[href='#" + entry.target.id + "']",
4201                );
4202                if (link) link.classList.add("active");
4203              }
4204            });
4205          },
4206          { rootMargin: "-72px 0px -75% 0px" },
4207        );
4208        sections.forEach((s) => spy.observe(s));
4209      });
4210    </script>
4210
4211
4212    <!-- ═══ Deferred analytics ════════════════════════════════════════════════
4213     Fires on first user interaction (scroll/click/touch/key) OR after 3.5s.
4214     This keeps GTM + Mixpanel completely off the critical path so they
4215     don't block FCP, LCP, or TTI. All campaign attribution is preserved —
4216     click IDs (fbclid, ttclid, gclid) live in the URL from first navigation.
4217     ═══════════════════════════════════════════════════════════════════════ -->
4218    
4218<script>
4219      (function () {
4220        var done = false;
4221        function loadAnalytics() {
4222          if (done) return;
4223          done = true;
4224
4225          // ── GTM ──────────────────────────────────────────────────────────────
4226          window.dataLayer = window.dataLayer || [];
4227          window.dataLayer.push({
4228            "gtm.start": new Date().getTime(),
4229            event: "gtm.js",
4230          });
4231          var g = document.createElement("script");
4232          g.async = true;
4233          g.src = "https://www.googletagmanager.com/gtm.js?id=GTM-NC7FC4QW";
4234          document.head.appendChild(g);
4235
4236          // ── Mixpanel ──────────────────────────────────────────────────────────
4237          (function (f, b) {
4238            if (!b.__SV) {
4239              var e, s, i, h;
4240              window.mixpanel = b;
4241              b._i = [];
4242              b.init = function (e, f, c) {
4243                function s(a, d) {
4244                  var b = d.split(".");
4245                  2 == b.length && ((a = a[b[0]]), (d = b[1]));
4246                  a[d] = function () {
4247                    a.push(
4248                      [d].concat(Array.prototype.slice.call(arguments, 0)),
4249                    );
4250                  };
4251                }
4252                var a = b;
4253                "undefined" !== typeof c ? (a = b[c] = []) : (c = "mixpanel");
4254                a.people = a.people || [];
4255                a.toString = function (a) {
4256                  var d = "mixpanel";
4257                  "mixpanel" !== c && (d += "." + c);
4258                  a || (d += " (stub)");
4259                  return d;
4260                };
4261                a.people.toString = function () {
4262                  return a.toString(1) + ".people (stub)";
4263                };
4264                i =
4265                  "disable time_event track track_pageview track_links track_forms track_with_groups add_group set_group remove_group register register_once alias unregister identify name_tag set_config reset opt_in_tracking opt_out_tracking has_opted_in_tracking has_opted_out_tracking clear_opt_in_out_tracking start_batch_senders people.set people.set_once people.unset people.increment people.append people.union people.track_charge people.clear_charges people.delete_user people.remove".split(
4266                    " ",
4267                  );
4268                for (h = 0; h < i.length; h++) s(a, i[h]);
4269                var j = "set set_once union unset remove delete".split(" ");
4270                a.get_group = function () {
4271                  function b(c) {
4272                    d[c] = function () {
4273                      call2_args = arguments;
4274                      call2 = [c].concat(
4275                        Array.prototype.slice.call(call2_args, 0),
4276                      );
4277                      a.push([e].concat([call2]));
4278                    };
4279                  }
4280                  for (
4281                    var d = {},
4282                      e = ["get_group"].concat(
4283                        Array.prototype.slice.call(arguments, 0),
4284                      ),
4285                      c = 0;
4286                    c < j.length;
4287                    c++
4288                  )
4289                    b(j[c]);
4290                  return d;
4291                };
4292                b._i.push([e, f, c]);
4293              };
4294              b.__SV = 1.2;
4295              e = f.createElement("script");
4296              e.type = "text/javascript";
4297              e.async = !0;
4298              e.src = "//cdn.mxpnl.com/libs/mixpanel-2-latest.min.js";
4299              var t = f.getElementsByTagName("script")[0];
4300              t.parentNode.insertBefore(e, t);
4301            }
4302          })(document, window.mixpanel || []);
4303          mixpanel.init("0c1e23b8831558a894b5ef648c464391");
4304        }
4305
4306        // Fire on first human interaction
4307        ["scroll", "pointerdown", "keydown", "touchstart", "mousemove"].forEach(
4308          function (ev) {
4309            document.addEventListener(ev, loadAnalytics, {
4310              passive: true,
4311              once: true,
4312            });
4313          },
4314        );
4315        // Fallback: fire after 3.5s for bots / idle visitors
4316        setTimeout(loadAnalytics, 3500);
4317      })();
4318    </script>
4318
4319
4320    <!-- ═══ GA4 custom event tracking ══════════════════════════════════════════
4321     Fires named events for the interactions that matter most:
4322     • app_download_click  — every CTA that leads to the app
4323     • plan_interest       — hero price chip clicks (shows plan demand)
4324     • nav_click           — which section users navigate to
4325     • faq_open            — which FAQ questions get opened
4326     Uses event delegation (one listener) + data-ga-event attributes.        -->
4327    
4327<script>
4328      (function () {
4329        function ga(event, params) {
4330          if (typeof gtag === "function") gtag("event", event, params);
4331        }
4332
4333        // Click delegation — reads data-ga-event + any data-ga-* params
4334        document.addEventListener("click", function (e) {
4335          var el = e.target.closest("[data-ga-event]");
4336          if (!el) return;
4337          var eventName = el.getAttribute("data-ga-event");
4338          var params = {};
4339          for (var i = 0; i < el.attributes.length; i++) {
4340            var a = el.attributes[i];
4341            if (
4342              a.name.indexOf("data-ga-") === 0 &&
4343              a.name !== "data-ga-event"
4344            ) {
4345              params[a.name.slice(8)] = a.value;
4346            }
4347          }
4348          ga(eventName, params);
4349        });
4350
4351        // FAQ open tracking — fires when a question is expanded by the user.
4352        // Chrome fires a synthetic 'toggle' for <details open> on page load before
4353        // any user interaction — the userInteracted flag filters those out.
4354        var userInteracted = false;
4355        document.addEventListener(
4356          "click",
4357          function () {
4358            userInteracted = true;
4359          },
4360          { once: true, passive: true },
4361        );
4362
4363        document.querySelectorAll(".faq-list > details").forEach(function (d) {
4364          d.addEventListener("toggle", function () {
4365            if (!userInteracted || !d.open) return;
4366            var s = d.querySelector("summary");
4367            var q = s
4368              ? s.textContent.replace(/\s+/g, " ").trim().slice(0, 80)
4369              : "";
4370            ga("faq_open", { question: q });
4371          });
4372        });
4373      })();
4374    </script>
4374
4375  </body>
4376</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.