/* Modern AI — modernai.sa
   Design system: Strata (dark). Space Grotesk / JetBrains Mono.

   WARNING: the Content-Security-Policy sets style-src 'self' with no
   'unsafe-inline'. A style="..." attribute in the HTML is therefore silently
   dropped by the browser with no error. Never add one — put the rule in
   assets/util.css instead. */

/* Self-hosted webfonts — no third-party requests, so the CSP can forbid
   every external origin outright. Files: assets/fonts/*.woff2 */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/space-grotesk-latin-400-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/space-grotesk-latin-500-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;font-display:swap;
  src:url('fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:500;font-display:swap;
  src:url('fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2') format('woff2');}


:root{
  --void:#08090C; --panel:#0D0F13; --panel2:#101319;
  --fg:#EDF0F4; --soft:#98A1AE; --dim:#7E8794; --cap:#8A93A0;
  --edge:#1B1F27; --edge2:#262C36;
  --cy:#5EE0C8; --vi:#7C8CFF;
  --mx:80px;
  --sans:'Space Grotesk','Segoe UI',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden;}
body{margin:0;background:var(--void);color:var(--fg);font-family:var(--sans);font-size:18px;line-height:1.7;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;}
img,svg{max-width:100%;}
a{color:var(--cy);text-decoration:none;transition:color .18s ease;}
a:hover{color:var(--fg);}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,label:focus-within{outline:2px solid var(--cy);outline-offset:3px;}
h1,h2,h3{margin:0;font-weight:400;}
p{margin:0 0 22px;font-size:18px;line-height:1.7;color:var(--soft);max-width:64ch;}
p:last-child{margin-bottom:0;}
.wrap{width:100%;max-width:1520px;margin-inline:auto;padding-inline:var(--mx);}
.mono{font-family:var(--mono);}
.skip{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
  background:var(--fg);color:#0A0B0E;z-index:99;}
.skip:focus{width:auto;height:auto;overflow:visible;clip:auto;clip-path:none;
  inset-block-start:12px;inset-inline-start:12px;padding:12px 20px;}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* ---------------- motion ---------------- */
@keyframes drift{to{background-position:64px 64px;}}
@keyframes breathe{0%,100%{opacity:.7;transform:scale(1);}50%{opacity:1;transform:scale(1.06);}}
@keyframes tilt{from{transform:rotateX(57deg) rotateZ(-39deg);}to{transform:rotateX(49deg) rotateZ(-28deg);}}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.45;transform:scale(.72);}}
@keyframes sweep{to{transform:rotate(360deg);}}
@keyframes shimmer{0%,88%,100%{opacity:.28;}92%{opacity:1;}}
@keyframes slide{to{background-position:200% 0;}}
@keyframes rv-failsafe{to{opacity:1;transform:none;}}

/* Reveal on scroll.
   The hidden state applies only where the browser runs scripts, so a visitor
   with JavaScript off sees everything immediately. The rv-failsafe animation
   is the second safety net: if site.js never runs — blocked, 404, CSP, an
   extension — the content reveals itself after 4 seconds anyway. Nothing on
   this site can end up permanently invisible. */
@media (scripting: enabled){
  [data-rv]{opacity:0;transform:translateY(26px);animation:rv-failsafe 0s linear 4s forwards;}
  [data-rv].in{animation:none;}
  [data-rv].in{opacity:1;transform:none;transition:opacity .85s cubic-bezier(.2,.75,.2,1),transform .85s cubic-bezier(.2,.75,.2,1);transition-delay:var(--d,0s);}
  [data-rv="fade"]{transform:none;}
  .bar i.on{transform:scaleY(.08);transform-origin:bottom;}
  .in .bar i.on,.bar.in i.on{transform:scaleY(1);transition:transform 1s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0s);}
  .dpath{stroke-dasharray:1200;stroke-dashoffset:1200;}
  .in .dpath{stroke-dashoffset:0;transition:stroke-dashoffset 2.4s ease-out .2s;}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation:none !important;transition:none !important;}
  [data-rv]{opacity:1 !important;transform:none !important;}
  .bar i.on{transform:scaleY(1) !important;}
  .dpath{stroke-dashoffset:0 !important;}
}

