/* ═══════════════════════════════════════════════════════════
   DATA UNIVERSE — single page site
   Palette pulled straight from the logo: cyan → electric blue
   on deep-space charcoal.
   ═══════════════════════════════════════════════════════════ */

/* ---------- 1. TOKENS ---------- */
:root{
  --bg:        #05070e;
  --bg-soft:   #080b16;
  --surface:   rgba(255,255,255,.035);
  --surface-2: rgba(255,255,255,.06);
  --line:      rgba(255,255,255,.09);
  --line-hi:   rgba(120,190,255,.34);

  --ink:       #e9eefb;
  --ink-dim:   #b9c6e0;
  --mute:      #8093b5;

  --cyan:      #3ad9ff;
  --cyan-soft: #7ee8ff;
  --blue:      #1f6dff;
  --deep:      #0a2fb0;
  --wa:        #25d366;
  --wa-dark:   #0f9f4a;

  --grad:      linear-gradient(115deg, var(--cyan-soft) 0%, var(--cyan) 26%, var(--blue) 70%, var(--deep) 100%);
  --grad-soft: linear-gradient(115deg, rgba(58,217,255,.16), rgba(31,109,255,.16));

  --r-sm: 12px;
  --r:    18px;
  --r-lg: 26px;
  --r-xl: 34px;

  --shadow:    0 24px 70px -24px rgba(0,0,0,.85);
  --glow-cyan: 0 0 0 1px rgba(58,217,255,.28), 0 18px 50px -14px rgba(31,109,255,.55);

  --pad: clamp(1.15rem, 4.4vw, 3.25rem);
  --sec-y: clamp(4.5rem, 11vw, 9rem);
  --ease: cubic-bezier(.22,.68,.32,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  --font-ar: 'Tajawal', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-en: 'Outfit', 'Tajawal', system-ui, sans-serif;
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }

html{
  scroll-behavior:smooth;
  scroll-padding-top:96px;
  -webkit-text-size-adjust:100%;
}

body{
  font-family:var(--font-ar);
  background:var(--bg);
  color:var(--ink);
  line-height:1.75;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.is-locked{ overflow:hidden }

img,svg{ display:block; max-width:100% }
a{ color:inherit; text-decoration:none }
ul{ list-style:none }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }
::selection{ background:rgba(58,217,255,.3); color:#fff }

/* nicer scrollbar */
::-webkit-scrollbar{ width:10px }
::-webkit-scrollbar-track{ background:#04050a }
::-webkit-scrollbar-thumb{ background:linear-gradient(var(--cyan),var(--blue)); border-radius:99px; border:2px solid #04050a }

.wrap{ width:min(1240px, 100%); margin-inline:auto; padding-inline:var(--pad) }

/* icons */
.ico{ width:1.15em; height:1.15em; fill:none; stroke:currentColor; stroke-width:1.9;
      stroke-linecap:round; stroke-linejoin:round; flex:none }
.ico--fill{ fill:currentColor; stroke:none }

/* ---------- 3. PRELOADER ---------- */
.preloader{
  position:fixed; inset:0; z-index:999;
  display:none; place-content:center; justify-items:center; gap:1.6rem;
  background:radial-gradient(ellipse at 50% 45%, #0b1226 0%, #05070e 62%);
  transition:opacity .7s var(--ease), visibility .7s;
}
.js .preloader{ display:grid }
.preloader.done{ opacity:0; visibility:hidden }

.preloader__core{ position:relative; width:150px; height:150px; display:grid; place-items:center }
.preloader__mark{ width:60px; filter:drop-shadow(0 0 20px rgba(58,217,255,.75)); animation:pulse 2.1s var(--ease) infinite }
.preloader__ring{
  position:absolute; inset:0; border-radius:50%;
  border:1.5px solid transparent;
  border-top-color:var(--cyan); border-inline-end-color:rgba(31,109,255,.55);
  animation:spin 1.5s linear infinite;
}
.preloader__ring:nth-child(2){ inset:16px; border-top-color:var(--blue); border-inline-end-color:transparent; animation-duration:2.2s; animation-direction:reverse }
.preloader__ring:nth-child(3){ inset:32px; border-top-color:rgba(126,232,255,.6); animation-duration:3s }

.preloader__bar{ width:170px; height:2px; background:rgba(255,255,255,.1); border-radius:99px; overflow:hidden }
.preloader__bar span{ display:block; height:100%; width:0; background:var(--grad); border-radius:99px; transition:width .3s var(--ease) }
.preloader__txt{ font-size:.82rem; letter-spacing:.08em; color:var(--mute) }

@keyframes spin{ to{ transform:rotate(360deg) } }
@keyframes pulse{ 0%,100%{ transform:scale(1); opacity:.92 } 50%{ transform:scale(1.1); opacity:1 } }

/* ---------- 4. AMBIENT BACKGROUND ---------- */
.scroll-progress{
  position:fixed; inset-block-start:0; inset-inline-start:0; z-index:120;
  height:3px; width:0; background:var(--grad);
  box-shadow:0 0 14px rgba(58,217,255,.8);
}

.starfield{ position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.85 }

.nebula{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; filter:blur(90px) }
.nebula__blob{ position:absolute; display:block; border-radius:50%; opacity:.5 }
.nebula__blob--1{ width:52vw; height:52vw; background:radial-gradient(circle,rgba(31,109,255,.55),transparent 68%);
  inset-block-start:-12vw; inset-inline-end:-10vw; animation:drift1 26s ease-in-out infinite }
.nebula__blob--2{ width:46vw; height:46vw; background:radial-gradient(circle,rgba(58,217,255,.36),transparent 68%);
  inset-block-start:48%; inset-inline-start:-14vw; animation:drift2 32s ease-in-out infinite }
.nebula__blob--3{ width:40vw; height:40vw; background:radial-gradient(circle,rgba(10,47,176,.55),transparent 70%);
  inset-block-end:-14vw; inset-inline-end:14vw; animation:drift3 38s ease-in-out infinite }

@keyframes drift1{ 50%{ transform:translate3d(-7vw,9vh,0) scale(1.16) } }
@keyframes drift2{ 50%{ transform:translate3d(9vw,-11vh,0) scale(1.22) } }
@keyframes drift3{ 50%{ transform:translate3d(-6vw,-7vh,0) scale(1.12) } }

.grid-overlay{
  position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.42;
  background-image:
    linear-gradient(rgba(120,180,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,180,255,.07) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 90% 62% at 50% 32%, #000 12%, transparent 74%);
          mask-image:radial-gradient(ellipse 90% 62% at 50% 32%, #000 12%, transparent 74%);
}

main, .footer, .nav, .callbar{ position:relative; z-index:2 }

/* ---------- 5. CUSTOM CURSOR ---------- */
.cursor{ position:fixed; inset-block-start:0; inset-inline-start:0; z-index:900; pointer-events:none; opacity:0; transition:opacity .3s }
.cursor.on{ opacity:1 }
.cursor__dot,.cursor__ring{ position:absolute; border-radius:50%; transform:translate(-50%,-50%) }
.cursor__dot{ width:6px; height:6px; background:var(--cyan); box-shadow:0 0 12px var(--cyan) }
.cursor__ring{ width:34px; height:34px; border:1.5px solid rgba(58,217,255,.45); transition:width .28s var(--ease), height .28s var(--ease), background .28s }
.cursor.hot .cursor__ring{ width:58px; height:58px; background:rgba(58,217,255,.09); border-color:rgba(58,217,255,.75) }
@media (hover:none),(max-width:900px){ .cursor{ display:none } }

/* ---------- 6. BUTTONS ---------- */
.btn{
  --btn-bg:var(--surface-2);
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.92rem 1.7rem; border-radius:99px;
  font-weight:700; font-size:.98rem; line-height:1; white-space:nowrap;
  background:var(--btn-bg); border:1px solid var(--line);
  overflow:hidden; isolation:isolate;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s, color .3s;
  will-change:transform;
}
.btn:hover{ transform:translateY(-3px) }
.btn:active{ transform:translateY(-1px) scale(.98) }
.btn:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px }

/* sheen sweep */
.btn::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(100deg, transparent 32%, rgba(255,255,255,.4) 50%, transparent 68%);
  transform:translateX(-130%); transition:transform .75s var(--ease);
}
.btn:hover::after{ transform:translateX(130%) }

.btn--primary{ --btn-bg:var(--grad); color:#02060f; border-color:transparent; box-shadow:var(--glow-cyan) }
.btn--primary:hover{ box-shadow:0 0 0 1px rgba(58,217,255,.45), 0 26px 62px -16px rgba(31,109,255,.8) }

.btn--wa{ --btn-bg:linear-gradient(140deg, var(--wa), var(--wa-dark)); color:#04170c; border-color:transparent;
  box-shadow:0 0 0 1px rgba(37,211,102,.3), 0 18px 48px -16px rgba(37,211,102,.6) }
.btn--wa:hover{ box-shadow:0 0 0 1px rgba(37,211,102,.5), 0 26px 60px -16px rgba(37,211,102,.85) }

.btn--ghost{ color:var(--ink) }
.btn--ghost:hover{ border-color:var(--line-hi); background:rgba(58,217,255,.07) }

.btn--sm{ padding:.68rem 1.2rem; font-size:.88rem }
.btn--lg{ padding:1.12rem 2.1rem; font-size:1.04rem }
.btn--block{ width:100%; }

/* ---------- 7. NAV ---------- */
.nav{ position:fixed; inset-block-start:0; inset-inline:0; z-index:110; transition:background .4s var(--ease), border-color .4s, backdrop-filter .4s }
.nav::after{ content:''; position:absolute; inset-block-end:0; inset-inline:0; height:1px; background:var(--line); opacity:0; transition:opacity .4s }
.nav.stuck{ background:rgba(5,7,14,.72); -webkit-backdrop-filter:blur(20px) saturate(160%); backdrop-filter:blur(20px) saturate(160%) }
.nav.stuck::after{ opacity:1 }

.nav__inner{
  width:min(1240px,100%); margin-inline:auto; padding:.85rem var(--pad);
  display:flex; align-items:center; gap:1.5rem;
}
.nav__brand{ flex:none; display:block }
.nav__brand img{ height:36px; width:auto; transition:filter .35s var(--ease), transform .35s var(--ease) }
.nav__brand:hover img{ filter:drop-shadow(0 0 18px rgba(58,217,255,.55)); transform:scale(1.03) }

.nav__links{ display:flex; gap:.35rem; margin-inline-start:auto }
.nav__links a{
  position:relative; padding:.5rem .85rem; border-radius:99px;
  font-size:.94rem; font-weight:500; color:var(--ink-dim);
  transition:color .28s, background .28s;
}
.nav__links a::before{
  content:''; position:absolute; inset-block-end:.18rem; inset-inline-start:50%;
  width:0; height:2px; border-radius:2px; background:var(--grad);
  transform:translateX(50%); transition:width .32s var(--ease);
}
.nav__links a:hover, .nav__links a.active{ color:#fff }
.nav__links a:hover::before, .nav__links a.active::before{ width:46% }

.nav__actions{ display:flex; align-items:center; gap:.7rem; flex:none }

.burger{ display:none; width:44px; height:44px; border-radius:12px; border:1px solid var(--line);
  background:var(--surface); place-content:center; gap:5px }
.burger span{ display:block; width:19px; height:2px; border-radius:2px; background:var(--ink); transition:transform .35s var(--ease), opacity .25s }
.burger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg) }
.burger.open span:nth-child(2){ opacity:0 }
.burger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg) }

/* ---------- 8. MOBILE MENU ---------- */
.mobile-menu{
  position:fixed; inset:0; z-index:105;
  display:flex; flex-direction:column; justify-content:center; gap:2rem;
  padding:6rem var(--pad) 2.5rem;
  background:radial-gradient(ellipse at 70% 0%, #0d1730 0%, #05070e 60%);
  clip-path:circle(0% at calc(100% - 46px) 46px);
  transition:clip-path .72s var(--ease-out);
  visibility:hidden;
}
.mobile-menu.open{ clip-path:circle(160% at calc(100% - 46px) 46px); visibility:visible }

.mobile-menu__links{ display:flex; flex-direction:column; gap:.15rem }
.mobile-menu__links a{
  display:flex; align-items:baseline; gap:1rem;
  padding:.72rem 0; font-size:clamp(1.35rem,6.5vw,1.9rem); font-weight:800;
  border-block-end:1px solid rgba(255,255,255,.06);
  opacity:0; transform:translateY(24px);
  transition:opacity .5s var(--ease), transform .5s var(--ease), color .25s;
}
.mobile-menu.open .mobile-menu__links a{ opacity:1; transform:none }
.mobile-menu__links a i{ font-style:normal; font-family:var(--font-en); font-size:.72rem; font-weight:600;
  color:var(--cyan); letter-spacing:.1em; flex:none }
.mobile-menu__links a:hover{ color:var(--cyan) }
.mobile-menu__foot{ display:grid; gap:.7rem; opacity:0; transform:translateY(20px);
  transition:opacity .5s .38s var(--ease), transform .5s .38s var(--ease) }
.mobile-menu.open .mobile-menu__foot{ opacity:1; transform:none }

/* ---------- 9. SHARED SECTION BITS ---------- */
.sec{ padding-block:var(--sec-y); position:relative }
.sec__head{ max-width:760px; margin-inline:auto; text-align:center; margin-block-end:clamp(2.5rem,5vw,4rem) }

.kicker{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.42rem 1rem; border-radius:99px;
  background:rgba(58,217,255,.07); border:1px solid rgba(58,217,255,.22);
  font-size:.82rem; font-weight:600; letter-spacing:.02em; color:var(--cyan-soft);
  margin-block-end:1.15rem;
}
.kicker__dot{ width:7px; height:7px; border-radius:50%; background:var(--cyan);
  box-shadow:0 0 0 0 rgba(58,217,255,.6); animation:ping 2.2s var(--ease) infinite }
@keyframes ping{ 70%,100%{ box-shadow:0 0 0 11px rgba(58,217,255,0) } }

.sec__title{
  font-size:clamp(1.85rem,4.6vw,3.15rem);
  font-weight:800; line-height:1.32; letter-spacing:-.01em;
  margin-block-end:1rem;
}
.sec__sub{ color:var(--mute); font-size:clamp(.98rem,1.8vw,1.1rem); max-width:62ch; margin-inline:auto }

.grad{
  background:var(--grad); background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  animation:shimmer 7s linear infinite;
}
@keyframes shimmer{ to{ background-position:220% 0 } }

/* reveal-on-scroll — hidden state is .js-gated, see the inline script in <head> */
.reveal{ transition:opacity .85s var(--ease-out), transform .85s var(--ease-out), filter .85s var(--ease-out) }
.js .reveal{ opacity:0; transform:translateY(30px); filter:blur(6px) }
.js .reveal.in{ opacity:1; transform:none; filter:none }

/* glass card base */
.glass{
  position:relative; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
}

/* cursor spotlight on cards */
.spot::before{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%), rgba(58,217,255,.13), transparent 62%);
  opacity:0; transition:opacity .4s var(--ease);
}
.spot:hover::before{ opacity:1 }

.tilt{ transform-style:preserve-3d; will-change:transform }

/* ---------- 10. HERO ---------- */
.hero{ position:relative; padding-block:clamp(8rem,17vh,11rem) clamp(3rem,7vw,5rem); min-height:100svh; display:flex; align-items:center }
.hero__grid{ display:grid; grid-template-columns:1.2fr .8fr; align-items:center; gap:clamp(2rem,5vw,4.5rem) }

/* size is tuned so each Arabic line sits on one row down to the 900px breakpoint */
.hero__title{
  font-size:clamp(2.15rem,5vw,3.85rem);
  font-weight:900; line-height:1.26; letter-spacing:-.022em;
  margin-block:.35rem 1.5rem;
}
.hero__title .line{ display:block; text-wrap:balance }
.hero__title .w{
  display:inline-block;
  transition:opacity .9s var(--ease-out), transform .9s var(--ease-out), filter .9s var(--ease-out);
  transition-delay:calc(var(--i,0) * 95ms);
}
.js .hero__title .w{ opacity:0; transform:translateY(.62em) rotate(3deg); filter:blur(10px) }
.js .hero__title.in .w{ opacity:1; transform:none; filter:none }

.hero__lede{ color:var(--ink-dim); font-size:clamp(1rem,2vw,1.18rem); max-width:56ch; margin-block-end:2rem }

.hero__cta{ display:flex; flex-wrap:wrap; gap:.85rem; margin-block-end:2.6rem }

.hero__chips{ display:flex; flex-wrap:wrap; gap:.6rem }
.hero__chips li{
  display:flex; align-items:baseline; gap:.45rem;
  padding:.6rem 1.05rem; border-radius:var(--r-sm);
  background:var(--surface); border:1px solid var(--line);
  transition:border-color .3s, background .3s, transform .3s var(--ease);
}
.hero__chips li:hover{ border-color:var(--line-hi); background:rgba(58,217,255,.06); transform:translateY(-3px) }
.hero__chips b{ font-family:var(--font-en); font-size:1.18rem; font-weight:700; color:var(--cyan) }
.hero__chips span{ font-size:.82rem; color:var(--mute) }

/* orbit visual */
.hero__orbit{ display:grid; place-items:center }
.orbit{ position:relative; width:min(420px,100%); aspect-ratio:1; display:grid; place-items:center }
.orbit__glow{
  position:absolute; inset:14%; border-radius:50%;
  background:radial-gradient(circle, rgba(31,109,255,.42), transparent 66%);
  filter:blur(38px); animation:breathe 6s var(--ease) infinite;
}
@keyframes breathe{ 50%{ transform:scale(1.22); opacity:.75 } }

.orbit__core{ position:relative; width:31%; filter:drop-shadow(0 0 28px rgba(58,217,255,.6));
  animation:float 6.5s var(--ease) infinite }
@keyframes float{ 50%{ transform:translateY(-12px) } }

.orbit__ring{
  position:absolute; border-radius:50%;
  border:1px dashed rgba(140,200,255,.2);
  animation:spin linear infinite;
}
.orbit__ring--1{ inset:26%; animation-duration:19s; border-color:rgba(58,217,255,.3) }
.orbit__ring--2{ inset:12%; animation-duration:29s; animation-direction:reverse }
.orbit__ring--3{ inset:0;   animation-duration:41s }

.orbit__sat{
  position:absolute; inset-block-start:50%; inset-inline-start:50%;
  width:44px; height:44px;
  margin-block-start:-22px; margin-inline-start:-22px;
  display:grid; place-items:center; font-style:normal;
  border-radius:14px; background:rgba(10,16,32,.92); border:1px solid var(--line-hi);
  box-shadow:0 10px 30px -10px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.08);
  transform:rotate(var(--a,0deg)) translate(var(--r,0px)) rotate(calc(-1 * var(--a,0deg)));
  animation:counterspin linear infinite;
}
/* each satellite un-spins its own ring so the glyph stays upright */
@keyframes counterspin{
  to{ transform:rotate(var(--a,0deg)) translate(var(--r,0px)) rotate(calc(-1 * var(--a,0deg))) rotate(-1turn) }
}
.orbit__sat svg{ width:21px; height:21px; fill:none; stroke:var(--cyan);
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
  filter:drop-shadow(0 0 6px rgba(58,217,255,.55)) }

.orbit__ring--1 .orbit__sat{ animation-duration:19s }
.orbit__ring--2 .orbit__sat{ animation-duration:29s; animation-direction:reverse }
.orbit__ring--3 .orbit__sat{ animation-duration:41s }

/* inset-inline + auto margins centres this the same way in LTR and RTL */
.scroll-hint{
  position:absolute; inset-block-end:1.8rem; inset-inline:0; margin-inline:auto;
  width:26px; height:44px; border-radius:99px; border:1.5px solid rgba(140,200,255,.34);
  display:grid; justify-items:center; padding-block-start:8px;
}
.scroll-hint span{ width:4px; height:8px; border-radius:99px; background:var(--cyan); animation:wheel 1.9s var(--ease) infinite }
@keyframes wheel{ 0%{ transform:translateY(0); opacity:0 } 30%{ opacity:1 } 100%{ transform:translateY(17px); opacity:0 } }

/* ---------- 11. BRANDS MARQUEE ---------- */
.brands{ padding-block:clamp(2rem,4vw,3rem); border-block:1px solid var(--line); background:rgba(255,255,255,.015) }
.brands__label{ text-align:center; margin-block-end:1.1rem }
.brands__label span{ font-size:.78rem; letter-spacing:.18em; color:var(--mute); text-transform:uppercase }

.marquee{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent) }
.marquee__track{ display:flex; align-items:center; gap:clamp(1.6rem,4vw,3.2rem); width:max-content;
  animation:slide 26s linear infinite }
