/* ============ منصة مكسب — dedicated page (same identity) ============ */
.wa{position:fixed; z-index:850; left:26px; bottom:26px; width:58px; height:58px; border-radius:50%;
  display:grid; place-items:center; background:linear-gradient(140deg,#31D46A,#1FA855); color:#fff;
  box-shadow:0 14px 38px -10px rgba(37,190,100,.65); transition:transform .35s var(--ease)}
.wa:hover{transform:translateY(-4px) scale(1.05)}
.logo img{height:36px; width:auto; display:block}
.ftr .logo img{height:44px}
.logo{gap:0}
.mk{--on:#04142E}
.nav-links{background:rgba(2,13,31,.55); backdrop-filter:blur(14px);
  border:1px solid var(--line-2); border-radius:100px; padding:4px}
.nav .btn-sm.btn-gold{background:var(--on); color:var(--gold-hi); border:1px solid rgba(230,168,0,.45); box-shadow:none}

/* hero */
.phero{position:relative; min-height:92svh; display:flex; align-items:center; isolation:isolate; overflow:hidden;
  padding-block:140px 70px}
.phero-bg{position:absolute; inset:0; z-index:-3;
  background:radial-gradient(1200px 700px at 26% 46%, rgba(0,112,192,.20), transparent 66%),
             radial-gradient(700px 420px at 78% 12%, rgba(230,168,0,.07), transparent 70%),
             var(--void)}
.phero-bg img{display:none}
/* the data field: a 3-D grid that bends into the phone */
#phfield{position:absolute; inset:0; z-index:-2; width:100%; height:100%;
  opacity:0; transition:opacity 1.4s var(--ease)}
#phfield.on{opacity:1}
.phero .grid-lines{display:none}
/* the phone answers each arriving pulse */
.dev.pinged .dev-scr::after{content:""; position:absolute; inset:0; z-index:4; pointer-events:none;
  background:linear-gradient(112deg, rgba(240,192,64,0) 34%, rgba(240,192,64,.24) 50%, rgba(240,192,64,0) 66%);
  animation:devsweep .95s var(--ease) forwards}
@keyframes devsweep{from{transform:translate3d(-72%,0,0)} to{transform:translate3d(72%,0,0)}}
.dev.pinged{box-shadow:0 2px 0 rgba(255,255,255,.09) inset, 0 -2px 0 rgba(0,0,0,.6) inset,
  0 60px 110px -46px rgba(0,0,0,.95), 0 0 0 1px rgba(240,192,64,.30), 0 0 46px -6px rgba(240,192,64,.30)}
@media (prefers-reduced-motion:reduce){ #phfield{display:none} }
.phero-in{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(34px,5vw,80px); align-items:center; width:100%}
.chipnew{display:inline-flex; align-items:center; gap:8px; font-size:.6875rem; font-weight:800;
  color:var(--gold-hi); border:1px solid rgba(230,168,0,.35); background:rgba(230,168,0,.08);
  padding:5px 13px; border-radius:100px; letter-spacing:.1em; margin-bottom:24px}
.phero h1{font-size:clamp(2.6rem,6vw,5rem); font-weight:900; line-height:1.06; letter-spacing:-.045em; margin-bottom:22px}
.phero .lede{margin-bottom:36px}
.phero-cta{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:34px}
.store{display:flex; gap:10px; flex-wrap:wrap}
.store a{display:inline-flex; align-items:center; gap:11px; padding:11px 20px; border-radius:14px;
  border:1px solid var(--line); background:var(--glass); transition:.35s var(--ease)}
.store a:hover{border-color:rgba(230,168,0,.45); transform:translateY(-2px)}
.store b{display:block; font-family:var(--fd); font-weight:800; font-size:.9375rem; line-height:1.2}
.store span{font-size:.6875rem; color:var(--txt-3)}
.store svg{flex:none; color:var(--gold-hi)}

/* phone mock (shared with home) */
.phone{position:relative; width:min(310px,74vw); margin-inline:auto; aspect-ratio:9/18.6;
  border-radius:42px; border:1.5px solid var(--line); padding:12px;
  background:linear-gradient(170deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  box-shadow:0 50px 110px -40px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.1);
  transform:rotate(-4deg)}
.phone::before{content:""; position:absolute; top:12px; inset-inline:50%; transform:translateX(50%);
  width:34%; height:22px; background:#020D1F; border-radius:0 0 14px 14px; z-index:3}
.phone-scr{position:relative; width:100%; height:100%; border-radius:32px; overflow:hidden;
  background:#04142E; display:flex; flex-direction:column}
.phone-hd{padding:38px 18px 12px; display:flex; align-items:center; gap:8px}
.phone-hd img{height:20px}
.phone-hd i{margin-inline-start:auto; width:26px; height:26px; border-radius:9px; background:rgba(230,168,0,.14);
  border:1px solid rgba(230,168,0,.3); font-style:normal; display:grid; place-items:center; color:var(--gold-hi); font-size:.7rem}
.phone-card{margin:8px 14px; padding:14px; border-radius:16px; border:1px solid var(--line-2); background:rgba(255,255,255,.04)}
.phone-card b{display:block; font-family:var(--fd); font-weight:900; font-size:1.05rem; color:var(--txt)}
.phone-card span{font-size:.6875rem; color:var(--txt-3)}
.phone-bars{display:flex; align-items:flex-end; gap:5px; height:54px; margin-top:10px}
.phone-bars i{flex:1; border-radius:3px; background:linear-gradient(to top, rgba(230,168,0,.25), var(--gold-hi))}
.phone-row{display:flex; gap:8px; margin:0 14px 8px}
.phone-row div{flex:1; padding:10px 8px; text-align:center; border-radius:12px; border:1px solid var(--line-2); background:rgba(255,255,255,.03)}
.phone-row b{display:block; font-family:var(--fd); font-weight:900; font-size:.9rem; color:var(--gold-hi)}
.phone-row span{font-size:.6rem; color:var(--txt-3)}

/* real product frames */
.poster{width:min(340px,78vw); margin-inline:auto; border-radius:30px; overflow:hidden;
  border:1.5px solid var(--line); transform:rotate(-3deg);
  box-shadow:0 50px 110px -40px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.1)}
.poster img{display:block; width:100%}
.browser{margin-top:34px; border-radius:18px; overflow:hidden; border:1px solid var(--line);
  background:var(--elev); box-shadow:0 40px 90px -34px rgba(0,0,0,.9)}
.browser-hd{display:flex; align-items:center; gap:7px; padding:12px 18px; border-bottom:1px solid var(--line-2)}
.browser-hd i{width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.14)}
.browser-hd i:first-child{background:var(--gold)}
.browser-hd span{margin-inline-start:auto; font-size:.75rem; color:var(--txt-3);
  border:1px solid var(--line-2); border-radius:8px; padding:3px 14px; direction:ltr}
.browser img{display:block; width:100%}
@media (max-width:1080px){ .poster{transform:none} }

/* rail + features */
.rail{display:flex; align-items:center; gap:18px; padding-block:18px; border-block:1px solid var(--line-2);
  font-family:var(--fd); font-weight:700; font-size:.875rem; letter-spacing:.18em; color:var(--gold)}
.rail::after{content:""; flex:1; height:1px; background:var(--line-2)}
.rail em{font-style:normal; color:var(--txt-3); letter-spacing:0}
.feats{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:40px}
.feat{padding:clamp(24px,3vw,34px); border-radius:22px; border:1px solid var(--line-2);
  background:linear-gradient(165deg,rgba(255,255,255,.055),rgba(255,255,255,.015));
  transition:transform .5s var(--ease), border-color .5s var(--ease)}
.feat:hover{transform:translateY(-6px); border-color:rgba(230,168,0,.35)}
.feat i{width:48px; height:48px; border-radius:14px; display:grid; place-items:center; font-style:normal;
  background:rgba(230,168,0,.1); border:1px solid rgba(230,168,0,.25); color:var(--gold-hi); margin-bottom:20px}
.feat h3{font-size:1.1875rem; font-weight:900; margin-bottom:10px}
.feat p{font-size:.9375rem; color:var(--txt-2); line-height:1.9}

/* how it works */
.hsteps{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-2);
  border:1px solid var(--line-2); border-radius:22px; overflow:hidden; margin-top:40px}
.hstep{background:var(--ink); padding:clamp(26px,3.4vw,40px)}
.hstep b{display:block; font-family:var(--fd); font-weight:900; font-size:2rem; letter-spacing:-.04em;
  color:transparent; -webkit-text-stroke:1.4px var(--gold-hi); margin-bottom:14px; font-variant-numeric:tabular-nums}
.hstep h4{font-size:1.125rem; font-weight:800; margin-bottom:8px}
.hstep p{font-size:.9rem; color:var(--txt-2); line-height:1.85}

/* demo slab */
.demo6{display:grid; grid-template-columns:.9fr 1.1fr; border-block:1px solid var(--line-2); margin-top:clamp(60px,8vw,110px)}
.demo6-slab{background:linear-gradient(160deg,var(--gold-hi),var(--gold)); color:var(--on);
  padding:clamp(48px,6vw,90px) clamp(28px,4vw,72px); display:flex; flex-direction:column; justify-content:center}
.demo6-slab h2{color:var(--on); font-size:clamp(1.9rem,3.6vw,3.1rem); font-weight:900; letter-spacing:-.035em;
  line-height:1.16; margin-bottom:16px}
.demo6-slab p{font-size:1rem; line-height:1.95; color:rgba(4,20,46,.8); max-width:42ch}
.demo6-form{padding:clamp(40px,5vw,80px) clamp(28px,4vw,72px); background:var(--ink)}
.demo6-form h3{font-size:1.5rem; font-weight:900; margin-bottom:6px}
.demo6-form > p{font-size:.875rem; color:var(--txt-3); margin-bottom:30px}
@media (max-width:1080px){
  .phero-in{grid-template-columns:1fr}
  .phone{transform:rotate(0)}
  .feats,.hsteps{grid-template-columns:1fr}
  .demo6{grid-template-columns:1fr}
}
/* ================= REAL DEVICE FRAMES ================= */
.dev{position:relative; width:100%; max-width:var(--dw,300px); margin-inline:auto;
  border-radius:calc(var(--dw,300px) * .13); padding:calc(var(--dw,300px) * .026);
  background:linear-gradient(160deg,#2A3648 0%,#0D1626 38%,#060C16 72%,#1B2436 100%);
  box-shadow:0 2px 0 rgba(255,255,255,.09) inset,
             0 -2px 0 rgba(0,0,0,.6) inset,
             0 60px 110px -46px rgba(0,0,0,.95),
             0 10px 34px -14px rgba(0,0,0,.7);
  transition:transform .7s var(--ease)}
.dev::after{content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(122deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.05) 16%,
             rgba(255,255,255,0) 34%, rgba(255,255,255,0) 76%, rgba(255,255,255,.07) 100%)}
.dev-scr{position:relative; overflow:hidden; border-radius:calc(var(--dw,300px) * .108);
  background:#0F3352; isolation:isolate}
.dev-scr img{display:block; width:100%; height:auto}
/* the ambient light the screen throws on the page */
.dev-glow{position:absolute; inset:12% -14% -10% -14%; z-index:-1; pointer-events:none;
  background:radial-gradient(60% 46% at 50% 60%, rgba(0,112,192,.42), transparent 72%);
  filter:blur(46px)}
.dev:hover{transform:translateY(-8px)}

/* the screens gallery */
.screens{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2.4vw,34px);
  margin-top:clamp(34px,4vw,56px); align-items:start}
.screen{position:relative}
.screen .dev{--dw:250px}
.screen:nth-child(odd) .dev{transform:translateY(18px)}
.screen:nth-child(odd) .dev:hover{transform:translateY(10px)}
.screen figcaption{margin-top:clamp(20px,2.4vw,30px); text-align:center}
.screen b{display:block; font-family:var(--fd); font-size:.9375rem; font-weight:700;
  color:var(--txt); margin-bottom:7px}
.screen span{display:block; font-size:.8125rem; line-height:1.75; color:var(--txt-3);
  max-width:26ch; margin-inline:auto}
.screen i{font-style:normal; display:inline-block; font-family:var(--fd); font-size:.625rem;
  font-weight:800; letter-spacing:.14em; color:var(--gold); margin-bottom:9px}
@media (max-width:980px){ .screens{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .screens{grid-template-columns:1fr} .screen:nth-child(odd) .dev{transform:none} }

/* store buttons, real links */
.stores{display:flex; gap:12px; flex-wrap:wrap; margin-top:26px}
.stores a{display:inline-flex; align-items:center; gap:12px; padding:12px 22px; border-radius:14px;
  border:1px solid var(--line); transition:.35s var(--ease)}
.stores a:hover{border-color:rgba(230,168,0,.5); transform:translateY(-2px);
  background:rgba(255,255,255,.03)}
.stores b{display:block; font-family:var(--fd); font-weight:800; font-size:.9375rem; line-height:1.2}
.stores em{display:block; font-style:normal; font-size:.6875rem; color:var(--txt-3); margin-top:2px}
.stores svg{flex:none; color:var(--gold-hi)}