/* ---------------- header ---------------- */
.site-head{position:relative;z-index:6;display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding-block:30px;}
.brand{font-size:20px;font-weight:500;letter-spacing:-.015em;color:var(--fg);}
.brand:hover{color:var(--cy);}
.navlinks{display:flex;flex-wrap:wrap;gap:32px;font-size:13px;}
.navlinks a,.brand,.foot-links a,.foot-mail,.d-val,.r-cta{min-height:24px;display:inline-flex;align-items:center;}
.navlinks a{color:var(--dim);}
.navlinks a:hover,.navlinks a[aria-current="page"]{color:var(--fg);}

/* ---------------- hero ---------------- */
.stage{position:relative;min-height:940px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;}
.aura{position:absolute;right:-8%;top:2%;width:1040px;height:940px;pointer-events:none;z-index:0;
  background:radial-gradient(circle at 50% 50%,rgba(124,140,255,.22),rgba(94,224,200,.09) 36%,transparent 68%);
  filter:blur(30px);animation:breathe 11s ease-in-out infinite;}
.mesh{position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:64px 64px;animation:drift 30s linear infinite;
  -webkit-mask-image:linear-gradient(to bottom,#000,transparent 86%);mask-image:linear-gradient(to bottom,#000,transparent 86%);}
.hrow{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;padding-bottom:20px;}
.tag{display:inline-flex;align-items:center;gap:11px;font-family:var(--mono);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--cy);margin-bottom:30px;}
.tag i{width:24px;height:1px;background:var(--cy);display:block;}
.h1{font-size:84px;line-height:1.02;letter-spacing:-.04em;max-width:14ch;}
.h1 span{color:var(--cy);}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .h1 span{background:linear-gradient(96deg,var(--cy),var(--vi),var(--cy));background-size:220% 100%;
    -webkit-background-clip:text;background-clip:text;color:transparent;animation:slide 9s linear infinite;}
}
@media (forced-colors:active){.h1 span{color:CanvasText;background:none;}}
.lede{margin-top:30px;max-width:48ch;font-size:18px;line-height:1.66;color:var(--soft);}
.lede b{color:var(--fg);font-weight:500;}
.btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px;}
.b1,.b2{display:inline-flex;align-items:center;justify-content:center;font-family:var(--sans);font-size:14px;font-weight:500;
  padding:15px 28px;min-height:48px;cursor:pointer;border:1px solid transparent;transition:background .18s ease,color .18s ease,border-color .18s ease;}
.b1{background:var(--fg);color:#0A0B0E;}
.b1:hover{background:var(--cy);color:#07120F;}
.b2{background:transparent;color:var(--fg);border-color:var(--edge2);}
.b2:hover{border-color:var(--cy);color:var(--cy);}

.scene{position:relative;height:560px;perspective:1500px;}
.stack{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(57deg) rotateZ(-39deg);
  animation:tilt 18s ease-in-out infinite alternate;}
.plane{position:absolute;left:13%;top:17%;width:400px;height:400px;border:1px solid rgba(124,140,255,.28);
  background:linear-gradient(140deg,rgba(124,140,255,.10),rgba(8,9,12,.30));}
.plane.p1{transform:translateZ(0);border-color:rgba(255,255,255,.10);background:linear-gradient(140deg,rgba(255,255,255,.03),transparent);}
.plane.p2{transform:translateZ(58px);}
.plane.p3{transform:translateZ(116px);border-color:rgba(94,224,200,.32);background:linear-gradient(140deg,rgba(94,224,200,.10),rgba(8,9,12,.20));}
.plane.p4{transform:translateZ(182px);border-color:rgba(94,224,200,.72);
  background:linear-gradient(140deg,rgba(94,224,200,.20),rgba(124,140,255,.10));box-shadow:0 0 66px rgba(94,224,200,.26);}
.plane .g{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:45px 45px;}
.plane .lab{position:absolute;left:14px;top:11px;font-family:var(--mono);font-size:11px;letter-spacing:.09em;color:rgba(237,240,244,.5);}
.plane.p4 .lab{color:var(--cy);}
.node{position:absolute;width:10px;height:10px;border-radius:50%;background:var(--cy);
  box-shadow:0 0 15px 3px rgba(94,224,200,.75);animation:pulse 3.4s ease-in-out infinite;}
.hbot{position:relative;z-index:2;padding-bottom:38px;padding-top:24px;border-top:1px solid var(--edge);
  display:flex;flex-wrap:wrap;gap:52px;}
.kpi .k{font-size:26px;font-weight:500;letter-spacing:-.025em;}
.kpi .v{font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--dim);margin-top:7px;}

/* ---------------- sections ---------------- */
.sec{position:relative;padding-block:120px;border-top:1px solid var(--edge);}
.sec.alt{background:var(--panel);}
.sec.alt2{background:var(--panel2);}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--cy);}
.h2{font-size:50px;line-height:1.07;letter-spacing:-.033em;margin-top:20px;max-width:17ch;}
.h3{font-size:26px;letter-spacing:-.022em;margin:14px 0 16px;}
.n{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--vi);}
.split{display:grid;grid-template-columns:1fr 1fr;gap:72px;margin-top:52px;align-items:start;}
.lead-out{font-size:24px;line-height:1.42;letter-spacing:-.02em;color:var(--fg);max-width:26ch;margin-top:34px;}

