/* Lock Networks — static site (Arabic/English). Logical properties are used throughout, so RTL mirrors itself.
   Brand colours come from the company profile: orange #F37123, charcoal #404042, light grey #E1E2E4.
   Look: a hardened network at night. Graphite-black, one orange signal colour, circuit traces, the Riyadh skyline,
   and small security details (scan lines, HUD corners, a terminal). Motion is CSS first; the small script only adds
   pointer depth, a card spotlight, counters and the active nav link. Everything works without it, and nothing moves
   for people who ask for reduced motion. */

@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-sans-arabic-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+0304,U+0308,U+0329,U+2000-206F,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:700;font-display:swap;src:url(fonts/ibm-plex-sans-arabic-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Arabic faces are declared last so they win where the ranges overlap. */
@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");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0898-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
/* Mono is used only for small technical details (labels, numbers, the terminal). */
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ibm-plex-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+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/ibm-plex-mono-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+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/ibm-plex-mono-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --orange:#F37123;
  --orange-hi:#F68A47;
  --orange-ink:#A8420A;      /* orange for text on light backgrounds (AA contrast) */
  --ink-1:#161618;           /* deepest: hero, footer */
  --charcoal:#404042;
  --paper:#F0F1F2;
  --paper-2:#E4E5E7;
  --text:#252527;
  --muted:#54565A;
  --line:rgba(37,37,39,.16);
  --on-dark:#F0F1F2;
  --on-dark-muted:#B3B5BA;
  --line-d:rgba(240,241,242,.12);
  --line-d2:rgba(240,241,242,.22);
  --focus:var(--charcoal);
  --radius:6px;
  --r-card:14px;
  --gutter:clamp(20px,5vw,56px);
  --max:1180px;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --dir:1;                   /* +1 in LTR, -1 in RTL */
  --flip:1;
  --mir:1;                   /* -1 in RTL: the skyline is mirrored so its landmarks sit under the art side in both languages */
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:light;
}
html[dir="rtl"]{--dir:-1;--mir:-1}
html[dir="ltr"]{--flip:-1}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;background:var(--ink-1)}   /* dark behind the page: no light flash when overscrolling past the header or footer */
body{
  margin:0;background:var(--paper);color:var(--text);
  font-family:"IBM Plex Sans Arabic",system-ui,-apple-system,"Segoe UI",Tahoma,Arial,sans-serif;
  font-size:1.0625rem;line-height:1.8;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;
}
html[lang="en"] body{line-height:1.65}
h1,h2,h3,p,ol,ul,dl,dd{margin:0}
a{color:inherit}
img,svg{display:block;max-width:100%}
::selection{background:var(--orange);color:var(--ink-1)}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:3px}

