/* =========================================================
   DESIGN TOKENS
   ========================================================= */
:root{
  --navy-900:#060d1a;
  --navy-850:#08111f;
  --navy-800:#0a1628;
  --navy-700:#0f1d33;
  --navy-600:#16294a;
  --line:rgba(146,176,214,.12);
  --line-strong:rgba(146,176,214,.22);

  --teal:#009cd8;
  --teal-dim:#186cb4;
  --teal-soft:rgba(0,156,216,.12);
  --amber:#f5a623;

  --white:#eef3fb;
  --silver:#c2cee0;
  --dim:#8294b0;
  --dimmer:#5d6f8c;

  --display:"Cairo",system-ui,"Segoe UI",sans-serif;
  --body:"Tajawal",system-ui,"Segoe UI",sans-serif;

  --maxw:1180px;
  --r:16px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--body);
  background:var(--navy-900);
  color:var(--silver);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
section{position:relative}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* Section rhythm */
.block{padding:96px 0}
@media(max-width:640px){.block{padding:64px 0}}

.eyebrow{
  font-family:var(--display);
  font-weight:700;
  font-size:.78rem;
  letter-spacing:.18em;
  color:var(--teal);
  display:inline-flex;align-items:center;gap:10px;
  margin-bottom:18px;
}
.eyebrow::before{
  content:"";width:26px;height:2px;background:var(--teal);
  display:inline-block;border-radius:2px;
}
h2.title{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(1.7rem,3.6vw,2.6rem);
  color:var(--white);
  line-height:1.25;
  letter-spacing:-.01em;
}
.lead{color:var(--dim);font-size:1.06rem;max-width:60ch;margin-top:14px}

/* =========================================================
   HEADER
   ========================================================= */
header{
  position:fixed;inset:0 0 auto 0;z-index:50;
  transition:background .3s ease,border-color .3s ease,backdrop-filter .3s;
  border-bottom:1px solid transparent;
}
header.scrolled{
  background:rgba(8,17,31,.82);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px}
.brand{display:flex;align-items:center;gap:13px;font-family:var(--display)}
.brand .mark{width:46px;height:46px;border-radius:12px;background:var(--logo) center/contain no-repeat;flex:none;position:relative;padding:3px;box-shadow:0 0 0 1px var(--line-strong),0 8px 22px -10px rgba(0,156,216,.55)}
.brand .mark svg{width:22px;height:22px}
.brand-sep{width:1px;height:30px;background:linear-gradient(180deg,transparent,var(--line-strong),transparent);flex:none}
.brand .name{font-weight:800;font-size:1.16rem;color:var(--white);line-height:1.2;letter-spacing:-.01em}
.brand .name small{display:block;font-family:var(--body);font-weight:600;font-size:.69rem;color:var(--teal);letter-spacing:.01em;margin-top:3px;opacity:.95}

.nav-right{display:flex;align-items:center;gap:14px}
.lang-toggle{display:inline-flex;background:var(--navy-700);border:1px solid var(--line-strong);border-radius:10px;padding:3px;gap:2px}
.lang-toggle a{font-family:var(--display);font-weight:700;font-size:.82rem;color:var(--dim);padding:6px 12px;border-radius:7px;transition:.2s;line-height:1}
.lang-toggle a:hover{color:var(--white)}
.lang-toggle a.on{background:var(--teal);color:var(--navy-900)}
.lang-toggle.mobile{margin-top:16px;justify-content:center;width:-moz-fit-content;width:fit-content}

.menu{display:flex;align-items:center;gap:6px}
.menu a{
  font-weight:500;font-size:.95rem;color:var(--silver);
  padding:9px 14px;border-radius:10px;transition:.2s;position:relative;
}
.menu a:hover{color:var(--white);background:rgba(255,255,255,.04)}
.menu a.active{color:var(--teal)}

