/* Impact Systems - shared styles for every page.
   Fonts live on this site (no Google Fonts trips). Body text uses the phone's own
   UI font (0 KB). Tajawal only downloads when Arabic text is on screen. */
@font-face{font-family:'Michroma';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/michroma-v2.woff2) format('woff2');unicode-range:U+0020-007E,U+00A3,U+00A9,U+00B7,U+00D7,U+2013,U+2018-201D,U+2026,U+2122,U+2190-2193}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/tajawal-400-arabic.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/tajawal-700-arabic.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}

:root{
  color-scheme:dark;
  --bg:#000; --text:#fff; --accent:#3263C1; --accent-hover:#4374D6; --accent-dim:#1E3C73;
  --surface:#0A0A0C; --surface-2:#141418; --border:#24262B; --muted:#A0A3AB; --faint:#6B6E76;
  --danger:#E5484D;
  --display:'Michroma',ui-sans-serif,system-ui,sans-serif;
  --body:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,system-ui,sans-serif;
  --r:6px; --r-lg:8px; --cell:48px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
html[lang="ar"]{--body:Tajawal,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,system-ui,sans-serif}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:84px; -webkit-tap-highlight-color:transparent}
body{margin:0; background:var(--bg); color:var(--text); font:16px/1.6 var(--body); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:clip; min-height:100vh}
html.i18n-wait body{visibility:hidden; animation:show 0s 1.2s forwards} /* never stay hidden if JS fails */
@keyframes show{to{visibility:visible}}
img{max-width:100%; display:block}
a{color:inherit}
button,input{font:inherit; color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent-hover); outline-offset:3px}
[hidden]{display:none!important}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.wrap{position:relative; max-width:1200px; margin:0 auto; padding:0 20px}
@media (min-width:768px){.wrap{padding:0 32px}}
main{position:relative; z-index:1}

/* ------------------------------------------------------------ live background
   The engineering grid + blue glow from the booking page, behind the whole site
   (fixed, so every section sits on it). Alive: the glows drift slowly under the
   grid, light pulses run along the grid lines, and on desktop the grid lights up
   blue around the cursor. */