.wrap{width:min(100% - 2 * var(--gutter),var(--max));margin-inline:auto}
.dark{background:var(--sec-bg,#1b1b1e);color:var(--on-dark);--text:var(--on-dark);--muted:var(--on-dark-muted);--line:var(--line-d);--focus:var(--orange)}

.skip{
  position:absolute;inset-inline-start:var(--gutter);inset-block-start:-5rem;z-index:80;
  background:var(--orange);color:var(--ink-1);padding:.6rem 1rem;border-radius:var(--radius);font-weight:700;text-decoration:none;
}
.skip:focus{inset-block-start:.75rem}
.skip:focus-visible{outline-color:#fff}

/* ---------- Header: dark glass, sticky on wide screens ---------- */
header.top{position:relative;z-index:40;background:var(--ink-1);color:var(--on-dark);border-block-end:1px solid var(--line-d);--focus:var(--orange)}
.site-header{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.75rem;padding-block:.85rem}
.brand{display:inline-flex;line-height:0}
.brand img{height:34px;width:auto}
.nav{order:3;display:flex;flex-wrap:wrap;align-items:center;gap:.2rem 1.5rem;width:100%}
.nav a{position:relative;color:var(--on-dark-muted);text-decoration:none;padding-block:.3rem;font-size:.98rem;transition:color .2s}
.nav a:hover,.nav a[aria-current]{color:#fff}
.nav a::after{content:"";position:absolute;inset-inline:0;inset-block-end:-1px;height:2px;background:var(--orange);transform:scaleX(0);transition:transform .3s var(--ease)}
.nav a:hover::after,.nav a:focus-visible::after,.nav a[aria-current]::after{transform:scaleX(1)}
.nav .nav-cta{color:var(--orange-hi);font-weight:700;border:1px solid rgba(243,113,35,.5);border-radius:999px;padding:.2rem 1rem}
.nav .nav-cta::after{display:none}
.nav .nav-cta:hover,.nav .nav-cta[aria-current]{background:var(--orange);color:var(--ink-1);border-color:var(--orange)}
.lang{
  margin-inline-start:auto;color:var(--on-dark);text-decoration:none;font-size:.9rem;line-height:1.6;
  border:1px solid var(--line-d2);border-radius:999px;padding:.2rem .95rem;transition:border-color .2s,color .2s;
}
.lang:hover{border-color:var(--orange);color:var(--orange-hi)}
@media (max-width:599px){
  .nav{justify-content:space-between;column-gap:.7rem}
  .nav a{font-size:.86rem;padding-block:.5rem}
  .nav .nav-cta{padding-inline:.7rem}
}
@media (max-width:399px){
  .site-header{column-gap:1rem}
  .brand img{height:28px}
}
@media (max-width:339px){
  .brand img{height:25px}
}
@media (min-width:900px){
  html{scroll-padding-block-start:5rem}
  header.top{position:sticky;inset-block-start:0}
  .brand img{height:38px}
  .nav{order:0;width:auto;margin-inline-start:auto}
  .lang{margin-inline-start:0}
}
/* six links: tighter on mid-size screens so the sticky header stays on one row, and a short label where the long one cannot fit */
@media (min-width:900px) and (max-width:1099px){
  .site-header{column-gap:1rem}
  .brand img{height:32px}
  .nav{gap:.2rem 1rem}
  .nav a{font-size:.9rem}
  .nav .nav-cta{padding-inline:.8rem}
  .lang{padding-inline:.8rem}
}
.nav .nm{display:none}
@media (max-width:699px){
  .nav .ns{display:none}
  .nav .nm{display:inline}
}
@media (max-width:399px){
  .nav{column-gap:.5rem}
  .nav a{font-size:.82rem}
  .nav .nav-cta{padding-inline:.6rem}
}

/* ---------- Buttons ---------- */
.actions{display:flex;flex-wrap:wrap;gap:.8rem 1rem;margin-top:2.1rem}
.btn{
  position:relative;display:inline-flex;align-items:center;gap:.6rem;padding:.8rem 1.55rem;border:1.5px solid transparent;border-radius:999px;
  font-weight:700;line-height:1.5;text-decoration:none;transition:background-color .15s,border-color .15s,color .15s;
}
.btn .arr{width:1.1rem;height:1.1rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
html[dir="rtl"] .btn .arr{transform:scaleX(-1)}
.btn-primary{background:var(--orange);color:var(--ink-1)}
.btn-primary:hover{background:var(--orange-hi)}
.btn-ghost{border-color:var(--line-d2);color:var(--on-dark)}
.btn-ghost:hover{border-color:var(--orange);color:var(--orange-hi)}

/* ---------- Hero ---------- */
.hero-wrap{
  position:relative;isolation:isolate;overflow:hidden;overflow:clip;background:var(--ink-1);color:var(--on-dark);
  --muted:var(--on-dark-muted);--focus:var(--orange);--gx:24%;
}
html[dir="ltr"] .hero-wrap{--gx:76%}
.hero-bg{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(78% 62% at 50% 112%,rgba(243,113,35,.4),transparent 68%),
    radial-gradient(40% 52% at var(--gx) 40%,rgba(243,113,35,.17),transparent 72%),
    linear-gradient(180deg,#131315 0%,#18181b 58%,#1d1a19 100%);
}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(rgba(240,241,242,.1) 1px,transparent 1.7px) 0 0/30px 30px;
  -webkit-mask-image:radial-gradient(52% 62% at var(--gx) 42%,#000,transparent 80%);
          mask-image:radial-gradient(52% 62% at var(--gx) 42%,#000,transparent 80%);
}
.traces{
  position:absolute;inset:0;width:100%;height:100%;
  transform:translate3d(calc(var(--px,0) * 12px),calc(var(--py,0) * 8px),0) scale(calc(1.05 * var(--flip)),1.05);
  transition:transform .7s var(--ease);
}
.tr path{fill:none;stroke:rgba(240,241,242,.13);stroke-width:1.3;stroke-linejoin:round}
.tr .r,.vi .r,.pl .r{opacity:.5}
.vi circle{fill:var(--ink-1);stroke:rgba(243,113,35,.65);stroke-width:1.5}
.pl .pu{fill:none;stroke:var(--orange-hi);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:.05 1;stroke-dashoffset:.05;display:none}
.skyline{
  position:absolute;inset-inline:0;inset-block-end:46px;width:100%;height:max(96px,15vw);
  transform:translate3d(calc(var(--px,0) * -6px),0,0) scale(calc(1.03 * var(--mir)),1.03);transition:transform .7s var(--ease);
}
.sk-back{fill:#222226}
.sk-front{fill:#121214}
.sk-lm{fill:#0b0b0d}
.sk-ball{fill:rgba(243,113,35,.22);stroke:rgba(243,113,35,.85);stroke-width:1.2}
.rim{fill:none;stroke:rgba(243,113,35,.6);stroke-width:1.1}
.w{fill:#FFC48C}
.w-s{opacity:.55}
.bc{fill:var(--orange)}

.hero{
  position:relative;display:grid;gap:2.5rem;align-items:center;
  padding-block:clamp(2.25rem,5.5vw,4.25rem) clamp(6.5rem,12vw,9.5rem);
  min-height:clamp(520px,calc(100svh - 112px),790px);
}
.hero h1{margin-top:1.4rem;font-size:clamp(2.3rem,5.4vw,4.1rem);line-height:1.3;font-weight:700;max-width:13em;text-wrap:balance}
html[lang="en"] .hero h1{line-height:1.08;letter-spacing:-.02em;max-width:11.5em}
.hl{color:var(--orange-hi)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hl{
    color:transparent;-webkit-background-clip:text;background-clip:text;
    background-image:linear-gradient(100deg,var(--orange-hi) 0%,var(--orange) 38%,#FFD2B0 52%,var(--orange) 66%,var(--orange-hi) 100%);
    background-size:240% 100%;background-position:100% 0;
  }
}
.lead{margin-top:1.4rem;font-size:clamp(1.08rem,1.5vw,1.25rem);color:var(--muted);max-width:32em}
.chip{
  display:inline-flex;align-items:center;gap:.65rem;padding:.38rem 1rem;border:1px solid var(--line-d2);border-radius:18px;
  background:rgba(255,255,255,.04);font-size:.88rem;line-height:1.5;color:var(--on-dark-muted);
}
html[lang="en"] .chip{font-family:var(--mono);font-size:.76rem;letter-spacing:.06em;text-transform:uppercase}
@media (max-width:520px){html[lang="en"] .chip{font-size:.64rem;letter-spacing:.03em;padding-inline:.8rem;gap:.5rem}}
.led{display:inline-block;flex:none;width:7px;height:7px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 3px rgba(243,113,35,.22),0 0 12px var(--orange)}

@media (min-width:900px){
  .hero{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}
}

/* Art column: the keyhole in a HUD frame, with the terminal tucked against it on wide screens */
.hero-art{position:relative;width:100%;display:grid;justify-items:center}
.frame{
  position:relative;width:min(80%,330px);padding:1.4rem;
  transform:translate3d(calc(var(--px,0) * -14px),calc(var(--py,0) * -10px),0);transition:transform .7s var(--ease);
}
@media (min-width:900px){.frame{width:min(100%,330px);justify-self:start}}
.frame::before,.svc::after,.ccard::after{
  content:"";position:absolute;pointer-events:none;--c:rgba(243,113,35,.8);--b:16px;
  background:
    linear-gradient(var(--c),var(--c)) 0 0/var(--b) 1.5px no-repeat,
    linear-gradient(var(--c),var(--c)) 0 0/1.5px var(--b) no-repeat,
    linear-gradient(var(--c),var(--c)) 100% 0/var(--b) 1.5px no-repeat,
    linear-gradient(var(--c),var(--c)) 100% 0/1.5px var(--b) no-repeat,
    linear-gradient(var(--c),var(--c)) 0 100%/var(--b) 1.5px no-repeat,
    linear-gradient(var(--c),var(--c)) 0 100%/1.5px var(--b) no-repeat,
    linear-gradient(var(--c),var(--c)) 100% 100%/var(--b) 1.5px no-repeat,
    linear-gradient(var(--c),var(--c)) 100% 100%/1.5px var(--b) no-repeat;
}
.frame::before{inset:0}
.tag{position:absolute;inset-inline-start:1.4rem;inset-block-end:-.55rem;padding-inline:.5rem;background:var(--ink-1);font:500 .66rem/1.2 var(--mono);letter-spacing:.1em;color:rgba(240,241,242,.55);white-space:nowrap}
.kh{width:100%;height:auto;filter:drop-shadow(0 0 28px rgba(243,113,35,.2))}

.term{
  display:none;position:absolute;inset-inline-end:-1rem;inset-block-end:-.4rem;z-index:2;width:min(64%,300px);
  font:400 .78rem/1.85 var(--mono);color:#dcdde0;background:rgba(12,12,14,.74);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid var(--line-d2);border-radius:12px;box-shadow:0 30px 60px -28px #000,inset 0 1px 0 rgba(255,255,255,.07);overflow:hidden;
}
@media (min-width:1280px){.term{display:block}}
html[dir="rtl"] .term{inset-inline-end:auto;inset-inline-start:-1rem}
html[dir="rtl"] .tag{inset-inline-start:auto;inset-inline-end:1.4rem}
.term-bar{display:flex;align-items:center;gap:.4rem;padding:.55rem .8rem;border-block-end:1px solid var(--line-d);color:var(--on-dark-muted);font-size:.68rem}
.term-bar i{width:9px;height:9px;border-radius:50%;background:#3b3b3f}
.term-bar i:first-child{background:var(--orange)}
.term-bar span{margin-inline-start:.55rem;letter-spacing:.02em}
.term-body{padding:.75rem 1rem .95rem;white-space:pre}
.ln{display:flex;align-items:baseline;gap:.5ch;margin:0}
.ln b{color:var(--orange);font-weight:500}
.cmd{display:inline-block;overflow:hidden;white-space:pre;vertical-align:bottom;width:calc(var(--n,8) * 1ch)}
.st{margin-inline-start:auto;font-style:normal;font-size:.7rem;letter-spacing:.04em}
.st.ok::after{content:"[ ok ]";color:var(--orange-hi)}
.st.live::after{content:"● live";color:#fff}
.st.wait::after{content:"○ standby";color:#8d8e94}
.l1{--n:24;--d:.9s}
.l2{--n:18;--d:2s}
.l3{--n:18;--d:3s}
.l4{--n:20;--d:4s}
.l5{--n:19;--d:5.1s}
.l6{--n:17;--d:6.1s}
.l7{--d:7.1s}
.caret{display:inline-block;width:.6ch;height:1.05em;background:var(--orange);vertical-align:-.15em}

/* Strip of technology names along the foot of the hero */
.ticker{
  position:absolute;inset-inline:0;inset-block-end:0;z-index:1;height:46px;
  background:rgba(10,10,12,.8);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-block-start:1px solid var(--line-d);
}
.ticker-in{display:flex;align-items:center;gap:1.25rem;height:100%}
.ticker-label{flex:none;display:inline-flex;align-items:center;gap:.6rem;font-size:.82rem;color:var(--on-dark-muted);white-space:nowrap}
html[lang="en"] .ticker-label{font:500 .7rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.ticker-view{
  flex:1;min-width:0;overflow:hidden;direction:ltr;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.ticker-track{display:flex;width:max-content}
.tk{display:flex;flex:none}
.tk span{position:relative;padding-inline:1.15rem;font:500 .76rem/46px var(--mono);letter-spacing:.07em;text-transform:uppercase;color:rgba(240,241,242,.64);white-space:nowrap}
.tk span::after{content:"";position:absolute;inset-inline-end:-3px;inset-block-start:50%;width:6px;height:6px;margin-top:-3px;background:var(--orange);transform:rotate(45deg);opacity:.85}
@media (max-width:640px){.ticker-label{display:none}}

/* ---------- Shared section parts ---------- */
.section{padding-block:clamp(3.75rem,8vw,6.75rem)}
.section>.wrap,.contact>.wrap{position:relative;z-index:1}
.sec-head{max-width:46rem}
.kicker{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem;font:500 .76rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--orange-ink)}
.dark .kicker{color:var(--orange-hi)}
.kicker span+span{display:inline-flex;align-items:center;gap:.75rem}
.kicker span+span::before{content:"";width:2.2rem;height:1px;background:currentColor;opacity:.6}
h2{font-size:clamp(1.8rem,3.5vw,2.7rem);line-height:1.35;font-weight:700;text-wrap:balance}
html[lang="en"] h2{line-height:1.15;letter-spacing:-.015em}
h3{font-size:1.15rem;line-height:1.5;font-weight:700}
.section-intro{margin-top:1rem;color:var(--muted);max-width:34em}
.prose p+p{margin-top:1.1rem}
.prose{max-width:38em}
.split{display:grid;gap:2.5rem}
@media (min-width:900px){
  .split{grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr);gap:4rem}
}

.ico-box{
  display:grid;place-items:center;width:48px;height:48px;margin-bottom:1.1rem;border-radius:12px;
  color:var(--orange-ink);background:rgba(243,113,35,.1);border:1px solid rgba(243,113,35,.32);
}
.dark .ico-box{color:var(--orange-hi);background:rgba(243,113,35,.12);border-color:rgba(243,113,35,.4)}
.ico{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

.chips{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.4rem}
.chips li{
  padding:.42rem .65rem;border:1px solid var(--line);border-radius:999px;font:400 .76rem/1 var(--mono);
  color:#4a4c50;background:rgba(37,37,39,.04);direction:ltr;unicode-bidi:isolate;
}
.dark .chips li{color:var(--on-dark-muted);background:rgba(255,255,255,.035);border-color:var(--line-d2)}

/* Spotlight that follows the pointer on cards (position is set by the script; without it the glow simply sits at the top) */
.svc::before,.step::before,.ccard::before,.ai-card::before,.ai-trust::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;opacity:0;transition:opacity .35s;
  background:radial-gradient(280px circle at var(--mx,50%) var(--my,0),rgba(243,113,35,.18),transparent 65%);
}
.ai-card::before{background:radial-gradient(280px circle at var(--mx,50%) var(--my,0),rgba(243,113,35,.1),transparent 65%)}

/* ---------- About ---------- */
.stats{list-style:none;padding:0;margin-block:3.25rem 0;display:grid;gap:1rem;grid-template-columns:repeat(3,minmax(0,1fr))}
.stat{position:relative;padding:1.4rem 1.3rem 1.3rem;background:#fff;border:1px solid var(--line);border-radius:var(--r-card);box-shadow:0 18px 40px -30px rgba(37,37,39,.5)}
.stat::before{content:"";position:absolute;inset-inline-start:1.3rem;inset-block-start:0;width:2.2rem;height:3px;border-radius:0 0 3px 3px;background:var(--orange)}
.stat .n{display:block;font:700 clamp(2.1rem,4.6vw,3.3rem)/1.05 var(--mono);letter-spacing:-.03em;color:var(--orange-ink);font-variant-numeric:tabular-nums}
html[dir="rtl"] .stat .n{direction:ltr;text-align:right}   /* keeps the "+" after the number in an RTL page */
.stat .lbl{display:block;margin-top:.6rem;color:var(--muted);font-size:.95rem;line-height:1.55}
@media (max-width:559px){
  .stats{grid-template-columns:1fr;gap:.75rem}
  .stat{display:flex;align-items:baseline;gap:1rem;padding-block:1.1rem}
  .stat .n{flex:none;min-width:4.4ch}
  .stat .lbl{margin:0}
}
.vm{display:grid;gap:1rem;margin-top:1rem}
@media (min-width:760px){.vm{grid-template-columns:repeat(2,minmax(0,1fr))}}
.vm-item{padding:1.8rem 1.7rem;background:#fff;border:1px solid var(--line);border-radius:var(--r-card)}
.vm-item h3{margin-bottom:.5rem}
.vm-item p{color:var(--muted)}
.vm-item p+p{margin-top:.8rem}

/* ---------- Services ---------- */
.svc-grid{list-style:none;padding:0;margin-top:3rem;display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,19.5rem),1fr))}
.svc{
  position:relative;display:flex;flex-direction:column;isolation:isolate;padding:1.6rem 1.5rem 1.5rem;
  border:1px solid var(--line-d);border-radius:var(--r-card);background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
}
.svc::after{inset:9px;opacity:0;transition:opacity .35s;border-radius:calc(var(--r-card) - 5px)}
.svc .idx,.step .num{position:absolute;inset-block-start:1.15rem;inset-inline-end:1.25rem;font:500 .78rem/1 var(--mono);letter-spacing:.08em;color:rgba(240,241,242,.4)}
.svc h3{font-size:1.2rem;margin-bottom:.5rem}
.svc p{color:var(--on-dark-muted);font-size:1rem}
main p{text-wrap:pretty}
.svc .chips{margin-top:auto;padding-top:1.2rem}
.svc p+.chips{margin-top:auto}
.svc>p{margin-bottom:0}

/* ---------- Technologies ---------- */
/* Every area is open at once: a rail (icon and title) on one side, the capabilities with their product chips on the other.
   All product names are chips of the same kind, whatever the vendor. */
.matrix{margin-top:3rem;background:#fff;border:1px solid var(--line);border-radius:var(--r-card);overflow:clip;box-shadow:0 22px 44px -34px rgba(37,37,39,.5)}
.band{display:grid;gap:1.1rem 3rem;padding:1.4rem clamp(1.1rem,2.6vw,2rem);border-block-start:1px solid var(--line)}
.band:first-child{border-block-start:0}
.rail{position:relative;display:flex;align-items:center;gap:.9rem}
.rail .ico-box{flex:none;width:44px;height:44px;margin:0}
.rail h3{flex:1;font-size:1.12rem}
.caps{margin:0;display:grid;gap:1.15rem 2.5rem}
.caps[hidden]{display:none}
.cap dt{margin-bottom:.5rem;font-size:.94rem;font-weight:600;line-height:1.5}
.cap dd{margin:0}
/* narrow screens: the script folds the bands (the buttons stay hidden without it); a plus becomes a minus */
.band-toggle{
  flex:none;width:2rem;height:2rem;padding:0;border:0;cursor:pointer;color:var(--orange-ink);
  background:linear-gradient(currentColor,currentColor) center/.95rem 2px no-repeat,linear-gradient(currentColor,currentColor) center/2px .95rem no-repeat;
}
.band-toggle[aria-expanded="true"]{background-size:.95rem 2px,2px 0}
.band-toggle::before{content:"";position:absolute;inset:-.4rem 0}   /* the whole row is the tap target */
@media (min-width:700px){
  .caps{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:900px){
  .band{grid-template-columns:14.5rem minmax(0,1fr);gap:2rem 3.25rem;padding-block:1.85rem}
  .rail{align-self:start;position:sticky;inset-block-start:5.5rem}
}

/* ---------- Approach ---------- */
.steps{list-style:none;padding:0;margin-top:3rem;display:grid;gap:1.4rem}
@media (min-width:700px){.steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem}}
@media (min-width:1000px){.steps{grid-template-columns:repeat(3,minmax(0,1fr))}}
.step{position:relative;isolation:isolate;padding:1.6rem 1.5rem;border:1px solid var(--line-d);border-radius:var(--r-card);background:rgba(255,255,255,.03)}
.step h3{margin-bottom:.45rem}
.step p{color:var(--on-dark-muted)}
/* wire to the next step */
.step::after{content:"";position:absolute;inset-inline-start:2.35rem;inset-block-start:100%;width:1px;height:1.4rem;background:var(--line-d2)}
.step:last-child::after{display:none}
@media (min-width:700px){
  .step::after{inset-inline-start:100%;inset-block-start:2.85rem;width:1.1rem;height:1px}
  .step:nth-child(2n)::after{display:none}
}
@media (min-width:1000px){
  .step:nth-child(2n)::after{display:block}
  .step:nth-child(3n)::after{display:none}
}

/* ---------- Why ---------- */
.points{list-style:none;padding:0;margin-top:2.75rem;display:grid;gap:1rem}
@media (min-width:640px){.points{grid-template-columns:repeat(2,minmax(0,1fr))}}
.point{position:relative;padding:1.4rem 1.5rem;background:#fff;border:1px solid var(--line);border-radius:var(--r-card)}
.point::after{content:"";position:absolute;inset-inline-start:1.5rem;inset-block-start:-1px;width:2rem;height:3px;border-radius:0 0 3px 3px;background:var(--orange)}
.point .idx{display:block;margin-bottom:.65rem;font:500 .78rem/1 var(--mono);letter-spacing:.08em;color:var(--orange-ink)}
.point h3{font-size:1.08rem;margin-bottom:.35rem}
.point p{color:var(--muted)}
.values-head{margin-top:4.5rem}
.values{margin-top:1.5rem;display:grid;gap:1rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){
  .values{grid-template-columns:repeat(2,minmax(0,1fr))}
  .values>:last-child{grid-column:1/-1}
}
@media (min-width:900px){
  .values{grid-template-columns:repeat(6,minmax(0,1fr))}
  .values>*{grid-column:span 2}
  .values>:nth-child(n+4){grid-column:span 3}
}
.value{padding:1.35rem 1.4rem;border-radius:var(--r-card);background:#222225;color:var(--on-dark)}
.value .ico{width:26px;height:26px;margin-bottom:.9rem;color:var(--orange-hi)}
.value h3{font-size:1.08rem;margin-bottom:.3rem}
.value p{color:var(--on-dark-muted);font-size:.97rem;line-height:1.7}

/* ---------- AI: vision and solutions ---------- */
.ai-v{display:grid;gap:3rem;align-items:center}
@media (min-width:900px){.ai-v{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:4.5rem}}
.ai-v-copy .prose{margin-top:1.7rem}
.ai-v-copy .prose p{color:var(--on-dark-muted)}
.ai-v-copy .prose p:first-child{color:var(--on-dark);font-size:1.16rem}
.ai-v-art{position:relative;display:grid;justify-items:center;padding-block-end:.5rem}
.frame.ai-frame{width:min(100%,400px);justify-self:center;padding:1.15rem}
.ai-frame .tag{inset-block:-.55rem auto;background:#141416}   /* on the top edge: the console covers the bottom one */
.ainet{width:100%;height:auto;overflow:visible}
html[dir="rtl"] .ainet{transform:scaleX(-1)}   /* the flow runs with the reading direction */

/* the network: sources -> gate -> model -> answers */
.ainet .le{fill:none;stroke:rgba(240,241,242,.2);stroke-width:1;stroke-dasharray:1}
.ainet .gate{fill:none;stroke:rgba(243,113,35,.78);stroke-width:1.4;stroke-dasharray:3 5;stroke-linecap:round}
.ainet .gate-glow{fill:none;stroke:rgba(243,113,35,.16);stroke-width:9;stroke-linecap:round}
.ainet .in{fill:#141416;stroke:#9A9BA1;stroke-width:1.4}
.ainet .nd{fill:#F0F1F2}
.ainet .out{fill:var(--orange)}
.ainet .pk,.ainet .ping{display:none}
.ainet .lk-bg{fill:#141416;stroke:rgba(243,113,35,.7);stroke-width:1.4}
.ainet .lk-sh{fill:none;stroke:var(--orange-hi);stroke-width:1.8;stroke-linecap:round}
.ainet .lk-body{fill:var(--orange)}
.ainet .lk-dot{fill:#141416}

/* the console tucked against the frame, as in the hero */
.ai-term{
  display:none;position:relative;z-index:2;width:min(88%,340px);justify-self:end;margin-block-start:-1.9rem;
  font:400 .78rem/1.85 var(--mono);color:#dcdde0;background:rgba(12,12,14,.8);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid var(--line-d2);border-radius:12px;box-shadow:0 30px 60px -28px #000,inset 0 1px 0 rgba(255,255,255,.07);overflow:hidden;
}
@media (min-width:900px){.ai-term{display:block}}
.a1{--n:24;--d:.9s}
.a2{--n:24;--d:2s}
.a3{--n:22;--d:3.1s}
.a4{--n:20;--d:4.2s}
.a5{--n:19;--d:5.3s}
.a6{--d:6.4s}
/* art that plays its entrance when it scrolls into view: the script adds .armed first and removes it when the art is seen */
[data-play].armed *{animation-play-state:paused!important}

/* the five commitments and the one-line promise */
.ai-pr-head{margin-top:clamp(3.25rem,7vw,5.25rem)}
.ai-pr-head h3{font-size:clamp(1.35rem,2.6vw,1.85rem);line-height:1.4}
html[lang="en"] .ai-pr-head h3{line-height:1.2}
.ai-pgrid{margin-top:2rem}
.ai-quote{position:relative;display:flex;align-items:center;padding:1.8rem 1.6rem;border-radius:var(--r-card);background:var(--orange);color:var(--ink-1);overflow:hidden}
.ai-quote::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(rgba(22,22,24,.24) 1px,transparent 1.6px) 0 0/16px 16px;
  -webkit-mask-image:linear-gradient(135deg,#000,transparent 62%);mask-image:linear-gradient(135deg,#000,transparent 62%);
}
html[dir="rtl"] .ai-quote::before{-webkit-mask-image:linear-gradient(225deg,#000,transparent 62%);mask-image:linear-gradient(225deg,#000,transparent 62%)}
.ai-quote blockquote{position:relative;margin:0}
.ai-quote p{font-size:clamp(1.25rem,2.2vw,1.6rem);font-weight:700;line-height:1.5}
html[lang="en"] .ai-quote p{line-height:1.25;letter-spacing:-.01em}
.ai-quote p span{display:block}

/* the six areas */
.ai-grid{list-style:none;padding:0;margin-top:3rem;display:grid;gap:1rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:680px){.ai-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1040px){.ai-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ai-card{position:relative;isolation:isolate;display:flex;flex-direction:column;padding:1.6rem 1.5rem 1.5rem;background:#fff;border:1px solid var(--line);border-radius:var(--r-card)}
.ai-card::after{content:"";position:absolute;inset-inline-start:1.5rem;inset-block-start:-1px;width:2rem;height:3px;border-radius:0 0 3px 3px;background:var(--orange)}
.ai-card .idx{position:absolute;inset-block-start:1.15rem;inset-inline-end:1.25rem;font:500 .78rem/1 var(--mono);letter-spacing:.08em;color:rgba(37,37,39,.4)}
.ai-card h3{font-size:1.18rem;margin-bottom:.45rem}
.ai-card p{color:var(--muted)}
.ai-card .tags{margin-top:auto;padding-top:1.2rem}
.ai-card p+.tags{margin-top:auto}

/* descriptive labels (chips are for Latin product names; these follow the page's own font and direction) */
.tags{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.4rem}
.tags li{padding:.38rem .75rem;border:1px solid var(--line);border-radius:999px;font-size:.84rem;line-height:1.4;color:#4a4c50;background:rgba(37,37,39,.04)}
.dark .tags li{color:var(--on-dark-muted);background:rgba(255,255,255,.04);border-color:var(--line-d2)}

/* trust panel (dark, inside the light section) and the closing call to action */
.ai-trust{
  position:relative;isolation:isolate;margin-top:1.25rem;padding:clamp(1.6rem,3.6vw,2.7rem);display:grid;gap:1.6rem;align-items:center;
  border:1px solid rgba(240,241,242,.08);border-radius:var(--r-card);
  background:radial-gradient(60% 110% at 100% 0,rgba(243,113,35,.17),transparent 70%),#1b1b1e;
}
html[dir="rtl"] .ai-trust{background:radial-gradient(60% 110% at 0 0,rgba(243,113,35,.17),transparent 70%),#1b1b1e}
@media (min-width:900px){.ai-trust{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:3rem}}
.ai-trust h3{font-size:clamp(1.35rem,2.6vw,1.8rem);line-height:1.4;margin-bottom:.55rem}
html[lang="en"] .ai-trust h3{line-height:1.2}
.ai-trust p{color:var(--on-dark-muted)}
.ai-trust .tags li{font-size:.9rem;padding:.45rem .85rem}
.ai-cta{
  position:relative;isolation:isolate;overflow:hidden;margin-top:1.25rem;display:grid;gap:1.4rem;align-items:center;
  padding:clamp(1.5rem,3vw,2.2rem) clamp(1.5rem,3.6vw,2.7rem);border-radius:var(--r-card);background:var(--orange);color:var(--ink-1);
}
.ai-cta::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(rgba(22,22,24,.2) 1px,transparent 1.6px) 0 0/16px 16px;
  -webkit-mask-image:linear-gradient(90deg,transparent 30%,#000);mask-image:linear-gradient(90deg,transparent 30%,#000);
}
html[dir="rtl"] .ai-cta::before{-webkit-mask-image:linear-gradient(270deg,transparent 30%,#000);mask-image:linear-gradient(270deg,transparent 30%,#000)}
@media (min-width:780px){.ai-cta{grid-template-columns:minmax(0,1fr) auto;gap:2.5rem}}
.ai-cta h3{font-size:clamp(1.25rem,2.4vw,1.65rem);line-height:1.4;margin-bottom:.55rem;text-wrap:balance}
html[lang="en"] .ai-cta h3{line-height:1.2}
.ai-cta p{max-width:42em;color:rgba(22,22,24,.9)}
.btn-ink{background:var(--ink-1);color:#fff;border-color:var(--ink-1)}
.btn-ink:hover{background:#000;color:var(--orange-hi)}

/* ---------- Contact + footer ---------- */
.contact{position:relative;padding-block:clamp(3.75rem,8vw,6.5rem)}
.radar-wrap{position:absolute;inset:0;overflow:hidden;overflow:clip;pointer-events:none}
.radar{
  --R:min(94vw,700px);
  position:absolute;width:var(--R);aspect-ratio:1;border-radius:50%;
  inset-block-start:76%;margin-block-start:calc(var(--R) / -2);inset-inline-end:calc(50% - var(--R) / 2);
  background:
    linear-gradient(rgba(240,241,242,.08),rgba(240,241,242,.08)) 50% 0/1px 100% no-repeat,
    linear-gradient(rgba(240,241,242,.08),rgba(240,241,242,.08)) 0 50%/100% 1px no-repeat,
    conic-gradient(from var(--ang),rgba(243,113,35,0) 0deg,rgba(243,113,35,0) 250deg,rgba(243,113,35,.34) 359deg,rgba(243,113,35,0) 360deg),
    repeating-radial-gradient(circle,transparent 0 62px,rgba(240,241,242,.085) 62px 63px);
  -webkit-mask-image:radial-gradient(circle,#000 54%,transparent 71%);
          mask-image:radial-gradient(circle,#000 54%,transparent 71%);
}
@media (min-width:900px){
  /* centred on the contact card: half of the card's width in from the end edge of the content column */
  .radar{inset-block-start:50%;inset-inline-end:calc((100% - min(100% - 2 * var(--gutter),var(--max))) / 2 + 17rem - var(--R) / 2)}
}
.contact-grid{align-items:center}
@media (min-width:900px){.contact-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}}
.ccard{width:100%;max-width:34rem;justify-self:end}
.ccard{position:relative;isolation:isolate;padding:2rem;border:1px solid var(--line-d2);border-radius:var(--r-card);background:rgba(14,14,16,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.ccard::after{inset:9px;border-radius:calc(var(--r-card) - 5px);opacity:.55}
.mail{
  display:block;padding-block-end:1.2rem;font-size:clamp(1.25rem,3.6vw,2rem);font-weight:700;line-height:1.35;color:var(--orange-hi);
  text-decoration:none;border-block-end:1px solid var(--line-d2);overflow-wrap:anywhere;transition:color .2s;
}
.mail:hover{color:#fff}
.clist{list-style:none;padding:0;margin:1.3rem 0 0;display:grid;gap:.85rem}
.clist li{display:flex;align-items:flex-start;gap:.85rem;color:var(--on-dark-muted)}
.clist .ico{flex:none;width:20px;height:20px;margin-top:.3rem;color:var(--orange-hi)}
.clist .sp{flex:none;width:20px}
.phone{font-size:1.25rem;font-weight:700;color:var(--on-dark);text-decoration:none;transition:color .2s}
.phone:hover{color:var(--orange-hi)}
.note.small{font-size:.92rem;line-height:1.7}
/* company profile download: a quiet row under the address, set off by a hairline like the e-mail above */
.clist .pdf-li{align-items:center;margin-block-start:.35rem;padding-block-start:1.1rem;border-block-start:1px solid var(--line-d2)}
.clist .pdf-li .ico{margin-block-start:0}
.pdf{font-weight:600;color:var(--on-dark);text-decoration:none;border-block-end:1px solid rgba(240,241,242,.3);transition:color .2s,border-color .2s}
.pdf:hover{color:var(--orange-hi);border-color:var(--orange)}

.site-footer{border-block-start:1px solid var(--line-d);padding-block:2rem;color:var(--on-dark-muted);font-size:.95rem;--sec-bg:var(--ink-1)}
.foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem 2rem}
.foot-brand img{height:30px;width:auto}
.foot-brand p{margin-top:.6rem}
.foot-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.5rem}
.site-footer a{color:var(--on-dark);text-decoration:none;border-block-end:1px solid rgba(240,241,242,.3)}
.site-footer a:hover{border-color:var(--orange)}

/* 404 */
.page-404{background:var(--ink-1);color:var(--on-dark);--muted:var(--on-dark-muted);--focus:var(--orange)}
.notfound{min-height:62vh;display:grid;align-content:center;gap:2.5rem;padding-block:4rem}
.notfound h1{font-size:clamp(1.9rem,4.4vw,3rem);line-height:1.35;font-weight:700}
.notfound p{margin-top:.75rem;color:var(--muted)}
.notfound .actions{margin-top:1.25rem}

/* ---------- Section colours and the slight diagonal where they meet ---------- */
main>section:not(.top){position:relative;background:var(--sec-bg,var(--paper));--cut:clamp(20px,3vw,46px)}
#about,#technologies{--sec-bg:var(--paper-2)}
#services{--sec-bg:#1a1a1d}
#ai-vision{--sec-bg:#141416}
#approach{--sec-bg:#202023}
#contact{--sec-bg:#1c1c1f}
main>section:nth-child(n+3)::before{
  content:"";position:absolute;inset-inline:0;inset-block-start:calc(1px - var(--cut));height:var(--cut);
  background:var(--sec-bg,var(--paper));pointer-events:none;clip-path:polygon(0 100%,100% 0,100% 100%);
}
html[dir="rtl"] main>section:nth-child(n+3)::before{clip-path:polygon(0 0,100% 100%,0 100%)}
/* quiet dot grid on the light sections */
#about::after,#technologies::after,#why::after,#ai-solutions::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(rgba(37,37,39,.16) 1px,transparent 1.6px) 0 0/26px 26px;
  -webkit-mask-image:radial-gradient(52% 58% at 100% 0,#000,transparent 72%);
          mask-image:radial-gradient(52% 58% at 100% 0,#000,transparent 72%);
}
#technologies::after{-webkit-mask-image:radial-gradient(48% 52% at 0 100%,#000,transparent 72%);mask-image:radial-gradient(48% 52% at 0 100%,#000,transparent 72%)}
#ai-solutions::after{-webkit-mask-image:radial-gradient(48% 40% at 0 0,#000,transparent 72%);mask-image:radial-gradient(48% 40% at 0 0,#000,transparent 72%)}
html[dir="rtl"] #ai-solutions::after{-webkit-mask-image:radial-gradient(48% 40% at 100% 0,#000,transparent 72%);mask-image:radial-gradient(48% 40% at 100% 0,#000,transparent 72%)}
/* quiet ambient light on the dark sections */
#services::after,#approach::after,#ai-vision::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none}
#ai-vision::after{background:radial-gradient(44% 52% at 80% 30%,rgba(243,113,35,.17),transparent 70%),radial-gradient(38% 40% at 0 100%,rgba(243,113,35,.07),transparent 70%)}
html[dir="rtl"] #ai-vision::after{background:radial-gradient(44% 52% at 20% 30%,rgba(243,113,35,.17),transparent 70%),radial-gradient(38% 40% at 100% 100%,rgba(243,113,35,.07),transparent 70%)}
#services::after{background:radial-gradient(46% 52% at 88% 0,rgba(243,113,35,.12),transparent 70%),radial-gradient(40% 40% at 0 100%,rgba(243,113,35,.07),transparent 70%)}
#approach::after{
  background:linear-gradient(rgba(240,241,242,.04) 1px,transparent 1px) 0 0/56px 56px,linear-gradient(90deg,rgba(240,241,242,.04) 1px,transparent 1px) 0 0/56px 56px;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);
}

/* Cross-fade between the Arabic and English pages where the browser supports it. */
@view-transition{navigation:auto}

/* ---------- Hover (no layout effects on touch) ---------- */
@media (hover:hover){
  .svc:hover,.step:hover,.ccard:hover{border-color:rgba(243,113,35,.55)}
  .svc:hover::before,.step:hover::before,.ccard:hover::before,.ai-card:hover::before,.ai-trust:hover::before{opacity:1}
  .svc:hover::after{opacity:1}
  .point:hover,.vm-item:hover,.stat:hover,.ai-card:hover{border-color:rgba(243,113,35,.5)}
}

/* ---------- Motion (all of it opt-in: nothing runs for reduced-motion users) ---------- */
@property --ang{syntax:"<angle>";inherits:false;initial-value:0deg}
@media (prefers-reduced-motion:no-preference){
  @keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
  @keyframes fade{from{opacity:0}to{opacity:1}}
  @keyframes drop{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
  @keyframes led{0%,100%{opacity:1}50%{opacity:.45}}
  @keyframes shimmer{to{background-position:0 0}}
  @keyframes trace-run{to{stroke-dashoffset:-1}}
  @keyframes twinkle{0%,100%{opacity:.18}50%{opacity:1}}
  @keyframes beacon{0%,100%{opacity:1}50%{opacity:.15}}
  @keyframes tick{to{transform:translateX(-50%)}}
  @keyframes type{from{width:0}}
  @keyframes blink{50%{opacity:0}}
  @keyframes spin-ang{to{--ang:360deg}}
  @keyframes run{
    0%,17%{background:rgba(243,113,35,.12);color:var(--orange-hi);box-shadow:0 0 0 0 rgba(243,113,35,0)}
    3%,12%{background:var(--orange);color:var(--ink-1);box-shadow:0 0 0 6px rgba(243,113,35,.18),0 0 26px rgba(243,113,35,.55)}
  }
  @keyframes run-wire{0%,17%{background:var(--line-d2)}3%,12%{background:var(--orange)}}

  /* load-in */
  .site-header{animation:drop .6s var(--ease) backwards}
  .hero-copy>*{animation:rise .75s var(--ease) backwards}
  .hero-copy>h1{animation-delay:.08s}
  .hero-copy>.lead{animation-delay:.2s}
  .hero-copy>.actions{animation-delay:.32s}
  .hero-art{animation:fade 1.1s ease-out .1s backwards}
  .tr,.vi{animation:fade 1.6s ease-out .2s backwards}
  .skyline{animation:fade 1.4s ease-out .1s backwards}
  .hl{animation:shimmer 7s linear 1.2s infinite alternate}
  .led{animation:led 2.4s ease-in-out infinite}

  /* circuit pulses: a short light travelling down a few traces */
  .pl .pu{display:inline;animation:trace-run var(--pd,6s) linear var(--pt,0s) infinite}
  .u0{--pd:5.5s;--pt:.4s}
  .u1{--pd:7s;--pt:1.8s}
  .u2{--pd:6s;--pt:3s}
  .u3{--pd:8s;--pt:.9s}
  .u4{--pd:6.5s;--pt:2.4s}
  .u5{--pd:7.5s;--pt:4s}
  .w-a{animation:twinkle 5s ease-in-out infinite}
  .w-b{animation:twinkle 7s ease-in-out 1.4s infinite}
  .w-c{animation:twinkle 6s ease-in-out 2.6s infinite}
  .bc{animation:beacon 2.6s ease-in-out infinite}
  .bc1{animation-delay:.8s}
  .bc2{animation-delay:1.6s}

  /* terminal types itself out */
  .ln{animation:fade .01s linear var(--d,0s) backwards}
  .cmd{animation:type .9s steps(var(--n,8),end) var(--d,0s) backwards}
  .st{animation:fade .25s ease-out calc(var(--d,0s) + .95s) backwards}
  .caret{animation:blink 1s steps(1) infinite}

  .ticker-track{animation:tick 90s linear infinite}

  /* primary button: a bright arc runs round the edge */
  .btn-primary::before{
    content:"";position:absolute;inset:-4px;border-radius:inherit;padding:2px;pointer-events:none;
    background:conic-gradient(from var(--ang),transparent 0 62%,rgba(246,138,71,.2) 78%,#FFD9BF 100%);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
            mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
    animation:spin-ang 3.4s linear infinite;
  }
  .radar{animation:spin-ang 8s linear infinite}

  /* approach: the six steps light up in turn, like a process running */
  .step .ico-box{animation:run 12s linear infinite;animation-delay:calc(var(--k,0) * 2s)}
  .step::after{animation:run-wire 12s linear infinite;animation-delay:calc(var(--k,0) * 2s)}
  .step:nth-child(1){--k:0}
  .step:nth-child(2){--k:1}
  .step:nth-child(3){--k:2}
  .step:nth-child(4){--k:3}
  .step:nth-child(5){--k:4}
  .step:nth-child(6){--k:5}

  /* hover and focus */
  .btn{transition:background-color .15s,border-color .15s,color .15s,transform .2s var(--ease),box-shadow .25s}
  .band-toggle{transition:background-size .3s var(--ease)}
  .svc,.step,.point,.vm-item,.stat,.ccard,.ai-card{transition:border-color .3s,transform .35s var(--ease),box-shadow .35s}
  @media (hover:hover){
    .btn:hover{transform:translateY(-2px)}
    .btn:active{transform:none}
    .btn-primary:hover{box-shadow:0 12px 26px -12px rgba(243,113,35,.8)}
    .btn-ink:hover{box-shadow:0 12px 26px -12px rgba(22,22,24,.8)}
    .svc:hover,.step:hover{transform:translateY(-4px);box-shadow:0 28px 54px -30px rgba(243,113,35,.5)}
    .point:hover,.vm-item:hover,.stat:hover,.ai-card:hover{transform:translateY(-3px);box-shadow:0 26px 50px -30px rgba(37,37,39,.5)}
    .svc:hover .ico,.step:hover .ico{animation:rise .5s var(--ease)}
  }
}

/* Scroll-linked: a progress line along the top. */
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    @keyframes progress{to{transform:scaleX(1)}}
    body::before{
      content:"";position:fixed;inset-block-start:0;inset-inline:0;height:3px;z-index:90;pointer-events:none;
      background:linear-gradient(90deg,var(--orange),var(--orange-hi));
      transform:scaleX(0);transform-origin:0 50%;
      animation:progress linear both;animation-timeline:scroll(root block);
    }
    html[dir="rtl"] body::before{transform-origin:100% 50%;background:linear-gradient(270deg,var(--orange),var(--orange-hi))}
  }
}

/* Scroll-linked reveals. Blocks rise in as they enter the screen. Keyframes only name the start state,
   so the end state is simply the normal page, and hover transforms keep working afterwards. */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    @keyframes reveal{from{opacity:0;transform:translateY(28px)}}
    .sec-head>*,.prose,.stat,.vm-item,.svc,.band,.step,.point,.value,.ccard,.ai-card,.ai-quote,.ai-trust,.ai-cta{
      animation:reveal linear backwards;animation-timeline:view();animation-range:entry 4% entry 52%;
    }
    .svc:nth-child(3n+2),.step:nth-child(3n+2),.ai-card:nth-child(3n+2),.point:nth-child(even),.stat:nth-child(2),.value:nth-child(even){animation-range:entry 10% entry 58%}
    .svc:nth-child(3n),.step:nth-child(3n),.ai-card:nth-child(3n),.stat:nth-child(3){animation-range:entry 16% entry 64%}
    /* the ico-box of a step keeps its looping glow, so only the card itself reveals */
  }
}

/* Depth: the art lags a little behind the page as you leave the hero. */
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    @keyframes lag{to{transform:translateY(var(--lag,60px))}}
    .hero-art{
      animation:fade 1.1s ease-out .1s backwards,lag linear both;
      animation-timeline:auto,scroll(root block);animation-range:normal,0 700px;
    }
    @media (max-width:899px){.hero-art{--lag:32px}}
  }
}

/* Keyhole network: drawn once on load, then it idles: traffic arrives from outside, a light scans the outline,
   inner nodes ping. The idle layer is skipped for people who prefer reduced motion. */
.kh .shape{fill:var(--orange);fill-opacity:.14}
.kh .e{fill:none;stroke:#F0F1F2;stroke-opacity:.34;stroke-width:1;stroke-dasharray:1}
.kh .ex{stroke-opacity:.2}
.kh .n{fill:#F0F1F2}
.kh .o{fill:#9A9BA1}
.kh .b{fill:var(--orange)}
.kh .scan,.kh .pk,.kh .ping{display:none}
@keyframes kh-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes kh-pop{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:scale(1)}}
@keyframes kh-glow{0%,100%{fill-opacity:.14}50%{fill-opacity:.24}}
@keyframes kh-beat{0%,100%{transform:scale(1)}50%{transform:scale(1.4)}}
@keyframes kh-orbit{to{stroke-dashoffset:-1}}
@keyframes kh-packet{0%{stroke-dashoffset:.1;opacity:0}12%{opacity:.95}78%{opacity:.95}100%{stroke-dashoffset:-1;opacity:0}}
@keyframes kh-ping{0%{transform:scale(1);opacity:.75}70%,100%{transform:scale(4.4);opacity:0}}
.kh .d0{--t:.1s}
.kh .d1{--t:.22s}
.kh .d2{--t:.34s}
.kh .d3{--t:.46s}
.kh .d4{--t:.58s}
.kh .d5{--t:.7s}
.kh .d6{--t:.82s}
.kh .d7{--t:.94s}
.kh .d8{--t:1.06s}
.kh .d9{--t:1.18s}
@media (prefers-reduced-motion:no-preference){
  .kh .e{animation:kh-draw .8s ease-out var(--t,0s) backwards}
  .kh .n,.kh .o,.kh .b{transform-box:fill-box;transform-origin:center;animation:kh-pop .5s ease-out var(--t,0s) backwards}
  .kh .shape{animation:kh-glow 6s ease-in-out 1.6s infinite}
  .kh .b{animation:kh-pop .5s ease-out var(--t,0s) backwards,kh-beat var(--bd,3.6s) ease-in-out var(--bt,1.8s) infinite}
  .kh .b:nth-child(3n+1){--bd:3.1s;--bt:1.7s}
  .kh .b:nth-child(3n+2){--bd:4.2s;--bt:2.3s}
  .kh .b:nth-child(3n){--bd:3.7s;--bt:2.9s}
  .kh .scan,.kh .pk,.kh .ping{display:inline}
  .kh .scan{fill:none;stroke:var(--orange-hi);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:.16 .84;animation:kh-orbit 8s linear 1.8s infinite backwards}
  .kh .scan.glow{stroke-width:10;stroke-opacity:.16}
  .kh .pk{fill:none;stroke:var(--orange-hi);stroke-width:2;stroke-linecap:round;stroke-dasharray:.1 1.5;opacity:0;animation:kh-packet var(--pd,4s) linear var(--pt,2s) infinite}
  .kh .p0{--pd:3.6s;--pt:1.9s}
  .kh .p1{--pd:4.4s;--pt:3.1s}
  .kh .p2{--pd:3.9s;--pt:2.4s}
  .kh .p3{--pd:5s;--pt:4.2s}
  .kh .p4{--pd:4.1s;--pt:2.9s}
  .kh .p5{--pd:3.4s;--pt:3.8s}
  .kh .ping{fill:none;stroke:var(--orange-hi);stroke-width:1.4;vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:center;opacity:0;animation:kh-ping 4.2s ease-out var(--gt,2s) infinite}
  .kh .g0{--gt:2.2s}
  .kh .g1{--gt:3.6s}
  .kh .g2{--gt:5s}
}
/* AI network: lines draw in from the sources to the answers, nodes pop in behind them, the gate marches,
   and a few lights travel through the model. Skipped for people who prefer reduced motion. */
@keyframes ai-march{to{stroke-dashoffset:-16}}
@media (prefers-reduced-motion:no-preference){
  .ainet .le{animation:kh-draw .8s ease-out var(--t,0s) backwards}
  .ainet .c0{--t:.2s}
  .ainet .c1{--t:.6s}
  .ainet .c2{--t:1s}
  .ainet .in,.ainet .nd,.ainet .out{transform-box:fill-box;transform-origin:center;animation:kh-pop .5s ease-out var(--t,0s) backwards}
  .ainet .k0{--t:.05s}
  .ainet .k1{--t:.45s}
  .ainet .k2{--t:.85s}
  .ainet .k3{--t:1.25s}
  .ainet .gate{animation:ai-march 1.6s linear infinite}
  .ainet .gate-glow,.ainet .lock{animation:fade .7s ease-out .5s backwards}
  .ainet .pk,.ainet .ping{display:inline}
  .ainet .pk{fill:none;stroke:var(--orange-hi);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:.09 1.5;opacity:0;animation:kh-packet var(--pd,4s) linear var(--pt,2s) infinite}
  .ainet .p0{--pd:4.2s;--pt:2s}
  .ainet .p1{--pd:4.8s;--pt:3.2s}
  .ainet .p2{--pd:4.4s;--pt:4.1s}
  .ainet .p3{--pd:5.2s;--pt:2.7s}
  .ainet .p4{--pd:4.6s;--pt:5s}
  .ainet .ping{fill:none;stroke:var(--orange-hi);stroke-width:1.4;vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:center;opacity:0;animation:kh-ping 4.2s ease-out var(--gt,3s) infinite}
  .ainet .g0{--gt:3.4s}
  .ainet .g1{--gt:5s}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}

@media print{
  header.top{position:static}
  .ticker,.radar-wrap,.term,.ai-term,.traces,.skyline{display:none}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* =====================================================================================================
   Service pages: /services/<slug>/ and /en/services/<slug>/ (and the links to them from the home cards)
   ===================================================================================================== */
.svc-link{color:inherit;text-decoration:none}
.svc-link::after{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit}
.svc-link:focus-visible{outline:none}
.svc-link:focus-visible::after{outline:3px solid var(--focus);outline-offset:3px}
.svc .more{display:inline-flex;align-items:center;gap:.45rem;font-weight:700;font-size:.95rem;color:var(--orange-hi)}
.svc p+.more{margin-top:auto;padding-top:1.2rem}
.svc .chips+.more{margin-top:1.15rem}
.svc .more .arr{width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--ease)}
html[dir="rtl"] .svc .more .arr{transform:scaleX(-1)}
@media (hover:hover){
  .svc:hover .more .arr{transform:translateX(4px)}
  html[dir="rtl"] .svc:hover .more .arr{transform:scaleX(-1) translateX(4px)}
}

/* hero: breadcrumb, title, one sentence, and a HUD frame with the service's icon */
.sp-hero{--gx:24%}
html[dir="ltr"] .sp-hero{--gx:76%}
.sp-hero-in{position:relative;padding-block:clamp(1.5rem,3.5vw,2.75rem) clamp(3.5rem,8vw,6rem)}
.crumbs{margin-bottom:clamp(1.8rem,4vw,3.2rem)}
.crumbs ol{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .6rem;font-size:.9rem;line-height:1.6;color:var(--on-dark-muted)}
.crumbs li{display:inline-flex;align-items:center;gap:.6rem}
.crumbs li+li::before{content:"";flex:none;width:.45rem;height:.45rem;border-block-start:1.5px solid currentColor;border-inline-end:1.5px solid currentColor;transform:rotate(45deg);opacity:.65}
html[dir="rtl"] .crumbs li+li::before{transform:rotate(-45deg)}
.crumbs a{color:var(--on-dark);text-decoration:none;border-block-end:1px solid rgba(240,241,242,.28);transition:border-color .2s}
.crumbs a:hover{border-color:var(--orange)}
.sp-grid{display:grid;gap:2.75rem;align-items:center}
@media (min-width:900px){.sp-grid{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:4rem}}
.sp-hero .kicker{color:var(--orange-hi)}
.sp-hero h1{margin-top:.2rem;font-size:clamp(2.15rem,4.8vw,3.6rem);line-height:1.3;font-weight:700;text-wrap:balance}
html[lang="en"] .sp-hero h1{line-height:1.08;letter-spacing:-.02em}
.sp-hero .lead{max-width:33em}
.sp-art{position:relative;display:grid;justify-items:center}
.frame.sp-frame{width:min(78%,360px);justify-self:center;padding:1.2rem}
@media (min-width:900px){.frame.sp-frame{width:min(100%,380px)}}
.sp-frame .tag{background:#171719}
.sp-glyph{position:relative;aspect-ratio:1;display:grid;place-items:center}
.sp-rings{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.sp-rings circle{fill:none;stroke:rgba(240,241,242,.14);stroke-width:1}
.sp-rings .orbit{stroke:rgba(243,113,35,.6);stroke-width:1.2;stroke-dasharray:2 7;stroke-linecap:round}
.sp-rings .cross{fill:none;stroke:rgba(243,113,35,.75);stroke-width:1.4;stroke-linecap:round}
.sp-rings .dot{fill:var(--orange);stroke:none}
.sp-ico{position:relative;display:grid;place-items:center;width:36%;aspect-ratio:1;border-radius:24%;color:var(--orange-hi);background:rgba(243,113,35,.12);border:1px solid rgba(243,113,35,.55);box-shadow:0 0 70px rgba(243,113,35,.26)}
.sp-ico .ico{width:54%;height:54%;stroke-width:1.35}

/* what you gain: the four cards reuse .point */
.sp-gain{--sec-bg:var(--paper-2)}
.sp-gain-grid{margin-top:2.5rem}
@media (min-width:1040px){.sp-gain-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* how we deliver: the home page's steps, in 3, 4 or 6 columns */
.sp-how{--sec-bg:#202023}
@media (min-width:1000px){
  .steps.n4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .steps.n4 .step:nth-child(3n)::after{display:block}
  .steps.n4 .step:last-child::after{display:none}
}

/* what's included */
.sp-incl-grid{list-style:none;padding:0;margin:2.5rem 0 0;display:grid;gap:1rem}
@media (min-width:760px){
  .sp-incl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sp-incl-grid>:last-child:nth-child(odd){grid-column:1/-1}
}
.sp-block{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.1rem 1.3rem;align-items:start;padding:1.6rem 1.5rem;background:#fff;border:1px solid var(--line);border-radius:var(--r-card)}
.sp-block::after{content:"";position:absolute;inset-inline-start:1.5rem;inset-block-start:-1px;width:2rem;height:3px;border-radius:0 0 3px 3px;background:var(--orange)}
.sp-n{font:700 2rem/1 var(--mono);letter-spacing:-.04em;color:rgba(168,66,10,.32)}
.sp-block h3{font-size:1.15rem;margin-bottom:.4rem}
.sp-block p{color:var(--muted)}

/* capabilities, technologies and what you receive */
.sp-caps{--sec-bg:#1a1a1d}
.sp-panels{display:grid;gap:1.1rem}
@media (min-width:900px){.sp-panels{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}}
.sp-panel{padding:clamp(1.5rem,3vw,2.2rem);border:1px solid var(--line-d);border-radius:var(--r-card);background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015))}
.sp-panel h2{font-size:clamp(1.35rem,2.4vw,1.75rem);line-height:1.4;margin-bottom:1.3rem}
html[lang="en"] .sp-panel h2{line-height:1.2}
.sp-panel .tags li{font-size:.92rem;padding:.45rem .9rem}
.sp-sub{margin:1.9rem 0 .8rem;font:500 .76rem/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--orange-hi)}
html[lang="ar"] .sp-sub{font-family:inherit;letter-spacing:0;text-transform:none;font-size:.95rem;font-weight:700}
.sp-list{list-style:none;padding:0;margin:0;display:grid}
.sp-list li{display:flex;align-items:flex-start;gap:.85rem;padding-block:.9rem;border-block-start:1px dashed var(--line-d2)}
.sp-list li:first-child{border-block-start:0;padding-block-start:0}
.sp-list .ck{flex:none;width:1.5rem;height:1.5rem;margin-top:.15rem;padding:.28rem;border-radius:50%;color:var(--ink-1);background:var(--orange);fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

/* closing call to action (the .ai-cta band) and the way to the neighbouring services */
.sp-end{--sec-bg:var(--paper)}
.sp-end .ai-cta{margin-top:0}
.sp-pn{display:grid;gap:1rem;margin-top:1.25rem}
@media (min-width:760px){.sp-pn{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sp-pn-a{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.2rem 1rem;padding:1.2rem 1.4rem;background:#fff;border:1px solid var(--line);border-radius:var(--r-card);color:var(--text);text-decoration:none}
.sp-pn-a.prev{grid-template-columns:auto minmax(0,1fr)}
.sp-pn-a .lbl{font:500 .74rem/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--orange-ink)}
html[lang="ar"] .sp-pn-a .lbl{font-family:inherit;letter-spacing:0;text-transform:none;font-size:.88rem;font-weight:700}
.sp-pn-a .nm{font-size:1.1rem;font-weight:700;line-height:1.45}
.sp-pn-a .lbl,.sp-pn-a .nm{grid-column:1}
.sp-pn-a.prev .lbl,.sp-pn-a.prev .nm{grid-column:2}
.sp-pn-a .arr{grid-column:2;grid-row:1 / span 2;width:1.3rem;height:1.3rem;fill:none;stroke:var(--orange-ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sp-pn-a.prev .arr{grid-column:1;transform:scaleX(-1)}
html[dir="rtl"] .sp-pn-a.prev .arr{transform:none}
html[dir="rtl"] .sp-pn-a.next .arr{transform:scaleX(-1)}
.sp-all{grid-column:1/-1;justify-self:center;padding-block:.3rem;font-weight:700;color:var(--orange-ink);text-decoration:none;border-block-end:2px solid rgba(243,113,35,.45)}
.sp-all:hover{border-color:var(--orange)}
@media (hover:hover){.sp-block:hover,.sp-pn-a:hover{border-color:rgba(243,113,35,.5)}}

/* quiet backgrounds, as on the home page */
.sp-gain::after,.sp-incl::after,.sp-end::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(rgba(37,37,39,.16) 1px,transparent 1.6px) 0 0/26px 26px;
  -webkit-mask-image:radial-gradient(52% 58% at 100% 0,#000,transparent 72%);mask-image:radial-gradient(52% 58% at 100% 0,#000,transparent 72%);
}
html[dir="rtl"] .sp-gain::after,html[dir="rtl"] .sp-incl::after,html[dir="rtl"] .sp-end::after{-webkit-mask-image:radial-gradient(52% 58% at 0 0,#000,transparent 72%);mask-image:radial-gradient(52% 58% at 0 0,#000,transparent 72%)}
.sp-incl::after{-webkit-mask-image:radial-gradient(48% 52% at 0 100%,#000,transparent 72%);mask-image:radial-gradient(48% 52% at 0 100%,#000,transparent 72%)}
html[dir="rtl"] .sp-incl::after{-webkit-mask-image:radial-gradient(48% 52% at 100% 100%,#000,transparent 72%);mask-image:radial-gradient(48% 52% at 100% 100%,#000,transparent 72%)}
.sp-how::after,.sp-caps::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none}
.sp-how::after{
  background:linear-gradient(rgba(240,241,242,.04) 1px,transparent 1px) 0 0/56px 56px,linear-gradient(90deg,rgba(240,241,242,.04) 1px,transparent 1px) 0 0/56px 56px;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);
}
.sp-caps::after{background:radial-gradient(46% 52% at 88% 0,rgba(243,113,35,.12),transparent 70%),radial-gradient(40% 40% at 0 100%,rgba(243,113,35,.07),transparent 70%)}
html[dir="rtl"] .sp-caps::after{background:radial-gradient(46% 52% at 12% 0,rgba(243,113,35,.12),transparent 70%),radial-gradient(40% 40% at 100% 100%,rgba(243,113,35,.07),transparent 70%)}

@media (prefers-reduced-motion:no-preference){
  @keyframes sp-spin{to{transform:rotate(360deg)}}
  .sp-rings .orbit{transform-origin:100px 100px;animation:sp-spin 80s linear infinite}
  .crumbs{animation:fade .6s ease-out backwards}
  .sp-copy>*{animation:rise .75s var(--ease) backwards}
  .sp-copy>h1{animation-delay:.08s}
  .sp-copy>.lead{animation-delay:.2s}
  .sp-copy>.actions{animation-delay:.32s}
  .sp-art{animation:fade 1.1s ease-out .1s backwards}
  .sp-block,.sp-pn-a{transition:border-color .3s,transform .35s var(--ease),box-shadow .35s}
  @media (hover:hover){.sp-block:hover,.sp-pn-a:hover{transform:translateY(-3px);box-shadow:0 26px 50px -30px rgba(37,37,39,.5)}}
}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .sp-block,.sp-panel,.sp-pn-a{animation:reveal linear backwards;animation-timeline:view();animation-range:entry 4% entry 52%}
    .sp-block:nth-child(even),.sp-pn-a:nth-child(2){animation-range:entry 10% entry 58%}
  }
}