@import url('https://fonts.googleapis.com/css2?family=El+Messiri:wght@400;500;600;700&family=Tajawal:wght@300;400;500;700;800&family=Sora:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap'); *{margin:0;padding:0;box-sizing:border-box} /* ── Light / daytime theme — matches the mobile app identity ── */ :root{ --cream:#F3E9D2;--cream2:#EFE3C8;--surface:#FBF7EE; --navy:#16263F;--navy2:#1B2E4A; --gold:#C9A227;--gold-bright:#E3C04A;--gold-deep:#A8851C; --ink:#16263F;--dim:#6A7686;--faint:#9AA7B5; --line:#E4D9BF;--line-gold:rgba(201,162,39,0.3); --shadow:0 12px 30px rgba(22,38,63,.12);--shadow-lg:0 30px 66px rgba(22,38,63,.22) } html{scroll-behavior:smooth;overflow-x:hidden;max-width:100%} body{font-family:'Tajawal',sans-serif;background:var(--cream);color:var(--ink);overflow-x:hidden;max-width:100%} h1,h2,h3,h4,.sec-head h2,.cf-slide h3,.band h2{font-family:'El Messiri','Tajawal',sans-serif} /* Per-language fonts + LTR mirroring (toggle sets ) */ html[lang="en"] body{font-family:'Inter',sans-serif} html[lang="en"] h1,html[lang="en"] h2,html[lang="en"] h3,html[lang="en"] h4,html[lang="en"] .cf-slide h3,html[lang="en"] .band h2{font-family:'Sora','Inter',sans-serif} html[lang="en"] .hero h1 .en{font-family:'Tajawal',sans-serif;letter-spacing:0} html[dir="rtl"] .eyebrow{letter-spacing:0} html[dir="ltr"] .cf-slide li{padding-right:0;padding-left:28px} html[dir="ltr"] .cf-slide li::before{right:auto;left:0} html[dir="ltr"] .gcard{text-align:left} html[dir="ltr"] .cf-prev{right:auto;left:6px} html[dir="ltr"] .cf-next{left:auto;right:6px} .lang-toggle{background:transparent;border:1px solid var(--line-gold);color:var(--gold-deep);font-family:inherit;font-size:13px;font-weight:700;letter-spacing:.5px;padding:6px 13px;border-radius:999px;cursor:pointer;transition:background .3s,border-color .3s,transform .3s} .lang-toggle:hover{border-color:var(--gold);background:rgba(201,162,39,.1);transform:translateY(-1px)} /* Ambient pharaonic motifs (faint gold on cream) */ .amb{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden;transform:translate3d(var(--px,0px),calc(var(--py,0px) + var(--sy,0px)),0);transition:transform .45s ease-out;will-change:transform} .amb-far .motif{opacity:0} .motif{position:absolute;bottom:-14%;left:var(--x);width:var(--s);height:var(--s);color:var(--gold);opacity:0;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;animation:floatUp 34s linear var(--d) infinite;will-change:transform,opacity} @keyframes floatUp{0%{transform:translateY(0) rotate(-4deg);opacity:0}14%{opacity:.18}86%{opacity:.18}100%{transform:translateY(-124vh) rotate(6deg);opacity:0}} .ankh-ico{color:var(--gold);stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round} .veil{position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(900px 600px at 50% 0%,rgba(201,162,39,0.06),transparent 60%),radial-gradient(700px 520px at 50% 100%,rgba(201,162,39,0.04),transparent 55%)} .content{position:relative;z-index:2} /* Section title gold underline */ .sec-head h2,.band h2{position:relative} .sec-head h2::after,.band h2::after{content:"";display:block;width:64px;height:3px;margin:16px auto 0;border-radius:999px;background:linear-gradient(90deg,transparent,var(--gold),var(--gold-bright))} nav{position:fixed;top:0;left:0;right:0;z-index:30;display:flex;align-items:center;justify-content:space-between;padding:14px 28px;background:rgba(243,233,210,0.86);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)} nav .brand{display:flex;align-items:center;gap:11px;line-height:1} nav .brand img{width:40px;height:40px;display:block;object-fit:contain} nav .brand span{font-weight:700;font-size:18px;color:var(--ink);line-height:1;display:flex;align-items:center} nav .navlinks{display:flex;gap:24px;align-items:center} nav .navlinks a:not(.btn-download){color:var(--ink);text-decoration:none;font-size:15px;font-weight:500;transition:color .3s} nav .navlinks a:not(.btn-download):hover{color:var(--gold-deep)} @media(max-width:760px){nav .navlinks a:not(.btn-download){display:none}} /* Gilded download CTA — gold fill, navy text (consistent nav + hero + band) */ .btn-download{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:10px;background:linear-gradient(135deg,#E3C04A 0%,#C9A227 52%,#A8851C 100%);color:#16263F;font-family:'Tajawal',sans-serif;font-weight:800;font-size:16px;border-radius:999px;padding:13px 30px;text-decoration:none;box-shadow:0 8px 22px rgba(201,162,39,.32),inset 0 1px 0 rgba(255,255,255,.45);transition:transform .3s,box-shadow .3s} .btn-download:hover{transform:translateY(-3px);box-shadow:0 16px 38px rgba(201,162,39,.45),inset 0 1px 0 rgba(255,255,255,.45)} .btn-download svg{width:20px;height:20px;fill:#16263F;position:relative;z-index:1} .btn-download .label{position:relative;z-index:1} .btn-download .shine{position:absolute;top:0;bottom:0;left:-40%;width:34%;transform:skewX(-18deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);transition:left .6s ease;pointer-events:none} .btn-download:hover .shine{left:135%} .btn-download.nav{padding:9px 22px;font-size:14px} .hero{position:relative;overflow:hidden;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:96px 24px} .hero .logo{width:clamp(120px,20vw,170px);height:auto;filter:drop-shadow(0 24px 26px rgba(22,38,63,.32)) drop-shadow(0 0 36px rgba(201,162,39,.32));opacity:0;animation:floatIn 1.4s ease-out forwards,float 5.5s ease-in-out 1.4s infinite} @keyframes floatIn{from{opacity:0;transform:translateY(24px) scale(.94)}to{opacity:1;transform:translateY(0) scale(1)}} @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-20px)}} .hero .eyebrow{color:var(--gold-deep);letter-spacing:6px;font-size:14px;font-weight:600;margin-top:28px;opacity:0;animation:fadeUp 1s .6s forwards} .hero h1{font-weight:700;font-size:clamp(32px,5.4vw,58px);margin-top:20px;line-height:1.1;opacity:0;animation:fadeUp 1s .9s forwards;color:var(--ink)} .hero h1>span:first-child{font-family:'Sora','Inter',sans-serif;letter-spacing:.5px;background:linear-gradient(120deg,#A8851C 0%,#C9A227 38%,#E3C04A 60%,#C9A227 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--gold)} .hero h1 .en{display:block;font-family:'El Messiri','Tajawal',sans-serif;font-weight:600;font-size:clamp(17px,2.3vw,23px);letter-spacing:0;color:#46566B;margin-top:9px;-webkit-text-fill-color:initial} .hero .tagline{color:var(--dim);font-size:clamp(15px,1.8vw,18px);font-weight:400;margin-top:20px;max-width:560px;line-height:1.9;opacity:0;animation:fadeUp 1s 1.2s forwards} .hero .seal{width:130px;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);margin:34px auto;opacity:0;animation:fadeUp 1s 1.4s forwards} .cta-row{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;align-items:center;opacity:0;animation:fadeUp 1s 1.6s forwards} .btn{display:inline-flex;align-items:center;gap:10px;padding:14px 32px;border-radius:999px;font-family:'Tajawal';font-size:16px;font-weight:600;text-decoration:none;transition:all .3s;cursor:pointer;border:none} .btn-ghost{border:1.5px solid var(--navy);color:var(--navy);background:transparent} .btn-ghost:hover{background:var(--navy);color:var(--cream);transform:translateY(-3px)} @keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}} .stats{position:relative;z-index:3;display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(20px,3.4vw,40px);padding:34px clamp(22px,4vw,44px);background:var(--surface);max-width:1020px;margin:-58px auto 0;border-radius:22px;border:1px solid var(--line);box-shadow:var(--shadow-lg)} .stat{text-align:center} .stat .n{font-family:'Sora','Inter',sans-serif;font-size:clamp(34px,6vw,54px);color:var(--gold-deep);font-weight:700;line-height:1} .stat .l{color:var(--dim);font-size:15px;margin-top:8px} .sec-head{text-align:center;max-width:680px;margin:0 auto clamp(36px,5vw,52px);padding:0 8px} .sec-head .eyebrow{color:var(--gold-deep);letter-spacing:4px;font-size:13px;font-weight:700} .sec-head h2{font-weight:700;font-size:clamp(28px,5vw,46px);margin:12px 0;line-height:1.25;color:var(--ink)} .sec-head p{color:var(--dim);font-size:clamp(15px,2vw,18px);line-height:1.8} .cats,.grid-sec,.showcase{padding:clamp(60px,8vw,100px) 24px} .gcard,.cat{will-change:transform} .cat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:18px;max-width:1000px;margin:0 auto} .cat{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:30px 18px;text-align:center;box-shadow:var(--shadow);transition:transform .3s,box-shadow .3s,border-color .3s} .cat:hover{transform:translateY(-9px);border-color:var(--line-gold);box-shadow:var(--shadow-lg)} .cat .ic{display:flex;justify-content:center;align-items:center;margin-bottom:14px} .cat .ic svg{width:34px;height:34px;color:var(--gold);fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .cat h4{font-size:16px;font-weight:700;color:var(--ink)} /* ── 3D Coverflow carousel ── */ .coverflow{position:relative;max-width:1180px;margin:0 auto} .cf-viewport{position:relative;height:var(--cf-h,560px);perspective:1600px;overflow:hidden} .cf-track{position:relative;width:100%;height:100%;transform-style:preserve-3d} .cf-slide{position:absolute;top:50%;left:50%;width:min(860px,88%);opacity:0;transition:transform .7s cubic-bezier(.22,.61,.36,1),opacity .7s ease;backface-visibility:hidden;will-change:transform,opacity} .cf-slide .card{display:flex;align-items:center;gap:clamp(28px,5vw,56px);background:var(--surface);border:1px solid var(--line);border-radius:28px;padding:clamp(22px,4vw,44px);flex-wrap:wrap;justify-content:center;box-shadow:var(--shadow-lg)} .cf-slide .text{flex:1 1 320px;min-width:260px} .cf-slide .eyebrow{color:var(--gold-deep);letter-spacing:4px;font-size:13px;font-weight:700} .cf-slide h3{font-weight:700;font-size:clamp(24px,3.4vw,38px);margin:12px 0;line-height:1.3;color:var(--ink)} .cf-slide ul{list-style:none;margin-top:16px} .cf-slide li{color:var(--dim);font-size:clamp(15px,1.8vw,17px);margin:10px 0;padding-right:28px;position:relative;line-height:1.7} .cf-slide li::before{content:'✦';position:absolute;right:0;color:var(--gold);font-size:14px} .cf-slide .visual{flex:0 0 auto;display:flex;justify-content:center} .phone{width:240px;max-width:62vw;border-radius:38px;background:#16263F;padding:10px;box-shadow:0 24px 60px rgba(22,38,63,.28),0 0 0 1.5px rgba(201,162,39,0.28)} .phone img{width:100%;height:auto;aspect-ratio:9/19.5;object-fit:cover;border-radius:29px;display:block} .cf-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:20;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.85);backdrop-filter:blur(6px);color:var(--gold-deep);font-size:24px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .3s,transform .3s;box-shadow:var(--shadow)} .cf-arrow:hover{background:#fff;transform:translateY(-50%) scale(1.06)} .cf-prev{right:6px}.cf-next{left:6px} .cf-dots{display:flex;gap:10px;justify-content:center;margin-top:26px} .cf-dot{width:9px;height:9px;border-radius:50%;border:none;background:rgba(201,162,39,.3);cursor:pointer;padding:0;transition:all .3s} .cf-dot.active{background:linear-gradient(135deg,var(--gold),var(--gold-bright));width:26px;border-radius:5px} .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)} .reveal.in{opacity:1;transform:none} .cat-grid .cat,.grid .gcard,.steps .step{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease,border-color .3s ease,box-shadow .3s ease} .reveal.in .cat,.reveal.in .gcard,.reveal.in .step{opacity:1;transform:none} .reveal.in :nth-child(2){transition-delay:.07s}.reveal.in :nth-child(3){transition-delay:.14s} .reveal.in :nth-child(4){transition-delay:.21s}.reveal.in :nth-child(5){transition-delay:.28s}.reveal.in :nth-child(6){transition-delay:.35s} .band{padding:clamp(56px,8vw,96px) 24px;text-align:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:linear-gradient(180deg,var(--surface),var(--cream2));box-shadow:inset 0 10px 30px rgba(22,38,63,.05),inset 0 -10px 30px rgba(22,38,63,.05)} .band .glyph{display:flex;justify-content:center} .band h2{font-weight:700;font-size:clamp(26px,4.5vw,44px);margin:18px auto;max-width:760px;line-height:1.4;color:var(--ink)} .band p{color:var(--dim);font-size:clamp(15px,2vw,18px);max-width:600px;margin:0 auto;line-height:1.8} .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px;max-width:1000px;margin:0 auto} .step{text-align:center;padding:20px} .step .num{width:56px;height:56px;border-radius:50%;border:1.5px solid var(--gold);color:var(--gold-deep);display:flex;align-items:center;justify-content:center;font-family:'El Messiri',serif;font-size:26px;font-weight:700;margin:0 auto 18px;background:rgba(201,162,39,.07)} .step h3{font-size:20px;font-weight:700;margin-bottom:8px;color:var(--ink)} .step p{color:var(--dim);font-size:15px;line-height:1.7} .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px} .gcard{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:32px 26px;text-align:right;box-shadow:var(--shadow);transition:transform .3s,box-shadow .3s,border-color .3s} .gcard:hover{transform:translateY(-10px);border-color:var(--line-gold);box-shadow:var(--shadow-lg)} .gcard .ic{width:54px;height:54px;border-radius:14px;background:rgba(201,162,39,0.1);display:flex;align-items:center;justify-content:center;margin-bottom:18px} .gcard .ic svg{stroke:var(--gold)!important} .gcard h3{font-size:21px;font-weight:700;margin-bottom:8px;color:var(--ink)} .gcard p{color:var(--dim);font-size:15px;line-height:1.7} .download-band{position:relative;overflow:hidden;text-align:center;padding:clamp(64px,11vw,120px) 24px;background:linear-gradient(180deg,var(--cream2) 0%,var(--surface) 100%);color:var(--ink);border-top:1px solid var(--line)} .download-band::before{content:"";position:absolute;inset:0;background:radial-gradient(680px 320px at 50% 0%,rgba(201,162,39,.12),transparent 70%);pointer-events:none} .download-band>*{position:relative;z-index:1} .download-band .sec-amb{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0} .download-band .sec-amb svg{position:absolute;color:var(--gold);opacity:.16;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round} .download-band .logo-sm{width:84px;height:auto;filter:drop-shadow(0 10px 22px rgba(201,162,39,.35));margin-bottom:20px} .download-band h2{font-weight:700;font-size:clamp(28px,5vw,48px);margin-bottom:14px;color:var(--ink)} .download-band p{font-size:clamp(15px,2vw,18px);max-width:520px;margin:0 auto 28px;line-height:1.8;color:var(--dim)} .download-band .os-note{font-size:14px;margin-top:18px;color:var(--faint)} /* Footer — deep navy anchor on the light page */ footer{padding:54px 24px 40px;background:var(--navy);color:#E8EEF5} .foot-grid{max-width:1000px;margin:0 auto;display:flex;justify-content:space-between;flex-wrap:wrap;gap:30px;align-items:flex-start} .foot-brand{display:flex;align-items:center;gap:12px} .foot-brand img{width:46px;height:auto} .foot-brand .fb-name{font-weight:700;font-size:18px;color:#FFFFFF} .foot-brand .fb-sub{color:#9FB0C2;font-size:13px;margin-top:2px} .foot-tag{color:#9FB0C2!important} .foot-links{display:flex;gap:40px;flex-wrap:wrap} .foot-col h5{color:var(--gold-bright);font-size:14px;margin-bottom:12px;font-weight:700} .foot-col a{display:block;color:#C4D0DD;text-decoration:none;font-size:14px;margin:8px 0;transition:color .3s} .foot-col a:hover{color:var(--gold-bright)} .foot-bottom{max-width:1000px;margin:30px auto 0;padding-top:24px;border-top:1px solid rgba(255,255,255,.12);text-align:center;color:#9FB0C2;font-size:13px;line-height:1.8} /* ── Depth: hero gold dust + faint section watermarks (premium, restrained) ── */ .hero>*{position:relative;z-index:2} .dust{position:absolute;inset:0;pointer-events:none;z-index:1} .dust span{position:absolute;left:var(--x);top:var(--y);width:6px;height:6px;border-radius:50%;background:radial-gradient(circle,rgba(227,192,74,.9),rgba(227,192,74,0) 70%);opacity:0;animation:dust var(--t,9s) ease-in-out var(--d,0s) infinite;will-change:transform,opacity} @keyframes dust{0%{opacity:0;transform:translateY(10px) scale(.5)}45%{opacity:.5;transform:translateY(-8px) scale(1)}100%{opacity:0;transform:translateY(-28px) scale(.5)}} @media(max-width:640px){.dust span:nth-child(n+5){display:none}.amb .motif:nth-child(2n){display:none}} .cats,.grid-sec,.band{position:relative;overflow:hidden} .sec-watermark{position:absolute;pointer-events:none;color:var(--gold);opacity:.17;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;z-index:0} .cats>:not(.sec-watermark),.grid-sec>:not(.sec-watermark),.band>:not(.sec-watermark){position:relative;z-index:1} /* ── Responsive: 1024 / 760 / 640 / 480 / 360 ── */ @media(max-width:1024px){.cf-slide{width:min(720px,92%)}} @media(max-width:760px){.hero{padding:96px 22px}.cf-arrow{width:40px;height:40px;font-size:20px}} @media(max-width:640px){ .cf-slide .card{flex-direction:column;text-align:center;gap:24px;justify-content:flex-start;padding:26px 20px;overflow:auto} .cf-slide .text{flex-basis:100%;min-width:0} .cf-slide ul{display:inline-block;text-align:right} .cf-arrow{display:none} .phone{width:200px} .foot-grid{flex-direction:column} .cat-grid{grid-template-columns:repeat(2,1fr)} } @media(max-width:480px){ nav{padding:12px 18px} .hero{padding:88px 18px} .hero .eyebrow{letter-spacing:4px} .stats{gap:24px 30px;padding:28px 18px;margin-top:-36px;border-radius:18px} .cats,.grid-sec,.showcase,.band,.download-band{padding-left:18px;padding-right:18px} .cta-row .btn-download,.cta-row .btn{width:100%;justify-content:center} .grid{grid-template-columns:1fr} } @media(max-width:360px){.cat-grid{grid-template-columns:1fr}.stat .n{font-size:32px}} @media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal,.cat-grid .cat,.grid .gcard,.steps .step{opacity:1;transform:none}.hero .logo,.hero .eyebrow,.hero h1,.hero .tagline,.hero .seal,.cta-row{opacity:1!important;transform:none!important}.amb,.dust{display:none}.cf-slide{transition:opacity .25s ease}}