/* =====================================================================
   صفحة خدمة صفحات الهبوط ومعرض القوالب (/c/landing)
   الواجهة: ثلاث صفحات حقيقية على جوالات وتحتها روابطها — هذا اللي يشتريه العميل فعلاً
   ===================================================================== */
.lph{padding:clamp(22px,4vw,46px) 0 clamp(26px,4vw,52px);overflow:hidden}
.lph__g{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(24px,4vw,56px);align-items:center}
.lph h1{font-size:clamp(32px,4.6vw,56px);line-height:1.18;letter-spacing:-.01em;max-width:13ch}
.lph__lead{margin-top:16px;font-size:clamp(17px,1.7vw,19.5px);color:var(--text);max-width:46ch}
.lph__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.lph__price{margin-top:16px;font-size:15.5px;color:var(--muted)}
.lph__price b{font-size:19px;color:var(--ink)}
.lph__price s{color:var(--muted)}
.lph .hero__trust{margin-top:18px}
/* الجوالات */
.lph__show{position:relative;height:clamp(420px,46vw,560px)}
.ph{position:absolute;top:0;inset-inline-start:50%;margin:0;width:clamp(190px,19vw,250px);display:flex;flex-direction:column;align-items:center;gap:12px;transform-origin:50% 100%}
.ph__scr{width:100%;aspect-ratio:390/780;border-radius:clamp(26px,2.6vw,34px);border:clamp(7px,.7vw,9px) solid #171B42;background:#fff;overflow:hidden;box-shadow:0 2px 4px rgba(20,24,56,.08),0 30px 60px rgba(20,24,56,.22)}
.ph__scr img{width:100%;height:100%;object-fit:cover;object-position:top}
.ph figcaption{display:inline-flex;align-items:center;height:30px;padding:0 13px;border-radius:99px;background:#fff;border:1px solid var(--line);font-size:13px;font-weight:600;color:var(--ink);box-shadow:var(--sh);white-space:nowrap}
.ph--1{z-index:3;transform:translateX(50%)}
.ph--2{z-index:2;transform:translateX(calc(50% + 62%)) translateY(34px) rotate(-7deg) scale(.86)}
.ph--3{z-index:1;transform:translateX(calc(50% - 62%)) translateY(34px) rotate(7deg) scale(.86)}
[dir="rtl"] .ph--1{transform:translateX(50%)}
/* المعرض */
.lpg{background:linear-gradient(var(--paper),var(--paper)) top/100% 100% no-repeat}
.lpg__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.8vw,22px)}
.tp{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:border-color .2s,box-shadow .2s}
.tp:hover{border-color:#C9CDE6;box-shadow:var(--sh)}
.tp__shot{position:relative;display:block;aspect-ratio:64/42;background:var(--tb,#F5F5F7);overflow:hidden;border-bottom:1px solid var(--line)}
.tp__shot img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .5s var(--ease)}
.tp:hover .tp__shot img{transform:scale(1.03)}
.tp__shot span{position:absolute;inset:0;display:grid;place-items:center;font-weight:700;color:var(--tp)}
.tp__b{display:flex;flex-direction:column;gap:4px;padding:16px 16px 18px;flex:1}
.tp__b h3{font-size:18px}
.tp__b p{font-size:14.5px;color:var(--text);line-height:1.65}
.tp__b small{font-size:13px;color:var(--muted)}
.tp__a{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:12px}
.tp__a .btn{flex:1 1 auto;min-height:40px;padding:8px 12px;font-size:14.5px}
/* وش تحصل */
.lpi__g{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(24px,4vw,56px);align-items:start}
.lpi h2{font-size:clamp(24px,3vw,32px);margin-bottom:18px}
.lpi__l{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px 26px}
.lpi__l li{display:flex;gap:10px;align-items:flex-start;font-size:16px;color:var(--text);line-height:1.7}
.lpi__l .ic{width:20px;height:20px;color:var(--ok);flex:none;margin-top:4px}
.lpi__box{padding:clamp(22px,3vw,30px);border-radius:var(--r-l);background:var(--coal);color:#D9DCF0;box-shadow:var(--sh-2,0 20px 50px rgba(26,31,75,.2))}
.lpi__box .pill{background:rgba(242,169,59,.16);color:var(--gold-hi)}
.lpi__box .btn--gold{background:var(--gold);border-color:var(--gold);color:var(--on-gold)}
.lpi__box .btn--gold:hover{background:var(--gold-hi);border-color:var(--gold-hi)}
.lpi__price{display:flex;align-items:baseline;gap:10px;margin:14px 0 8px}
.lpi__price b{font-size:40px;color:#fff;line-height:1.1}
.lpi__price s{color:#9DA2C2}
.lpi__price span{color:#B5BAD6}
.lpi__m{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:4px 0 14px;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1)}
.lpi__m span{font-size:14px;color:#C8CCE3;line-height:1.5}
.lpi__m b{font-size:20px;color:#fff;white-space:nowrap}
.lpi__m small{font-size:13px;color:#B5BAD6;font-weight:500}
.lpi__box>p{font-size:15px;margin-bottom:18px}
.lpi__box .hint{color:#9DA2C2;text-align:center;margin:12px 0 0;font-size:13.5px}
@media (max-width:1100px){.lpg__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){
  .lph__g{grid-template-columns:minmax(0,1fr)}
  .lph h1{max-width:none}
  .lph__show{height:clamp(380px,92vw,520px);margin-top:6px}
  .ph{width:clamp(170px,44vw,230px)}
  .lpi__g{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){.lpg__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.lpi__l{grid-template-columns:1fr}}
@media (max-width:520px){
  .lpg__grid{grid-template-columns:minmax(0,1fr)}
  .lph__cta .btn{flex:1 1 auto}
  .ph--2{transform:translateX(calc(50% + 50%)) translateY(30px) rotate(-7deg) scale(.82)}
  .ph--3{transform:translateX(calc(50% - 50%)) translateY(30px) rotate(7deg) scale(.82)}
}
@media (prefers-reduced-motion:reduce){.tp__shot img{transition:none}}