:root{--ease-out:cubic-bezier(.22,1,.36,1);--amber-ink:#8A5A00;--ink:#1D1D27;--ink-soft:#65657A;--crimson:#D94058;--crimson-dark:#B8324A;--crimson-soft:#FBE3E8;--amber:#F5A623;--amber-light:#FFEFCB;--cream:#F4F4F6;--cream-dark:#EBEBEF;--green:#0B766E;--green-light:#D7F1EE;--text:#1D1D27;--text-muted:#65657A;--error:#B3261E;--white:#fff;--shadow-sm:0 2px 8px rgba(29,29,39,0.08);--shadow-md:0 8px 30px rgba(29,29,39,0.12);--shadow-lg:0 20px 60px rgba(29,29,39,0.18);--radius:16px;--radius-lg:24px;color-scheme:light}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter','Noto Sans Arabic',sans-serif;background:var(--white);color:var(--text);line-height:1.7;overflow-x:hidden}
h1,h2,h3,h4,h5,h6{font-family:'Plus Jakarta Sans','Noto Kufi Arabic',sans-serif}
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:var(--cream-dark)}
::-webkit-scrollbar-thumb{background:var(--crimson);border-radius:4px}
::selection{background:var(--crimson);color:var(--white)}
#progress{position:fixed;top:0;inset-inline-start:0;height:3px;background:linear-gradient(90deg,var(--crimson),var(--amber));z-index:3000;width:0;transition:width .1s linear}
#backTop{position:fixed;bottom:26px;inset-inline-end:26px;width:48px;height:48px;background:var(--ink);color:var(--white);border:none;border-radius:14px;cursor:pointer;font-size:1.05rem;z-index:1500;opacity:0;transform:translateY(20px);pointer-events:none;transition:all .4s;box-shadow:var(--shadow-md);display:flex;align-items:center;justify-content:center}
#backTop.show{opacity:1;transform:translateY(0);pointer-events:all}
#backTop:hover{background:var(--crimson)}
@keyframes fadeInUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-15px)}}
@keyframes blob{0%,100%{border-radius:60% 40% 30% 70%/60% 30% 70% 40%}50%{border-radius:30% 60% 70% 40%/50% 60% 30% 60%}}
@keyframes rotate{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.animate-on-scroll{opacity:0}
.animate-on-scroll.visible{opacity:1;animation:reveal .75s var(--ease-out) backwards;animation-delay:var(--d,0ms)}
@keyframes reveal{from{opacity:0;transform:translateY(24px)}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* Icons (inline SVG sprite) */
.icon{width:1em;height:1em;display:inline-block;vertical-align:-0.15em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.icon-solid{fill:currentColor;stroke:none}
.star-half{position:relative;display:inline-block;width:1em;height:1em;vertical-align:-0.15em}
.star-half .icon{position:absolute;inset:0;width:100%;height:100%}
.star-half-fill{clip-path:inset(0 50% 0 0)}

/* Navbar */
.navbar{position:fixed;top:0;left:0;right:0;z-index:1000;padding:16px 0;transition:all .4s ease}
.navbar.scrolled{background:rgba(255,255,255,.95);backdrop-filter:blur(20px);box-shadow:var(--shadow-sm);padding:12px 0}
.nav-container{max-width:1200px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;transition:opacity .3s}
.logo:hover{opacity:.8}
.logo-icon{width:118px;height:42px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.logo-icon img{width:100%;height:100%;object-fit:contain}
.nav-links{display:flex;gap:22px;list-style:none;margin-inline-start:auto;flex-wrap:nowrap;flex-shrink:0}
.nav-links a{text-decoration:none;color:var(--text);font-weight:600;font-size:.95rem;position:relative;transition:color .3s;white-space:nowrap}
.nav-links a::after{content:'';position:absolute;bottom:-4px;inset-inline-start:0;width:0;height:2px;background:var(--crimson);transition:width .3s;border-radius:2px}
.nav-links a:hover,.nav-links a.active{color:var(--crimson)}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.nav-cta{display:flex;gap:12px;align-items:center;flex-shrink:0}
.btn{padding:12px 28px;border-radius:50px;font-family:'Inter','Noto Sans Arabic',sans-serif;font-weight:700;font-size:.9rem;cursor:pointer;border:none;transition:all .3s ease;text-decoration:none;display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.btn-primary{background:var(--crimson);color:var(--white);box-shadow:0 4px 15px rgba(217,64,88,.3)}
.btn-primary:hover{background:var(--crimson-dark);transform:translateY(-2px);box-shadow:0 8px 25px rgba(217,64,88,.4)}
.btn-amber{background:var(--crimson);color:var(--white);box-shadow:0 4px 15px rgba(217,64,88,.3)}
.btn-amber:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(217,64,88,.4)}
.btn-outline{background:transparent;color:var(--ink);border:2px solid var(--ink)}
.btn-outline:hover{background:var(--ink);color:var(--white)}
.btn-ghost{background:transparent;color:var(--text)}
.btn-ghost:hover{background:var(--cream-dark)}
.btn-lg{padding:16px 40px;font-size:1.05rem}
.btn:focus-visible,.faq-question:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--crimson);outline-offset:2px}
.mobile-menu-btn{display:none;background:none;border:none;font-size:1.5rem;color:var(--ink);cursor:pointer}

/* Language switcher */
.lang-switch{display:flex;background:var(--cream-dark);border-radius:50px;padding:4px;gap:2px}
.lang-switch button{background:none;border:none;font-family:'Inter','Noto Sans Arabic',sans-serif;font-weight:700;font-size:.78rem;color:var(--text-muted);padding:6px 12px;border-radius:50px;cursor:pointer;transition:all .3s}
.lang-switch button:hover{color:var(--ink)}
.lang-switch button.active{background:var(--crimson);color:var(--white)}

/* Hero */
.hero{min-height:100vh;background:var(--cream);position:relative;overflow:hidden;display:flex;align-items:center;padding-top:80px}
.hero-bg-pattern{position:absolute;inset:0;opacity:.04;background-image:radial-gradient(circle at 2px 2px,var(--ink) 1px,transparent 0);background-size:40px 40px}
.hero-blob{position:absolute;width:600px;height:600px;background:var(--crimson);opacity:.06;border-radius:60% 40% 30% 70%/60% 30% 70% 40%;top:-100px;left:-100px}
.hero-blob-2{position:absolute;width:400px;height:400px;background:var(--amber);opacity:.1;border-radius:30% 60% 70% 40%/50% 60% 30% 60%;bottom:-50px;right:-50px}
.hero-container{max-width:1200px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;position:relative;z-index:1}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:var(--white);padding:8px 20px;border-radius:50px;font-size:.85rem;font-weight:600;color:var(--crimson);box-shadow:var(--shadow-sm);margin-bottom:24px;animation:fadeInUp .6s ease}
.hero-badge .icon{color:var(--green)}
.hero-title{font-size:3.4rem;font-weight:700;line-height:1.25;color:var(--ink);margin-bottom:20px;animation:fadeInUp .6s ease .1s both;text-wrap:balance}
.hero-title .highlight{color:var(--crimson);position:relative}
.hero-title .highlight::after{content:'';position:absolute;bottom:4px;inset-inline-start:0;inset-inline-end:0;height:12px;background:var(--crimson-soft);z-index:-1;border-radius:4px}
.hero-desc{font-size:1.15rem;color:var(--text-muted);margin-bottom:32px;max-width:520px;animation:fadeInUp .6s ease .2s both}
.hero-cta{display:flex;gap:16px;flex-wrap:wrap;animation:fadeInUp .6s ease .3s both}
.hero-stats{display:flex;gap:40px;margin-top:48px;animation:fadeInUp .6s ease .4s both;flex-wrap:wrap}
.hero-stat{text-align:center}
.hero-stat-number{font-size:2rem;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.hero-stat-label{font-size:.85rem;color:var(--text-muted);font-weight:500}

/* Hero Visual — real app screenshots */
.hero-visual{position:relative;display:flex;justify-content:center;align-items:center;width:fit-content;margin-inline:auto}
.phone-mockup{width:290px;background:var(--ink);border-radius:40px;padding:10px;box-shadow:var(--shadow-lg);position:relative;z-index:2}
.phone-screen{width:100%;aspect-ratio:750/1630;background:var(--cream);border-radius:32px;overflow:hidden;position:relative}
.phone-screen img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.phone-notch{position:absolute;top:0;left:50%;transform:translateX(-50%);width:110px;height:24px;background:var(--ink);border-radius:0 0 14px 14px;z-index:10}
.floating-card{position:absolute;background:var(--white);border-radius:var(--radius);padding:14px 18px;box-shadow:var(--shadow-md);z-index:3;white-space:nowrap}
.floating-card.discount{top:12%;inset-inline-start:-30px;animation-delay:.5s}
.floating-card.discount .badge-discount{background:var(--crimson);color:var(--white);padding:4px 10px;border-radius:20px;font-size:.75rem;font-weight:700}
.floating-card.discount .floating-sub{margin-top:6px;font-size:.8rem;color:var(--text-muted)}
.floating-card.saving{bottom:16%;inset-inline-end:-30px;animation-delay:1s}
.floating-card.saving .amount{font-size:1.4rem;font-weight:800;color:var(--green);white-space:nowrap}
.floating-card.saving .label{font-size:.78rem;color:var(--text-muted);white-space:nowrap}

/* Sections */
.section{padding:100px 0;position:relative}
.section-header{text-align:center;max-width:640px;margin:0 auto 60px;padding:0 24px}
.section-label{display:inline-block;background:var(--crimson-soft);color:var(--crimson);padding:6px 18px;border-radius:50px;font-size:.85rem;font-weight:700;margin-bottom:16px}
.section-title{font-size:2.5rem;font-weight:700;color:var(--ink);margin-bottom:16px;line-height:1.3;text-wrap:balance}
.section-desc{color:var(--text-muted);font-size:1.05rem}

/* How it works */
.how-it-works{background:var(--white)}
.hiw-steps{max-width:1100px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:repeat(3,1fr);gap:40px;position:relative}
.hiw-steps::before{content:'';position:absolute;top:44px;inset-inline-start:15%;inset-inline-end:15%;height:2px;background:repeating-linear-gradient(90deg,var(--crimson) 0 8px,transparent 8px 16px);opacity:.3;z-index:0}
.step-card{background:var(--white);border-radius:var(--radius-lg);padding:36px 28px;text-align:center;position:relative;border:1px solid rgba(29,29,39,.06);transition:all .4s ease;z-index:1}
.step-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg);border-color:transparent}
.step-num{width:56px;height:56px;background:var(--crimson);color:var(--white);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.4rem;font-weight:800;margin:0 auto 22px;position:relative;box-shadow:0 0 0 8px var(--white);font-family:'Inter','Noto Sans Arabic',sans-serif}
.step-num::after{content:'';position:absolute;inset:-6px;border:2px dashed var(--crimson);border-radius:50%;opacity:.35;}
.step-icon{font-size:2.4rem;margin-bottom:18px;display:inline-block;color:var(--crimson)}
.step-card h3{font-size:1.25rem;font-weight:700;color:var(--ink);margin-bottom:10px}
.step-card p{color:var(--text-muted);font-size:.93rem}
.step-tag{display:inline-block;background:var(--green-light);color:var(--green);font-size:.68rem;font-weight:700;padding:3px 12px;border-radius:20px;margin-top:14px}

