:root{--bg:#050B16;--blue:#2D8CFF;--blue2:#1E6BFF;--silver:#E8ECF2;--dim:#8fa3bf;--ds:60px;--W:380px;--k:.15;color-scheme:dark;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 70px);scroll-behavior:smooth}
*{box-sizing:border-box;margin:0}
body{background:var(--bg);color:var(--silver);font-family:"Cairo",Tahoma,Arial,sans-serif;line-height:1.7;overflow-x:hidden}
body.lock{overflow:hidden;height:100vh}
#bg{position:fixed;inset:0;width:100%;height:100%;z-index:0}
main,#view,footer{position:relative;z-index:2}
section{padding:80px 6vw;max-width:1200px;margin:auto}
#hero{padding-top:150px;padding-bottom:40px}
h1{font-size:clamp(2.4rem,7vw,5.6rem);font-weight:900;line-height:1.15}
h2{font-size:clamp(1.9rem,4.5vw,3.4rem);font-weight:900;line-height:1.25;margin-bottom:10px}
p.lead{color:var(--dim);font-size:clamp(1rem,2vw,1.25rem);max-width:60ch;margin-top:14px}
.blue{color:var(--blue)}
.btn{display:inline-block;margin-top:24px;padding:14px 30px;border:1px solid var(--blue);color:var(--silver);background:rgba(45,140,255,.12);border-radius:999px;font:inherit;font-weight:600;text-decoration:none;cursor:pointer;transition:background .25s,box-shadow .25s,transform .2s}
.btn:hover,.btn:focus-visible{background:var(--blue2);box-shadow:0 0 30px rgba(45,140,255,.6);outline:none}
.rv{opacity:0;transform:translateY(36px);transition:opacity .9s,transform .9s}
.rv.in{opacity:1;transform:none}
[hidden]{display:none!important}
/* ===== intro ===== */
#veil{position:fixed;inset:0;background:#000;z-index:50;transition:opacity 1s}
#veil.off{opacity:0;pointer-events:none}
#scene{position:fixed;z-index:59;left:calc((100vw - var(--W))/2);top:calc((100vh - var(--W))/2);width:var(--W);height:var(--W);pointer-events:none;transition:opacity .5s}
.sv{width:100%;height:100%;border-radius:50%;box-shadow:0 0 40px rgba(45,140,255,.3);transition:opacity .35s;will-change:transform}
.sv img{width:100%;height:100%;display:block;border-radius:50%;object-fit:contain}
#scene.swap .sv{opacity:0;transition:none}
.txt{position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);width:calc(var(--W)*1.15);text-align:center;opacity:0;transition:opacity 1s}
#scene.showtxt .txt{opacity:1}
#scene.hidetxt .txt{opacity:0;transition:opacity .5s}
.pt{direction:ltr;font-weight:900;font-size:calc(var(--W)*.2);line-height:1.1;letter-spacing:.03em}
.pt .p{background:linear-gradient(#fff,#a9b4c6);-webkit-background-clip:text;background-clip:text;color:transparent}
.pt .t{color:var(--blue2);text-shadow:0 0 18px rgba(45,140,255,.5)}
.ln{position:relative;height:2px;margin:calc(var(--W)*.035) 6%;background:linear-gradient(90deg,transparent,var(--blue),transparent)}
.ln::after{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;margin:-4.5px;background:var(--blue);border-radius:50%;box-shadow:0 0 10px var(--blue)}
.tag{font-size:calc(var(--W)*.095);color:#cfd6e2;font-weight:600}
.pulse{animation:pulse .9s ease-out}
@keyframes pulse{0%{transform:scale(1)}38%{transform:scale(1.14)}100%{transform:scale(1)}}
#logo{position:fixed;left:0;top:0;z-index:60;width:var(--W);height:var(--W);transform-origin:0 0;transform:translate(calc((100vw - var(--W))/2),calc((100vh - var(--W))/2));cursor:pointer;will-change:transform;opacity:0;transition:opacity .4s}
#logo.vis,#logo.dock{opacity:1}#logo.vis{transition:none}
#logo.dock{transform:translate(calc(100vw - var(--ds) - 16px),calc(env(safe-area-inset-top,0px) + 12px)) scale(var(--k));transition:transform 1.7s cubic-bezier(.65,0,.35,1),opacity .4s}
#logo.inst{transition:none!important}
.lg{width:100%;height:100%;border-radius:50%;overflow:hidden;box-shadow:0 0 40px rgba(45,140,255,.3)}
.lg img{width:100%;height:100%;display:block;user-select:none;-webkit-user-drag:none}
#skip{position:fixed;z-index:70;bottom:calc(env(safe-area-inset-bottom,0px) + 18px);left:50%;transform:translateX(-50%);background:none;border:1px solid #334;color:var(--dim);padding:6px 18px;border-radius:99px;font:inherit;cursor:pointer}
/* ===== nav tree ===== */
#tree{position:fixed;z-index:40;top:calc(env(safe-area-inset-top,0px) + 12px);right:calc(16px + var(--ds));height:var(--ds);display:flex;align-items:center;opacity:0;pointer-events:none}
#tree.show{opacity:1;pointer-events:auto}
#tree.hide{opacity:0;pointer-events:none}
.seg{height:2px;width:0;flex:none;background:var(--blue);box-shadow:0 0 8px var(--blue);transition:width .3s}
#tree.show .seg{width:30px}
.s0{transition-delay:0s}.s1{transition-delay:.4s}.s2{transition-delay:.8s}
.w{position:relative;flex:none;opacity:0;transition:opacity .25s}
#tree.show .w{opacity:1}
.w0{transition-delay:.25s}.w1{transition-delay:.65s}.w2{transition-delay:1.05s}
#tree.solo .s1,#tree.solo .w1,#tree.solo .s2,#tree.solo .w2{display:none}
.nb{font:inherit;font-size:.9rem;font-weight:600;color:var(--silver);background:rgba(5,11,22,.94);border:1px solid var(--blue);border-radius:10px;padding:5px 16px;cursor:pointer;box-shadow:0 0 14px rgba(45,140,255,.3);white-space:nowrap}
.nb:hover,.w.open>.nb{background:var(--blue2)}
.drop{position:absolute;top:100%;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;visibility:hidden;transition:visibility 0s .2s}
.drop.open{visibility:visible;transition-delay:0s}
.stub{width:2px;height:22px;background:var(--blue);box-shadow:0 0 8px var(--blue);transform:scaleY(0);transform-origin:top;transition:transform .15s}
.drop.open .stub{transform:scaleY(1)}
.kids{display:flex;gap:14px;direction:ltr}
.kid{position:relative;padding-top:20px;display:flex;justify-content:center}
.kid::before{content:"";position:absolute;top:0;left:50%;margin-left:-1px;width:2px;height:20px;background:var(--blue);transform:scaleY(0);transform-origin:top;transition:transform .15s}
.kid::after{content:"";position:absolute;top:0;left:-7px;right:-7px;height:2px;background:var(--blue);transform:scaleX(0);transition:transform .2s}
.kid:first-child::after{left:50%}.kid:last-child::after{right:50%}
.drop.open .kid::after{transform:scaleX(1);transition-delay:.15s}
.drop.open .kid::before{transform:scaleY(1);transition-delay:.3s}
.kid .nb{opacity:0;transition:opacity .2s,background .2s}
.drop.open .kid .nb{opacity:1;transition-delay:.42s,0s}
/* ===== carousel ===== */
.cf{--cw:min(46vw,230px);position:relative;height:calc(var(--cw)*1.5 + 40px);perspective:1100px;margin-top:26px;touch-action:pan-y;user-select:none}
.ci{position:absolute;left:50%;top:48%;width:var(--cw);aspect-ratio:3/4.2;border-radius:18px;overflow:hidden;border:1px solid rgba(45,140,255,.45);cursor:pointer;background:#08142a;
 transform:translate(-50%,-50%) translateX(calc(var(--cw)*var(--d)*.85)) translateZ(calc(var(--ad)*-120px)) rotateY(calc(var(--d)*-30deg)) scale(calc(1 - var(--ad)*.1));
 box-shadow:0 20px 50px rgba(0,0,0,.6);will-change:transform;transition:transform .7s cubic-bezier(.3,.7,.2,1),opacity .5s,border-color .5s}
.ci::after{content:"";position:absolute;inset:0;background:#050B16;opacity:calc(var(--ad,0)*.5);transition:opacity .7s;pointer-events:none}
.ci.on{border-color:var(--blue);box-shadow:0 20px 60px rgba(0,0,0,.7),0 0 45px rgba(45,140,255,.45)}
.ci.far{opacity:0;pointer-events:none}
.face{position:absolute;inset:0;background-image:var(--img,none),radial-gradient(circle at 30% 18%,hsla(var(--h,210),95%,60%,.5),transparent 60%),repeating-linear-gradient(90deg,rgba(45,140,255,.07) 0 1px,transparent 1px 22px),linear-gradient(160deg,#0a1b3a,#050B16);background-size:cover,auto,auto,auto;background-position:center}
.face.ok .ic{display:none}
.face .ic{position:absolute;top:24%;left:0;right:0;text-align:center;font-size:clamp(2.6rem,9vw,3.6rem)}
.cap{position:absolute;left:0;right:0;bottom:0;padding:42px 14px 14px;background:linear-gradient(transparent,rgba(5,11,22,.92));font-weight:600;line-height:1.35;text-align:center}
.arr{position:absolute;top:48%;z-index:30;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;border:1px solid var(--blue);background:rgba(5,11,22,.85);color:var(--silver);font-size:1.4rem;line-height:1;cursor:pointer}
.arr.l{left:0}.arr.r{right:0}.arr:hover{background:var(--blue2)}
.dots{display:flex;justify-content:center;gap:8px}
.dots i{width:8px;height:8px;border-radius:50%;background:#2a3b5c;transition:background .3s}.dots i.on{background:var(--blue)}
#zoom{position:fixed;inset:0;z-index:100;background:rgba(3,7,14,.85);backdrop-filter:blur(6px);display:none;flex-direction:column;align-items:center;justify-content:center;padding:20px;cursor:pointer;opacity:0;transition:opacity .35s}
#zoom.show{opacity:1}
.big{position:relative;height:min(46vh,420px);aspect-ratio:3/4.2;border-radius:18px;overflow:hidden;border:1px solid var(--blue);box-shadow:0 0 60px rgba(45,140,255,.5)}
.info{margin-top:20px;max-width:520px;text-align:center;opacity:0;transition:opacity .4s .3s}
#zoom.show .info{opacity:1}
.info h3{font-size:1.5rem}.info p{color:var(--dim);margin-top:6px}
.links{display:flex;gap:18px;flex-wrap:wrap;margin-top:22px}.links a{color:var(--blue)}
form{display:grid;gap:12px;max-width:520px;margin-top:24px}
input,textarea{font:inherit;color:var(--silver);background:rgba(8,18,36,.85);border:1px solid #1d3a66;border-radius:12px;padding:12px 16px}
input:focus,textarea:focus{outline:2px solid var(--blue)}
footer{text-align:center;padding:30px;color:var(--dim);font-size:.9rem}
#view{display:none;min-height:100vh}
#view section{padding-top:130px}
#view h1{font-size:clamp(2rem,6vw,4.4rem)}
#wipe{position:fixed;inset:0;width:100%;height:100%;z-index:110;pointer-events:none;display:none}
#cur{position:fixed;left:0;top:0;will-change:transform;z-index:120;width:18px;height:18px;border:2px solid var(--blue);border-radius:50%;pointer-events:none;transform:translate(-50%,-50%);transition:width .2s,height .2s,background .2s;display:none}
#cur.big2{width:46px;height:46px;background:rgba(45,140,255,.2)}

/* ===== لوحات مزايا البرنامج (الخط القطري) ===== */
.pn{border:1px solid rgba(45,140,255,.4);border-radius:18px;overflow:hidden;background:rgba(8,18,36,.84);margin-top:22px;box-shadow:0 0 30px rgba(45,140,255,.12);transition:box-shadow .5s,border-color .5s}
.pn.open{border-color:var(--blue);box-shadow:0 0 45px rgba(45,140,255,.35)}
.pn-top{position:relative;height:clamp(220px,32vw,340px);overflow:hidden;background:linear-gradient(160deg,#0a1b3a,#060d1d)}
.pn-img{position:absolute;inset:0;background-image:var(--img,none),radial-gradient(circle at 78% 28%,hsla(var(--h,210),95%,60%,.45),transparent 55%),linear-gradient(160deg,#0f2550,#071022);background-size:cover;background-position:center;clip-path:polygon(0 0,100% 0,100% 100%,0 0);cursor:pointer}
.pn-img:focus-visible{outline:2px solid var(--blue);outline-offset:-4px}
.pn-img .ic{position:absolute;right:15%;top:18%;font-size:clamp(2.4rem,8vw,4.4rem)}
.pn-img.ok .ic{display:none}
.pn-ln{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.pn-ln line{stroke:var(--blue);stroke-width:2;filter:drop-shadow(0 0 5px #2D8CFF)}
.pn-tx{position:absolute;left:4%;bottom:9%;width:38%;display:flex;flex-direction:column;align-items:flex-start;gap:10px;transition:opacity .45s,transform .6s}
.pn.open .pn-tx{opacity:0;transform:translateX(-30px);pointer-events:none}
.pn-tx h3{font-size:clamp(.95rem,2.6vw,1.7rem);line-height:1.3}
.pn-more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .8s cubic-bezier(.65,0,.35,1)}
.pn.open .pn-more{grid-template-rows:1fr}
.pn-in{overflow:hidden;min-height:0}
.pn-pad{padding:6px 22px 20px}
.pn-pad>*{opacity:0;transform:translateY(-14px);transition:opacity .35s,transform .45s}
.pn.open .pn-pad>*{opacity:1;transform:none;transition-delay:.35s}
.pn-pad h3{font-size:1.4rem;margin-top:12px}.pn-pad p{color:var(--dim);margin:8px 0 14px;max-width:70ch}
@media (max-width:640px){.pn-tx{width:42%;bottom:7%}}

/* ===== جدول الأسعار ===== */
.pt-wrap{margin-top:30px;touch-action:pan-y pinch-zoom}
.ptab{width:100%;border-collapse:separate;border-spacing:0;background:rgba(8,18,36,.86);border:1px solid rgba(45,140,255,.4);border-radius:16px;overflow:hidden}
.ptab caption{caption-side:top;text-align:start;font-weight:900;font-size:1.4rem;padding-bottom:10px}
.ptab td,.ptab th{padding:12px 16px;text-align:start;border-bottom:1px solid rgba(45,140,255,.15);vertical-align:top}
.ptab .pr{text-align:end;white-space:nowrap;font-weight:600;color:#cfe3ff}
.ptab small{display:block;color:var(--dim);font-weight:400;font-size:.85rem;line-height:1.5}
.ptab tr.grp th{background:linear-gradient(90deg,rgba(30,107,255,.38),rgba(30,107,255,.12));font-size:1.05rem}
.ptab tr.grp .pr{color:#fff;font-size:1.15rem}
.ptab tr:last-child td{border-bottom:0}
.ptnote{color:var(--dim);margin-top:10px;font-size:.9rem}
.acts{display:flex;flex-wrap:wrap;gap:14px;margin-top:6px}
/* ===== نافذة التنزيل ===== */
.dlg{position:fixed;inset:0;z-index:130;background:rgba(3,7,14,.88);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;transition:opacity .3s}
.dlg.show{opacity:1}
.dlg-box{max-width:460px;width:100%;background:#08142a;border:1px solid var(--blue);border-radius:20px;padding:28px 24px;text-align:center;box-shadow:0 0 60px rgba(45,140,255,.35);transform:scale(.92);transition:transform .35s cubic-bezier(.3,.7,.2,1)}
.dlg.show .dlg-box{transform:none}
.dlg-spin{width:64px;height:64px;margin:0 auto 14px;border-radius:50%;border:5px solid rgba(45,140,255,.2);border-top-color:var(--blue);animation:spin 1s linear infinite;box-shadow:0 0 20px rgba(45,140,255,.4)}
@keyframes spin{to{transform:rotate(360deg)}}
.dlg-ok{width:64px;height:64px;margin:0 auto 14px;border-radius:50%;background:var(--blue2);display:grid;place-items:center;font-size:2rem;animation:pop .4s cubic-bezier(.3,.7,.2,1)}
@keyframes pop{from{transform:scale(0)}to{transform:scale(1)}}
.dlg-box h3{font-size:1.4rem}.dlg-box p{color:var(--dim);margin-top:8px;white-space:pre-line}
@media (hover:hover){#cur{display:block}}
@media (max-width:640px){:root{--ds:52px}#hero{padding-top:130px}.nb{font-size:.8rem;padding:4px 12px}#tree.show .seg{width:16px}
 .kids{gap:7px}.kid .nb{font-size:.74rem;padding:4px 8px}.kid::after{left:-4px;right:-4px}.kid:first-child::after{left:50%}.kid:last-child::after{right:50%}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01s!important;transition-duration:.01s!important}html{scroll-behavior:auto}}
@media (prefers-reduced-motion:reduce){.dlg-spin{animation-duration:2s!important}}
/* سكرول اللمس يعمل فوق الجدول واللوحات (بدون حاوية أفقية تعترض الحركة) */
.ptab,.pn{touch-action:pan-y pinch-zoom}
@media (max-width:640px){.ptab .pr{white-space:normal}.ptab td,.ptab th{padding:10px 12px}}
/* أسهم المعرض: شورونات ترسم بالـCSS فلا تنعكس في الصفحات العربية، وزاويتها للخارج */
.arr{display:grid;place-items:center;font-size:0;direction:ltr}
.arr::before{content:"";width:10px;height:10px;border:solid var(--silver);border-width:0 0 2.5px 2.5px;transform:rotate(45deg);margin-left:4px}
.arr.r::before{transform:rotate(-135deg);margin-left:0;margin-right:4px}
/* ومضة خفيفة (طبقة مستقلة) بدل تحريك الظل والسطوع */
.sv canvas{width:100%;height:100%;display:block;border-radius:50%}
#flash{position:fixed;z-index:61;left:calc((100vw - var(--W))/2);top:calc((100vh - var(--W))/2);width:var(--W);height:var(--W);border-radius:50%;pointer-events:none;opacity:0;background:radial-gradient(circle,rgba(190,235,255,.85) 0%,rgba(45,140,255,.45) 45%,rgba(45,140,255,0) 70%)}
#flash.go{animation:flash .9s ease-out}
@keyframes flash{0%{opacity:0;transform:scale(.9)}35%{opacity:1;transform:scale(1.25)}100%{opacity:0;transform:scale(1.5)}}
/* لا مربع أزرق عند اللمس/الكبس، ويبقى إطار التركيز للوحة المفاتيح فقط */
*{-webkit-tap-highlight-color:transparent}
:focus:not(:focus-visible){outline:none}
button,[role=button],.ci,.pn-img,.nb,.btn,.arr,#logo,a{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
img{-webkit-user-drag:none}
/* ===== مستطيل الـGIF (صمّم برنامجك) ===== */
.gifbox{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;border:1px solid rgba(45,140,255,.5);box-shadow:0 0 50px rgba(45,140,255,.25);margin-top:26px;background:linear-gradient(160deg,#0a1b3a,#050B16);display:grid;place-items:center}
.gifbox .gifph{color:var(--dim);font-size:.95rem;opacity:.7;padding:10px;text-align:center}
.gifbox img.gif{width:100%;height:100%;object-fit:cover;display:block}
.custom-btn{margin-top:20px}
/* ===== المعرض الأفقي الدوّار (كأنه صحن يدور: الصورة الأمامية كبيرة والباقي خلفها للأعلى) ===== */
.cf{--cw:min(72vw,380px);height:calc(var(--cw)*.625 + 130px);perspective:none;touch-action:pan-y pinch-zoom}
.ci{left:0;top:0;aspect-ratio:16/10;transform-origin:50% 50%;transition:box-shadow .4s,border-color .4s;filter:none;will-change:transform}
.ci.far{opacity:1;pointer-events:auto}
.ci .dim{position:absolute;inset:0;background:#02050b;opacity:0;pointer-events:none}
.arr{top:auto;bottom:calc(var(--cw)*.3125 - 12px);transform:none}
.big{height:auto;width:min(88vw,560px);aspect-ratio:16/10}
/* ===== زر اللغة (أعلى يسار الصفحات) ===== */
#lang{position:fixed;z-index:40;left:16px;top:calc(env(safe-area-inset-top,0px) + 12px + (var(--ds) - 40px)/2);opacity:0;pointer-events:none;transition:opacity .4s}
#lang.show{opacity:1;pointer-events:auto}
.lw{position:relative;display:flex;flex-direction:column;align-items:center}
.lb{width:40px;height:40px;border-radius:50%;border:1px solid var(--blue);background:rgba(5,11,22,.94);color:var(--silver);font:inherit;font-weight:900;font-size:1.05rem;line-height:1;display:grid;place-items:center;cursor:pointer;box-shadow:0 0 14px rgba(45,140,255,.3);padding:0}
.lb:hover,.lw.open>.lb{background:var(--blue2)}
.ldrop .lb{opacity:0;transition:opacity .2s,background .2s}
.ldrop.open .lb{opacity:1}
.ldrop.open>.lb:nth-child(2){transition-delay:.15s,0s}
.ldrop.open>.stub:nth-child(3){transition-delay:.3s}
.ldrop.open>.lb:nth-child(4){transition-delay:.45s,0s}
/* اتجاه الصفحة يتبع اللغة، أما الشجرة فتبقى كما هي (تمتد من الشعار نحو اليسار) */
#tree{direction:rtl}
html[dir=rtl] .nb{direction:rtl}
html[dir=ltr] .nb{direction:ltr}
/* ===== ومضة خارجية فقط: هالة خلف الشعار (لا تغطي الصورة) + نبضتان متتاليتان ===== */
#flash{z-index:58;left:calc((100vw - var(--W)*1.5)/2);top:calc((100vh - var(--W)*1.5)/2);width:calc(var(--W)*1.5);height:calc(var(--W)*1.5);background:radial-gradient(circle closest-side,transparent 0,transparent 60%,rgba(150,215,255,.95) 66%,rgba(45,140,255,.5) 80%,rgba(45,140,255,0) 100%)}
#flash.go{animation:flash2 1.3s ease-out}
@keyframes flash2{0%{opacity:0;transform:scale(.92)}16%{opacity:1;transform:scale(1.06)}34%{opacity:.2;transform:scale(1)}56%{opacity:1;transform:scale(1.1)}100%{opacity:0;transform:scale(1.35)}}
.pulse{animation:pulse2 1.3s ease-out}
@keyframes pulse2{0%{transform:scale(1)}16%{transform:scale(1.1)}34%{transform:scale(1)}56%{transform:scale(1.12)}78%,100%{transform:scale(1)}}
.lg canvas{width:100%;height:100%;display:block}
/* ===== المعرض ثلاثي الأبعاد ===== */
.cf{--cw:min(60vw,380px);height:calc(var(--cw)*1.11 + 26px)}
.arr{bottom:calc(var(--cw)*.3125 - 10px)}
.ci{box-shadow:0 8px 20px rgba(0,0,0,.5)}
.ci.on{box-shadow:0 10px 30px rgba(0,0,0,.6),0 0 34px rgba(45,140,255,.4)}
#wipe{will-change:transform}
#wipe{will-change:auto}
/* ===== حاوية البطاقة + انعكاس مرآة خفيف أسفل كل صورة ===== */
.ci{overflow:visible;border:0;background:none;border-radius:0;box-shadow:none;transition:none;cursor:pointer}
.ci::after{display:none}
.ci.on{box-shadow:none}
.cb{position:absolute;inset:0;border-radius:18px;overflow:hidden;border:1px solid rgba(45,140,255,.45);background:#08142a;box-shadow:0 8px 20px rgba(0,0,0,.5);transition:box-shadow .4s,border-color .4s}
.ci.on .cb{border-color:var(--blue);box-shadow:0 10px 30px rgba(0,0,0,.6),0 0 34px rgba(45,140,255,.4)}
.refl{position:absolute;left:0;top:100%;width:100%;height:100%;margin-top:3px;transform:scaleY(-1);pointer-events:none;border-radius:18px;overflow:hidden;opacity:.3;-webkit-mask-image:linear-gradient(to bottom,transparent 56%,#000 100%);mask-image:linear-gradient(to bottom,transparent 56%,#000 100%)}
.refl .cap{display:none}
.cf{height:calc(var(--cw)*1.35 + 26px)}
.pic{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;-webkit-user-drag:none}
/* ===== نصوص مرافقة لصورة الـGIF (تتبدل مع اللغة وتتزامن مع المشاهد الثلاثة، كل مشهد ثانيتان) ===== */
 text-shadow:0 0 12px rgba(150,215,255,.9),0 0 32px rgba(45,140,255,.65),0 2px 0 rgba(0,0,0,.55)}
/* المشهد الثالث: الكاميرا ترتفع فالعبارة تنزل مع الفراغ بين الكيبورد والشاشة (قيم مقاسة من الفيديو) */
/* ===== عبارات فوق الـGIF (تتبدل مع اللغة) ومتزامنة مع المشاهد الثلاثة ===== */
.gifbox{container-type:inline-size}
.ov{position:absolute;inset:0;pointer-events:none;overflow:hidden;--show:inset(-40% -30% -40% -30%)}
html[dir=rtl] .ov{--hide:inset(-40% 0% -40% 100%)}
html[dir=ltr] .ov{--hide:inset(-40% 100% -40% 0%)}
.ct{position:absolute;transform:translate(-50%,-50%);text-align:center;width:max-content;max-width:var(--mw,82%);line-height:1.25}
.ct .t{display:block;color:#fff;font-size:5.8vw;font-size:clamp(15px,6.4cqw,54px);text-shadow:0 0 10px rgba(120,220,255,.95),0 0 26px rgba(45,140,255,.7),0 2px 2px rgba(0,0,0,.6);opacity:0;clip-path:var(--hide);will-change:clip-path,filter,transform}
html[lang=ar] .ct .t{font-family:"Lalezar","Cairo",sans-serif;font-weight:400}
html[lang=en] .ct .t,html[lang=fr] .ct .t{font-family:"Orbitron","Cairo",sans-serif;font-weight:900;font-size:4vw;font-size:clamp(12px,4.3cqw,44px);letter-spacing:.03em}
.c1{left:50%;top:81%}
.c2{left:81%;top:50%;--mw:34%}
.c3{left:50%;top:17%}
.ov.play .c1 .t{animation:r1 6s linear infinite}
.ov.play .c2 .t{animation:r2 6s linear infinite}
.ov.play .c3 .t{animation:r3 6s linear infinite}
.ov.play .c3{animation:follow 6s linear infinite}
@keyframes r1{
0%,3.33%{opacity:1;clip-path:var(--hide);filter:blur(10px);transform:scale(1.2) translateY(8px)}
8.33%{filter:blur(4px);transform:scale(1.07) translateY(2px)}
13.33%{clip-path:var(--show);filter:blur(0);transform:none;text-shadow:0 0 18px #fff,0 0 38px rgba(90,205,255,1),0 0 70px rgba(45,140,255,.9),0 2px 2px rgba(0,0,0,.6)}
15.53%{text-shadow:0 0 10px rgba(120,220,255,.95),0 0 26px rgba(45,140,255,.7),0 2px 2px rgba(0,0,0,.6)}
24.33%{opacity:1;clip-path:var(--show);filter:blur(0);transform:none}
28.0%,100%{opacity:0;clip-path:var(--show);filter:blur(8px);transform:translateY(-8px) scale(.96)}
}
@keyframes r2{
0%,32.0%{opacity:1;clip-path:var(--hide);filter:blur(10px);transform:scale(1.2) translateY(8px)}
37.0%{filter:blur(4px);transform:scale(1.07) translateY(2px)}
42.0%{clip-path:var(--show);filter:blur(0);transform:none;text-shadow:0 0 18px #fff,0 0 38px rgba(90,205,255,1),0 0 70px rgba(45,140,255,.9),0 2px 2px rgba(0,0,0,.6)}
44.2%{text-shadow:0 0 10px rgba(120,220,255,.95),0 0 26px rgba(45,140,255,.7),0 2px 2px rgba(0,0,0,.6)}
63.33%{opacity:1;clip-path:var(--show);filter:blur(0);transform:none}
67.0%,100%{opacity:0;clip-path:var(--show);filter:blur(8px);transform:translateY(-8px) scale(.96)}
}
@keyframes r3{
0%,70.83%{opacity:1;clip-path:var(--hide);filter:blur(10px);transform:scale(1.2) translateY(8px)}
75.83%{filter:blur(4px);transform:scale(1.07) translateY(2px)}
80.83%{clip-path:var(--show);filter:blur(0);transform:none;text-shadow:0 0 18px #fff,0 0 38px rgba(90,205,255,1),0 0 70px rgba(45,140,255,.9),0 2px 2px rgba(0,0,0,.6)}
83.03%{text-shadow:0 0 10px rgba(120,220,255,.95),0 0 26px rgba(45,140,255,.7),0 2px 2px rgba(0,0,0,.6)}
96.0%{opacity:1;clip-path:var(--show);filter:blur(0);transform:none}
99.67%,100%{opacity:0;clip-path:var(--show);filter:blur(8px);transform:translateY(-8px) scale(.96)}
}
@keyframes follow{
0%,67.83%{top:16.93%}
68.64%{top:17.19%}
69.44%{top:17.63%}
70.25%{top:18.22%}
71.05%{top:18.96%}
71.85%{top:19.85%}
72.66%{top:20.88%}
73.46%{top:22.03%}
74.27%{top:23.31%}
75.07%{top:24.69%}
75.88%{top:26.18%}
76.68%{top:27.77%}
77.48%{top:29.44%}
78.29%{top:31.19%}
79.09%{top:33.02%}
79.90%{top:34.90%}
80.70%{top:36.85%}
81.50%{top:38.84%}
82.31%{top:40.86%}
83.11%{top:42.92%}
83.92%{top:45.01%}
84.72%{top:47.10%}
85.52%{top:49.21%}
86.33%{top:51.31%}
87.13%{top:53.40%}
87.94%{top:55.48%}
88.74%{top:57.53%}
89.55%{top:59.54%}
90.35%{top:61.52%}
91.15%{top:63.44%}
91.96%{top:65.31%}
92.76%{top:67.11%}
93.57%{top:68.83%}
94.37%{top:70.47%}
95.17%{top:72.03%}
95.98%{top:73.48%}
96.78%{top:74.83%}
97.59%{top:76.06%}
98.39%{top:77.17%}
99.20%{top:78.15%}
100%{top:78.99%}
}
/* وضع المزامنة: العبارات متوقفة وتتحرك بساعة الـGIF نفسها (يضبطها الجافا سكريبت)، وموضع العبارة الثالثة يُحسب بمنحنى ناعم */
.gifbox canvas.gif{width:100%;height:100%;object-fit:cover;display:block}
.ov.sync .c1 .t{animation:r1 6s linear infinite paused}
.ov.sync .c2 .t{animation:r2 6s linear infinite paused}
.ov.sync .c3 .t{animation:r3 6s linear infinite paused}
.ov.sync .c3{top:0;will-change:transform}