.card{position:relative;border:1px solid var(--edge);background:linear-gradient(165deg,rgba(124,140,255,.07),transparent 62%);padding:38px;overflow:hidden;}
.card.cy{background:linear-gradient(165deg,rgba(94,224,200,.07),transparent 62%);}
.bignum{font-size:92px;line-height:.92;letter-spacing:-.045em;font-weight:500;color:var(--cy);}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .bignum{background:linear-gradient(96deg,var(--cy),var(--vi));-webkit-background-clip:text;background-clip:text;color:transparent;}
}
.bigtxt{font-size:15px;line-height:1.62;color:var(--soft);margin-top:20px;max-width:36ch;}
.bigsrc{max-width:none;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--cap);margin-top:18px;}
.ticks{display:grid;grid-template-columns:repeat(20,1fr);gap:5px;margin-top:30px;}
.tk{aspect-ratio:1;background:#161A21;border-radius:1px;}
.tk.on{background:var(--cy);box-shadow:0 0 10px rgba(94,224,200,.7);animation:shimmer 5s ease-in-out infinite;}

.forms{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:52px;}
.fcard{border:1px solid var(--edge);background:rgba(255,255,255,.014);padding:30px;}
.fcard p{font-size:16px;line-height:1.66;margin:18px 0 0;}
.misfit{position:relative;height:66px;margin-top:26px;}
.misfit .slot{position:absolute;left:0;top:8px;width:96px;height:50px;border:1px dashed var(--edge2);}
.misfit .peg{position:absolute;left:30px;top:20px;width:96px;height:50px;border:1px solid var(--vi);background:rgba(124,140,255,.10);}
.misfit.c2 .peg{left:44px;top:2px;transform:rotate(-4deg);}
.misfit.c3 .peg{left:58px;top:26px;width:150px;}

.distance{margin-top:52px;border:1px solid var(--edge);background:rgba(255,255,255,.014);padding:38px;}
.dline{position:relative;}
.axis{position:absolute;left:0;right:0;top:6px;height:1px;
  background:linear-gradient(90deg,var(--cy),rgba(124,140,255,.5) 55%,rgba(255,255,255,.10));}
.dgrid{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;}
.dcell{display:flex;flex-direction:column;gap:16px;}
.mk{position:relative;z-index:2;width:13px;height:13px;border-radius:50%;background:var(--cy);
  box-shadow:0 0 14px rgba(94,224,200,.8);animation:pulse 3.2s ease-in-out infinite;}
.mk.far{background:#4A525F;box-shadow:none;animation:none;}
.mklab{font-family:var(--mono);font-size:11px;letter-spacing:.09em;color:var(--dim);line-height:1.6;}
.dcell.far{align-items:flex-end;text-align:right;}
.axcap{display:flex;justify-content:space-between;gap:24px;max-width:none;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--cap);margin-top:30px;padding-top:16px;border-top:1px solid var(--edge);}

.cards{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:52px;}
.bar{display:flex;gap:3px;margin-top:26px;}
.bar i{height:36px;flex:1;background:#161A21;display:block;transform-origin:bottom;}
.bar i.on{background:linear-gradient(180deg,var(--cy),rgba(94,224,200,.22));}
.bar.v i.on{background:linear-gradient(180deg,var(--vi),rgba(124,140,255,.22));}
.barcap{max-width:none;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--cap);margin-top:12px;}
.statrow{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:24px;}
.stat{border:1px solid var(--edge);padding:28px;background:rgba(255,255,255,.014);}
.stat .k{font-size:44px;font-weight:500;letter-spacing:-.035em;color:var(--cy);}
.stat .t{font-size:14.5px;line-height:1.6;color:var(--soft);margin-top:14px;}
.stat .s{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--cap);margin-top:14px;}

