:root{--gold:#1557eb;--gold-l:#74b5ff;--gold-d:#0a2fa8;--navy:#070f1e;--navy2:#040c18;--navy3:#0d1e33;--ice:#e8edf5;--dim:rgba(232,237,245,.72);--muted:rgba(232,237,245,.46);--bdr:rgba(21,87,235,.2);--panel:rgba(10,22,48,.88);--shadow:0 24px 70px rgba(0,0,0,.32)}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Cairo,sans-serif;background:var(--navy);color:var(--ice);direction:rtl;text-rendering:optimizeLegibility}
a{color:inherit}
img{max-width:100%;height:auto}
button,input,select,textarea{font:inherit}
.screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link:focus{top:12px;right:12px;width:auto;height:auto;clip:auto;padding:10px 14px;background:var(--gold);color:var(--navy);z-index:9999;border-radius:6px}
#bg-canvas{position:fixed;inset:0;z-index:0;pointer-events:none}
.grid-bg{display:none}
.amb{position:fixed;border-radius:50%;pointer-events:none;z-index:0;filter:blur(84px)}
.amb1{width:680px;height:680px;top:-200px;left:-180px;background:radial-gradient(circle,rgba(21,87,235,.18),transparent 70%);animation:d1 16s ease-in-out infinite alternate}
.amb2{width:620px;height:620px;bottom:-180px;right:-180px;background:radial-gradient(circle,rgba(47,101,197,.38),transparent 70%);animation:d2 20s ease-in-out infinite alternate}
@keyframes d1{to{transform:translate(110px,80px) scale(1.12)}}@keyframes d2{to{transform:translate(-80px,-60px) scale(1.1)}}
.site-main,.site-header,.site-footer,section{position:relative;z-index:1}
.site-nav{position:fixed;top:0;right:0;width:100%;z-index:100;height:72px;padding:0 clamp(1rem,4vw,4rem);display:flex;align-items:center;justify-content:space-between;background:rgba(11,29,42,.82);backdrop-filter:blur(22px);border-bottom:1px solid var(--bdr);transition:background .25s,border-color .25s}
.site-nav.scrolled{background:rgba(11,29,42,.97);border-bottom-color:rgba(21,87,235,.3)}
.logo-wrap{display:flex;align-items:center;gap:12px;text-decoration:none;min-width:max-content}
.custom-logo-link{display:flex;align-items:center;max-width:min(320px,34vw)}
.custom-logo{display:block;max-height:52px;width:auto;object-fit:contain}
.lm-icon{width:48px;height:48px;flex-shrink:0}
.lt{font-family:'Rajdhani','DM Sans','Segoe UI',Arial,sans-serif!important;display:flex!important;flex-direction:column!important;line-height:1.15;letter-spacing:0;text-transform:uppercase;gap:0}
.lt .easy-word{font-size:.78rem!important;font-weight:400!important;letter-spacing:4px!important;color:#74b5ff!important;background:none!important;-webkit-background-clip:unset!important;background-clip:unset!important}
.lt .scope-word{font-size:1.1rem!important;font-weight:700!important;letter-spacing:2.5px!important;color:#1557eb!important;background:none!important;-webkit-background-clip:unset!important;background-clip:unset!important}
.nl{display:flex;align-items:center;gap:2.2rem;list-style:none;margin:0;padding:0}
.nl a{text-decoration:none;color:var(--dim);font-size:.88rem;font-weight:600;transition:color .2s;position:relative}
.nl a::after{content:"";position:absolute;bottom:-5px;right:0;width:0;height:1px;background:var(--gold);transition:width .25s}.nl a:hover{color:var(--gold)}.nl a:hover::after{width:100%}
.nl .cta,.nl li:last-child a{border:1px solid var(--gold);color:var(--gold);padding:7px 20px;border-radius:6px}.nl .cta:hover,.nl li:last-child a:hover{background:var(--gold);color:var(--navy)}.nl .cta::after,.nl li:last-child a::after{display:none}
.menu-toggle{display:none;width:42px;height:42px;border:1px solid var(--bdr);border-radius:8px;background:rgba(255,255,255,.03);align-items:center;justify-content:center;flex-direction:column;gap:5px;color:var(--ice);cursor:pointer}.menu-toggle span{width:19px;height:2px;background:currentColor;border-radius:999px}
.hero{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:118px 1.4rem 76px}
.hlabel{display:inline-flex;align-items:center;gap:10px;background:rgba(21,87,235,.08);border:1px solid rgba(21,87,235,.24);padding:7px 18px;border-radius:6px;font-size:.76rem;color:var(--gold);letter-spacing:1.5px;font-weight:800;text-transform:uppercase;margin-bottom:1.7rem;animation:fD .7s ease both}
.hlabel::before{display:none}@keyframes pulse{50%{opacity:.35;transform:scale(.68)}}
.htitle{font-size:clamp(2.05rem,6.4vw,4.75rem);font-weight:900;line-height:1.3;color:#fff;margin:0 0 1.5rem;max-width:920px;animation:fU .8s .08s ease both}
.htitle .acc{color:var(--gold);position:relative;display:inline-block}.htitle .acc::after{content:"";position:absolute;bottom:4px;right:0;left:0;height:4px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.42}
.hdesc{font-size:1.04rem;color:var(--dim);line-height:1.9;max-width:640px;margin:0 auto 2.4rem;animation:fU .8s .16s ease both}
.hbtns{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;animation:fU .8s .24s ease both}
.btn-p,.btn-o{border-radius:7px;padding:13px 30px;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;font-weight:800;transition:transform .22s,box-shadow .22s,background .22s,border-color .22s,color .22s;cursor:pointer}
.btn-p{background:var(--gold);color:var(--navy);border:1px solid var(--gold)}.btn-p:hover{background:var(--gold-l);transform:translateY(-2px);box-shadow:0 14px 34px rgba(21,87,235,.24)}
.btn-o{background:rgba(255,255,255,.02);color:var(--ice);border:1px solid rgba(232,237,245,.2)}.btn-o:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-2px)}
.scroll-hint{position:absolute;bottom:1.5rem;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--muted);font-size:.68rem;letter-spacing:2px;text-transform:uppercase;font-family:"DM Sans",sans-serif}.shl{width:1px;height:36px;background:linear-gradient(to bottom,var(--gold),transparent);animation:sl 1.8s ease-in-out infinite}@keyframes sl{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.stats{padding:3rem clamp(1rem,4vw,4rem);border-top:1px solid var(--bdr);border-bottom:1px solid var(--bdr);background:rgba(255,255,255,.018)}
.sg{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);text-align:center}.si{padding:1.2rem;position:relative}.si:not(:last-child)::after{content:"";position:absolute;left:0;top:20%;height:60%;width:1px;background:var(--bdr)}.bnum{display:block;font-family:Barlow,sans-serif;font-size:2.8rem;font-weight:900;color:var(--gold);line-height:1}.blbl{display:block;font-size:.82rem;color:var(--muted);margin-top:.42rem}
.si-wrap{max-width:1120px;margin:0 auto;padding:5.7rem 1.4rem;text-align:center}.stag{display:inline-flex;align-items:center;gap:12px;font-size:.78rem;letter-spacing:1.3px;font-weight:800;text-transform:uppercase;color:var(--gold);margin-bottom:.9rem;opacity:.95}.stag::before{content:"";width:28px;height:1px;background:var(--gold)}.stitle{font-size:clamp(1.65rem,4vw,2.75rem);font-weight:900;color:#fff;line-height:1.4;margin:0 0 1rem}.sdesc{font-size:.98rem;color:var(--dim);line-height:1.85;max-width:610px;margin:0 auto}
.about-grid,.cg{display:grid;grid-template-columns:1fr 1fr;gap:4rem;margin-top:3.5rem;text-align:right;align-items:start}.lead-copy{font-size:.96rem;color:var(--dim);line-height:1.9;margin:0 0 1.5rem}.vals{display:flex;flex-direction:column;gap:1rem;margin-top:1.5rem}.vi{display:flex;align-items:flex-start;gap:13px;padding:1rem 1.2rem;background:rgba(21,87,235,.045);border:1px solid rgba(21,87,235,.12);border-radius:8px;transition:.25s}.vi:hover{background:rgba(21,87,235,.09);border-color:rgba(21,87,235,.28);transform:translateX(-4px)}.vic{font-size:1.15rem;width:40px;height:40px;background:rgba(21,87,235,.11);border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.vit h4{font-size:.9rem;font-weight:800;color:#fff;margin:0 0 4px}.vit p{font-size:.79rem;color:var(--muted);line-height:1.65;margin:0}
.abox,.cform,.tcard{background:var(--panel);border:1px solid var(--bdr);border-radius:12px;box-shadow:var(--shadow);position:relative;overflow:hidden}.abox{padding:2.5rem}.abox::before{content:"";position:absolute;top:0;right:0;width:160px;height:160px;background:radial-gradient(circle at top right,rgba(21,87,235,.13),transparent 70%)}.acorner{position:absolute;top:0;right:0;width:38px;height:38px;border-top:2px solid var(--gold);border-right:2px solid var(--gold);border-radius:0 12px 0 0;opacity:.6}.mt{font-size:1.1rem;font-weight:800;color:#fff;line-height:1.75;margin:1rem 0 1.1rem}.ms{font-size:.86rem;color:var(--dim);line-height:1.85;margin:0}.anums{display:flex;gap:1.4rem;justify-content:space-between;margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--bdr)}.anums .n{font-family:Barlow,sans-serif;font-size:1.45rem;font-weight:900;color:var(--gold);display:block}.anums .l{font-size:.7rem;color:var(--muted)}.plink{margin-top:1.5rem;display:inline-flex;align-items:center;gap:8px;color:var(--gold);text-decoration:none;font-size:.88rem;font-weight:700;border-bottom:1px solid transparent;padding-bottom:3px;transition:.2s}.plink:hover{border-bottom-color:var(--gold);gap:12px}
#services{background:rgba(255,255,255,.012);border-top:1px solid var(--bdr);border-bottom:1px solid var(--bdr)}.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--bdr);border:1px solid var(--bdr);border-radius:12px;overflow:hidden;margin-top:3rem;text-align:right}.sc{background:rgba(7,23,39,.94);padding:2rem 1.8rem;transition:background .25s;position:relative;overflow:hidden;min-height:190px}.sc::after{content:"";position:absolute;bottom:0;right:0;left:0;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);transform:scaleX(0);transition:transform .35s}.sc:hover{background:var(--navy3)}.sc:hover::after{transform:scaleX(1)}.sch{display:flex;align-items:center;gap:14px;margin-bottom:.85rem}.sci{width:46px;height:46px;background:rgba(21,87,235,.09);border:1px solid rgba(21,87,235,.2);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0}.sch h3{font-size:.96rem;font-weight:800;color:#fff;line-height:1.45;flex:1;margin:0}.scd1,.scd2{font-size:.81rem;color:var(--muted);line-height:1.7;margin:0}.scd2{font-size:.78rem;margin-top:5px;opacity:.85}
.pt-wrap{overflow:hidden;margin-top:2.5rem;position:relative;padding:.5rem 0 5rem}.pt-wrap::before,.pt-wrap::after{content:"";position:absolute;top:0;bottom:0;width:110px;z-index:2;pointer-events:none}.pt-wrap::before{right:0;background:linear-gradient(90deg,transparent,var(--navy))}.pt-wrap::after{left:0;background:linear-gradient(-90deg,transparent,var(--navy))}.pt-track{display:flex;animation:srtl 30s linear infinite;width:max-content}.pt-track:hover{animation-play-state:paused}@keyframes srtl{from{transform:translateX(0)}to{transform:translateX(-50%)}}.pi{display:flex;align-items:center;justify-content:center;width:170px;height:78px;padding:1rem;border:1px solid var(--bdr);border-radius:8px;margin:0 .55rem;background:rgba(7,23,39,.9);transition:.25s}.pi:hover{border-color:var(--gold-d);background:rgba(21,87,235,.06);transform:translateY(-2px)}.pi img{max-width:126px;max-height:38px;object-fit:contain;filter:grayscale(1) brightness(1.28) contrast(.94);opacity:.76;transition:.25s}.pi:hover img{filter:none;opacity:1}
.tcard{max-width:720px;margin:3rem auto 0;padding:3rem 2.5rem;text-align:center}.tcard::before{content:"\275D";font-size:6rem;color:rgba(21,87,235,.08);position:absolute;top:.4rem;right:1.5rem;line-height:1;font-family:Georgia,serif}.stars{color:var(--gold);font-size:1.05rem;letter-spacing:4px;margin-bottom:1rem}.tcard p{font-size:1rem;color:var(--ice);line-height:1.9;margin:0 0 1.2rem;position:relative;z-index:1}.tcard cite{font-size:.82rem;color:var(--gold);font-weight:700;font-style:normal}
#contact{border-top:1px solid var(--bdr);background:rgba(255,255,255,.01)}.cg h3{font-size:1.25rem;font-weight:800;color:var(--ice);margin:0 0 1.8rem}.ci{display:flex;align-items:center;gap:13px;padding:1rem 0;border-bottom:1px solid rgba(21,87,235,.08)}.ciic{width:42px;height:42px;background:rgba(21,87,235,.08);border:1px solid rgba(21,87,235,.14);border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--gold)}.cil{display:block;font-size:.72rem;color:var(--muted);margin-bottom:3px}.civ{font-size:.9rem;color:var(--ice);font-weight:600;text-decoration:none;transition:color .2s}.civ:hover{color:var(--gold)}.cform{padding:2.4rem}.ctitle{font-size:1rem;font-weight:800;color:var(--ice);margin:0 0 1.5rem}.fg{margin-bottom:1rem}.fg label{display:block;font-size:.77rem;color:var(--muted);margin-bottom:5px;font-weight:600}.fg input,.fg textarea,.fg select{width:100%;background:rgba(255,255,255,.045);border:1px solid rgba(232,237,245,.1);border-radius:7px;padding:11px 13px;font-size:.88rem;color:var(--ice);outline:none;transition:border-color .2s,background .2s;direction:rtl}.fg input:focus,.fg textarea:focus,.fg select:focus{border-color:rgba(21,87,235,.42);background:rgba(255,255,255,.06)}.fg textarea{resize:vertical;min-height:108px}.fg select option{background:#0d1e33}.frow{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.site-footer{border-top:1px solid var(--bdr);padding:2.2rem clamp(1rem,4vw,4rem);background:rgba(11,29,42,.9)}.fi{max-width:1120px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:1rem}.fc{font-size:.78rem;color:var(--muted)}.fc strong{color:var(--gold)}.fsoc{display:flex;gap:10px}.sb{min-width:34px;height:34px;border:1px solid var(--bdr);border-radius:7px;display:flex;align-items:center;justify-content:center;color:var(--muted);text-decoration:none;font-size:.72rem;font-family:Barlow,sans-serif;font-weight:800;transition:.2s}.sb svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.sb:hover{border-color:var(--gold);color:var(--gold);background:rgba(21,87,235,.06)}
.waf{position:fixed;bottom:24px;left:24px;width:54px;height:54px;background:#25d366;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.78rem;font-family:Barlow,sans-serif;font-weight:900;text-decoration:none;z-index:99;box-shadow:0 8px 26px rgba(37,211,102,.32);transition:.25s}.waf svg{width:28px;height:28px;fill:currentColor;stroke:none}.waf:hover{transform:scale(1.08)}
.page-shell{max-width:900px;margin:0 auto;padding:130px 1.4rem 5rem}
.is-service-page.page-shell,.is-service-page .entry-content{padding:0!important;margin:0!important;max-width:none}.page-title{font-size:clamp(1.8rem,4vw,3rem);margin:0 0 1.4rem;color:#fff}.entry-content{line-height:1.9;color:var(--dim)}.entry-content a{color:var(--gold)}
.elementor-template,.page-shell.elementor-template{max-width:none;padding:0;margin:0}
.elementor-front-page,.elementor-front-page .entry-content{max-width:none;padding:0;margin:0}.elementor-front-page .elementor-section,.elementor-front-page .elementor-column,.elementor-front-page .elementor-widget-wrap,.elementor-front-page .elementor-widget-html,.elementor-front-page .elementor-widget-container{padding:0;margin:0}.elementor-front-page .elementor-widget:not(:last-child){margin-bottom:0}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}.reveal.visible{opacity:1;transform:translateY(0)}.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}@keyframes fU{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}@keyframes fD{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}.reveal{opacity:1;transform:none}}
@media(max-width:1024px){.about-grid,.cg{grid-template-columns:1fr;gap:2.5rem}.svc-grid,.sg{grid-template-columns:repeat(2,1fr)}.si:not(:last-child)::after{display:none}}
@media(max-width:780px){.site-nav{height:66px}.menu-toggle{display:flex}.nl{position:absolute;top:66px;right:1rem;left:1rem;display:grid;gap:0;background:rgba(11,29,42,.98);border:1px solid var(--bdr);border-radius:10px;padding:.5rem;box-shadow:var(--shadow);opacity:0;transform:translateY(-10px);visibility:hidden;pointer-events:none;transition:.22s}.nl.is-open{opacity:1;transform:translateY(0);visibility:visible;pointer-events:auto}.nl li a{display:block;padding:12px 14px;border-radius:7px}.nl .cta,.nl li:last-child a{margin-top:4px;text-align:center}.hero{padding-top:106px}.hdesc{font-size:.96rem}.stats{padding:2rem 1rem}.sg{grid-template-columns:1fr 1fr}.bnum{font-size:2.25rem}.si-wrap{padding:4.2rem 1rem}.about-grid,.cg{text-align:right}.svc-grid{grid-template-columns:1fr}.sc{min-height:auto}.frow{grid-template-columns:1fr}.anums{gap:1rem;flex-wrap:wrap}.pt-wrap::before,.pt-wrap::after{width:52px}.pi{width:145px;height:70px}.site-footer{padding:1.8rem 1rem}.fi{flex-direction:column;text-align:center}.waf{width:50px;height:50px;left:18px;bottom:18px}}
@media(max-width:460px){.htitle{font-size:clamp(1.55rem,7vw,2rem);word-break:break-word;overflow-wrap:break-word}.hbtns{gap:.55rem;flex-wrap:nowrap}.btn-p,.btn-o{flex:1;min-width:0;padding:12px 10px;font-size:.82rem}.sg{grid-template-columns:1fr}.si{padding:.95rem}.abox,.cform,.tcard{padding:1.6rem}.ci{align-items:flex-start}.pt-track{animation-duration:24s}.scroll-hint{display:none}}

/* Light mode */
.nav-actions{display:flex;align-items:center;gap:.65rem}
.theme-toggle{width:42px;height:42px;border:1px solid var(--bdr);border-radius:8px;background:rgba(255,255,255,.03);display:flex;align-items:center;justify-content:center;color:var(--ice);cursor:pointer;font-weight:900;transition:.2s}
.theme-toggle:hover{border-color:var(--gold);color:var(--gold);background:rgba(21,87,235,.07)}
.theme-toggle-icon{font-size:1rem;line-height:1}
body.light-mode{--gold:#1557eb;--gold-l:#74b5ff;--gold-d:#0a2fa8;--navy:#f7f8fb;--navy2:#fff;--navy3:#f1f4f8;--ice:#142033;--dim:rgba(20,32,51,.74);--muted:rgba(20,32,51,.56);--bdr:rgba(139,107,34,.2);--panel:rgba(255,255,255,.94);--shadow:0 24px 60px rgba(20,32,51,.12);background:#f7f8fb;color:#142033}
body.light-mode .grid-bg{background-image:linear-gradient(rgba(96,165,250,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(96,165,250,.09) 1px,transparent 1px)}
body.light-mode .amb1{background:radial-gradient(circle,rgba(21,87,235,.14),transparent 70%)}
body.light-mode .amb2{background:radial-gradient(circle,rgba(58,111,183,.12),transparent 70%)}
body.light-mode .site-nav{background:rgba(255,255,255,.88)}
body.light-mode .site-nav.scrolled,body.light-mode .site-footer{background:rgba(255,255,255,.98)}
body.light-mode .lt,body.light-mode .htitle,body.light-mode .stitle,body.light-mode .vit h4,body.light-mode .mt,body.light-mode .sch h3,body.light-mode .cg h3,body.light-mode .ctitle,body.light-mode .page-title{color:#142033}
body.light-mode .stats,body.light-mode #services,body.light-mode #contact{background:rgba(20,32,51,.035)}
body.light-mode .sc,body.light-mode .pi{background:#fff}
body.light-mode .sc:hover{background:#f1f4f8}
body.light-mode .pt-wrap::before{background:linear-gradient(90deg,transparent,#f7f8fb)}
body.light-mode .pt-wrap::after{background:linear-gradient(-90deg,transparent,#f7f8fb)}
body.light-mode .fg input,body.light-mode .fg textarea,body.light-mode .fg select{background:rgba(20,32,51,.035);border-color:rgba(20,32,51,.12);color:#142033}
body.light-mode .fg input:focus,body.light-mode .fg textarea:focus,body.light-mode .fg select:focus{background:rgba(21,87,235,.055)}
body.light-mode .fg select option{background:#fff;color:#142033}
body.light-mode .nl li:last-child a:hover,body.light-mode .nl .cta:hover,body.light-mode .btn-p{color:#fff}
body.light-mode .btn-p:hover{color:#142033}
body.light-mode .btn-o{background:rgba(20,32,51,.02);border-color:rgba(20,32,51,.16)}
body.light-mode .pi img{filter:grayscale(1) brightness(.45) contrast(1.2);opacity:.8}
body.light-mode .pi:hover img{filter:none;opacity:1}
@media(max-width:780px){body.light-mode .nl{background:rgba(255,255,255,.98)}}

/* Typography and motion refinements */
body{font-family:Tajawal,sans-serif}
.bnum,.anums .n,.sb,.waf{font-family:Tajawal,sans-serif}
.htitle{font-size:clamp(1.85rem,5vw,3.85rem);line-height:1.28;letter-spacing:0}
.hdesc{font-size:clamp(.94rem,1.6vw,1rem)}
.stitle{letter-spacing:0}
.sch h3{font-size:1rem;line-height:1.5}
.scd1,.scd2{font-weight:500}
.sci{color:var(--gold)}
.sci svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.pt-track{animation:none;transform:translateX(-50%);will-change:transform;direction:ltr}
.pt-wrap.in-view .pt-track{animation:partners-ltr 30s linear infinite}
@keyframes partners-ltr{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@media(max-width:780px){.htitle{font-size:clamp(1.75rem,8vw,2.55rem)}.pt-wrap.in-view .pt-track{animation-duration:22s}}

/* Final header and hero fixes */
.site-nav{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(1rem,3vw,2.5rem);direction:ltr;align-items:center;top:0}
.logo-wrap{grid-column:3;justify-self:end;direction:rtl}
.nl{grid-column:2;justify-content:center;direction:rtl}
.nav-actions{grid-column:1;justify-self:start;direction:rtl;z-index:3}
.theme-toggle{position:relative;z-index:4;pointer-events:auto}
.admin-bar .site-nav{top:32px}
.hero{min-height:calc(100svh - 72px);padding-top:148px}
.htitle{font-size:clamp(1.7rem,4.2vw,3.25rem);line-height:1.22;max-width:780px}
.hlabel{margin-bottom:1.25rem}
.hdesc{max-width:590px;margin-bottom:2rem}
@media(max-width:782px){.admin-bar .site-nav{top:46px}}
@media(max-width:780px){
  .site-nav{grid-template-columns:auto 1fr auto;height:66px}
  .logo-wrap{grid-column:3}
  .nav-actions{grid-column:1}
  .nl{grid-column:1 / -1;top:66px}
  .hero{padding-top:132px}
  .htitle{font-size:clamp(1.75rem,7.3vw,2.35rem);max-width:94vw}
}

/* ── Service pages ──────────────────────────────────────── */
.sc{text-decoration:none;color:inherit}
.service-link{display:inline-flex;margin-top:1rem;color:var(--gold);font-size:.82rem;font-weight:800}

/* sp = service-page namespace */
.sp-wrap{--sp-pad:clamp(1.25rem,5vw,5.5rem)}

/* Hero */
.sp-hero{padding:clamp(96px,13vw,136px) var(--sp-pad) clamp(3rem,6vw,5rem);position:relative;overflow:hidden;border-bottom:1px solid var(--bdr);background:linear-gradient(140deg,rgba(21,87,235,.1) 0%,transparent 55%)}
.sp-hero::before{content:'';position:absolute;top:-120px;right:-120px;width:580px;height:580px;background:radial-gradient(circle,rgba(21,87,235,.14),transparent 65%);border-radius:50%;pointer-events:none}
.sp-hero-inner{max-width:1160px;margin:0 auto;display:grid;grid-template-columns:1fr auto;gap:3rem;align-items:center}
.sp-breadcrumb{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;margin:0 0 1rem;color:var(--muted);font-size:.76rem}
.sp-breadcrumb a{color:inherit;text-decoration:none;transition:color .2s}
.sp-breadcrumb a:hover{color:var(--gold)}
.sp-breadcrumb span[aria-current="page"]{color:var(--gold);font-weight:700}
.sp-tag{display:inline-flex;align-items:center;gap:.55rem;font-size:.76rem;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--gold);margin-bottom:1rem}
.sp-tag::after{content:'';display:block;width:32px;height:2px;background:var(--gold);border-radius:2px;opacity:.55}
.sp-h1{font-size:clamp(1.75rem,4.5vw,3rem);font-weight:900;line-height:1.2;color:var(--ice);margin:0 0 1rem}
.sp-lead{font-size:1.05rem;line-height:1.9;color:var(--dim);margin:0 0 2rem;max-width:640px}
.sp-hero-btns{display:flex;gap:.9rem;flex-wrap:wrap;align-items:center}
.sp-hero-icon{width:clamp(96px,11vw,148px);height:clamp(96px,11vw,148px);flex-shrink:0;background:rgba(21,87,235,.07);border:1px solid rgba(21,87,235,.2);border-radius:26px;display:flex;align-items:center;justify-content:center;position:relative}
.sp-hero-icon::before{content:'';position:absolute;inset:-9px;border:1px solid rgba(21,87,235,.1);border-radius:33px}
.sp-hero-icon svg{width:54%;height:54%;stroke:var(--gold);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.sp-hero-visual{flex-shrink:0;display:flex;align-items:center;justify-content:center}
.sp-hero-img{width:clamp(200px,28vw,380px);height:clamp(140px,20vw,270px);object-fit:cover;border-radius:16px;border:1px solid var(--bdr);box-shadow:0 24px 60px rgba(0,0,0,.35);display:block}

/* Section shell */
.sp-section{padding:3.5rem var(--sp-pad)}
.sp-inner{max-width:1160px;margin:0 auto}
.sp-sh{font-size:clamp(1.25rem,2.8vw,1.75rem);font-weight:900;color:var(--ice);margin:0 0 1.8rem;padding-bottom:.8rem;border-bottom:2px solid rgba(21,87,235,.18)}

/* Benefits 3-col grid */
.sp-benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.sp-benefit{background:var(--panel);border:1px solid var(--bdr);border-radius:14px;padding:1.5rem;transition:border-color .2s}
.sp-benefit:hover{border-color:rgba(21,87,235,.4)}
.sp-bico{width:42px;height:42px;background:rgba(21,87,235,.1);border:1px solid rgba(21,87,235,.2);border-radius:10px;display:flex;align-items:center;justify-content:center;font-family:Rajdhani,Tajawal,sans-serif;font-size:1rem;font-weight:800;color:var(--gold);margin-bottom:1rem}
.sp-benefit h3{font-size:.93rem;font-weight:800;color:var(--ice);margin:0 0 .45rem}
.sp-benefit p{font-size:.83rem;color:var(--dim);line-height:1.7;margin:0}

/* Features and applications */
.sp-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.25rem,3vw,2.5rem)}
.sp-feature-list{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.sp-feature-list li{position:relative;padding:.9rem 2.8rem .9rem 1rem;background:var(--panel);border:1px solid var(--bdr);border-radius:10px;color:var(--dim);font-size:.88rem;line-height:1.65}
.sp-feature-list li::before{content:"";position:absolute;right:1rem;top:1.15rem;width:9px;height:9px;border:2px solid var(--gold);border-radius:2px;transform:rotate(45deg)}
body.english-mode .sp-feature-list li{padding-right:1rem;padding-left:2.8rem}
body.english-mode .sp-feature-list li::before{right:auto;left:1rem}

/* Audience card */
.sp-audience-card{background:var(--panel);border:1px solid var(--bdr);border-radius:14px;padding:1.6rem 2rem;font-size:.97rem;line-height:1.9;color:var(--dim)}

/* Process steps 3-col */
.sp-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--bdr);border:1px solid var(--bdr);border-radius:16px;overflow:hidden}
.sp-step{background:var(--panel);padding:2rem 1.75rem}
.sp-step-num{font-family:'Rajdhani','DM Sans',sans-serif;font-size:2.8rem;font-weight:900;color:rgba(21,87,235,.18);line-height:1;margin-bottom:.9rem;direction:ltr;text-align:right}
.sp-step h3{font-size:.97rem;font-weight:800;color:var(--gold);margin:0 0 .55rem}
.sp-step p{font-size:.85rem;color:var(--dim);line-height:1.75;margin:0}

/* FAQ */
.sp-faq-list{display:grid;gap:.65rem}
.sp-fq{background:var(--panel);border:1px solid var(--bdr);border-radius:12px;overflow:hidden}
.sp-fq-q{padding:1.1rem 1.4rem;font-weight:700;color:var(--ice);font-size:.95rem;border-bottom:1px solid var(--bdr)}
.sp-fq-a{padding:.9rem 1.4rem;font-size:.88rem;color:var(--dim);line-height:1.75}

/* Final CTA */
.sp-cta-wrap{padding:4rem var(--sp-pad);background:linear-gradient(135deg,rgba(21,87,235,.13),rgba(10,47,168,.08) 60%,transparent);border-top:1px solid var(--bdr)}
.sp-cta-inner{max-width:720px;margin:0 auto;text-align:center}
.sp-cta-inner h2{font-size:clamp(1.45rem,3.5vw,2.1rem);font-weight:900;color:var(--ice);margin:0 0 .9rem}
.sp-cta-inner p{color:var(--dim);font-size:1rem;line-height:1.85;margin:0 0 1.8rem}

/* Light mode overrides */
body:not(.dark-mode) .sp-h1,body:not(.dark-mode) .sp-sh,body:not(.dark-mode) .sp-benefit h3,body:not(.dark-mode) .sp-step h3,body:not(.dark-mode) .sp-fq-q,body:not(.dark-mode) .sp-cta-inner h2{color:#0B1D2A}
body:not(.dark-mode) .sp-hero::before{opacity:.35}
body:not(.dark-mode) .sp-hero-icon{background:rgba(21,87,235,.05)}
body:not(.dark-mode) .sp-benefit,body:not(.dark-mode) .sp-step,body:not(.dark-mode) .sp-audience-card,body:not(.dark-mode) .sp-fq,body:not(.dark-mode) .sp-feature-list li{background:#fff}

/* Responsive */
@media(max-width:860px){
  .sp-hero-inner{grid-template-columns:1fr;gap:2rem}
  .sp-hero-icon{width:80px;height:80px;order:-1}
  .sp-hero-visual{order:-1}
  .sp-hero-img{width:100%;height:200px}
  .sp-benefits,.sp-steps{grid-template-columns:1fr 1fr}
  .sp-detail-grid{grid-template-columns:1fr}
}
@media(max-width:580px){
  .sp-benefits,.sp-steps{grid-template-columns:1fr}
  .sp-hero-btns{flex-direction:column;align-items:flex-start}
}

/* Easy Scope blue/cyan identity */
:root{--gold:#1557eb;--gold-l:#74b5ff;--gold-d:#0a2fa8;--navy:#070f1e;--navy2:#040c18;--navy3:#0d1e33;--ice:#E6ECF2;--dim:rgba(230,236,242,.74);--muted:rgba(230,236,242,.5);--bdr:rgba(21,87,235,.22);--panel:rgba(10,22,48,.92)}
body{background:#070f1e}
.grid-bg{background-image:linear-gradient(rgba(96,165,250,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(21,87,235,.045) 1px,transparent 1px)}
.amb1{background:radial-gradient(circle,rgba(21,87,235,.28),transparent 70%)}
.amb2{background:radial-gradient(circle,rgba(96,165,250,.22),transparent 70%)}
.htitle .acc{background:linear-gradient(90deg,#1557eb,#60a5fa);-webkit-background-clip:text;background-clip:text;color:transparent}
.lm{border-color:#1557eb;box-shadow:0 0 0 5px rgba(21,87,235,.08),0 0 28px rgba(21,87,235,.18)}
.lm::before{border-color:#74b5ff}.lm::after{background:#60a5fa}
.btn-p{background:linear-gradient(135deg,#0a2fa8,#1557eb);border-color:transparent;color:#fff}.btn-p:hover{background:linear-gradient(135deg,#1557eb,#0a2fa8);box-shadow:0 8px 28px rgba(21,87,235,.38);transform:translateY(-2px)}
.hlabel,.sci,.ciic,.vic{background:rgba(21,87,235,.08);border-color:rgba(96,165,250,.24)}
.sc::after,.htitle .acc::after{background:linear-gradient(90deg,transparent,#1557eb,#60a5fa,transparent)}
.pi:hover,.sc:hover{border-color:rgba(96,165,250,.45)}
body.light-mode{--gold:#1557eb;--gold-l:#74b5ff;--gold-d:#0a2fa8;--navy:#F7FAFC;--navy2:#FFFFFF;--navy3:#E6ECF2;--ice:#0B1D2A;--dim:rgba(11,29,42,.74);--muted:rgba(11,29,42,.54);--bdr:rgba(21,87,235,.18);--panel:rgba(255,255,255,.94);background:#F7FAFC;color:#0B1D2A}
body.light-mode .grid-bg{background-image:linear-gradient(rgba(21,87,235,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(21,87,235,.08) 1px,transparent 1px)}
body.light-mode .site-nav,body.light-mode .site-nav.scrolled,body.light-mode .site-footer{background:rgba(255,255,255,.96)}
.logo-wrap:has(.custom-logo){gap:0}
@media(max-width:780px){.custom-logo-link{max-width:190px}.custom-logo{max-height:42px}}

/* Compact balanced header */
.site-nav{
  height:76px;
  padding:0 clamp(1.25rem,4vw,4.5rem);
  grid-template-columns:minmax(190px,auto) minmax(0,1fr) minmax(190px,auto);
}
.logo-wrap{
  grid-column:3;
  justify-self:end;
}
.custom-logo-link{
  max-width:min(260px,24vw);
}
.custom-logo{
  max-height:44px;
}
.nl{
  grid-column:2;
  justify-self:center;
  align-self:center;
  gap:clamp(1.35rem,2.8vw,2.35rem);
}
.nav-actions{
  grid-column:1;
  justify-self:start;
}
.theme-toggle,.menu-toggle{
  width:44px;
  height:44px;
}
.site-header{
  min-height:76px;
}
.hero{
  min-height:calc(100svh - 76px);
  padding-top:104px;
}
.elementor-template .site-main{
  padding-top:76px;
}
.admin-bar .site-nav{top:32px}
@media(max-width:782px){.admin-bar .site-nav{top:46px}}
@media(max-width:780px){
  .site-nav{
    height:68px;
    grid-template-columns:auto 1fr auto;
    padding:0 1rem;
  }
  .site-header{min-height:68px}
  .custom-logo-link{max-width:180px}
  .custom-logo{max-height:38px}
  .nl{
    top:68px;
    right:1rem;
    left:1rem;
  }
  .hero{
    min-height:calc(100svh - 68px);
    padding-top:102px;
  }
}

/* Keep scroll hint centered */
.hero .scroll-hint{
  right:auto!important;
  left:50vw!important;
  transform:translateX(-50%)!important;
  inset-inline:auto!important;
  text-align:center;
  width:max-content;
  z-index:3;
}
.elementor-widget-container>.scroll-hint:not(.hero .scroll-hint){
  display:none!important;
}
@media(max-width:780px){
  .hero .scroll-hint{
    display:flex!important;
    bottom:1rem;
    left:50vw!important;
    right:auto!important;
    transform:translateX(-50%)!important;
  }
}

/* Seamless partner marquee */
.pt-wrap{margin-top:1.8rem;padding:.5rem 0 4rem;direction:ltr;min-height:96px}
.pt-track{gap:14px;margin:0!important;display:flex!important;align-items:center;animation:partners-marquee 28s linear infinite!important;width:max-content;direction:ltr;transform:translate3d(0,0,0);will-change:transform}
.pt-track:hover{animation-play-state:running}
.pi{margin:0!important;width:160px;height:76px;flex:0 0 160px;display:flex;align-items:center;justify-content:center;padding:10px 14px;box-sizing:border-box}
.pi img{width:130px;height:48px;object-fit:contain;display:block;filter:grayscale(1) saturate(0) opacity(.68)!important}
.pi:hover img{filter:none!important;opacity:1!important}
.pt-wrap::before,.pt-wrap::after{width:72px}
@media(max-width:780px){.pt-track{gap:10px;animation-duration:18s!important}.pi{width:136px;height:64px;flex-basis:136px;padding:8px 10px}.pi img{width:112px;height:40px}}

/* Partner logo color modes and continuous motion */
@keyframes partners-marquee{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(var(--partner-shift, -50%),0,0)}
}
body.light-mode .pi img{
  filter:none!important;
  opacity:1!important;
}
body.dark-mode .pi img{
  filter:brightness(0) invert(1) opacity(.82)!important;
}
body.dark-mode .pi:hover img{
  filter:none!important;
  opacity:1!important;
}
body.light-mode .pi:hover img{
  filter:none!important;
  opacity:1!important;
}
@media(max-width:780px){.pt-track{animation-duration:20s!important}}

/* Disable legacy header layout from main.css; header.css owns the header */
.site-header{min-height:74px!important}
.site-nav{
  height:74px!important;
  display:grid!important;
  grid-template-columns:minmax(180px,auto) minmax(0,1fr) minmax(220px,auto)!important;
  padding:0 clamp(1.25rem,4vw,4.5rem)!important;
  align-items:center!important;
}
.logo-wrap{grid-column:3!important}
.nl{grid-column:2!important}
.nav-actions{grid-column:1!important}
.hero{
  min-height:calc(100svh - 74px)!important;
  padding-top:0!important;
}
@media(max-width:780px){
  .site-header{min-height:68px!important}
  .site-nav{
    height:68px!important;
    grid-template-columns:auto 1fr auto!important;
    padding:0 1rem!important;
  }
  .hero{
    min-height:calc(100svh - 68px)!important;
    padding-top:0!important;
  }
}

/* Animated landing background */
.grid-bg{animation:grid-drift 18s linear infinite}
@keyframes grid-drift{from{background-position:0 0,0 0}to{background-position:72px 72px,72px 72px}}
.hero{overflow:hidden;isolation:isolate;--mx:0;--my:0;--spark-x:50%;--spark-y:50%}
.hero>*{position:relative;z-index:2}
.hero::before,.hero::after{content:"";position:absolute;z-index:0;pointer-events:none}
.hero::before{width:58vw;height:58vw;min-width:520px;min-height:520px;right:50%;top:45%;transform:translate(50%,-50%);background:radial-gradient(circle,rgba(21,87,235,.18),rgba(21,87,235,.10) 34%,transparent 68%);filter:blur(18px);animation:hero-orbit 13s ease-in-out infinite alternate}
.hero::after{inset:0;background:radial-gradient(circle at var(--spark-x) var(--spark-y),rgba(21,87,235,.14),transparent 10rem),linear-gradient(105deg,transparent 0 42%,rgba(21,87,235,.08) 48%,rgba(21,87,235,.08) 52%,transparent 58%);transform:translateX(-80%);animation:hero-scan 9s ease-in-out infinite}
.hero .hlabel,.hero .htitle,.hero .hdesc,.hero .hbtns{translate:calc(var(--mx,0) * -9px) calc(var(--my,0) * -6px);transition:translate .18s ease-out}
.hero .htitle{rotate:calc(var(--mx,0) * -.7deg)}
.hero .hlabel,.hero .hbtns{translate:calc(var(--mx,0) * -5px) calc(var(--my,0) * -4px)}
@keyframes hero-orbit{0%{transform:translate(calc(54% + (var(--mx,0) * -18px)),calc(-48% + (var(--my,0) * -16px))) scale(.92);opacity:.62}50%{transform:translate(calc(43% + (var(--mx,0) * 20px)),calc(-54% + (var(--my,0) * 14px))) scale(1.08);opacity:.92}100%{transform:translate(calc(48% + (var(--mx,0) * -12px)),calc(-42% + (var(--my,0) * 18px))) scale(.98);opacity:.72}}
@keyframes hero-scan{0%,18%{transform:translateX(-85%)}55%,100%{transform:translateX(85%)}}
body.light-mode .hero::before{background:radial-gradient(circle,rgba(21,87,235,.16),rgba(96,165,250,.11) 34%,transparent 70%);filter:blur(14px)}
body.light-mode .hero::after{background:linear-gradient(105deg,transparent 0 42%,rgba(21,87,235,.07) 48%,rgba(96,165,250,.09) 52%,transparent 58%)}
@media (prefers-reduced-motion:reduce){.grid-bg,.hero::before,.hero::after{animation:none!important}}
@media (prefers-reduced-motion:reduce){.hero .hlabel,.hero .htitle,.hero .hdesc,.hero .hbtns{translate:none!important;rotate:none!important;transition:none!important}}

/* Animated hero accent word */
.htitle .acc{
  background:linear-gradient(90deg,#0a2fa8 0%,#1557eb 25%,#60a5fa 50%,#1557eb 75%,#0a2fa8 100%);
  background-size:260% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:0 0 28px rgba(21,87,235,.14);
  animation:accent-flow 5.8s ease-in-out infinite;
}
.htitle .acc::before{
  content:"";
  position:absolute;
  inset:.08em -.08em .04em;
  background:linear-gradient(90deg,transparent,rgba(21,87,235,.14),transparent);
  filter:blur(18px);
  opacity:.65;
  z-index:-1;
  animation:accent-glow 5.8s ease-in-out infinite;
}
@keyframes accent-flow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes accent-glow{0%,100%{transform:translateX(-12%);opacity:.38}50%{transform:translateX(12%);opacity:.78}}
@media (prefers-reduced-motion:reduce){.htitle .acc,.htitle .acc::before{animation:none!important}}

/* Service card excerpt clamp */
.scd1,.scd2{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.scd1{-webkit-line-clamp:2;line-clamp:2}
.scd2{display:none}
.sc{min-height:210px;padding-block:1.65rem}
.service-link{margin-top:1.15rem}
@media(max-width:780px){.sc{min-height:0;padding-block:1.45rem}}

/* ── Service icon glow ── */
.sci{animation:sci-glow 5s ease-in-out infinite;}
.sc:nth-child(2) .sci{animation-delay:-1s}
.sc:nth-child(3) .sci{animation-delay:-2s}
.sc:nth-child(4) .sci{animation-delay:-3s}
.sc:nth-child(5) .sci{animation-delay:-4s}
.sc:nth-child(6) .sci{animation-delay:-5s}
.sc:nth-child(7) .sci{animation-delay:-.5s}
.sc:nth-child(8) .sci{animation-delay:-1.5s}
.sc:nth-child(9) .sci{animation-delay:-2.5s}
.sc:nth-child(10) .sci{animation-delay:-3.5s}
.sc:nth-child(11) .sci{animation-delay:-4.5s}
.sc:nth-child(12) .sci{animation-delay:-5.5s}
.sc:hover .sci{box-shadow:0 0 22px 5px rgba(21,87,235,.38),inset 0 0 10px rgba(21,87,235,.18);background:rgba(21,87,235,.18);border-color:rgba(21,87,235,.55);animation-play-state:paused;}
@keyframes sci-glow{0%,100%{box-shadow:none;background:rgba(21,87,235,.09);border-color:rgba(21,87,235,.2)}50%{box-shadow:0 0 16px 3px rgba(21,87,235,.25),inset 0 0 6px rgba(21,87,235,.1);background:rgba(21,87,235,.14);border-color:rgba(21,87,235,.4)}}
@media(prefers-reduced-motion:reduce){.sci{animation:none!important}}

/* Hero accent spacing and timed underline */
.htitle .acc{
  padding:.08em .02em .16em;
  margin:.03em 0 .06em;
}
.htitle .acc::after{
  opacity:0;
  animation:accent-underline 10s ease-in-out infinite!important;
}
@keyframes accent-underline{
  0%,68%,100%{opacity:0;transform:scaleX(.25)}
  72%,88%{opacity:.55;transform:scaleX(1)}
}

/* Mobile header polish */
@media(max-width:780px){
  .theme-toggle,.menu-toggle{
    width:58px;
    height:58px;
    border-radius:12px;
  }
  .menu-toggle span{
    width:25px;
    height:3px;
  }
  .nav-actions{
    gap:.75rem;
  }
  .custom-logo-link{
    max-width:220px;
  }
  .custom-logo{
    max-height:40px;
  }
  .hero{
    padding-inline:1.05rem;
  }
  .htitle{
    line-height:1.28;
  }
}

/* Header stacking and reliable interactions */
.site-header{
  position:relative;
  z-index:2147483000!important;
  isolation:isolate;
}
.site-nav{
  position:fixed!important;
  z-index:2147483000!important;
  transform:translateZ(0);
  will-change:transform;
  pointer-events:auto!important;
}
.site-nav *{
  pointer-events:auto;
}
.theme-toggle{
  z-index:2147483001!important;
  pointer-events:auto!important;
  touch-action:manipulation;
}
.site-main,.elementor,.elementor-location-single,.elementor-front-page{
  position:relative;
  z-index:1;
}
body.admin-bar .site-nav{top:32px!important}
@media(max-width:782px){body.admin-bar .site-nav{top:46px!important}}

/* Soft professional background motion */
#bg-canvas{
  opacity:.62;
}

.grid-bg{
  opacity:.5;
  animation:grid-drift 38s linear infinite;
}

.amb{
  opacity:.36;
}

body.light-mode #bg-canvas{
  opacity:.86;
}

body.dark-mode #bg-canvas{
  opacity:.58;
}

body.light-mode .grid-bg,
body:not(.dark-mode) .grid-bg{
  opacity:.75;
  background-image:linear-gradient(rgba(21,87,235,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(21,87,235,.1) 1px,transparent 1px);
}

body.dark-mode .grid-bg{
  opacity:.85;
}

.hero::before{
  width:46vw;
  height:46vw;
  min-width:420px;
  min-height:420px;
  background:radial-gradient(circle,rgba(21,87,235,.075),rgba(21,87,235,.03) 36%,transparent 72%);
  filter:blur(30px);
  animation:hero-orbit-soft 18s ease-in-out infinite alternate;
}

.hero::after{
  background:radial-gradient(circle at var(--spark-x) var(--spark-y),rgba(96,165,250,.035),transparent 9rem),linear-gradient(105deg,transparent 0 44%,rgba(21,87,235,.025) 49%,rgba(96,165,250,.025) 52%,transparent 58%);
  animation:hero-scan 15s ease-in-out infinite;
  opacity:.55;
}

body.light-mode .hero::before{
  background:radial-gradient(circle,rgba(21,87,235,.065),rgba(21,87,235,.03) 36%,transparent 72%);
  filter:blur(28px);
}

body.light-mode .hero::after{
  background:radial-gradient(circle at var(--spark-x) var(--spark-y),rgba(21,87,235,.035),transparent 9rem),linear-gradient(105deg,transparent 0 44%,rgba(21,87,235,.022) 49%,rgba(96,165,250,.024) 52%,transparent 58%);
}

@keyframes hero-orbit-soft{
  0%{transform:translate(calc(50% + (var(--mx,0) * -8px)),calc(-50% + (var(--my,0) * -8px))) scale(.96);opacity:.34}
  50%{transform:translate(calc(46% + (var(--mx,0) * 10px)),calc(-53% + (var(--my,0) * 8px))) scale(1.03);opacity:.5}
  100%{transform:translate(calc(48% + (var(--mx,0) * -6px)),calc(-45% + (var(--my,0) * 10px))) scale(.98);opacity:.38}
}

/* ============================================================
   HERO SPLIT — 2-column layout (light-first design)
   ============================================================ */

/* Default to light mode visuals */
body:not(.dark-mode) {
  --gold:#1557eb;--gold-l:#74b5ff;--gold-d:#0a2fa8;
  --navy:#F7FAFC;--navy2:#FFFFFF;--navy3:#EEF2F8;
  --ice:#0B1D2A;--dim:rgba(11,29,42,.72);--muted:rgba(11,29,42,.52);
  --bdr:rgba(21,87,235,.14);--panel:rgba(255,255,255,.96);
  --shadow:0 24px 60px rgba(11,29,42,.10);
  background:#F7FAFC;color:#0B1D2A
}
body:not(.dark-mode) .site-nav.scrolled{background:rgba(255,255,255,.97)!important;box-shadow:0 4px 24px rgba(11,29,42,.08)!important}
body:not(.dark-mode) .grid-bg{background-image:linear-gradient(rgba(21,87,235,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(96,165,250,.055) 1px,transparent 1px);opacity:.45}
body:not(.dark-mode) .amb1{background:radial-gradient(circle,rgba(21,87,235,.25),transparent 70%)}
body:not(.dark-mode) .amb2{background:radial-gradient(circle,rgba(96,165,250,.21),transparent 70%)}
body:not(.dark-mode) .lt .easy-word{color:#5b9ad6}
body:not(.dark-mode) .lt .scope-word{color:#0a2fa8}
body:not(.dark-mode) .lt,body:not(.dark-mode) .htitle,body:not(.dark-mode) .stitle,body:not(.dark-mode) .vit h4,body:not(.dark-mode) .mt,body:not(.dark-mode) .sch h3,body:not(.dark-mode) .cg h3,body:not(.dark-mode) .ctitle,body:not(.dark-mode) .page-title{color:#0B1D2A}
body:not(.dark-mode) .stats,body:not(.dark-mode) #services,body:not(.dark-mode) #contact{background:rgba(21,87,235,.025)}
body:not(.dark-mode) .sc,body:not(.dark-mode) .pi{background:#fff}
body:not(.dark-mode) .sc:hover{background:#f1f5fb}
body:not(.dark-mode) .pt-wrap::before{background:linear-gradient(90deg,transparent,#F7FAFC)}
body:not(.dark-mode) .pt-wrap::after{background:linear-gradient(-90deg,transparent,#F7FAFC)}
body:not(.dark-mode) .fg label{color:rgba(11,29,42,.62)}
body:not(.dark-mode) .fg input,body:not(.dark-mode) .fg textarea,body:not(.dark-mode) .fg select{background:rgba(21,87,235,.04);border-color:rgba(11,29,42,.12);color:#0B1D2A}
body:not(.dark-mode) .fg input:focus,body:not(.dark-mode) .fg textarea:focus,body:not(.dark-mode) .fg select:focus{background:rgba(21,87,235,.07)}
body:not(.dark-mode) .fg select option{background:#fff;color:#0B1D2A}
body:not(.dark-mode) .btn-p{color:#fff}
body:not(.dark-mode) .btn-o{background:rgba(11,29,42,.03);border-color:rgba(11,29,42,.16);color:#0B1D2A}
body:not(.dark-mode) .pi img{filter:none!important;opacity:1!important}
body:not(.dark-mode) .abox,
body:not(.dark-mode) .cform,
body:not(.dark-mode) .tcard{background:rgba(255,255,255,.96)}

/* Dark mode: cards stay dark */
body.dark-mode .tcard{background:rgba(10,22,48,.92);border-color:rgba(21,87,235,.18)}
body.dark-mode .tcard p{color:var(--dim)}
body.dark-mode .cform{background:rgba(8,18,40,.88);border-color:rgba(21,87,235,.18)}
body.dark-mode .fg input,
body.dark-mode .fg textarea,
body.dark-mode .fg select{background:rgba(255,255,255,.045);border-color:rgba(232,237,245,.1);color:var(--ice)}
body.dark-mode .ctitle,
body.dark-mode .cg h3{color:var(--ice)}
/* Dark mode: service page fixes */
body.dark-mode .btn-p{color:#fff!important}
body.dark-mode .sp-step-num{color:rgba(200,220,255,.55)!important}
body:not(.dark-mode) .hero::before{background:radial-gradient(circle,rgba(21,87,235,.10),rgba(21,87,235,.06) 36%,transparent 72%);filter:blur(28px)}
body:not(.dark-mode) .hero::after{background:radial-gradient(circle at var(--spark-x) var(--spark-y),rgba(21,87,235,.06),transparent 9rem)}
body:not(.dark-mode) .site-footer{background:rgba(255,255,255,.97)!important}
body:not(.dark-mode) .fc{color:rgba(11,29,42,.55)}
body:not(.dark-mode) .sb{border-color:rgba(11,29,42,.12);color:rgba(11,29,42,.5)}
body:not(.dark-mode) .nl a{color:rgba(11,29,42,.72)}
body:not(.dark-mode) .nl a:hover{color:var(--gold)}
body:not(.dark-mode) .nl li:last-child a{border-color:var(--gold);color:var(--gold)}
body:not(.dark-mode) .nl li:last-child a:hover{background:var(--gold);color:#fff}
body:not(.dark-mode) .menu-toggle{border-color:rgba(11,29,42,.15);color:#0B1D2A}
body:not(.dark-mode) .partners-strip{background:#eff6ff;border-top:1px solid rgba(21,87,235,.1);border-bottom:1px solid rgba(21,87,235,.1)}
body:not(.dark-mode) #bg-canvas{opacity:.52}
@media(max-width:780px){body:not(.dark-mode) .es-menu,body:not(.dark-mode) .nl{background:rgba(255,255,255,.98)!important}}

/* dark mode class (toggled by JS) */
body.dark-mode{--gold:#1557eb;--gold-l:#74b5ff;--gold-d:#0a2fa8;--navy:#070f1e;--navy2:#040c18;--navy3:#0d1e33;--ice:#E6ECF2;--dim:rgba(230,236,242,.74);--muted:rgba(230,236,242,.5);--bdr:rgba(21,87,235,.22);--panel:rgba(10,22,48,.92);background:#070f1e;color:#E6ECF2}
body.dark-mode .pi img{filter:brightness(0) invert(1) opacity(.82)!important}
body.dark-mode .pi:hover img{filter:none!important;opacity:1!important}
body.dark-mode .partners-strip{background:rgba(11,29,42,.6);border-color:var(--bdr)}

/* Hero split layout */
.hero.hero-split{
  min-height:100svh;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:center;
  padding:0 clamp(1rem,4vw,4rem) 2rem;
  text-align:right;
}

.hero-split-inner{
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:clamp(1.5rem,3vw,3rem);
  align-items:center;
  max-width:1380px;
  margin:0 auto;
  width:100%;
  direction:rtl;
}

.hero-text-col{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:0;
  padding-inline-start:clamp(0px,2vw,2rem);
}
.hero-text-col .hlabel{margin-bottom:1.4rem;display:inline-flex;align-items:center;gap:9px;align-self:flex-start}
.hlabel-dot{width:8px;height:8px;border-radius:50%;background:var(--gold-l);display:inline-block;flex-shrink:0;animation:pulse 2.2s infinite}
.hero-text-col .htitle{text-align:right;margin:0 0 1.4rem;font-size:clamp(1.9rem,4.2vw,3.8rem);line-height:1.22}
.hero-text-col .hdesc{text-align:right;margin:0 0 2.4rem;max-width:100%}
.hero-text-col .hbtns{justify-content:flex-start;flex-direction:row;align-self:flex-start}

/* Remove old centered hero when in split mode */
.hero.hero-split .scroll-hint{position:absolute;bottom:1.2rem}

/* Visual column */
.hero-visual-col{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  min-height:520px;
  padding:60px 0 60px 20px;
  will-change:transform;
}

/* ============================================================
   FLOATING FEATURE CARDS
   ============================================================ */
.hcard{
  position:absolute;
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(21,87,235,.13);
  border-radius:14px;
  padding:13px 17px;
  display:flex;
  align-items:center;
  gap:12px;
  box-shadow:0 8px 32px rgba(11,29,42,.12);
  z-index:5;
  min-width:176px;
  direction:rtl;
  animation:hcard-float 4.5s ease-in-out infinite;
  will-change:transform;
}
.hcard:hover{box-shadow:0 16px 48px rgba(11,29,42,.18)}

/* positions relative to .hero-visual-col */
.hcard-1{top:4%;right:0%;animation-delay:0s}
.hcard-2{top:4%;left:0%;animation-delay:-2.2s}
.hcard-3{bottom:6%;right:0%;animation-delay:-1.1s}

@keyframes hcard-float{0%,100%{transform:translateY(0) scale(1)}25%{transform:translateY(-14px) scale(1.015)}75%{transform:translateY(-6px) scale(.99)}}

.hcard-icon{width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.hcard-icon-blue{background:rgba(21,87,235,.11);color:#1557eb}
.hcard-icon-green{background:rgba(59,130,246,.11);color:#3b82f6}
.hcard-icon-teal{background:rgba(96,165,250,.11);color:#74b5ff}
.hcard-title{font-size:.84rem;font-weight:800;color:#0B1D2A;margin-bottom:3px}
.hcard-desc{font-size:.72rem;color:#64748b;line-height:1.5}

body.dark-mode .hcard{background:rgba(10,22,48,.95);border-color:rgba(21,87,235,.25)}
body.dark-mode .hcard-title{color:var(--ice)}
body.dark-mode .hcard-desc{color:var(--muted)}

/* ============================================================
   DASHBOARD MOCKUP
   ============================================================ */
.dashboard-mockup{
  position:relative;
  width:min(560px,98%);
  background:#fff;
  border-radius:18px;
  box-shadow:0 28px 80px rgba(11,29,42,.18),0 2px 8px rgba(21,87,235,.08);
  overflow:hidden;
  display:flex;
  z-index:2;
  direction:rtl;
  aspect-ratio:16/11;
  animation:mockup-drift 8s ease-in-out infinite;
  will-change:transform;
}
@keyframes mockup-drift{0%,100%{transform:translateY(0) rotate(.3deg)}50%{transform:translateY(-22px) rotate(-.3deg)}}

/* Sidebar */
.dm-sidebar{
  width:90px;
  background:#0f1e2f;
  padding:13px 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  flex-shrink:0;
}
.dm-logo-row{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  padding:0 8px 11px;
  border-bottom:1px solid rgba(255,255,255,.08);
  width:100%;
  text-align:center;
}
.dm-logo-icon{color:#74b5ff;display:flex;align-items:center;justify-content:center}
.dm-logo-text{font-size:.4rem;font-weight:900;color:#fff;letter-spacing:1.2px;margin-top:2px}
.dm-nav-list{list-style:none;margin:9px 0 0;padding:0 5px;display:flex;flex-direction:column;gap:2px;width:100%}
.dm-nav-item{
  display:flex;align-items:center;gap:5px;padding:5px 7px;border-radius:6px;
  font-size:.44rem;color:rgba(255,255,255,.5);cursor:default;direction:rtl;
  transition:background .2s;
}
.dm-nav-item span:first-of-type{flex:1}
.dm-arrow{font-size:.52rem;opacity:.45}
.dm-nav-item svg{flex-shrink:0;opacity:.65}
.dm-active{background:rgba(21,87,235,.28);color:#fff}
.dm-active svg{opacity:1;color:#74b5ff}

/* Main content */
.dm-content{
  flex:1;background:#f8fafc;display:flex;flex-direction:column;min-width:0;overflow:hidden;padding:9px;
}
.dm-topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;padding-bottom:7px;border-bottom:1px solid rgba(0,0,0,.06)}
.dm-topbar-title{font-size:.6rem;font-weight:800;color:#0f172a}
.dm-topbar-actions{display:flex;align-items:center;gap:7px;color:#64748b}
.dm-avatar-circle{width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,#0a2fa8,#1557eb)}

/* Stats */
.dm-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-bottom:8px}
.dm-stat{background:#fff;border-radius:7px;padding:6px;border:1px solid rgba(0,0,0,.05)}
.dm-stat-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px}
.dm-stat-icon-w{width:20px;height:20px;border-radius:5px;display:flex;align-items:center;justify-content:center}
.dm-stat-blue{background:rgba(21,87,235,.12);color:#1557eb}
.dm-stat-green{background:rgba(59,130,246,.12);color:#3b82f6}
.dm-stat-purple{background:rgba(59,130,246,.12);color:#3b82f6}
.dm-stat-teal{background:rgba(96,165,250,.12);color:#74b5ff}
.dm-stat-badge{font-size:.36rem;padding:1px 4px;border-radius:3px;font-weight:700;line-height:1.4}
.dm-badge-green{background:rgba(59,130,246,.12);color:#3b82f6}
.dm-stat-val{font-size:.85rem;font-weight:900;color:#0f172a;line-height:1;margin-bottom:2px}
.dm-stat-lbl{font-size:.36rem;color:#64748b;line-height:1.3}

/* Chart */
.dm-chart-box{background:#fff;border-radius:7px;padding:7px;flex:1;border:1px solid rgba(0,0,0,.05);display:flex;flex-direction:column;min-height:0;overflow:hidden}
.dm-chart-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.dm-chart-title{font-size:.5rem;font-weight:700;color:#0f172a}
.dm-chart-period{font-size:.37rem;color:#64748b;background:#f1f5f9;padding:2px 6px;border-radius:3px}
.dm-chart-wrap{position:relative;flex:1;min-height:0}
.dm-chart-wrap svg{width:100%;height:100%;display:block}
.dm-chart-ylabels{
  position:absolute;right:calc(100% + 3px);top:0;bottom:0;
  display:flex;flex-direction:column;justify-content:space-between;
  font-size:.32rem;color:#94a3b8;
}
.dm-chart-xlabels{
  display:flex;justify-content:space-between;
  font-size:.33rem;color:#94a3b8;padding-top:3px;margin-top:2px;
  border-top:1px solid rgba(0,0,0,.05);
}

/* Support card overlaid inside mockup */
.dm-support-card{
  position:absolute;bottom:8px;left:8px;
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(8px);
  border:1px solid rgba(21,87,235,.10);
  border-radius:10px;padding:7px 11px;
  display:flex;align-items:center;gap:8px;
  box-shadow:0 4px 18px rgba(0,0,0,.09);
  z-index:10;direction:rtl;width:146px;
}
.dm-support-icon{
  width:28px;height:28px;
  background:linear-gradient(135deg,rgba(59,130,246,.18),rgba(96,165,250,.18));
  border-radius:8px;display:flex;align-items:center;justify-content:center;
  color:#3b82f6;flex-shrink:0;
}
.dm-support-title{font-size:.5rem;font-weight:800;color:#0f172a;margin-bottom:2px}
.dm-support-desc{font-size:.38rem;color:#64748b;line-height:1.4}

/* ============================================================
   PARTNERS STRIP (below hero)
   ============================================================ */
.partners-strip{
  padding:2rem clamp(1rem,4vw,4rem);
  text-align:center;
  background:#eff6ff;
  border-top:1px solid rgba(21,87,235,.1);
  border-bottom:1px solid rgba(21,87,235,.1);
}
.partners-strip-label{
  font-size:.78rem;font-weight:800;color:var(--gold);
  letter-spacing:1.2px;text-transform:uppercase;margin:0 0 1.2rem;
  position:relative;display:inline-block;
}
.partners-strip-label::after{
  content:"";position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);
  width:32px;height:2px;background:var(--gold);border-radius:2px;
}
.partners-strip .pt-wrap{margin-top:.5rem;padding:.5rem 0 0}
.pi-text{
  font-size:.85rem;font-weight:800;color:var(--muted);letter-spacing:.5px;
  white-space:nowrap;
}

/* ============================================================
   RESPONSIVE HERO SPLIT — Mobile-First
   ============================================================ */

/* ── Tablet (≤1100px): single column, text first ── */
@media(max-width:1100px){
  .hero.hero-split{min-height:auto;padding:0 clamp(1rem,3vw,2.5rem) 2.5rem}
  .hero-split-inner{grid-template-columns:1fr;gap:1.75rem;padding-top:clamp(88px,12vh,120px)}
  /* TEXT first on all small screens */
  .hero-text-col{align-items:center;text-align:center;order:1}
  .hero-visual-col{order:2;min-height:320px;max-width:500px;margin:0 auto;width:100%;overflow:hidden;padding:32px 0 24px}
  .hero-text-col .hlabel{align-self:center;width:fit-content;margin-bottom:1.1rem}
  .hero-text-col .htitle,.hero-text-col .hdesc{text-align:center;max-width:100%;word-break:break-word}
  .hero-text-col .hbtns{justify-content:center;flex-direction:row;flex-wrap:nowrap;gap:.75rem}
  .hero-text-col .hbtns .btn-p,.hero-text-col .hbtns .btn-o{flex:0 0 auto}
  .dashboard-mockup{width:min(400px,86%)}
  .hcard-1{top:2%;right:0%}
  .hcard-2{top:2%;left:0%}
  .hcard-3{bottom:2%;right:0%}
}

/* ── Large mobile (≤768px) ── */
@media(max-width:768px){
  .hero.hero-split{padding:0 1.1rem 2rem}
  .hero-split-inner{gap:1.4rem;padding-top:clamp(82px,11vh,100px)}
  .hero-text-col .htitle{font-size:clamp(1.75rem,6.5vw,2.5rem);line-height:1.22;margin-bottom:1rem}
  .hero-text-col .hdesc{font-size:.93rem;line-height:1.75;margin-bottom:1.6rem}
  .hero-text-col .hlabel{font-size:.7rem;padding:6px 14px;margin-bottom:.9rem}
  .hero-visual-col{min-height:270px;padding:20px 0 16px}
  .dashboard-mockup{width:min(360px,84%)}
  .hcard{min-width:138px;padding:9px 12px}
  /* Dim grid bg on mobile */
  #bg-canvas{opacity:.3}
  .amb{opacity:.45}
}

/* ── Small mobile (≤640px) ── */
@media(max-width:640px){
  .hero.hero-split{padding:0 1rem 1.5rem;overflow:hidden}
  .hero-split-inner{gap:1.1rem;padding-top:78px}
  .hero-text-col .htitle{font-size:clamp(1.55rem,7.2vw,2.1rem);line-height:1.2;margin-bottom:.85rem}
  .hero-text-col .hdesc{font-size:.875rem;margin-bottom:1.4rem;line-height:1.7;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .hero-text-col .hbtns{gap:.5rem;flex-wrap:nowrap;width:100%;justify-content:center}
  .hero-text-col .hbtns .btn-p,
  .hero-text-col .hbtns .btn-o{flex:1;min-width:0;max-width:175px;padding:12px 10px;font-size:.83rem;justify-content:center;text-align:center}
  .hero-visual-col{min-height:200px;padding:12px 0 8px;max-width:340px}
  .dashboard-mockup{width:min(260px,76%)}
  .dm-sidebar{width:54px}
  .dm-logo-text{font-size:.3rem}
  .dm-nav-item{font-size:.34rem;padding:3px 4px}
  .dm-stat-val{font-size:.6rem}
  .dm-stats-grid{gap:3px}
  .hcard{min-width:118px;padding:7px 10px;border-radius:10px}
  .hcard-icon{width:28px;height:28px}
  .hcard-title{font-size:.7rem}
  .hcard-desc{font-size:.6rem;display:none}
  .hcard-1{top:1%;right:0%}
  .hcard-2{top:1%;left:0%}
  .hcard-3{bottom:1%;right:0%}
  #bg-canvas{opacity:.18}
  .amb{opacity:.28}
  .grid-bg{display:none!important}
}

/* ── Extra small (≤400px) ── */
@media(max-width:400px){
  .hero-split-inner{padding-top:72px}
  .hero-text-col .htitle{font-size:clamp(1.45rem,8vw,1.85rem)}
  .hcard-2{display:none}
  .dashboard-mockup{width:82%}
  .hero-visual-col{min-height:170px;max-width:300px}
  .hero-text-col .hbtns .btn-p,
  .hero-text-col .hbtns .btn-o{font-size:.8rem;padding:11px 8px}
}

/* ── Minimum (≤320px) ── */
@media(max-width:320px){
  .hero-text-col .htitle{font-size:1.35rem}
  .hcard-1,.hcard-3{display:none}
  .hero-visual-col{min-height:140px}
}

/* Scroll-reveal for hero visual */
.hero-visual-col .hcard,.hero-visual-col .dashboard-mockup{
  opacity:0;transform:translateY(28px);
  transition:opacity .65s ease,transform .65s ease;
}
.hero-visual-col.es-visible .hcard,
.hero-visual-col.es-visible .dashboard-mockup{
  opacity:1;transform:translateY(0);
}
.hero-visual-col.es-visible .hcard-1{transition-delay:.1s}
.hero-visual-col.es-visible .hcard-2{transition-delay:.2s}
.hero-visual-col.es-visible .hcard-3{transition-delay:.35s}
.hero-visual-col.es-visible .dashboard-mockup{transition-delay:.05s}

/* Parallax tilt on dashboard (desktop only) */
@media(min-width:768px){
  .dashboard-mockup{
    transition:transform .12s ease-out,box-shadow .12s ease-out;
    transform-style:preserve-3d;
  }
}

/* Easy Scope scroll storytelling section start */
.about-story{
  position:relative;
  z-index:1;
  overflow-x:clip;
  background:linear-gradient(170deg,rgba(239,246,255,.42) 0%,rgba(248,251,255,.64) 100%);
  border-top:1px solid rgba(21,87,235,.06);
  border-bottom:1px solid rgba(21,87,235,.06);
  isolation:isolate;
}

.about-story::before{
  content:"";
  position:absolute;
  top:-20%;left:-10%;
  width:60vw;height:60vw;
  max-width:700px;max-height:700px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(21,87,235,.08),transparent 68%);
  filter:blur(72px);
  pointer-events:none;z-index:0;
}

.about-story::after{
  content:"";
  position:absolute;
  bottom:-20%;right:-10%;
  width:50vw;height:50vw;
  max-width:600px;max-height:600px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(0,212,200,.07),transparent 68%);
  filter:blur(72px);
  pointer-events:none;z-index:0;
}

body.dark-mode .about-story{
  background:linear-gradient(170deg,rgba(7,18,38,.48) 0%,rgba(11,29,42,.58) 100%);
}

/* ── Scroller: creates 4× viewport scroll distance ── */
.abt-scroller{
  position:relative;
  height:calc(var(--abt-slide-count, 4) * 100svh);
  height:calc(var(--abt-slide-count, 4) * 100dvh);
  min-height:calc(var(--abt-slide-count, 4) * 620px);
  z-index:1;
}

/* ── Pinned panel: stays in viewport while user scrolls ── */
.abt-pin{
  position:sticky;
  top:0;
  height:100svh;
  height:100dvh;
  overflow:hidden;
  display:flex;
  align-items:center;
  direction:rtl;
  padding:86px clamp(1.5rem,5vw,6rem) 2rem;
  gap:clamp(1rem,2vw,2.5rem);
  box-sizing:border-box;
}

.admin-bar .abt-pin{padding-top:118px;}

/* ── Progress rail ── */
.abt-rail{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1rem;
  align-self:center;
}

.abt-rail-tag{
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  font-family:Rajdhani,Tajawal,sans-serif;
  font-size:.8rem;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold);margin-bottom:.5rem;
}

.abt-rail-track{
  width:2px;height:180px;
  background:rgba(21,87,235,.12);
  border-radius:99px;
  position:relative;overflow:hidden;
}

.abt-rail-fill{
  position:absolute;top:0;left:0;right:0;
  height:25%;
  background:linear-gradient(180deg,#1557eb,#12c9d4);
  border-radius:99px;
  transition:height .4s cubic-bezier(.4,0,.2,1);
}

.abt-rail-dots{display:flex;flex-direction:column;gap:.85rem;}

.abt-dot{
  width:8px;height:8px;border-radius:50%;
  border:none;background:rgba(21,87,235,.2);padding:0;
  transition:background .3s,transform .3s;
}

.abt-dot.is-active{background:#1557eb;transform:scale(1.5);}

/* ── Slides container ── */
.abt-slides{
  flex:1;
  position:relative;
  height:100%;
  min-width:0;
}

/* ── Single slide (only .is-active is shown) ── */
.abt-slide{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  gap:clamp(1rem,2vw,2rem);
  opacity:0;
  transform:translateY(40px);
  transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .65s cubic-bezier(.16,1,.3,1);
  pointer-events:none;
  will-change:opacity,transform;
  min-height:0;
  overflow:hidden;
  overscroll-behavior:auto;
  scrollbar-width:thin;
  scrollbar-color:rgba(21,87,235,.42) transparent;
}

.abt-slide::-webkit-scrollbar{width:6px;}
.abt-slide::-webkit-scrollbar-thumb{background:rgba(21,87,235,.38);border-radius:999px;}
.abt-slide::-webkit-scrollbar-track{background:transparent;}

.abt-slide.is-active{
  opacity:1;transform:none;
  pointer-events:auto;
  transition-delay:.04s;
}

.abt-slide.is-active.has-scroll{
  overflow-y:auto;
  padding-inline-end:.35rem;
}

.abt-slide.is-active .abt-copy,
.abt-slide.is-active .abt-visual{
  animation:abtStoryIn .72s cubic-bezier(.16,1,.3,1) both;
}

.abt-slide.is-active .abt-visual{animation-delay:.08s;}

.abt-slide.is-exit{
  opacity:0;transform:translateY(-28px);
  transition:opacity .35s ease,transform .35s ease;
  transition-delay:0s;
}

/* ── Outline number ── */
.abt-num{
  flex:0 0 auto;align-self:flex-start;
  padding-top:clamp(2rem,4vh,3.5rem);
  font-family:'Rajdhani','Barlow',Tajawal,sans-serif;
  font-size:clamp(4rem,6.5vw,6.5rem);
  font-weight:900;line-height:1;
  color:transparent;
  -webkit-text-stroke:1.5px rgba(21,87,235,.2);
  text-stroke:1.5px rgba(21,87,235,.2);
  letter-spacing:-.04em;
  user-select:none;
}

body.dark-mode .abt-num{
  -webkit-text-stroke:1.5px rgba(96,165,250,.25);
}

/* ── Slide body: copy | visual ── */
.abt-body{
  flex:1;min-width:0;
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(2rem,4vw,4.5rem);
  align-items:center;
  min-height:100%;
  padding:clamp(2rem,5vh,4rem) 0;
  box-sizing:border-box;
}

/* ── Copy ── */
.abt-copy{text-align:right;}
body.english-mode .abt-copy{text-align:left;direction:ltr;}

.abt-copy h2{
  margin:0 0 1rem;
  font-size:clamp(1.5rem,2.2vw,2.4rem);
  font-weight:900;line-height:1.22;
  letter-spacing:-.02em;color:#0B1D2A;
}
body.dark-mode .abt-copy h2{color:#f0f6ff;}

.abt-copy p{
  margin:0;
  font-size:clamp(.93rem,1.1vw,1.04rem);
  line-height:1.85;color:rgba(15,23,42,.65);
}
body.dark-mode .abt-copy p{color:rgba(230,236,242,.72);}

.abt-link{
  display:inline-flex;align-items:center;gap:.5rem;
  margin-top:1.5rem;color:var(--gold);
  font-weight:800;text-decoration:none;
  font-size:.94rem;transition:opacity .2s;
}
.abt-link:hover{opacity:.75}

/* ── Visual column ── */
.abt-visual{
  position:relative;
  height:min(420px,52vh);
}

/* ── Shared card base ── */
.about-mini-dashboard,
.about-mission-card,
.about-float-card,
.about-value-row{
  background:rgba(255,255,255,.58);
  border:1px solid rgba(21,87,235,.12);
  box-shadow:0 24px 70px rgba(21,87,235,.1);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

body.dark-mode .about-mini-dashboard,
body.dark-mode .about-mission-card,
body.dark-mode .about-float-card,
body.dark-mode .about-value-row{
  background:rgba(11,29,42,.46);
  border-color:rgba(96,165,250,.2);
  box-shadow:0 28px 84px rgba(0,0,0,.24);
}

.about-mini-dashboard{
  display:grid;
  grid-template-columns:120px 1fr;
  height:100%;
  overflow:hidden;border-radius:20px;
}

.about-mini-sidebar{
  display:flex;flex-direction:column;gap:14px;
  padding:28px 16px;
  background:linear-gradient(180deg,#06162b,#0b1d2a);
}

.about-mini-sidebar span{
  height:34px;border-radius:9px;background:rgba(255,255,255,.08);
}

.about-mini-sidebar span:first-child{
  background:linear-gradient(135deg,#1557eb,#12c9d4);
}

.about-mini-main{
  padding:24px;color:#1557eb;
  display:flex;flex-direction:column;
}

.about-mini-top{
  width:100%;
  height:36px;
  margin-bottom:18px;
  border-radius:12px;
  background:linear-gradient(90deg,rgba(21,87,235,.12),rgba(0,212,200,.08),transparent);
}

.about-mini-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-bottom:20px;
}

.about-mini-stats span{
  display:block;
  padding:1rem;
  border:1px solid rgba(21,87,235,.12);
  border-radius:14px;
  background:rgba(248,251,255,.85);
}

body.dark-mode .about-mini-stats span{
  background:rgba(255,255,255,.04);
}

.about-mini-stats b,
.about-mini-stats em{
  display:block;
  font-style:normal;
}

.about-mini-stats b{
  color:#0B1D2A;
  font-family:Rajdhani,Tajawal,sans-serif;
  font-size:1.7rem;
  font-weight:800;
}

body.dark-mode .about-mini-stats b{
  color:#fff;
}

.about-mini-stats em{
  color:var(--muted);
  font-size:.78rem;
}

.about-mini-chart{
  width:100%;flex:1;min-height:80px;
}

.abt-slide.is-active .about-mini-chart path:first-child{
  stroke-dasharray:560;
  stroke-dashoffset:560;
  animation:abtChartDraw 1.4s .18s cubic-bezier(.16,1,.3,1) forwards;
}

.about-float-card{
  position:absolute;
  width:min(270px,45%);
  padding:1.2rem;border-radius:18px;
  animation:abtCardFloat 5.8s ease-in-out infinite;
}

.about-float-card-1{top:4%;right:4%}
.about-float-card-2{top:36%;left:4%;animation-delay:-1.8s}
.about-float-card-3{right:14%;bottom:4%;animation-delay:-3.2s}

.about-float-card span{
  display:flex;align-items:center;justify-content:center;
  width:50px;height:50px;margin-bottom:.8rem;
  border-radius:50%;background:rgba(0,212,200,.13);color:var(--gold);
}

.about-float-card svg{
  width:26px;height:26px;
  fill:none;stroke:currentColor;stroke-width:2.2;
}

.about-float-card strong,.about-float-card em{display:block;}

.about-float-card strong{color:#0B1D2A;font-weight:900;margin-bottom:.35rem;}
body.dark-mode .about-float-card strong{color:#fff;}

.about-float-card em{color:var(--muted);font-style:normal;line-height:1.7;font-size:.88rem;}

.about-mission-card{
  width:100%;height:100%;
  padding:clamp(1.2rem,3vw,2rem);border-radius:22px;
  box-sizing:border-box;display:flex;flex-direction:column;
}

.about-mission-label{color:var(--gold);font-weight:900;}

.about-mission-card strong{
  display:block;margin:1rem 0 .8rem;color:#0B1D2A;
  font-size:clamp(1.2rem,2vw,1.9rem);line-height:1.4;font-weight:900;
}
body.dark-mode .about-mission-card strong{color:#fff;}

.about-mission-card p{color:var(--muted);line-height:1.9;flex:1;}

.about-mission-card>div{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1rem;margin-top:1.5rem;padding-top:1.3rem;
  border-top:1px solid rgba(21,87,235,.14);
}

.about-mission-card b,.about-mission-card em{display:block;font-style:normal;}
.about-mission-card b{color:var(--gold);font-family:Rajdhani,Tajawal,sans-serif;font-size:1.75rem;}
.about-mission-card em{color:var(--muted);font-size:.78rem;}

.about-story-values{
  display:grid;gap:.9rem;
  height:100%;align-content:center;
}

.about-value-row{
  display:grid;grid-template-columns:auto 1fr;
  gap:.2rem 1rem;align-items:center;
  padding:1rem 1.2rem;border-radius:16px;
}

.about-value-row span{
  grid-row:1 / span 2;
  display:flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:13px;
  background:rgba(21,87,235,.09);
  color:#0B1D2A;
  font-family:Rajdhani,Tajawal,sans-serif;font-size:1.3rem;font-weight:800;
}
body.dark-mode .about-value-row span{color:#fff;background:rgba(96,165,250,.13);}

.about-value-row strong{color:#0B1D2A;font-weight:900;}
body.dark-mode .about-value-row strong{color:#fff;}
.about-value-row em{color:var(--muted);font-style:normal;line-height:1.65;}

@keyframes abtStoryIn{
  from{opacity:0;transform:translateY(18px) scale(.985)}
  to{opacity:1;transform:none}
}

@keyframes abtCardFloat{
  0%,100%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(0,-10px,0)}
}

@keyframes abtChartDraw{
  to{stroke-dashoffset:0}
}

/* ── Tablet: single-column body ── */
@media(max-width:1100px){
  .abt-body{
    grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
    gap:2rem;
  }
}

@media(max-width:900px){
  .abt-num{font-size:clamp(3rem,5vw,4.5rem);}
  .abt-body{grid-template-columns:1fr;gap:1.5rem;}
  .abt-visual{height:min(300px,36dvh);}
  .about-mini-dashboard{grid-template-columns:90px 1fr;}
}

/* ── Mobile nav (hidden on desktop) ── */
.abt-nav{display:none;}

/* ── Mobile: horizontal slide with direction awareness ── */
@media(max-width:780px){

  .abt-scroller{height:auto;min-height:0;}

  .abt-pin{
    position:relative;top:auto;
    height:auto;overflow:visible;
    padding:56px 1rem 1.5rem;
    flex-direction:column;align-items:stretch;
    gap:0;
  }

  .admin-bar .abt-pin{padding-top:88px;}

  .abt-rail{display:none;}

  /* Container: JS sets exact height; overflow clips off-screen slides */
  .abt-slides{
    position:relative;
    overflow:hidden;
    border-radius:24px;
    min-height:400px;
    background:rgba(255,255,255,.8);
    border:1px solid rgba(21,87,235,.12);
    box-shadow:
      0 2px 4px rgba(21,87,235,.05),
      0 10px 32px rgba(21,87,235,.1),
      0 24px 64px rgba(21,87,235,.07);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    transition:height .4s cubic-bezier(.16,1,.3,1);
  }

  body.dark-mode .abt-slides{
    background:rgba(7,18,38,.86);
    border-color:rgba(96,165,250,.16);
    box-shadow:0 10px 40px rgba(0,0,0,.32),0 1px 0 rgba(96,165,250,.08) inset;
  }

  /* All slides absolutely stack; JS height makes container = active slide */
  .abt-slide{
    position:absolute;
    top:0;left:0;right:0;
    display:flex;
    flex-direction:column;
    gap:.75rem;
    align-items:flex-start;
    padding:1.5rem 1.25rem 1.25rem;
    background:transparent;
    border:none;
    box-shadow:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    /* Default waiting state: off-screen right */
    opacity:0;
    transform:translateX(100%);
    transition:opacity .4s cubic-bezier(.16,1,.3,1),transform .42s cubic-bezier(.16,1,.3,1);
    pointer-events:none;
    will-change:opacity,transform;
    overflow:visible;
    padding-inline-end:1.25rem;
  }

  /* Active slide: centred, full opacity */
  .abt-slide.is-active{
    opacity:1;
    transform:translateX(0)!important;
    pointer-events:auto;
    z-index:1;
    transition-delay:.02s;
  }

  /* Going forward (next): exit slides move left */
  .abt-scroller.abt-dir-next .abt-slide.is-exit{
    opacity:0;
    transform:translateX(-100%);
    z-index:0;
    transition:opacity .32s ease,transform .35s ease;
    transition-delay:0s;
  }

  /* Going backward (prev): waiting slides come from left; exit slides move right */
  .abt-scroller.abt-dir-prev .abt-slide:not(.is-active):not(.is-exit){
    transform:translateX(-100%);
  }
  .abt-scroller.abt-dir-prev .abt-slide.is-exit{
    opacity:0;
    transform:translateX(100%);
    z-index:0;
    transition:opacity .32s ease,transform .35s ease;
    transition-delay:0s;
  }

  .abt-slide.is-active .abt-copy,
  .abt-slide.is-active .abt-visual{animation:none;}

  /* Slide number accent line */
  .abt-num{
    font-size:1.9rem;
    padding-top:0;
    padding-bottom:.5rem;
    margin-bottom:.1rem;
    align-self:auto;
    position:relative;
  }

  .abt-num::after{
    content:'';
    position:absolute;
    bottom:0;left:0;
    width:30px;height:2px;
    border-radius:2px;
    background:linear-gradient(90deg,#1557eb,#12c9d4);
  }

  body.dark-mode .abt-num::after{
    background:linear-gradient(90deg,#60a5fa,#12c9d4);
  }

  .abt-body{
    display:flex;
    flex-direction:column;
    gap:.85rem;
    min-height:auto;
    padding:0;
    width:100%;
    height:auto;
    box-sizing:border-box;
  }

  .abt-visual{height:auto;flex-shrink:0;position:relative;}

  .abt-copy h2{font-size:clamp(1.15rem,5.2vw,1.6rem);margin-bottom:.6rem;}
  .abt-copy p{font-size:.88rem;line-height:1.8;}

  /* Download button — prominent on mobile */
  .abt-link{
    display:inline-flex;
    align-items:center;
    gap:.45rem;
    margin-top:1.2rem;
    padding:.6rem 1.1rem;
    background:rgba(21,87,235,.07);
    border:1.5px solid rgba(21,87,235,.18);
    border-radius:10px;
    font-size:.87rem;
  }

  body.dark-mode .abt-link{
    background:rgba(96,165,250,.1);
    border-color:rgba(96,165,250,.25);
    color:#60a5fa;
  }

  /* Mini dashboard compact */
  .about-mini-dashboard{
    grid-template-columns:52px 1fr;
    height:auto;min-height:160px;
    border-radius:16px;
  }
  .about-mini-sidebar{padding:10px 7px;gap:6px;}
  .about-mini-sidebar span{height:22px;border-radius:7px;}
  .about-mini-main{padding:10px;}
  .about-mini-stats{gap:5px;}
  .about-mini-stats span{padding:.5rem .35rem;}
  .about-mini-stats b{font-size:1.15rem;}
  .about-mini-stats em{font-size:.7rem;}
  .about-mini-chart{min-height:50px;}

  /* Float cards: horizontal icon + text */
  .about-float-card{
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    display:grid!important;
    grid-template-columns:38px 1fr!important;
    grid-template-rows:auto auto!important;
    column-gap:.7rem!important;
    row-gap:.08rem!important;
    align-items:center!important;
    padding:.65rem .9rem!important;
    border-radius:14px!important;
    margin-bottom:.5rem!important;
    animation:none!important;
  }
  .about-float-card:last-child{margin-bottom:0!important;}
  .about-float-card span{
    grid-row:1/span 2!important;
    width:36px!important;height:36px!important;
    margin-bottom:0!important;border-radius:9px!important;
  }
  .about-float-card svg{width:18px!important;height:18px!important;}
  .about-float-card strong{font-size:.88rem!important;margin-bottom:0!important;}
  .about-float-card em{font-size:.77rem!important;line-height:1.5!important;}

  /* Mission card */
  .about-mission-card{height:auto;border-radius:18px;padding:1.1rem;}
  .about-mission-card>div{
    grid-template-columns:repeat(3,1fr);
    gap:.6rem;margin-top:1rem;padding-top:1rem;
  }
  .about-mission-card b{font-size:1.4rem;}
  .about-mission-card em{font-size:.72rem;}

  /* Values */
  .about-story-values{height:auto;align-content:start;gap:.6rem;}
  .about-value-row{padding:.75rem .9rem;border-radius:13px;}
  .about-value-row span{width:42px;height:42px;font-size:1.1rem;border-radius:10px;}

  /* Mobile nav: force LTR so < is left and > is right */
  .abt-nav{
    direction:ltr;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:.9rem .25rem .1rem;
    gap:.75rem;
  }

  .abt-prev,.abt-next{
    display:flex;align-items:center;justify-content:center;
    width:42px;height:42px;border-radius:50%;
    border:1.5px solid rgba(21,87,235,.22);
    background:rgba(255,255,255,.72);
    color:#1557eb;cursor:pointer;
    transition:background .2s,border-color .2s,opacity .2s;
    flex-shrink:0;
    -webkit-tap-highlight-color:transparent;
  }
  .abt-prev:active,.abt-next:active{background:rgba(21,87,235,.12);}
  .abt-prev[disabled],.abt-next[disabled]{opacity:.3;cursor:default;pointer-events:none;}
  body.dark-mode .abt-prev,body.dark-mode .abt-next{
    background:rgba(11,29,42,.65);
    border-color:rgba(96,165,250,.28);
    color:#60a5fa;
  }

  .abt-mob-dots{display:flex;align-items:center;gap:.5rem;}
  .abt-mob-dot{
    width:7px;height:7px;border-radius:4px;
    background:rgba(21,87,235,.2);
    transition:background .3s,width .3s;
    cursor:pointer;-webkit-tap-highlight-color:transparent;
  }
  .abt-mob-dot.is-active{width:22px;background:#1557eb;}
  body.dark-mode .abt-mob-dot.is-active{background:#60a5fa;}
}

@media(max-width:480px){
  .about-mini-stats{grid-template-columns:repeat(3,1fr);}
  .about-mission-card>div{grid-template-columns:repeat(3,1fr);}
}

@media(prefers-reduced-motion:reduce){
  .abt-slides{transition:none!important;}
  .abt-slide{transition:none!important;transform:translateX(0)!important;}
  .abt-slide:not(.is-active){opacity:0!important;}
  .abt-slide.is-active{opacity:1!important;}
  .abt-slide.is-active .abt-copy,
  .abt-slide.is-active .abt-visual,
  .abt-slide.is-active .about-mini-chart path:first-child,
  .about-float-card{animation:none!important;}
}
/* Easy Scope scroll storytelling section end */

/* Easy Scope frontend language toggle start */
body.english-mode{
  direction:ltr;
}

body.english-mode .hero-text-col,
body.english-mode .hdesc,
body.english-mode .abt-copy,
body.english-mode .cg,
body.english-mode .cform,
body.english-mode .service-content,
body.english-mode .entry-content{
  direction:ltr;
  text-align:left;
}

body.english-mode .hero-text-col{
  align-items:flex-start;
}

body.english-mode .hero-text-col .hbtns{
  justify-content:flex-start;
}

body.english-mode .abt-copy p,
body.english-mode .hdesc,
body.english-mode .sdesc,
body.english-mode .lead-copy{
  line-height:1.75;
}

body.english-mode .svc-grid,
body.english-mode .sc,
body.english-mode .sch,
body.english-mode .service-content{
  text-align:left;
  direction:ltr;
}

body.english-mode .service-content li{
  padding-right:0;
  padding-left:1.3rem;
}

body.english-mode .service-content li::before{
  right:auto;
  left:0;
}

body.english-mode .fg input,
body.english-mode .fg textarea,
body.english-mode .fg select{
  direction:ltr;
  text-align:left;
}

body.english-mode .ci,
body.english-mode .vi,
body.english-mode .sch{
  direction:ltr;
}
/* Hero split — missing LTR overrides */
body.english-mode .hero.hero-split{text-align:left!important}
body.english-mode .hero-split-inner{direction:ltr!important}
body.english-mode .hero-text-col .htitle,
body.english-mode .hero-text-col .hdesc{text-align:left!important}
/* Easy Scope frontend language toggle end */

/* ============================================================
   HERO TITLE — smaller, crisper
   ============================================================ */
.hero-text-col .htitle{
  font-size:clamp(1.6rem,3.2vw,2.9rem)!important;
  line-height:1.2!important;
}
@media(max-width:780px){
  .hero-text-col .htitle{font-size:clamp(1.5rem,6.8vw,2.1rem)!important}
}

/* ============================================================
   MOBILE — خفّف خلفية الشبكة التقنية
   ============================================================ */
@media(max-width:900px){
  #bg-canvas{opacity:.22!important}
  .amb{opacity:.35!important}
}
@media(max-width:600px){
  #bg-canvas{opacity:.08!important}
  .amb{opacity:.18!important}
}
@media(max-width:480px){
  #bg-canvas{opacity:0!important;pointer-events:none!important}
  .amb{opacity:.1!important}
}