/* Environmental Impact */
.impact{background:linear-gradient(160deg,var(--ink) 0%,#232C5C 100%);color:var(--white);position:relative;overflow:hidden}
.impact .section-title{color:var(--white)}
.impact .section-desc{color:rgba(255,255,255,.7)}
.impact .section-label{background:rgba(217,64,88,.18);color:#FF7A85}
.impact-grid{max-width:1100px;margin:0 auto 32px;padding:0 24px;display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.impact-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:28px 18px;text-align:center;transition:all .3s}
.impact-card:hover{background:rgba(255,255,255,.1);transform:translateY(-6px);border-color:rgba(217,64,88,.45)}
.impact-card .icon{width:1.8rem;height:1.8rem;color:var(--amber);margin-bottom:12px}
.impact-num{font-size:1.6rem;font-weight:700;line-height:1.25;margin-bottom:8px;font-variant-numeric:tabular-nums}
.impact-label{color:rgba(255,255,255,.65);font-size:.83rem;line-height:1.5}
.impact-role{max-width:680px;margin:0 auto 18px;padding:0 24px;text-align:center;color:rgba(255,255,255,.85);font-size:1rem;line-height:1.9}
.impact-source{max-width:680px;margin:0 auto;padding:0 24px;text-align:center;color:rgba(255,255,255,.4);font-size:.75rem}
@media(max-width:1024px){.impact-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.impact-grid{grid-template-columns:1fr}}

/* For Merchants */
.for-merchants{background:var(--cream);overflow:hidden;position:relative}
.merchants-container{max-width:1200px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.merchants-content h3{font-size:1.8rem;font-weight:700;margin-bottom:20px;color:var(--ink)}
.merchants-features{list-style:none;margin-bottom:32px}
.merchants-features li{display:flex;align-items:flex-start;gap:14px;margin-bottom:18px;font-size:1rem;line-height:1.7}
.merchants-features li i{width:30px;height:30px;background:var(--crimson);color:var(--white);border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:.8rem;flex-shrink:0;font-style:normal;margin-top:2px}
.merchant-stats-row{display:flex;gap:16px;margin:28px 0 32px;flex-wrap:wrap}
.m-stat{flex:1;min-width:130px;background:var(--white);border-radius:16px;padding:18px;text-align:center;box-shadow:var(--shadow-sm);border:1px solid rgba(29,29,39,.05)}
.m-stat b{display:block;font-size:1.5rem;color:var(--crimson);font-weight:800;font-family:'Inter','Noto Sans Arabic',sans-serif}
.m-stat span{font-size:.75rem;color:var(--text-muted)}
.merchants-visual{position:relative}
.merchant-phone{width:270px;background:var(--ink);border-radius:38px;padding:10px;box-shadow:var(--shadow-lg);position:relative;z-index:2;margin:0 auto}
.m-screen{width:100%;aspect-ratio:750/1380;background:var(--white);border-radius:29px;overflow:hidden;position:relative}
.m-content{padding:30px 14px 16px;height:100%;overflow-y:auto;scrollbar-width:none}
.m-content::-webkit-scrollbar{width:0;height:0}
.m-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.m-header h4{font-size:.85rem;color:var(--ink)}
.m-header .m-avatar{width:30px;height:30px;background:var(--crimson);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--white);font-size:.7rem;font-weight:700;flex-shrink:0}
.m-stats-mini{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.m-stat-mini{background:var(--cream);border-radius:12px;padding:12px;text-align:center}
.m-stat-mini b{font-size:1.05rem;color:var(--ink);display:block;font-variant-numeric:tabular-nums}
.m-stat-mini span{font-size:.6rem;color:var(--text-muted)}
.m-offer-form{background:var(--white);border:1px solid rgba(29,29,39,.07);border-radius:14px;padding:12px;box-shadow:0 2px 10px rgba(29,29,39,.06)}
.m-offer-form h5{font-size:.75rem;color:var(--ink);margin-bottom:10px;display:flex;align-items:center;gap:6px}
.m-offer-form h5 .icon{color:var(--crimson);width:.8rem;height:.8rem}
.m-field{background:var(--cream-dark);border-radius:9px;padding:8px 10px;margin-bottom:7px;font-size:.68rem;color:var(--text-muted);display:flex;justify-content:space-between;gap:8px}
.m-field b{color:var(--ink);text-align:end}
.m-field .filled{color:var(--green);font-weight:700}
.m-publish{width:100%;background:var(--crimson);color:var(--white);border:none;border-radius:9px;padding:9px;font-family:'Inter','Noto Sans Arabic',sans-serif;font-weight:700;font-size:.72rem;margin-top:4px}
.earn-badge{position:absolute;bottom:14%;inset-inline-start:-30px;background:var(--white);border-radius:16px;padding:14px 18px;box-shadow:var(--shadow-md);z-index:3;white-space:nowrap}
.earn-badge .amount{font-size:1.4rem;font-weight:800;color:var(--green)}
.earn-badge .label{font-size:.72rem;color:var(--text-muted)}
.new-order-badge{position:absolute;top:10%;inset-inline-end:-25px;background:var(--white);border-radius:16px;padding:12px 16px;box-shadow:var(--shadow-md);z-index:3;display:flex;align-items:center;gap:10px;white-space:nowrap}
.new-order-badge .bell{width:34px;height:34px;background:var(--crimson-soft);border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--crimson);flex-shrink:0}
.new-order-badge .bell .icon{width:.9rem;height:.9rem}
.new-order-badge p{font-size:.72rem;color:var(--text-muted);line-height:1.4}
.new-order-badge p strong{color:var(--ink);display:block;font-size:.78rem}
@media(max-width:1024px){.earn-badge,.new-order-badge{position:static;margin:12px auto 0;animation:none;max-width:260px}}

/* Stats Bar */
.stats-bar{background:var(--cream-dark);padding:60px 0}
.stats-container{max-width:1200px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:repeat(4,1fr);gap:32px;text-align:center}
.stat-item{padding:20px}
.stat-item .icon{width:2rem;height:2rem;color:var(--crimson);margin-bottom:12px}
.stat-number{font-size:2.5rem;font-weight:800;color:var(--ink);line-height:1;font-variant-numeric:tabular-nums}
.stat-label{color:var(--text-muted);font-size:.95rem;margin-top:8px;font-weight:500}

/* Merchant onboarding strip */
.m-steps{background:var(--ink);padding:56px 0;border-top:1px solid rgba(255,255,255,.08)}
.m-steps-grid{max-width:1100px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.m-step{display:flex;align-items:center;gap:16px}
.m-step-icon{width:52px;height:52px;background:rgba(217,64,88,.15);border-radius:16px;display:flex;align-items:center;justify-content:center;color:#FF7A85;font-size:1.3rem;flex-shrink:0}
.m-step h5{color:var(--white);font-size:1rem;margin-bottom:2px}
.m-step p{color:rgba(255,255,255,.55);font-size:.8rem}
@media(max-width:768px){.m-steps-grid{grid-template-columns:1fr;gap:20px}}

/* Merchant Registration */
.merchant-register{background:var(--cream);position:relative;overflow:hidden}
.merchant-register::before{content:'';position:absolute;top:-80px;left:-80px;width:350px;height:350px;background:var(--crimson);opacity:.05;border-radius:50%}
.register-container{max-width:1080px;margin:0 auto;padding:0 24px;position:relative;z-index:1}
.register-card{background:var(--white);border-radius:var(--radius-lg);padding:52px;box-shadow:var(--shadow-md);display:grid;grid-template-columns:.9fr 1.1fr;gap:52px;align-items:start;position:relative;overflow:hidden}
.register-card::before{content:'';position:absolute;top:0;inset-inline-end:0;width:6px;height:100%;background:linear-gradient(180deg,var(--crimson),var(--amber))}
.register-info h3{font-size:1.6rem;font-weight:700;color:var(--ink);margin-bottom:16px}
.register-info p{color:var(--text-muted);margin-bottom:24px}
.register-benefits{list-style:none}
.register-benefits li{display:flex;align-items:center;gap:10px;margin-bottom:14px;font-size:.95rem}
.register-benefits li i{color:var(--green);font-size:1.1rem;font-style:normal;display:inline-flex}
.reg-steps{margin-top:30px;padding-top:26px;border-top:1px dashed rgba(29,29,39,.12)}
.reg-steps h6{font-size:.85rem;color:var(--ink);margin-bottom:14px;font-weight:700}
.reg-step{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-size:.85rem;color:var(--text-muted)}
.reg-step b{width:24px;height:24px;background:var(--crimson-soft);color:var(--crimson);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.72rem;flex-shrink:0;font-weight:700;font-family:'Inter','Noto Sans Arabic',sans-serif}
.form-group{margin-bottom:20px}
.form-group label{display:block;font-weight:600;font-size:.9rem;margin-bottom:8px;color:var(--ink)}
.form-group label .req{color:var(--error)}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:14px 18px;border:2px solid rgba(29,29,39,.08);border-radius:12px;font-family:'Inter','Noto Sans Arabic',sans-serif;font-size:.95rem;transition:all .3s;background:var(--white);color:var(--text)}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--crimson);box-shadow:0 0 0 4px rgba(217,64,88,.08)}
.form-group input.error,.form-group select.error{border-color:var(--error)}
.form-group .hint{font-size:.78rem;color:var(--text-muted);margin-top:6px}
.form-group .err-msg{font-size:.78rem;color:var(--error);margin-top:6px;display:none}
.form-group.has-error .err-msg{display:block}
.form-group.has-error input,.form-group.has-error select{border-color:var(--error)}
.form-group textarea{resize:vertical;min-height:100px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-submit{width:100%;margin-top:8px;justify-content:center}
.form-note{text-align:center;font-size:.8rem;color:var(--text-muted);margin-top:16px}
.form-note a{color:var(--crimson);font-weight:700}

/* Testimonials */
.testimonials{background:var(--white)}
.testimonials-grid{max-width:1200px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.testimonial-card{background:var(--cream);border-radius:var(--radius-lg);padding:32px;position:relative;transition:all .3s;min-width:0}
.testimonial-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.testimonial-quote{font-size:3rem;color:var(--crimson);line-height:1;margin-bottom:8px;opacity:.4;font-family:Georgia,serif}
.testimonial-text{font-size:.95rem;color:var(--text);margin-bottom:20px;line-height:1.8}
.testimonial-author{display:flex;align-items:center;gap:12px}
.author-avatar{width:48px;height:48px;border-radius:50%;background:var(--crimson);display:flex;align-items:center;justify-content:center;color:var(--white);font-weight:700;font-size:1.1rem;flex-shrink:0}
.author-info h4{font-size:.95rem;color:var(--ink)}
.author-info p{font-size:.8rem;color:var(--text-muted)}
.stars{color:var(--amber);font-size:.85rem;margin-bottom:12px}
.stars i{font-style:normal}

/* FAQ */
.faq{background:var(--cream)}
.faq-container{max-width:800px;margin:0 auto;padding:0 24px}
.faq-item{background:var(--white);border-radius:var(--radius);margin-bottom:12px;overflow:hidden;box-shadow:var(--shadow-sm);border:1px solid transparent;transition:border-color .3s}
.faq-item.active{border-color:rgba(217,64,88,.4)}
.faq-question{width:100%;padding:20px 24px;background:none;border:none;font-family:'Inter','Noto Sans Arabic',sans-serif;font-size:1rem;font-weight:700;color:var(--ink);text-align:start;cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:background .3s;gap:12px}
.faq-question:hover{background:var(--cream)}
.faq-question .fq-icon{width:30px;height:30px;background:var(--crimson-soft);border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .35s}
.faq-question .fq-icon .icon{color:var(--crimson);transition:transform .35s}
.faq-item.active .fq-icon{background:var(--crimson)}
.faq-item.active .fq-icon .icon{color:var(--white);transform:rotate(180deg)}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .4s ease,padding .4s ease}
.faq-item.active .faq-answer{max-height:400px;padding:0 24px 22px}
.faq-answer p{color:var(--text-muted);font-size:.95rem;line-height:1.8}

/* CTA Section */
.cta-section{background:var(--ink);padding:80px 0;text-align:center;position:relative;overflow:hidden}
.cta-section::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(217,64,88,.12) 0%,transparent 50%);}
.cta-content{position:relative;z-index:1;max-width:640px;margin:0 auto;padding:0 24px}
.cta-section h2{font-size:2.5rem;font-weight:700;color:var(--white);margin-bottom:16px;text-wrap:balance}
.cta-section p{color:rgba(255,255,255,.7);font-size:1.1rem;margin-bottom:32px}

/* Legal page */
.legal-page{background:var(--cream)}
.legal-container{max-width:760px;margin:0 auto;padding:0 24px}
.legal-back{display:inline-flex;align-items:center;gap:6px;color:var(--crimson);font-weight:700;margin-bottom:28px;text-decoration:none;font-size:.9rem}
.legal-back:hover{color:var(--crimson-dark)}
.legal-back .icon{transform:scaleX(-1)}
[dir="ltr"] .legal-back .icon{transform:none}
.legal-notice{display:flex;gap:10px;align-items:flex-start;background:var(--amber-light);border:1px solid rgba(245,166,35,.4);border-radius:var(--radius);padding:16px 20px;margin-bottom:32px;font-size:.88rem;color:#6b3e00;line-height:1.8}
.legal-notice .icon{flex-shrink:0;margin-top:3px}
.legal-title{font-size:2rem;font-weight:700;color:var(--ink);margin-bottom:6px}
.legal-updated{font-size:.85rem;color:var(--text-muted);margin-bottom:40px}
.legal-section{margin-bottom:30px}
.legal-section h3{font-size:1.1rem;font-weight:700;color:var(--ink);margin-bottom:10px}
.legal-section p{color:var(--text);margin-bottom:10px}
.legal-section ul{margin:0 0 10px 0;padding-inline-start:20px}
.legal-section li{margin-bottom:6px;color:var(--text)}
.legal-blank{color:#8a5a00;font-style:italic;border-bottom:1px dashed #c98f2e;padding:0 2px}
.legal-table-wrap{overflow-x:auto;margin-bottom:16px;border-radius:12px;border:1px solid rgba(29,29,39,.08)}
.legal-table{width:100%;border-collapse:collapse;font-size:.85rem;background:var(--white)}
.legal-table th,.legal-table td{padding:10px 14px;text-align:start;border-bottom:1px solid rgba(29,29,39,.06);min-width:120px}
.legal-table th{background:var(--cream-dark);color:var(--ink);font-weight:700}
.legal-table tr:last-child td{border-bottom:none}

/* Help Center */
.help-category{max-width:800px;margin:0 auto 48px;padding:0 24px}
.help-category h3{font-size:1.3rem;font-weight:700;color:var(--ink);margin-bottom:20px;display:flex;align-items:center;gap:10px}
.help-category h3 .icon{color:var(--crimson);width:1.3rem;height:1.3rem}
.help-contact{max-width:800px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;text-align:center}
.help-contact-card{background:var(--white);border-radius:var(--radius);padding:28px 20px;box-shadow:var(--shadow-sm)}
.help-contact-card .icon{width:2rem;height:2rem;color:var(--crimson);margin-bottom:12px}
.help-contact-card h4{font-size:1rem;color:var(--ink);margin-bottom:6px}
.help-contact-card p{font-size:.9rem;color:var(--text-muted)}
@media(max-width:768px){.help-contact{grid-template-columns:1fr}}

/* Pricing page */
.pricing-card{max-width:700px;margin:0 auto 60px;background:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:48px 32px;text-align:center}
.pricing-big{margin-bottom:32px}
.pricing-number{font-size:4rem;font-weight:800;color:var(--crimson);line-height:1;font-variant-numeric:tabular-nums}
.pricing-label{font-size:1.05rem;color:var(--text-muted);margin-top:8px}
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding-top:32px;border-top:1px solid rgba(29,29,39,.08)}
.pricing-stat-value{font-size:1.4rem;font-weight:800;color:var(--green);font-variant-numeric:tabular-nums}
.pricing-stat-label{font-size:.8rem;color:var(--text-muted);margin-top:4px}
.pricing-details{max-width:700px;margin:0 auto 60px;padding:0 24px}
.pricing-details h3{font-size:1.2rem;font-weight:700;color:var(--ink);margin:28px 0 12px}
.pricing-details ul{padding-inline-start:20px;margin-bottom:10px}
.pricing-details li{margin-bottom:8px;color:var(--text)}
@media(max-width:768px){.pricing-grid{grid-template-columns:1fr}}

/* Blog */
.blog-grid{max-width:1100px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.blog-card{background:var(--white);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);transition:all .3s ease;display:flex;flex-direction:column}
.blog-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.blog-card-img{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--cream-dark)}
.blog-card-icon{width:100%;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--ink) 0%,#2A3468 100%);color:var(--amber);font-size:2.4rem}
.blog-card-body{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1}
.blog-card-tag{display:inline-block;background:var(--crimson-soft);color:var(--crimson);font-size:.72rem;font-weight:700;padding:4px 12px;border-radius:20px;margin-bottom:12px;width:fit-content}
.blog-card-body h3{font-size:1.15rem;font-weight:700;color:var(--ink);margin-bottom:8px;line-height:1.5}
.blog-card-body h3 a{color:inherit;text-decoration:none}
.blog-card-body h3 a:hover{text-decoration:underline}
.blog-grid-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.blog-grid-3{grid-template-columns:1fr}}
.blog-card-body p{color:var(--text-muted);font-size:.9rem;margin-bottom:16px;flex:1}
.blog-card-meta{font-size:.78rem;color:var(--text-muted);display:flex;gap:10px;align-items:center}
.blog-card-link{color:var(--crimson);font-weight:700;font-size:.88rem;display:inline-flex;align-items:center;gap:4px;margin-top:auto}
.blog-card-placeholder{border:2px dashed rgba(29,29,39,.12);border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;text-align:center;color:var(--text-muted);font-size:.9rem;padding:40px 24px;min-height:260px}
@media(max-width:768px){.blog-grid{grid-template-columns:1fr}}