.method{margin-top:56px;position:relative;max-width:960px;}
.mline{position:absolute;left:19px;top:14px;bottom:14px;width:1px;background:linear-gradient(180deg,var(--cy),rgba(124,140,255,.5),transparent);}
.m-item{position:relative;display:grid;grid-template-columns:88px minmax(0,1fr);gap:36px;padding-block:30px;}
.m-dot{position:relative;width:40px;height:40px;border-radius:50%;border:1px solid var(--edge2);background:var(--void);
  display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:11.5px;color:var(--cy);}
.m-dot::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid rgba(94,224,200,.22);
  animation:pulse 4s ease-in-out infinite;animation-delay:var(--d,0s);}
.m-h{font-size:20px;font-weight:500;letter-spacing:-.018em;margin:8px 0 12px;}
.m-p{font-size:17px;line-height:1.68;margin:0;max-width:62ch;}

.diagwrap{display:grid;grid-template-columns:1.2fr .8fr;gap:60px;margin-top:52px;align-items:center;}
.diag{width:100%;height:auto;}
.dlab{font-family:var(--mono);font-size:11px;letter-spacing:.1em;fill:var(--dim);}
.dlab.hi{fill:var(--cy);}
.dlab.vi{fill:var(--vi);}
.lab-narrow{display:none;}

.radar{position:relative;width:100%;aspect-ratio:1;max-width:420px;margin-left:auto;border-radius:50%;overflow:hidden;}
.ring{position:absolute;border:1px solid rgba(94,224,200,.16);border-radius:50%;}
.r1{inset:0;} .r2{inset:14%;} .r3{inset:28%;} .r4{inset:42%;}
.beam{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,rgba(94,224,200,.34),rgba(94,224,200,0) 26%);animation:sweep 7s linear infinite;}
.core{position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--cy);box-shadow:0 0 22px 5px rgba(94,224,200,.7);}
.blip{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--vi);box-shadow:0 0 12px rgba(124,140,255,.8);animation:pulse 3.6s ease-in-out infinite;}

.note{max-width:60ch;}
.cta{display:inline-flex;align-items:center;gap:10px;margin-top:36px;background:var(--fg);color:#0A0B0E;
  font-size:14px;font-weight:500;padding:16px 28px;min-height:48px;border:none;cursor:pointer;}
