/* BUILD 2026-07-26 13:22 UTC */
/* Motion layer — composed from verified section demos. Content stays baked in HTML (SEO). */
#hero,#hero *,#s2,#s3,#s4,#s5,#s6,#s7,#s8,#s9,#s10,#s11,#s13,#s14,#s2 *,#s3 *,#s4 *,#s5 *,#s6 *,#s7 *,#s8 *,#s9 *,#s10 *,#s11 *,#s13 *,#s14 *{font-family:'Cairo',sans-serif;}
/* ===== section 14: the REAL floating WhatsApp FAB rises to center + reveals its label ===== */
/* Tailwind puts `transition-transform duration-200` on this button, which made the
   travel to the centre snap in 0.2s. Override it: slow glide, normal widening. */
.app-fab.app-fab--whatsapp{transition:transform 3.2s cubic-bezier(.25,.46,.30,1),width 1.1s ease,height 1.1s ease,padding 1.1s ease,border-radius 1.1s ease!important;}
.wa-fab__label{flex:0 0 auto;min-width:0;width:0;max-width:0;opacity:0;overflow:hidden;white-space:nowrap;color:#fff;font-weight:800;font-size:1.02rem;margin-inline-start:0;transition:width 1.1s ease .35s,max-width 1.1s ease .35s,opacity .9s ease .35s,margin 1.1s ease .35s;}
/* keep bottom/right anchors untouched — only transform/width animate, so the button GLIDES */
body.s14-active .app-fab--whatsapp{width:auto!important;height:auto!important;padding:15px 22px!important;gap:10px;border-radius:999px!important;transform:translate(var(--wa-dx,0px),var(--wa-dy,0px))!important;}
body.s14-active .app-fab--whatsapp .wa-fab__label{width:auto;max-width:240px;opacity:1;margin-inline-start:8px;}
body.s14-active #bottom-order-btn{animation:s14pulse 1.2s ease-in-out infinite;}
@keyframes s14pulse{0%,100%{transform:scale(1);}50%{transform:scale(1.16);}}
#s14 .ordertext{bottom:212px!important;}
/* ===== sections sit directly on each other =====
   GSAP leaves one full viewport of empty scroll after each pin (the section scrolling
   away). Pull the next block up by that amount so the following section rises straight
   over the pinned one instead of a blank gap appearing between them. */
main .pin-spacer{margin-bottom:calc(-1 * var(--appvh,100vh))!important;}
main > section{position:relative;}
/* the نearby block is normal flow — give it a solid background so it covers cleanly */
.motion-flow-block{position:relative;z-index:2;background:#fbfbf9;}
/* ===== side menu: active item follows the scroll position ===== */
#sidebar-nav-links a{-webkit-tap-highlight-color:transparent;transition:background-color .2s,color .2s,border-color .2s;}
@media (hover:none){#sidebar-nav-links a:hover{background-color:transparent!important;border-color:transparent!important;}}
#sidebar-nav-links a.is-active{background-color:rgb(var(--color-primary)/.18)!important;color:rgb(var(--color-primary))!important;border-color:rgb(var(--color-primary))!important;font-weight:800;}
#sidebar-nav-links a:not(.is-active){background-color:transparent!important;border-color:transparent!important;color:#374151!important;}
/* the demos ship their own white cover panels; the fixed layers own the background now */
#s9 .whitecover,#s10 .whitecover,.whitecover{display:none!important;}
/* ===== chrome sizing ===== */
/* header: trim the tall 7rem block down to ~20px breathing space */
.app-header{height:auto!important;padding-top:10px!important;padding-bottom:10px!important;}
#header-logo{max-height:62px;width:auto!important;max-width:82%;}
/* bottom bar: less bottom padding, and pinned to the very bottom on every phone */
.app-footer-bar{bottom:0!important;padding-bottom:env(safe-area-inset-bottom,0px);}
.app-footer-bar > div{padding-bottom:10px!important;padding-top:8px!important;}
.app-fab{bottom:calc(4.75rem + env(safe-area-inset-bottom,0px))!important;}
/* location CTA sits at 25% from the bottom of the screen */
#s11 .cta{bottom:25%!important;}
#s14 .orderarrow{animation:s14bob 1.3s ease-in-out infinite;}
@keyframes s14bob{0%,100%{transform:translateX(-50%) translateY(0);}50%{transform:translateX(-50%) translateY(7px);}}
/* full-screen image zoom (section 3): cover the chrome so the X is clear */
body.imgzoom-open .app-header,body.imgzoom-open .app-footer-bar,body.imgzoom-open .app-fab{opacity:0!important;pointer-events:none!important;}
/* ===== fixed backgrounds: the background never scrolls; only section content moves ===== */
.app-container{background:#fbfbf9;min-height:var(--appvh,100vh);}
.app-main-content{background:transparent!important;}
.mbg{position:fixed;left:50%;margin-left:-237.5px;top:0;bottom:0;width:100%;max-width:475px;min-height:var(--appvh,100vh);z-index:0;opacity:0;pointer-events:none;overflow:hidden;transition:opacity .45s ease;}
@media (max-width:475px){.mbg{left:0;margin-left:0;}}
.mbg__img{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;width:100%;height:100%;object-fit:cover;}
.mbg__img--14{opacity:.14;} .mbg__img--22{opacity:.22;} .mbg__img--30{opacity:.30;} .mbg__img--dark{opacity:1;transform:scale(2.2);}
.mbg__veil{position:absolute;top:0;right:0;bottom:0;left:0;inset:0;}
.mbg__veil--light{background:linear-gradient(180deg,rgba(251,251,249,.46),rgba(251,251,249,.60));}
.mbg__veil--light2{background:linear-gradient(180deg,rgba(251,251,249,.20),rgba(251,251,249,.34));}
.mbg__veil--eve{background:linear-gradient(180deg,rgba(8,18,26,.55),rgba(4,10,14,.80));}
.mbg__veil--dark2{background:#000;opacity:.75;}
#bg-dark{background:#000;} #bg-plain,#bg-white,#bg-white30{background:#fbfbf9;}
#bg-deep{background:radial-gradient(120% 90% at 50% 42%,#12211f 0%,#0a1413 42%,#04090a 100%);}
#bg-evening{background:linear-gradient(180deg,#0a1622 0%,#0b1a1e 45%,#050c0f 100%);}
/* every motion section is transparent — its own background is drawn by the fixed layer */
#hero,#s2,#s3,#s4,#s5,#s6,#s7,#s8,#s9,#s10,#s11,#s13,#s14{background:transparent!important;}
#hero .hero__img,#hero .hero__overlay,#s2 .s2__img,#s2 .s2__overlay,#s5 .s5__bg,#s5 .s5__veil,#s6 .s6__bg,#s6 .s6__veil,#s7 .s7__bg,#s7 .s7__veil,#s8 .s8__bg,#s8 .s8__veil,#s9 .s9__bg,#s9 .s9__veil,#s10 .s10__bg,#s10 .s10__veil,#s13 .s13__bg,#s13 .s13__veil,#s14 .s14__bg,#s14 .s14__veil{display:none!important;}
/* الوصف: السكشن شفاف فوق خلفية الهيرو، ونصّه مثبّت على الشاشة —
   فيظهر بنفس مكانه وبنفس مؤثره الأصلي مباشرة بعد اختفاء نص الهيرو،
   بدل أن يصعد مع السكشن أو يُقصّ داخل صندوقه. */
#s2{overflow:visible!important;transform:none!important;}
#s2 .s2__wrap{position:fixed!important;top:0!important;bottom:0!important;left:50%!important;right:auto!important;margin-left:-237.5px!important;width:100%!important;max-width:475px!important;pointer-events:none!important;}
@media (max-width:475px){#s2 .s2__wrap{left:0!important;margin-left:0!important;}}
/* قبل/بعد: البطاقة تكبر خارج حدود صندوق السكشن أثناء دخولها، فلا يجوز قصّها */
#s4{overflow:visible!important;}

/* ===== hero ===== */
#hero { --teal:#00aca8; }
#hero { height:var(--appvh,100vh); position:relative; overflow:hidden; background:#000; }
#hero .hero__img { position:absolute; top:0;right:0;bottom:0;left:0;inset:0; width:100%; height:100%; object-fit:cover; transform-origin:center center; will-change:transform; }
#hero .hero__overlay { position:absolute; top:0;right:0;bottom:0;left:0;inset:0; background:#000; opacity:0; z-index:1; }
#hero .hero__content { position:absolute; top:0;right:0;bottom:0;left:0;inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; text-align:center; padding:24px; will-change:transform,opacity; }
#hero .title-wrap { perspective:800px; }
#hero .t1 { position:relative; display:inline-block; font-size:2rem; font-weight:900; color:var(--teal); line-height:1.25; letter-spacing:.5px; transform-style:preserve-3d; text-shadow:0 4px 24px rgba(0,0,0,.55); }
#hero .t1 .ln { display:block; will-change:transform,opacity; }
#hero .t1 .ln2 { margin-top:.12em; }
#hero .t1 .half { position:absolute; top:0;right:0;bottom:0;left:0;inset:0; will-change:transform,opacity; }
#hero .t1 .half.left { clip-path:inset(0 0 0 50%); }
#hero .t1 .half.right { clip-path:inset(0 50% 0 0); }
#hero .t2 { font-size:1.15rem; font-weight:500; color:#fff; max-width:300px; line-height:1.9; will-change:filter,opacity,transform; text-shadow:0 2px 16px rgba(0,0,0,.6); }
#hero .t2 .gold { color:#d4af37; font-weight:700; }
#hero .next p { color:#fff8; margin-top:10px; font-size:.9rem; }
@media (prefers-reduced-motion: reduce) {#hero .t1 .half { position:static; clip-path:none; }#hero .t1 .half.right { display:none; }#hero .t1 .ghost { display:none; }}

/* ===== s2 ===== */
#s2 { --teal:#00aca8; --gold:#c9a24b; }
#s2 { height:var(--appvh,100vh); position:relative; overflow:hidden; background:#000; }
#s2 .s2__img { position:absolute; top:0;right:0;bottom:0;left:0;inset:0; width:100%; height:100%; object-fit:cover; transform:scale(2.15); filter:brightness(.42) saturate(.9); }
#s2 .s2__overlay { position:absolute; top:0;right:0;bottom:0;left:0;inset:0; background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.78)); }
#s2 .s2__wrap { position:absolute; top:0;right:0;bottom:0;left:0;inset:0; z-index:2; display:flex; align-items:center; justify-content:center; padding:34px 30px; }
#s2 .s2__text { color:#f4efe6; font-size:1.28rem; font-weight:500; line-height:2.15; text-align:center; max-width:330px; text-shadow:0 2px 18px rgba(0,0,0,.7); }
#s2 .s2__text .word { display:inline-block; will-change:opacity,transform; }
#s2 .s2__accent { color:var(--gold); font-weight:700; }

/* ===== s3 ===== */
#s3 { --teal:#00aca8; }
#s3 { height:var(--appvh,100vh); position:relative; overflow:hidden; background:radial-gradient(120% 90% at 50% 42%, #12211f 0%, #0a1413 42%, #04090a 100%); }
#s3 .starfield { position:absolute; top:0;right:0;bottom:0;left:0;inset:0; z-index:0; pointer-events:none; }
#s3 .star { position:absolute; background:#fff; border-radius:50%; opacity:.35; box-shadow:0 0 4px rgba(255,255,255,.75); animation:s3_twinkle 3s ease-in-out infinite; }
@keyframes s3_twinkle { 0%,100%{opacity:.15;} 50%{opacity:.95;} }
#s3 .centerglow { position:absolute; top:46%; left:50%; width:440px; height:440px; transform:translate(-50%,-50%); z-index:1; pointer-events:none;
    background:radial-gradient(circle, rgba(255,255,255,.20) 0%, rgba(150,220,214,.12) 32%, rgba(0,172,168,.05) 52%, transparent 70%);
    animation:s3_glowpulse 5.5s ease-in-out infinite; }
@keyframes s3_glowpulse { 0%,100%{opacity:.7; transform:translate(-50%,-50%) scale(1);} 50%{opacity:1; transform:translate(-50%,-50%) scale(1.09);} }
#s3 .s3__titlewrap { position:absolute; top:132px; left:0; right:0; text-align:center; z-index:5; }
#s3 .s3__title { --rev:100; position:relative; display:inline-block; font-size:1.75rem; font-weight:900; color:#fff; padding:0 6px; text-shadow:0 0 22px rgba(0,172,168,.35); }
#s3 .s3__titletext { display:inline-block; clip-path: inset(0 0 0 calc(var(--rev) * 1%)); }
#s3 .s3__cursor { position:absolute; top:6px; bottom:6px; left:calc(var(--rev) * 1%); width:3px; background:var(--teal); transform:translateX(-50%); box-shadow:0 0 10px var(--teal); }
#s3 .s3__cursor.blink { animation:s3_blink 1s steps(1) infinite; }
@keyframes s3_blink { 50%{opacity:0;} }
#s3 .s3__scene { position:absolute; top:0;right:0;bottom:0;left:0;inset:0; z-index:2; display:flex; align-items:center; justify-content:center; perspective:900px; }
#s3 .s3__cylinder { position:relative; width:210px; height:280px; transform-style:preserve-3d; }
#s3 .card { position:absolute; top:0;right:0;bottom:0;left:0;inset:0; border-radius:16px; overflow:hidden; backface-visibility:hidden; box-shadow:0 24px 60px rgba(0,0,0,.6), 0 0 40px rgba(0,172,168,.10); cursor:pointer; background:#111; border:1px solid #ffffff1f; }
#s3 .card img { width:100%; height:100%; object-fit:cover; pointer-events:none; }
#s3 .card__label { position:absolute; bottom:0; right:0; left:0; padding:14px; background:linear-gradient(180deg,transparent,rgba(0,0,0,.82)); color:#fff; font-weight:700; font-size:1.02rem; text-align:right; }
#s3 .whiteout { position:absolute; top:46%; left:50%; width:300px; height:300px; border-radius:50%; background:#fff; transform:translate(-50%,-50%) scale(0); opacity:0; z-index:20; pointer-events:none; box-shadow:0 0 140px 70px #fff; }
#s3 .tip { position:absolute; top:calc(50% + 158px); bottom:auto; left:0; right:0; text-align:center; color:#fff9; font-size:.72rem; z-index:5; }
#s3 .viewer { position:fixed; top:0;right:0;bottom:0;left:0;inset:0; background:#000; z-index:100; display:none; }
#s3 .viewer.open { display:block; }
#s3 .viewer__stage { position:absolute; top:0;right:0;bottom:0;left:0;inset:0; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; display:flex; align-items:center; }
#s3 .viewer__stage img { height:var(--appvh,100vh); width:auto; max-width:none; display:block; }
#s3 .viewer__close { position:absolute; top:14px; left:14px; z-index:101; width:42px; height:42px; border-radius:50%; background:rgba(0,0,0,.55); color:#fff; border:1px solid #ffffff40; font-size:1.5rem; line-height:1; cursor:pointer; }
#s3 .viewer__hint { position:absolute; bottom:18px; left:0; right:0; text-align:center; color:#fff9; font-size:.72rem; z-index:101; }
@media (prefers-reduced-motion: reduce) {#s3 .s3__cursor { display:none; }#s3 .star, #s3 .centerglow { animation:none; }}

/* ===== s4 ===== */
#s4 { --teal:#00aca8; }
#s4 { height:var(--appvh,100vh); position:relative; overflow:hidden; background:#fbfbf9; }
#s4 .cmp { position:absolute; top:128px; bottom:112px; left:16px; right:16px; overflow:hidden; border-radius:18px; box-shadow:0 20px 50px rgba(0,0,0,.28); }
#s4 .cmp__img { position:absolute; top:0;right:0;bottom:0;left:0;inset:0; width:100%; height:100%; object-fit:cover; }
#s4 .cmp__after { --p:0; clip-path: inset(0 0 0 calc((100 - var(--p)) * 1%)); }
#s4 .cmp__divider { --p:0; position:absolute; top:0; bottom:0; right:calc(var(--p) * 1%); width:2px; background:#fff; box-shadow:0 0 14px rgba(0,0,0,.5); z-index:4; transform:translateX(50%); }
#s4 .cmp__handle { position:absolute; top:50%; right:calc(var(--p) * 1%); transform:translate(50%,-50%); width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.92); box-shadow:0 4px 14px rgba(0,0,0,.35); z-index:5; display:flex; align-items:center; justify-content:center; color:#111; font-size:.9rem; }
#s4 .cmp__handle::before { content:'‹ ›'; letter-spacing:-2px; font-weight:900; }
#s4 .label { position:absolute; bottom:22px; padding:7px 16px; border-radius:999px; font-size:.82rem; font-weight:700; color:#fff; backdrop-filter:blur(4px); z-index:6; }
#s4 .label--before { left:16px; background:rgba(0,0,0,.5); }
#s4 .label--after { right:16px; background:rgba(0,172,168,.85); }
#s4 .whitein { position:absolute; top:0;right:0;bottom:0;left:0;inset:0; background:#fbfbf9; z-index:8; pointer-events:none; }

/* ===== s5 ===== */
#s5 { --teal:#00aca8; --gold:#b8912f; --ink:#14201f; }
#s5 { height:var(--appvh,100vh); position:relative; overflow:hidden; background:#fbfbf9; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:40px 34px; }
#s5 .s5__bg { position:absolute; top:0;right:0;bottom:0;left:0;inset:0; width:100%; height:100%; object-fit:cover; opacity:.14; z-index:0; }
#s5 .s5__veil { position:absolute; top:0;right:0;bottom:0;left:0;inset:0; background:linear-gradient(180deg, rgba(251,251,249,.46), rgba(251,251,249,.6)); z-index:1; }
#s5 .s5__title { position:relative; z-index:2; color:var(--ink); font-size:1.55rem; font-weight:900; text-align:center; margin-bottom:40px; will-change:transform,opacity; }
#s5 .s5__title b { color:var(--teal); }
#s5 .lines { position:relative; z-index:2; display:flex; flex-direction:column; gap:26px; width:100%; max-width:300px; }
#s5 .line { display:flex; align-items:center; gap:14px; }
#s5 .dot { flex:0 0 auto; width:11px; height:11px; border-radius:50%; background:var(--gold); box-shadow:0 0 10px rgba(184,145,47,.55); will-change:transform; }
#s5 .mask { overflow:hidden; display:inline-block; }
#s5 .linetext { display:inline-block; color:var(--ink); font-size:1.35rem; font-weight:700; white-space:nowrap; will-change:transform,opacity; }

/* ===== s6 ===== */
#s6 { --teal:#00aca8; --gold:#b8912f; --ink:#14201f; }
#s6 { height:var(--appvh,100vh); position:relative; overflow:hidden; background:#fbfbf9; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:40px 30px; }
#s6 .s6__bg { position:absolute; top:0;right:0;bottom:0;left:0;inset:0; width:100%; height:100%; object-fit:cover; opacity:.14; z-index:0; }
#s6 .s6__veil { position:absolute; top:0;right:0;bottom:0;left:0;inset:0; background:linear-gradient(180deg, rgba(251,251,249,.46), rgba(251,251,249,.6)); z-index:1; }
#s6 .s6__title { position:relative; z-index:2; color:var(--ink); font-size:1.5rem; font-weight:900; text-align:center; margin-bottom:8px; will-change:transform,opacity; }
#s6 .s6__rule { position:relative; z-index:2; width:52px; height:3px; background:var(--teal); border-radius:2px; margin-bottom:34px; will-change:transform,opacity; }
#s6 .table { position:relative; z-index:2; width:100%; max-width:320px; }
#s6 .row { display:flex; justify-content:space-between; align-items:center; padding:15px 4px; border-bottom:1px solid rgba(20,32,31,.12); will-change:transform,opacity; }
#s6 .row:last-child { border-bottom:none; }
#s6 .label { color:var(--ink); font-weight:700; font-size:1rem; }
#s6 .val { color:#3a4746; font-weight:500; font-size:1rem; }
#s6 .num { color:var(--teal); font-weight:900; font-size:1.15rem; }

/* ===== s7 ===== */
#s7 { --teal:#00aca8; --gold:#b8912f; --ink:#14201f; }
#s7 { height:var(--appvh,100vh); position:relative; overflow:hidden; background:#fbfbf9; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:40px 32px; }
#s7 .s7__bg { position:absolute; top:0;right:0;bottom:0;left:0;inset:0; width:100%; height:100%; object-fit:cover; opacity:.14; z-index:0; }
#s7 .s7__veil { position:absolute; top:0;right:0;bottom:0;left:0;inset:0; background:linear-gradient(180deg, rgba(251,251,249,.46), rgba(251,251,249,.6)); z-index:1; }
#s7 .s7__title { position:relative; z-index:2; color:var(--ink); font-size:1.5rem; font-weight:900; text-align:center; margin-bottom:6px; }
#s7 .s7__rule { position:relative; z-index:2; width:52px; height:3px; background:var(--teal); border-radius:2px; margin-bottom:30px; }
#s7 .chapters { position:relative; z-index:2; width:100%; max-width:320px; min-height:300px; }
#s7 .chapter { position:absolute; top:0;right:0;bottom:0;left:0;inset:0; display:flex; flex-direction:column; align-items:center; text-align:center; will-change:transform,opacity; }
#s7 .chapter__head { font-size:1.35rem; font-weight:900; color:var(--ink); margin-bottom:6px; }
#s7 .chapter__head span { color:var(--gold); font-weight:700; }
#s7 .chapter__dots { display:flex; gap:7px; justify-content:center; margin-bottom:18px; direction:ltr; }
#s7 .chapter__dots i { width:7px; height:7px; border-radius:50%; background:rgba(20,32,31,.2); }
#s7 .chapter__dots i.on { background:var(--teal); width:20px; border-radius:4px; }
#s7 .chapter__body { display:flex; flex-direction:column; gap:11px; }
#s7 .chapter__body span { color:#3a4746; font-size:1.02rem; font-weight:500; line-height:1.5; }

/* ===== s8 ===== */
#s8 { --teal:#00aca8; --gold:#b8912f; --ink:#14201f; }
#s8 { height:var(--appvh,100vh); position:relative; overflow:hidden; background:#fbfbf9; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:40px 32px; }
#s8 .s8__bg { position:absolute; top:0;right:0;bottom:0;left:0;inset:0; width:100%; height:100%; object-fit:cover; opacity:.14; z-index:0; }
#s8 .s8__veil { position:absolute; top:0;right:0;bottom:0;left:0;inset:0; background:linear-gradient(180deg, rgba(251,251,249,.46), rgba(251,251,249,.6)); z-index:1; }
#s8 .content { position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; width:100%; will-change:transform,opacity; }
#s8 .s8__title { color:var(--ink); font-size:1.5rem; font-weight:900; text-align:center; margin-bottom:6px; }
#s8 .s8__rule { width:52px; height:3px; background:var(--teal); border-radius:2px; margin-bottom:26px; }
#s8 .items { display:flex; flex-direction:column; gap:6px; width:100%; max-width:320px; }
#s8 .item { position:relative; color:#cbd0cf; font-size:1.3rem; font-weight:700; padding:11px 18px; transition:color .35s ease, transform .35s ease; }
#s8 .item.on { color:var(--ink); transform:translateX(-6px); }
#s8 .item::before { content:''; position:absolute; right:0; top:22%; bottom:22%; width:4px; border-radius:3px; background:var(--teal); transform:scaleY(0); transform-origin:center; transition:transform .35s ease; }
#s8 .item.on::before { transform:scaleY(1); }

/* ===== s9 ===== */
#s9 { --teal:#00c4bf; --gold:#d4af5a; --ink:#14201f; }
#s9 { height:var(--appvh,100vh); position:relative; overflow:hidden; background:linear-gradient(180deg,#0a1622 0%,#0b1a1e 45%,#050c0f 100%); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:40px 32px; }
#s9 .s9__bg { position:absolute; top:0;right:0;bottom:0;left:0;inset:0; width:100%; height:100%; object-fit:cover; opacity:.22; z-index:0; }
#s9 .s9__veil { position:absolute; top:0;right:0;bottom:0;left:0;inset:0; background:linear-gradient(180deg, rgba(8,18,26,.5), rgba(4,10,14,.72)); z-index:1; }
#s9 .stars { position:absolute; top:0;right:0;bottom:0;left:0;inset:0; z-index:1; pointer-events:none; }
#s9 .star { position:absolute; background:#eaf6f5; border-radius:50%; opacity:.35; box-shadow:0 0 4px rgba(200,240,238,.7); animation:s9_tw 3.5s ease-in-out infinite; }
@keyframes s9_tw { 0%,100%{opacity:.12;} 50%{opacity:.85;} }
#s9 .evenglow { position:absolute; top:34%; left:50%; width:420px; height:420px; transform:translate(-50%,-50%); z-index:1; pointer-events:none;
    background:radial-gradient(circle, rgba(0,196,191,.14) 0%, rgba(0,140,136,.06) 40%, transparent 68%); animation:s9_drift 9s ease-in-out infinite; }
@keyframes s9_drift { 0%,100%{ transform:translate(-58%,-52%) scale(1);} 50%{ transform:translate(-42%,-48%) scale(1.12);} }
#s9 .content { position:relative; z-index:3; display:flex; flex-direction:column; align-items:center; width:100%; will-change:transform,opacity; }
#s9 .s9__title { color:#fff; font-size:1.5rem; font-weight:900; text-align:center; margin-bottom:6px; text-shadow:0 0 20px rgba(0,196,191,.25); }
#s9 .s9__rule { width:52px; height:3px; background:var(--teal); border-radius:2px; margin-bottom:30px; }
#s9 .features { display:flex; flex-direction:column; gap:20px; width:100%; max-width:320px; }
#s9 .feature { display:flex; align-items:center; gap:13px; will-change:transform,opacity; }
#s9 .feature__ico { flex:0 0 auto; color:var(--gold); font-size:.9rem; }
#s9 .feature__txt { color:#eef3f2; font-size:1.22rem; font-weight:700; }
#s9 .whitecover { position:absolute; top:0;right:0;bottom:0;left:0;inset:0; background:#fbfbf9; z-index:9; will-change:transform; }
@media (prefers-reduced-motion: reduce) {#s9 .star, #s9 .evenglow { animation:none; }}

/* ===== s10 ===== */
#s10 { --teal:#00c4bf; --gold:#d4af5a; }
#s10 { height:var(--appvh,100vh); position:relative; overflow:hidden; background:linear-gradient(180deg,#0a1622 0%,#0b1a1e 45%,#050c0f 100%); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:40px 30px; }
#s10 .s10__bg { position:absolute; top:0;right:0;bottom:0;left:0;inset:0; width:100%; height:100%; object-fit:cover; opacity:.22; z-index:0; }
#s10 .s10__veil { position:absolute; top:0;right:0;bottom:0;left:0;inset:0; background:linear-gradient(180deg, rgba(8,18,26,.5), rgba(4,10,14,.72)); z-index:1; }
#s10 .stars { position:absolute; top:0;right:0;bottom:0;left:0;inset:0; z-index:1; pointer-events:none; }
#s10 .star { position:absolute; background:#eaf6f5; border-radius:50%; opacity:.35; box-shadow:0 0 4px rgba(200,240,238,.7); animation:s10_tw 3.5s ease-in-out infinite; }
@keyframes s10_tw { 0%,100%{opacity:.12;} 50%{opacity:.85;} }
#s10 .evenglow { position:absolute; top:34%; left:50%; width:420px; height:420px; transform:translate(-50%,-50%); z-index:1; pointer-events:none;
    background:radial-gradient(circle, rgba(0,196,191,.14) 0%, rgba(0,140,136,.06) 40%, transparent 68%); animation:s10_drift 9s ease-in-out infinite; }
@keyframes s10_drift { 0%,100%{ transform:translate(-58%,-52%) scale(1);} 50%{ transform:translate(-42%,-48%) scale(1.12);} }
#s10 .content { position:relative; z-index:3; display:flex; flex-direction:column; align-items:center; width:100%; will-change:transform,opacity; }
#s10 .s10__title { color:#fff; font-size:1.5rem; font-weight:900; text-align:center; margin-bottom:6px; text-shadow:0 0 20px rgba(0,196,191,.25); }
#s10 .s10__rule { width:52px; height:3px; background:var(--teal); border-radius:2px; margin-bottom:26px; }
#s10 .warrs { display:flex; flex-direction:column; gap:16px; width:100%; max-width:330px; }
#s10 .warr { display:flex; align-items:center; gap:11px; }
#s10 .warr__check { flex:0 0 auto; color:var(--gold); font-size:1.05rem; font-weight:900; }
#s10 .warr__body { color:#eef3f2; font-size:1.06rem; font-weight:600; white-space:nowrap;
    --xt:100; --xb:100;
    clip-path: polygon(calc(var(--xt) * 1%) 0, 100% 0, 100% 100%, calc(var(--xb) * 1%) 100%); }
#s10 .warr__body .num { color:var(--teal); font-weight:900; font-size:1.22rem; }
@media (prefers-reduced-motion: reduce) {#s10 .star, #s10 .evenglow { animation:none; }}

/* ===== s11 ===== */
#s11 { --teal:#00c4bf; }
#s11 { height:var(--appvh,100vh); position:relative; overflow:hidden; background:#ffffff; }
#s11 .mapwrap { position:absolute; top:0;right:0;bottom:0;left:0;inset:0; z-index:1; will-change:transform,opacity; transform-origin:center center; }
#s11 .mapwrap img { width:100%; height:100%; object-fit:cover; object-position:center; }
#s11 .mapicon { position:absolute; top:50%; left:50%; width:150px; height:auto; transform:translate(-50%,-50%); z-index:3; will-change:transform,opacity; }
#s11 .clickring { position:absolute; top:50%; left:50%; width:70px; height:70px; transform:translate(-50%,-50%); border:3px solid var(--teal); border-radius:50%; z-index:4; will-change:transform,opacity; pointer-events:none; }
#s11 .cursor { position:absolute; top:50%; left:50%; width:34px; z-index:6; will-change:transform,opacity; filter:drop-shadow(0 3px 5px rgba(0,0,0,.45)); }
#s11 .centermark { position:absolute; top:50%; left:50%; width:26px; height:26px; transform:translate(-50%,-50%); z-index:5; will-change:opacity; }
#s11 .centermark::before, #s11 .centermark::after { content:''; position:absolute; top:0;right:0;bottom:0;left:0;inset:0; border-radius:50%; border:2.5px solid var(--teal); }
#s11 .centermark::after { animation:s11_ping 1.8s ease-out infinite; }
@keyframes s11_ping { 0%{ transform:scale(1); opacity:.9; } 100%{ transform:scale(3.4); opacity:0; } }
#s11 .cta { position:absolute; bottom:112px; left:50%; transform:translateX(-50%); z-index:7; display:flex; flex-direction:column; align-items:center; gap:8px; text-decoration:none; will-change:transform,opacity; }
#s11 .cta__arrow { color:var(--teal); font-size:1.5rem; line-height:1; animation:s11_bob 1.4s ease-in-out infinite; text-shadow:0 0 12px rgba(0,196,191,.6); }
@keyframes s11_bob { 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-7px);} }
#s11 .cta__btn { background:var(--teal); color:#04211f; font-weight:900; font-size:1.02rem; padding:14px 22px; border-radius:999px; box-shadow:0 10px 30px rgba(0,196,191,.4); white-space:nowrap; }
@media (prefers-reduced-motion: reduce) {#s11 .centermark::after, #s11 .cta__arrow { animation:none; }}

/* ===== s13 ===== */
#s13 { --teal:#00c4bf; --ink:#0f1e28; --bg:#fbfbf9; }
#s13 { height:var(--appvh,100vh); position:relative; overflow:hidden; background:var(--bg); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:44px 32px; }
#s13 .s13__bg { position:absolute; top:0;right:0;bottom:0;left:0;inset:0; width:100%; height:100%; object-fit:cover; opacity:.30; z-index:0; }
#s13 .s13__veil { position:absolute; top:0;right:0;bottom:0;left:0;inset:0; background:linear-gradient(180deg, rgba(251,251,249,.20), rgba(251,251,249,.34)); z-index:1; }
#s13 .content { position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; width:100%; }
#s13 .s13__title { color:var(--ink); font-size:1.6rem; font-weight:900; text-align:center; margin-bottom:8px; will-change:transform,opacity; }
#s13 .s13__rule { width:52px; height:3px; background:var(--teal); border-radius:2px; margin-bottom:30px; transform-origin:center; will-change:transform; }
#s13 .readylist { display:flex; flex-direction:column; gap:16px; width:100%; align-items:center; margin-bottom:34px; }
#s13 .line { text-align:center; direction:rtl; font-size:1.2rem; font-weight:700; color:var(--ink); line-height:1.5; will-change:transform,opacity; }
#s13 .price { display:flex; flex-direction:row-reverse; align-items:center; justify-content:center; gap:10px; direction:ltr; will-change:transform,opacity; }
#s13 .price__num { font-size:2.7rem; font-weight:900; color:var(--teal); letter-spacing:-1px; font-variant-numeric:tabular-nums; }
#s13 .price__riyal { width:36px; height:36px; display:flex; align-items:center; }
#s13 .price__riyal svg { width:100%; height:auto; display:block; }
#s13 .price__riyal svg path { fill:var(--teal) !important; }
@media (prefers-reduced-motion: reduce) {}

/* ===== s14 ===== */
#s14 { --teal:#00c4bf; --wa:#25D366; --bg:#fbfbf9; --ink:#0f1e28; }
#s14 { height:var(--appvh,100vh); position:relative; overflow:hidden; background:var(--bg); }
#s14 .s14__bg { position:absolute; top:0;right:0;bottom:0;left:0;inset:0; width:100%; height:100%; object-fit:cover; opacity:.30; z-index:0; }
#s14 .s14__veil { position:absolute; top:0;right:0;bottom:0;left:0;inset:0; background:linear-gradient(180deg, rgba(251,251,249,.20), rgba(251,251,249,.34)); z-index:1; }
#s14 .glow { display:none; }
#s14 .fabanchor { position:absolute; right:18px; bottom:100px; width:60px; height:60px; z-index:0; opacity:0; pointer-events:none; }
#s14 .wa { position:absolute; top:40%; left:50%; transform:translate(-50%,-50%); z-index:7;
    display:inline-flex; align-items:center; background:var(--wa); border-radius:999px; padding:15px;
    box-shadow:0 12px 34px rgba(37,211,102,.5); text-decoration:none; white-space:nowrap; will-change:transform; }
#s14 .waicon { width:30px; height:30px; flex:0 0 auto; display:block; }
#s14 .watext { color:#fff; font-weight:800; font-size:1.04rem; overflow:hidden; margin-inline-start:0; }
#s14 .ordertext { position:absolute; left:50%; bottom:150px; transform:translateX(-50%); z-index:7;
    color:var(--ink); font-weight:700; font-size:1.06rem; text-align:center; width:310px; line-height:1.5;
    will-change:transform,opacity; }
#s14 .orderarrow { position:absolute; left:50%; bottom:110px; transform:translateX(-50%); z-index:8;
    color:var(--teal); font-size:2.1rem; line-height:1; filter:drop-shadow(0 0 10px rgba(0,196,191,.7)); will-change:transform,opacity; }
#s14 .orderring { position:absolute; z-index:10; border:2.5px solid var(--teal); border-radius:50%;
    width:52px; height:52px; will-change:transform,opacity; }
#s14 .orderring::after { content:''; position:absolute; inset:-2.5px; border-radius:50%; border:2.5px solid var(--teal); animation:s14_ping 1.7s ease-out infinite; }
@keyframes s14_ping { 0%{ transform:scale(1); opacity:.85; } 100%{ transform:scale(1.7); opacity:0; } }
#s14 .bottombar { position:absolute; left:0; right:0; bottom:0; z-index:9;
    background:rgba(255,255,255,.96); backdrop-filter:blur(8px); border-top:1px solid #eef0f1;
    border-radius:18px 18px 0 0; box-shadow:0 -4px 20px rgba(0,0,0,.06); }
#s14 .bottombar__row { display:flex; justify-content:space-between; align-items:center; padding:10px 34px 26px; }
#s14 .bb { display:flex; flex-direction:column; align-items:center; gap:5px; width:48px; color:#20303a; text-decoration:none; }
#s14 .bb span { font-size:10px; font-weight:800; }
#s14 .bb__ic { width:24px; height:24px; display:block; }
#s14 .bb--order { color:var(--teal); }
@media (prefers-reduced-motion: reduce) {#s14 .orderring::after { animation:none; }}