.blog-article{max-width:760px;margin:0 auto;padding:0 24px}
.blog-article-img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius-lg);margin-bottom:28px;box-shadow:var(--shadow-sm)}
.blog-article-meta{display:flex;gap:14px;align-items:center;font-size:.85rem;color:var(--text-muted);margin-bottom:10px;flex-wrap:wrap}
.blog-article-meta .blog-card-tag{margin-bottom:0}
.article-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:28px 0 36px}
.article-stat{background:var(--white);border-radius:var(--radius);padding:18px 14px;text-align:center;box-shadow:var(--shadow-sm);border:1px solid rgba(29,29,39,.05)}
.article-stat b{display:block;font-size:1.3rem;color:var(--crimson);font-weight:800;line-height:1.2;font-family:'Inter','Noto Sans Arabic',sans-serif}
.article-stat span{font-size:.72rem;color:var(--text-muted);display:block;margin-top:4px}
.blog-article h2{font-size:1.5rem;color:var(--ink);margin:32px 0 12px}
.blog-article p{color:var(--text);margin-bottom:14px;font-size:1rem;line-height:1.9}
.blog-article .lead{font-size:1.15rem;color:var(--ink);font-weight:600}
.blog-sources{font-size:.8rem;color:var(--text-muted);border-top:1px solid rgba(29,29,39,.08);padding-top:16px;margin-top:40px}
.blog-sources p{margin-bottom:4px}
.blog-sources a{color:var(--crimson)}
@media(max-width:600px){.article-stats{grid-template-columns:1fr}}