.cta:hover{background:var(--cy);color:#07120F;}
.emptygrid{display:grid;grid-template-columns:repeat(18,1fr);gap:5px;margin-top:44px;max-width:520px;opacity:.5;}
.eg{aspect-ratio:1;background:#141820;border-radius:1px;}

.foot{border-top:1px solid var(--edge);padding-top:54px;padding-bottom:58px;display:flex;justify-content:space-between;
  align-items:flex-start;gap:40px;flex-wrap:wrap;}
.foot-b{font-size:20px;font-weight:500;}
.foot-s{font-size:13px;color:var(--dim);margin-top:10px;}
.foot-r{display:flex;flex-direction:column;gap:14px;align-items:flex-end;text-align:right;}
.foot-links{display:flex;flex-wrap:wrap;gap:26px;row-gap:10px;font-size:13.5px;justify-content:flex-end;}
.foot-links a{color:var(--dim);}
.foot-mail{font-size:13.5px;}
.arrow{width:15px;height:15px;flex:none;}

/* ---------------- contact page ---------------- */
.head-wrap{position:relative;overflow:hidden;}
.head-wrap .aura{left:52%;right:auto;top:-30%;width:900px;height:820px;}
.head{position:relative;z-index:2;padding-top:96px;padding-bottom:84px;}
.h1-c{font-size:78px;line-height:1.02;letter-spacing:-.042em;}
.routes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;padding-bottom:104px;position:relative;z-index:2;}
.route{border:1px solid var(--edge);background:linear-gradient(165deg,rgba(124,140,255,.06),transparent 62%);padding:30px;
  display:flex;flex-direction:column;}
.route:nth-child(2){background:linear-gradient(165deg,rgba(94,224,200,.06),transparent 62%);}
.r-n{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--cy);}
.r-h{font-size:19px;font-weight:500;letter-spacing:-.018em;margin:14px 0 0;}
.r-p{font-size:16px;line-height:1.64;margin:14px 0 0;color:var(--soft);}
.r-cta{display:inline-flex;align-items:center;gap:9px;margin-top:24px;font-size:14px;font-weight:500;
  align-self:flex-start;min-height:44px;}
.formsec{background:var(--panel);border-top:1px solid var(--edge);}
.fgrid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:32px;padding-block:96px;}
.frail{grid-column:1 / span 5;}
.fcol{grid-column:6 / span 7;max-width:660px;}
.h2-f{font-size:38px;line-height:1.1;letter-spacing:-.03em;margin-top:20px;max-width:15ch;}
.field{display:flex;flex-direction:column;gap:10px;margin-bottom:30px;}
.lab{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);}
.inp{border:none;border-bottom:1px solid var(--edge2);background:transparent;padding-block:12px;
  font-family:var(--sans);font-size:17px;color:var(--fg);width:100%;min-height:48px;}
.inp:focus{outline:none;border-bottom-color:var(--cy);}
.inp:focus-visible{outline:none;}
.chips{display:flex;flex-wrap:wrap;gap:10px;}
.chip{display:inline-flex;align-items:center;min-height:48px;border:1px solid var(--edge2);border-radius:999px;
  padding-inline:20px;font-size:14.5px;color:var(--soft);cursor:pointer;transition:border-color .18s ease,color .18s ease;}
.chip:has(input:checked){border-color:var(--cy);color:var(--cy);background:rgba(94,224,200,.08);}
.chip:has(input:focus-visible){outline:2px solid var(--cy);outline-offset:3px;}
.chip input{position:absolute;opacity:0;width:1px;height:1px;}
.ta{min-height:120px;resize:vertical;line-height:1.55;}
.send{margin-top:6px;background:var(--fg);color:#0A0B0E;border:none;font-family:var(--sans);font-size:14px;font-weight:500;
  padding:16px 38px;cursor:pointer;min-height:48px;align-self:flex-start;}
.send:hover{background:var(--cy);color:#07120F;}
.formnote{font-size:13.5px;color:var(--dim);margin-top:20px;max-width:52ch;}
.status{margin-top:22px;font-size:14.5px;color:var(--fg);min-height:1.2em;}
.direct{display:flex;gap:60px;flex-wrap:wrap;padding-block:64px;border-top:1px solid var(--edge);}
.d-lab{font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--dim);}
.d-val{font-size:18px;color:var(--fg);margin-top:8px;display:inline-block;}