.marquee:hover .marquee__track{ animation-play-state:paused }
.marquee__track span{
  font-family:var(--font-en); font-size:clamp(1.15rem,3vw,1.9rem); font-weight:700;
  letter-spacing:.03em; color:rgba(233,238,251,.42); white-space:nowrap;
  transition:color .3s, text-shadow .3s;
}
.marquee__track span:hover{ color:#fff; text-shadow:0 0 24px rgba(58,217,255,.7) }
.marquee__track .sep{ color:var(--cyan); opacity:.5; font-size:.9rem }
@keyframes slide{ to{ transform:translateX(50%) } }

/* ---------- 12. ABOUT ---------- */
.about{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2rem,5vw,4rem); align-items:center }
.about__text p{ color:var(--ink-dim); margin-block-end:1.1rem; font-size:1.04rem }
.about__text b{ color:var(--cyan-soft); font-weight:700 }
.about__text .sec__title{ text-align:start }

.about__pills{ display:flex; flex-wrap:wrap; gap:.5rem; margin-block-start:1.6rem }
.about__pills span{
  position:relative; padding:.42rem .95rem; border-radius:99px; font-size:.86rem; font-weight:600;
  background:var(--grad-soft); border:1px solid rgba(58,217,255,.2); color:var(--cyan-soft);
}
.about__pills span:not(:last-child)::after{ content:'←'; position:absolute; inset-inline-end:-1.05rem; inset-block-start:50%;
  transform:translateY(-50%); color:rgba(58,217,255,.4); font-size:.8rem }