.cta{
  font-family:var(--display);font-weight:700;
  background:var(--teal);color:var(--navy-900);
  padding:11px 22px;border-radius:11px;font-size:.95rem;
  transition:.22s;white-space:nowrap;border:1px solid transparent;cursor:pointer;
}
.cta:hover{background:#38b6ec;transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,156,216,.32)}
.cta.ghost{background:transparent;color:var(--white);border-color:var(--line-strong)}
.cta.ghost:hover{background:rgba(255,255,255,.05);box-shadow:none;border-color:var(--teal)}
.cta.amber{background:var(--amber);color:#1a1206}
.cta.amber:hover{background:#ffb733;box-shadow:0 10px 26px rgba(245,166,35,.32)}

.burger{display:none;background:none;border:1px solid var(--line-strong);border-radius:10px;width:44px;height:44px;cursor:pointer;flex-direction:column;gap:5px;align-items:center;justify-content:center}
.burger span{width:20px;height:2px;background:var(--white);border-radius:2px;transition:.25s}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:880px){
  .menu, .nav-right{display:none}
  .burger{display:flex}
  .mobile-menu{
    position:fixed;inset:74px 0 auto 0;z-index:49;
    background:rgba(8,17,31,.97);backdrop-filter:blur(16px);
    border-bottom:1px solid var(--line);
    padding:18px 24px 28px;
    transform:translateY(-120%);transition:transform .35s cubic-bezier(.4,0,.2,1);
  }
  .mobile-menu.open{transform:translateY(0)}
  .mobile-menu a{display:block;padding:14px 6px;font-size:1.05rem;color:var(--silver);border-bottom:1px solid var(--line)}
  .mobile-menu a:last-of-type{border:none}
  .mobile-menu .cta{display:block;text-align:center;margin-top:16px}
}
@media(min-width:881px){.mobile-menu{display:none}}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  min-height:100vh;display:flex;align-items:center;
  padding-top:74px;overflow:hidden;
  background:
    radial-gradient(1100px 600px at 85% -5%,rgba(0,156,216,.10),transparent 60%),
    radial-gradient(900px 500px at 0% 100%,rgba(22,41,74,.6),transparent 55%),
    var(--navy-900);
}
#net{position:absolute;inset:0;z-index:0;opacity:.85}
.hero .wrap{position:relative;z-index:2;width:100%}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
@media(max-width:920px){.hero-grid{grid-template-columns:1fr;gap:34px}}

.hero h1{
  font-family:var(--display);font-weight:900;
  font-size:clamp(2.1rem,5.4vw,3.7rem);
  line-height:1.18;color:var(--white);letter-spacing:-.015em;
}
.hero h1 .hl{
  color:var(--teal);position:relative;white-space:nowrap;
}
.hero p.sub{font-size:clamp(1.02rem,1.6vw,1.18rem);color:var(--dim);margin:22px 0 32px;max-width:54ch}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.hero-stats{display:flex;gap:30px;margin-top:46px;flex-wrap:wrap}
.hero-stats .s{}
.hero-stats .n{font-family:var(--display);font-weight:800;font-size:1.9rem;color:var(--white);line-height:1}
.hero-stats .l{font-size:.85rem;color:var(--dim);margin-top:6px}
.hero-stats .s + .s{padding-right:30px;border-right:1px solid var(--line)}

/* hero visual card */
.console{
  background:linear-gradient(160deg,var(--navy-700),var(--navy-850));
  border:1px solid var(--line-strong);border-radius:20px;
  padding:0;overflow:hidden;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.7);
}
.console .bar{display:flex;align-items:center;gap:8px;padding:14px 18px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.02)}
.console .bar .dot{width:11px;height:11px;border-radius:50%}
.console .bar .t{margin-right:auto;font-family:var(--display);font-size:.82rem;color:var(--dim);letter-spacing:.02em}
.console .body{padding:20px}
.row{display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:12px;background:rgba(255,255,255,.025);margin-bottom:10px;border:1px solid var(--line)}
.row:last-child{margin-bottom:0}
.row .ic{width:36px;height:36px;border-radius:9px;background:var(--teal-soft);display:grid;place-items:center;flex:none;color:var(--teal)}
.row .meta{flex:1}
.row .meta b{display:block;color:var(--white);font-weight:700;font-size:.92rem;font-family:var(--display)}
.row .meta span{font-size:.78rem;color:var(--dim)}
.pill{font-size:.72rem;font-weight:700;font-family:var(--display);padding:4px 11px;border-radius:20px;background:rgba(0,156,216,.14);color:var(--teal)}
.pill.warn{background:rgba(245,166,35,.14);color:var(--amber)}
.live{display:inline-flex;align-items:center;gap:7px;font-size:.78rem;color:var(--teal)}
.live::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 0 rgba(0,156,216,.6);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(0,156,216,.5)}70%{box-shadow:0 0 0 9px rgba(0,156,216,0)}100%{box-shadow:0 0 0 0 rgba(0,156,216,0)}}

