@font-face{font-family:"Poppins";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/poppins-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/poppins-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/poppins-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/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:500;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-arabic-arabic-500-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:600;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-arabic-arabic-600-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(/assets/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}
/* Exclusive Vision — site styles
   Layout: dark "control-room" hero with circuit traces from the launch deck, then calm light sections;
   dark navy returns for the AI product and the closing call. Logical properties throughout for RTL. */
:root{
  --ink:#0A1128;        /* deep navy, deck background */
  --ink-2:#111B48;
  --navy:#1B2262;       /* logo navy */
  --cyan:#4FB3FF;       /* deck accent, used on dark */
  --cyan-ink:#1769B3;   /* cyan darkened for text on light */
  --brass:#B8965A;      /* AI Exclusive Vision accent */
  --brass-lt:#D9C48F;
  --paper:#F4F6FB;      /* cool off-white, biased to navy */
  --card:#FFFFFF;
  --line:#DCE1EE;
  --text:#171C33;
  --muted:#545B77;
  --on-dark:#E8ECF8;
  --on-dark-muted:#A9B2D2;
  --ok:#2FBF71; --warn:#E3A33B;
  --f-display:"Poppins","IBM Plex Sans Arabic",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-body:"IBM Plex Sans","IBM Plex Sans Arabic",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --r:10px;
  --wrap:1180px;
  color-scheme:light;
}
:lang(ar){
  --f-display:"IBM Plex Sans Arabic","Poppins",system-ui,sans-serif;
  --f-body:"IBM Plex Sans Arabic","IBM Plex Sans",system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--paper);color:var(--text);font:400 1rem/1.65 var(--f-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
:lang(ar) body,body:lang(ar){line-height:1.85}
img{max-width:100%;height:auto;display:block}
a{color:var(--cyan-ink);text-underline-offset:3px}
h1,h2,h3,h4{font-family:var(--f-display);color:inherit;margin:0;line-height:1.18;text-wrap:balance;letter-spacing:-.01em}
:lang(ar) h1,:lang(ar) h2,:lang(ar) h3{letter-spacing:0;line-height:1.4}
h1{font-size:clamp(2rem,4.6vw,3.4rem);font-weight:700}
h2{font-size:clamp(1.6rem,3vw,2.35rem);font-weight:700}
h3{font-size:1.14rem;font-weight:600}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--cyan);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:20px}
.skip{position:absolute;inset-inline-start:12px;top:-60px;background:var(--navy);color:#fff;padding:10px 14px;border-radius:8px;z-index:100}
.skip:focus{top:12px}
.eyebrow{font:500 .78rem/1.2 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--cyan-ink);display:inline-flex;align-items:center;gap:.6em}
.eyebrow::before{content:"";width:18px;height:2px;background:currentColor;display:inline-block}
:lang(ar) .eyebrow{font-family:var(--f-body);letter-spacing:0;font-weight:600;font-size:.9rem}
.lead{font-size:1.16rem;color:var(--muted);max-width:62ch}
.section{padding-block:clamp(56px,8vw,96px)}
.section-head{display:grid;gap:14px;max-width:760px;margin-block-end:40px}
.ico{flex:none}
[dir="rtl"] .ico-arrow{transform:scaleX(-1)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.55em;font:600 .98rem/1 var(--f-body);padding:14px 20px;border-radius:999px;text-decoration:none;border:1.5px solid transparent;transition:transform .15s ease,background .15s ease,border-color .15s ease;cursor:pointer}
.btn:hover{transform:translateY(-1px)}
.btn .ico{width:19px;height:19px}
.btn-wa{background:var(--ok);color:#06220f}
.btn-wa:hover{background:#3ad07f}
.btn-primary{background:var(--navy);color:#fff}
.btn-primary:hover{background:#252e7c}
.btn-ghost{border-color:currentColor;color:var(--navy);background:transparent}
.on-dark .btn-ghost{color:var(--on-dark)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}
.textlink{display:inline-flex;align-items:center;gap:.4em;font-weight:600;text-decoration:none;color:var(--cyan-ink)}
.textlink .ico{width:18px;height:18px;transition:transform .15s}
.textlink:hover .ico{transform:translateX(3px)}
[dir="rtl"] .textlink:hover .ico{transform:scaleX(-1) translateX(3px)}

/* header */
.site-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(255,255,255,.94);backdrop-filter:saturate(1.4) blur(10px);border-block-end:1px solid var(--line)}
.header-row{display:flex;align-items:center;gap:20px;min-height:70px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--navy);margin-inline-end:auto}
.brand img{height:44px;width:auto}
.wordmark{display:none;align-items:center;gap:10px}
.nologo .wordmark,.wordmark.always{display:flex}
.mono-mark{width:40px;height:40px;border-radius:9px;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;direction:ltr;font:700 1rem/1 "Poppins",sans-serif;letter-spacing:.02em}
.mono-mark span{color:var(--cyan)}
.wm-text{font:600 .98rem/1.1 "Poppins",sans-serif;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
@media (max-width:560px){.site-header .wm-text small{display:none}.site-header .wm-text{letter-spacing:.08em;font-size:.86rem}.header-row{gap:10px}}
.wm-text small{display:block;font:500 .62rem/1.3 var(--f-mono);letter-spacing:.14em;color:var(--muted);text-transform:uppercase;margin-top:3px}
.nav{display:flex;align-items:center;gap:4px}
.nav a{color:var(--text);text-decoration:none;font-weight:500;padding:9px 12px;border-radius:8px;font-size:.96rem}
.nav a:hover{background:var(--paper)}
.nav a[aria-current="page"]{color:var(--navy);box-shadow:inset 0 -2px 0 var(--cyan)}
.lang{font-weight:600;text-decoration:none;color:var(--navy);border:1.5px solid var(--line);border-radius:999px;padding:7px 13px;font-size:.92rem}
.lang:hover{border-color:var(--navy)}
.lang:lang(en),.lang[lang="ar"]{font-family:"IBM Plex Sans Arabic",sans-serif}
.header-wa{padding:11px 16px}
.menu-btn{display:none;background:none;border:1.5px solid var(--line);border-radius:10px;width:44px;height:44px;place-items:center;color:var(--navy);cursor:pointer}
@media (max-width:960px){
  .menu-btn{display:grid}
  .header-wa{display:none}
  .nav{position:absolute;inset-inline:0;top:100%;flex-direction:column;align-items:stretch;background:#fff;border-block-end:1px solid var(--line);padding:10px 20px 18px;display:none;box-shadow:0 18px 30px -18px rgba(10,17,40,.25)}
  .nav.open{display:flex}
  .nav a{padding:13px 8px;border-radius:0;border-block-end:1px solid var(--line)}
  .nav a[aria-current="page"]{box-shadow:none;color:var(--cyan-ink)}
}

/* hero (dark) */
.hero{position:relative;background:radial-gradient(120% 90% at 20% 0%,var(--ink-2) 0%,var(--ink) 62%);color:var(--on-dark);overflow:hidden}
.hero .traces{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.55}
.hero-grid{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;padding-block:clamp(56px,8vw,104px)}
.hero-grid>*{min-width:0}
.hero .eyebrow{color:var(--cyan)}
.hero h1{color:#fff;margin-block:18px 20px}
.hero h1 em{font-style:normal;color:var(--cyan)}
.hero .lead{color:var(--on-dark-muted);margin-block-end:30px}
.coords{margin-block-start:34px;font:400 .76rem/1.4 var(--f-mono);letter-spacing:.14em;color:#6f7aa6;text-transform:uppercase}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr;gap:40px}}

/* status panel */
.panel{background:linear-gradient(180deg,#131E52,#0E1740);border:1px solid rgba(79,179,255,.25);border-radius:16px;box-shadow:0 30px 60px -30px rgba(0,0,0,.6);overflow:hidden}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border-block-end:1px solid rgba(79,179,255,.16)}
.panel-title{font:600 .95rem/1.2 var(--f-display);color:#fff}
.panel-title small{display:block;font:400 .75rem/1.4 var(--f-mono);color:var(--on-dark-muted);margin-top:4px}
.pill{font:500 .7rem/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;padding:6px 9px;border-radius:999px;border:1px solid rgba(169,178,210,.4);color:var(--on-dark-muted)}
:lang(ar) .pill{font-family:var(--f-body);letter-spacing:0}
.panel-rows{padding:6px 0}
.prow{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:12px 20px;font-size:.93rem}
.prow+.prow{border-block-start:1px dashed rgba(169,178,210,.14)}
.dot{width:9px;height:9px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px rgba(47,191,113,.14)}
.dot.warn{background:var(--warn);box-shadow:0 0 0 4px rgba(227,163,59,.15)}
.prow .v{font:500 .8rem/1.3 var(--f-mono);color:var(--on-dark-muted);text-align:end}
:lang(ar) .prow .v{font-family:var(--f-body);font-size:.86rem}
.panel-foot{padding:14px 20px;background:rgba(79,179,255,.07);font-size:.88rem;color:var(--on-dark)}
@media (prefers-reduced-motion:no-preference){
  .dot{animation:pulse 2.4s ease-in-out infinite}
  .prow:nth-child(2) .dot{animation-delay:.4s}.prow:nth-child(3) .dot{animation-delay:.8s}.prow:nth-child(4) .dot{animation-delay:1.2s}
  @keyframes pulse{50%{box-shadow:0 0 0 7px rgba(47,191,113,0)}}
}

/* trust strip */
.trust{background:#fff;border-block-end:1px solid var(--line)}
.trust-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;padding-block:22px}
.trust-label{font:500 .74rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
:lang(ar) .trust-label{font-family:var(--f-body);letter-spacing:0;font-size:.85rem}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font:500 .84rem/1 var(--f-body);padding:8px 12px;border-radius:7px;background:var(--paper);border:1px solid var(--line);color:var(--navy);white-space:nowrap}
.trust-facts{display:flex;flex-wrap:wrap;gap:6px 22px;margin-inline-start:auto;font-size:.9rem;color:var(--muted)}
.trust-facts b{color:var(--navy);font-weight:600}

/* cost section */
.cost-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-block:1px solid var(--line)}
.cost{padding:30px 28px 32px;display:grid;gap:12px;align-content:start}
.cost+.cost{border-inline-start:1px solid var(--line)}
.cost .ico{width:34px;height:34px;color:var(--navy)}
.cost p{color:var(--muted)}
.cost-close{margin-block-start:28px;font:600 1.15rem/1.4 var(--f-display);color:var(--navy)}
@media (max-width:820px){.cost-grid{grid-template-columns:1fr}.cost+.cost{border-inline-start:0;border-block-start:1px solid var(--line)}.cost{padding-inline:0}}

/* service cards */
.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.svc{display:grid;grid-template-rows:auto auto 1fr auto;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px;text-decoration:none;color:inherit;transition:border-color .15s,transform .15s,box-shadow .15s}
.svc:hover{border-color:var(--navy);transform:translateY(-2px);box-shadow:0 14px 28px -20px rgba(27,34,98,.45)}
.svc .ico{width:30px;height:30px;color:var(--cyan-ink)}
.svc p{color:var(--muted);font-size:.95rem}
.svc .textlink{font-size:.9rem}
@media (max-width:1040px){.svc-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.svc-grid{grid-template-columns:1fr}}

/* AI block */
.dark{background:var(--ink);color:var(--on-dark)}
.dark h2,.dark h3{color:#fff}
.dark .lead,.dark p{color:var(--on-dark-muted)}
.ai .eyebrow{color:var(--brass-lt)}
.ai-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.ai-grid>*{min-width:0}
.ai-line{font:600 1.2rem/1.45 var(--f-display);color:var(--brass-lt);margin-block:10px 16px}
.ai-list{display:grid;gap:10px;margin-block:24px 30px}
.ai-list li{display:flex;gap:10px;align-items:flex-start;color:var(--on-dark)}
.ai-list .ico{width:20px;height:20px;color:var(--brass);margin-top:3px}
.btn-brass{background:var(--brass);color:#1a1405}
.btn-brass:hover{background:var(--brass-lt)}
@media (max-width:900px){.ai-grid{grid-template-columns:1fr;gap:36px}}

/* camera mock */
.cam{position:relative;aspect-ratio:4/3;max-width:100%;border-radius:14px;overflow:hidden;background:
  repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 2px,transparent 2px 4px),
  linear-gradient(160deg,#1d2640 0%,#121a31 55%,#0c1224 100%);border:1px solid rgba(184,150,90,.35)}
.cam-hud{position:absolute;inset-inline:14px;top:12px;display:flex;justify-content:space-between;font:500 .72rem/1 var(--f-mono);letter-spacing:.12em;color:#c9cfe6}
.rec{display:inline-flex;align-items:center;gap:6px}
.rec::before{content:"";width:8px;height:8px;border-radius:50%;background:#e5484d}
.counter{position:absolute;z-index:2;inset-inline:0;bottom:18%;height:22%;background:linear-gradient(180deg,#2a3352,#222a45);border-block-start:2px solid #3a4468}
.person{position:absolute;inset-inline-start:34%;bottom:26%;width:22%;height:56%}
.person .head{position:absolute;inset-inline-start:30%;top:0;width:40%;aspect-ratio:1;border-radius:50%;background:#3b4668}
.person .body{position:absolute;inset-inline:0;top:26%;bottom:0;border-radius:40% 40% 8px 8px;background:#343f60}
.person .hat{position:absolute;inset-inline-start:26%;top:-8%;width:48%;height:18%;border-radius:40% 40% 10% 10%;background:#d8dbe6}
.hand{position:absolute;z-index:3;width:5.5%;aspect-ratio:1.3;border-radius:45%;background:#c79f86;bottom:38%}
.hand.l{inset-inline-start:38%}.hand.r{inset-inline-start:49.5%}
.bbox{position:absolute;z-index:4;inset-inline-start:35%;bottom:34.5%;width:24%;height:12%;
  background:
   linear-gradient(var(--brass),var(--brass)) left top/16px 2px no-repeat,linear-gradient(var(--brass),var(--brass)) left top/2px 16px no-repeat,
   linear-gradient(var(--brass),var(--brass)) right top/16px 2px no-repeat,linear-gradient(var(--brass),var(--brass)) right top/2px 16px no-repeat,
   linear-gradient(var(--brass),var(--brass)) left bottom/16px 2px no-repeat,linear-gradient(var(--brass),var(--brass)) left bottom/2px 16px no-repeat,
   linear-gradient(var(--brass),var(--brass)) right bottom/16px 2px no-repeat,linear-gradient(var(--brass),var(--brass)) right bottom/2px 16px no-repeat}
.bbox-label{position:absolute;inset-inline-start:0;bottom:calc(100% + 6px);white-space:nowrap;font:600 .72rem/1 var(--f-body);background:var(--brass);color:#1a1405;padding:6px 8px;border-radius:4px}
.alert-card{position:absolute;z-index:5;inset-inline-end:5%;bottom:5%;background:#fff;color:var(--text);border-radius:12px;padding:12px 14px;display:flex;gap:10px;align-items:center;box-shadow:0 16px 30px -12px rgba(0,0,0,.55);max-width:62%}
.alert-card .ico{width:26px;height:26px;color:#fff;background:var(--brass);border-radius:7px;padding:4px}
.alert-card b{display:block;font-size:.86rem;line-height:1.3}
.alert-card span{font:400 .74rem/1.3 var(--f-mono);color:var(--muted)}
.cam-example{position:absolute;inset-inline-start:14px;bottom:12px;font:500 .66rem/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:#8d95b5}
:lang(ar) .cam-example,:lang(ar) .bbox-label{font-family:var(--f-body);letter-spacing:0}

/* systems chips */
.sys-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.sys-grid .sys.ai{grid-column:span 2}
@media (max-width:900px){.sys-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.sys-grid{grid-template-columns:1fr}.sys-grid .sys.ai{grid-column:auto}}
.sys{display:grid;gap:4px;padding:16px 18px;background:#fff;border:1px solid var(--line);border-radius:var(--r);text-decoration:none;color:inherit;transition:border-color .15s}
.sys:hover{border-color:var(--navy)}
.sys b{font:600 1rem/1.3 var(--f-display);color:var(--navy)}
.sys span{font-size:.86rem;color:var(--muted)}
.sys.ai{border-color:var(--brass);background:linear-gradient(180deg,#fffaf0,#fff)}
.sys.ai b{color:#7d6232}
.head-row{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:20px;margin-block-end:32px}
.head-row .section-head{margin:0}

/* websites band */
.band{background:#fff;border-block:1px solid var(--line)}
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.split>*{min-width:0}
.ticks{display:grid;gap:10px;margin-block:22px 28px}
.ticks li{display:flex;gap:10px;align-items:flex-start}
.ticks .ico{width:20px;height:20px;color:var(--ok);margin-top:3px}
.browser{border:1px solid var(--line);border-radius:12px;background:var(--paper);overflow:hidden;box-shadow:0 24px 40px -30px rgba(10,17,40,.5)}
.browser-bar{display:flex;gap:6px;align-items:center;padding:10px 12px;background:#fff;border-block-end:1px solid var(--line)}
.browser-bar i{width:9px;height:9px;border-radius:50%;background:var(--line)}
.browser-bar span{margin-inline-start:10px;font:400 .74rem/1 var(--f-mono);color:var(--muted);direction:ltr}
.mock{display:grid;grid-template-columns:1fr 92px;gap:14px;padding:18px}
.mock .m-h{height:12px;border-radius:4px;background:var(--navy);width:70%}
.mock .m-l{height:8px;border-radius:4px;background:var(--line);margin-top:9px}
.mock .m-btn{margin-top:16px;width:46%;height:24px;border-radius:99px;background:var(--ok)}
.phone{grid-row:span 2;border:2px solid var(--navy);border-radius:14px;padding:8px 6px;background:#fff;display:grid;gap:6px;align-content:start}
.phone i{display:block;height:6px;border-radius:3px;background:var(--line)}
.phone i:first-child{background:var(--navy);width:60%}
.phone b{height:16px;border-radius:99px;background:var(--ok);margin-top:6px}
.mock-row{grid-column:1;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mock-row i{height:48px;border-radius:6px;background:#fff;border:1px solid var(--line)}
.lang-tags{display:flex;gap:8px;padding:0 18px 18px}
.lang-tags span{font:600 .75rem/1 var(--f-body);padding:6px 10px;border-radius:6px;background:#fff;border:1px solid var(--line);color:var(--navy)}
@media (max-width:900px){.split{grid-template-columns:1fr}}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;counter-reset:s}
.step{position:relative;padding-block:24px 8px;padding-inline-end:24px;border-block-start:2px solid var(--line)}
.step::before{counter-increment:s;content:counter(s,decimal-leading-zero);position:absolute;top:-13px;inset-inline-start:0;background:var(--paper);padding-inline-end:10px;font:500 .9rem/1.4 var(--f-mono);color:var(--cyan-ink)}
.step h3{margin-block-end:8px}
.step p{color:var(--muted);font-size:.96rem}
.dark .step::before,.band .step::before{background:inherit}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,1fr);row-gap:30px}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}

/* industries */
.ind{display:flex;flex-wrap:wrap;gap:10px}
.ind li{padding:11px 16px;border-radius:999px;background:#fff;border:1px solid var(--line);font-weight:500;color:var(--navy)}

/* tools */
.tools{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.tool{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;padding:24px;border-radius:var(--r);background:#fff;border:1px solid var(--line);text-decoration:none;color:inherit}
.tool:hover{border-color:var(--navy)}
.tool .ico{width:40px;height:40px;padding:8px;border-radius:10px;background:var(--paper);color:var(--navy)}
.tool p{color:var(--muted);margin-block:6px 12px}
.tool .url{font:400 .78rem/1.3 var(--f-mono);color:var(--muted);direction:ltr;display:inline-block;overflow-wrap:anywhere}
@media (max-width:760px){.tools{grid-template-columns:1fr}}

/* closing CTA */
.cta-final{background:linear-gradient(135deg,var(--navy),var(--ink));color:#fff}
.cta-final .wrap{display:grid;grid-template-columns:1.2fr auto;gap:32px;align-items:center;padding-block:64px}
.cta-final h2{color:#fff}
.cta-final p{color:var(--on-dark-muted);margin-top:12px;max-width:56ch}
@media (max-width:820px){.cta-final .wrap{grid-template-columns:1fr}}

/* inner page hero */
.page-hero{background:#fff;border-block-end:1px solid var(--line);position:relative;overflow:hidden}
.page-hero .wrap{padding-block:clamp(48px,7vw,84px) clamp(40px,6vw,64px);display:grid;gap:18px;position:relative}
.page-hero .traces{position:absolute;inset-inline-end:0;top:0;height:100%;width:44%;opacity:.5;pointer-events:none}

/* service detail */
.svc-detail{display:grid;grid-template-columns:280px 1fr;gap:40px;padding-block:40px;border-block-start:1px solid var(--line)}
.svc-detail:first-child{border-block-start:0;padding-block-start:0}
.svc-detail>*{min-width:0}
.svc-detail .side{display:grid;gap:12px;align-content:start}
.svc-detail .side .ico{width:36px;height:36px;color:var(--cyan-ink)}
.svc-detail .side p{color:var(--muted)}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:10px 28px;margin-block:4px 22px}
.two-col li{display:flex;gap:10px;align-items:flex-start}
.two-col .ico{width:19px;height:19px;color:var(--ok);margin-top:4px}
.goodfor{display:flex;gap:10px;flex-wrap:wrap;align-items:baseline;padding:14px 16px;border-radius:8px;background:#fff;border:1px solid var(--line);margin-block-end:18px}
.goodfor b{font:500 .74rem/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--cyan-ink)}
:lang(ar) .goodfor b{font-family:var(--f-body);letter-spacing:0;font-size:.86rem}
@media (max-width:820px){.svc-detail{grid-template-columns:1fr;gap:18px}.two-col{grid-template-columns:1fr}}

/* product cards */
.prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.prod{display:grid;grid-template-rows:auto auto auto 1fr auto;gap:10px;padding:24px;background:#fff;border:1px solid var(--line);border-radius:var(--r);scroll-margin-top:96px}
.prod .cat{font:500 .72rem/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--cyan-ink)}
:lang(ar) .prod .cat{font-family:var(--f-body);letter-spacing:0;font-size:.84rem}
.prod h3{font-size:1.28rem;color:var(--navy)}
.prod .line{color:var(--muted)}
.prod ul{display:grid;gap:7px;font-size:.94rem;margin-block:6px 8px;align-content:start}
.prod li{display:flex;gap:8px;align-items:flex-start}
.prod li .ico{width:17px;height:17px;color:var(--ok);margin-top:4px}
.prod .btn{justify-self:start;padding:11px 16px;font-size:.92rem}
.prod.ai{background:var(--ink);border-color:var(--brass);color:var(--on-dark)}
.prod.ai h3{color:#fff}.prod.ai .cat{color:var(--brass-lt)}.prod.ai .line{color:var(--brass-lt)}
.prod.ai li .ico{color:var(--brass)}
.prod.featured{grid-column:span 2}
@media (max-width:1000px){.prod-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.prod-grid{grid-template-columns:1fr}.prod.featured{grid-column:auto}}

/* packages */
.pkg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pkg{display:grid;grid-template-rows:auto auto 1fr auto;gap:12px;padding:26px;background:#fff;border:1px solid var(--line);border-radius:var(--r)}
.pkg h3{font-size:1.4rem;color:var(--navy)}
.pkg .sub{color:var(--muted)}
.pkg ul{display:grid;gap:9px;margin-block:8px;align-content:start}
.pkg li{display:flex;gap:8px;align-items:flex-start;font-size:.96rem}
.pkg li .ico{width:18px;height:18px;color:var(--ok);margin-top:4px}
.pkg .best{font-size:.88rem;color:var(--muted);border-block-start:1px dashed var(--line);padding-block-start:12px}
.pkg .best b{color:var(--navy)}
.pkg.mid{border:2px solid var(--navy)}
.care{margin-block-start:16px;display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between;padding:22px 26px;border-radius:var(--r);background:var(--ink);color:var(--on-dark)}
.care h3{color:#fff}
.care p{color:var(--on-dark-muted);max-width:64ch}
@media (max-width:900px){.pkg-grid{grid-template-columns:1fr}}
.incl{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.incl li{display:grid;gap:8px;align-content:start;padding:18px;background:#fff;border:1px solid var(--line);border-radius:var(--r);font-weight:500}
.incl .ico{width:22px;height:22px;color:var(--cyan-ink)}
@media (max-width:900px){.incl{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.incl{grid-template-columns:1fr}}
.note{margin-block-start:18px;color:var(--muted);font-size:.95rem}

/* about */
.about-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:start}
.about-grid>*{min-width:0}
.prose{display:grid;gap:16px;font-size:1.06rem;max-width:66ch}
.mv{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-block-start:28px}
.mv div{padding:22px;border-radius:var(--r);background:#fff;border:1px solid var(--line);display:grid;gap:8px}
.mv b{font:500 .74rem/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--cyan-ink)}
:lang(ar) .mv b{font-family:var(--f-body);letter-spacing:0;font-size:.88rem}
.founder{background:var(--ink);color:var(--on-dark);border-radius:14px;padding:28px;display:grid;gap:14px}
.founder h3{color:#fff;font-size:1.35rem}
.founder .role{color:var(--cyan);font:500 .8rem/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase}
:lang(ar) .founder .role{font-family:var(--f-body);letter-spacing:0;font-size:.95rem}
.founder ul{display:grid;gap:10px;font-size:.95rem}
.founder li{display:flex;gap:10px;color:var(--on-dark-muted)}
.founder li .ico{width:18px;height:18px;color:var(--cyan);margin-top:4px}
.cert-groups{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.cert-groups>div{display:grid;gap:12px;align-content:start;padding:22px;border-radius:var(--r);background:#fff;border:1px solid var(--line)}
.cert-groups h3{font-size:1rem;color:var(--navy)}
@media (max-width:960px){.about-grid{grid-template-columns:1fr}.cert-groups{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.cert-groups,.mv{grid-template-columns:1fr}}
.values{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.values div{display:grid;gap:8px;border-block-start:2px solid var(--navy);padding-block-start:16px}
.values p{color:var(--muted);font-size:.96rem}
@media (max-width:900px){.values{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.values{grid-template-columns:1fr}}

/* contact */
.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:40px;align-items:start}
.contact-grid>*{min-width:0}
.ccards{display:grid;gap:12px}
.ccard{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;padding:18px;border-radius:var(--r);background:#fff;border:1px solid var(--line)}
.ccard .ico{width:38px;height:38px;padding:8px;border-radius:10px;background:var(--paper);color:var(--navy)}
.ccard.wa .ico{background:#e3f7ec;color:#138a4a}
.ccard b{display:block;font-family:var(--f-display);font-weight:600}
.ccard a,.ccard span{color:var(--muted);text-decoration:none;overflow-wrap:anywhere}
.ccard a:hover{color:var(--cyan-ink)}
.ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}
.form{background:#fff;border:1px solid var(--line);border-radius:14px;padding:clamp(20px,3vw,32px);display:grid;gap:16px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:grid;gap:6px}
.field label{font-weight:600;font-size:.92rem}
.field label i{font-style:normal;color:#c2410c}
.field input,.field select,.field textarea{font:inherit;color:var(--text);background:var(--paper);border:1.5px solid var(--line);border-radius:9px;padding:12px 13px;width:100%}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--navy);background:#fff}
.hp{position:absolute!important;inset-inline-start:-9999px;width:1px;height:1px;overflow:hidden}
.form-note{font-size:.88rem;color:var(--muted)}
.msg{padding:14px 16px;border-radius:9px;font-weight:500}
.msg.ok{background:#e3f7ec;color:#0e6b38;border:1px solid #b5e6ca}
.msg.err{background:#fdecec;color:#9b1c1c;border:1px solid #f5c2c2}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}}
@media (max-width:560px){.form-row{grid-template-columns:1fr}}

/* footer */
.site-footer{background:var(--ink);color:var(--on-dark-muted);font-size:.94rem}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1.2fr;gap:40px;padding-block:56px 36px}
.foot-grid>*{min-width:0}
.site-footer .wordmark{display:flex;color:#fff}
.site-footer .mono-mark{background:#fff;color:var(--navy)}
.site-footer .mono-mark span{color:var(--cyan-ink)}
.site-footer .wm-text small{color:var(--on-dark-muted)}
.site-footer h4{font:500 .74rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:#fff;margin-block-end:16px}
:lang(ar) .site-footer h4{font-family:var(--f-body);letter-spacing:0;font-size:.9rem}
.site-footer ul{display:grid;gap:9px}
.site-footer a{color:var(--on-dark-muted);text-decoration:none}
.site-footer a:hover{color:#fff}
.foot-about{display:grid;gap:14px;max-width:44ch}
.partner{font:500 .8rem/1.4 var(--f-mono);color:var(--brass-lt);letter-spacing:.04em}
:lang(ar) .partner{font-family:var(--f-body)}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;padding-block:20px 28px;border-block-start:1px solid rgba(169,178,210,.18);font-size:.85rem}
@media (max-width:820px){.foot-grid{grid-template-columns:1fr;gap:28px}}

/* floating WhatsApp */
.wa-float{position:fixed;inset-inline-end:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:60;display:inline-flex;align-items:center;gap:8px;padding:13px 16px;border-radius:999px;background:var(--ok);color:#06220f;font-weight:600;text-decoration:none;box-shadow:0 14px 28px -10px rgba(10,17,40,.45)}
.wa-float .ico{width:22px;height:22px}
@media (max-width:560px){.wa-float span{display:none}.wa-float{padding:14px}}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* ================================================================= motion
   Everything below is decorative. It is switched off for visitors who ask for reduced motion. */

/* stats band */
.stats{background:var(--paper);border-block-end:1px solid var(--line)}
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.stat{display:grid;gap:4px;padding:26px 22px;border-inline-start:1px solid var(--line)}
.stat:first-child{border-inline-start:0;padding-inline-start:0}
.stat b{font:700 clamp(2rem,4vw,2.8rem)/1 var(--f-display);color:var(--navy);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.stat>span{color:var(--muted);font-size:.95rem}
@media (max-width:760px){.stats-row{grid-template-columns:repeat(2,1fr)}.stat:nth-child(3){border-inline-start:0;padding-inline-start:0}.stat{padding-block:18px}}

/* marquee */
.marquee{display:flex;overflow:hidden;gap:10px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee .track{flex:none;flex-wrap:nowrap;padding-block:6px}
.marquee .track li{white-space:nowrap}
.marquee+.marquee{margin-top:10px}

/* header shadow on scroll */
.site-header{transition:box-shadow .25s ease,background .25s ease}
.site-header.scrolled{box-shadow:0 10px 30px -18px rgba(10,17,40,.35);background:rgba(255,255,255,.98)}

/* hero spotlight follows the pointer */
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(420px circle at var(--mx,70%) var(--my,30%),rgba(79,179,255,.13),transparent 60%);transition:background .2s}

/* circuit pulses */
.traces .pulses path{stroke-dasharray:6 94;stroke-dashoffset:100;opacity:0}
.traces .node{transform-box:fill-box;transform-origin:center}

/* hover polish */
.svc .ico,.tool .ico,.ccard .ico{transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.svc:hover .ico{transform:translateY(-3px) rotate(-6deg)}
.tool:hover .ico,.ccard:hover .ico{transform:scale(1.08)}
.svc{position:relative;overflow:hidden}
.svc::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(79,179,255,.10) 50%,transparent 70%);transform:translateX(-100%);transition:transform .7s ease;pointer-events:none}
.svc:hover::after{transform:translateX(100%)}
.sys,.prod,.pkg,.incl li,.cert-groups>div,.tool{transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.sys:hover,.prod:hover,.pkg:hover,.incl li:hover,.cert-groups>div:hover,.tool:hover{transform:translateY(-3px);box-shadow:0 16px 30px -22px rgba(27,34,98,.5)}
.btn-wa .ico{transition:transform .3s}
.btn-wa:hover .ico{transform:rotate(-12deg) scale(1.1)}

/* camera scan */
.cam::after{content:"";position:absolute;inset-inline:0;top:0;height:28%;background:linear-gradient(180deg,transparent,rgba(184,150,90,.18) 85%,rgba(217,196,143,.55) 100%);pointer-events:none;opacity:0}

@media (prefers-reduced-motion:no-preference){
  /* page-load sequence */
  .hero .eyebrow,.hero h1,.hero .lead,.hero .btn-row,.hero .coords,.page-hero .eyebrow,.page-hero h1,.page-hero .lead,.page-hero .btn-row{animation:rise .8s cubic-bezier(.2,.7,.2,1) both}
  .hero h1,.page-hero h1{animation-delay:.1s}
  .hero .lead,.page-hero .lead{animation-delay:.22s}
  .hero .btn-row,.page-hero .btn-row{animation-delay:.34s}
  .hero .coords{animation-delay:.5s}
  .hero .panel{animation:panelIn 1s .25s cubic-bezier(.2,.7,.2,1) both}
  .hero .prow{animation:rowIn .5s cubic-bezier(.2,.7,.2,1) both}
  .hero .prow:nth-child(1){animation-delay:.7s}.hero .prow:nth-child(2){animation-delay:.85s}.hero .prow:nth-child(3){animation-delay:1s}.hero .prow:nth-child(4){animation-delay:1.15s}.hero .prow:nth-child(5){animation-delay:1.3s}
  .hero h1 em{background:linear-gradient(90deg,var(--cyan) 0%,#bfe5ff 45%,var(--cyan) 60%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 5s 1.2s ease-in-out infinite}
  @keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
  @keyframes panelIn{from{opacity:0;transform:translateY(30px) scale(.97)}to{opacity:1;transform:none}}
  @keyframes rowIn{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
  [dir="rtl"] .hero .prow{animation-name:rowInRtl}
  @keyframes rowInRtl{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
  @keyframes shine{0%,100%{background-position:100% 0}50%{background-position:0 0}}

  /* pulses along the circuit lines */
  .traces .pulses path{animation:flow 5s linear infinite}
  @keyframes flow{0%{stroke-dashoffset:100;opacity:0}8%{opacity:1}85%{opacity:1}100%{stroke-dashoffset:0;opacity:0}}
  .traces .node{animation:blink 5s ease-in-out infinite}
  @keyframes blink{0%,70%,100%{fill-opacity:.55;transform:scale(1)}80%{fill-opacity:1;transform:scale(1.6)}}

  /* live status value flash */
  .prow .v.tick{animation:tick .9s ease}
  @keyframes tick{0%{color:#fff;text-shadow:0 0 12px rgba(79,179,255,.9)}100%{text-shadow:none}}

  /* scroll reveal: JS adds .reveal only to elements below the fold */
  .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
  .reveal.in{opacity:1;transform:none}
  .step::after{content:"";position:absolute;inset-inline-start:0;top:-2px;height:2px;width:0;background:var(--cyan-ink);transition:width 1s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
  .step.in::after,.step:not(.reveal)::after{width:100%}

  /* marquee */
  .marquee .track{animation:marq 38s linear infinite}
  .marquee:hover .track{animation-play-state:paused}
  @keyframes marq{to{transform:translateX(calc(-100% - 10px))}}
  [dir="rtl"] .marquee .track{animation-name:marqRtl}
  @keyframes marqRtl{to{transform:translateX(calc(100% + 10px))}}

  /* camera: scan, detect, alert — 7s loop */
  .cam::after{animation:scan 7s linear infinite}
  .bbox{animation:detect 7s ease infinite}
  .bbox-label{animation:labelIn 7s ease infinite}
  .alert-card{animation:alertIn 7s cubic-bezier(.2,.9,.3,1.2) infinite}
  .rec::before{animation:recBlink 1.2s steps(2,start) infinite}
  @keyframes scan{0%{top:-28%;opacity:0}5%{opacity:1}40%{top:100%;opacity:1}41%,100%{top:100%;opacity:0}}
  @keyframes detect{0%,22%{opacity:0;transform:scale(1.35)}30%{opacity:1;transform:scale(1)}34%{opacity:.35}38%,92%{opacity:1;transform:scale(1)}100%{opacity:0}}
  @keyframes labelIn{0%,30%{opacity:0;transform:translateY(6px)}36%,92%{opacity:1;transform:none}100%{opacity:0}}
  @keyframes alertIn{0%,42%{opacity:0;transform:translateY(24px) scale(.92)}50%,90%{opacity:1;transform:none}100%{opacity:0;transform:translateY(10px)}}
  @keyframes recBlink{to{visibility:hidden}}

  /* website mock: phone scrolls, languages swap */
  .phone{overflow:hidden}
  .phone i,.phone b{animation:phoneScroll 6s ease-in-out infinite}
  @keyframes phoneScroll{0%,20%{transform:none}50%,70%{transform:translateY(-10px)}100%{transform:none}}
  .mock .m-btn{animation:btnPulse 2.6s ease-in-out infinite}
  @keyframes btnPulse{0%,100%{box-shadow:0 0 0 0 rgba(47,191,113,.5)}60%{box-shadow:0 0 0 8px rgba(47,191,113,0)}}
  .lang-tags span{animation:langSwap 4s ease-in-out infinite}
  .lang-tags span+span{animation-delay:2s}
  @keyframes langSwap{0%,45%{background:var(--navy);color:#fff;border-color:var(--navy)}50%,100%{background:#fff;color:var(--navy);border-color:var(--line)}}

  /* floating WhatsApp ring */
  .wa-float::before{content:"";position:absolute;inset:0;border-radius:inherit;border:2px solid var(--ok);animation:ring 2.8s ease-out infinite}
  @keyframes ring{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.35);opacity:0}}
}

/* ================================================================= photos & screenshots */
.ph{margin:0;position:relative;overflow:hidden;background:
  linear-gradient(rgba(79,179,255,.07) 1px,transparent 1px) 0 0/22px 22px,
  linear-gradient(90deg,rgba(79,179,255,.07) 1px,transparent 1px) 0 0/22px 22px,
  linear-gradient(135deg,#1B2262,#0A1128)}
.ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.ph-empty::after{content:attr(data-label);position:absolute;inset-inline-start:14px;bottom:12px;font:500 .72rem/1.2 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:#A9B2D2}
:lang(ar) .ph-empty::after{font-family:var(--f-body);letter-spacing:0;font-size:.8rem}

/* hero photo layer, tinted into the brand navy */
.hero-photo{position:absolute;inset:0;background-size:cover;background-position:center 40%;opacity:.85;filter:saturate(1.1) contrast(1.05)}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(10,17,40,.9) 0%,rgba(10,17,40,.55) 50%,rgba(10,17,40,.15) 100%),linear-gradient(0deg,rgba(10,17,40,.6),transparent 40%)}
[dir="rtl"] .hero::after{background:linear-gradient(270deg,rgba(10,17,40,.9) 0%,rgba(10,17,40,.55) 50%,rgba(10,17,40,.15) 100%),linear-gradient(0deg,rgba(10,17,40,.6),transparent 40%)}
.hero .traces{z-index:1}.hero-grid{z-index:2}.hero::before{z-index:1}

/* service cards with photo */
.svc{padding:0;grid-template-rows:auto 1fr}
.svc-img{aspect-ratio:16/9;max-width:100%}
.svc-body{display:grid;grid-template-rows:auto auto 1fr auto;gap:10px;padding:20px 22px 22px}
.svc:hover .svc-img img,.show:hover img,.prod:hover .prod-img img{transform:scale(1.06)}

/* inner page hero with picture */
.page-hero .ph-text{display:grid;gap:18px;align-content:center;min-width:0}
.page-hero.has-img .wrap{grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.hero-fig{aspect-ratio:4/3;max-width:100%;border-radius:16px;box-shadow:0 30px 50px -30px rgba(10,17,40,.55)}
.hero-fig::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);background:linear-gradient(180deg,transparent 60%,rgba(10,17,40,.35))}
@media (max-width:900px){.page-hero.has-img .wrap{grid-template-columns:1fr;gap:28px}.hero-fig{aspect-ratio:16/9}}
@media (prefers-reduced-motion:no-preference){.hero-fig{animation:panelIn 1s .2s cubic-bezier(.2,.7,.2,1) both}}

/* services page side photo */
.side-img{aspect-ratio:16/10;max-width:100%;border-radius:10px;margin-block-end:6px}

/* product cards: image bleeds to the card edges */
.prod-img{margin:-24px -24px 8px;aspect-ratio:16/9;max-width:calc(100% + 48px);border-radius:var(--r) var(--r) 0 0}
.prod-img.shot{background:#eef1f8}
.prod-img.shot img{object-fit:cover;object-position:top center}
.prod.featured .prod-img{aspect-ratio:21/9}

/* home: showcase of real product screens */
.showcase{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-block-end:16px}
.show{display:grid;grid-template-rows:auto 1fr;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;text-decoration:none;color:inherit;transition:transform .2s ease,box-shadow .2s ease,border-color .2s}
.show:hover{transform:translateY(-3px);border-color:var(--navy);box-shadow:0 16px 30px -22px rgba(27,34,98,.5)}
.show-img{aspect-ratio:16/10;max-width:100%;border-block-end:1px solid var(--line)}
.show-img.shot{background:#eef1f8}
.show-img.shot img{object-position:top center}
.show>div{display:grid;gap:4px;padding:16px 18px}
.show b{font:600 1.05rem/1.3 var(--f-display);color:var(--navy)}
.show span{font-size:.9rem;color:var(--muted)}
@media (max-width:900px){.showcase{grid-template-columns:1fr 1fr}.showcase .show:last-child{grid-column:span 2}}
@media (max-width:560px){.showcase{grid-template-columns:1fr}.showcase .show:last-child{grid-column:auto}}

@media (prefers-reduced-motion:no-preference){.hero-photo{animation:kenburns 30s ease-in-out infinite alternate}@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.12) translate(-1.5%,-1%)}}}
@media (max-width:900px){.hero::after{background:linear-gradient(180deg,rgba(10,17,40,.75),rgba(10,17,40,.9))}}

/* ================================================================= real EV mark */
.wordmark .ev-mark{height:40px;width:auto;flex:none;color:var(--navy)}
.site-footer .wordmark .ev-mark{color:#fff}
@media (max-width:560px){.wordmark .ev-mark{height:34px}}

/* product logo badges */
.prod-img .badge,.show-img .badge{position:absolute;inset-inline-start:14px;bottom:14px;width:72px;height:72px;object-fit:contain;background:#fff;border-radius:12px;padding:6px;box-shadow:0 10px 22px -10px rgba(10,17,40,.6);transition:none}
.prod-img .badge-ai{width:auto;max-width:170px;height:56px;padding:8px 10px}
.prod:hover .prod-img .badge,.show:hover .badge{transform:none}

/* ================================================================= AI Exclusive Vision page */
.ai-hero .hero-grid{grid-template-columns:1fr 1fr}
.ai-logo{height:auto;width:min(340px,80%);margin-block-end:22px}
.ai-hero .eyebrow{color:var(--brass-lt)}
.ai-hero h1{font-size:clamp(1.9rem,3.8vw,3rem)}
.ai-hero h1 em{color:var(--brass-lt)}
@media (prefers-reduced-motion:no-preference){.ai-hero h1 em{background:linear-gradient(90deg,var(--brass-lt) 0%,#fff3d1 45%,var(--brass-lt) 60%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent}}
.ai-hero-fig{position:relative;margin:0;border-radius:14px;overflow:visible;padding:14px}
.ai-hero-fig img{width:100%;border-radius:10px;display:block;box-shadow:0 30px 60px -30px rgba(0,0,0,.7)}
.ai-hero-fig .corner{position:absolute;width:34px;height:34px;border:3px solid var(--brass)}
.corner.tl{top:0;left:0;border-right:0;border-bottom:0}.corner.tr{top:0;right:0;border-left:0;border-bottom:0}
.corner.bl{bottom:0;left:0;border-right:0;border-top:0}.corner.br{bottom:0;right:0;border-left:0;border-top:0}
@media (prefers-reduced-motion:no-preference){
  .ai-hero-fig{animation:panelIn 1s .25s cubic-bezier(.2,.7,.2,1) both}
  .ai-hero-fig .corner{animation:lockOn 2.4s 1s ease-out both}
  @keyframes lockOn{0%{opacity:0;transform:scale(1.6)}40%{opacity:1;transform:scale(1)}55%{opacity:.3}70%,100%{opacity:1}}
}
@media (max-width:900px){.ai-hero .hero-grid{grid-template-columns:1fr}}

.probs{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.prob{display:grid;grid-template-columns:150px 1fr;gap:20px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px}
.prob .ph{aspect-ratio:3/4;border-radius:8px}
.prob h3{font-size:1.25rem;margin-block:8px}
.prob p{color:var(--muted)}
@media (max-width:900px){.probs{grid-template-columns:1fr}}
@media (max-width:480px){.prob{grid-template-columns:1fr}.prob .ph{aspect-ratio:16/9}}

.sector .section-head{margin-block-end:10px}
.zoom-hint{font:500 .76rem/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-block-end:28px}
:lang(ar) .zoom-hint{font-family:var(--f-body);letter-spacing:0;font-size:.86rem}
.dark .zoom-hint{color:var(--on-dark-muted)}
.shot-group{display:grid;gap:14px;margin-block-end:36px}
.shot-group h3{font-size:1.2rem;display:flex;align-items:center;gap:10px}
.shot-group h3::before{content:"";width:14px;height:14px;border:2px solid var(--brass);border-radius:2px}
.shots{display:grid;gap:14px;grid-template-columns:repeat(3,1fr)}
.shots.n2{grid-template-columns:repeat(2,1fr)}
.shots.n4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1000px){.shots,.shots.n4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.shots,.shots.n2,.shots.n4{grid-template-columns:1fr}}
.shot-card{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:grid;grid-template-rows:auto 1fr}
.dark .shot-card{background:#0f1840;border-color:rgba(184,150,90,.35)}
.zoom{display:block;padding:0;border:0;background:#0b1227;cursor:zoom-in;width:100%;aspect-ratio:4/3;overflow:hidden}
.zoom img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.zoom:hover img{transform:scale(1.05)}
.shot-card figcaption{padding:12px 14px;font-size:.93rem;font-weight:500}
.dark .shot-card figcaption{color:var(--on-dark)}
.more-row{display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between}
.more-row .section-head{margin:0}
.alert-pair{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.alert-pair figure{margin:0;display:grid;gap:8px}
.alert-pair .zoom{aspect-ratio:1/1;border-radius:12px}
.alert-pair figcaption{font-size:.9rem;color:var(--muted)}
.chip-dark{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.06);border-color:rgba(217,196,143,.4);color:var(--on-dark)}
.chip-dark .ico{width:15px;height:15px;color:var(--brass-lt)}
.privacy-fig{aspect-ratio:4/3;border-radius:14px;max-width:100%}
.ai-privacy .section-head{margin-block-end:22px}
.values.adv div{border-block-start-color:var(--brass)}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(6,10,24,.92);display:grid;place-items:center;padding:calc(20px + env(safe-area-inset-top,0px)) 16px calc(20px + env(safe-area-inset-bottom,0px))}
.lightbox[hidden]{display:none}
.lightbox figure{margin:0;display:grid;gap:12px;max-width:min(1100px,100%)}
.lightbox img{max-width:100%;max-height:78vh;border-radius:10px;object-fit:contain;margin-inline:auto}
.lightbox figcaption{color:#fff;text-align:center;font-weight:500}
.lb-close{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));inset-inline-end:14px;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08);color:#fff;display:grid;place-items:center;cursor:pointer}
@media (prefers-reduced-motion:no-preference){.lightbox:not([hidden]) figure{animation:panelIn .35s cubic-bezier(.2,.7,.2,1) both}}
.shots.n2 .zoom{aspect-ratio:16/9}
.dark .eyebrow{color:var(--cyan)}
#restaurants .eyebrow,.ai-privacy .eyebrow{color:var(--brass-lt)}
.values div{align-content:start}
.prod.ai .btn-ghost{color:var(--on-dark);border-color:rgba(217,196,143,.6)}
.lightbox{background:rgba(6,10,24,.96)}

/* camera block with a real detection photo */
.cam{background:#0b1227}
.cam-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.cam .cam-hud{z-index:3;inset-inline:0;top:0;padding:12px 14px;background:linear-gradient(180deg,rgba(6,10,24,.75),transparent)}
.cam::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(0deg,rgba(6,10,24,.55),transparent 45%)}
.cam::after{z-index:2}
.cam-alert{position:absolute;z-index:4;inset-inline-end:4%;bottom:6%;width:40%;border-radius:12px;overflow:hidden;box-shadow:0 24px 40px -14px rgba(0,0,0,.75);border:1px solid rgba(217,196,143,.5);background:#1c2433}
.cam-alert img{display:block;width:100%;height:auto}
.cam-alert-tag{display:flex;align-items:center;gap:6px;padding:8px 10px;background:var(--brass);color:#1a1405;font:600 .78rem/1.2 var(--f-body)}
.cam-alert-tag .ico{width:16px;height:16px}
.cam .cam-example{z-index:3;color:#c9cfe6}
@media (prefers-reduced-motion:no-preference){
  .cam-img{animation:camZoom 7s ease-in-out infinite}
  @keyframes camZoom{0%,35%{transform:scale(1)}50%,90%{transform:scale(1.06)}100%{transform:scale(1)}}
  .cam-alert{animation:alertIn 7s cubic-bezier(.2,.9,.3,1.2) infinite}
}
@media (max-width:560px){.cam-alert{width:52%}}
.devices{margin:0;display:grid;gap:10px}
.devices img{width:100%;height:auto;display:block}
.devices figcaption{font-size:.88rem;color:var(--muted);text-align:center}
.cam-alert{width:33%}@media (max-width:560px){.cam-alert{width:46%}}