.about__stats{ display:grid; grid-template-columns:1fr 1fr; gap:1rem }
.stat{
  position:relative; padding:1.6rem 1.3rem; border-radius:var(--r-lg); overflow:hidden;
  background:var(--surface); border:1px solid var(--line);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  transition:border-color .35s, background .35s, box-shadow .35s;
}
.stat::after{ content:''; position:absolute; inset-block-start:0; inset-inline-start:0; width:100%; height:2px;
  background:var(--grad); transform:scaleX(0); transform-origin:inline-end; transition:transform .5s var(--ease) }
.stat:hover{ border-color:var(--line-hi); background:rgba(58,217,255,.05); box-shadow:0 22px 50px -22px rgba(31,109,255,.6) }
.stat:hover::after{ transform:scaleX(1); transform-origin:inline-start }
.stat b{ display:block; font-family:var(--font-en); font-size:clamp(1.9rem,4.5vw,2.7rem); font-weight:800; line-height:1;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent }
.stat b em{ font-style:normal; font-size:.55em }
.stat p{ margin-block-start:.55rem; font-size:.92rem; color:var(--mute); line-height:1.6 }

/* ---------- 13. VISION / MISSION ---------- */
.vm{ display:grid; grid-template-columns:1fr 1fr; gap:1.3rem }
.vm__card{
  position:relative; overflow:hidden; padding:clamp(1.8rem,3.5vw,2.7rem);
  border-radius:var(--r-xl); background:var(--surface); border:1px solid var(--line);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  transition:border-color .4s, transform .4s var(--ease), box-shadow .4s;
}
.vm__card:hover{ border-color:var(--line-hi); box-shadow:0 30px 70px -30px rgba(31,109,255,.7) }
.vm__icon{
  width:60px; height:60px; border-radius:18px; display:grid; place-items:center; margin-block-end:1.3rem;
  background:var(--grad-soft); border:1px solid rgba(58,217,255,.26);
}
.vm__icon svg{ width:28px; height:28px; fill:none; stroke:var(--cyan); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }
.vm__card h3{ font-size:1.5rem; font-weight:800; margin-block-end:.7rem }
.vm__card p{ color:var(--ink-dim); font-size:1.02rem }
.vm__num{
  position:absolute; inset-block-start:1.2rem; inset-inline-end:1.6rem;
  font-family:var(--font-en); font-size:3.6rem; font-weight:800; line-height:1;
  color:rgba(255,255,255,.035); pointer-events:none;
}