/* ---------------- iPad ---------------- */
@media (max-width:1180px){
  :root{--mx:48px;}
  .h1{font-size:60px;max-width:16ch;}
  .h1-c{font-size:58px;}
  .h2{font-size:40px;max-width:20ch;}
  .h2-f{font-size:32px;max-width:none;}
  .hrow{grid-template-columns:1fr;gap:56px;}
  .scene{height:430px;}
  .plane{width:300px;height:300px;left:24%;top:12%;}
  .split,.diagwrap{grid-template-columns:1fr;gap:44px;}
  .forms,.cards,.statrow,.routes{grid-template-columns:1fr;}
  .routes{gap:20px;padding-bottom:80px;}
  .sec{padding-block:92px;}
  .radar{margin-inline:auto;}
  .bignum{font-size:76px;}
  .dgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;}
  .dcell.far{align-items:flex-start;text-align:left;}
  .axis{display:none;}
  .head{padding-top:72px;padding-bottom:64px;}
  .fgrid{row-gap:0;padding-block:76px;}
  .frail{grid-column:1 / span 12;}
  .fcol{grid-column:1 / span 12;margin-top:36px;max-width:none;}
}

/* ---------------- phone ---------------- */
@media (max-width:720px){
  :root{--mx:20px;}
  body{font-size:16px;}
  .site-head{flex-wrap:wrap;row-gap:4px;padding-top:22px;padding-bottom:16px;}
  .navlinks{width:100%;gap:18px;font-size:12.5px;}
  .navlinks a,.brand,.foot-links a,.foot-mail,.d-val{min-height:44px;display:inline-flex;align-items:center;}
  .h1{font-size:38px;max-width:none;letter-spacing:-.03em;}
  .h1-c{font-size:36px;letter-spacing:-.03em;}
  .lede{font-size:16.5px;max-width:none;}
  .h2{font-size:28px;max-width:none;}
  .h2-f{font-size:26px;}
  .h3{font-size:22px;}
  p{font-size:16px;max-width:none;}
  .lead-out{font-size:19px;max-width:none;}
  .stage{min-height:0;}
  .scene{height:290px;}
  .plane{width:190px;height:190px;left:22%;top:14%;}
  .plane.p2{transform:translateZ(30px);} .plane.p3{transform:translateZ(60px);} .plane.p4{transform:translateZ(94px);}
  .plane .lab{display:none;}
  .hbot{gap:26px;row-gap:22px;}
  .kpi .k{font-size:21px;}
  .sec{padding-block:62px;}
  .split,.diagwrap{gap:34px;margin-top:34px;}
  .card,.fcard,.stat,.distance,.route{padding:24px;}
  .bignum{font-size:56px;}
  .ticks{grid-template-columns:repeat(14,1fr);}
  .emptygrid{grid-template-columns:repeat(12,1fr);}
  .m-item{grid-template-columns:52px minmax(0,1fr);gap:20px;padding-block:22px;}
  .m-p{font-size:16px;}
  .dgrid{grid-template-columns:1fr;gap:22px;}
  .dcell{flex-direction:row;align-items:center;gap:14px;}
  .mk{flex:none;}
  .axcap{flex-direction:column;gap:8px;}
  .dlab{font-size:20px;}
  .lab-wide{display:none;}
  .lab-narrow{display:block;}
  .head{padding-top:44px;padding-bottom:44px;}
  .routes{padding-bottom:56px;}
  .fgrid{padding-block:56px;}
  .direct{padding-block:44px;gap:28px;}
  .foot{flex-direction:column;padding-top:40px;padding-bottom:46px;}
  .foot-r{align-items:flex-start;text-align:left;}
  .foot-links{justify-content:flex-start;}
}


/* =====================================================================
   Arabic — right to left.
   Two rules that matter: Arabic letters join, so letter-spacing is never
   applied to Arabic text; and text-transform has no meaning in Arabic, so
   the "small caps" labels become plain weighted labels instead.
   ===================================================================== */
