/* EgyBest download site */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:Cairo,"Segoe UI",Tahoma,"Noto Sans Arabic",system-ui,sans-serif;background:var(--bg);color:#fff;line-height:1.7;min-height:100vh;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{width:100%;max-width:1160px;margin:0 auto;padding:0 18px}
.narrow{max-width:820px}
.center{text-align:center}
.muted{color:#a3a3a3}
.ic{flex-shrink:0}

/* moving background */
.bgfx{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.bgfx span{position:absolute;border-radius:50%;filter:blur(70px);opacity:.28;will-change:transform}
.bgfx span:nth-child(1){width:46vmax;height:46vmax;background:var(--ac);top:-18vmax;left:-14vmax}
.bgfx span:nth-child(2){width:38vmax;height:38vmax;background:var(--ac2);bottom:-16vmax;right:-12vmax}
.bgfx span:nth-child(3){width:26vmax;height:26vmax;background:var(--ac);top:40%;right:30%;opacity:.12}
.anim .bgfx span:nth-child(1){animation:fl1 22s ease-in-out infinite alternate}
.anim .bgfx span:nth-child(2){animation:fl2 26s ease-in-out infinite alternate}
.anim .bgfx span:nth-child(3){animation:fl3 30s ease-in-out infinite alternate}
@keyframes fl1{to{transform:translate(18vw,12vh) scale(1.15)}}
@keyframes fl2{to{transform:translate(-16vw,-10vh) scale(1.1)}}
@keyframes fl3{to{transform:translate(-22vw,14vh) scale(.85)}}
@media (prefers-reduced-motion:reduce){.bgfx span{animation:none!important}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--ac);color:#fff;font-weight:800;font-size:15px;padding:11px 20px;border-radius:12px;border:0;cursor:pointer;transition:transform .15s,filter .15s}
.btn:hover{filter:brightness(1.1);transform:translateY(-1px)}
.btn-big{width:100%;height:56px;font-size:18px;font-weight:900;border-radius:14px;box-shadow:0 10px 30px -10px var(--ac)}
.btn-sm{padding:8px 14px;font-size:14px;border-radius:10px}
.btn-ghost{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}

/* header */
.top{position:sticky;top:0;z-index:30;background:rgba(15,15,15,.78);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.06)}
.top-in{display:flex;align-items:center;gap:14px;height:64px}
.brand{display:flex;align-items:center;gap:9px;font-weight:900;font-size:21px}
.brand img{border-radius:10px}
.brand b{color:var(--ac)}
.nav{display:flex;gap:4px;margin-right:auto}
.nav a{padding:7px 11px;border-radius:9px;font-size:14px;font-weight:700;color:#cfcfcf}
.nav a:hover,.nav a.on{color:#fff;background:rgba(255,255,255,.07)}
.menu{display:none;background:none;border:0;color:#fff;cursor:pointer;margin-right:auto}
@media (max-width:980px){
  .menu{display:block}.hide-m{display:none}
  .nav{position:fixed;top:64px;right:0;left:0;flex-direction:column;background:rgba(15,15,15,.97);padding:10px 16px 18px;border-bottom:1px solid #222;transform:translateY(-130%);transition:transform .25s;margin:0}
  .nav.open{transform:none}
  .nav a{padding:12px;font-size:15px}
}

/* hero */
.hero{padding:34px 0 18px}
.hero-in{display:grid;grid-template-columns:1fr 330px;gap:40px;align-items:center}
.hero-in .phone{order:2}
.hero-h{font-size:clamp(28px,4.4vw,46px);font-weight:900;line-height:1.35}
.hero-h span{color:var(--ac)}
.lead{color:#c4c4c4;font-size:16px;margin:12px 0 20px;max-width:560px}
@media (max-width:860px){
  .hero{padding-top:20px}
  .hero-in{grid-template-columns:1fr;gap:22px}
  .hero-in .phone{order:0}
  .hero-txt{text-align:center}.lead{margin-inline:auto}
}

/* phone with app screenshots */
.phone{width:min(270px,70vw);margin:0 auto;position:relative}
.phone-in{position:relative;aspect-ratio:9/19.5;border-radius:36px;border:9px solid #0b0b0b;outline:2px solid #2a2a2a;background:#000;overflow:hidden;box-shadow:0 30px 60px -20px rgba(0,0,0,.8),0 0 60px -20px var(--ac)}
.shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s}
.shot.on{opacity:1}
.shot-empty{display:flex;align-items:center;justify-content:center;opacity:1;background:var(--card)}
.dots{display:flex;gap:5px;justify-content:center;margin-top:12px}
.dots i{width:7px;height:7px;border-radius:4px;background:#444;transition:all .3s}
.dots i.on{width:20px;background:var(--ac)}

/* download card */
.dl-card{background:rgba(28,28,28,.82);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:16px;max-width:520px}
.hero-txt .dl-card{margin-inline:0}
@media (max-width:860px){.hero-txt .dl-card{margin-inline:auto}}
.narrow .dl-card{margin:0 auto 18px}
.meta{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:12px;text-align:center}
.meta b{display:block;font-size:14px;font-weight:800}
.meta span{font-size:11.5px;color:#9a9a9a}
.dl-count{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:10px;font-size:13px;color:#b5b5b5}
.dl-count .ic{color:#2ecc71}.dl-count b{color:#2ecc71;font-weight:900}

/* sections */
.sec{padding:26px 18px}
.sec-head{margin-bottom:16px}
.sec-head h1,.sec-head h2{font-size:clamp(21px,2.6vw,28px);font-weight:900;display:flex;align-items:center;gap:10px}
.center .sec-head h1,.center .sec-head h2{justify-content:center}
.sec-head h1:before,.sec-head h2:before{content:"";width:5px;height:24px;border-radius:3px;background:var(--ac)}
.sec-head p{color:#a3a3a3;font-size:14px;margin-top:2px}
.card{background:var(--card);border:1px solid rgba(255,255,255,.06);border-radius:16px}
.crumbs{display:flex;gap:8px;font-size:13px;color:#a3a3a3;padding-top:18px}
.crumbs a:hover{color:#fff}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.stats div{background:var(--card);border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:16px 8px;text-align:center}
.stats .ic{color:var(--ac);margin:0 auto 4px}
.stats b{display:block;font-size:clamp(20px,3vw,30px);font-weight:900}
.stats span{font-size:13px;color:#b5b5b5}
@media (max-width:640px){.stats{grid-template-columns:repeat(2,1fr)}}

/* posters */
.row{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;scrollbar-width:thin}
.po{flex:0 0 auto;width:clamp(118px,15vw,160px);scroll-snap-align:start;display:block}
.po-im{position:relative;display:block;aspect-ratio:2/3;border-radius:12px;overflow:hidden;background:var(--card)}
.po-im img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.po:hover .po-im img{transform:scale(1.06)}
.po-t{display:block;font-weight:800;font-size:13.5px;margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.po-s{display:block;font-size:12px;color:#9a9a9a}
.rate{position:absolute;top:7px;right:7px;background:rgba(0,0,0,.72);color:#f5c518;font-size:11.5px;font-weight:800;padding:1px 7px;border-radius:7px}
.dub{position:absolute;bottom:7px;right:7px;background:var(--ac);font-size:11px;font-weight:800;padding:1px 7px;border-radius:7px}
.center .btn-ghost,.sec>.center{margin-top:14px}

/* slider B: big card */
.sl-b{position:relative;height:clamp(220px,32vw,340px);border-radius:18px;overflow:hidden;background:var(--card)}
.sl-b-item{position:absolute;inset:0;display:flex;align-items:flex-end;gap:16px;padding:20px;opacity:0;transition:opacity .7s;pointer-events:none}
.sl-b-item.on{opacity:1;pointer-events:auto}
.sl-b-bg{position:absolute;inset:-20px;background-size:cover;background-position:center;filter:blur(18px) brightness(.45)}
.sl-b-item img{position:relative;width:clamp(100px,13vw,150px);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.6)}
.sl-b-info{position:relative;display:flex;flex-direction:column;gap:4px}
.sl-b-info b{font-size:clamp(18px,2.6vw,28px);font-weight:900;line-height:1.3}
.sl-b-info span{color:#ccc;font-size:13px}
.badge{display:inline-block;align-self:flex-start;background:var(--ac);color:#fff!important;font-size:12px!important;font-weight:800;padding:2px 9px;border-radius:8px}
.sl-b-dots{position:absolute;bottom:14px;left:16px;display:flex;gap:5px}
.sl-b-dots i{width:7px;height:5px;border-radius:3px;background:rgba(255,255,255,.35);transition:all .3s}
.sl-b-dots i.on{width:22px;background:var(--ac)}

/* slider C: big numbers */
.sl-c{gap:4px}
.sl-c-item{flex:0 0 auto;display:flex;align-items:flex-end}
.big-n{font-size:clamp(80px,10vw,120px);font-weight:900;line-height:.78;color:transparent;-webkit-text-stroke:2px #5a5a5a;margin-left:-16px;position:relative;z-index:0}
.sl-c-item .po{position:relative;z-index:1;width:clamp(104px,13vw,140px)}

/* slider D: rotating cards */
.sl-d{position:relative;height:clamp(250px,32vw,330px);display:flex;justify-content:center;align-items:center;overflow:hidden}
.sl-d-item{position:absolute;width:clamp(130px,16vw,175px);transition:transform .6s,opacity .6s,filter .6s;opacity:0;pointer-events:none}
.sl-d-item .po-t,.sl-d-item .po-s{text-align:center}
.sl-d-item.p0{transform:none;opacity:1;z-index:3;pointer-events:auto}
.sl-d-item.p1{transform:translateX(-62%) scale(.84);opacity:.75;z-index:2;filter:brightness(.6)}
.sl-d-item.m1{transform:translateX(62%) scale(.84);opacity:.75;z-index:2;filter:brightness(.6)}
.sl-d-item.p2{transform:translateX(-112%) scale(.68);opacity:.4;z-index:1;filter:brightness(.45)}
.sl-d-item.m2{transform:translateX(112%) scale(.68);opacity:.4;z-index:1;filter:brightness(.45)}

/* features / plans / steps / faq */
.feat{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.feat .card{padding:18px}
.feat .ic{color:var(--ac)}
.feat h3{font-size:16px;margin:8px 0 2px}
.feat p{font-size:13.5px;color:#b0b0b0}
@media (max-width:860px){.feat{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.feat .card{padding:13px}.feat h3{font-size:14.5px}.feat p{font-size:12.5px}}

.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:10px}
.plan{padding:18px;text-align:center}
.plan.pop{border-color:var(--ac);box-shadow:0 0 0 1px var(--ac),0 14px 40px -18px var(--ac)}
.plan h3{font-size:17px}
.price{font-size:26px;font-weight:900;color:var(--ac);margin:4px 0 10px}
.plan ul,.rel ul{list-style:none;text-align:right;display:flex;flex-direction:column;gap:6px}
.plan li,.rel li{display:flex;gap:7px;align-items:flex-start;font-size:14px;color:#ddd}
.plan li .ic,.rel li .ic{color:#2ecc71;margin-top:4px}

.steps{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.steps li{display:flex;gap:12px;align-items:flex-start;padding:14px}
.steps i{font-style:normal;flex-shrink:0;width:34px;height:34px;border-radius:50%;background:var(--ac);display:flex;align-items:center;justify-content:center;font-weight:900}
.steps h3{font-size:15.5px}.steps p{font-size:13.5px;color:#b5b5b5}
@media (max-width:700px){.steps{grid-template-columns:1fr}}

.faq{display:flex;flex-direction:column;gap:8px}
.faq details{padding:0 16px}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 0}
.faq summary::-webkit-details-marker{display:none}
.faq summary h3{font-size:15px;font-weight:800}
.pm{width:14px;height:14px;position:relative;flex-shrink:0}
.pm:before,.pm:after{content:"";position:absolute;background:var(--ac);border-radius:2px;top:6px;left:0;width:14px;height:2px;transition:transform .2s}
.pm:after{transform:rotate(90deg)}
details[open] .pm:after{transform:rotate(0)}
.faq details p{color:#bdbdbd;font-size:14px;padding-bottom:14px}

.table{padding:6px 16px}
.table div{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.06);font-size:14px}
.table div:last-child{border:0}
.table span{color:#a3a3a3}

.rel{padding:16px 18px;margin-bottom:12px}
.rel-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.rel-h h1,.rel-h h2{font-size:20px;font-weight:900}
.rel-h time{color:#a3a3a3;font-size:13px;margin-right:auto}

.contact{padding:26px;display:flex;flex-direction:column;align-items:center;gap:12px}
.contact .ic{color:var(--ac)}
.contact p{color:#c5c5c5}
.e404{padding:70px 18px}
.big404{font-size:110px;font-weight:900;line-height:1;color:transparent;-webkit-text-stroke:3px var(--ac)}
.e404 h1{font-size:26px;margin:10px 0 4px}.e404 .btn{margin-top:16px}

/* footer */
.foot{margin-top:30px;border-top:1px solid rgba(255,255,255,.07);background:rgba(10,10,10,.6);padding:24px 0 30px}
.foot-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.tg{display:inline-flex;align-items:center;gap:7px;color:#5fb7ff;font-weight:700;font-size:14px}
.foot-nav{display:flex;flex-wrap:wrap;gap:6px 18px;margin:16px 0;font-size:14px;color:#bdbdbd}
.foot-nav a:hover{color:#fff}
.copy{font-size:12.5px;color:#7c7c7c}

/* poster popup */
.modal{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.72);display:flex;align-items:center;justify-content:center;padding:18px}
.modal[hidden]{display:none}
.modal-box{position:relative;background:var(--card);border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:22px 20px;width:100%;max-width:340px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;animation:pop .2s ease-out}
@keyframes pop{from{transform:scale(.94);opacity:0}}
.modal-box img{border-radius:12px;width:120px;height:180px;object-fit:cover;background:#111}
.modal-box h3{font-size:18px;font-weight:900;line-height:1.4}
.modal-box p{color:#bdbdbd;font-size:14px}
.modal-box .btn{width:100%}
.modal-x{position:absolute;top:10px;left:10px;background:none;border:0;color:#aaa;cursor:pointer}