/* ---------- 14. SERVICES ---------- */
.svc{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.15rem }
.svc__card{
  position:relative; overflow:hidden; padding:1.9rem 1.6rem;
  border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--line);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  transition:border-color .4s, background .4s, box-shadow .4s;
}
.svc__card--wide{ grid-column:span 3 }
.svc__card:hover{ border-color:var(--line-hi); background:rgba(58,217,255,.045);
  box-shadow:0 30px 70px -30px rgba(31,109,255,.65) }

.svc__ico{
  width:54px; height:54px; border-radius:16px; display:grid; place-items:center; margin-block-end:1.15rem;
  background:var(--grad-soft); border:1px solid rgba(58,217,255,.24);
  transition:transform .45s var(--ease), box-shadow .45s;
}
.svc__ico svg{ width:26px; height:26px; fill:none; stroke:var(--cyan); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round }
.svc__card:hover .svc__ico{ transform:translateY(-4px) rotate(-6deg) scale(1.06); box-shadow:0 14px 34px -12px rgba(58,217,255,.7) }

.svc__card h3{ font-size:1.18rem; font-weight:800; margin-block-end:.5rem; line-height:1.5 }
.svc__card > p{ color:var(--mute); font-size:.95rem; margin-block-end:1.1rem }
.svc__card ul{ display:grid; gap:.5rem; border-block-start:1px solid var(--line); padding-block-start:1.1rem }
.svc__card ul.cols2{ grid-template-columns:repeat(3,1fr); column-gap:2rem }
.svc__card li{ position:relative; padding-inline-start:1.35rem; font-size:.92rem; color:var(--ink-dim); line-height:1.65 }
.svc__card li::before{
  content:''; position:absolute; inset-inline-start:0; inset-block-start:.62em;
  width:6px; height:6px; border-radius:2px; background:var(--grad); transform:rotate(45deg);
}

