*{margin:0;padding:0;box-sizing:border-box;cursor:none!important}
:root{--rgb:224,49,49;--r:#e03131;--r2:#ff4d4d;--rg:rgba(var(--rgb),.3);--bg:#04040c;--bg2:#07071a;--sf:rgba(255,255,255,.055);--bd:rgba(255,255,255,.09);--tx:#fff;--tx2:rgba(255,255,255,.45);--tx3:rgba(255,255,255,.22);--nav:rgba(4,4,12,.88);--gl:rgba(255,255,255,.05)}
[data-theme=light]{--bg:#f0f0f6;--bg2:#e4e4ef;--sf:rgba(0,0,0,.04);--bd:rgba(0,0,0,.1);--tx:#0a0a18;--tx2:rgba(0,0,0,.55);--tx3:rgba(0,0,0,.3);--nav:rgba(240,240,246,.92);--gl:rgba(255,255,255,.8)}
[data-lang=ar] body,[data-lang=ar] *{font-family:'Cairo',sans-serif!important}
html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--tx);overflow-x:hidden;transition:background .4s,color .4s}
#cur{position:fixed;top:0;left:0;width:10px;height:10px;background:var(--r);border-radius:50%;pointer-events:none;z-index:99999;will-change:transform;box-shadow:0 0 12px var(--r),0 0 24px var(--rg);transition:width .15s,height .15s}
#cur2{position:fixed;top:0;left:0;width:36px;height:36px;border:1.5px solid rgba(var(--rgb),.4);border-radius:50%;pointer-events:none;z-index:99998;will-change:transform;transition:width .22s,height .22s,border-color .22s}
#cur.big{width:22px;height:22px;box-shadow:0 0 20px var(--r),0 0 40px var(--rg)}
#cur2.big{width:58px;height:58px;border-color:rgba(var(--rgb),.7)}
canvas#bg3{position:fixed;inset:0;z-index:0;pointer-events:none}
[data-theme=light] canvas#bg3{opacity:.15}
#glow2{position:fixed;width:750px;height:750px;background:radial-gradient(circle,rgba(var(--rgb),.08),transparent 65%);border-radius:50%;pointer-events:none;z-index:1;transform:translate(-50%,-50%);top:50%;left:50%}
#prog{position:fixed;top:0;left:0;height:2px;background:linear-gradient(90deg,var(--r),var(--r2));z-index:999;width:0%;box-shadow:0 0 8px var(--r)}
/* NAV */
nav{position:fixed;top:0;width:100%;z-index:500;padding:.8rem 1.5rem;display:flex;justify-content:space-between;align-items:center;background:var(--nav);backdrop-filter:blur(26px);border-bottom:1px solid var(--bd);transition:background .4s}
.logo{font-weight:900;font-size:1rem;letter-spacing:3px;color:var(--tx)}.logo b{color:var(--r)}
.nl{display:flex;gap:1.2rem;list-style:none;align-items:center}
.nb{color:var(--tx2);font-size:.67rem;letter-spacing:1.5px;text-transform:uppercase;background:none;border:none;font-family:inherit;transition:color .3s;padding:0}
.nb:hover{color:var(--r)}
.nb.pill{padding:5px 12px;border-radius:20px;border:1px solid var(--bd);background:var(--sf)}
.nb.pill:hover{border-color:rgba(var(--rgb),.4);background:rgba(var(--rgb),.07)}
.nav-c{display:flex;align-items:center;gap:.5rem}
.pb{padding:5px 11px;border-radius:20px;font-size:.66rem;border:1px solid var(--bd);background:var(--sf);color:var(--tx2);transition:all .3s;letter-spacing:.3px;font-family:inherit}
.pb:hover,.pb.act{border-color:rgba(var(--rgb),.4);color:var(--r);background:rgba(var(--rgb),.07)}
@media(max-width:720px){.nl{display:none}}
/* HERO */
section{position:relative;z-index:10}
.hero{min-height:100vh;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:5rem 1.5rem 2rem;gap:.95rem;overflow:hidden}
/* VIDEO INTRO BG */
.hero-vid{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.hero-vid iframe{position:absolute;top:50%;left:50%;width:177.77vh;height:100%;min-width:100%;min-height:56.25vw;transform:translate(-50%,-50%)}
.hero-vid-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(4,4,12,.5) 0%,rgba(4,4,12,.45) 40%,rgba(4,4,12,.7) 75%,var(--bg) 100%)}
[data-theme=light] .hero-vid-overlay{background:linear-gradient(to bottom,rgba(240,240,246,.55) 0%,rgba(240,240,246,.65) 60%,var(--bg) 100%)}
.hero-content{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:.88rem;max-width:660px;width:100%}
/* AVATAR */
.av-wrap{position:relative;width:145px;height:145px;flex-shrink:0;transition:transform .4s cubic-bezier(.34,1.56,.64,1)}
.av-wrap:hover{transform:scale(1.05)}
.av-wrap:active{transform:scale(.96)}
.av-glow{position:absolute;inset:-10px;border-radius:50%;background:radial-gradient(circle,rgba(var(--rgb),.35),transparent 70%);animation:pulse 3s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.55}50%{opacity:1}}
.av-border{width:100%;height:100%;border-radius:50%;padding:3px;background:linear-gradient(135deg,var(--r),var(--r2) 50%,color-mix(in srgb,var(--r) 40%,#000))}
.av-inner{width:100%;height:100%;border-radius:50%;overflow:hidden;background:#0d0d18;border:3px solid var(--bg)}
#av-img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;transition:filter .4s}
.av-wrap:hover #av-img{filter:brightness(1.12) saturate(1.1)}
.av-ripple{position:absolute;inset:0;border-radius:50%;pointer-events:none}
/* GREETING */
.greeting{font-size:.88rem;color:var(--tx2);letter-spacing:.5px;display:inline-block;transition:all .4s cubic-bezier(.34,1.56,.64,1)}
.greeting:hover{color:var(--r);transform:scale(1.08) translateY(-3px);text-shadow:0 0 20px rgba(var(--rgb),.5)}
.wh{display:inline-block;transform-origin:70% 80%}
.greeting:hover .wh{animation:wave .6s ease-in-out}
@keyframes wave{0%,100%{transform:rotate(0)}25%,65%{transform:rotate(22deg)}45%,80%{transform:rotate(-10deg)}}
.tag{display:inline-flex;align-items:center;gap:.4rem;background:rgba(var(--rgb),.07);border:1px solid rgba(var(--rgb),.2);padding:.28rem .9rem;border-radius:100px;font-size:.64rem;letter-spacing:1.5px;color:var(--tx2);text-transform:uppercase;animation:floatY 4s ease-in-out infinite}
.tag::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--r);box-shadow:0 0 8px var(--r);animation:blink 2s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.2}}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.h1{font-size:clamp(2.2rem,6vw,4.8rem);font-weight:900;line-height:.95;letter-spacing:-2px;color:var(--tx)}
.script{color:var(--r);display:block;font-family:'Great Vibes',cursive!important;font-size:.92em;font-weight:400;letter-spacing:2px;filter:drop-shadow(0 0 22px rgba(var(--rgb),.5))}
.hsub{color:var(--tx3);font-size:.82rem;max-width:380px;line-height:1.9}
.stats{display:flex;gap:2.2rem;justify-content:center;flex-wrap:wrap}
.stat-n{font-size:2.1rem;font-weight:900;color:var(--r);text-shadow:0 0 26px rgba(var(--rgb),.4);font-variant-numeric:tabular-nums}
.stat-l{font-size:.58rem;letter-spacing:2px;color:var(--tx3);text-transform:uppercase;margin-top:.18rem}
.btns{display:flex;gap:.65rem;flex-wrap:wrap;justify-content:center}
.btn{padding:.66rem 1.6rem;border-radius:6px;font-size:.72rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;border:none;overflow:hidden;transition:all .35s;font-family:inherit;position:relative;text-decoration:none;display:inline-flex;align-items:center;gap:.3rem}
.btn::before{content:'';position:absolute;width:80px;height:80px;background:radial-gradient(circle,rgba(255,255,255,.3),transparent 70%);border-radius:50%;transform:translate(-50%,-50%);left:var(--gx,50%);top:var(--gy,50%);opacity:0;transition:opacity .3s;pointer-events:none;z-index:1}
.btn:hover::before{opacity:1}
.btn-r{background:var(--r);color:#fff;box-shadow:0 0 22px var(--rg)}.btn-r:hover{box-shadow:0 0 44px var(--rg);transform:translateY(-3px)}
.btn-o{background:transparent;color:var(--tx);border:1px solid var(--bd)}.btn-o:hover{border-color:rgba(255,255,255,.35);transform:translateY(-3px)}
.btn-g{background:rgba(255,255,255,.07);color:var(--tx);border:1px solid var(--bd)}.btn-g:hover{background:rgba(255,255,255,.12);transform:translateY(-3px)}
/* SECTIONS */
.sec{padding:4.5rem 1.5rem;max-width:1180px;margin:0 auto}
.sec-hd{margin-bottom:2rem}
.sec-lbl{font-size:.6rem;letter-spacing:3.5px;color:var(--r);text-transform:uppercase;margin-bottom:.4rem}
.sec-ttl{font-size:clamp(1.5rem,3.5vw,2.4rem);font-weight:900;margin-bottom:.25rem;color:var(--tx)}
.sec-ttl span{color:var(--r)}
.divl{width:1px;height:36px;background:linear-gradient(to bottom,var(--r),transparent);margin:.35rem 0 1rem}
.sec-sub{color:var(--tx3);font-size:.79rem;line-height:1.75}
.sec-divider{height:1px;background:linear-gradient(90deg,transparent,rgba(var(--rgb),.18),transparent);position:relative;z-index:10}
/* PORTFOLIO */
.port-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
@media(max-width:900px){.port-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.port-grid{grid-template-columns:1fr}}
.vc{border-radius:14px;overflow:hidden;background:var(--sf);border:1px solid var(--bd);position:relative;transition:border-color .4s,box-shadow .4s;will-change:transform}
.vc:hover{border-color:rgba(var(--rgb),.35);box-shadow:0 18px 48px rgba(0,0,0,.4),0 0 20px rgba(var(--rgb),.06)}
.vc-thumb{width:100%;aspect-ratio:16/9;position:relative;overflow:hidden;background:#060614}
.vc-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.vc:hover .vc-thumb img{transform:scale(1.06)}
.vc-ov{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.2);transition:background .4s}
.vc:hover .vc-ov{background:rgba(0,0,0,.5)}
.vc-play{width:52px;height:52px;background:var(--r);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 0 30px rgba(var(--rgb),.6);transition:transform .45s cubic-bezier(.34,1.56,.64,1),box-shadow .4s;border:1px solid rgba(255,255,255,.18)}
.vc:hover .vc-play{transform:scale(1.14);box-shadow:0 0 52px rgba(var(--rgb),.9)}
.vc-info{padding:.75rem .88rem;border-top:1px solid var(--bd)}
.vc-title{font-weight:700;font-size:.79rem;margin-bottom:.18rem;color:var(--tx);transition:color .3s}
.vc:hover .vc-title{color:var(--r2)}
.vc-meta{display:flex;align-items:center;justify-content:space-between;color:var(--tx3);font-size:.65rem}
.vc-ext{color:var(--r);text-decoration:none;border:1px solid rgba(var(--rgb),.24);padding:.08rem .44rem;border-radius:100px;font-size:.6rem;transition:all .3s}
.vc-ext:hover{background:rgba(var(--rgb),.14)}
.ep{position:absolute;top:7px;right:7px;background:rgba(var(--rgb),.9);border:none;border-radius:7px;color:#fff;padding:3px 8px;font-size:.6rem;display:none;z-index:20;font-family:inherit}
.vc:hover .ep.show{display:block}
/* COURSES */
.course-tabs{display:flex;gap:.6rem;margin-bottom:1.4rem;flex-wrap:wrap}
.ctab{padding:8px 18px;border-radius:8px;font-size:.73rem;border:1px solid var(--bd);background:var(--sf);color:var(--tx2);transition:all .3s;font-family:inherit;display:flex;align-items:center;gap:.4rem}
.ctab.on,.ctab:hover{background:rgba(var(--rgb),.12);border-color:rgba(var(--rgb),.38);color:var(--r)}
.course-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:1rem}
.cc{border-radius:14px;overflow:hidden;background:var(--sf);border:1px solid var(--bd);transition:all .4s;will-change:transform}
.cc:hover{border-color:rgba(var(--rgb),.32);box-shadow:0 16px 44px rgba(0,0,0,.38)}
.cc-thumb{width:100%;aspect-ratio:16/9;position:relative;overflow:hidden;background:#080814}
.cc-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.cc:hover .cc-thumb img{transform:scale(1.06)}
.cc-badge{position:absolute;top:8px;left:8px;padding:3px 9px;border-radius:20px;font-size:.62rem;font-weight:700;color:#fff;backdrop-filter:blur(8px)}
.cc-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.18);transition:background .4s}
.cc:hover .cc-play{background:rgba(0,0,0,.48)}
.cc-play-ic{width:44px;height:44px;background:rgba(255,0,0,.9);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 0 26px rgba(255,0,0,.5);transition:transform .4s cubic-bezier(.34,1.56,.64,1)}
.cc:hover .cc-play-ic{transform:scale(1.14)}
.cc-body{padding:.8rem .9rem}
.cc-title{font-weight:700;font-size:.8rem;margin-bottom:.22rem;color:var(--tx);transition:color .3s}
.cc:hover .cc-title{color:#ff6666}
.cc-desc{font-size:.72rem;color:var(--tx3);line-height:1.55;margin-bottom:.6rem}
.cc-btn{display:inline-flex;align-items:center;gap:.35rem;padding:5px 14px;background:rgba(255,0,0,.1);border:1px solid rgba(255,0,0,.25);border-radius:20px;color:#ff6666;text-decoration:none;font-size:.68rem;transition:all .3s}
.cc-btn:hover{background:rgba(255,0,0,.22)}
.empty-res{color:var(--tx3);font-size:.79rem;text-align:center;padding:2rem;border:1px dashed var(--bd);border-radius:12px}
/* RESOURCES */
.rtabs{display:flex;gap:.6rem;margin-bottom:1.4rem;flex-wrap:wrap}
.rtab{padding:8px 18px;border-radius:8px;font-size:.73rem;border:1px solid var(--bd);background:var(--sf);color:var(--tx2);transition:all .3s;font-family:inherit;display:flex;align-items:center;gap:.45rem}
.rtab.on,.rtab:hover{background:rgba(var(--rgb),.12);border-color:rgba(var(--rgb),.38);color:var(--r)}
.res-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1rem}
.rc{background:linear-gradient(135deg,var(--sf),rgba(255,255,255,.03));border:1px solid var(--bd);border-radius:14px;overflow:hidden;transition:all .38s;display:flex;flex-direction:column}
.rc:hover{border-color:rgba(var(--rgb),.3);transform:translateY(-4px);box-shadow:0 16px 44px rgba(0,0,0,.38)}
.rc-hd{padding:.88rem;display:flex;align-items:center;gap:.7rem;border-bottom:1px solid var(--bd)}
.rc-ic{width:44px;height:44px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;flex-shrink:0;background:linear-gradient(135deg,#1a1a2e,#16213e);border:1px solid rgba(var(--rgb),.28)}
.rc-nm{font-weight:700;font-size:.82rem;color:var(--tx)}
.rc-tp{font-size:.59rem;color:var(--r);letter-spacing:1px;text-transform:uppercase;margin-top:.1rem}
.rc-bd{padding:.68rem .88rem 1rem;flex:1;display:flex;flex-direction:column;gap:.5rem}
.rc-dc{font-size:.72rem;color:var(--tx3);line-height:1.55;flex:1}
.rc-dl{display:inline-flex;align-items:center;gap:.35rem;padding:6px 14px;background:var(--r);border-radius:20px;color:#fff;font-size:.68rem;font-weight:700;transition:all .3s;border:none;font-family:inherit}
.rc-dl:hover{background:var(--r2);transform:scale(1.04)}
.rc-badge{font-size:.57rem;padding:2px 7px;border-radius:10px;background:rgba(var(--rgb),.12);border:1px solid rgba(var(--rgb),.22);color:var(--r)}
/* CONTACT */
.cgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:.7rem;margin-top:1.5rem}
.ci{background:var(--sf);border:1px solid var(--bd);border-radius:12px;padding:.78rem .85rem;display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--tx);transition:all .38s;position:relative;overflow:hidden}
.ci::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(var(--rgb),.07),transparent);opacity:0;transition:opacity .3s}
.ci:hover::before{opacity:1}
.ci:hover{border-color:rgba(var(--rgb),.35);transform:translateY(-3px) scale(1.02)}
.ci:hover .ci-icon{box-shadow:0 0 18px var(--ig,rgba(255,255,255,.2))}
.ci-icon{width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:box-shadow .35s}
.ci-lbl{font-size:.56rem;color:var(--tx3);margin-bottom:.1rem;letter-spacing:.7px;text-transform:uppercase}
.ci-val{font-size:.74rem;font-weight:600;color:var(--tx)}
/* PAYMENT FAB + MODAL */
#pay-fab{position:fixed;bottom:68px;right:16px;width:48px;height:48px;background:linear-gradient(135deg,var(--r),color-mix(in srgb,var(--r) 55%,#000));border:none;border-radius:50%;z-index:600;font-size:1.1rem;box-shadow:0 0 24px var(--rg),0 4px 16px rgba(0,0,0,.4);transition:all .4s cubic-bezier(.34,1.56,.64,1)}
#pay-fab:hover{transform:scale(1.12);box-shadow:0 0 40px var(--rg)}
.pay-modal{position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:8000;display:none;align-items:flex-end;justify-content:center;padding:1rem;backdrop-filter:blur(14px)}
.pay-modal.open{display:flex;animation:fi .22s ease}
.pay-modal-inner{background:rgba(255,255,255,.04);backdrop-filter:blur(30px);border:1px solid rgba(255,255,255,.1);border-radius:24px 24px 20px 20px;padding:1.5rem;width:100%;max-width:680px;box-shadow:0 -20px 60px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.08);position:relative;max-height:85vh;overflow-y:auto}
.pay-close{position:absolute;top:12px;right:14px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:50%;width:30px;height:30px;color:var(--tx2);font-size:.8rem;display:flex;align-items:center;justify-content:center;transition:all .3s}
.pay-close:hover{background:rgba(var(--rgb),.2);color:var(--r);transform:rotate(90deg)}
.pay-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.9rem;margin-top:1.2rem}
.pgc{position:relative;border-radius:16px;padding:1.35rem 1rem;text-align:center;overflow:hidden;border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(16px);transition:transform .42s cubic-bezier(.34,1.56,.64,1),box-shadow .42s;will-change:transform;display:flex;flex-direction:column;align-items:center;gap:.45rem}
.pgc::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--pc,var(--r));box-shadow:0 0 12px var(--pc,var(--r));transition:height .3s}
.pgc:hover::after{height:3px}
.pgc-glow{position:absolute;width:160px;height:160px;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(255,255,255,.14),transparent 70%);pointer-events:none;opacity:0;transition:opacity .3s;z-index:0}
.pgc:hover .pgc-glow{opacity:1}
.pgc-ic{width:50px;height:50px;border-radius:13px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;position:relative;z-index:1;transition:transform .4s cubic-bezier(.34,1.56,.64,1)}
.pgc:hover .pgc-ic{transform:scale(1.12) translateY(-2px)}
.pgc h4{font-size:.88rem;font-weight:800;color:#fff;position:relative;z-index:1;margin:0}
.pgc-id{font-size:.69rem;color:rgba(255,255,255,.62);direction:ltr;letter-spacing:.4px;position:relative;z-index:1}
.pgc-btn{display:inline-flex;align-items:center;gap:.35rem;padding:8px 20px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.22);border-radius:50px;color:#fff;font-size:.71rem;font-weight:700;text-decoration:none;backdrop-filter:blur(8px);transition:all .35s;position:relative;z-index:1;overflow:hidden;font-family:inherit}
.pgc-btn::before{content:'';position:absolute;width:70px;height:70px;background:radial-gradient(circle,rgba(255,255,255,.3),transparent 70%);border-radius:50%;transform:translate(-50%,-50%);left:var(--gx,50%);top:var(--gy,50%);opacity:0;transition:opacity .3s;pointer-events:none}
.pgc-btn:hover::before{opacity:1}
.pgc-btn:hover{background:rgba(255,255,255,.26);box-shadow:0 0 20px rgba(255,255,255,.3)}
/* LIGHTBOX */
#lb{position:fixed;inset:0;background:rgba(0,0,0,.97);z-index:9999;display:none;align-items:center;justify-content:center;padding:1rem;backdrop-filter:blur(16px)}
#lb.open{display:flex;animation:fi .2s ease}
@keyframes fi{from{opacity:0}to{opacity:1}}
#lb-in{position:relative;width:100%;max-width:920px}
#lb-frame{width:100%;aspect-ratio:16/9;border:none;border-radius:14px;background:#000;display:block}
#lb-x{position:absolute;top:-44px;right:0;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);border-radius:50%;width:34px;height:34px;color:#fff;font-size:.85rem;display:flex;align-items:center;justify-content:center;transition:all .35s}
#lb-x:hover{background:rgba(var(--rgb),.28);transform:rotate(90deg)}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .75s ease,transform .75s ease}
.reveal.visible{opacity:1;transform:none}
/* ADMIN */
.alogin{position:fixed;inset:0;background:rgba(0,0,0,.97);z-index:20000;display:none;align-items:center;justify-content:center}
.alogin.on{display:flex}
.lbox{background:rgba(255,255,255,.04);backdrop-filter:blur(24px);border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:30px;width:100%;max-width:348px;text-align:center}
.fi{width:100%;padding:10px 14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:11px;color:#fff;font-size:.82rem;margin-bottom:9px;outline:none;transition:border-color .3s;font-family:inherit}
.fi:focus{border-color:var(--r);box-shadow:0 0 0 3px rgba(var(--rgb),.1)}
.errmsg{color:var(--r);font-size:.7rem;margin-bottom:8px;display:none}
.pw-hint{margin-top:8px;font-size:.58rem;color:#141414;user-select:none}
.apanel{position:fixed;inset:0;background:rgba(4,4,12,.97);backdrop-filter:blur(20px);z-index:20000;display:none;flex-direction:column}
.apanel.on{display:flex}
.ahead{padding:12px 18px;background:rgba(255,255,255,.03);border-bottom:1px solid rgba(255,255,255,.05);display:flex;justify-content:space-between;align-items:center}
.ahead h2{color:var(--r);font-size:.85rem;font-weight:700}
.abody{display:flex;flex:1;overflow:hidden}
.aside{width:172px;background:rgba(0,0,0,.3);border-right:1px solid rgba(255,255,255,.04);padding:8px 0;overflow-y:auto;flex-shrink:0}
[data-lang=ar] .aside{border-right:none;border-left:1px solid rgba(255,255,255,.04)}
.ami{padding:9px 14px;font-size:.73rem;color:#2a2a2a;transition:all .2s;border-left:3px solid transparent;display:flex;align-items:center;gap:6px}
[data-lang=ar] .ami{border-left:none;border-right:3px solid transparent}
.ami:hover,.ami.on{color:#fff;background:rgba(var(--rgb),.06);border-color:var(--r)}
.acontent{flex:1;overflow-y:auto;padding:16px}
.asec{display:none}.asec.on{display:block}
.asec h3{font-size:.88rem;margin-bottom:11px;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.05);color:#fff}
.afg{margin-bottom:10px}
.afg label{display:block;font-size:.68rem;color:#2a2a2a;margin-bottom:4px}
.ail{display:grid;gap:6px;margin-bottom:11px}
.aic{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.05);border-radius:9px;padding:8px;display:flex;align-items:center;gap:8px;transition:border-color .3s}
.aic:hover{border-color:rgba(var(--rgb),.18)}
.ath{width:60px;height:37px;background:#111;border-radius:6px;overflow:hidden;flex-shrink:0}
.ath img{width:100%;height:100%;object-fit:cover}
.aii{flex:1}.aii h4{font-size:.74rem;color:#ccc;margin-bottom:2px}.aii p{font-size:.64rem;color:#222}
.aiac{display:flex;gap:5px;flex-shrink:0}
.be,.bd{padding:4px 8px;border:none;border-radius:7px;font-size:.64rem;transition:all .2s;font-family:inherit}
.be{background:rgba(var(--rgb),.1);color:var(--r);border:1px solid rgba(var(--rgb),.18)}.be:hover{background:var(--r);color:#fff}
.bd{background:rgba(255,255,255,.04);color:#222}.bd:hover{background:rgba(255,0,0,.14);color:#fff}
.btn-add{padding:8px 14px;background:linear-gradient(135deg,var(--r),color-mix(in srgb,var(--r) 55%,#000));color:#fff;border:none;border-radius:8px;font-size:.71rem;transition:all .3s;display:inline-flex;align-items:center;gap:5px;font-family:inherit;box-shadow:0 0 12px var(--rg)}
.btn-add:hover{transform:translateY(-2px)}
.btn-sv{padding:8px 16px;background:#27ae60;color:#fff;border:none;border-radius:8px;font-size:.71rem;transition:all .3s;font-family:inherit}
.btn-sv:hover{background:#1e9651}
.tip{background:rgba(var(--rgb),.05);border:1px solid rgba(var(--rgb),.12);border-radius:8px;padding:7px 11px;margin-bottom:9px;font-size:.67rem;color:#555;line-height:1.6}
.fdz{border:2px dashed rgba(var(--rgb),.25);border-radius:11px;padding:16px 12px;text-align:center;transition:all .3s;position:relative;margin-bottom:9px}
.fdz.drag-over,.fdz:hover{border-color:var(--r);background:rgba(var(--rgb),.07)}
.fdz input[type=file]{position:absolute;inset:0;opacity:0;width:100%;height:100%}
.fdz p{color:#444;font-size:.7rem;line-height:1.5}.fdz small{color:#222;font-size:.62rem}
.fdz .dzi{font-size:1.4rem;display:block;margin-bottom:5px}
.thpw{display:none;position:relative;margin-bottom:9px}
.thpw img{width:100%;border-radius:9px;display:block;max-height:120px;object-fit:cover}
.thrm{position:absolute;top:5px;right:5px;background:rgba(var(--rgb),.9);border:none;border-radius:6px;color:#fff;padding:3px 6px;font-size:.6rem;font-family:inherit}
.url-row{display:flex;gap:6px;align-items:center;margin-bottom:0}
.url-row .fi{flex:1;margin-bottom:0}
.ytb{padding:4px 8px;border-radius:7px;font-size:.63rem;white-space:nowrap;border:1px solid rgba(255,255,255,.07);color:#333;transition:all .3s}
.ytb.ok{background:rgba(39,174,96,.1);border-color:rgba(39,174,96,.28);color:#5de88a}
.ytb.err{background:rgba(var(--rgb),.1);border-color:rgba(var(--rgb),.24);color:var(--r)}
.imodal{position:fixed;inset:0;background:rgba(0,0,0,.95);z-index:30000;display:none;align-items:center;justify-content:center;padding:14px}
.imodal.on{display:flex}
.imbox{background:rgba(12,12,22,.98);backdrop-filter:blur(26px);border:1px solid rgba(255,255,255,.07);border-radius:18px;padding:20px;width:100%;max-width:450px;max-height:90vh;overflow-y:auto}
.imbox h3{margin-bottom:12px;color:var(--r);font-size:.9rem}
.notif{position:fixed;bottom:16px;left:50%;transform:translateX(-50%) translateY(100px);background:rgba(10,10,18,.95);backdrop-filter:blur(18px);border:1px solid rgba(var(--rgb),.18);border-radius:10px;padding:8px 16px;z-index:99999;transition:transform .4s cubic-bezier(.34,1.56,.64,1);font-size:.71rem;white-space:nowrap}
.notif.show{transform:translateX(-50%) translateY(0)}
.notif.ok{border-color:rgba(39,174,96,.3)}
footer{text-align:center;padding:1.6rem;border-top:1px solid var(--bd);color:var(--tx3);font-size:.67rem;position:relative;z-index:10}
footer b{color:var(--r);font-weight:400}
::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:#080810}::-webkit-scrollbar-thumb{background:var(--r);border-radius:2px}

/* ===== TIMELINE (NLE style) ===== */
.tl-wrap{position:relative;perspective:1100px;perspective-origin:50% 30%;padding:1rem 0 3rem}
.tl-ruler{position:absolute;left:50%;top:0;bottom:0;width:0;transform:translateX(-50%)}
.tl-line{position:absolute;left:-1px;top:0;bottom:0;width:2px;background:linear-gradient(to bottom,transparent,rgba(var(--rgb),.55) 4%,rgba(var(--rgb),.55) 96%,transparent);box-shadow:0 0 18px var(--rg)}
.tl-ticks{position:absolute;left:-9px;top:0;bottom:0;width:18px;background:repeating-linear-gradient(to bottom,var(--tx3) 0 1px,transparent 1px 14px);opacity:.55;-webkit-mask:linear-gradient(to bottom,transparent,#000 4%,#000 96%,transparent);mask:linear-gradient(to bottom,transparent,#000 4%,#000 96%,transparent)}
.tl-head{position:sticky;top:50%;z-index:5;width:0;height:0;pointer-events:none}
.tl-head i{position:absolute;left:-46px;width:92px;height:2px;top:0;background:var(--r2);box-shadow:0 0 14px var(--r)}
.tl-head b{position:absolute;left:-11px;top:-20px;width:22px;height:16px;background:var(--r);clip-path:polygon(0 0,100% 0,100% 55%,50% 100%,0 55%);box-shadow:0 0 14px var(--r)}
.tl-head span{position:absolute;left:54px;top:-9px;font:700 .62rem/1 'Inter',monospace;color:#fff;background:rgba(var(--rgb),.92);padding:3px 7px;border-radius:5px;white-space:nowrap;font-variant-numeric:tabular-nums;letter-spacing:.5px}
.tl-row{position:relative;display:flex;margin-bottom:2.6rem;transform-style:preserve-3d}
.tl-row:nth-child(odd){justify-content:flex-start}.tl-row:nth-child(even){justify-content:flex-end}
.tl-clip{width:calc(50% - 46px);opacity:0;transform:translate3d(var(--fx,-80px),30px,-380px) rotateY(var(--ry,22deg));transition:opacity .8s ease,transform .9s cubic-bezier(.2,.8,.2,1);will-change:transform}
.tl-row:nth-child(even) .tl-clip{--fx:80px;--ry:-22deg}
.tl-row.in .tl-clip{opacity:1;transform:translate3d(0,0,var(--z,0px)) rotateY(calc(var(--tilt,0)*1deg))}
.tl-node{position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px;border-radius:50%;background:var(--bg);border:2px solid var(--r);box-shadow:0 0 0 0 var(--rg);transition:.5s}
.tl-row.in .tl-node{background:var(--r);box-shadow:0 0 16px var(--r)}
.tl-row::after{content:'';position:absolute;top:50%;height:1px;width:34px;background:linear-gradient(90deg,var(--r),transparent);opacity:.7}
.tl-row:nth-child(odd)::after{left:calc(50% - 40px);transform:scaleX(-1)}
.tl-row:nth-child(even)::after{left:calc(50% + 6px)}
.tl-clip .vc{border-radius:10px}
.tl-bar{display:flex;align-items:center;gap:.5rem;padding:.32rem .6rem;background:linear-gradient(90deg,rgba(var(--rgb),.9),rgba(160,20,20,.8));font-size:.6rem;font-weight:700;letter-spacing:.4px;color:#fff;font-variant-numeric:tabular-nums}
.tl-bar em{font-style:normal;background:rgba(0,0,0,.35);padding:1px 6px;border-radius:4px}
.tl-bar span{margin-left:auto;opacity:.8}
[dir=rtl] .tl-bar span{margin-left:0;margin-right:auto}
.skim{position:absolute;top:0;bottom:0;width:2px;background:#fff;left:0;opacity:0;pointer-events:none;box-shadow:0 0 10px #fff;transition:opacity .2s}
.vc:hover .skim{opacity:.85}
.skim-t{position:absolute;bottom:6px;left:0;font-size:.58rem;background:rgba(0,0,0,.7);color:#fff;padding:2px 5px;border-radius:4px;opacity:0;pointer-events:none;font-variant-numeric:tabular-nums;transform:translateX(6px)}
.vc:hover .skim-t{opacity:1}
@media(max-width:760px){.tl-ruler{left:14px}.tl-row{justify-content:flex-end!important}.tl-clip{width:calc(100% - 38px);--fx:60px!important;--ry:-14deg!important}.tl-row::after{left:20px!important;transform:none!important;width:14px}.tl-node{left:14px}.tl-head span{display:none}}
/* ===== HUB cards ===== */
.hub{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
@media(max-width:640px){.hub{grid-template-columns:1fr}}
.hub-c{position:relative;overflow:hidden;text-align:start;padding:1.8rem 1.6rem;border-radius:18px;background:linear-gradient(135deg,var(--sf),rgba(var(--rgb),.05));border:1px solid var(--bd);color:var(--tx);font-family:inherit;transition:all .45s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column;gap:.5rem;min-height:180px}
.hub-c::before{content:'';position:absolute;right:-60px;top:-60px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(var(--rgb),.28),transparent 70%);transition:transform .6s}
.hub-c:hover{border-color:rgba(var(--rgb),.45);transform:translateY(-6px);box-shadow:0 22px 56px rgba(0,0,0,.45),0 0 30px rgba(var(--rgb),.1)}
.hub-c:hover::before{transform:scale(1.5)}
.hub-ic{font-size:2rem}.hub-t{font-size:1.25rem;font-weight:900}.hub-d{font-size:.76rem;color:var(--tx2);line-height:1.7;max-width:320px}
.hub-go{margin-top:auto;font-size:.7rem;font-weight:700;color:var(--r);display:flex;align-items:center;gap:.4rem}
.hub-n{position:absolute;top:1.2rem;right:1.3rem;font-size:.62rem;padding:3px 10px;border-radius:20px;border:1px solid rgba(var(--rgb),.3);color:var(--r);background:rgba(var(--rgb),.08)}
[dir=rtl] .hub-n{right:auto;left:1.3rem}
/* ===== MENU PANELS ===== */
.mp{position:fixed;inset:0;z-index:7000;display:none;background:rgba(4,4,12,.72);backdrop-filter:blur(22px) saturate(1.2);overflow-y:auto;padding:5.2rem 1.2rem 3rem}
[data-theme=light] .mp{background:rgba(240,240,246,.8)}
.mp.open{display:block;animation:mpIn .5s cubic-bezier(.2,.8,.2,1)}
@keyframes mpIn{from{opacity:0;transform:translateY(40px) scale(.98)}to{opacity:1;transform:none}}
.mp-in{max-width:1180px;margin:0 auto}
.mp-top{position:sticky;top:-1px;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:-1rem 0 1.4rem;padding:.7rem 0}
.mp-x{width:40px;height:40px;border-radius:50%;border:1px solid var(--bd);background:var(--sf);color:var(--tx);font-size:.9rem;transition:all .35s;flex-shrink:0}
.mp-x:hover{background:rgba(var(--rgb),.2);color:var(--r);transform:rotate(90deg)}
.mp .sec-hd{margin-bottom:1.4rem}.mp .reveal{opacity:1;transform:none}
.mp .rc,.mp .cc{background:linear-gradient(145deg,var(--sf),rgba(255,255,255,.02));backdrop-filter:blur(10px)}
.mp .ctab,.mp .rtab{border-radius:100px}
.mp .ctab.on,.mp .rtab.on{box-shadow:0 0 18px rgba(var(--rgb),.2)}
.nb.on{color:var(--r)}
.ci.tg{--ig:rgba(41,182,246,.45)}
@media(prefers-reduced-motion:reduce){.tl-clip{transition:none;opacity:1;transform:none}.mp.open{animation:none}}

/* ===== v3 GLASS ===== */
.orb{position:fixed;border-radius:50%;filter:blur(80px);opacity:.42;z-index:1;pointer-events:none;transform:translate(calc(var(--ox,0)*var(--k,40)*1px),calc(var(--oy,0)*var(--k,40)*1px));transition:transform .9s cubic-bezier(.2,.8,.2,1);animation:orbF 16s ease-in-out infinite alternate}
@keyframes orbF{to{margin:50px -40px}}
.o1{width:420px;height:420px;background:var(--r);top:6%;left:-6%}.o2{width:480px;height:480px;background:#4338ca;top:42%;right:-10%;--k:-60}.o3{width:380px;height:380px;background:#0891b2;bottom:-8%;left:32%;--k:30}
[data-theme=light] .orb{opacity:.25}body.no-orbs .orb{display:none}body.no-bg canvas#bg3{display:none}body.no-pay #pay-fab{display:none}
body.sys-cursor *{cursor:auto!important}body.sys-cursor #cur,body.sys-cursor #cur2{display:none}
.vc,.tl-info,.hub-c,.cc,.rc,.ci,.pay-modal-inner,.pay-card,.pay-tab,#lb-in,.ct-info,.ct-form,.about-g,.stat{background:radial-gradient(280px circle at var(--mx,-400px) var(--my,-400px),rgba(255,255,255,.22),transparent 62%),linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.035));-webkit-backdrop-filter:blur(20px) saturate(1.8);backdrop-filter:blur(20px) saturate(1.8);border:1px solid rgba(255,255,255,.17);box-shadow:inset 0 1px 0 rgba(255,255,255,.32),inset 0 -1px 0 rgba(255,255,255,.04),0 12px 40px rgba(0,0,0,.34)}
[data-theme=light] .vc,[data-theme=light] .tl-info,[data-theme=light] .hub-c,[data-theme=light] .cc,[data-theme=light] .rc,[data-theme=light] .ci,[data-theme=light] .ct-info,[data-theme=light] .ct-form,[data-theme=light] .about-g,[data-theme=light] .stat{background:radial-gradient(280px circle at var(--mx,-400px) var(--my,-400px),rgba(255,255,255,.9),transparent 62%),linear-gradient(135deg,rgba(255,255,255,.66),rgba(255,255,255,.3));border-color:rgba(255,255,255,.85);box-shadow:inset 0 1px 0 #fff,0 12px 34px rgba(60,60,110,.14)}
.hub-c{overflow:hidden}
/* ===== v3 TIMELINE grid + info ===== */
.tl-row{display:grid;grid-template-columns:1fr 1fr;column-gap:96px;align-items:center}
.tl-row:nth-child(odd) .tl-clip{grid-column:1;grid-row:1;justify-self:end}.tl-row:nth-child(odd) .tl-info{grid-column:2;grid-row:1;justify-self:start;--ix:-40px}
.tl-row:nth-child(even) .tl-clip{grid-column:2;grid-row:1;justify-self:start}.tl-row:nth-child(even) .tl-info{grid-column:1;grid-row:1;justify-self:end;text-align:end;--ix:40px}
.tl-row:nth-child(even) .ti-c{justify-content:flex-end}
.tl-clip{width:100%;max-width:520px}.tl-clip.port{max-width:290px}
.tl-clip .vc-thumb{aspect-ratio:var(--ar,16/9)}
.tl-node{width:26px;height:26px;margin:-13px;display:grid;place-items:center;font-size:.58rem;font-weight:800;color:var(--tx2);z-index:3}
.tl-row.in .tl-node{color:#fff}
.tl-info{max-width:380px;padding:1.1rem 1.2rem;border-radius:16px;opacity:0;transform:translate3d(var(--ix,-40px),0,-120px);transition:opacity .8s .2s,transform .9s .2s cubic-bezier(.2,.8,.2,1)}
.tl-row.in .tl-info{opacity:1;transform:none}
.ti-n{font-size:.6rem;font-weight:700;color:var(--r);letter-spacing:1.5px;margin-bottom:.35rem;font-variant-numeric:tabular-nums}
.ti-t{font-size:1.02rem;font-weight:800;line-height:1.35;margin-bottom:.4rem}
.ti-d{font-size:.74rem;color:var(--tx2);line-height:1.75;margin-bottom:.7rem}
.ti-c{display:flex;flex-wrap:wrap;gap:.35rem}
.chip{font-size:.62rem;padding:3px 9px;border-radius:100px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.07);color:var(--tx2);font-variant-numeric:tabular-nums}.chip.hl{color:var(--r);border-color:rgba(var(--rgb),.38)}
.vc-thumb iframe.pl,.vc-thumb iframe.pv{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:2;background:#000}
.vc-thumb iframe.pv{pointer-events:none;animation:fi .6s .3s both}
.vc-thumb{cursor:pointer}
.vc.playing .vc-ov,.vc.playing .skim,.vc.playing .skim-t{display:none}
.vc-th,.vc-stop{position:absolute;top:8px;z-index:4;width:30px;height:30px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(0,0,0,.55);color:#fff;font-size:.8rem;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:all .3s}
.vc-th{left:8px}.vc-stop{left:44px}.vc-th:hover,.vc-stop:hover{background:var(--r)}
@media(max-width:760px){.tl-row{grid-template-columns:1fr;padding-inline-start:40px;row-gap:.8rem}.tl-row .tl-clip,.tl-row .tl-info{grid-column:1!important;grid-row:auto!important;justify-self:start!important;text-align:start!important;--ix:30px!important}.tl-row .tl-clip{max-width:none}.tl-row .tl-clip.port{max-width:290px}.tl-row .ti-c{justify-content:flex-start!important}}
/* ===== v3 THEATER ===== */
#lb{--tx:#fff;--tx2:rgba(255,255,255,.68);--tx3:rgba(255,255,255,.4);--bd:rgba(255,255,255,.14);--sf:rgba(255,255,255,.07);color:#fff;background:rgba(4,4,12,.8);-webkit-backdrop-filter:blur(26px);backdrop-filter:blur(26px)}
#lb-in{max-width:min(940px,96vw);padding:.9rem;border-radius:22px;max-height:96vh;overflow:auto}#lb-in.p{max-width:min(500px,96vw)}
#lb-x{top:.6rem;right:.6rem;z-index:5;background:rgba(0,0,0,.55)}
#lb-stage{position:relative;width:100%;aspect-ratio:var(--ar,16/9);max-height:68vh;margin:0 auto;border-radius:14px;overflow:hidden;background:#000}
#lb-in.p #lb-stage{width:auto;height:68vh;max-width:100%}
#lb-frame{width:100%;height:100%;aspect-ratio:auto;border-radius:0}
#lb-meta{display:flex;gap:1rem;justify-content:space-between;align-items:flex-end;padding:.9rem .4rem .2rem;flex-wrap:wrap}
#lb-t{font-size:1rem;font-weight:800}#lb-d{font-size:.74rem;color:var(--tx2);line-height:1.7;max-width:520px;margin:.2rem 0 .5rem}
.lb-act{display:flex;gap:.5rem;align-items:center}.lb-act button{width:38px;height:38px;border-radius:50%;border:1px solid var(--bd);background:var(--sf);color:#fff;font-size:1.1rem}.lb-act .btn{padding:.55rem 1rem}
.lb-hint{font-size:.62rem;color:var(--tx3);margin-top:.5rem}.lb-hint a{color:var(--r)}
/* ===== v3 PAY ===== */
.pay-modal{align-items:center;--tx:#fff;--tx2:rgba(255,255,255,.7);--tx3:rgba(255,255,255,.45);--bd:rgba(255,255,255,.14);--sf:rgba(255,255,255,.07)}
.pay-modal-inner{max-width:800px;border-radius:26px;padding:1.6rem;color:#fff}
.pay-wrap{display:grid;grid-template-columns:210px 1fr;gap:1rem;margin-top:1.2rem}
.pay-tabs{display:flex;flex-direction:column;gap:.55rem}
.pay-tab{display:flex;align-items:center;gap:.65rem;padding:.75rem .9rem;border-radius:14px;color:#fff;font-size:.8rem;font-weight:700;font-family:inherit;text-align:start;transition:all .35s cubic-bezier(.2,.8,.2,1)}
.pay-tab:hover{transform:translateX(4px)}[dir=rtl] .pay-tab:hover{transform:translateX(-4px)}
.pay-tab.on{border-color:var(--pc);box-shadow:0 0 26px color-mix(in srgb,var(--pc) 38%,transparent),inset 0 1px 0 rgba(255,255,255,.3)}
.pt-ic,.pc-ic{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.1);flex-shrink:0}.pt-ic svg{width:20px;height:20px}.pc-ic{width:50px;height:50px;border-radius:14px}
.pay-card{border-radius:20px;padding:1.3rem;background:radial-gradient(300px circle at var(--mx,-400px) var(--my,-400px),rgba(255,255,255,.2),transparent 62%),linear-gradient(160deg,color-mix(in srgb,var(--pc) 36%,transparent),rgba(255,255,255,.03) 70%);animation:pcIn .5s cubic-bezier(.2,.8,.2,1);border-color:color-mix(in srgb,var(--pc) 55%,rgba(255,255,255,.2))}
@keyframes pcIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.pc-top{display:flex;align-items:center;gap:.8rem;margin-bottom:1rem}.pc-nm{font-size:1.1rem;font-weight:900}.pc-cur{font-size:.64rem;color:var(--tx2);letter-spacing:1px}
.pc-body{display:flex;gap:1.1rem;flex-wrap:wrap}.pc-main{flex:1;min-width:200px}
.pc-l{font-size:.6rem;color:var(--tx3);letter-spacing:1.2px;margin:.7rem 0 .3rem}
.pc-id{font-size:1.05rem;font-weight:800;direction:ltr;text-align:start;word-break:break-all;padding:.55rem .8rem;border-radius:11px;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.1)}
.pc-h{font-size:.7rem;color:var(--tx2);margin-top:.5rem;line-height:1.6}
.pc-ch{display:flex;flex-wrap:wrap;gap:.4rem}.pc-chip{padding:6px 13px;border-radius:100px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.07);color:#fff;font-size:.72rem;font-family:inherit;transition:all .25s}
.pc-chip:hover{transform:translateY(-2px)}.pc-chip.on{background:var(--pc);border-color:var(--pc);box-shadow:0 0 18px color-mix(in srgb,var(--pc) 60%,transparent)}
.pc-in{width:84px;padding:6px 11px;border-radius:100px;border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.25);color:#fff;font-size:.72rem;font-family:inherit;outline:none}.pc-in:focus{border-color:var(--pc)}
.pc-sum{font-size:.72rem;color:#fff;margin-top:.6rem;min-height:1em;font-weight:700}
.pc-act{display:flex;gap:.55rem;flex-wrap:wrap;margin-top:.9rem}
.pc-btn{display:inline-flex;align-items:center;gap:.4rem;padding:.6rem 1.2rem;border-radius:100px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.12);color:#fff;font-size:.74rem;font-weight:700;font-family:inherit;text-decoration:none;transition:all .3s}
.pc-btn:hover{background:rgba(255,255,255,.22);transform:translateY(-2px)}.pc-btn.go{background:var(--pc);border-color:var(--pc);box-shadow:0 0 22px color-mix(in srgb,var(--pc) 55%,transparent)}.pc-btn.ok{background:#27ae60;border-color:#27ae60}
.pc-thx{font-size:.72rem;margin-top:.7rem;opacity:0;transform:translateY(6px);transition:all .5s;color:#9df0b6}.pc-thx.on{opacity:1;transform:none}
.pc-qw{display:flex;flex-direction:column;align-items:center;gap:.4rem;align-self:flex-start}.pc-qw #pc-q{padding:9px;background:#fff;border-radius:14px;box-shadow:0 8px 30px rgba(0,0,0,.35);line-height:0}.pc-qw small{font-size:.58rem;color:var(--tx3);letter-spacing:2px}
.bp{position:fixed;width:7px;height:7px;border-radius:50%;z-index:99999;pointer-events:none;margin:-3px;background:hsl(calc(var(--h)*1deg),90%,62%)}
@media(max-width:640px){.pay-wrap{grid-template-columns:1fr}.pay-tabs{flex-direction:row;overflow-x:auto;padding-bottom:4px}.pay-tab{flex-shrink:0}}
.tg{display:flex;align-items:center;gap:8px;font-size:.74rem;padding:5px 0;color:#ddd}.tg input{accent-color:var(--r)}
.btn-cx{padding:8px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:8px;color:#fff;font-family:inherit}

/* ===== v4 ===== */
#sbg{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}body.no-sb #sbg{display:none}
.sb{position:absolute;width:var(--s);height:var(--s);border-radius:50%;display:grid;place-items:center;opacity:.6;background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.22);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 12px 34px rgba(0,0,0,.35);transform:translate(calc(var(--ox,0)*var(--k)*1px),calc(var(--oy,0)*var(--k)*1px));transition:transform .9s cubic-bezier(.2,.8,.2,1);animation:sbF var(--d) ease-in-out infinite alternate}
.sb svg{width:46%!important;height:46%!important}
@keyframes sbF{from{margin-top:-16px}to{margin-top:20px}}
@media(max-width:700px){.sb:nth-child(n+5){display:none}}
.cat-bar{display:flex;flex-wrap:wrap;gap:.55rem;justify-content:center;margin:0 0 2.4rem}
.cat-chip{padding:.5rem 1.1rem;border-radius:100px;font-size:.74rem;font-weight:700;color:var(--tx2);font-family:inherit;border:1px solid rgba(255,255,255,.16);background:radial-gradient(160px circle at var(--mx,-300px) var(--my,-300px),rgba(255,255,255,.2),transparent 62%),rgba(255,255,255,.06);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);transition:all .35s cubic-bezier(.2,.8,.2,1)}
.cat-chip i{font-style:normal;font-size:.62rem;opacity:.75;margin-inline-start:.35rem;padding:1px 7px;border-radius:100px;background:rgba(255,255,255,.12)}
.cat-chip:hover{transform:translateY(-3px);color:var(--tx)}.cat-chip.on{background:linear-gradient(135deg,var(--r),color-mix(in srgb,var(--r) 55%,#000));color:#fff;border-color:var(--r);box-shadow:0 0 26px var(--rg)}
.about-g{display:grid;grid-template-columns:1.4fr 1fr;gap:2.4rem;align-items:center;padding:2.2rem;border-radius:24px}
.ab-p{font-size:.9rem;line-height:1.95;color:var(--tx2);margin:1rem 0 1.1rem}
.ab-img{border-radius:22px;padding:6px;background:linear-gradient(135deg,var(--r),var(--r2));box-shadow:0 20px 60px rgba(var(--rgb),.28)}.ab-img img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:17px;background:#111}
.ct-g{display:grid;grid-template-columns:1fr 1.15fr;gap:1.3rem}.ct-info,.ct-form{padding:1.6rem;border-radius:22px}
.ct-info h3,.ct-form h3{font-size:1.05rem;font-weight:800;margin-bottom:1.1rem}.ct-info h4{font-size:.66rem;letter-spacing:1.4px;color:var(--tx3);margin:1.2rem 0 .7rem;font-weight:700}
.ct-row{display:flex;gap:.8rem;align-items:center;margin-bottom:.85rem}.ct-row>span{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:rgba(var(--rgb),.12);border:1px solid rgba(var(--rgb),.25)}
.ct-row small{display:block;font-size:.58rem;color:var(--tx3);letter-spacing:1px}.ct-row b{font-size:.82rem;font-weight:700}.ct-row a{color:var(--tx);text-decoration:none}.ct-row a:hover{color:var(--r)}
.ct-in{width:100%;padding:.8rem 1rem;margin-bottom:.7rem;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.18);color:var(--tx);font-family:inherit;font-size:.82rem;outline:none;transition:all .3s;resize:vertical}.ct-in:focus{border-color:var(--r);box-shadow:0 0 0 3px rgba(var(--rgb),.18)}
[data-theme=light] .ct-in{background:rgba(255,255,255,.6)}
.ct-bt{display:flex;gap:.6rem;flex-wrap:wrap}.ct-info .cgrid{grid-template-columns:repeat(2,1fr);gap:.6rem}
@media(max-width:820px){.about-g,.ct-g{grid-template-columns:1fr}.about-g{padding:1.4rem}.ab-img{max-width:280px}}
footer{text-align:start;padding:2.6rem 1.5rem 1.4rem}
.ft-g{max-width:1180px;margin:0 auto 1.6rem;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2rem}
.ft-d{font-size:.74rem;line-height:1.8;color:var(--tx2);margin-top:.7rem;max-width:300px}
footer h5{font-size:.66rem;letter-spacing:1.4px;color:var(--tx);margin-bottom:.8rem}
footer button,footer span{display:block;background:none;border:none;color:var(--tx2);font-family:inherit;font-size:.76rem;padding:.25rem 0;text-align:start;transition:color .25s}footer button:hover{color:var(--r)}footer span a{color:inherit;text-decoration:none}footer span a:hover{color:var(--r)}
#foot{text-align:center;border-top:1px solid var(--bd);padding-top:1.2rem;font-size:.67rem;color:var(--tx3)}
@media(max-width:700px){.ft-g{grid-template-columns:1fr}}
.pres{display:flex;gap:7px;margin:6px 0 10px}.pre{width:30px;height:30px;border-radius:50%;border:2px solid rgba(255,255,255,.25);transition:transform .2s}.pre:hover{transform:scale(1.15)}
.crow{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.cin{height:38px;padding:3px}

/* ===== v5 ===== */
#all-grid{perspective:1100px;perspective-origin:50% 30%}
.vc{will-change:auto}
.tl-row.done{transform-style:flat}
.tl-row.done .tl-clip,.tl-row.done .tl-info{transform:none!important;transition:none;will-change:auto}
.vc-load{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;pointer-events:none}
.spin{width:34px;height:34px;border-radius:50%;border:3px solid rgba(255,255,255,.2);border-top-color:var(--r);animation:spn .8s linear infinite}@keyframes spn{to{transform:rotate(360deg)}}
.vc-load.fail{inset:auto 0 0 0;z-index:5;flex-direction:column;gap:.45rem;padding:2.4rem .8rem .8rem;text-align:center;background:linear-gradient(transparent,rgba(0,0,0,.92) 38%);pointer-events:auto;color:#fff}
.vc-load.fail b{font-size:.74rem}.vc-load.fail small{font-size:.62rem;opacity:.78;line-height:1.6}.vc-load.fail .btn{padding:.45rem 1rem;font-size:.68rem}
.vc-load .x{position:absolute;top:.5rem;right:.5rem;width:24px;height:24px;border-radius:50%;border:none;background:rgba(255,255,255,.15);color:#fff;font-size:.7rem}
.vc-stop{z-index:6}
#lb-stage .vc-load.fail{inset:auto 0 0 0}
.hero-loc{display:flex;width:fit-content;align-items:center;gap:.4rem;margin:.9rem auto 0;padding:.42rem 1.05rem;border-radius:100px;font-size:.76rem;font-weight:700;color:var(--tx);border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);cursor:pointer;transition:all .3s}
.hero-loc:hover{border-color:var(--r);color:var(--r);transform:translateY(-2px)}

/* ===== v6: icons + horizontal timeline ===== */
.ico{display:inline-grid;place-items:center;width:1.1em;height:1.1em;vertical-align:-.2em;flex-shrink:0}.ico svg{width:100%;height:100%;display:block}
.ic-gmail{color:#EA4335}.ic-wa{color:#25D366}.ic-telegram{color:#26A5E4}.ic-vodafone{color:#E60000}.ic-paypal{color:#009cde}
.btn .ico{width:1.15em;height:1.15em;margin-inline-end:.35rem}.pb .ico{width:1.05em;height:1.05em}
.hub-ic{display:grid;place-items:center;width:54px;height:54px;border-radius:16px;font-size:1.7rem;color:var(--r);background:linear-gradient(135deg,rgba(var(--rgb),.26),rgba(var(--rgb),.06));border:1px solid rgba(var(--rgb),.38)}
.hero-loc .ico{color:var(--r);width:1.1em;height:1.1em}.wh .ico{width:1.2em;height:1.2em;color:var(--r)}
.ct-row .ico{width:20px;height:20px}
footer span .ico{width:1em;height:1em;margin-inline-end:.4rem;vertical-align:-.15em}
#pay-fab{display:grid;place-items:center}#pay-fab .ico{width:22px;height:22px;color:#fff}
#pay-h .ico{width:1.1em;height:1.1em;color:var(--r)}
.ci-icon svg{width:20px;height:20px}.pc-ic svg{width:28px;height:28px}.pt-ic svg{width:20px;height:20px}
.rc-ic .ico{font-size:1.4rem;color:var(--r)}.rc-dl .ico,.cc-btn .ico,.empty-res .ico{width:1em;height:1em}
.vc-th .ico,.hx-b .ico{width:15px;height:15px}.vc-ext .ico{width:.95em;height:.95em}.chip .ico{width:.95em;height:.95em;vertical-align:-.15em}.pc-btn .ico{width:1.05em;height:1.05em}.vc-load .btn .ico{width:1em;height:1em}
.hx{--cw:250px;--cwl:430px;position:relative;direction:ltr}
@media(max-width:700px){.hx{--cw:200px;--cwl:290px}.hx-hint{display:none}}
.hx-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.8rem}
.hx-tcbox{display:flex;align-items:center;gap:.55rem;padding:.42rem .85rem;border-radius:10px;background:rgba(0,0,0,.32);border:1px solid rgba(var(--rgb),.38);font:700 .78rem 'Inter',monospace;font-variant-numeric:tabular-nums;color:#fff;letter-spacing:.6px}
.hx-dot{width:8px;height:8px;border-radius:50%;background:var(--r);box-shadow:0 0 10px var(--r);animation:hxp 1.4s ease-in-out infinite}@keyframes hxp{50%{opacity:.35}}
.hx-hint{flex:1;text-align:center;font-size:.66rem;letter-spacing:.6px;color:var(--tx3)}
.hx-btns{display:flex;gap:.45rem}.hx-b{width:38px;height:38px;border-radius:50%;border:1px solid var(--bd);background:var(--sf);color:var(--tx);display:grid;place-items:center;transition:all .3s}
.hx-b:hover{background:var(--r);border-color:var(--r);color:#fff;transform:scale(1.08)}
.hx-stage{position:relative;height:calc(var(--cw)*1.78 + 64px);perspective:1500px;perspective-origin:50% 42%;overflow:hidden;border-radius:22px;border:1px solid rgba(255,255,255,.12);touch-action:pan-y;outline:none;background:radial-gradient(ellipse 70% 60% at 50% 108%,rgba(var(--rgb),.22),transparent 70%),linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.012))}
[data-theme=light] .hx-stage{background:radial-gradient(ellipse 70% 60% at 50% 108%,rgba(var(--rgb),.16),transparent 70%),rgba(255,255,255,.5)}
.hx-track{position:absolute;inset:0;transform-style:preserve-3d}
.hx-item{position:absolute;left:50%;top:50%;width:var(--cwl);margin-left:calc(var(--cwl)/-2);cursor:pointer;transition:transform .95s cubic-bezier(.22,.8,.2,1),opacity .7s,filter .7s}
.hx-item.port{width:var(--cw);margin-left:calc(var(--cw)/-2)}.hx-item.active{cursor:default}
.hx-item .tl-clip{width:100%;max-width:none;opacity:1;transform:none;filter:none;transition:none}
.hx-item.active .vc{border-color:var(--r);box-shadow:0 0 0 1px var(--r),0 24px 70px rgba(var(--rgb),.42)}
.hx-item:not(.active) .vc-info,.hx-item:not(.active) .vc-play{opacity:.75}
#hx-info.tl-info{max-width:780px;margin:1.2rem auto 0;opacity:1;transform:none;transition:none;text-align:center}#hx-info .ti-c{justify-content:center}
#hx-info.ani{animation:hxi .6s cubic-bezier(.2,.8,.2,1)}@keyframes hxi{from{opacity:0;transform:translateY(12px)}}
.hx-time{position:relative;margin-top:1.1rem;padding-top:18px}
.hx-ruler{position:absolute;left:0;right:0;top:0;height:16px;opacity:.7;background:repeating-linear-gradient(90deg,rgba(255,255,255,.55) 0 1px,transparent 1px 60px) bottom/100% 14px no-repeat,repeating-linear-gradient(90deg,rgba(255,255,255,.3) 0 1px,transparent 1px 12px) bottom/100% 7px no-repeat}
.hx-scrub{display:flex;gap:4px;direction:ltr}
.hx-seg{position:relative;overflow:hidden;flex:1;min-width:0;height:34px;border-radius:8px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);color:var(--tx3);font-size:.62rem;font-weight:700;font-family:inherit;transition:all .3s}
.hx-seg:hover{color:var(--tx);border-color:rgba(var(--rgb),.5)}.hx-seg.on{background:linear-gradient(90deg,var(--r),color-mix(in srgb,var(--r) 55%,#000));color:#fff;border-color:var(--r);box-shadow:0 0 16px rgba(var(--rgb),.35)}
.hx-seg b{position:absolute;left:0;bottom:0;height:3px;width:0;background:#fff;opacity:.9}.hx-seg.on b{animation:hxf 5.5s linear forwards}@keyframes hxf{to{width:100%}}
.hx.hold .hx-seg.on b,.hx.paused .hx-seg.on b{animation-play-state:paused}
.hx-head{position:absolute;top:0;bottom:-6px;width:0;left:0;pointer-events:none;z-index:3;transition:left .95s cubic-bezier(.22,.8,.2,1)}
.hx-head::before{content:'';position:absolute;left:-1px;top:8px;bottom:0;width:2px;background:var(--r);box-shadow:0 0 12px var(--r)}
.hx-head::after{content:'';position:absolute;left:-8px;top:0;width:16px;height:12px;background:var(--r);clip-path:polygon(0 0,100% 0,100% 55%,50% 100%,0 55%)}
@media(prefers-reduced-motion:reduce){.hx-item{transition:none}}
/* ===== v7: hero blends with the page + publish safe-area ===== */
.hero-vid{opacity:.42;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 22%,#000 60%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 22%,#000 60%,transparent 100%)}
[data-theme=light] .hero-vid{opacity:.22}
.hero-vid-overlay,[data-theme=light] .hero-vid-overlay{background:none}
.stat{padding:.85rem 1.5rem;border-radius:18px;min-width:96px}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body::before{content:'';position:fixed;top:0;left:0;right:0;height:env(safe-area-inset-top,0px);background:var(--bg);z-index:1200;pointer-events:none}
nav{top:env(safe-area-inset-top,0px)}
.lkc{background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.1);border-radius:9px;color:#9df0b6;font:600 .62rem monospace;padding:8px;width:100%;resize:none;outline:none}

/* ===== v8: modern refresh ===== */
nav{top:calc(env(safe-area-inset-top,0px) + 12px);left:50%;transform:translateX(-50%);width:min(1120px,calc(100% - 24px));border-radius:100px;border:1px solid var(--bd);padding:.65rem 1.1rem .65rem 1.4rem;box-shadow:0 10px 40px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.08)}
.sec{padding:6rem 1.5rem}
.sec-lbl{display:inline-flex;align-items:center;gap:.5rem;padding:.3rem .8rem;border-radius:100px;background:rgba(var(--rgb),.1);border:1px solid rgba(var(--rgb),.25);font-weight:700}
.btn{border-radius:100px;padding:.8rem 1.7rem}
.btn-r{background:linear-gradient(135deg,var(--r2),var(--r))}
.stat{min-width:120px}
.mq{position:relative;z-index:10;overflow:hidden;padding:1.1rem 0;border-block:1px solid var(--bd);background:linear-gradient(90deg,rgba(var(--rgb),.08),transparent 30%,transparent 70%,rgba(var(--rgb),.08));-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mq-t{display:flex;width:max-content;gap:1.6rem;align-items:center;animation:mq 40s linear infinite;direction:ltr}
.mq-t span{font:700 clamp(1rem,2.2vw,1.5rem)/1 'Inter','Cairo',sans-serif;color:var(--tx);white-space:nowrap;letter-spacing:-.3px}
.mq-t i{font-style:normal;color:var(--r);font-size:1rem}
.mq:hover .mq-t{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
body::after{content:'';position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
@media(prefers-reduced-motion:reduce){.mq-t{animation:none}}
@media(hover:none){*{cursor:auto!important}#cur,#cur2,#glow2{display:none}}
/* admin panel: readable text */
.ami{color:#9a9ab3}.afg label{color:#a3a3bb}.aii p{color:#8a8aa0!important}.tip{color:#b5b5c8}.fdz p{color:#b0b0c4}.fdz small{color:#777}.bd{color:#bbb}.ytb{color:#999}
.ahead{gap:.6rem;flex-wrap:wrap}.ahead>button{margin-inline-start:0}
.cloud-st{margin-inline-start:auto;font-size:.68rem;padding:4px 10px;border-radius:100px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:#ccc}
.cloud-st.ok{color:#5de88a;border-color:rgba(39,174,96,.4)}.cloud-st.err{color:#ff7b7b;border-color:rgba(255,80,80,.4)}.cloud-st.local{color:#ffcc66;border-color:rgba(255,200,80,.4)}
@media(max-width:480px){.stats{gap:.55rem;flex-wrap:nowrap;width:100%}.stat{min-width:0;flex:1;padding:.7rem .4rem}.stat-n{font-size:1.7rem}}