/* ============================================================================
   home.css, Screens homepage (Structure A · Corporate Classic), built out
   Full-width, responsive, standalone. DM Sans (display) + Inter (text).
   ========================================================================= */

:root{
  --ink:#0A152D; --ink-2:#0F1E3D;
  --blue:#2F6BFF; --blue-deep:#1E3A8A; --blue-light:#5BA3FF;
  --muted:#64748B; --muted-2:#94A3B8;
  --line:#E6EAF2; --line-2:#E2E8F0;
  --bg:#FFFFFF; --soft:#F7F9FC; --soft-2:#EEF3FB;
  --grad:linear-gradient(90deg,#5BA3FF 0%,#2F6BFF 50%,#1E3A8A 100%);
  --shadow-sm:0 1px 2px rgba(15,23,42,.05),0 6px 20px rgba(15,23,42,.06);
  --shadow-md:0 2px 4px rgba(15,23,42,.05),0 18px 44px rgba(15,23,42,.12);
  --maxw:min(1920px, 94vw); --pad:64px; --nav-h:78px;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
img{display:block;max-width:100%;}
body{
  font-family:'Inter',system-ui,sans-serif; color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
h1,h2,h3,h4{font-family:'DM Sans',system-ui,sans-serif; letter-spacing:-.02em; line-height:1.05; color:var(--ink);}
a{color:inherit;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--pad);}
.eyebrow{font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--blue);}
.grad-text{background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;}
::selection{background:rgba(47,107,255,.18);}

/* buttons ---------------------------------------------------------------- */
.btn{display:inline-flex; align-items:center; gap:9px; font-family:'Inter',sans-serif; font-size:15px; font-weight:600;
  border-radius:999px; padding:14px 26px; cursor:pointer; border:none; text-decoration:none;
  transition:transform .18s ease, box-shadow .25s ease, background .2s, border-color .2s;}
.btn svg{width:16px; height:16px; transition:transform .2s ease;}
.btn:hover svg{transform:translateX(3px);}
.btn-primary{background:var(--ink); color:#fff;}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 14px 34px rgba(10,21,45,.28);}
.btn-blue{background:var(--blue); color:#fff;}
.btn-blue:hover{transform:translateY(-2px); box-shadow:0 14px 34px rgba(47,107,255,.34);}
.btn-ghost{background:transparent; color:var(--ink); border:1.5px solid rgba(10,21,45,.2);}
.btn-ghost:hover{border-color:rgba(10,21,45,.5); background:rgba(10,21,45,.04);}

/* nav -------------------------------------------------------------------- */
.site-nav{position:sticky; top:0; z-index:60; color:var(--ink); background:rgba(255,255,255,.55);
  backdrop-filter:blur(22px) saturate(1.7); -webkit-backdrop-filter:blur(22px) saturate(1.7);
  border-bottom:1px solid transparent; box-shadow:none;
  transition:color .35s ease, background .35s ease, border-color .35s ease, box-shadow .35s ease;}
.site-nav.scrolled{background:rgba(255,255,255,.75); border-color:rgba(15,23,42,.1);
  box-shadow:0 8px 26px -14px rgba(10,21,45,.22), inset 0 1px 0 rgba(255,255,255,.6);}
/* glass adapts over dark sections: white text + white logo */
.site-nav.nav-dark{color:#fff; background:rgba(9,17,37,.32); border-bottom-color:transparent;
  box-shadow:none;}
.site-nav.nav-dark.scrolled{background:rgba(9,17,37,.46); border-bottom-color:rgba(255,255,255,.12);
  box-shadow:0 10px 30px -14px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.1);}
.nav{display:flex; align-items:center; justify-content:space-between; height:var(--nav-h);}
.nav-logo{height:26px; width:auto; display:block;}
.nav-brand{display:inline-flex; align-items:center; gap:11px; text-decoration:none;}
.logo-ar{display:none;}
html[lang="ar"] .logo-ar{display:inline-block; font-family:'Tajawal',sans-serif; font-weight:800; font-size:23px; line-height:1; letter-spacing:normal; color:#0C1428;}
.site-nav.nav-dark .logo-ar{color:#fff;}
.nav-logo--dark{display:none;}
.site-nav.nav-dark .nav-logo--light{display:none;}
.site-nav.nav-dark .nav-logo--dark{display:block;}
.nav-links{display:flex; align-items:center; gap:34px; list-style:none;}
.nav-links > li{position:relative;}
.nav-links > li > a{display:inline-flex; align-items:center; gap:5px; font-size:14.5px; font-weight:500; color:inherit; text-decoration:none; transition:color .18s; position:relative;}
.nav-links > li > a::after{content:""; position:absolute; inset-inline-start:0; inset-inline-end:0; bottom:-6px; height:2px; background:var(--blue); border-radius:2px;
  transform:scaleX(0); transform-origin:left; transition:transform .22s ease;}
.nav-links > li > a:hover{color:var(--blue);}
.nav-links > li > a:hover::after, .has-menu:focus-within > a::after{transform:scaleX(1);}

/* nav dropdowns (frosted glass, smooth) */
.nav-links > li > a .chev{width:13px; height:13px; margin-top:1px; opacity:.6; transition:transform .28s cubic-bezier(.22,.61,.36,1);}
.has-menu:hover > a .chev, .has-menu:focus-within > a .chev{transform:rotate(180deg); opacity:.9;}
.nav-dd{position:absolute; top:100%; left:-14px; padding-top:15px; opacity:0; transform:translateY(10px); pointer-events:none;
  transition:opacity .26s cubic-bezier(.22,.61,.36,1), transform .26s cubic-bezier(.22,.61,.36,1); z-index:200;}
.has-menu:hover .nav-dd, .has-menu:focus-within .nav-dd{opacity:1; transform:translateY(0); pointer-events:auto;}
.nav-dd-inner{background:#fff;
  border:1px solid var(--line); box-shadow:0 32px 74px -24px rgba(10,21,45,.44), inset 0 1px 0 rgba(255,255,255,.8);
  border-radius:18px; padding:14px;}
.nav-dd-svc{width:min(560px, 92vw);}
.nav-dd-about{width:min(306px, 90vw);}
.dd-head{display:flex; align-items:center; justify-content:space-between; padding:2px 10px 11px;}
.dd-eyebrow{font-family:'DM Sans', ui-monospace, monospace; font-size:10.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-2);}
.dd-all{display:inline-flex; align-items:center; gap:5px; font-size:12.5px; font-weight:600; color:var(--blue); text-decoration:none;}
.dd-all svg{width:13px; height:13px; transition:transform .2s;}
.dd-all:hover svg{transform:translateX(3px);}
.nav-dd-grid{display:grid; grid-template-columns:1fr 1fr; gap:2px;}
.dd-item{display:flex; gap:12px; align-items:flex-start; padding:11px 12px; border-radius:12px; text-decoration:none;}
.dd-item:hover{background:rgba(47,107,255,.09);}
.dd-ico{width:38px; height:38px; border-radius:10px; background:var(--soft-2); display:flex; align-items:center; justify-content:center; color:var(--blue); flex-shrink:0; transition:background .18s, color .18s;}
.dd-ico svg{width:19px; height:19px;}
.dd-item:hover .dd-ico{background:var(--blue); color:#fff;}
.dd-tx{display:flex; flex-direction:column;}
.dd-tx .t{font-size:14px; font-weight:600; color:var(--ink); line-height:1.2;}
.dd-tx .d{font-size:12px; color:var(--muted); margin-top:3px; line-height:1.35;}
.nav-right{display:flex; align-items:center; gap:20px;}
.lang-switch{position:relative;}
.lang-btn{width:44px; height:44px; border-radius:50%; border:1.5px solid var(--line-2); background:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--ink); transition:border-color .2s, box-shadow .2s, color .2s;}
.lang-btn:hover, .lang-btn[aria-expanded="true"]{border-color:#CFE0FF; color:var(--blue); box-shadow:0 4px 14px rgba(47,107,255,.14);}
.site-nav.nav-dark .lang-btn{border-color:rgba(255,255,255,.28); background:rgba(255,255,255,.08); color:#fff;}
.site-nav.nav-dark .lang-btn:hover, .site-nav.nav-dark .lang-btn[aria-expanded="true"]{border-color:rgba(255,255,255,.55); color:#fff; background:rgba(255,255,255,.16); box-shadow:none;}
.lang-btn svg{width:20px; height:20px;}
.lang-menu{position:absolute; top:calc(100% + 14px); inset-inline-end:0; width:290px; background:#fff; border:1px solid var(--line); border-radius:20px; box-shadow:0 24px 54px -14px rgba(15,23,42,.24); padding:10px; opacity:0; transform:translateY(-8px) scale(.98); transform-origin:top var(--lang-origin,right); pointer-events:none; visibility:hidden; transition:opacity .2s ease, transform .2s ease, visibility .2s; z-index:80;}
.lang-menu.open{opacity:1; transform:none; pointer-events:auto; visibility:visible;}
html[dir="rtl"] .lang-menu{--lang-origin:left;}
.lang-opt{display:flex; align-items:center; justify-content:space-between; width:100%; padding:13px 18px; border:none; background:transparent; border-radius:12px; cursor:pointer; font-family:inherit; transition:background .16s;}
.lang-opt + .lang-opt{margin-top:2px;}
.lang-opt:hover{background:var(--soft);}
.lang-opt .l-name{font-size:16.5px; font-weight:600; color:var(--ink);}
.lang-opt .l-code{font-size:13.5px; font-weight:700; color:var(--muted-2); letter-spacing:.03em;}
.lang-opt.active{background:rgba(47,107,255,.10);}
.lang-opt.active .l-name{color:var(--blue);}
.lang-opt.active .l-code{color:var(--muted);}
.lang-opt.is-ar{direction:rtl;}
.nav-toggle{display:none; width:44px; height:44px; border:none; background:transparent; cursor:pointer; align-items:center; justify-content:center;}
.nav-toggle svg{width:26px; height:26px; color:var(--ink); transition:color .35s ease;}
.site-nav.nav-dark .nav-toggle svg{color:#fff;}

/* mobile menu drawer (icon-pill rail) */
body.m-lock{overflow:hidden;}
.m-scrim{position:fixed; inset:0; z-index:65; background:rgba(4,10,24,.5); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); opacity:0; pointer-events:none; transition:opacity .32s ease;}
.m-scrim.open{opacity:1; pointer-events:auto;}
.m-menu{position:fixed; top:0; left:0; bottom:0; z-index:70; width:min(84vw,340px); display:flex; flex-direction:column;
  padding:calc(var(--nav-safe,22px) + 12px) 15px calc(18px + env(safe-area-inset-bottom)); overflow-y:auto; -webkit-overflow-scrolling:touch;
  background:radial-gradient(130% 85% at 0% 0%, #1a305f 0%, #0A152D 52%, #060d1c 100%);
  border-radius:0 26px 26px 0; box-shadow:26px 0 64px -20px rgba(0,0,0,.65);
  transform:translateX(-102%); pointer-events:none; transition:transform .44s cubic-bezier(.32,.72,0,1);}
.m-menu.open{transform:none; pointer-events:auto;}
.m-top{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 4px 20px;}
.m-top .m-logo{height:25px; width:auto; display:block;}
.m-close{width:37px; height:37px; flex:none; border:0; border-radius:50%; cursor:pointer; display:grid; place-items:center;
  background:rgba(255,255,255,.12); color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.16); transition:background .2s;}
.m-close:hover{background:rgba(255,255,255,.2);}
.m-close svg{width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;}
.m-nav{display:flex; flex-direction:column; gap:8px;}
.m-item{display:flex; align-items:center; gap:12px; padding:8px 18px 8px 8px; border-radius:999px; text-decoration:none;
  background:rgba(255,255,255,.07); box-shadow:inset 0 0 0 1px rgba(255,255,255,.1); color:#fff;
  font-size:15.5px; font-weight:600; letter-spacing:-.01em; opacity:0; transform:translateX(-16px);
  transition:background .2s, color .2s, box-shadow .2s;}
.m-menu.open .m-item{animation:mItemIn .52s cubic-bezier(.32,.72,0,1) forwards;}
.m-menu.open .m-item:nth-child(1){animation-delay:.06s}
.m-menu.open .m-item:nth-child(2){animation-delay:.11s}
.m-menu.open .m-item:nth-child(3){animation-delay:.16s}
.m-menu.open .m-item:nth-child(4){animation-delay:.21s}
.m-menu.open .m-item:nth-child(5){animation-delay:.26s}
.m-menu.open .m-item:nth-child(6){animation-delay:.31s}
.m-menu.open .m-item:nth-child(7){animation-delay:.36s}
.m-menu.open .m-item:nth-child(8){animation-delay:.41s}
@keyframes mItemIn{to{opacity:1; transform:none;}}
.m-ico{flex:none; width:37px; height:37px; border-radius:12px; display:grid; place-items:center;
  background:rgba(255,255,255,.13); box-shadow:inset 0 0 0 1px rgba(255,255,255,.16); transition:background .2s, box-shadow .2s;}
.m-ico svg{width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round;}
.m-item:hover,.m-item.active{background:#fff; color:var(--ink); box-shadow:0 10px 22px -12px rgba(0,0,0,.6);}
.m-item:hover .m-ico,.m-item.active .m-ico{background:rgba(10,21,45,.07); box-shadow:inset 0 0 0 1px rgba(10,21,45,.12);}
.m-cta{margin-top:22px; width:100%; justify-content:center;}
.lang-opt{text-decoration:none;}
@media (prefers-reduced-motion:reduce){.m-menu{transition:none}.m-menu.open .m-item{animation-duration:.01s}}

/* client logo row -------------------------------------------------------- */
.clabel{font-size:12.5px; font-weight:600; letter-spacing:.04em; color:var(--muted-2); text-align:center;}
.clogos{display:flex; align-items:center; justify-content:center; gap:46px; flex-wrap:wrap;}
.clogos img{height:26px; width:auto; object-fit:contain; filter:grayscale(1) opacity(.6); transition:filter .25s;}
.clogos img:hover{filter:grayscale(0) opacity(1);}

/* ── HERO (dark client constellation, mouse-parallax) ───────────────────── */
.hero{position:relative; overflow:hidden; display:flex; align-items:center;
  margin-top:calc(-1 * var(--nav-h)); padding-top:var(--nav-h);
  background:radial-gradient(120% 108% at 80% 42%, #12244a 0%, #0A152D 44%, #06101f 100%);
  min-height:min(calc(816px + var(--nav-h)), 100vh);}
.hero-glow{position:absolute; z-index:0; top:50%; right:0; width:64vw; height:64vw; transform:translateY(-50%);
  background:radial-gradient(circle, rgba(47,107,255,.22) 0%, rgba(47,107,255,.07) 34%, transparent 66%); pointer-events:none;}
.hero-inner{position:relative; z-index:3; width:100%;
  display:grid; grid-template-columns:1fr 1.05fr; align-items:center; gap:44px;
  padding-top:52px; padding-bottom:64px;}
.hero-copy{max-width:820px;}
.hero-eyebrow{display:inline-flex; align-items:center; gap:9px; font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--blue-light);}
.hero-eyebrow .dot{width:7px; height:7px; border-radius:50%; background:var(--blue); box-shadow:0 0 0 4px rgba(47,107,255,.18);}
.hero-h1{font-size:clamp(46px,6.6vw,84px); font-weight:800; letter-spacing:-.025em; line-height:1.02; color:#F4F7FC; max-width:none; margin-top:20px;}
.hero-h1 .grad-text{background:linear-gradient(92deg,#8FBAFF 0%,#3F7BFF 62%,#2F6BFF 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;}
.rot-word{white-space:nowrap; display:inline-block; will-change:opacity, filter, transform; transition:opacity .5s ease, filter .5s ease, transform .5s ease;}
.rot-word.rot-out{opacity:0; filter:blur(7px); transform:translateY(-6px) scale(.97);}
@media (prefers-reduced-motion: reduce){
  .rot-word{transition:opacity .45s ease;}
  .rot-word.rot-out{opacity:0; filter:none; transform:none;}
}
.hero-sub{color:rgba(224,231,242,.72); font-size:clamp(15px,1.2vw,17px); line-height:1.6; max-width:47ch; margin-top:24px;}
.hero-cta{display:flex; gap:14px; margin-top:38px; flex-wrap:wrap;}

/* hero pill buttons with trailing arrow badge */
.hbtn{display:inline-flex; align-items:center; gap:12px; font-family:'Inter',sans-serif; font-size:15px; font-weight:600;
  border-radius:999px; padding:7px 7px 7px 24px; text-decoration:none; cursor:pointer; border:1.5px solid transparent;
  transition:transform .18s ease, box-shadow .25s ease, background .2s, border-color .2s;}
.hbtn-badge{display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; flex-shrink:0; transition:transform .2s ease;}
.hbtn-badge svg{width:16px; height:16px;}
.hbtn:hover .hbtn-badge{transform:translateX(3px);}
.hbtn-primary{background:var(--blue); color:#fff; box-shadow:0 12px 30px -10px rgba(47,107,255,.6);}
.hbtn-primary .hbtn-badge{background:rgba(255,255,255,.22); color:#fff;}
.hbtn-primary:hover{transform:translateY(-2px); box-shadow:0 18px 42px -10px rgba(47,107,255,.72);}
.hbtn-ghost{background:rgba(255,255,255,.05); color:#EAF0FA; border-color:rgba(255,255,255,.22);}
.hbtn-ghost .hbtn-badge{background:rgba(255,255,255,.12); color:#EAF0FA;}
.hbtn-ghost:hover{transform:translateY(-2px); border-color:rgba(255,255,255,.42); background:rgba(255,255,255,.09);}

/* client sphere (3D tag-cloud) */
.hero-cons{position:relative; width:100%; height:min(580px, 66vh); align-self:center; --sph:1; cursor:grab; user-select:none; -webkit-user-select:none;}
.hero-cons.grabbing{cursor:grabbing;}
.hero-cons.grabbing .node{cursor:grabbing;}
.cons-rings{position:absolute; inset:0; width:100%; height:100%; z-index:0; overflow:visible; pointer-events:none;}
.cons-rings .ring{fill:none; stroke:rgba(127,178,255,.16); stroke-width:1; stroke-dasharray:2 7;}
.cons-rings .rdot{fill:#5BA3FF; opacity:.85;}
@media (prefers-reduced-motion: no-preference){
  .cons-rings{transform-origin:50% 50%; animation:consRingsSpin 120s linear infinite;}
  @keyframes consRingsSpin{to{transform:rotate(360deg);}}
}
.sphere{position:absolute; inset:0; z-index:1;}
.node{position:absolute; inset-inline-start:50%; top:50%; padding:0; margin:0; border:0; background:none; cursor:grab;
  translate:-50% -50%; transform-origin:center center; will-change:transform, opacity;
  -webkit-tap-highlight-color:transparent; outline:none;}
.node img{display:block; width:calc(var(--w,100px) * var(--sph)); height:auto; pointer-events:none; user-select:none; -webkit-user-drag:none;
  filter:drop-shadow(0 6px 16px rgba(0,0,0,.5)); transition:filter .25s ease;}
.node:hover img, .node:focus-visible img{filter:drop-shadow(0 12px 28px rgba(47,107,255,.6));}
.node:focus-visible{outline:2px solid rgba(127,178,255,.75); outline-offset:6px; border-radius:8px;}

/* trusted-by strip under the hero */
.trusted{background:var(--bg); border-bottom:1px solid var(--line); padding:34px 0;}
.trusted .clabel{margin-bottom:20px;}

/* hero responsive: stack, shrink the sphere */
@media (max-width:980px){
  .hero{min-height:auto;}
  .hero-inner{grid-template-columns:1fr; gap:22px; padding-bottom:48px;}
  /* flatten copy so the constellation can sit between the H1 and the subtext */
  .hero-copy{max-width:none; display:contents;}
  .hero-inner{text-align:center; justify-items:center;}
  .hero-eyebrow{order:1;}
  .hero-h1{order:2;}
  .hero-cons{order:4; height:400px; --sph:.72;}
  .hero-sub{order:3; margin-top:0; margin-inline-start:auto; margin-inline-end:auto;}
  .hero-cta{order:5; margin-top:10px; justify-content:center; width:100%;}
}
@media (max-width:560px){
  .hero-cons{height:300px; --sph:.56;}
}

/* ── SERVICES ──────────────────────────────────────────────────────────── */
.services{padding:92px 0;}
.head{text-align:center; margin-bottom:52px; display:flex; flex-direction:column; align-items:center;}
.sec-title{font-size:clamp(30px,4.4vw,40px); font-weight:800;}
.sec-sub{color:var(--muted); font-size:17px; line-height:1.6; max-width:52ch; margin-top:14px;}
.svc-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; perspective:900px;}
.svc-card{position:relative; background:#fff; border:1px solid transparent; border-radius:16px; padding:28px 24px;
  text-decoration:none; color:inherit; display:block; transform-style:preserve-3d; will-change:transform;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--lift,0px)) scale(var(--sc,1));
  transition:transform .45s cubic-bezier(.22,.61,.36,1), box-shadow .45s ease;
  box-shadow:0 2px 8px rgba(15,23,42,.05), 0 16px 36px -16px rgba(15,23,42,.14);}
.svc-card.tilting{transition:transform .1s ease, box-shadow .3s ease;}
.svc-card:hover{--lift:-6px; --sc:1.03;
  box-shadow:0 10px 24px -14px rgba(30,58,138,.30), 0 40px 70px -26px rgba(30,58,138,.34);}
/* moving light glare */
.svc-card .glare{position:absolute; inset:0; border-radius:16px; pointer-events:none; opacity:0; z-index:4;
  transition:opacity .3s ease; transform:translateZ(70px);
  background:radial-gradient(300px circle at var(--gx,50%) var(--gy,0%), rgba(120,160,255,.20), rgba(120,160,255,0) 50%);}
.svc-card:hover .glare{opacity:1;}
/* parallax depth layers */
.svc-ico{width:52px; height:52px; border-radius:13px; background:var(--soft-2); display:flex; align-items:center; justify-content:center; margin-bottom:20px; color:var(--blue);
  transform:translateZ(var(--z-ico,0px)); transition:background .25s, transform .45s cubic-bezier(.22,.61,.36,1), box-shadow .3s;}
.svc-card:hover .svc-ico{--z-ico:58px; background:var(--blue); color:#fff; box-shadow:0 18px 30px -10px rgba(47,107,255,.6);}
.svc-ico svg{width:26px; height:26px;}
.svc-card h3{font-size:20px; font-weight:700; margin-bottom:9px; transform:translateZ(var(--z-h,0px)); transition:transform .45s cubic-bezier(.22,.61,.36,1);}
.svc-card:hover h3{--z-h:34px;}
.svc-card p{color:var(--muted); font-size:14.5px; line-height:1.55; transform:translateZ(var(--z-p,0px)); transition:transform .45s cubic-bezier(.22,.61,.36,1);}
.svc-card:hover p{--z-p:20px;}
.svc-card .more{display:inline-flex; align-items:center; gap:6px; margin-top:16px; font-size:13.5px; font-weight:600; color:var(--blue); opacity:0; transform:translateX(-4px); transition:opacity .25s, transform .45s cubic-bezier(.22,.61,.36,1);}
.svc-card .more svg{width:14px; height:14px;}
.svc-card:hover .more{opacity:1; transform:translateZ(44px);}
.more2{display:flex; justify-content:center; gap:44px; margin-top:36px; flex-wrap:wrap;}
.more2 span{font-size:14.5px; color:var(--muted); display:flex; align-items:center; gap:9px;}
.more2 b{color:var(--ink); font-weight:600;}

/* ── HERITAGE (broadcast-craft stats, from old site) ────────────────────────────────────────────────────────── */
.heritage{background:var(--soft); padding:100px 0 96px;}
.heritage-label{display:flex; align-items:center; gap:16px; margin-bottom:44px;}
.heritage-label span{font-size:11.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-2); white-space:nowrap;}
.heritage-label .rule{flex:1; height:1px; background:var(--line);}
.heritage-h2{font-size:clamp(40px,5vw,64px); font-weight:800; color:var(--ink); line-height:1.03; letter-spacing:-.03em; max-width:12ch; margin-bottom:58px;}
.hstats{display:grid; grid-template-columns:repeat(6,1fr); gap:0; border-radius:20px; overflow:hidden; border:1px solid var(--line); background:#fff;}
.hstat{padding:38px 20px; text-align:center; position:relative; z-index:1; cursor:default;
  border-inline-end:1px solid rgba(226,228,233,.55);
  transition:transform .3s ease, background .3s ease, border-radius .3s ease;}
.hstat:last-child{border-inline-end:none;}
.hstat .hnum{font-family:'DM Sans',sans-serif; font-size:clamp(32px,3.4vw,48px); font-weight:800; color:var(--ink); line-height:1; letter-spacing:-.02em; transition:color .3s ease;}
.hstat .hlabel{font-size:13px; font-weight:600; color:#374151; margin-top:10px; line-height:1.3; transition:color .3s ease;}
.hstat .hsub{font-size:11.5px; color:var(--muted-2); margin-top:5px; transition:color .3s ease;}
.hstat:hover{transform:scale(1.08); border-radius:16px; z-index:2;
  background:linear-gradient(140deg,#2F6BFF 0%,#3B7BFF 48%,#5BA3FF 100%);}
.hstat:hover .hnum{color:#fff;}
.hstat:hover .hlabel{color:rgba(255,255,255,.95);}
.hstat:hover .hsub{color:rgba(255,255,255,.72);}

/* ── WORK ──────────────────────────────────────────────────────────────── */
.work{padding:92px 0; background:radial-gradient(1100px 520px at 50% -40px, rgba(47,107,255,.16), rgba(9,10,15,0) 60%), #090A0F;}
.work .sec-title{color:#F4F7FC; font-size:clamp(34px,4.8vw,56px); letter-spacing:-.022em; line-height:1.06;}
.work-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:26px;}
.wc{border:1px solid var(--line); border-radius:16px; overflow:hidden; text-decoration:none; color:inherit; display:block; cursor:pointer; background:#fff;
  transition:transform .2s, box-shadow .2s;}
.wc:hover{transform:translateY(-4px); box-shadow:var(--shadow-md);}
.wc:focus-visible{outline:2px solid var(--blue); outline-offset:3px;}
.wc-media{position:relative; height:176px; background:#0B0C0F; overflow:hidden;}
.wc-media image-slot{display:block; width:100%; height:100%; color:rgba(255,255,255,.5) !important;}
.wc-media::after{content:""; position:absolute; inset:0; pointer-events:none; z-index:2; background:linear-gradient(180deg,rgba(11,12,15,.5) 0%,rgba(11,12,15,0) 34%,rgba(11,12,15,0) 58%,rgba(11,12,15,.8) 100%);}
.wc-flag{position:absolute; top:14px; inset-inline-start:14px; z-index:3; font-size:10.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:#fff; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); padding:5px 11px; border-radius:999px;}
.wc-body{padding:22px 22px 26px;}
.wc .metric{font-family:'DM Sans',sans-serif; font-weight:800; font-size:34px; letter-spacing:-.03em;}
.wc h3{font-size:18px; font-weight:700; margin:4px 0 8px; color:var(--ink);}
.wc p{color:var(--muted); font-size:14px; line-height:1.5;}

/* ── CTA BAND ──────────────────────────────────────────────────────────── */
.band{background:var(--soft); padding:80px 0; text-align:center;}
.band h2{font-size:clamp(30px,4.6vw,42px); font-weight:800;}
.band p{color:var(--muted); font-size:18px; margin:16px auto 30px; max-width:50ch;}

/* ── FOOTER ────────────────────────────────────────────────────────────── */
.ft{background:var(--ink); color:#fff; padding:74px 0 40px;}
.ft .wrap{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px;}
.ft-brand{display:flex; align-items:center; gap:11px; margin-bottom:16px;}
.ft-brand .mark{width:30px; height:30px;}
.ft-brand .name{font-family:'DM Sans',sans-serif; font-weight:800; font-size:20px; color:#fff; letter-spacing:-.02em;}
.ft-col p{color:rgba(255,255,255,.6); font-size:14px; line-height:1.65; max-width:34ch;}
.ft h5{font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.5); margin-bottom:16px;}
.ft ul{list-style:none; display:flex; flex-direction:column; gap:11px;}
.ft ul a{color:rgba(255,255,255,.78); font-size:14px; text-decoration:none; transition:color .18s;}
.ft ul a:hover{color:#fff;}
.ft-bar{border-top:1px solid rgba(255,255,255,.1); margin-top:56px; padding-top:26px;}
.ft-bar .wrap{display:flex; justify-content:space-between; align-items:center;}
.ft-bar span{color:rgba(255,255,255,.5); font-size:13px;}

/* ── scroll reveal (progressive; visible without JS / reduced motion) ───── */
@media (prefers-reduced-motion: no-preference){
  .js-anim .reveal{opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);}
  .js-anim .reveal.in{opacity:1; transform:none;}
  /* opacity-only entrance for elements that own their transform (e.g. 3D-tilt cards) */
  .js-anim .reveal-fade{opacity:0; transition:opacity .7s cubic-bezier(.22,.61,.36,1);}
  .js-anim .reveal-fade.in{opacity:1;}
  .js-anim .reveal-d1{transition-delay:.07s;}
  .js-anim .reveal-d2{transition-delay:.14s;}
  .js-anim .reveal-d3{transition-delay:.21s;}
}

/* ── responsive ─────────────────────────────────────────────────────────── */
@media (max-width:1080px){
  :root{--pad:40px;}
  .svc-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:820px){
  /* clear the notch / Dynamic Island */
  :root{--nav-safe:max(36px, env(safe-area-inset-top)); --nav-h:calc(70px + var(--nav-safe));}
  .site-nav{padding-top:var(--nav-safe);}
  .nav{height:70px;}
  .nav-links, .nav-right .btn{display:none;}
  .nav-right{gap:8px;}
  .lang-btn{width:42px; height:42px;}
  /* pin to the viewport so it can't run off either edge (LTR opens left, RTL right) */
  .lang-menu{position:fixed; top:calc(var(--nav-h) + 8px); inset-inline-end:16px; inset-inline-start:auto; width:min(276px, calc(100vw - 32px));}
  .nav-toggle{display:flex;}
  .work-grid{grid-template-columns:1fr;}
  .hstats{grid-template-columns:repeat(3,1fr);}
  .hstat:nth-child(3n){border-inline-end:none;}
  .hstat:nth-child(-n+3){border-bottom:1px solid rgba(226,228,233,.55);}
  .ft .wrap{grid-template-columns:1fr 1fr; gap:34px;}
  .ft-col.brand{grid-column:1 / -1;}
  .more2{gap:14px 30px;}
}
@media (max-width:560px){
  :root{--pad:22px;}
  .hero-inner{padding-top:38px; padding-bottom:40px;}
  .hero-cons{height:270px;}
  .services, .work{padding:64px 0;}
  .svc-grid{grid-template-columns:1fr;}
  .heritage{padding:64px 0 60px;}
  .hstats{grid-template-columns:repeat(2,1fr);}
  .hstat{border-inline-end:none; border-bottom:1px solid rgba(226,228,233,.55);}
  .hstat:nth-child(2n+1){border-inline-end:1px solid rgba(226,228,233,.55);}
  .hstat:nth-child(n+5){border-bottom:none;}
  .clogos{gap:30px 34px;}
  .hero-cta{flex-direction:column; align-items:stretch;}
  .hero-cta .hbtn{justify-content:space-between; text-align:start;}
  /* slide-to-activate: knob on the left, label centred in the remaining track */
  .hero-cta .hbtn{position:relative; flex-direction:row-reverse; gap:0; padding:8px; min-height:60px; touch-action:pan-y; -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent; overflow:hidden;}
  .hero-cta .hbtn .hbtn-label{flex:1; text-align:center; padding:0 10px 0 4px; font-size:15px; pointer-events:none;}
  .hero-cta .hbtn .hbtn-badge{width:44px; height:44px; will-change:transform; z-index:2; -webkit-user-drag:none;}
  .hero-cta .hbtn{-webkit-user-drag:none;}
  .hero-cta .hbtn .hbtn-badge svg{animation:hbtnNudge 1.9s ease-in-out .8s infinite;}
  .hero-cta .hbtn.hbtn-dragging .hbtn-badge svg,.hero-cta .hbtn.hbtn-done .hbtn-badge svg{animation:none;}
  @keyframes hbtnNudge{0%,62%,100%{transform:translateX(0)}75%{transform:translateX(3.5px)}88%{transform:translateX(0)}}
  .hero-cta .hbtn:hover .hbtn-badge{transform:none;}
  .hero-cta .hbtn.hbtn-dragging{transform:none;}
  .hero-cta .hbtn-primary .hbtn-badge{background:rgba(255,255,255,.9); color:var(--blue);}
  .hero-cta .hbtn-ghost .hbtn-badge{background:rgba(255,255,255,.16); color:#EAF0FA;}
  .hero-cta .hbtn.hbtn-done .hbtn-label{opacity:.15;}
  .ft .wrap{grid-template-columns:1fr;}
  .ft-bar .wrap{flex-direction:column; gap:8px; text-align:center;}
}

/* ── Arabic · RTL + Tajawal ─────────────────────────────────────────────── */
html[lang="ar"]{direction:rtl;}
html[lang="ar"] body{font-family:'Tajawal',system-ui,sans-serif;}
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3,html[lang="ar"] h4,html[lang="ar"] .hero-h1,html[lang="ar"] .sec-title{font-family:'Tajawal',system-ui,sans-serif; letter-spacing:normal;}
html[lang="ar"] .hero-h1{line-height:1.18;}
html[lang="ar"] .hero-eyebrow,html[lang="ar"] .eyebrow{letter-spacing:normal;}
html[lang="ar"] .hero-cons{direction:ltr;} /* keep constellation geometry LTR */


/* ── RTL, mirror directional icons and arrows ───────────────────────────────
   Layout mirrors on its own (logical properties). Arrows point at the reading
   direction, so they need flipping. Add new arrow classes to this list.      */
[dir="rtl"] .btn svg,[dir="rtl"] .btn-lg svg,[dir="rtl"] .hbtn svg,[dir="rtl"] .more-link svg,[dir="rtl"] .cap-more svg,[dir="rtl"] .svc-faq-link svg,[dir="rtl"] .dd-all svg,[dir="rtl"] .fcase-btn svg,[dir="rtl"] .poster-hint svg,[dir="rtl"] .lead-submit svg,[dir="rtl"] .featured-link svg,[dir="rtl"] .fcase-arrow svg,[dir="rtl"] .cg-apply svg{transform:scaleX(-1)}
[dir="rtl"] .more-card:hover .more-link svg{transform:scaleX(-1) translateX(3px)}
[dir="rtl"] .chev{transform:none}