/* ---------- 15. BUILDS ---------- */
.builds{ display:grid; grid-template-columns:repeat(auto-fit,minmax(198px,1fr)); gap:1.05rem }
.build{
  position:relative; overflow:hidden; padding:1.7rem 1.4rem 1.5rem;
  border-radius:var(--r-lg); background:linear-gradient(165deg, rgba(255,255,255,.055), rgba(255,255,255,.015));
  border:1px solid var(--line);
  transition:transform .45s var(--ease), border-color .4s, box-shadow .4s;
}
.build:hover{ transform:translateY(-8px); border-color:var(--line-hi); box-shadow:0 34px 70px -30px rgba(31,109,255,.7) }
.build__idx{
  display:inline-block; font-family:var(--font-en); font-size:.78rem; font-weight:700; letter-spacing:.12em;
  padding:.28rem .6rem; border-radius:8px; margin-block-end:.9rem;
  background:rgba(58,217,255,.12); border:1px solid rgba(58,217,255,.28); color:var(--cyan);
}
.build h3{ font-size:1.1rem; font-weight:800; margin-block-end:.5rem }
.build p{ font-size:.92rem; color:var(--mute); margin-block-end:1rem }
.build__tags{ display:flex; flex-wrap:wrap; gap:.35rem }
.build__tags span{ font-size:.76rem; padding:.26rem .6rem; border-radius:99px;
  background:rgba(255,255,255,.05); border:1px solid var(--line); color:var(--ink-dim) }