.bg{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; background:#000}
.glow{position:absolute; border-radius:50%}
.glow.g1{width:85vmax; height:62vmax; left:-30vmax; top:-30vmax;
  background:radial-gradient(closest-side,rgba(50,99,193,.26),rgba(50,99,193,.08) 55%,transparent);
  animation:drift-a 48s ease-in-out infinite alternate}
.glow.g2{width:72vmax; height:54vmax; right:-32vmax; top:-8vmax;
  background:radial-gradient(closest-side,rgba(30,60,115,.3),transparent);
  animation:drift-b 60s ease-in-out infinite alternate}
.glow.g3{width:66vmax; height:50vmax; left:4vw; bottom:-36vmax;
  background:radial-gradient(closest-side,rgba(50,99,193,.16),transparent);
  animation:drift-c 72s ease-in-out infinite alternate}
@keyframes drift-a{to{transform:translate(9vw,8vh) scale(1.04)}}
@keyframes drift-b{to{transform:translate(-10vw,10vh) scale(.97)}}
@keyframes drift-c{to{transform:translate(9vw,-10vh) scale(1.04)}}
.grid,.spot{position:absolute; inset:0;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:var(--cell) var(--cell)}
.grid{--line:rgba(255,255,255,.055);
  -webkit-mask-image:radial-gradient(ellipse 130% 110% at 50% 35%,#000 50%,rgba(0,0,0,.5) 100%);
          mask-image:radial-gradient(ellipse 130% 110% at 50% 35%,#000 50%,rgba(0,0,0,.5) 100%)}
.spot{--line:rgba(67,116,214,.38); opacity:0; transition:opacity .5s;
  -webkit-mask-image:radial-gradient(200px circle at var(--mx,-500px) var(--my,-500px),#000,transparent 75%);
          mask-image:radial-gradient(200px circle at var(--mx,-500px) var(--my,-500px),#000,transparent 75%)}
.has-pointer .spot{opacity:1}
.beam{position:absolute; opacity:.5}
.beam.x{left:0; top:calc(var(--r) * var(--cell)); width:200px; height:1px;
  background:linear-gradient(90deg,transparent,rgba(67,116,214,.95) 80%,#cfe0ff);
  animation:beam-x var(--t,12s) linear var(--w,0s) infinite; transform:translateX(-220px)}
.beam.y{top:0; left:calc(var(--c) * var(--cell)); width:1px; height:200px;
  background:linear-gradient(180deg,transparent,rgba(67,116,214,.95) 80%,#cfe0ff);
  animation:beam-y var(--t,12s) linear var(--w,0s) infinite; transform:translateY(-220px)}
@keyframes beam-x{0%{transform:translateX(-220px)} 55%,100%{transform:translateX(calc(100vw + 20px))}}
@keyframes beam-y{0%{transform:translateY(-220px)} 55%,100%{transform:translateY(calc(100vh + 20px))}}
@media (max-width:767px){.beam:nth-child(n+4){display:none}}

/* ------------------------------------------------------------ type */
.eyebrow{display:inline-flex; align-items:center; gap:12px; margin:0 0 20px; font:400 11px/1.2 var(--display); letter-spacing:.24em; text-transform:uppercase; color:var(--accent-hover)}
.eyebrow::before{content:""; width:24px; height:1px; background:var(--accent)}
.center .eyebrow{justify-content:center}
h1,h2,h3{font-weight:400; margin:0; text-wrap:balance}
.h1{font:400 clamp(29px,5.3vw,66px)/1.13 var(--display); letter-spacing:.004em}
.h2{font:400 clamp(25px,3.7vw,46px)/1.2 var(--display); letter-spacing:.004em}
.accent{color:var(--accent-hover)}
.h1 .accent,.h2 .accent{text-shadow:0 0 42px rgba(50,99,193,.45)}
.lede{color:var(--muted); font-size:clamp(16px,1.6vw,18px); line-height:1.7; margin:0}
html[lang="ar"] .eyebrow{font:700 14px/1.2 var(--body); letter-spacing:0}
html[lang="ar"] .h1{font:700 clamp(34px,6vw,72px)/1.25 var(--body); letter-spacing:0}
html[lang="ar"] .h2{font:700 clamp(28px,4.2vw,52px)/1.3 var(--body); letter-spacing:0}
.center{text-align:center}
.center .lede{margin-inline:auto}
.sec{padding:96px 0}
@media (min-width:768px){.sec{padding:136px 0}}

/* ------------------------------------------------------------ buttons (zoom on hover) */
.btn{position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px; height:52px; padding:0 26px; border-radius:var(--r); border:1px solid transparent; font-size:15px; font-weight:600; letter-spacing:.01em; text-decoration:none; white-space:nowrap; overflow:hidden; isolation:isolate;
  transition:transform .3s var(--ease),box-shadow .3s,background-color .2s,border-color .2s}
.btn:hover{transform:scale(1.05)}
.btn:active{transform:scale(.98)}
.btn.primary{background:var(--accent); color:#fff; box-shadow:0 10px 30px -12px rgba(50,99,193,.85),inset 0 1px 0 rgba(255,255,255,.16)}
.btn.primary:hover{background:var(--accent-hover); box-shadow:0 18px 46px -14px rgba(67,116,214,1),inset 0 1px 0 rgba(255,255,255,.2)}
.btn.primary::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%); transform:translateX(-120%)}
.btn.primary:hover::after{transform:translateX(120%); transition:transform .8s var(--ease)}
.btn.ghost{background:rgba(10,10,12,.65); border-color:#34373e; color:#fff}
.btn.ghost:hover{border-color:var(--accent-hover); background:rgba(20,22,30,.85)}
.btn.sm{height:40px; padding:0 16px; font-size:13.5px}
.btn.lg{height:58px; padding:0 34px; font-size:16px}
.arr{width:16px; height:16px; flex:none; transition:transform .3s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
[dir="rtl"] .arr{transform:scaleX(-1)}
[dir="rtl"] .btn:hover .arr{transform:scaleX(-1) translateX(4px)}
.ctas{display:flex; flex-wrap:wrap; gap:12px}
@media (max-width:440px){.ctas .btn.lg{flex:1 1 auto; padding:0 18px}}

/* ------------------------------------------------------------ nav */
.nav{position:fixed; inset:0 0 auto; z-index:50; border-bottom:1px solid transparent; transition:background-color .3s,border-color .3s,backdrop-filter .3s}
.nav.scrolled{background:rgba(0,0,0,.72); border-bottom-color:var(--border); -webkit-backdrop-filter:blur(14px) saturate(140%); backdrop-filter:blur(14px) saturate(140%)}
.nav .in{display:flex; align-items:center; justify-content:space-between; gap:16px; height:72px}
.brand{display:flex; flex:none}
.brand img{height:24px; width:auto}
@media (min-width:768px){.brand img{height:28px}}
.links{display:none; gap:36px}
@media (min-width:900px){.links{display:flex}}
.links a{position:relative; font:400 10.5px/1 var(--display); letter-spacing:.2em; color:var(--muted); text-decoration:none; padding:8px 0; transition:color .2s}
.links a::after{content:""; position:absolute; inset:auto 0 0; height:1px; background:var(--accent-hover); transform:scaleX(0); transition:transform .3s var(--ease)}
.links a:hover{color:#fff}
.links a:hover::after{transform:scaleX(1)}
html[lang="ar"] .links a{font:700 14px/1 var(--body); letter-spacing:0}
.nav .act{display:flex; align-items:center; gap:8px}
.nav .act .ghost{display:none}
@media (min-width:640px){.nav .act .ghost{display:inline-flex}}
.lang{display:inline-flex; align-items:center; gap:7px; height:40px; padding:0 12px; border:1px solid var(--border); border-radius:var(--r); background:rgba(10,10,12,.7); font-size:13.5px; color:#fff; transition:border-color .2s}
.lang:hover{border-color:var(--accent-hover)}
.lang svg{width:15px; height:15px; color:var(--muted)}
.lang span{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans Arabic',sans-serif; font-weight:700}
html[lang="ar"] .lang span{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; font-weight:600}
@media (max-width:379px){.brand img{height:20px} .lang{width:40px; padding:0; justify-content:center} .lang span{display:none} .nav .act .btn.sm{padding:0 14px}}

/* ------------------------------------------------------------ hero */
.hero{padding-top:128px}
@media (min-width:768px){.hero{padding-top:184px}}
.badge{display:inline-flex; align-items:center; gap:10px; margin-bottom:30px; padding:8px 14px; border:1px solid var(--border); border-radius:var(--r); background:rgba(10,10,12,.7); font-size:13px; color:var(--muted)}
.badge b{color:#fff; font-weight:600}
.dot{position:relative; width:7px; height:7px; border-radius:50%; background:var(--accent-hover); flex:none}
.dot::after{content:""; position:absolute; inset:-5px; border-radius:50%; border:1px solid var(--accent-hover); animation:ping 2s var(--ease) infinite}
@keyframes ping{from{transform:scale(.4); opacity:1} to{transform:scale(1.6); opacity:0}}
.hero .h1{max-width:15.5em}
html[lang="ar"] .hero .h1{max-width:13em}
.hero .sub{margin:30px 0 40px; font:400 clamp(11.5px,1.3vw,14px)/1.7 var(--display); letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.hero .sub b{color:var(--accent-hover); font-weight:400}
html[lang="ar"] .hero .sub{font:700 clamp(16px,1.8vw,20px)/1.6 var(--body); letter-spacing:0}
/* headline words rise in one by one (site.js wraps them) */
.js .h1 .w{display:inline-block; opacity:0; transform:translateY(.5em); filter:blur(10px); animation:word .9s var(--ease) forwards; animation-delay:calc(var(--i) * 65ms + 120ms)}
@keyframes word{to{opacity:1; transform:none; filter:blur(0)}}
.rise{animation:rise .9s var(--ease) both; animation-delay:var(--d,0ms)}
@keyframes rise{from{opacity:0; transform:translateY(18px)}}

/* results ticker */
.ticker{margin-top:84px; border-block:1px solid var(--border); background:rgba(8,8,10,.7); overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent); mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
@media (min-width:768px){.ticker{margin-top:120px}}
.ticker .track{display:flex; width:max-content; animation:marquee 84s linear infinite}
.ticker:hover .track{animation-play-state:paused}
.ticker .item{display:flex; align-items:center; gap:14px; padding:20px 30px; font:400 12.5px/1 var(--display); letter-spacing:.12em; white-space:nowrap; color:#d9dbe0}
.ticker .item i{font-style:normal; color:var(--accent-hover); font-size:10px}
.ticker .item span{color:var(--faint)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ------------------------------------------------------------ video + stats */
.frame{position:relative; margin:56px auto 0; max-width:1040px}
.frame .box{position:relative; aspect-ratio:16/9; border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; background:#050507; box-shadow:0 40px 120px -60px rgba(50,99,193,.75)}
.corner{position:absolute; width:18px; height:18px; border:0 solid var(--accent-hover); pointer-events:none}
.corner.tl{top:-9px; left:-9px; border-top-width:1px; border-left-width:1px}
.corner.tr{top:-9px; right:-9px; border-top-width:1px; border-right-width:1px}
.corner.bl{bottom:-9px; left:-9px; border-bottom-width:1px; border-left-width:1px}
.corner.br{bottom:-9px; right:-9px; border-bottom-width:1px; border-right-width:1px}
.play{position:absolute; inset:0; width:100%; padding:0; border:0; background:#050507; display:grid; place-items:center; text-align:start; isolation:isolate}
.play img{position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; opacity:.5; filter:saturate(.7); transition:transform .8s var(--ease),opacity .4s}
.play::before{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(0deg,rgba(0,0,0,.9),rgba(0,0,0,.15) 55%,rgba(0,0,0,.35))}
.play:hover img{transform:scale(1.03); opacity:.62}
.play .pbtn{position:relative; width:76px; height:76px; border-radius:var(--r-lg); background:var(--accent); display:grid; place-items:center; box-shadow:0 18px 50px -12px rgba(50,99,193,1); transition:transform .35s var(--ease),background-color .2s}
.play .pbtn::after{content:""; position:absolute; inset:-1px; border-radius:var(--r-lg); border:1px solid var(--accent-hover); animation:ring 2.4s var(--ease) infinite}
@keyframes ring{from{transform:scale(1); opacity:.9} to{transform:scale(1.55); opacity:0}}
.play:hover .pbtn{transform:scale(1.08); background:var(--accent-hover)}
.play .pbtn svg{width:26px; height:26px; margin-left:4px}
.play .cap{position:absolute; inset:auto 24px 20px; display:flex; justify-content:space-between; align-items:flex-end; gap:16px}
.play .cap b{display:block; font-size:clamp(14px,1.6vw,18px); font-weight:600}
.play .cap span{font-size:13px; color:var(--muted)}
@media (max-width:560px){.play .cap{inset:auto 14px 12px} .play .cap span{display:none} .play .pbtn{width:60px; height:60px}}
.frame iframe{position:absolute; inset:0; width:100%; height:100%; border:0}

.stats{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); max-width:1040px; margin:72px auto 0; border:1px solid var(--border); border-radius:var(--r-lg); background:rgba(10,10,12,.7); overflow:hidden}
@media (min-width:860px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{padding:34px 10px; text-align:center; border-color:var(--border); border-style:solid; border-width:0}
.stat:nth-child(odd){border-inline-end-width:1px}
.stat:nth-child(-n+2){border-bottom-width:1px}
@media (min-width:860px){.stat{border-width:0!important} .stat+.stat{border-inline-start-width:1px!important}}
.num{display:inline-flex; align-items:flex-start; gap:6px; font:400 clamp(24px,7.4vw,30px)/1 var(--display); direction:ltr; font-variant-numeric:tabular-nums}
@media (min-width:768px){.num{font-size:clamp(30px,4vw,50px)}}
.num .pct{font-size:.55em; margin-top:.1em}
.num .tri{width:11px; height:11px; margin-top:3px; color:var(--accent-hover); animation:bob 2.6s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-4px)}}
.stat p{margin:14px 0 0; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
html[lang="ar"] .stat p{font-size:14px; letter-spacing:0}

/* ------------------------------------------------------------ platforms */
.platforms{position:relative; z-index:1; border-block:1px solid var(--border); background:rgba(8,8,10,.8); padding:44px 0}
.platforms .in{display:flex; flex-direction:column; align-items:center; gap:30px}
@media (min-width:960px){.platforms .in{flex-direction:row; justify-content:space-between}}
.platforms .eyebrow{margin:0; color:var(--muted)}
.platforms .eyebrow::before{background:var(--border)}
.logos{display:flex; flex-wrap:wrap; justify-content:center; gap:22px 48px}
@media (min-width:768px){.logos{gap:22px 72px}}
.logos li{display:flex; align-items:center; gap:12px; font-size:19px; font-weight:500; letter-spacing:-.01em; color:#e9eaee; transition:transform .3s var(--ease),color .2s}
.logos li:hover{transform:translateY(-3px); color:#fff}
.logos svg,.logos .mask{width:28px; height:28px; color:var(--accent-hover); flex:none}
.logos .mask{background:currentColor; -webkit-mask:url(/img/shopify.png) center/contain no-repeat; mask:url(/img/shopify.png) center/contain no-repeat}
ul.logos{list-style:none; margin:0; padding:0}

/* ------------------------------------------------------------ cards (services, steps) */
.split{display:grid; gap:24px}
@media (min-width:960px){.split{grid-template-columns:1fr 1fr; gap:64px; align-items:end}}
.sub-h{margin:88px 0 28px; font:400 13px/1 var(--display); letter-spacing:.22em; text-transform:uppercase; color:var(--accent-hover)}
html[lang="ar"] .sub-h{font:700 20px/1 var(--body); letter-spacing:0}
.cards{display:grid; gap:14px}
@media (min-width:640px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.cards.four{grid-template-columns:repeat(4,1fr)}}
@media (min-width:1080px){.cards.three{grid-template-columns:repeat(3,1fr); gap:18px}}
.card{position:relative; height:100%; padding:24px 20px; border:1px solid var(--border); border-radius:var(--r-lg); background:rgba(10,10,12,.75); overflow:hidden;
  transition:transform .4s var(--ease),border-color .3s,background-color .3s}
.card::before{content:""; position:absolute; inset:0 0 auto; height:1px; background:linear-gradient(90deg,transparent,var(--accent-hover),transparent); transform:scaleX(0); transition:transform .6s var(--ease)}
.card::after{content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .4s;
  background:radial-gradient(280px circle at var(--x,50%) var(--y,0%),rgba(50,99,193,.16),transparent 65%)}
.card:hover,.card.is-active{transform:translateY(-4px); border-color:rgba(67,116,214,.45); background:rgba(13,15,21,.92)}
.card:hover::before,.card.is-active::before{transform:scaleX(1)}
.card:hover::after,.card.is-active::after{opacity:1}
.card .n{font:400 clamp(34px,3.4vw,42px)/1 var(--display); color:rgba(67,116,214,.3); transition:color .3s}
.card:hover .n,.card.is-active .n{color:var(--accent-hover)}
.card h3{margin:20px 0 8px; font-size:17.5px; font-weight:650; line-height:1.35}
.card p{margin:0; font-size:14.5px; line-height:1.6; color:var(--muted)}

.tagline{display:inline-flex; margin:56px 0 22px; padding:8px 12px; border:1px solid var(--border); border-radius:4px; background:rgba(10,10,12,.75); font:400 10.5px/1.2 var(--display); letter-spacing:.2em; text-transform:uppercase; color:var(--muted)}
html[lang="ar"] .tagline{font:700 14px/1.2 var(--body); letter-spacing:0}
.step .top{display:flex; align-items:center; gap:18px}
.step .n{font-size:48px; color:var(--accent-hover)}
.step .line{position:relative; flex:1; height:1px; background:var(--border); overflow:hidden}
.step .line::after{content:""; position:absolute; inset:0; background:var(--accent-hover); transform:scaleX(0); transform-origin:left; transition:transform 1.4s var(--ease) .35s}
[dir="rtl"] .step .line::after{transform-origin:right}
.in .step .line::after,.step.in .line::after{transform:scaleX(1)}
.step h3{margin:24px 0 10px; font:400 15.5px/1.45 var(--display); letter-spacing:.06em; text-transform:uppercase}
html[lang="ar"] .step h3{font:700 21px/1.4 var(--body); letter-spacing:0}
.tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:22px}
.tags span{padding:6px 10px; border:1px solid var(--border); border-radius:4px; background:rgba(0,0,0,.5); font-size:12.5px; color:var(--muted)}

/* ------------------------------------------------------------ results carousel */
.rhead{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:40px}
.rnav{display:flex; align-items:center; gap:10px}
.count{font:400 12px/1 var(--display); letter-spacing:.14em; color:var(--muted); margin-inline-end:10px; direction:ltr}
.count b{color:#fff; font-weight:400}
.arrow{width:48px; height:48px; display:grid; place-items:center; border:1px solid var(--border); border-radius:var(--r); background:rgba(10,10,12,.8); transition:transform .3s var(--ease),border-color .2s,background-color .2s}
.arrow:hover{transform:scale(1.08); border-color:var(--accent-hover); background:var(--surface-2)}
.arrow svg{width:18px; height:18px}
[dir="rtl"] .arrow svg{transform:scaleX(-1)}
.slider{display:grid; grid-auto-flow:column; grid-auto-columns:86%; gap:16px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scrollbar-width:none; -webkit-overflow-scrolling:touch; cursor:grab}
.slider::-webkit-scrollbar{display:none}
.slider.dragging{cursor:grabbing; scroll-snap-type:none; user-select:none}
.slider.dragging .shot{cursor:grabbing}
@media (min-width:768px){.slider{grid-auto-columns:calc((100% - 24px) / 2); gap:24px}}
.rcard{scroll-snap-align:start; display:flex; flex-direction:column; border:1px solid var(--border); border-radius:var(--r-lg); background:rgba(10,10,12,.9); overflow:hidden; transition:border-color .3s}
.rcard:hover{border-color:rgba(67,116,214,.45)}
.shot{position:relative; display:block; width:100%; aspect-ratio:4/3; padding:0; border:0; background:#fff; overflow:hidden; cursor:default}
@media (hover:hover) and (min-width:768px){.shot{cursor:zoom-in}}
.shot picture,.play picture{display:contents}
.shot img{width:100%; height:100%; object-fit:contain; transition:transform .8s var(--ease); pointer-events:none}
.shot,.shot img,.lightbox img{-webkit-user-select:none; user-select:none; -webkit-user-drag:none; -webkit-touch-callout:none}
.rcard:hover .shot img{transform:scale(1.045)}
.rcard .meta{padding:22px 24px 26px}
.rcard .case{font:400 10.5px/1 var(--display); letter-spacing:.2em; text-transform:uppercase; color:var(--faint)}
html[lang="ar"] .rcard .case{font:700 13px/1 var(--body); letter-spacing:0}
.rcard .ttl{margin:12px 0 10px; font:400 clamp(17px,1.9vw,22px)/1.3 var(--display); color:var(--accent-hover); direction:ltr; unicode-bidi:isolate}
[dir="rtl"] .rcard .ttl{text-align:right}
.rcard p{margin:0; font-size:14px; color:var(--muted)}
.lightbox{max-width:min(92vw,980px); max-height:92vh; padding:52px 0 0; border:1px solid var(--border); border-radius:var(--r-lg); background:#0A0A0C; overflow:hidden}
.lightbox::backdrop{background:rgba(0,0,0,.88)}
.lightbox img{max-height:calc(92vh - 54px); width:auto; margin:auto; background:#fff; pointer-events:none}
.lightbox button{position:absolute; top:8px; inset-inline-end:8px; width:36px; height:36px; border:1px solid var(--border); border-radius:var(--r); background:var(--surface-2); color:#fff; font-size:20px; line-height:1}

/* ------------------------------------------------------------ final CTA */
.final{position:relative; padding:72px 0 120px; overflow:hidden}
@media (min-width:768px){.final{padding:96px 0 170px}}
.final::before{content:""; position:absolute; left:50%; top:50%; width:min(900px,120vw); height:520px; transform:translate(-50%,-50%); background:radial-gradient(closest-side,rgba(50,99,193,.24),transparent); pointer-events:none}
.pill{display:inline-flex; align-items:center; gap:10px; padding:8px 14px; border:1px solid rgba(67,116,214,.45); border-radius:var(--r); background:rgba(50,99,193,.1); font:400 10.5px/1 var(--display); letter-spacing:.2em; text-transform:uppercase; color:var(--accent-hover)}
html[lang="ar"] .pill{font:700 14px/1 var(--body); letter-spacing:0}
.h-xl{margin-top:28px; font:400 clamp(34px,7.2vw,92px)/1.06 var(--display)}
html[lang="ar"] .h-xl{font:700 clamp(40px,8vw,100px)/1.2 var(--body)}
.final .lede{max-width:34em; margin-top:26px}
.checks{display:flex; flex-wrap:wrap; justify-content:center; gap:14px 34px; margin:40px 0 44px; padding:0; list-style:none}
.checks li{display:flex; align-items:center; gap:10px; font-weight:500}
.checks svg{width:20px; height:20px; padding:4px; border-radius:4px; background:var(--accent); color:#fff; flex:none}
.final .ctas{justify-content:center}

/* ------------------------------------------------------------ footer */
.foot{position:relative; z-index:1; border-top:1px solid var(--border); background:#000; padding:40px 0 34px}
.foot .in{display:flex; flex-direction:column; align-items:center; gap:24px; text-align:center}
@media (min-width:860px){.foot .in{flex-direction:row; justify-content:space-between; text-align:start}}
.foot .brand img{height:26px}
.social{display:flex; gap:10px}
.social a{width:42px; height:42px; display:grid; place-items:center; border:1px solid var(--border); border-radius:var(--r); background:var(--surface); color:var(--muted); transition:transform .3s var(--ease),border-color .2s,color .2s,box-shadow .3s}
.social a:hover{transform:translateY(-3px); border-color:var(--accent-hover); color:var(--accent-hover); box-shadow:0 12px 30px -12px rgba(50,99,193,.8)}
.social svg{width:19px; height:19px}
.legal{font-size:12.5px; color:var(--faint); line-height:1.9}
.legal a{color:var(--muted); text-decoration:none}
.legal a:hover{color:#fff}

/* ------------------------------------------------------------ inner pages */
.page-hero{padding-top:150px}
@media (min-width:768px){.page-hero{padding-top:200px}}
.contact-cards{display:grid; gap:14px; max-width:980px; margin:56px auto 0}
@media (min-width:760px){.contact-cards{grid-template-columns:repeat(3,1fr)}}
.ccard{display:flex; flex-direction:column; gap:18px; text-decoration:none; text-align:start}
.ccard .ic{width:46px; height:46px; display:grid; place-items:center; border:1px solid rgba(67,116,214,.4); border-radius:var(--r); background:rgba(50,99,193,.1); color:var(--accent-hover); transition:background-color .3s,color .3s}
.ccard:hover .ic{background:var(--accent); color:#fff}
.ccard .ic svg{width:20px; height:20px}
.ccard small{display:block; font:400 10.5px/1 var(--display); letter-spacing:.2em; text-transform:uppercase; color:var(--faint)}
html[lang="ar"] .ccard small{font:700 13px/1 var(--body); letter-spacing:0}
.ccard b{display:block; margin-top:8px; font-weight:600; color:#fff; word-break:break-word}
.ccard .desc{display:block; margin-top:4px; font-size:13.5px; color:var(--muted)}
.prose{max-width:720px; margin:0 auto; color:var(--muted)}
.prose h2{margin:40px 0 10px; font:700 18px/1.4 var(--body); color:#fff}
.prose a{color:var(--accent-hover)}

/* ------------------------------------------------------------ scroll reveal */
.js [data-reveal]{opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease),transform .9s var(--ease); transition-delay:var(--d,0ms)}
.js [data-reveal].in{opacity:1; transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; transition-delay:0ms!important}
  .beam,.spot{display:none}
  .js .h1 .w{opacity:1; transform:none; filter:none}
  .ticker .track{animation:none}
}

@media (min-width:768px){.card{padding:28px 24px}}
@media (max-width:480px){.eyebrow{letter-spacing:.18em}}

/* Touch screens: no hover. A tap on iPhone leaves ":hover" stuck on (zoomed picture,
   blue border, grown button) until you tap somewhere else, which looks glitchy. */
@media (hover:none){
  .btn:hover,.btn:active{transform:none}
  .btn:hover .arr{transform:none}
  [dir="rtl"] .btn:hover .arr{transform:scaleX(-1)}
  .btn.primary:hover{background:var(--accent); box-shadow:0 10px 30px -12px rgba(50,99,193,.85),inset 0 1px 0 rgba(255,255,255,.16)}
  .btn.primary:hover::after{transform:translateX(-120%); transition:none}
  .btn.ghost:hover{border-color:#34373e; background:rgba(10,10,12,.65)}
  .arrow:hover{transform:none; border-color:var(--border); background:rgba(10,10,12,.8)}
  .arrow:active{transform:scale(.94)}
  .rcard:hover{border-color:var(--border)}
  .rcard:hover .shot img{transform:none}
  .card:hover:not(.is-active){transform:none; border-color:var(--border); background:rgba(10,10,12,.75)}
  .card:hover:not(.is-active)::before{transform:scaleX(0)}
  .card:hover:not(.is-active)::after{opacity:0}
  .card:hover:not(.is-active) .n{color:rgba(67,116,214,.3)}
  .step.card:hover:not(.is-active) .n{color:var(--accent-hover)}
  .logos li:hover{transform:none; color:#e9eaee}
  .social a:hover{transform:none; border-color:var(--border); color:var(--muted); box-shadow:none}
  .play:hover img{transform:none; opacity:.5}
  .play:hover .pbtn{transform:none; background:var(--accent)}
  .links a:hover::after{transform:scaleX(0)}
  .ccard:hover .ic{background:rgba(50,99,193,.1); color:var(--accent-hover)}
}

/* Phones: keep it light. The glows stay put (the light pulses keep the grid alive),
   and the top bar is solid instead of blurring the moving background on every frame. */
@media (max-width:767px){
  .glow{animation:none}
  .nav.scrolled,.atop{background:rgba(0,0,0,.92); -webkit-backdrop-filter:none; backdrop-filter:none}
}