[dir="rtl"]{
  --sans:'IBM Plex Sans Arabic','Space Grotesk','Segoe UI',system-ui,sans-serif;
  --mono:'IBM Plex Sans Arabic','Segoe UI',system-ui,sans-serif;
}
[dir="rtl"] body{font-family:var(--sans);}
[dir="rtl"] .h1,[dir="rtl"] .h2,[dir="rtl"] .h3,[dir="rtl"] .h1-c,[dir="rtl"] .h2-f,
[dir="rtl"] .lead-out,[dir="rtl"] .bignum,[dir="rtl"] .m-h,[dir="rtl"] .r-h{letter-spacing:0;line-height:1.28;}
[dir="rtl"] .h1{font-size:74px;line-height:1.22;max-width:16ch;}
[dir="rtl"] .h1-c{font-size:70px;line-height:1.22;}
[dir="rtl"] .h2{font-size:44px;line-height:1.26;}
[dir="rtl"] .lead-out{line-height:1.6;max-width:30ch;}
[dir="rtl"] .eyebrow,[dir="rtl"] .lab,[dir="rtl"] .d-lab,[dir="rtl"] .barcap,[dir="rtl"] .axcap,
[dir="rtl"] .mklab,[dir="rtl"] .bigsrc,[dir="rtl"] .stat .s,[dir="rtl"] .kpi .v,[dir="rtl"] .n,
[dir="rtl"] .r-n,[dir="rtl"] .tag,[dir="rtl"] .plane .lab,[dir="rtl"] .foot-s,[dir="rtl"] .state span,
[dir="rtl"] .navlinks,[dir="rtl"] .foot-links{letter-spacing:0;text-transform:none;}
[dir="rtl"] .eyebrow,[dir="rtl"] .tag,[dir="rtl"] .n,[dir="rtl"] .r-n{font-size:13px;font-weight:500;}
[dir="rtl"] .lab,[dir="rtl"] .d-lab,[dir="rtl"] .kpi .v,[dir="rtl"] .barcap,[dir="rtl"] .axcap,
[dir="rtl"] .bigsrc,[dir="rtl"] .stat .s,[dir="rtl"] .mklab,[dir="rtl"] .state span{font-size:13px;}
[dir="rtl"] .dlab{font-size:13px;letter-spacing:0;}
[dir="rtl"] p,[dir="rtl"] .m-p,[dir="rtl"] .r-p,[dir="rtl"] .bigtxt,[dir="rtl"] .stat .t{line-height:1.9;}
[dir="rtl"] .aura{right:auto;left:-8%;}
[dir="rtl"] .head-wrap .aura{left:auto;right:52%;}
[dir="rtl"] .foot-r{align-items:flex-start;text-align:start;}
[dir="rtl"] .foot-links{justify-content:flex-start;}
[dir="rtl"] .radar{margin-left:0;margin-right:auto;}
[dir="rtl"] .mline{left:auto;right:19px;}
[dir="rtl"] .misfit .slot{left:auto;right:0;}
[dir="rtl"] .misfit .peg{left:auto;right:30px;}
[dir="rtl"] .misfit.c2 .peg{left:auto;right:44px;}
[dir="rtl"] .misfit.c3 .peg{left:auto;right:58px;}
[dir="rtl"] .axis{background:linear-gradient(270deg,var(--cy),rgba(124,140,255,.5) 55%,rgba(255,255,255,.10));}
[dir="rtl"] .diag{transform:scaleX(-1);}
[dir="rtl"] .diag text{transform:scaleX(-1);transform-origin:center;transform-box:fill-box;}
[dir="rtl"] .arrow{transform:scaleX(-1);}
[dir="rtl"] .plane .lab{left:auto;right:14px;}
@media (max-width:1180px){ [dir="rtl"] .h1{font-size:54px;} [dir="rtl"] .h1-c{font-size:52px;} [dir="rtl"] .h2{font-size:36px;} }
@media (max-width:720px){ [dir="rtl"] .h1{font-size:33px;} [dir="rtl"] .h1-c{font-size:32px;} [dir="rtl"] .h2{font-size:25px;}
  [dir="rtl"] .lead-out{font-size:18px;} [dir="rtl"] .dlab{font-size:20px;} }

/* language switch */
.lang{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--dim);border:1px solid var(--edge2);
  padding-inline:12px;min-height:32px;display:inline-flex;align-items:center;margin-inline-start:8px;}
.lang:hover{color:var(--fg);border-color:var(--cy);}
[dir="rtl"] .lang{letter-spacing:0;font-size:13px;}
@media (max-width:720px){ .lang{min-height:44px;} }