/* Footer */
.footer{background:var(--ink);color:var(--white);padding:60px 0 24px;border-top:1px solid rgba(255,255,255,.06)}
.footer-container{max-width:1200px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px}
.footer-brand{max-width:320px;min-width:0}
.footer-brand .logo{margin-bottom:16px}
.footer-brand .logo-icon{width:128px;height:44px}
.footer-brand p{color:rgba(255,255,255,.6);font-size:.9rem;line-height:1.8}
.footer-social{display:flex;gap:12px;margin-top:20px}
.footer-social a{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;color:var(--white);text-decoration:none;transition:all .3s}
.footer-social a:hover{background:var(--crimson);color:var(--white);transform:translateY(-3px)}
.footer-col{min-width:0}
.footer-col h4{font-size:1rem;font-weight:700;margin-bottom:20px;color:#FF7A85}
.footer-col ul{list-style:none}
.footer-col li{margin-bottom:10px}
.footer-col a{color:rgba(255,255,255,.6);text-decoration:none;font-size:.9rem;transition:color .3s}
.footer-col a:hover{color:var(--white)}
.footer-col li.plain{color:rgba(255,255,255,.6);font-size:.9rem}
.footer-bottom{max-width:1200px;margin:40px auto 0;padding:24px 24px 0;border-top:1px solid rgba(255,255,255,.06);display:flex;justify-content:space-between;align-items:center;color:rgba(255,255,255,.4);font-size:.85rem;flex-wrap:wrap;gap:8px}

/* Toast */
.toast{position:fixed;bottom:30px;left:50%;transform:translateX(-50%) translateY(100px);background:var(--ink);color:var(--white);padding:16px 32px;border-radius:50px;font-weight:600;box-shadow:var(--shadow-lg);z-index:9999;opacity:0;transition:all .4s ease;display:flex;align-items:center;gap:10px;max-width:calc(100vw - 32px)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast .icon{color:var(--green)}
.toast.error .icon{color:var(--error)}

/* Mobile */
@media(max-width:1200px){.nav-cta .btn-ghost{display:none}}
@media(max-width:1024px){.nav-links,.nav-cta{display:none}.mobile-menu-btn{display:block}.hero-title{font-size:2.8rem}.hiw-steps{grid-template-columns:1fr}.hiw-steps::before{display:none}.merchants-container{grid-template-columns:1fr}.testimonials-grid{grid-template-columns:1fr}.footer-container{grid-template-columns:1fr 1fr}}
@media(max-width:768px){.nav-links,.nav-cta{display:none}.mobile-menu-btn{display:block}.hero-container{grid-template-columns:1fr;text-align:center}.hero-desc{margin:0 auto 32px}.hero-cta{justify-content:center}.hero-stats{justify-content:center}.hero-visual{display:none}.hero-title{font-size:2.1rem}.section-title{font-size:1.8rem}.stats-container{grid-template-columns:1fr 1fr}.register-card{grid-template-columns:1fr;padding:32px 24px}.form-row{grid-template-columns:1fr}.footer-container{grid-template-columns:1fr;text-align:center}.footer-social{justify-content:center}.footer-bottom{flex-direction:column;gap:8px;text-align:center}.cta-section h2{font-size:1.8rem}}

/* Mobile Menu */
.mobile-menu{position:fixed;top:0;inset-inline-end:-100%;width:80%;max-width:320px;height:100vh;background:var(--white);z-index:2000;padding:80px 32px 32px;transition:inset-inline-end .4s ease;box-shadow:var(--shadow-lg)}
.mobile-menu.open{inset-inline-end:0}
.mobile-menu-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1999;opacity:0;pointer-events:none;transition:opacity .4s}
.mobile-menu-overlay.open{opacity:1;pointer-events:all}
.mobile-menu-close{position:absolute;top:20px;inset-inline-start:20px;background:none;border:none;font-size:1.5rem;color:var(--ink);cursor:pointer}
.mobile-menu ul{list-style:none}
.mobile-menu li{margin-bottom:20px}
.mobile-menu a{text-decoration:none;color:var(--ink);font-size:1.1rem;font-weight:700}
.mobile-menu .btn{width:100%;justify-content:center;margin-top:16px}
.mobile-menu .lang-switch{margin-top:8px}

/* Value marquee (homepage ribbon) */
.marquee{overflow:hidden;background:linear-gradient(90deg,var(--ink),#1E2756 55%,var(--ink));padding:20px 0;position:relative;transform:rotate(-1.2deg);width:104%;margin-inline-start:-2%;box-shadow:var(--shadow-md);z-index:5}
.marquee-track{display:flex;gap:44px;width:max-content;animation:mq 36s linear infinite;align-items:center}
.marquee:hover .marquee-track{animation-play-state:paused}
.mq-item{color:var(--white);font-family:'Plus Jakarta Sans','Noto Kufi Arabic',sans-serif;font-size:1.2rem;font-weight:700;white-space:nowrap}
.mq-item:nth-of-type(even){color:var(--amber)}
.mq-dot{width:9px;height:9px;background:var(--crimson);border-radius:50%;flex-shrink:0;box-shadow:0 0 0 4px rgba(217,64,88,.25)}
@keyframes mq{to{transform:translateX(-50%)}}
[dir="rtl"] .marquee-track{animation-name:mq-rtl}
@keyframes mq-rtl{from{transform:translateX(-50%)}to{transform:translateX(0)}}

/* Food gallery (homepage) */
.gallery{background:var(--white)}
.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;max-width:1200px;margin:0 auto;padding:0 24px}
.gallery-card{position:relative;border-radius:20px;overflow:hidden;box-shadow:var(--shadow-md);transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s ease}
.gallery-card:nth-child(even){transform:translateY(26px)}
.gallery-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.gallery-card:nth-child(even):hover{transform:translateY(20px)}
.gallery-card img{width:100%;aspect-ratio:1;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.gallery-card:hover img{transform:scale(1.07)}
.gallery-off{position:absolute;top:14px;inset-inline-start:14px;background:var(--crimson);color:var(--white);font-weight:800;font-size:.85rem;padding:6px 14px;border-radius:50px;box-shadow:0 4px 14px rgba(217,64,88,.45)}
.gallery-card figcaption{position:absolute;inset-inline:0;bottom:0;padding:44px 18px 16px;background:linear-gradient(to top,rgba(29,29,39,.88),rgba(29,29,39,0));color:var(--white);display:flex;justify-content:space-between;align-items:flex-end;gap:10px}
.gallery-name{font-weight:700;font-size:.95rem}
.gallery-price{white-space:nowrap}
.gallery-price b{font-size:1.1rem;color:var(--amber);font-family:'Plus Jakarta Sans','Noto Kufi Arabic',sans-serif}
.gallery-price s{opacity:.75;font-size:.8rem;margin-inline-start:8px}
.gallery-note{text-align:center;color:var(--text-muted);font-size:.85rem;margin-top:64px}
.tst-note{text-align:center;color:var(--text-muted);font-size:.85rem;margin-top:28px}
@media(max-width:1024px){.gallery-grid{grid-template-columns:repeat(2,1fr)}.gallery-card:nth-child(even){transform:none}.gallery-card:nth-child(even):hover{transform:translateY(-6px)}.gallery-note{margin-top:32px}}
@media(max-width:560px){.gallery-grid{grid-template-columns:1fr 1fr;gap:12px}.mq-item{font-size:1rem}.marquee{padding:14px 0}}

/* Inline merchant steps (inside register section) */
.reg-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:960px;margin:0 auto 44px}
.reg-step{display:flex;align-items:center;gap:14px;background:var(--white);border:1px solid var(--cream-dark);border-radius:16px;padding:16px 20px;box-shadow:var(--shadow-sm);transition:transform .3s ease,box-shadow .3s ease}
.reg-step:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.reg-step-n{width:42px;height:42px;border-radius:50%;background:var(--crimson);color:var(--white);font-weight:800;font-family:'Plus Jakarta Sans','Noto Kufi Arabic',sans-serif;display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0}
.reg-step h5{font-size:.98rem;margin-bottom:2px}
.reg-step p{color:var(--text-muted);font-size:.82rem}
@media(max-width:860px){.reg-steps{grid-template-columns:1fr;max-width:520px}}

/* Lifestyle stories (promo photography) */
.stories{background:var(--cream)}
.story-row{display:grid;grid-template-columns:1fr 1fr;gap:56px;max-width:1100px;margin:0 auto 72px;padding:0 24px;align-items:center}
.story-row:last-of-type{margin-bottom:0}
.story-row.reverse .story-img{order:2}
.story-img{border-radius:24px;overflow:hidden;box-shadow:var(--shadow-lg)}
.story-img img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.story-img:hover img{transform:scale(1.04)}
.story-tag{display:inline-block;background:var(--crimson-soft);color:var(--crimson);font-weight:700;font-size:.8rem;padding:6px 14px;border-radius:50px;margin-bottom:14px}
.story-text h3{font-size:1.7rem;margin-bottom:12px}
.story-text p{color:var(--ink-soft);margin-bottom:20px}
.story-chip{display:inline-flex;align-items:center;gap:8px;background:var(--white);border:1px solid var(--cream-dark);padding:9px 18px;border-radius:50px;font-size:.85rem;font-weight:600;color:var(--ink);box-shadow:var(--shadow-sm)}
.story-wide{max-width:1100px;margin:72px auto;padding:0 24px;position:relative}
.story-wide img{width:100%;border-radius:24px;box-shadow:var(--shadow-lg);display:block}
.wide-overlay{position:absolute;inset-inline-start:48px;bottom:36px;background:rgba(29,29,39,.78);backdrop-filter:blur(10px);color:var(--white);font-family:'Plus Jakarta Sans','Noto Kufi Arabic',sans-serif;font-size:1.35rem;font-weight:700;padding:14px 26px;border-radius:16px;box-shadow:var(--shadow-md)}
@media(max-width:900px){.story-row{grid-template-columns:1fr;gap:28px;margin-bottom:56px}.story-row.reverse .story-img{order:0}.story-img img{aspect-ratio:16/10}.story-wide{margin:56px auto}.wide-overlay{inset-inline-start:32px;bottom:24px;font-size:1.05rem;padding:10px 18px}}

/* حقل مصيدة للروبوتات: خارج الشاشة ولا يراه الزائر */
.hp-field{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}


/* =============================================================================
   نظام التصميم v3 (للتراجع: احذف من هنا حتى نهاية الملف)
   اللوحة: كحلي + رصاصي + أحمر بتدرّجاته فقط. الأخضر والكهرماني أُعيد تعيينهما لدرجات الكحلي والأحمر،
   فتتلوّن كل الصفحات تلقائياً بلا تعديل HTML.
   الترتيب (الرئيسية): هيرو داكن بعنوان ضخم بالمنتصف ← جملة رسالة وأرقام ← شبكة فوائد 2×2 ←
   خطوات بصورة جانبية على كتلة حمراء ← معرض ← التجار (كحلي) ← التسجيل ← الأسئلة ← دعوة حمراء ← تذييل كحلي.
   الحركة: لغة واحدة (ظهور 24px بتتابع 80ms)، ودخول هاتفي الهيرو، ورفع 4px عند المرور، وضغط خفيف للأزرار.
   ============================================================================= */
:root{
  --navy:#0E1735;--navy-2:#1B2A5C;
  --gray-50:#F4F5F7;--gray-100:#E9EBF0;--gray-300:#C9CDD8;
  --grad-red:linear-gradient(135deg,#E5495F 0%,#C9354D 55%,#A32A41 100%);
  --cream:#F4F5F7;--cream-dark:#E9EBF0;
  --text-muted:#5E6275;--ink-soft:#5E6275;
  /* إعادة تعيين الألوان الخارجة عن اللوحة */
  --amber:#FF8A94;--amber-light:#FBE3E8;--amber-ink:#B8324A;
  --green:#1B2A5C;--green-light:#E3E7F4;
}

/* ---- شريط التنقل فوق الهيرو الداكن (الرئيسية فقط) ---- */
.logo-on-dark{display:none}
.home-dark .navbar:not(.scrolled) .logo-icon img:not(.logo-on-dark),.home-dark .navbar.on-dark .logo-icon img:not(.logo-on-dark){display:none}
.home-dark .navbar:not(.scrolled) .logo-on-dark,.home-dark .navbar.on-dark .logo-on-dark{display:block}
.home-dark .navbar:not(.scrolled) .nav-links a,.home-dark .navbar.on-dark .nav-links a{color:#fff}
.home-dark .navbar:not(.scrolled) .lang-switch,.home-dark .navbar.on-dark .lang-switch{background:rgba(255,255,255,.12)}
.home-dark .navbar:not(.scrolled) .lang-switch button,.home-dark .navbar.on-dark .lang-switch button{color:rgba(255,255,255,.78)}
.home-dark .navbar:not(.scrolled) .lang-switch button.active,.home-dark .navbar.on-dark .lang-switch button.active{background:var(--crimson);color:#fff}
.home-dark .navbar:not(.scrolled) .btn-ghost,.home-dark .navbar.on-dark .btn-ghost{color:#fff}
.home-dark .navbar:not(.scrolled) .btn-ghost:hover,.home-dark .navbar.on-dark .btn-ghost:hover{background:rgba(255,255,255,.12)}
.home-dark .navbar:not(.scrolled) .mobile-menu-btn,.home-dark .navbar.on-dark .mobile-menu-btn{color:#fff}

/* ---- الهيرو: داكن، عنوان ضخم بالمنتصف، هاتفان يطلعان من أسفل ---- */
.hero{display:block;min-height:auto;padding:128px 0 0;text-align:center;color:var(--white);
  background:radial-gradient(900px 520px at 12% 100%,rgba(217,64,88,.4),transparent 62%),
             radial-gradient(760px 480px at 92% 0%,rgba(96,120,230,.28),transparent 62%),
             linear-gradient(170deg,var(--navy) 0%,var(--navy-2) 100%)}
.hero-bg-pattern{opacity:.07;background-image:radial-gradient(circle at 2px 2px,#fff 1px,transparent 0)}
.hero-blob,.hero-blob-2{display:none}
.hero-container{display:block;max-width:1000px;padding:0 24px}
.hero-badge{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff;box-shadow:none}
.hero-badge .icon{color:#FF8A94}
.hero-title{font-size:clamp(2.3rem,6.2vw,4.4rem);font-weight:800;line-height:1.1;letter-spacing:-.015em;text-transform:uppercase;color:#fff;margin:0 auto 22px;max-width:920px}
.hero-title .highlight{background:linear-gradient(90deg,#FFA3AC 0%,#FF5A70 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-title .highlight::after{display:none}
.hero-desc{color:rgba(255,255,255,.84);margin:0 auto 34px;max-width:640px;font-size:1.2rem}
.hero-cta{justify-content:center}
.hero .btn-primary{background:var(--grad-red);box-shadow:0 10px 30px rgba(217,64,88,.5)}
.hero .btn-outline{color:#fff;border-color:rgba(255,255,255,.55)}
.hero .btn-outline:hover{background:#fff;color:var(--navy)}
.hero-visual{display:flex;justify-content:center;align-items:flex-start;height:auto;overflow:visible;margin:56px auto 0;padding-bottom:84px;width:100%;max-width:780px;position:relative}
.hero-visual .phone-mockup{width:250px;flex-shrink:0;box-shadow:0 30px 80px rgba(0,0,0,.5);animation:reveal 1s var(--ease-out) backwards}
.hero-visual .phone-a{transform:rotate(-5deg) translate(30px,30px);z-index:1;animation-delay:.35s}
.hero-visual .phone-b{transform:rotate(4deg) translate(-30px,0);z-index:2;animation-delay:.55s}
.floating-card{animation:reveal .8s var(--ease-out) backwards;z-index:3}
.floating-card.discount{top:22%;inset-inline-start:2%;animation-delay:.9s}
.floating-card.saving{bottom:30%;inset-inline-end:2%;animation-delay:1.1s}

/* ---- جملة الرسالة والأرقام ---- */
.mission{background:var(--gray-50);padding:96px 0 84px;text-align:center}
.mission-inner{max-width:920px;margin:0 auto;padding:0 24px}
.mission-text{font-family:'Plus Jakarta Sans','Noto Kufi Arabic',sans-serif;font-size:clamp(1.6rem,3.4vw,2.5rem);font-weight:700;line-height:1.4;color:var(--navy);text-wrap:balance}
.mission-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px}
.mission-stat b{display:block;font-family:'Plus Jakarta Sans','Noto Kufi Arabic',sans-serif;font-size:clamp(2.2rem,5vw,3.4rem);font-weight:800;line-height:1.1;background:var(--grad-red);-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.mission-stat span{color:var(--text-muted);font-weight:600;font-size:.95rem}

/* ---- شبكة الفوائد 2×2 ---- */
.benefits{background:var(--white);padding:92px 0}
.benefits-title{text-align:center;font-size:clamp(1.8rem,4vw,2.8rem);font-weight:800;text-transform:uppercase;color:var(--navy);margin-bottom:52px;padding:0 24px}
.benefits-grid{max-width:900px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:1fr 1fr;gap:36px 56px}
.benefit{display:flex;gap:20px;align-items:center;text-align:start}
.benefit-icon{width:68px;height:68px;border-radius:50%;background:var(--gray-100);color:var(--navy);display:flex;align-items:center;justify-content:center;font-size:1.8rem;flex-shrink:0;transition:background .35s var(--ease-out),color .35s var(--ease-out),transform .35s var(--ease-out)}
.benefit:hover .benefit-icon{background:var(--crimson);color:#fff;transform:translateY(-3px)}
.benefit p{font-family:'Plus Jakarta Sans','Noto Kufi Arabic',sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.01em;color:var(--navy);font-size:1.05rem;line-height:1.4}

/* ---- الخطوات: كتلة حمراء متدرّجة، صورة جانبية ---- */
.how-it-works{background:var(--grad-red);color:#fff;padding:100px 0;overflow:clip;position:relative}
.how-it-works::before{content:'';position:absolute;bottom:-40%;inset-inline-end:-8%;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.16),transparent 65%);pointer-events:none}
.steps-split{max-width:1100px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:center;position:relative;z-index:1}
.steps-visual{display:flex;justify-content:center}
.steps-visual .phone-mockup{width:270px;transform:rotate(-3deg);box-shadow:0 30px 70px rgba(60,10,20,.5)}
.steps-kicker{font-weight:800;text-transform:uppercase;letter-spacing:.14em;font-size:.82rem;color:rgba(255,255,255,.82);margin-bottom:10px}
.steps-title{font-size:clamp(1.9rem,4vw,3rem);font-weight:800;line-height:1.15;color:#fff;margin-bottom:34px;text-transform:uppercase}
.steps-list{list-style:none;display:grid;gap:28px}
.steps-list li{display:flex;gap:18px;align-items:flex-start}
.steps-num{width:46px;height:46px;border-radius:50%;background:#fff;color:var(--crimson-dark);font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:1.15rem;font-family:'Inter','Noto Sans Arabic',sans-serif}
.steps-list h3{color:#fff;font-size:1.25rem;margin-bottom:4px}
.steps-list p{color:rgba(255,255,255,.9);font-size:1rem;line-height:1.7}
.steps-cta{margin-top:36px}
.steps-cta .btn{background:#fff;color:var(--crimson-dark);box-shadow:0 10px 28px rgba(60,10,20,.28)}
.steps-cta .btn:hover{background:var(--gray-50)}

/* ---- بقية الأقسام ---- */
.gallery{background:var(--gray-50)}
.merchant-register{background:linear-gradient(180deg,var(--gray-50) 0%,#fff 100%)}
.merchant-register .section-label{background:var(--green-light);color:var(--navy-2)}
.faq{background:var(--white)}
.faq-item{background:var(--gray-50)}
.faq-question:hover{background:var(--gray-100)}
.footer{background:var(--navy)}

/* قسم التجار: الشريط الكحلي */
.for-merchants{background:linear-gradient(160deg,var(--navy) 0%,var(--navy-2) 100%);color:var(--white)}
.for-merchants::before{content:'';position:absolute;top:-160px;inset-inline-end:-120px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(217,64,88,.3) 0%,transparent 65%);pointer-events:none}
.for-merchants .section-title,.for-merchants .merchants-content h3{color:var(--white)}
.for-merchants .section-desc{color:rgba(255,255,255,.74)}
.for-merchants .section-label{background:rgba(217,64,88,.22);color:#FF9AA4}
.for-merchants .merchants-features li{color:rgba(255,255,255,.8)}
.for-merchants .merchants-features li strong{color:var(--white)}
.for-merchants .m-stat{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14);box-shadow:none}
.for-merchants .m-stat b{color:#FF9AA4}
.for-merchants .m-stat span{color:rgba(255,255,255,.68)}
.for-merchants .merchant-phone{box-shadow:0 0 0 1px rgba(255,255,255,.14),0 30px 70px rgba(0,0,0,.5)}
.for-merchants .earn-badge,.for-merchants .new-order-badge{box-shadow:0 12px 36px rgba(0,0,0,.35)}

/* الدعوة الأخيرة: أحمر متدرّج */
.cta-section{background:var(--grad-red)}
.cta-section::before{background:radial-gradient(circle,rgba(255,255,255,.16) 0%,transparent 55%)}
.cta-section p{color:rgba(255,255,255,.9)}
.cta-section .btn-primary{background:var(--white);color:var(--crimson-dark);box-shadow:0 8px 24px rgba(0,0,0,.2)}
.cta-section .btn-primary:hover{background:var(--gray-50)}

/* ---- التفاعل ---- */
.btn:active{transform:scale(.97)}

/* ---- صفحة «من نحن» ---- */
.about-hero{text-align:center;max-width:760px;margin:0 auto 56px;padding:0 24px}
.about-hero .section-title{font-size:2.8rem;margin-bottom:20px;color:var(--navy)}
.about-lead{font-size:1.2rem;color:var(--text-muted);line-height:1.8}
.about-mission{max-width:720px;margin:0 auto;padding:0 24px}
.about-mission h2{font-size:1.8rem;color:var(--navy);margin-bottom:14px}
.about-mission p{color:var(--text-muted);font-size:1.05rem;line-height:1.95;margin-bottom:14px}
.about-values{max-width:1100px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.value-card{background:var(--white);border-radius:var(--radius-lg);padding:32px 28px;box-shadow:var(--shadow-sm);border:1px solid rgba(29,29,39,.06);transition:transform .35s var(--ease-out),box-shadow .35s ease}
.value-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.value-icon{width:52px;height:52px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:1.4rem;margin-bottom:18px}
.value-card.amber .value-icon{background:var(--gray-100);color:var(--navy)}
.value-card.crimson .value-icon{background:var(--crimson-soft);color:var(--crimson)}
.value-card.green .value-icon{background:var(--green-light);color:var(--navy-2)}
.value-card h3{font-size:1.2rem;color:var(--navy);margin-bottom:8px}
.value-card p{color:var(--text-muted);font-size:.95rem;line-height:1.75}
.about-founder{max-width:720px;margin:0 auto;padding:0 24px;text-align:center}
.founder-card{background:var(--white);border-radius:var(--radius-lg);padding:34px;display:flex;gap:26px;align-items:center;box-shadow:var(--shadow-md);text-align:start;border:1px solid rgba(29,29,39,.05)}
.founder-avatar{width:88px;height:88px;border-radius:50%;background:var(--grad-red);color:var(--white);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:2.1rem;flex-shrink:0;font-family:'Plus Jakarta Sans','Noto Kufi Arabic',sans-serif}
.founder-card h3{font-size:1.3rem;color:var(--navy)}
.founder-role{color:var(--crimson);font-weight:700;font-size:.9rem;margin-bottom:10px}
.founder-card p{color:var(--text-muted);font-size:.97rem;line-height:1.75}
.founder-contact{margin-top:10px}
.founder-contact a{color:var(--navy);font-weight:700;text-decoration:none;border-bottom:2px solid var(--crimson-soft)}
.founder-contact a:hover{border-color:var(--crimson)}

/* ---- الجوال ---- */
@media(max-width:900px){.steps-split{grid-template-columns:1fr;gap:44px}.steps-visual{order:2}}
@media(max-width:768px){
  .hero{padding-top:104px}
  .hero-visual{margin-top:40px;padding-bottom:56px}
  .hero-visual .phone-mockup{width:190px}
  .hero-visual .phone-a{transform:rotate(-5deg) translate(18px,22px)}
  .hero-visual .phone-b{transform:rotate(4deg) translate(-18px,0)}
  .floating-card{display:none}
  .mission{padding:72px 0 64px}
  .mission-stats{grid-template-columns:1fr;gap:22px}
  .benefits{padding:72px 0}
  .benefits-grid{grid-template-columns:1fr;gap:24px}
  .how-it-works{padding:72px 0}
  .about-values{grid-template-columns:1fr}
  .founder-card{flex-direction:column;text-align:center}
  .about-hero .section-title{font-size:2.1rem}
}

/* ---- حركة GSAP: إخفاء آمن للهيرو قبل التحميل، وتراكب صور الخطوات ---- */
.steps-screens{position:relative}
.steps-shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0}
.steps-shot.is-on{opacity:1}

/* ---- الزجاج (Glassmorphism): شريط التنقل وبطاقات فوق الخلفيات الداكنة ---- */
.navbar.scrolled{background:rgba(255,255,255,.74);-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);border-bottom:1px solid rgba(255,255,255,.55)}
.floating-card{background:rgba(255,255,255,.13);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);border:1px solid rgba(255,255,255,.3);box-shadow:0 18px 50px rgba(0,0,0,.3);color:#fff}
.floating-card .floating-sub,.floating-card .label,.floating-card.discount .floating-sub,.floating-card.saving .label{color:rgba(255,255,255,.88)}
.floating-card.saving .amount{color:#fff}
.floating-card.discount .badge-discount{background:var(--grad-red)}
.for-merchants .m-stat{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.for-merchants .earn-badge,.for-merchants .new-order-badge{background:rgba(255,255,255,.12);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);border:1px solid rgba(255,255,255,.24);color:#fff}
.for-merchants .earn-badge .amount{color:#fff}
.for-merchants .earn-badge .label,.for-merchants .new-order-badge p{color:rgba(255,255,255,.82)}
.for-merchants .new-order-badge p strong{color:#fff}

/* ---- خلفية الهيرو البرمجية وفيديو عرض التطبيق ---- */
.hero-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.phone-screen video{width:100%;height:100%;object-fit:cover;object-position:top;display:block;background:var(--cream)}

/* ---- الفوتر الجديد: شعار + روابط رئيسية بالمنتصف + كلمة العلامة الضخمة + صف قانوني ---- */
.footer{padding:56px 0 30px;border-top:0}
.footer-top{max-width:1200px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:24px}
.footer-logo{justify-self:start}
.footer-logo .logo-icon{width:128px;height:44px}
.footer-center{display:flex;flex-direction:column;align-items:center;gap:22px}
.footer-main{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 34px}
.footer-main a{font-family:'Plus Jakarta Sans','Noto Kufi Arabic',sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:.88rem;color:#fff;text-decoration:none;transition:color .3s}
.footer-main a:hover{color:#FF8A94}
.footer .footer-social{display:flex;gap:14px;margin:0;justify-content:center}
.footer-stores{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.store-pill{display:inline-flex;flex-direction:column;align-items:flex-start;padding:8px 18px;border-radius:12px;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.06);color:#fff;line-height:1.25}
.store-pill b{font-size:.95rem;font-weight:700}
.store-pill small{font-size:.68rem;color:rgba(255,255,255,.7);letter-spacing:.04em}
.footer-wordmark{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:min(28.5vw,360px);line-height:1;padding-bottom:.14em;letter-spacing:-.035em;text-align:center;color:#F4F5F7;margin:34px auto 0;max-width:1240px;white-space:nowrap;user-select:none}
.footer-legal{max-width:1200px;margin:22px auto 0;padding:22px 24px 0;border-top:1px solid rgba(255,255,255,.12);display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 26px}
.footer-legal a{color:rgba(255,255,255,.72);text-decoration:none;font-size:.84rem;transition:color .3s}
.footer-legal a:hover{color:#fff}
.footer-meta{max-width:1200px;margin:18px auto 0;padding:0 24px;display:flex;flex-wrap:wrap;justify-content:center;gap:4px 12px;color:rgba(255,255,255,.62);font-size:.82rem}
.footer-meta i{font-style:normal;opacity:.5}
.footer-copy{max-width:1200px;margin:10px auto 0;padding:0 24px;text-align:center;color:rgba(255,255,255,.5);font-size:.76rem}
@media(max-width:900px){
  .footer-top{grid-template-columns:1fr;justify-items:center;gap:26px}
  .footer-logo{justify-self:center}
  .footer-top-gap{display:none}
  .footer-legal{justify-content:center}
}
@media(max-width:768px){.footer-copy{padding-bottom:64px}}

/* ---- الفوتر: الشعار الحقيقي الضخم بدل النص، وبلا شعار صغير بالزاوية ---- */
.footer-top{display:flex;justify-content:center;grid-template-columns:none}
.footer-wordmark-link{display:block;max-width:1240px;margin:38px auto 0;padding:0 24px}
img.footer-wordmark{display:block;width:100%;height:auto;max-width:1180px;margin:0 auto;padding:0;font-size:0;user-select:none}

/* ---- كشف شعار الفوتر مع التمرير: ينزل من الحافة العليا ويكتمل حين يظهر كله (script.js) ---- */

/* =============================================================================
   حركة CSS أصلية بدل JavaScript (للتراجع: احذف من هنا حتى نهاية الملف واستعد motion.js وvendor/gsap من git)
   السبب: حركات الـCSS على transform/opacity تُنفَّذ على خيط التركيب بالمعالج الرسومي فتبقى ناعمة حتى لو الصفحة مشغولة،
   بعكس JavaScript الذي يحسب كل إطار على الخيط الرئيسي. المسافة كبيرة والمدة طويلة بمنحنى ناعم (على نمط المواقع الحديثة).
   المتصفحات التي لا تدعم animation-timeline تعرض الصفحة بلا تثبيت ولا بارالاكس (تدهور هادئ).
   ============================================================================= */
:root{--ease-soft:cubic-bezier(.16,1,.3,1)}
@keyframes reveal{from{opacity:0;transform:translateY(56px)}}
@keyframes rise{from{opacity:0;transform:translateY(44px)}}
.animate-on-scroll.visible{animation:reveal 1.2s var(--ease-soft) backwards;animation-delay:var(--d,0ms)}

/* دخول الهيرو: تتابع بمنحنى ناعم */
.hero-badge{animation:rise 1s var(--ease-soft) .05s backwards}
.hero-title > span{display:inline-block;animation:rise 1.15s var(--ease-soft) .2s backwards}
.hero-title > span + span{animation-delay:.34s}
.hero-desc{animation:rise 1.1s var(--ease-soft) .5s backwards}
.hero-cta{animation:rise 1.1s var(--ease-soft) .64s backwards}
.hero-visual .phone-mockup{animation:reveal 1.4s var(--ease-soft) backwards}
.floating-card{animation:reveal 1.1s var(--ease-soft) backwards}

@media (prefers-reduced-motion:no-preference){
  /* بارالاكس الهيرو مع التمرير (خاصية translate المنفصلة لا تتعارض مع transform الموجود) */
  @supports (animation-timeline: scroll()){
    @keyframes pxA{to{translate:0 -30px}}
    @keyframes pxB{to{translate:0 -64px}}
    @keyframes pxC{to{translate:0 -96px}}
    @keyframes pxD{to{translate:0 -54px}}
    .hero-visual .phone-a{animation:reveal 1.4s var(--ease-soft) .35s backwards,pxA linear both;animation-timeline:auto,scroll(root);animation-range:normal,0 90vh}
    .hero-visual .phone-b{animation:reveal 1.4s var(--ease-soft) .55s backwards,pxB linear both;animation-timeline:auto,scroll(root);animation-range:normal,0 90vh}
    .floating-card.discount{animation:reveal 1.1s var(--ease-soft) .9s backwards,pxC linear both;animation-timeline:auto,scroll(root);animation-range:normal,0 90vh}
    .floating-card.saving{animation:reveal 1.1s var(--ease-soft) 1.1s backwards,pxD linear both;animation-timeline:auto,scroll(root);animation-range:normal,0 90vh}
  }

  /* الخطوات: القسم يثبت بـposition:sticky والتمرير يبدّل الخطوة والشاشة (سطح مكتب بشاشة كافية) */
  @supports (animation-timeline: view()){
    @media (min-width:901px) and (min-height:640px){
      .how-it-works{view-timeline:--steps block;height:340vh;padding:0}
      .steps-sticky{position:sticky;top:0;height:100vh;display:flex;align-items:center;padding-top:88px;box-sizing:border-box}
      /* المحتوى يتقلّص مع ارتفاع الشاشة كي يبقى العنوان والزر كاملين بدون قص */
      .steps-sticky{padding-top:76px;padding-bottom:20px}
      .steps-split{max-width:1240px;gap:48px}
      .steps-title{font-size:clamp(1.4rem,min(3.4vw,5vh),2.8rem);margin-bottom:min(28px,3vh)}
      .steps-list{gap:min(26px,2.8vh)}
      .steps-list p{font-size:clamp(.88rem,1.9vh,1rem);line-height:1.55}
      .steps-list h3{font-size:clamp(1.05rem,2.5vh,1.25rem)}
      .steps-cta{margin-top:min(36px,3.4vh)}
      .steps-visual .phone-mockup{width:min(270px,34vh)}
      .steps-shot,.steps-list li{animation-timeline:--steps;animation-range:contain 0% contain 100%;animation-timing-function:linear;animation-fill-mode:both}
      .steps-shot:nth-of-type(1){animation-name:shot1}
      .steps-shot:nth-of-type(2){animation-name:shot2}
      .steps-shot:nth-of-type(3){animation-name:shot3}
      .steps-list li:nth-child(1){animation-name:li1}
      .steps-list li:nth-child(2){animation-name:li2}
      .steps-list li:nth-child(3){animation-name:li3}
      @keyframes shot1{0%,26%{opacity:1}38%,100%{opacity:0}}
      @keyframes shot2{0%,26%{opacity:0}38%,60%{opacity:1}72%,100%{opacity:0}}
      @keyframes shot3{0%,60%{opacity:0}72%,100%{opacity:1}}
      @keyframes li1{0%,26%{opacity:1}38%,100%{opacity:.32}}
      @keyframes li2{0%,26%{opacity:.32}38%,60%{opacity:1}72%,100%{opacity:.32}}
      @keyframes li3{0%,60%{opacity:.32}72%,100%{opacity:1}}
    }
  }

}

/* ---- كشف الفوتر على نمط toogoodtogo: الجزء السفلي من الفوتر (الشعار والروابط القانونية) ثابت أسفل الشاشة والمحتوى يغطيه ثم ينزاح للأعلى فيكشفه؛ الجزء العلوي (الروابط والمتجران) عادي ----
   يُفعَّل من script.js (class footer-reveal على html) فقط إن كان ارتفاع الفوتر أقل من الشاشة؛ وإلا يبقى الفوتر عادياً بنهاية الصفحة. */
.footer-reveal{background:var(--navy)}   /* لو ظهرت فجوة بكسل بين الجزأين تكون كحلية لا بيضاء */
.footer-reveal body{margin-bottom:var(--footer-h,0px)}
.footer-reveal .footer{position:relative;box-shadow:0 2px 0 var(--navy)}   /* يغطي خط الكسر البكسلي حيث تنتهي خلفية body فوق الجزء الثابت */
.footer-reveal .footer-rest{position:fixed;left:0;right:0;bottom:0;z-index:-1;background:var(--navy);padding-bottom:30px}
.footer-reveal img.footer-wordmark{max-width:min(1180px,calc(42vh*2.786))}

/* ---- هاتف التاجر: لقطة حقيقية من تطبيق Mazgo Partner بدل الشاشة المبنية بالكود ---- */
.merchants-visual .merchant-shot{width:270px;margin:0 auto;position:relative;z-index:2}
.partner-lockup{display:flex;align-items:center;justify-content:center;gap:14px;margin:0 auto 26px;position:relative;z-index:2}
.partner-lockup img{width:64px;height:64px;border-radius:16px;box-shadow:0 10px 26px rgba(0,0,0,.35)}
.partner-lockup b{display:block;font-family:'Plus Jakarta Sans','Noto Kufi Arabic',sans-serif;font-size:1.3rem;font-weight:800;color:#fff;line-height:1.2}
.partner-lockup span{display:block;font-size:.85rem;color:rgba(255,255,255,.7)}

/* ---- شريط التنقل الزجاجي (على نمط toogoodtogo): بلا صبغة ولا إشباع لوني، تمويه فقط، فيأخذ لون ما تحته كما هو (أحمر يبقى أحمر، أبيض يبقى أبيض) ----
   فوق الأقسام الداكنة: زجاج داكن بنص أبيض (class on-dark من script.js)، وفوق الفاتحة: زجاج فاتح بنص داكن. */
.navbar.scrolled{background:rgba(255,255,255,.1);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:0;box-shadow:none}
.home-dark .navbar.scrolled.on-dark{background:transparent;border-bottom:0;box-shadow:none}

/* أيقونة تطبيق الزبون فوق هاتف الخطوات (القسم الأحمر): الهاتف يصغر قليلاً ليتسع الاثنان */
.steps-visual{flex-direction:column;align-items:center}
.steps-visual .app-lockup{margin-bottom:22px}
.steps-visual .app-lockup img{box-shadow:0 10px 26px rgba(60,10,20,.4)}
@media (min-width:901px) and (min-height:640px){.steps-visual .phone-mockup{width:min(270px,29vh)}}

/* ---- شارات المتجرين بأيقونتي آبل وغوغل بلاي (تصبح روابط حقيقية عند الإطلاق) ---- */
.store-pill{flex-direction:row;align-items:center;gap:12px;padding:8px 18px 8px 14px}
.store-pill > i{font-size:1.75rem;line-height:1}
.store-pill > span{display:flex;flex-direction:column;align-items:flex-start;line-height:1.25}

/* ---- الهيرو: شارتا المتجرين بالصف الأول، وزر تسجيل المتجر الأحمر الوحيد بالصف الثاني ---- */
.hero-cta{flex-direction:column;align-items:center;gap:18px}
.hero-stores{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.store-pill-lg{padding:11px 24px 11px 18px;border-radius:16px;border-color:rgba(255,255,255,.38);background:rgba(255,255,255,.1);gap:14px}
.store-pill-lg > i{font-size:2.1rem}
.store-pill-lg b{font-size:1.1rem;line-height:1.15}
.store-pill-lg small{order:-1;font-size:.7rem}
@media(max-width:480px){
  .hero-stores{flex-wrap:nowrap;gap:10px;width:100%}
  .store-pill-lg{flex:1 1 0;min-width:0;justify-content:center;padding:9px 10px;gap:8px;border-radius:14px}
  .store-pill-lg > i{font-size:1.55rem}
  .store-pill-lg b{font-size:.92rem}
  .store-pill-lg small{font-size:.62rem}
}

/* ---- قسم Mazgo Edut: شرح العروض العادية (تبويب «العروض» بالتطبيق) ---- */
.edut{background:var(--white)}
.edut-grid{max-width:1100px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:center}
.edut-text .section-label,.edut-text .section-title,.edut-text .section-desc{text-align:start;margin-inline:0}
.edut-text .section-label{display:inline-block}
.edut-list{list-style:none;margin-top:30px;display:grid;gap:22px}
.edut-list li{display:flex;gap:16px;align-items:flex-start;color:var(--text-muted);line-height:1.6}
.edut-list li i{width:44px;height:44px;border-radius:14px;background:var(--crimson-soft);color:var(--crimson);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:1.05rem}
.edut-list li strong{color:var(--ink);font-size:1.08rem}
.edut-visual{display:flex;justify-content:center}
.edut-visual .phone-mockup{width:270px;transform:rotate(3deg);box-shadow:0 30px 70px rgba(217,64,88,.28)}
@media(max-width:900px){.edut-grid{grid-template-columns:1fr;gap:40px}.edut-visual .phone-mockup{transform:none}}
.edut-note{margin-top:26px;padding:14px 18px;border-inline-start:3px solid var(--crimson);background:var(--gray-50);border-radius:0 12px 12px 0;color:var(--text-muted);font-size:.92rem;line-height:1.65}
[dir="rtl"] .edut-note{border-radius:12px 0 0 12px}

.pdf-link{display:inline-flex;align-items:center;gap:10px;margin-top:22px;margin-inline-start:18px;color:rgba(255,255,255,.82);font-weight:600;font-size:.95rem;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:3px;transition:color .3s,border-color .3s}
.pdf-link:hover{color:#fff;border-color:#fff}
.pdf-link i{font-size:1.05rem}
@media(max-width:600px){.pdf-link{margin-inline-start:0;display:flex;justify-content:center;width:fit-content;margin-inline:auto}}

/* ---- نص متدرّج اللون (background-clip:text) يقصّ الحروف الممتدة للأسفل: نوسّع صندوق الخلفية ----
   الحروف العربية (ق، ي، ع…) تنزل تحت سطر 1.1، فنزيد ارتفاع السطر والحشوة بالعربية، وحشوة خفيفة بغيرها. */
.hero-title .highlight{padding-bottom:.1em}
.mission-stat b{padding-bottom:.12em}
html[lang="ar"] .hero-title > span{line-height:1.45}
html[lang="ar"] .hero-title .highlight{padding-bottom:.18em}
html[lang="ar"] .mission-stat b{line-height:1.5;padding-bottom:.1em}

/* ---- بطاقات المعرض على الهاتف: الاسم والسعر يلتفّان فلا يُقصّ السعر الأصلي ---- */
@media(max-width:560px){
  .gallery-card figcaption{flex-wrap:wrap;gap:2px 8px;padding:40px 12px 12px;align-items:flex-end}
  .gallery-name{font-size:.82rem;line-height:1.25;flex:1 1 100%}
  .gallery-price{white-space:normal;flex:1 1 100%}
  .gallery-price b{font-size:1rem}
  .gallery-price s{font-size:.74rem;margin-inline-start:6px}
}

/* ---- الشركاء: شريط شعارات بالرئيسية (يظهر من 6 شركاء) وصفحة الشركاء ---- */
.partners-strip{background:var(--white);padding:34px 0 30px;border-bottom:1px solid var(--line, rgba(14,23,53,.08));overflow:hidden}
.partners-strip[hidden],.partners-grid[hidden],.partners-empty[hidden]{display:none}
.partners-strip-head{max-width:1200px;margin:0 auto 20px;padding:0 24px;display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.partners-strip-head span{font-weight:800;letter-spacing:.1em;text-transform:uppercase;font-size:.78rem;color:var(--text-muted)}
.partners-strip-head a{font-weight:700;font-size:.9rem;color:var(--crimson);text-decoration:none}
.partners-strip-head a:hover{text-decoration:underline}
.partners-marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.partners-track{display:flex;align-items:center;gap:56px;width:max-content;animation:partners-scroll 45s linear infinite}
.partners-marquee:hover .partners-track{animation-play-state:paused}
.partner-logo{flex:0 0 auto;display:flex;align-items:center;height:46px}
.partner-logo img{max-height:46px;max-width:150px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.65;transition:filter .3s,opacity .3s}
.partner-logo img:hover{filter:none;opacity:1}
@keyframes partners-scroll{to{transform:translateX(-50%)}}
[dir="rtl"] .partners-track{animation-name:partners-scroll-rtl}
@keyframes partners-scroll-rtl{to{transform:translateX(50%)}}
@media (prefers-reduced-motion:reduce){
  .partners-track{animation:none;width:auto;flex-wrap:wrap;justify-content:center;gap:28px 40px;padding:0 24px}
  .partner-logo[aria-hidden="true"]{display:none}
  .partners-marquee{-webkit-mask-image:none;mask-image:none}
}
.partners-grid{max-width:1100px;margin:56px auto 0;padding:0 24px;display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:20px}
.partner-card{background:var(--white);border:1px solid rgba(14,23,53,.08);border-radius:20px;padding:26px 18px 20px;display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;box-shadow:0 8px 28px rgba(14,23,53,.05)}
.partner-card img{height:64px;max-width:100%;object-fit:contain}
.partner-card b{color:var(--ink);font-size:.98rem}
.partners-empty{max-width:620px;margin:56px auto 0;padding:44px 28px;text-align:center;background:var(--gray-50);border-radius:24px}
.partners-empty h2{font-size:1.5rem;color:var(--ink);margin-bottom:12px}
.partners-empty p{color:var(--text-muted);margin-bottom:26px;line-height:1.7}
@media(max-width:600px){.partners-track{gap:40px}.partner-logo{height:38px}.partner-logo img{max-height:38px;max-width:120px}}