/* ---------- 16. PRODUCTS ---------- */
.chips{ display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem }
.chip{
  padding:.72rem 1.25rem; border-radius:99px; font-size:.94rem; font-weight:500;
  background:var(--surface); border:1px solid var(--line); color:var(--ink-dim);
  transition:opacity .55s var(--ease-out), transform .55s var(--ease-out),
             border-color .3s, background .3s, color .3s, box-shadow .3s;
}
.js .chip{ opacity:0; transform:translateY(18px) scale(.94) }
.js .chip.in{ opacity:1; transform:none }
.chip:hover{ color:#fff; border-color:var(--line-hi); background:rgba(58,217,255,.1);
  box-shadow:0 14px 34px -14px rgba(58,217,255,.7); transform:translateY(-4px) }

.agency{
  margin-block-start:2.6rem; padding:1.5rem 1.7rem; border-radius:var(--r-lg);
  background:var(--grad-soft); border:1px solid rgba(58,217,255,.2); text-align:center;
}
.agency p{ color:var(--ink-dim); font-size:1rem }
.agency b{ color:#fff }
.agency em{ font-style:normal; font-family:var(--font-en); font-weight:700; color:var(--cyan) }

/* ---------- 17. WHY ---------- */
.why{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem }
.why__item{
  position:relative; padding:1.6rem 1.35rem; border-radius:var(--r);
  background:var(--surface); border:1px solid var(--line);
  transition:transform .4s var(--ease), border-color .35s, background .35s;
}
.why__item:hover{ transform:translateY(-6px); border-color:var(--line-hi); background:rgba(58,217,255,.05) }
.why__item span{
  display:block; font-family:var(--font-en); font-size:1.55rem; font-weight:800; line-height:1; margin-block-end:.8rem;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
}
.why__item h3{ font-size:1.02rem; font-weight:700; margin-block-end:.4rem; line-height:1.55 }
.why__item p{ font-size:.88rem; color:var(--mute); line-height:1.65 }

/* ---------- 18. SECTORS ---------- */
.sectors{ display:grid; grid-template-columns:repeat(3,1fr); gap:.9rem }
.sector{
  display:flex; align-items:center; gap:1rem; padding:1.15rem 1.3rem;
  border-radius:var(--r); background:var(--surface); border:1px solid var(--line);
  transition:transform .4s var(--ease), border-color .35s, background .35s, box-shadow .35s;
}
.sector:hover{ transform:translateX(-6px); border-color:var(--line-hi); background:rgba(58,217,255,.06);
  box-shadow:0 20px 44px -22px rgba(31,109,255,.65) }
.sector i{ font-style:normal; font-size:1.5rem; width:48px; height:48px; flex:none;
  display:grid; place-items:center; border-radius:14px;
  background:var(--grad-soft); border:1px solid rgba(58,217,255,.2) }
.sector h3{ font-size:.98rem; font-weight:600; line-height:1.5 }

/* ---------- 19. CONTACT ---------- */
.sec--contact{ padding-block-end:clamp(5rem,10vw,8rem) }
.cta{
  position:relative; overflow:hidden; isolation:isolate;
  padding:clamp(2.4rem,6vw,4.5rem) clamp(1.3rem,4vw,3.5rem);
  border-radius:var(--r-xl); text-align:center;
  background:linear-gradient(160deg, rgba(20,32,64,.85), rgba(8,11,22,.9));
  border:1px solid rgba(58,217,255,.22);
  box-shadow:0 40px 100px -40px rgba(31,109,255,.75);
}
.cta__aurora{
  position:absolute; inset:-40%; z-index:-1; opacity:.55;
  background:conic-gradient(from 0deg, transparent, rgba(58,217,255,.4), transparent 30%, rgba(31,109,255,.45), transparent 62%);
  filter:blur(60px); animation:spin 22s linear infinite;
}
.cta__head{ margin-block-end:2.6rem }
.cta .sec__title{ margin-block-end:.9rem }

.cards{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; max-width:820px; margin-inline:auto }
.ccard{
  padding:1.7rem 1.4rem; border-radius:var(--r-lg);
  background:rgba(255,255,255,.05); border:1px solid var(--line);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  transition:border-color .35s, background .35s;
}
.ccard:hover{ border-color:var(--line-hi); background:rgba(58,217,255,.07) }
.ccard__tag{ display:inline-block; font-size:.78rem; letter-spacing:.06em; color:var(--cyan);
  padding:.22rem .7rem; border-radius:99px; background:rgba(58,217,255,.12); border:1px solid rgba(58,217,255,.24) }
.ccard__num{
  display:block; font-family:var(--font-en); font-size:clamp(1.6rem,4.6vw,2.15rem); font-weight:700;
  letter-spacing:.03em; margin-block:.75rem 1.2rem; direction:ltr;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
  transition:filter .3s;
}
.ccard__num:hover{ filter:brightness(1.25) drop-shadow(0 0 18px rgba(58,217,255,.6)) }
.ccard__btns{ display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap }
.ccard__btns .btn{ flex:1 1 130px }

.cta__note{ margin-block-start:2rem; font-size:.9rem; color:var(--mute) }

/* ---------- 20. FOOTER ---------- */
.footer{ border-block-start:1px solid var(--line); background:rgba(4,6,12,.6);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px) }
.footer__inner{ display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:2.5rem; padding-block:clamp(2.8rem,6vw,4.2rem) }
.footer__brand img{ height:42px; width:auto; margin-block-end:1.1rem }
.footer__brand p{ color:var(--mute); font-size:.95rem; max-width:44ch }
.footer h4{ font-size:.95rem; font-weight:700; margin-block-end:1rem; color:#fff }
.footer__nav{ display:flex; flex-direction:column; gap:.55rem }
.footer__nav a{ font-size:.93rem; color:var(--mute); width:fit-content; transition:color .25s, transform .25s var(--ease) }
.footer__nav a:hover{ color:var(--cyan); transform:translateX(-5px) }
.footer__contact{ display:flex; flex-direction:column; gap:.5rem; align-items:start }
.footer__num{ font-family:var(--font-en); font-size:1.14rem; font-weight:700; color:var(--ink); transition:color .25s }
.footer__num:hover{ color:var(--cyan) }
.footer__wa{ margin-block-start:.5rem; font-size:.92rem; font-weight:600; color:var(--wa); transition:transform .25s var(--ease) }
.footer__wa:hover{ transform:translateX(-5px) }

.footer__bar{
  border-block-start:1px solid var(--line);
  padding:1.2rem var(--pad); display:flex; justify-content:space-between; align-items:center; gap:1rem;
  flex-wrap:wrap; font-size:.85rem; color:var(--mute);
  width:min(1240px,100%); margin-inline:auto;
}
.totop{ transition:color .25s }
.totop:hover{ color:var(--cyan) }

/* ---------- 21. MOBILE CALL BAR ---------- */
.callbar{
  position:fixed; inset-inline:0; inset-block-end:0; z-index:100;
  display:none; gap:.6rem; padding:.7rem var(--pad) calc(.7rem + env(safe-area-inset-bottom));
  background:rgba(5,7,14,.9); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  border-block-start:1px solid var(--line);
  transform:translateY(110%); transition:transform .45s var(--ease);
}
.callbar.show{ transform:none }
.callbar__btn{
  flex:1; display:flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.85rem; border-radius:14px; font-weight:700; font-size:.95rem;
}
.callbar__btn--call{ background:var(--grad); color:#02060f; box-shadow:0 10px 26px -10px rgba(31,109,255,.85) }
.callbar__btn--wa{ background:linear-gradient(140deg,var(--wa),var(--wa-dark)); color:#04170c;
  box-shadow:0 10px 26px -10px rgba(37,211,102,.85) }

/* ═══════════ 22. RESPONSIVE ═══════════ */
@media (max-width:1080px){
  .svc{ grid-template-columns:repeat(2,1fr) }
  .svc__card--wide{ grid-column:span 2 }
  .why{ grid-template-columns:repeat(2,1fr) }
  .footer__inner{ grid-template-columns:1fr 1fr; gap:2rem }
  .footer__brand{ grid-column:span 2 }
}

@media (max-width:900px){
  .nav__links{ display:none }
  /* .nav__links carried the auto margin — hand it to the actions when it's gone */
  .nav__actions{ margin-inline-start:auto }
  .burger{ display:grid }
  .nav__actions .btn--sm span{ display:none }
  .nav__actions .btn--sm{ padding:.68rem .85rem }
  .nav__actions .btn--sm .ico{ width:1.25em; height:1.25em }

  .hero{ min-height:auto; padding-block:7.5rem 4rem }
  .hero__grid{ grid-template-columns:1fr; text-align:center }
  .hero__lede{ margin-inline:auto }
  .hero__cta,.hero__chips{ justify-content:center }
  .hero__orbit{ order:-1; margin-block-end:1rem }
  .orbit{ width:min(300px,72vw) }
  .scroll-hint{ display:none }

  .about{ grid-template-columns:1fr }
  .about__text .sec__title{ text-align:start }
  .vm{ grid-template-columns:1fr }
  .sectors{ grid-template-columns:repeat(2,1fr) }

  .callbar{ display:flex }
  body{ padding-block-end:5rem }
}

@media (max-width:620px){
  html{ scroll-padding-top:80px }
  .svc{ grid-template-columns:1fr }
  .svc__card--wide{ grid-column:span 1 }
  .svc__card ul.cols2{ grid-template-columns:1fr }
  .why{ grid-template-columns:1fr }
  .sectors{ grid-template-columns:1fr }
  .about__stats{ gap:.7rem }
  .cards{ grid-template-columns:1fr }
  .footer__inner{ grid-template-columns:1fr }
  .footer__brand{ grid-column:span 1 }
  .hero__chips li{ flex:1 1 calc(50% - .3rem); justify-content:center }
  .hero__cta{ flex-direction:column; align-items:stretch }
  .hero__cta .btn{ width:100% }
  .ccard__btns .btn{ flex:1 1 100% }
  .nav__brand img{ height:30px }
  .about__pills span:not(:last-child)::after{ display:none }
}

/* ═══════════ 23. REDUCED MOTION ═══════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  .reveal,.chip,.hero__title .w{ opacity:1 !important; transform:none !important; filter:none !important }
  .starfield,.nebula{ display:none }
  .mobile-menu{ transition:none }
}

/* ═══════════ 24. LANGUAGE TOGGLE + ENGLISH (LTR) ═══════════ */
.langbtn{
  flex:none; min-width:42px; height:38px; padding:0 .8rem;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-en); font-size:.86rem; font-weight:700; letter-spacing:.04em;
  color:var(--cyan-soft); border-radius:99px;
  background:rgba(58,217,255,.07); border:1px solid rgba(58,217,255,.24);
  transition:color .25s, background .25s, border-color .25s, transform .25s var(--ease);
}
.langbtn:hover{ color:#fff; background:rgba(58,217,255,.14); border-color:var(--line-hi); transform:translateY(-2px) }
.langbtn:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px }

/* English switches the whole page to the Outfit stack */
html[lang="en"] body{ font-family:var(--font-en); letter-spacing:.002em }

/* directional cues that were authored for RTL, mirrored for LTR */
html[lang="en"] .about__pills span:not(:last-child)::after{ content:'→' }
html[lang="en"] .footer__nav a:hover{ transform:translateX(5px) }
html[lang="en"] .footer__wa:hover{ transform:translateX(5px) }
html[lang="en"] .sector:hover{ transform:translateX(6px) }

/* ═══════════ 25. CONTACT — 3 cards (phone · email · address) ═══════════ */
.cards--3{ grid-template-columns:repeat(3,1fr); max-width:960px }
.ccard{ display:flex; flex-direction:column }
.ccard__mail{
  font-size:clamp(1rem,3vw,1.28rem); letter-spacing:0; word-break:break-all;
}
.ccard__addr{
  margin-block:.85rem auto; font-size:1rem; line-height:1.7; color:var(--ink-dim);
}
.ccard__btns{ margin-block-start:auto }

.footer__mail{ font-family:var(--font-en); font-size:1rem; font-weight:600; color:var(--ink);
  word-break:break-all; transition:color .25s }
.footer__mail:hover{ color:var(--cyan) }
.footer__addr{ font-size:.9rem; color:var(--mute); line-height:1.7; margin-block:.2rem .3rem; max-width:34ch }

@media (max-width:900px){
  .cards--3{ grid-template-columns:1fr 1fr }
}
@media (max-width:620px){
  .cards--3{ grid-template-columns:1fr }
}

/* ═══════════ 26. BRAND LOGOS (marquee) ═══════════ */
.marquee__track .brand{ flex:none; display:flex; align-items:center; height:44px }
.brand__logo{
  height:26px; width:auto; max-width:190px; object-fit:contain;
  opacity:.55; transition:opacity .3s var(--ease), transform .3s var(--ease), filter .3s var(--ease);
}
.brand__logo--mark{ height:34px }         /* square icon marks read larger than wordmarks */
.brand:hover .brand__logo{
  opacity:1; transform:translateY(-2px);
  filter:drop-shadow(0 0 16px rgba(58,217,255,.55));
}