/* marquee partners */
.trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:transparent;padding:30px 0}
.trust .wrap{display:flex;align-items:center;gap:26px;flex-wrap:nowrap}
.trust .lbl{font-size:.92rem;color:var(--dim,#8fa3bd);font-family:var(--display);font-weight:700;letter-spacing:.06em;white-space:nowrap;flex:none}
.trust-slider{display:flex;align-items:center;gap:12px;flex:1;min-width:0}
.trust-track{display:flex;align-items:center;gap:44px;overflow-x:auto;scroll-behavior:smooth;flex:1;scrollbar-width:none;-ms-overflow-style:none;padding:6px 2px}
.trust-track::-webkit-scrollbar{display:none}
.trust .vendor{font-family:var(--display);font-weight:800;font-size:1.45rem;color:#ffffff;opacity:.9;transition:.25s;white-space:nowrap;flex:none;letter-spacing:.01em}
.trust .vendor:hover{color:#ffffff;opacity:1}
.tr-arw{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(0,156,216,.1);border:1px solid var(--line);color:#3bb4e8;cursor:pointer;transition:.2s}
.tr-arw:hover{background:var(--teal,#009cd8);color:#fff;border-color:transparent}
.tr-arw svg{width:17px;height:17px}
[dir=rtl] .tr-arw svg{transform:scaleX(-1)}
.tr-arw[disabled]{opacity:.25;cursor:default;pointer-events:none}
@media(max-width:620px){.trust .wrap{flex-wrap:wrap;gap:12px}.trust .lbl{width:100%;text-align:center}}

/* =========================================================
   ABOUT
   ========================================================= */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center}
@media(max-width:860px){.about-grid{grid-template-columns:1fr;gap:34px}}
.about p{color:var(--dim);margin-top:16px;font-size:1.04rem}
.values{display:flex;flex-direction:column;gap:14px;margin-top:28px}
.value{display:flex;gap:14px;align-items:flex-start;padding:18px;border:1px solid var(--line);border-radius:14px;background:var(--navy-800);transition:.25s}
.value:hover{border-color:var(--line-strong);transform:translateX(-4px)}
.value .vi{width:42px;height:42px;border-radius:11px;background:var(--teal-soft);color:var(--teal);display:grid;place-items:center;flex:none}
.value b{font-family:var(--display);color:var(--white);font-size:1.02rem;display:block;margin-bottom:3px}
.value span{font-size:.92rem;color:var(--dim)}

/* =========================================================
   SERVICES
   ========================================================= */
.services-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-bottom:46px}
.svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media(max-width:820px){.svc-grid{grid-template-columns:1fr}}
.svc{
  background:linear-gradient(165deg,var(--navy-800),var(--navy-850));
  border:1px solid var(--line);border-radius:var(--r);padding:30px;
  position:relative;overflow:hidden;transition:.3s;
}
.svc::before{content:"";position:absolute;inset:0;background:radial-gradient(420px 200px at 100% 0,var(--teal-soft),transparent 60%);opacity:0;transition:.35s}
.svc:hover{border-color:var(--line-strong);transform:translateY(-5px)}
.svc:hover::before{opacity:1}
.svc .top{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.svc .ic{width:54px;height:54px;border-radius:14px;background:var(--teal-soft);color:var(--teal);display:grid;place-items:center;flex:none;border:1px solid rgba(0,156,216,.22)}
.svc .ic svg{width:26px;height:26px}
.svc h3{font-family:var(--display);font-weight:800;font-size:1.28rem;color:var(--white)}
.svc > p{color:var(--dim);font-size:.97rem;position:relative;z-index:1}
.svc ul{list-style:none;margin-top:18px;display:flex;flex-direction:column;gap:9px;position:relative;z-index:1}
.svc li{display:flex;gap:10px;font-size:.93rem;color:var(--silver)}
.svc li svg{width:18px;height:18px;color:var(--teal);flex:none;margin-top:4px}
.svc .num{position:absolute;top:22px;left:26px;font-family:var(--display);font-weight:800;font-size:2.4rem;color:rgba(146,176,214,.06)}

/* =========================================================
   FIREWALL / NETWORK DEFENSE (interactive)
   ========================================================= */
.fw{background:var(--navy-850);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.fw-head{text-align:center;max-width:64ch;margin:0 auto}
.fw-stage{
  position:relative;margin-top:42px;border:1px solid var(--line-strong);border-radius:22px;overflow:hidden;
  height:clamp(330px,46vw,460px);
  background:
    radial-gradient(700px 300px at 88% 50%,rgba(245,166,35,.05),transparent 60%),
    radial-gradient(700px 300px at 14% 50%,var(--teal-soft),transparent 60%),
    linear-gradient(160deg,var(--navy-800),var(--navy-900));
  box-shadow:inset 0 0 80px -30px rgba(0,0,0,.8);
}
#fwcanvas{width:100%;height:100%;display:block}
.fw-legend{position:absolute;bottom:14px;right:50%;transform:translateX(50%);display:flex;gap:18px;flex-wrap:wrap;justify-content:center;
  background:rgba(6,13,26,.6);backdrop-filter:blur(6px);border:1px solid var(--line);border-radius:30px;padding:8px 18px;font-size:.8rem}
.fw-legend span{display:inline-flex;align-items:center;gap:7px;color:var(--silver)}
.fw-legend i{width:9px;height:9px;border-radius:50%;display:inline-block}

.fw-controls{display:flex;flex-wrap:wrap;gap:11px;align-items:center;justify-content:center;margin-top:26px}
.fw-controls .hint{width:100%;text-align:center;color:var(--dim);font-size:.92rem;margin-bottom:4px}
.layer{cursor:pointer;user-select:none;display:inline-flex;align-items:center;gap:9px;padding:10px 17px;border-radius:12px;
  border:1px solid var(--line-strong);background:var(--navy-800);font-family:var(--display);font-weight:700;font-size:.88rem;color:var(--white);transition:.22s}
.layer:hover{border-color:var(--teal)}
.layer .led{width:9px;height:9px;border-radius:50%;background:var(--teal);box-shadow:0 0 10px var(--teal);transition:.22s}
.layer.off{color:var(--dim);border-color:var(--line);background:transparent}
.layer.off .led{background:#ff5f57;box-shadow:0 0 10px #ff5f57}

.fw-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:26px}
@media(max-width:680px){.fw-cards{grid-template-columns:1fr}}
.fw-card{display:flex;align-items:center;gap:16px;padding:22px;border:1px solid var(--line);border-radius:16px;background:var(--navy-800)}
.fw-card .fc-ic{width:48px;height:48px;border-radius:13px;display:grid;place-items:center;flex:none}
.fw-card .num{font-family:var(--display);font-weight:800;font-size:1.7rem;color:var(--white);line-height:1;font-variant-numeric:tabular-nums}
.fw-card .lbl{font-size:.86rem;color:var(--dim);margin-top:5px}

/* =========================================================
   NETWORK TOPOLOGY (interactive failover)
   ========================================================= */
.net-stage{
  position:relative;margin-top:42px;border:1px solid var(--line-strong);border-radius:22px;overflow:hidden;
  height:clamp(360px,52vw,520px);cursor:pointer;
  background:
    radial-gradient(600px 400px at 50% 50%,var(--teal-soft),transparent 65%),
    linear-gradient(160deg,var(--navy-800),var(--navy-900));
  box-shadow:inset 0 0 80px -30px rgba(0,0,0,.8);
}
#netcanvas{width:100%;height:100%;display:block}
.net-banner{
  position:absolute;top:14px;right:50%;transform:translateX(50%);
  display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
  background:rgba(6,13,26,.7);backdrop-filter:blur(6px);border:1px solid var(--line);border-radius:30px;
  padding:9px 18px;font-family:var(--display);font-weight:700;font-size:.85rem;color:var(--teal);transition:.3s}
.net-banner.alert{color:var(--amber);border-color:rgba(245,166,35,.4)}
.net-banner .led{width:9px;height:9px;border-radius:50%;background:currentColor;box-shadow:0 0 10px currentColor}
.net-actions{display:flex;gap:12px;justify-content:center;align-items:center;margin-top:24px;flex-wrap:wrap}
.net-actions .hint{width:100%;text-align:center;color:var(--dim);font-size:.92rem;margin-bottom:2px}

/* =========================================================
   COMPUTER DIAGNOSTICS (interactive)
   ========================================================= */
.pc-wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:22px;margin-top:42px;align-items:stretch}
@media(max-width:860px){.pc-wrap{grid-template-columns:1fr}}
.pc-panel{border:1px solid var(--line-strong);border-radius:20px;padding:28px;background:linear-gradient(165deg,var(--navy-800),var(--navy-850));display:flex;flex-direction:column}
.pc-panel .ph{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:24px}
.pc-panel .ph h3{font-family:var(--display);font-weight:800;font-size:1.18rem;color:var(--white)}
.pc-badge{font-family:var(--display);font-weight:700;font-size:.8rem;padding:6px 14px;border-radius:20px;transition:.3s;white-space:nowrap}
.pc-badge.bad{background:rgba(255,95,87,.14);color:#ff5f57}
.pc-badge.good{background:var(--teal-soft);color:var(--teal)}
.gauge{margin-bottom:20px}
.gauge:last-child{margin-bottom:0}
.gauge .gl{display:flex;justify-content:space-between;align-items:baseline;font-size:.92rem;color:var(--silver)}
.gauge .gl b{font-family:var(--display);font-weight:700}
.gauge .gv{font-family:var(--display);font-weight:800;font-size:1.05rem;font-variant-numeric:tabular-nums;transition:color .4s}
.gbar{height:10px;border-radius:6px;background:var(--navy-900);overflow:hidden;margin-top:9px;border:1px solid var(--line)}
.gbar i{display:block;height:100%;border-radius:6px;width:0;transition:width 1.3s cubic-bezier(.3,.7,.3,1),background .5s}

.pc-tasks{list-style:none;display:flex;flex-direction:column;gap:2px;flex:1}
.task{display:flex;align-items:center;gap:13px;padding:13px 4px;border-bottom:1px solid var(--line);color:var(--dim);transition:.35s;font-size:.95rem}
.task:last-child{border-bottom:none}
.task .tck{width:26px;height:26px;border-radius:50%;border:1.6px solid var(--line-strong);display:grid;place-items:center;flex:none;transition:.35s;color:transparent}
.task.run .tck{border-color:var(--amber);color:var(--amber);animation:spin 1s linear infinite}
.task.done{color:var(--white)}
.task.done .tck{border-color:var(--teal);background:var(--teal);color:var(--navy-900)}
.task.done .tck svg{stroke:var(--navy-900)}
@keyframes spin{to{transform:rotate(360deg)}}
.pc-run{margin-top:22px}

/* =========================================================
   LIVE LAB (stacked cards)
   ========================================================= */
.lab-stack{display:flex;flex-direction:column;gap:24px;margin-top:44px}
.lab-card{border:1px solid var(--line-strong);border-radius:22px;padding:28px;background:linear-gradient(170deg,var(--navy-800),var(--navy-850))}
@media(max-width:640px){.lab-card{padding:20px}}
.lab-card-head{display:flex;align-items:flex-start;gap:18px;padding-bottom:20px;border-bottom:1px solid var(--line);margin-bottom:8px}
.lab-ix{font-family:var(--display);font-weight:800;font-size:1.5rem;color:var(--teal);background:var(--teal-soft);border:1px solid rgba(0,156,216,.25);width:54px;height:54px;border-radius:14px;display:grid;place-items:center;flex:none}
.lab-card-t h3{font-family:var(--display);font-weight:800;font-size:1.3rem;color:var(--white);line-height:1.3}
.lab-card-t p{color:var(--dim);font-size:.96rem;margin-top:5px;max-width:62ch}
.fw-stage,.net-stage{margin-top:22px}
.cta.ghost.on{background:var(--teal);color:var(--navy-900);border-color:var(--teal)}

/* =========================================================
   CCTV CAMERAS (interactive)
   ========================================================= */
.cctv{display:grid;grid-template-columns:1.65fr .9fr;gap:22px;margin-top:8px}
@media(max-width:860px){.cctv{grid-template-columns:1fr}}
.cctv-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cam{position:relative;aspect-ratio:16/10;border-radius:14px;overflow:hidden;border:1px solid var(--line-strong);background:#04060c;transition:border-color .3s,box-shadow .3s}
.cam.motion{border-color:#ff5f57;box-shadow:0 0 0 2px rgba(255,95,87,.3),0 0 30px -6px rgba(255,95,87,.55)}
.cam-scene{position:absolute;inset:0}
.cam-scene.s1{background:linear-gradient(180deg,#13283f,#0a1828 60%,#0d2233)}
.cam-scene.s2{background:linear-gradient(180deg,#1b2336,#0e1626 60%,#10202e)}
.cam-scene.s3{background:linear-gradient(180deg,#0c1a2c,#0a1422 55%,#162a2c)}
.cam-scene.s4{background:linear-gradient(180deg,#231c2e,#121626 60%,#102028)}
.cam-scene::before{content:"";position:absolute;left:8%;bottom:0;width:84%;height:30%;background:rgba(255,255,255,.04);border-radius:4px 4px 0 0}
.cam-scene.s1::before{left:40%;width:24%;height:46%;background:rgba(255,255,255,.06)}
.cam-scene.s2::before{left:10%;width:80%;height:18%;background:repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 14%,transparent 14% 20%)}
.cam-scene.s3::before{left:12%;bottom:14%;width:30%;height:16%;border-radius:6px;background:rgba(255,255,255,.06)}
.cam-scene.s4::before{left:18%;width:64%;height:14%;background:rgba(255,255,255,.06)}
.cam-scene::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.022) 0 1px,transparent 1px 3px);pointer-events:none}
.cctv-grid.night .cam-scene{filter:brightness(1.15) grayscale(1) sepia(1) hue-rotate(75deg) saturate(2.4)}
.cam-figure{position:absolute;bottom:13%;left:-14%;width:7%;height:27%;border-radius:42% 42% 28% 28%;background:rgba(228,238,255,.9);opacity:0;box-shadow:0 0 12px rgba(228,238,255,.4)}
.cam-box{position:absolute;bottom:11%;left:-17%;width:13%;height:32%;border:1.5px solid #ff5f57;border-radius:4px;opacity:0}
.cam.motion .cam-figure,.cam.motion .cam-box{opacity:1;animation:camWalk 3.4s linear}
@keyframes camWalk{from{left:-17%}to{left:104%}}
.cam-box::after{content:"شخص 96%";position:absolute;top:-17px;right:-2px;font-size:.58rem;font-family:Tajawal,sans-serif;color:#fff;background:#ff5f57;padding:1px 5px;border-radius:4px;white-space:nowrap;direction:rtl}
.cam-hud{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:8px 10px;z-index:3;background:linear-gradient(180deg,rgba(0,0,0,.5),transparent);font-size:.68rem;font-family:Tajawal,sans-serif}
.rec{display:inline-flex;align-items:center;gap:5px;color:#ff5f57;font-weight:700}
.rec i{width:7px;height:7px;border-radius:50%;background:#ff5f57;animation:blink 1.4s infinite}
@keyframes blink{50%{opacity:.25}}
.cam-name{color:#c2cee0}
.cam-time{position:absolute;bottom:7px;right:9px;z-index:3;font-size:.66rem;font-family:Tajawal,sans-serif;color:#9fb0c8;direction:ltr;text-shadow:0 1px 2px #000}
.cam-flag{position:absolute;bottom:7px;left:9px;z-index:3;font-size:.66rem;font-family:var(--display);font-weight:700;color:#fff;background:#ff5f57;padding:2px 9px;border-radius:6px;opacity:0;transition:.25s}
.cam.motion .cam-flag{opacity:1}
.cctv-side{display:flex;flex-direction:column;gap:16px}
.cctv-controls{display:flex;flex-direction:column;gap:10px}
.cctv-controls .cta{width:100%;text-align:center}
.cctv-log{border:1px solid var(--line);border-radius:16px;background:var(--navy-800);padding:18px;flex:1}
.cctv-log h4{font-family:var(--display);color:var(--white);font-size:1rem;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.cctv-log ul{list-style:none;display:flex;flex-direction:column;gap:8px;max-height:260px;overflow:auto}
.cctv-log li{font-size:.83rem;color:var(--silver);padding:9px 11px;border:1px solid var(--line);border-radius:9px;background:var(--navy-900)}
.cctv-log li b{color:var(--teal);font-family:Tajawal,sans-serif;direction:ltr;margin-left:6px}
.cctv-log li.empty{color:var(--dimmer);border-style:dashed;background:transparent}

/* =========================================================
   WHY US
   ========================================================= */
.why{background:var(--navy-850);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:46px}
@media(max-width:880px){.why-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.why-grid{grid-template-columns:1fr}}
.feat{padding:28px;border:1px solid var(--line);border-radius:14px;background:var(--navy-800);transition:.25s}
.feat:hover{border-color:var(--teal);transform:translateY(-4px)}
.feat .fi{width:46px;height:46px;border-radius:12px;background:var(--teal-soft);color:var(--teal);display:grid;place-items:center;margin-bottom:16px}
.feat b{font-family:var(--display);color:var(--white);font-size:1.08rem;display:block;margin-bottom:8px}
.feat p{font-size:.92rem;color:var(--dim)}

/* =========================================================
   TESTIMONIALS
   ========================================================= */
.tst-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:46px}
@media(max-width:860px){.tst-grid{grid-template-columns:1fr}}
.tst{padding:30px;border:1px solid var(--line);border-radius:var(--r);background:linear-gradient(165deg,var(--navy-800),var(--navy-850));position:relative}
.tst .q{font-family:var(--display);font-size:3rem;line-height:.6;color:var(--teal);opacity:.3;height:24px}
.tst p{color:var(--silver);font-size:.98rem;margin:14px 0 22px}
.tst .who{display:flex;align-items:center;gap:13px}
.tst .av{width:44px;height:44px;border-radius:12px;background:linear-gradient(145deg,var(--teal),var(--teal-dim));display:grid;place-items:center;font-family:var(--display);font-weight:800;color:var(--navy-900);flex:none}
.tst .who b{display:block;color:var(--white);font-family:var(--display);font-size:.96rem}
.tst .who span{font-size:.82rem;color:var(--dim)}

/* =========================================================
   CTA STRIP
   ========================================================= */
.strip{background:linear-gradient(135deg,var(--navy-600),var(--navy-700));border:1px solid var(--line-strong);border-radius:24px;padding:54px;text-align:center;position:relative;overflow:hidden}
.strip::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 300px at 50% -40%,var(--teal-soft),transparent 60%)}
.strip > *{position:relative;z-index:1}
.strip h2{font-family:var(--display);font-weight:800;font-size:clamp(1.6rem,3.4vw,2.3rem);color:var(--white)}
.strip p{color:var(--silver);margin:14px auto 28px;max-width:54ch}
.strip .hero-actions{justify-content:center}

/* =========================================================
   CONTACT
   ========================================================= */
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:44px;align-items:start}
@media(max-width:880px){.contact-grid{grid-template-columns:1fr;gap:34px}}
.cinfo{display:flex;flex-direction:column;gap:14px;margin-top:30px}
.citem{display:flex;gap:15px;align-items:center;padding:18px;border:1px solid var(--line);border-radius:14px;background:var(--navy-800);transition:.25s}
.citem:hover{border-color:var(--line-strong)}
.citem .ci{width:46px;height:46px;border-radius:12px;background:var(--teal-soft);color:var(--teal);display:grid;place-items:center;flex:none}
.citem .l{font-size:.8rem;color:var(--dim)}
.citem .v{font-family:var(--display);color:var(--white);font-weight:700;font-size:1rem;direction:ltr;text-align:right}

form{background:linear-gradient(165deg,var(--navy-800),var(--navy-850));border:1px solid var(--line);border-radius:20px;padding:30px}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:520px){.fgrid{grid-template-columns:1fr}}
.field{margin-bottom:16px}
.field label{display:block;font-size:.88rem;color:var(--silver);margin-bottom:8px;font-family:var(--display);font-weight:600}
.field input,.field select,.field textarea{
  width:100%;background:var(--navy-900);border:1px solid var(--line-strong);border-radius:11px;
  padding:13px 15px;color:var(--white);font-family:var(--body);font-size:.96rem;transition:.2s;
}
.field textarea{resize:vertical;min-height:120px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-soft)}
.field input::placeholder,.field textarea::placeholder{color:var(--dimmer)}
.submit-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
.submit-row .cta{flex:1;min-width:160px;text-align:center;display:inline-flex;align-items:center;justify-content:center;gap:9px}
.note{font-size:.82rem;color:var(--dimmer);margin-top:14px;text-align:center}

/* =========================================================
   FOOTER
   ========================================================= */
footer{background:var(--navy-850);border-top:1px solid var(--line);padding:54px 0 28px}
.fgrid2{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;margin-bottom:40px}
@media(max-width:760px){.fgrid2{grid-template-columns:1fr;gap:30px}}
footer .brand{margin-bottom:16px}
footer p.desc{color:var(--dim);font-size:.93rem;max-width:42ch}
.fcol h4{font-family:var(--display);color:var(--white);font-size:1rem;margin-bottom:16px}
.fcol a{display:block;color:var(--dim);font-size:.93rem;padding:6px 0;transition:.2s}
.fcol a:hover{color:var(--teal)}
.socials{display:flex;gap:10px;margin-top:18px}
.socials a{width:40px;height:40px;border-radius:11px;border:1px solid var(--line-strong);display:grid;place-items:center;color:var(--silver);transition:.25s}
.socials a:hover{background:var(--teal);color:var(--navy-900);border-color:var(--teal);transform:translateY(-3px)}
.fbottom{border-top:1px solid var(--line);padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:.86rem;color:var(--dimmer)}
.fbottom a{color:var(--dim)}

/* =========================================================
   REVEAL ANIMATION
   ========================================================= */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.6,.2,1),transform .7s cubic-bezier(.2,.6,.2,1)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}
.reveal.d2{transition-delay:.16s}
.reveal.d3{transition-delay:.24s}

/* back to top */
.totop{position:fixed;bottom:26px;left:26px;width:48px;height:48px;border-radius:14px;background:var(--teal);color:var(--navy-900);display:grid;place-items:center;cursor:pointer;z-index:40;opacity:0;pointer-events:none;transition:.3s;box-shadow:0 10px 26px rgba(0,156,216,.3)}
.totop.show{opacity:1;pointer-events:auto}
.totop:hover{transform:translateY(-4px)}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none;transition:none}
}
::selection{background:var(--teal);color:var(--navy-900)}
/* ===== Technical Specializations ===== */
.spec-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
@media(max-width:860px){.spec-grid{grid-template-columns:1fr;max-width:480px;margin-left:auto;margin-right:auto}}
.spec{background:var(--navy-700);border:1px solid var(--line);border-radius:18px;padding:28px;transition:.25s;position:relative;overflow:hidden}
.spec::before{content:"";position:absolute;top:0;inset-inline-start:0;width:100%;height:3px;background:linear-gradient(90deg,var(--teal),transparent)}
.spec:hover{transform:translateY(-6px);border-color:var(--teal);box-shadow:0 20px 40px -24px rgba(0,156,216,.5)}
.spec-ic{width:54px;height:54px;border-radius:14px;display:grid;place-items:center;color:var(--teal);background:var(--teal-soft);margin-bottom:16px}
.spec h3{font-size:1.15rem;font-weight:800;color:var(--white);margin-bottom:9px;font-family:var(--display)}
.spec p{color:var(--silver);font-size:.94rem;line-height:1.7}

/* Store link in nav */
.nav-shop{background:var(--teal,#009cd8);color:#fff!important;border-radius:30px;padding:7px 15px!important}
.nav-shop:hover{background:#0086c2;color:#fff!important}
.mobile-menu .nav-shop{display:inline-block;width:fit-content}

/* ===== Hero network-pulse visualization ===== */
.netviz .bar .live{margin-inline-start:auto}
.netviz-stage{position:relative;width:100%;aspect-ratio:1 / 0.84;background:radial-gradient(circle at 50% 44%,rgba(0,156,216,.07),transparent 68%)}
.netviz-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.netviz-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 18px;border-top:1px solid var(--line);font-size:.78rem;color:var(--dim);font-family:var(--display)}
.netviz-foot .nf-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--teal);box-shadow:0 0 9px var(--teal);margin-inline-end:7px;vertical-align:middle;animation:pulse 2s infinite}
.netviz-foot #nfCount{color:var(--teal);font-weight:800}

/* ===== Hero SOC dashboard (live monitoring) ===== */
.soc .bar .live{margin-inline-start:auto}
.soc-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:18px}
@media(max-width:420px){.soc-grid{grid-template-columns:1fr}}
.soc-tile{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.025);border:1px solid var(--line);border-radius:14px;padding:14px;position:relative;transition:.3s;overflow:hidden}
.soc-ic{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;flex:none;background:var(--teal-soft);color:var(--teal);transition:.3s}
.soc-ic svg{width:20px;height:20px}
.soc-meta{flex:1;min-width:0}
.soc-meta b{display:block;font-family:var(--display);font-size:.9rem;color:var(--white)}
.soc-st{font-size:.76rem;color:#10b981;transition:.2s;font-weight:600}
.soc-led{width:10px;height:10px;border-radius:50%;flex:none;background:#10b981;box-shadow:0 0 0 0 rgba(16,185,129,.5);animation:pulse 2.4s infinite}
.soc-tile.alert{border-color:rgba(255,95,87,.5);background:rgba(255,95,87,.07)}
.soc-tile.alert .soc-ic{background:rgba(255,95,87,.16);color:#ff5f57}
.soc-tile.alert .soc-led{background:#ff5f57;animation:pulse-r 1s infinite}
.soc-tile.alert .soc-st{color:#ff8079}
.soc-tile.fixing{border-color:rgba(245,166,35,.5);background:rgba(245,166,35,.07)}
.soc-tile.fixing .soc-ic{background:rgba(245,166,35,.16);color:#f5a623}
.soc-tile.fixing .soc-led{background:#f5a623;animation:pulse 1s infinite}
.soc-tile.fixing .soc-st{color:#f5b54a}
.soc-tile.fixing::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(245,166,35,.14),transparent);transform:translateX(-100%);animation:sweep 1.2s linear infinite}
.soc-tile.resolved .soc-st{color:#10b981}
@keyframes pulse-r{0%{box-shadow:0 0 0 0 rgba(255,95,87,.5)}70%{box-shadow:0 0 0 8px rgba(255,95,87,0)}100%{box-shadow:0 0 0 0 rgba(255,95,87,0)}}
@keyframes sweep{to{transform:translateX(100%)}}
.soc-foot{display:flex;justify-content:space-between;gap:10px;padding:13px 18px;border-top:1px solid var(--line);font-size:.78rem;color:var(--dim);font-family:var(--display);flex-wrap:wrap}
.soc-foot b{color:var(--teal);font-weight:800}

/* =========================================================
   LIGHT THEME  (data-theme="light")
   ========================================================= */
[data-theme="light"]{
  --navy-900:#eef2f8;  /* page background */
  --navy-850:#ffffff;
  --navy-800:#ffffff;
  --navy-700:#f3f6fb;
  --navy-600:#e6edf6;
  --line:rgba(20,45,85,.12);
  --line-strong:rgba(20,45,85,.20);
  --teal:#0098d8;
  --teal-dim:#1763ac;
  --teal-soft:rgba(0,152,216,.10);
  --amber:#e07d09;
  --white:#0a1424;   /* bright text -> deep ink */
  --silver:#1f2d44;  /* body text -> darker */
  --dim:#42526b;     /* muted -> darker */
  --dimmer:#6b7c96;
}
[data-theme="light"] body{background:var(--navy-900)}
[data-theme="light"] header.scrolled{background:rgba(255,255,255,.85);border-bottom:1px solid var(--line)}
[data-theme="light"] .hero{
  background:
    radial-gradient(1100px 600px at 85% -5%,rgba(0,152,216,.10),transparent 60%),
    radial-gradient(900px 500px at 0% 100%,rgba(0,152,216,.06),transparent 55%),
    var(--navy-900);
}
[data-theme="light"] .console{box-shadow:0 24px 60px -32px rgba(20,45,85,.32)}
[data-theme="light"] .console .bar{background:rgba(20,45,85,.03)}
[data-theme="light"] .row{background:rgba(20,45,85,.035)}
[data-theme="light"] .soc-tile{background:rgba(20,45,85,.035)}
[data-theme="light"] .trust .vendor{color:#16263c}
[data-theme="light"] .trust .vendor:hover{color:#0098d8}
[data-theme="light"] .tr-arw{color:#0098d8}
[data-theme="light"] .fw-chip,[data-theme="light"] .fw-card,[data-theme="light"] .value{background:var(--navy-800)}
/* keep camera/SOC "screens" dark even in light mode (they're live feeds) */
[data-theme="light"] .cam-scene{filter:none}

/* theme toggle button */
.theme-toggle{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;cursor:pointer;
  background:var(--navy-700);border:1px solid var(--line-strong);color:var(--white);transition:.2s}
.theme-toggle:hover{border-color:var(--teal);color:var(--teal)}
.theme-toggle svg{width:19px;height:19px}
.theme-toggle .sun{display:none}
[data-theme="light"] .theme-toggle .moon{display:none}
[data-theme="light"] .theme-toggle .sun{display:block}