*,*::before,*::after{box-sizing:border-box;margin:0;padding:0} :root{ --bg:#ffffff; --bg-soft:#f3faf7; --bg-mint:#eaf6f1; --surface:#ffffff; --ink:#0c2b26; --ink-2:#4d6b64; --ink-3:#7d968f; --em:#0fae93; --em-strong:#0a8f78; --em-deep:#076a57; --em-tint:#e6f7f2; --em-lite:#18c4a4; --em-lite-2:#18e0b0; --em-done:#076453; /* شريط «الأمان» الغامق */ --sec-1:#07231c; --sec-2:#0a2f24; --sec-3:#072a20; --sec-accent:#15d3a6; --sec-icon:#4fe6bf; --sec-text:#a7c7bd; --sec-text-2:#9fbfb5; --sec-on:#052018; --em-tint-2:#d6f5ec; --line:#e4efeb; --line-2:#d3e7e0; --shadow:0 20px 50px -24px rgba(9,60,50,.28); --maxw:1200px; --sp:4px; --font:"Cairo",system-ui,-apple-system,"Segoe UI",sans-serif; } /* ===== هوية نسخة زد ===== نفس الملف بيخدم الموقعين. الصفحة بتحدّد نسختها بـ وهنا بنعيد تعريف توكنات اللون بس — كل باقي التنسيق مشترك حرفيًّا. ليه توكنات مش ملف تاني: ملف تاني معناه طلب شبكة زيادة، وأهم من كده معناه ملفّان بيفرقوا مع الوقت. كده أي تعديل تنسيق بيوصل النسختين. */ :root[data-edition="zid"]{ --bg-soft:#f7f5ff; --bg-mint:#efeafb; --ink:#1b1235; --ink-2:#5f5578; --ink-3:#8b82a3; --em:#7c4de0; --em-strong:#5f35c4; --em-deep:#3f1f94; --em-tint:#efe9ff; --em-lite:#9a72f0; --em-lite-2:#b494ff; --em-done:#3f1f94; --sec-1:#1a1030; --sec-2:#241640; --sec-3:#1e1338; --sec-accent:#9a72f0; --sec-icon:#c4b0ff; --sec-text:#bdb0d6; --sec-text-2:#a99bc4; --sec-on:#150c2b; --em-tint-2:#e4dcf7; --line:#e7e0f7; --line-2:#d8cdf0; --shadow:0 20px 50px -24px rgba(40,20,90,.28); } html{scroll-behavior:smooth;overflow-x:clip} body{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:clip} a{color:inherit;text-decoration:none} .wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:24px} .num{font-variant-numeric:tabular-nums} ::selection{background:rgba(15,174,147,.2)} /* ============ الهيدر ============ */ header{position:fixed;inset-block-start:0;inset-inline:0;z-index:50} .hbar{display:flex;align-items:center;height:86px;max-width:var(--maxw);margin-inline:auto;padding-inline:32px; gap:calc(var(--sp)*6);transition:height .28s cubic-bezier(.22,1,.36,1)} .hbg{position:absolute;inset:0;z-index:-1;background:rgba(255,255,255,0);backdrop-filter:blur(0); border-block-end:1px solid transparent;transition:background .3s ease, backdrop-filter .3s ease, border-color .3s ease, box-shadow .3s ease} header.scrolled .hbg{background:rgba(255,255,255,.72);backdrop-filter:blur(20px) saturate(1.5); border-block-end:1px solid var(--line-2);box-shadow:0 4px 16px -12px rgba(9,60,50,.18)} header.scrolled .hbar{height:72px} /* الشعار */ .brand{display:flex;align-items:center;gap:calc(var(--sp)*3);flex-shrink:0} .mark{position:relative;width:42px;height:42px;border-radius:13px;flex-shrink:0;overflow:hidden;display:grid;place-items:center; background:#03171b; box-shadow:0 7px 16px -6px rgba(15,174,147,.5); transition:transform .3s cubic-bezier(.22,1,.36,1)} .brand:hover .mark{transform:translateY(-1px) scale(1.03)} .mark svg{width:100%;height:100%;display:block} .brand .wm{display:flex;flex-direction:column;line-height:1.15} .brand .wm b{font-size:20px;font-weight:800;letter-spacing:-.2px;color:var(--ink)} .brand .wm span{font-size:12px;font-weight:600;color:var(--ink-3);margin-block-start:1px} /* روابط التنقّل — حبّة إيمرالد فاتحة عند المرور/النشاط */ nav.mainnav{margin-inline:auto} nav.mainnav ul{display:flex;align-items:center;gap:calc(var(--sp)*1);list-style:none} nav.mainnav li{position:relative} nav.mainnav>ul>li>a{display:flex;align-items:center;gap:5px;padding:10px 18px;border-radius:11px;font-size:15.5px;font-weight:600;color:var(--ink-2); transition:color .18s ease, background .18s ease} nav.mainnav>ul>li>a:hover{color:var(--em-strong);background:var(--em-tint)} nav.mainnav>ul>li>a.active{color:var(--em-strong);background:var(--em-tint);font-weight:700} /* «دليل المستخدم» بقى مدخلًا مستقلًّا على طرف الشريط جنب زرّ التحميل — مش بند تنقّل. زرّ محدَّد بإطار عشان يتقري كمدخل، مش كرابط في قائمة. */ .guide{position:relative;flex-shrink:0} .guide-btn{display:inline-flex;align-items:center;gap:7px;white-space:nowrap; font-size:14px;font-weight:700;color:var(--em-strong); background:var(--em-tint);border:1px solid rgba(15,174,147,.26); border-radius:11px;padding:9px 14px;transition:background .16s ease,border-color .16s ease} .guide-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;flex-shrink:0} .guide:hover .guide-btn,.guide:focus-within .guide-btn{background:var(--em-tint-2);border-color:rgba(15,174,147,.45)} /* الزرّ على حافة الشريط اليسرى، فالقائمة بتفتح **جوّه** الصفحة مش برّه: تثبيتها من طرفها الأيسر يخلّيها تمتدّ لليمين. العكس كان بيخرج ٢٧px برّه الشاشة على شاشة ١٤٠٠. */ .guide .mega{left:0;right:auto;transform:translateY(6px)} .guide:hover .mega,.guide:focus-within .mega{transform:translateY(0)} @media (max-width:1100px){.guide{display:none}} nav.mainnav .chev{width:15px;height:15px;stroke:currentColor;stroke-width:2.2;fill:none;transition:transform .25s ease;opacity:.7} .has-mega:hover>a .chev,.has-mega:focus-within>a .chev{transform:rotate(180deg)} /* قائمة «المميزات» المنسدلة (mega-menu) */ .mega{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(6px);padding-block-start:12px;z-index:70; opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s ease, transform .22s cubic-bezier(.22,1,.36,1)} .has-mega:hover .mega,.has-mega:focus-within .mega{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)} /* ١٥ صفحة دليل: عمودين كانوا هيطوّلوا القائمة لحدّ ما تخرج من الشاشة، فبقت ٣ أعمدة وتنزل لعمودين على الشاشات الضيّقة. */ .mega-card{background:#fff;border:1px solid var(--line-2);border-radius:20px;box-shadow:var(--shadow);padding:14px;width:min(880px,94vw)} .mega-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px} @media (max-width:1280px){.mega-card{width:min(620px,92vw)}.mega-grid{grid-template-columns:1fr 1fr}} .mega-item{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:13px;transition:background .16s ease} .mega-item:hover{background:var(--em-tint)} .mega-item .mi{width:38px;height:38px;flex-shrink:0;border-radius:11px;display:grid;place-items:center; background:linear-gradient(145deg,var(--em),var(--em-strong));box-shadow:0 8px 16px -8px rgba(15,174,147,.5)} .mega-item .mi svg{width:19px;height:19px;stroke:#fff;fill:none;stroke-width:1.9} .mega-item .mt{display:flex;flex-direction:column;line-height:1.3;min-width:0} .mega-item .mt b{font-size:14.5px;font-weight:800;color:var(--ink)} .mega-item .mt small{font-size:12px;color:var(--ink-3);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .mega-all{display:flex;align-items:center;justify-content:center;gap:7px;margin-block-start:6px;padding:12px; border-block-start:1px solid var(--line);color:var(--em-strong);font-weight:800;font-size:14px} .mega-all svg{width:16px;height:16px;stroke:currentColor;stroke-width:2.4;fill:none} .mega-all:hover{color:var(--em-deep)} /* أزرار */ .actions{display:flex;align-items:center;gap:calc(var(--sp)*3);flex-shrink:0} .trust{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--ink-3);white-space:nowrap} .trust svg{width:15px;height:15px;stroke:var(--em);flex-shrink:0} .btn{display:inline-flex;align-items:center;gap:9px;border:0;cursor:pointer;font-family:inherit;font-weight:700; font-size:15px;border-radius:12px;padding:12px 22px;position:relative;overflow:hidden;white-space:nowrap; transition:transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s} .btn svg{width:18px;height:18px} .btn-em{background:linear-gradient(145deg,var(--em-lite),var(--em) 55%,var(--em-strong));color:#fff; box-shadow:0 10px 22px -8px rgba(15,174,147,.55)} .btn-em:hover{transform:translateY(-2px);box-shadow:0 16px 30px -10px rgba(15,174,147,.68)} .btn-em::after{content:"";position:absolute;inset:0;background:linear-gradient(65deg,transparent 32%,rgba(255,255,255,.4) 50%,transparent 68%);transform:translateX(120%);transition:transform .65s} .btn-em:hover::after{transform:translateX(-120%)} /* زر تحميل مصغّر للموبايل + زر القائمة */ .dl-mini{display:none;width:44px;height:44px;border-radius:12px;flex-shrink:0;align-items:center;justify-content:center; background:linear-gradient(145deg,var(--em-lite),var(--em) 55%,var(--em-strong));color:#fff; box-shadow:0 8px 18px -8px rgba(15,174,147,.55)} .dl-mini svg{width:20px;height:20px} .burger{display:none;width:44px;height:44px;border:1px solid var(--line-2);border-radius:12px;background:#fff;cursor:pointer; align-items:center;justify-content:center;flex-shrink:0} .burger svg{width:22px;height:22px;stroke:var(--ink)} /* قائمة الموبايل */ .msheet{position:fixed;inset:0;z-index:60;background:rgba(6,40,34,.4);backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .25s} .msheet.on{opacity:1;pointer-events:auto} .msheet .panel{position:absolute;inset-block-start:0;inset-inline:0;background:#fff;border-radius:0 0 22px 22px;padding:26px 22px 26px; transform:translateY(-16px);opacity:0;transition:transform .3s cubic-bezier(.22,1,.36,1), opacity .3s} .msheet.on .panel{transform:none;opacity:1} .msheet .mtop{margin-block-end:16px} .msheet .mtop .btn{width:100%;justify-content:center;font-size:16px;padding:14px} .msheet .mtrust{text-align:center;margin-block-start:10px;font-size:12.5px;color:var(--ink-3);font-weight:600} .msheet a.mlink{display:block;padding:14px 12px;border-radius:12px;font-size:16px;font-weight:700;color:var(--ink);border-block-end:1px solid var(--line)} .msheet a.mlink:last-of-type{border-block-end:0} .msheet .msub{display:grid;grid-template-columns:1fr 1fr;gap:2px;padding:6px 0 12px;border-block-end:1px solid var(--line)} .msheet .msub a{padding:10px 12px;border-radius:10px;font-size:14px;font-weight:600;color:var(--ink-2)} .msheet .msub a:hover{background:var(--em-tint);color:var(--em-strong)} .msheet .msub a.all{grid-column:1 / -1;color:var(--em-strong);font-weight:800} .msheet .mx{position:absolute;inset-block-start:20px;inset-inline-end:20px;width:40px;height:40px;border-radius:11px;border:1px solid var(--line-2);background:#fff;display:grid;place-items:center;cursor:pointer} .msheet .mx svg{width:20px;height:20px;stroke:var(--ink)} /* ============ خلفية الهيرو (مبدئية — نظبطها بعدين) ============ */ .hero{position:relative;padding-block:150px 90px;overflow:hidden; background: radial-gradient(ellipse 60% 50% at 82% 12%, rgba(15,174,147,.10), transparent 60%), radial-gradient(ellipse 50% 40% at 12% 30%, rgba(15,174,147,.07), transparent 55%), linear-gradient(180deg,var(--bg-soft),var(--bg) 70%)} .hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.35; background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:46px 46px; -webkit-mask-image:radial-gradient(ellipse 80% 55% at 50% 0%,#000,transparent 72%); mask-image:radial-gradient(ellipse 80% 55% at 50% 0%,#000,transparent 72%)} .hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,45%) minmax(0,55%);gap:46px;align-items:center;text-align:start} .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;color:var(--em-strong); background:var(--em-tint);border:1px solid var(--line-2);padding:7px 15px;border-radius:99px;margin-block-end:22px} .eyebrow i{width:7px;height:7px;border-radius:50%;background:var(--em)} h1{font-size:clamp(32px,4.6vw,54px);font-weight:900;line-height:1.32;letter-spacing:-.5px;color:var(--ink);text-wrap:balance} h1 .hl{color:var(--em-strong)} .hero p{font-size:clamp(16px,1.5vw,18.5px);color:var(--ink-2);max-width:36ch;margin:18px 0 28px;line-height:1.8} .cta{display:flex;gap:14px;justify-content:flex-start;flex-wrap:wrap} .btn-ghost{background:transparent;color:var(--ink-2);border:1px solid var(--line);font-weight:700} .btn-ghost:hover{background:var(--em-tint);border-color:var(--em);color:var(--em-strong)} .trust-row{display:flex;gap:8px 14px;justify-content:flex-start;align-items:center;flex-wrap:wrap;margin-block-start:22px;font-size:13.5px;color:var(--ink-3);font-weight:600} .trust-row .ti{display:inline-flex;align-items:center;gap:7px} .trust-row .ti svg{width:15px;height:15px;stroke:var(--em);flex-shrink:0} .trust-row .ti b{color:var(--ink-2);font-weight:700} .trust-row .sep{width:4px;height:4px;border-radius:50%;background:var(--line-2)} /* عرض المنتج — لقطة حقيقية «مركّبة» على منصّة داكنة */ .showcase{position:relative} .showcase .glow{position:absolute;inset:-14% -6% -10% -10%;z-index:0;filter:blur(56px); background:radial-gradient(ellipse 60% 60% at 45% 40%,rgba(15,174,147,.30),transparent 66%)} .frame{position:relative;z-index:1;border-radius:15px;overflow:hidden;padding:7px; background:linear-gradient(160deg,#0e2019,#081611);border:1px solid rgba(6,40,33,.18); box-shadow:0 2px 4px rgba(6,40,33,.06), 0 36px 72px -26px rgba(6,40,33,.5), 0 80px 130px -60px rgba(15,174,147,.32); transform:perspective(2000px) rotateY(4deg) rotateX(1.5deg);transform-origin:center right; transition:transform .5s cubic-bezier(.22,1,.36,1)} .showcase:hover .frame{transform:perspective(2000px) rotateY(2deg) rotateX(.5deg)} .frame img{display:block;width:100%;height:auto;border-radius:9px} .float-card{position:absolute;z-index:3;background:#fff;border:1px solid rgba(6,40,33,.07);border-radius:14px; box-shadow:0 14px 34px -10px rgba(6,40,33,.3);padding:13px 15px;display:flex;align-items:center;gap:12px; animation:floaty 6.5s ease-in-out infinite} .fc-sales{inset-block-end:-22px;inset-inline-start:-26px} .float-card .ic{width:40px;height:40px;border-radius:11px;background:linear-gradient(145deg,var(--em),var(--em-strong));display:grid;place-items:center;flex-shrink:0} .float-card .ic svg{width:20px;height:20px;stroke:#fff;fill:none} .float-card .t2{font-size:11.5px;color:var(--ink-3);font-weight:600} .float-card .amt{display:flex;align-items:center;gap:8px;margin-block-start:2px} .float-card .big{font-size:19px;font-weight:900;color:var(--ink);line-height:1} .float-card .up{font-size:11.5px;font-weight:800;color:var(--em-strong);background:var(--em-tint);padding:2px 7px;border-radius:7px} @keyframes floaty{50%{transform:translateY(-7px)}} .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)} .reveal.in{opacity:1;transform:none} .reveal[data-d="1"]{transition-delay:.07s}.reveal[data-d="2"]{transition-delay:.14s} .reveal[data-d="3"]{transition-delay:.21s}.reveal[data-d="4"]{transition-delay:.28s} /* تكبير الصور (Lightbox) */ .frame{cursor:zoom-in} .lightbox{position:fixed;inset:0;z-index:200;background:rgba(6,22,17,.88);backdrop-filter:blur(6px); display:flex;align-items:center;justify-content:center;padding:32px;opacity:0;pointer-events:none;transition:opacity .25s} .lightbox.on{opacity:1;pointer-events:auto} .lightbox img{max-width:min(1500px,94vw);max-height:92vh;width:auto;height:auto;border-radius:12px; box-shadow:0 50px 110px -24px rgba(0,0,0,.65);border:1px solid rgba(255,255,255,.14); transform:scale(.965);transition:transform .3s cubic-bezier(.22,1,.36,1)} .lightbox.on img{transform:none} .lightbox .lx{position:absolute;inset-block-start:22px;inset-inline-end:22px;width:46px;height:46px;border-radius:13px; border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.12);display:grid;place-items:center;cursor:pointer} .lightbox .lx svg{width:22px;height:22px;stroke:#fff} .lightbox .hint{position:absolute;inset-block-end:22px;inset-inline:0;text-align:center;color:rgba(255,255,255,.6);font-size:13px;font-weight:600} /* ============ الأقسام ============ */ .sec{padding-block:86px} .sec.soft{background:var(--bg-soft);border-block:1px solid var(--line)} .kicker{display:inline-block;font-size:12.5px;font-weight:800;color:var(--em-strong);letter-spacing:.4px; background:var(--em-tint);padding:5px 13px;border-radius:8px;margin-block-end:14px} h2{font-size:clamp(26px,3.3vw,40px);font-weight:900;line-height:1.32;letter-spacing:-.3px;color:var(--ink);text-wrap:balance} .sec-head{max-width:660px;margin-block-end:18px} .sec-head.center{margin-inline:auto;text-align:center} .sec-head p{color:var(--ink-2);font-size:17px;margin-block-start:14px;line-height:1.85} .feat{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding-block:40px} .feat.rev .f-txt{order:2} .f-txt h3{font-size:clamp(21px,2.5vw,29px);font-weight:900;line-height:1.4;color:var(--ink)} .f-txt>p{color:var(--ink-2);margin-block:14px 22px;font-size:16.5px;line-height:1.9} .flist{display:flex;flex-direction:column;gap:13px} .flist li{display:flex;align-items:flex-start;gap:12px;list-style:none;font-size:15.5px;color:var(--ink);font-weight:500} .flist .ck{width:24px;height:24px;border-radius:8px;flex-shrink:0;display:grid;place-items:center;margin-block-start:1px;background:var(--em-tint)} .flist .ck svg{width:14px;height:14px;stroke:var(--em-strong)} .f-vis{position:relative} .f-vis .glow{position:absolute;inset:-10%;z-index:0;filter:blur(48px);background:radial-gradient(ellipse 60% 60% at 50% 40%,rgba(15,174,147,.16),transparent 66%)} .f-vis .frame{transform:none} /* شبكة الأدوات — كروت بريميوم عائمة */ .mods{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-block-start:40px} .mod{position:relative;overflow:hidden;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:18px;align-content:center; background:linear-gradient(180deg,#fff,#fbfefd);border:1px solid var(--line);border-radius:20px;padding:24px 22px; box-shadow:0 2px 10px -6px rgba(9,60,50,.08); transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s,border-color .3s} .mod::after{content:"";position:absolute;inset-block-start:-45%;inset-inline-end:-35%;width:190px;height:190px;border-radius:50%; background:radial-gradient(circle,rgba(15,174,147,.12),transparent 70%);opacity:0;transition:opacity .35s;pointer-events:none} .mod:hover{transform:translateY(-6px);border-color:rgba(15,174,147,.32);box-shadow:0 32px 60px -30px rgba(9,60,50,.32)} .mod:hover::after{opacity:1} .mod .mi{grid-column:1;grid-row:1 / span 2;align-self:center;position:relative;width:54px;height:54px;border-radius:16px;display:grid;place-items:center; background:linear-gradient(145deg,var(--em-lite),var(--em) 55%,var(--em-strong)); box-shadow:0 14px 26px -12px rgba(15,174,147,.55),inset 0 1px 1px rgba(255,255,255,.4);transition:transform .3s cubic-bezier(.22,1,.36,1)} .mod:hover .mi{transform:scale(1.07) rotate(-3deg)} .mod .mi svg{width:26px;height:26px;stroke:#fff;fill:none;stroke-width:1.9} .mod h4{grid-column:2;grid-row:1;align-self:end;position:relative;font-size:17px;font-weight:800;margin-block-end:5px;color:var(--ink)} .mod p{grid-column:2;grid-row:2;align-self:start;position:relative;font-size:13.5px;color:var(--ink-2);line-height:1.7} /* الفيديو التعريفي — نافذة تطبيق غامقة حول يوتيوب (نفس لغة إطار الهيرو) */ .video-shell{position:relative;max-width:860px;margin:36px auto 0} .video-shell .glow{position:absolute;inset:-10% -6%;z-index:0;filter:blur(56px); background:radial-gradient(ellipse 60% 60% at 50% 40%,rgba(15,174,147,.26),transparent 66%)} .video-win{position:relative;z-index:1;border-radius:16px;overflow:hidden; background:linear-gradient(180deg,#141f22,#0b1315);border:1px solid #23383b; box-shadow:0 2px 4px rgba(6,40,33,.06),0 40px 80px -28px rgba(6,40,33,.55),0 70px 120px -60px rgba(15,174,147,.3)} .ytbox{position:relative;aspect-ratio:16/9;background:#000;cursor:pointer;overflow:hidden} .ytthumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block; transition:transform .5s cubic-bezier(.22,1,.36,1),filter .4s} .ytbox:hover .ytthumb{transform:scale(1.035);filter:brightness(.7)} .ytplay{position:absolute;inset:0;margin:auto;width:72px;height:72px;border-radius:50%;border:0;padding:0;cursor:pointer; background:linear-gradient(145deg,var(--em-lite),var(--em) 55%,var(--em-strong));color:#fff;display:grid;place-items:center; box-shadow:0 16px 34px -10px rgba(15,174,147,.6),0 0 0 12px rgba(255,255,255,.08); transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s} .ytbox:hover .ytplay{transform:scale(1.08)} .ytplay svg{width:24px;height:24px;margin-inline-start:3px} .ytiframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block} @media (max-width:560px){.ytplay{width:56px;height:56px}.ytplay svg{width:20px;height:20px}} /* الأمان — قسم غامق (تباين وإحساس حماية) */ .secure{padding-block:80px;position:relative;overflow:hidden; background:linear-gradient(160deg,var(--sec-1),var(--sec-2) 55%,var(--sec-3))} .secure::before{content:"";position:absolute;inset-block-start:-20%;inset-inline-end:-8%;width:420px;height:420px;border-radius:50%; background:radial-gradient(circle,rgba(15,174,147,.22),transparent 68%);filter:blur(20px);pointer-events:none} .secure .box{position:relative;background:transparent;border:0;padding:0;box-shadow:none;overflow:visible} .secure .box::before{display:none} .secure .s-head{display:flex;align-items:center;gap:18px;margin-block-end:32px} .secure .shield{width:60px;height:60px;border-radius:17px;flex-shrink:0;display:grid;place-items:center;background:linear-gradient(145deg,var(--em-lite-2),var(--em) 60%,var(--em-strong));box-shadow:0 16px 32px -12px rgba(15,174,147,.6)} .secure .shield svg{width:30px;height:30px;stroke:var(--sec-on);fill:none;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round} .secure .s-head h2{color:#eafaf4;font-size:clamp(23px,2.9vw,33px);line-height:1.25} .secure .s-head p{color:var(--sec-text);font-size:15px;margin-block-start:7px;line-height:1.7;max-width:58ch} .secure .sgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .secure .scard{background:rgba(255,255,255,.045);border:1px solid rgba(140,220,190,.14);border-radius:18px;padding:24px 22px; transition:transform .25s cubic-bezier(.22,1,.36,1),background .25s,border-color .25s} .secure .scard:hover{transform:translateY(-4px);background:rgba(255,255,255,.07);border-color:rgba(15,174,147,.4)} .secure .scard .si{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;margin-block-end:15px; background:rgba(15,174,147,.16);border:1px solid rgba(15,174,147,.34)} .secure .scard .si svg{width:23px;height:23px;stroke:var(--sec-icon);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .secure .scard h4{font-size:16.5px;font-weight:800;margin-block-end:7px;color:#eafaf4} .secure .scard p{font-size:13.5px;color:var(--sec-text-2);line-height:1.7} /* التحميل — باند إيمرالد (الـ CTA النهائي يلمع) */ .dl{padding-block:80px} .dl .box{position:relative;overflow:hidden;border:0;border-radius:28px;padding:52px 48px; background:linear-gradient(145deg,var(--sec-accent),var(--em) 42%,var(--em-deep)); box-shadow:0 34px 70px -26px rgba(10,143,120,.6); display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center} .dl .box::before{content:"";position:absolute;inset-block-start:-40%;inset-inline-start:-12%;width:420px;height:420px;border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.18),transparent 66%);pointer-events:none} .dl .box>*{position:relative} .dl .dl-left .kicker{background:rgba(255,255,255,.22);color:#fff} .dl .dl-left h2{color:#fff;font-size:clamp(28px,3.6vw,42px)} .dl .dl-left>p{color:rgba(255,255,255,.92);font-size:16.5px;margin-block:14px 24px;line-height:1.85;max-width:42ch} .dl .dlbtn{background:#fff;color:var(--em-strong);font-size:17px;padding:16px 38px;box-shadow:0 16px 30px -12px rgba(4,40,32,.45)} .dl .dlbtn:hover{transform:translateY(-2px);box-shadow:0 22px 40px -14px rgba(4,40,32,.5)} .dl .dlbtn svg{stroke:var(--em-strong)} .dl .dlmeta{display:flex;gap:8px 14px;align-items:center;flex-wrap:wrap;margin-block-start:20px;font-size:13px;color:rgba(255,255,255,.9);font-weight:600} .dl .dlmeta b{color:#fff} .dl .dlmeta .sep{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.45)} .dl .steps{display:flex;flex-direction:column;gap:13px} .dl .step{position:relative;display:grid;grid-template-columns:auto 1fr;column-gap:16px;align-items:center; background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);border-radius:16px;padding:16px 18px; backdrop-filter:blur(6px);transition:transform .25s cubic-bezier(.22,1,.36,1),background .25s} .dl .step:hover{transform:translateX(-5px);background:rgba(255,255,255,.2)} .dl .step .sn{width:40px;height:40px;border-radius:50%;background:#fff;color:var(--em-strong);font-weight:900;display:grid;place-items:center;font-size:16px;box-shadow:0 8px 16px -6px rgba(4,40,32,.35)} .dl .step h5{font-size:15px;font-weight:800;margin-block-end:3px;color:#fff} .dl .step p{font-size:12.5px;color:rgba(255,255,255,.85);margin:0;line-height:1.6} /* الأسئلة الشائعة — عمودين (عنوان ثابت + أكورديون مصقول) */ .faq{padding-block:84px;background:var(--bg-soft);border-block:1px solid var(--line)} .faq .wrap{display:grid;grid-template-columns:minmax(0,35%) minmax(0,65%);gap:52px;align-items:start} .faq-aside{position:sticky;top:106px} .faq-aside .kicker{margin-block-end:14px} .faq-aside h2{font-size:clamp(26px,3vw,38px);line-height:1.3} .faq-aside>p{color:var(--ink-2);font-size:16px;margin-block-start:14px;line-height:1.85;max-width:34ch} .faq-ask{margin-block-start:26px;background:linear-gradient(160deg,#fff,#fbfefd);border:1px solid var(--line);border-radius:18px;padding:22px; box-shadow:0 2px 12px -6px rgba(9,60,50,.08)} .faq-ask h4{font-size:16.5px;font-weight:800;color:var(--ink);margin-block-end:6px} .faq-ask>p{font-size:13.5px;color:var(--ink-2);line-height:1.7;margin-block-end:16px} .faq-ask .btn{width:100%;justify-content:center} .faq-list{display:flex;flex-direction:column;gap:10px} .faq-item{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:border-color .25s,box-shadow .25s,transform .25s} .faq-item:hover{border-color:var(--line-2)} .faq-item[open]{border-color:rgba(15,174,147,.42);box-shadow:0 16px 38px -24px rgba(9,60,50,.26)} .faq-item summary{list-style:none;cursor:pointer;padding:17px 20px;display:flex;align-items:center;justify-content:space-between;gap:14px; font-size:16px;font-weight:700;color:var(--ink);transition:color .2s} .faq-item summary::-webkit-details-marker{display:none} .faq-item summary:hover,.faq-item[open] summary{color:var(--em-strong)} .faq-item .q-ic{width:28px;height:28px;flex-shrink:0;border-radius:8px;background:var(--em-tint);display:grid;place-items:center;transition:transform .3s cubic-bezier(.22,1,.36,1),background .3s} .faq-item .q-ic svg{width:14px;height:14px;stroke:var(--em-strong);stroke-width:2.6;stroke-linecap:round} .faq-item[open] .q-ic{background:var(--em);transform:rotate(135deg)} .faq-item[open] .q-ic svg{stroke:#fff} .faq-item .ans{padding:0 20px 18px;color:var(--ink-2);font-size:14.5px;line-height:1.85} /* الفوتر — متعدد الأعمدة */ footer{border-block-start:1px solid var(--line);padding-block:52px 34px;background:var(--bg-soft)} .foot-top{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:36px;padding-block-end:34px;border-block-end:1px solid var(--line)} .foot-brand .brand{margin-block-end:16px} .foot-brand>p{font-size:14px;color:var(--ink-2);line-height:1.85;max-width:36ch;margin-block-end:18px} .foot-col h5{font-size:14.5px;font-weight:800;color:var(--ink);margin-block-end:14px} .foot-col a{display:block;font-size:14px;color:var(--ink-2);font-weight:600;padding-block:6px;transition:color .15s} .foot-col a:hover{color:var(--em-strong)} .foot-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block-start:26px;font-size:13px;color:var(--ink-3)} .foot-legal{display:flex;align-items:center;gap:14px;flex-wrap:wrap} .foot-legal a{color:var(--ink-3);font-weight:600;transition:color .15s} .foot-legal a:hover{color:var(--em-strong)} .foot-legal .dot{width:3px;height:3px;border-radius:50%;background:var(--line-2)} /* ============ الأسعار ============ */ .pricing .sec-head{margin-block-end:38px} .price-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;max-width:840px;margin-inline:auto;align-items:start} .price-card{position:relative;background:#fff;border:1.5px solid var(--line);border-radius:20px;padding:28px 26px;display:flex;flex-direction:column; transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s,border-color .25s} .price-card:hover{transform:translateY(-5px);box-shadow:0 28px 56px -30px rgba(9,60,50,.32)} .price-card.pc-feat{border-color:var(--em);background:linear-gradient(180deg,#ecf9f4 0%,#ffffff 44%);box-shadow:0 26px 60px -26px rgba(15,174,147,.42)} .price-card.pc-feat::after{content:"";position:absolute;inset-block-start:14px;inset-inline-end:14px;width:190px;height:190px;border-radius:50%; background:radial-gradient(circle,rgba(15,174,147,.16),transparent 68%);pointer-events:none;z-index:0} .price-card.pc-feat::before{content:"الأكثر قيمة";position:absolute;inset-block-start:-13px;inset-inline-start:50%;transform:translateX(-50%);z-index:2; background:linear-gradient(145deg,var(--em-lite),var(--em) 55%,var(--em-strong));color:#fff;font-size:12px;font-weight:800;padding:5px 16px;border-radius:999px;white-space:nowrap;box-shadow:0 8px 18px -8px rgba(15,174,147,.6)} .price-card>*{position:relative;z-index:1} .pc-tag{font-size:13.5px;font-weight:800;color:var(--em-strong);letter-spacing:.3px} .pc-amt{display:flex;align-items:baseline;gap:7px;margin-block:10px 0} .pc-amt b{font-size:47px;font-weight:900;color:var(--ink);line-height:1;letter-spacing:-1px} .price-card.pc-feat .pc-amt b.num{color:var(--em-strong)} .pc-amt span{font-size:14.5px;font-weight:700;color:var(--ink-3)} /* سطر الخصم: السعر القديم مشطوب + شارة التوفير. عنصر واحد فليكس عشان الشارة تفضل ملزوقة بالرقم مهما اتغيّر طوله لمّا السعر يتحدّث من الـAPI. */ .pc-was{display:flex;align-items:center;gap:9px;margin-block-start:7px;min-height:22px} .pc-was s{font-size:16px;font-weight:700;color:var(--ink-3);text-decoration-thickness:2px;opacity:.85} .pc-was em{font-style:normal;font-size:12px;font-weight:800;color:#fff;background:var(--em-strong); padding:3px 9px;border-radius:999px;letter-spacing:.2px} .pc-sub{font-size:13px;color:var(--ink-2);font-weight:600;margin-block-start:6px} .pc-list{list-style:none;display:flex;flex-direction:column;gap:11px;margin-block:18px 18px;padding-block-start:18px;border-block-start:1px solid var(--line)} .price-card.pc-feat .pc-list{border-block-start-color:rgba(15,174,147,.22)} .pc-list li{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--ink-2);line-height:1.55;font-weight:500} .pc-list .ck{width:20px;height:20px;flex-shrink:0;border-radius:6px;background:var(--em);display:grid;place-items:center;margin-block-start:1px;box-shadow:0 3px 7px -3px rgba(15,174,147,.6)} .pc-list .ck svg{width:12px;height:12px;stroke:#fff;fill:none;stroke-width:3.2} /* نصّ البند: عنصر واحد يمدّد، فالشارة تفضل ملزوقة في الطرف مهما طال السطر */ .pc-list .t{flex:1 1 auto;min-width:0} /* الميزة المحدودة في التجربة: علامة ✕ بدل ✓ — الصدق أهم من التزيين */ .pc-list .ck.no{background:#FEE9E9;box-shadow:none} .pc-list .ck.no svg{stroke:#DC2626;stroke-width:3.4} /* قيمة السقف في شارة مستقلة بدل ما تتلزق بعد شرطة في نص البند */ .pc-list .lim{flex-shrink:0;align-self:flex-start;margin-block-start:1px;font-size:11px;font-weight:800; padding:2px 9px;border-radius:999px;white-space:nowrap;background:#FEE9E9;color:#B91C1C;border:1px solid #FBD0D0} .price-card.pc-feat .pc-list .lim{background:var(--em-tint);color:var(--em-strong);border-color:rgba(15,174,147,.28)} /* الملاحظة: النصّ لازم يبقى عنصرًا واحدًا. كانت ‎

‎ فيها ‎display:flex‎ ونصّ خام جنبه ‎‎ — والـ‎‎ بيبقى عنصر flex **مستقل**، فالجملة الواحدة كانت بتتقسّم لأعمدة ضيّقة مكسّرة. الـ‎‎ بيلمّ النصّ كله في عنصر واحد فيسيل طبيعي. */ .pc-note{display:flex;gap:8px;align-items:flex-start;font-size:11.5px;line-height:1.6;color:var(--ink-3);background:rgba(255,255,255,.7);border:1px solid var(--line);border-radius:11px;padding:10px 12px;margin-block-end:16px} .pc-note svg{width:15px;height:15px;flex-shrink:0;margin-block-start:1px;stroke:var(--em-strong);fill:none} .pc-note span{flex:1 1 auto;min-width:0} .pc-btn{width:100%;justify-content:center;margin-block-start:auto;padding-block:14px;font-size:15.5px} .price-foot{text-align:center;margin-block-start:24px;font-size:13px;color:var(--ink-3);line-height:1.7} @media (max-width:680px){.price-grid{grid-template-columns:1fr;max-width:420px}} /* ============ الصفحات القانونية ============ */ .fp-hero .updated{display:inline-block;font-size:13px;color:var(--ink-3);background:#fff;border:1px solid var(--line-2);border-radius:99px;padding:6px 15px;margin-block-start:18px;font-weight:600} .legal{max-width:820px;margin-inline:auto} .legal>p:first-child{font-size:16px;color:var(--ink-2);line-height:1.95;margin-block-end:6px} .legal h2{font-size:20px;font-weight:800;color:var(--ink);margin-block:34px 12px;line-height:1.4} .legal p{color:var(--ink-2);font-size:15.5px;line-height:1.95;margin-block-end:12px} .legal ul{margin:6px 0 14px;padding-inline-start:22px;color:var(--ink-2);font-size:15.5px;line-height:1.9} .legal li{margin-block-end:8px} .legal li::marker{color:var(--em)} .legal a{color:var(--em-strong);font-weight:700} .legal a:hover{color:var(--em-deep);text-decoration:underline} .legal b{color:var(--ink);font-weight:800} /* قدرات بارزة */ .hl-band{padding-block:72px;background:var(--bg-soft);border-block:1px solid var(--line)} .hl-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-block-start:36px} .hl-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:18px;padding:28px 22px;overflow:hidden; transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s,border-color .25s} .hl-card:hover{transform:translateY(-5px);border-color:var(--line-2);box-shadow:0 24px 50px -28px rgba(9,60,50,.3)} .hl-card .hi{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;margin-block-end:16px; background:linear-gradient(145deg,var(--em),var(--em-strong));box-shadow:0 12px 24px -10px rgba(15,174,147,.5)} .hl-card .hi svg{width:26px;height:26px;stroke:#fff;fill:none;stroke-width:1.9} .hl-card h4{font-size:18px;font-weight:800;color:var(--ink);margin-block-end:8px} .hl-card p{font-size:14px;color:var(--ink-2);line-height:1.8} @media (max-width:1023px){ .hero .wrap{grid-template-columns:1fr;gap:52px;text-align:center} .hero p{margin-inline:auto} .cta,.trust-row{justify-content:center} .frame{transform:none} .showcase{max-width:820px;margin-inline:auto;width:100%} .feat,.feat.rev{grid-template-columns:1fr;gap:34px} .feat.rev .f-txt{order:0} .mods{grid-template-columns:repeat(2,1fr)} .hl-grid{grid-template-columns:repeat(2,1fr)} .dl .box{grid-template-columns:1fr;gap:36px} .foot-top{grid-template-columns:1fr 1fr} .faq .wrap{grid-template-columns:1fr;gap:30px} .faq-aside{position:static} .faq-aside>p{max-width:none} } @media (max-width:920px){ nav.mainnav,.actions .trust,.actions>.btn-em{display:none} .dl-mini{display:flex} .burger{display:flex} .hbar{justify-content:space-between;padding-inline:18px;gap:12px} .brand{min-width:0} .brand .wm b{white-space:nowrap} } @media (max-width:400px){ .brand .wm span{display:none} .hbar{padding-inline:14px} } @media (max-width:680px){ .float-card{display:none} .mods{grid-template-columns:1fr} .hl-grid{grid-template-columns:1fr} .secure .sgrid{grid-template-columns:1fr} .secure .s-head{flex-direction:column} .dl .box{padding:32px} .foot-top{grid-template-columns:1fr;gap:28px} .sec{padding-block:60px} } @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}} /* ===================== صفحات الأقسام التفصيلية ===================== */ .subpage{padding-block-start:110px} .fp-hero{padding-block:54px 42px;background:linear-gradient(180deg,var(--bg-soft),var(--bg));border-block-end:1px solid var(--line)} .crumbs{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink-3);font-weight:600;margin-block-end:18px} .crumbs a:hover{color:var(--em-strong)} .crumbs .sepc{opacity:.5} .fp-hero .kicker{margin-block-end:14px} .fp-hero h1{font-size:clamp(30px,4vw,48px);font-weight:900;line-height:1.25;color:var(--ink);letter-spacing:-.3px} .fp-hero>.wrap>p{color:var(--ink-2);font-size:18px;line-height:1.9;max-width:60ch;margin-block-start:16px} .fp-sec{padding-block:58px} .fp-sec.soft{background:var(--bg-soft);border-block:1px solid var(--line)} .fp-sec h2{font-size:clamp(23px,2.8vw,32px);font-weight:900;color:var(--ink);margin-block-end:14px;line-height:1.3} .fp-sec .lead{max-width:66ch;color:var(--ink-2);font-size:16.5px;line-height:1.9;margin-block-end:32px} .annot{max-width:1120px;margin-inline:auto} .annot .stage{position:relative;direction:ltr;border-radius:16px;overflow:hidden;border:1px solid rgba(6,40,33,.16);background:linear-gradient(160deg,#0e2019,#081611);padding:8px;box-shadow:0 34px 72px -26px rgba(6,40,33,.5);container-type:inline-size} .annot .stage img{display:block;width:100%;height:auto;border-radius:9px;cursor:zoom-in} /* مقاس العلامات نسبي لعرض الصورة (cqw) مش ثابت بالبكسل. كان 30px ثابت: على الديسكتوب ≈٢.٧٪ من عرض الصورة، وعلى موبايل ≈٩٪ — يعني تلات أضعاف الحجم النسبي، فالعلامات كانت بتغطّي الصورة وتتراكب. الـclamp بيمنعها تصغر لدرجة ما تتقراش أو تكبر عن الأصل. */ .annot .mk{position:absolute;width:clamp(15px,2.6cqw,30px);height:clamp(15px,2.6cqw,30px);border-radius:50%;background:linear-gradient(145deg,var(--em-lite-2),var(--em-strong));color:#fff;font-weight:900;font-size:clamp(9px,1.3cqw,14px);display:grid;place-items:center;transform:translate(-50%,-50%);border:max(1.5px,.23cqw) solid #fff;box-shadow:0 6px 16px -4px rgba(4,40,32,.55);z-index:2} /* حلقة النبض بتكبّر الحجم البصري للعلامة ٤٠٪ تقريبًا. على الصور الضيّقة العلامات أصلًا متقاربة، فالحلقة بتخلّيها تتراكب — بنشيلها هناك. */ .annot .mk::before{content:"";position:absolute;inset:clamp(-6px,-.55cqw,-3px);border-radius:50%;border:max(1.2px,.18cqw) solid rgba(24,224,176,.55);animation:mkpulse 2.2s ease-out infinite} @container (max-width:560px){.annot .mk::before{display:none}} @keyframes mkpulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.85);opacity:0}} .annot .legend{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-block-start:26px} .annot .lg{display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:start;background:#fff;border:1px solid var(--line);border-radius:14px;padding:15px 17px;transition:border-color .2s,box-shadow .2s,transform .2s} .annot .lg:hover{border-color:rgba(15,174,147,.4);box-shadow:0 16px 32px -24px rgba(9,60,50,.24);transform:translateY(-2px)} .annot .lg .n{width:28px;height:28px;border-radius:50%;background:linear-gradient(145deg,var(--em-lite),var(--em-strong));color:#fff;font-weight:900;font-size:14px;display:grid;place-items:center;flex-shrink:0} .annot .lg h5{font-size:15px;font-weight:800;color:var(--ink);margin-block-end:3px} .annot .lg p{font-size:13.5px;color:var(--ink-2);line-height:1.7} .pts{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .pt{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px;transition:transform .25s,box-shadow .25s,border-color .25s} .pt:hover{transform:translateY(-4px);border-color:var(--line-2);box-shadow:0 22px 44px -28px rgba(9,60,50,.24)} .pt .pi{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;margin-block-end:14px;background:linear-gradient(145deg,var(--em-lite),var(--em-strong));box-shadow:0 12px 22px -10px rgba(15,174,147,.5)} .pt .pi svg{width:23px;height:23px;stroke:#fff;fill:none;stroke-width:1.9} .pt h4{font-size:16.5px;font-weight:800;color:var(--ink);margin-block-end:6px} .pt p{font-size:13.5px;color:var(--ink-2);line-height:1.7} .fp-nav{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding-block:20px} .fp-nav a{display:flex;align-items:center;gap:12px;font-weight:800;color:var(--ink);font-size:15.5px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 20px;transition:.2s} .fp-nav a:hover{color:var(--em-strong);border-color:rgba(15,174,147,.4);box-shadow:0 16px 32px -24px rgba(9,60,50,.22)} .fp-nav a svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.4;flex-shrink:0} .fp-nav a .lbl{display:block;font-size:11.5px;color:var(--ink-3);font-weight:700;margin-block-end:2px} .fp-nav a:hover .lbl{color:var(--em-strong)} .fp-nav a.back{justify-content:flex-start} .fp-nav a.next{justify-content:flex-end;text-align:end} @media (max-width:560px){.fp-nav{grid-template-columns:1fr}} .morelink{display:inline-flex;align-items:center;gap:8px;color:var(--em-strong);font-weight:800;font-size:15px;margin-block-start:18px} .morelink svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2.4;transition:transform .2s} .morelink:hover svg{transform:translateX(-4px)} @media (max-width:820px){.annot .legend{grid-template-columns:1fr}.pts{grid-template-columns:1fr}} /* على الشاشات الضيّقة الصورة بتتضغط لدرجة إن تفاصيلها ما تتقراش، والعلامات بتتلزق في بعض لأن المسافة بينها نسبة من عرض أصغر. فبنسيب للصورة عرضًا أدنى مقروءًا وبتتسحب أفقيًا — العلامات ساعتها بتفضل بنفس النسبة اللي على الديسكتوب والمسافات بينها تبان. التمرير على .annot مش .stage: العلامات مرسّاة على .stage، فلو هو اللي بيسكرول هتفضل واقفة مكانها والصورة تتحرّك تحتها. */ @media (max-width:700px){ .annot{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin} .annot .stage{min-width:540px} } /* ===================== تواصل معنا ===================== */ .contact-grid{display:grid;grid-template-columns:minmax(0,38%) minmax(0,62%);gap:44px;align-items:start} .contact-info h2{font-size:clamp(26px,3vw,38px);font-weight:900;color:var(--ink);line-height:1.3} .contact-info>p{color:var(--ink-2);font-size:16.5px;line-height:1.85;margin-block-start:14px;max-width:38ch} .cinfo{display:flex;flex-direction:column;gap:14px;margin-block-start:26px} .cinfo .ci{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px} .cinfo .ci .cic{width:44px;height:44px;border-radius:12px;flex-shrink:0;display:grid;place-items:center;background:var(--em-tint);border:1px solid rgba(15,174,147,.2)} .cinfo .ci .cic svg{width:22px;height:22px;stroke:var(--em-strong);fill:none;stroke-width:1.9} .cinfo .ci h5{font-size:14.5px;font-weight:800;color:var(--ink);margin-block-end:3px} .cinfo .ci p{font-size:13.5px;color:var(--ink-2);line-height:1.7} .cform{background:#fff;border:1px solid var(--line-2);border-radius:22px;padding:32px;box-shadow:var(--shadow)} .cform .field{margin-block-end:16px} .cform label{display:block;font-size:14px;font-weight:700;color:var(--ink);margin-block-end:7px} .cform input,.cform textarea{width:100%;border:1px solid var(--line-2);border-radius:12px;padding:13px 15px;font:inherit;font-size:15px;color:var(--ink);background:var(--bg-soft);transition:border-color .2s,box-shadow .2s} .cform input::placeholder,.cform textarea::placeholder{color:var(--ink-3)} .cform input:focus,.cform textarea:focus{outline:none;border-color:var(--em);box-shadow:0 0 0 3px var(--em-tint);background:#fff} .cform textarea{min-height:140px;resize:vertical;line-height:1.7} .cform .row2{display:grid;grid-template-columns:1fr 1fr;gap:16px} .cform button{width:100%;justify-content:center;font-size:16px;padding:15px;margin-block-start:6px} .cf-status{margin-block-start:14px;font-size:14px;font-weight:700;padding:12px 16px;border-radius:12px;display:none;text-align:center} .cf-status.ok{display:block;background:var(--em-tint);color:var(--em-strong);border:1px solid rgba(15,174,147,.35)} .cf-status.err{display:block;background:#fdeeee;color:#c0392b;border:1px solid #f3caca} @media (max-width:900px){.contact-grid{grid-template-columns:1fr;gap:30px}.cform .row2{grid-template-columns:1fr}} /* ===== صندوق المتجر التجريبي + الأسئلة الشائعة (صفحة الاستيراد) ===== */ .trybox{max-width:820px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px} .tryurl{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .tryurl .trylbl{font-size:12.5px;font-weight:800;color:var(--ink-3);width:100%} .tryurl code{direction:ltr;unicode-bidi:isolate;font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:15px;font-weight:700;color:var(--em-strong);background:var(--bg-soft); border:1px solid var(--line);border-radius:10px;padding:10px 14px;flex:1;min-width:240px} .trycopy{border:0;cursor:pointer;font-family:inherit;font-size:14px;font-weight:800;color:#fff; border-radius:10px;padding:11px 18px;background:linear-gradient(145deg,var(--em-lite),var(--em-strong)); box-shadow:0 12px 22px -12px rgba(15,174,147,.55);transition:transform .2s,box-shadow .2s} .trycopy:hover{transform:translateY(-1px);box-shadow:0 16px 28px -14px rgba(15,174,147,.6)} .trycopy.done{background:linear-gradient(145deg,var(--em-strong),var(--em-done))} .trynote{margin-block-start:14px;font-size:14px;color:var(--ink-2);line-height:1.8} /* اسم الكلاس ‎gfaq‎ مش ‎faq‎ عن قصد: ‎.faq‎ مستخدَم أصلًا لسكشن الأسئلة في الصفحة الرئيسية (‎.faq .wrap‎)، واستخدامه هنا كان بيدهس تنسيقه ويطلّع علامة «+» زيادة ويوسّط النصوص. */ .gfaqs{max-width:900px;display:grid;gap:12px} .gfaq{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 20px;transition:border-color .2s} .gfaq[open]{border-color:rgba(15,174,147,.4)} .gfaq summary{cursor:pointer;font-weight:800;font-size:15.5px;color:var(--ink);list-style:none; display:flex;align-items:center;gap:10px;text-align:start} .gfaq summary::-webkit-details-marker{display:none} .gfaq summary::before{content:"+";width:22px;height:22px;flex-shrink:0;border-radius:7px; display:grid;place-items:center;font-size:15px;color:#fff;background:linear-gradient(145deg,var(--em-lite),var(--em-strong))} .gfaq[open] summary::before{content:"‘2"} .gfaq p{margin-block-start:10px;padding-inline-start:32px;font-size:14.5px;color:var(--ink-2);line-height:1.9;text-align:start} @media (max-width:640px){.tryurl code{min-width:100%}.trycopy{width:100%}} /* ===== ربط الرقم على الصورة بوصفه تحت ===== الوقوف على أي رقم بيبرز بطاقته (والعكس) — من غير كده المستخدم بيدوّر بعينه على الوصف اللي يخصّ الرقم وسط ٧ بطاقات. */ .annot .lg.hi{border-color:var(--em-strong);background:linear-gradient(160deg,#ecfffa,#dff7f0); box-shadow:0 0 0 3px rgba(24,224,176,.22),0 18px 34px -22px rgba(9,60,50,.3);transform:translateY(-2px)} .annot .lg.hi h5{color:var(--em-strong)} .annot .lg.hi .n{box-shadow:0 0 0 4px rgba(24,224,176,.25)} .annot .mk{cursor:pointer;transition:transform .18s,box-shadow .18s} .annot .mk.hi{transform:translate(-50%,-50%) scale(1.22);box-shadow:0 0 0 5px rgba(24,224,176,.3),0 8px 20px -4px rgba(4,40,32,.6);z-index:3} @media (prefers-reduced-motion:reduce){.annot .lg.hi,.annot .mk.hi{transition:none}}