:root{
  --font-ar:"Cairo",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;

  --bg:#ffffff;
  --soft:#f8fafc;

  --text:#0b1220;
  --muted:#6b7280;
  --line:#e5e7eb;

  --primary:#1f3f8b;
  --primary-2:#142857;
  --accent:#F2C230;

  --shadow:0 10px 30px rgba(17,24,39,.08);
  --shadow2:0 18px 55px rgba(17,24,39,.10);

  --radius:16px;
  --radius2:22px;

  --container:1120px;
  --header-h:78px;

  --overlay:rgba(11,18,32,.45);

  /* ✅ أوزان طبيعية (خففنا المبالغة) */
  --fw-regular:400;
  --fw-medium:500;
  --fw-semibold:600;
  --fw-bold:700;
  --fw-extrabold:800;
}
@media (max-width:720px){ :root{--header-h:72px} }

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-ar);
  background:var(--bg);
  color:var(--text);
  line-height:1.75;
  font-weight:var(--fw-regular); /* ✅ وزن عام طبيعي */
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(var(--container),calc(100% - 32px));margin-inline:auto}
.section{padding:72px 0}
@media (max-width:720px){ .section{padding:56px 0} }

/* ✅ أوزان طبيعية للعناوين والعناصر */
.kicker{
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(31,63,139,.08);
  color:var(--primary);
  font-weight:var(--fw-bold);
  font-size:13px;
  border:1px solid rgba(31,63,139,.12);
}
.h2{
  margin:14px 0 0;
  font-size:clamp(22px,3.2vw,34px);
  font-weight:var(--fw-extrabold);
  letter-spacing:-.4px;
}
.p{
  margin:12px 0 0;
  color:rgba(11,18,32,.72);
  max-width:900px;
  font-weight:var(--fw-regular);
}
.grid{display:grid;gap:18px}
.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius2);
  box-shadow:0 12px 28px rgba(17,24,39,.06);
  overflow:hidden;
}
.card__body{padding:16px}
.badge{
  display:inline-flex;
  align-items:center;
  padding:7px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:var(--fw-bold);
  background:rgba(242,194,48,.16);
  border:1px solid rgba(242,194,48,.35);
  color:rgba(11,18,32,.9);
}

/* ===== Header ===== */
.header{
  position:sticky;
  top:0;
  z-index:50;
  background:#fff;
  border-bottom:1px solid var(--line);
  box-shadow:0 6px 20px rgba(17,24,39,.05);
}
.header__inner{
  height:var(--header-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.brand__logo{width:46px;height:46px;object-fit:contain}
.brand__text{min-width:0;text-align:right}
.brand__name{
  font-weight:var(--fw-extrabold);
  font-size:18px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.brand__tag{
  color:var(--muted);
  font-size:13px;
  margin-top:2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-weight:var(--fw-regular);
}

.nav{
  display:flex;
  align-items:center;
  gap:12px;
}
.nav__toggle{
  display:none;
  width:44px;
  height:44px;
  border-radius:14px;
  border:1px solid var(--line);
  background:#fff;
  cursor:pointer;
  padding:10px;
  align-items:center;
  justify-content:center;
  gap:6px;
}
.nav__toggle .bar{
  display:block;
  width:20px;
  height:2px;
  background-color:var(--text);
  border-radius:2px;
}

.nav__menu{
  display:flex;
  align-items:center;
  gap:16px;
}
.nav__link{
  position:relative;
  padding:10px 6px;
  font-weight:var(--fw-semibold); /* ✅ كان 900 */
  color:rgba(11,18,32,.82);
  outline:none;
}
.nav__link:hover{color:rgba(11,18,32,1)}
.nav__link::after{
  content:"";
  position:absolute;
  left:6px;right:6px;bottom:6px;
  height:2px;border-radius:999px;
  background:var(--accent);
  opacity:0;
  transform:scaleX(.7);
  transition:opacity .18s ease,transform .18s ease;
  pointer-events:none;
}
.nav__link:hover::after,
.nav__link:focus-visible::after,
.nav__link.active::after{
  opacity:1;transform:scaleX(1);
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:13px 18px;
  border-radius:999px;
  font-weight:var(--fw-bold); /* ✅ كان 1000 */
  border:1px solid transparent;
  cursor:pointer;
  box-shadow:var(--shadow);
  white-space:nowrap;
}
.btn--primary{
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  color:#fff;
}
.btn--ghost{
  background:#fff;
  color:var(--text);
  border-color:var(--line);
  box-shadow:0 12px 28px rgba(17,24,39,.08);
}
.btn--wa{
  background:#0ea84a;
  color:#fff;
  box-shadow:0 12px 28px rgba(14,168,74,.25);
}
.btn__icon{opacity:.95}

.navOverlay{
  position:fixed;
  inset:0;
  background:var(--overlay);
  z-index:58;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;
}
.navOverlay.show{opacity:1;pointer-events:auto}
body.nav-open{overflow:hidden}

@media (max-width:720px){
  .brand__logo{width:42px;height:42px}
  .brand__tag{font-size: 10px;}
  .nav__toggle{display:flex;flex-direction:column;align-items:center;justify-content:center}

  .nav__menu{
    position:fixed;
    top:0;
    right:0;
    height:100svh;
    width:min(340px,88vw);
    background:#fff;
    border-left:1px solid var(--line);
    box-shadow:var(--shadow2);
    padding:14px;
    padding-top:calc(var(--header-h) + 14px);
    display:flex;
    flex-direction:column;
    gap:10px;
    transform:translateX(110%);
    transition:transform .22s ease;
    z-index:60;
  }
  .nav__menu.open{transform:translateX(0)}
  .nav__link{padding:12px 12px;border-radius:14px}
  .nav__link::after{left:12px;right:12px;bottom:6px}
  .header__actions{display:none}
}

/* ===== Hero ===== */
.hero{
  position:relative;
  min-height:calc(100vh - var(--header-h));
  min-height:calc(100svh - var(--header-h));
  display:flex;
  align-items:center;
  overflow:hidden;
  background:#fff;
}
.hero__bg{
  position:absolute;
  inset:0;
  background-image:var(--hero-img);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  transform:scale(1.02);
  filter:saturate(1.05);
}
.hero__overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.96)),
    radial-gradient(900px 520px at 50% 25%, rgba(31,63,139,.12), transparent 60%);
}
.hero__inner{
  position:relative;
  z-index:2;
  padding:54px 0;
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:22px;
  align-items:center;
}
@media (max-width:900px){
  .hero__inner{grid-template-columns:1fr;text-align:center}
  .hero__stats{justify-content:center}
  .hero__cta{justify-content:center}
}

.hero__title{
  margin:0;
  line-height:1.05;
  font-weight:var(--fw-extrabold); /* ✅ كان 1000 */
  letter-spacing:-.5px;
  font-size:clamp(30px,4.6vw,64px);
}
.hero__title span{display:block}
.hero__titleTop{color:var(--primary)}
.hero__titleAccent{color:var(--accent)}
.hero__subtitle{
  margin:16px 0 0;
  max-width:780px;
  color:rgba(11,18,32,.74);
  font-size:clamp(15px,1.6vw,19px);
  font-weight:var(--fw-regular);
}
.hero__cta{
  margin-top:22px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
}
.hero__stats{
  margin-top:18px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}
.stat{
  background:#fff;
  border:1px solid var(--line);
  border-radius:999px;
  padding:10px 12px;
  display:inline-flex;
  gap:10px;
  align-items:center;
  box-shadow:0 12px 28px rgba(17,24,39,.06);
  font-weight:var(--fw-semibold); /* ✅ كان 900 */
  color:rgba(11,18,32,.88);
  font-size:13px;
}
.stat b{color:var(--primary);font-weight:var(--fw-bold)}
.hero__side{
  display:flex;
  justify-content:flex-start;
}
@media (max-width:900px){ .hero__side{justify-content:center} }

.hero__panel{
  width:min(360px,100%);
  background:rgba(255,255,255,.92);
  border:1px solid var(--line);
  border-radius:var(--radius2);
  box-shadow:var(--shadow2);
  padding:16px;
}
.hero__panel h3{
  margin:0;
  font-size:16px;
  font-weight:var(--fw-bold); /* ✅ كان 1000 */
  color:var(--primary);
}
.hero__panel p{
  margin:10px 0 0;
  color:rgba(11,18,32,.72);
  font-size:14px;
  font-weight:var(--fw-regular);
}
.hero__panel .mini{
  margin-top:12px;
  display:grid;
  gap:10px;
}
.mini__row{
  display:flex;
  gap:10px;
  align-items:center;
  padding:10px 12px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
}
.mini__icon{
  width:34px;height:34px;
  border-radius:12px;
  background:rgba(31,63,139,.10);
  display:flex;align-items:center;justify-content:center;
  font-weight:var(--fw-bold); /* ✅ كان 1000 */
  color:var(--primary);
}
.mini__txt{font-size:13px;color:rgba(11,18,32,.78);font-weight:var(--fw-medium)} /* ✅ كان 800 */

/* ===== Categories (Tabs) ===== */
.tabs{
  margin-top:18px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}
.tabBtn{
  border:1px solid var(--line);
  background:#fff;
  border-radius:999px;
  padding:10px 14px;
  font-weight:var(--fw-bold); /* ✅ كان 1000 */
  cursor:pointer;
  box-shadow:0 10px 26px rgba(17,24,39,.06);
  color:rgba(11,18,32,.85);
}
.tabBtn.active{
  border-color:rgba(31,63,139,.25);
  background:rgba(31,63,139,.06);
  color:var(--primary);
}
.tabPanel{
  margin-top:16px;
  display:none;
}
.tabPanel.active{display:block}
.catsGrid{
  margin-top:12px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
@media (max-width:980px){ .catsGrid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:620px){ .catsGrid{grid-template-columns:1fr} }

/* ===== Categories thumbs as IMG (cover) ===== */
.catCard .thumb{
  height:235px;
  width:100%;
  border-radius:16px;
  overflow:hidden;
  background:#fff;
}
.catCard .thumb img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
}
.catCard h3{margin:0;font-size:16px;font-weight:var(--fw-bold)} /* ✅ كان 1000 */
.catCard p{margin:8px 0 0;color:rgba(11,18,32,.72);font-size:14px;font-weight:var(--fw-regular)}
.catCard .meta{
  margin-top:12px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}

/* ===== Services / Software Cards ===== */
.cards3{
  margin-top:18px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
@media (max-width:980px){ .cards3{grid-template-columns:1fr} }

.iconBox{
  width:44px;height:44px;
  border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(242,194,48,.16);
  border:1px solid rgba(242,194,48,.35);
  font-weight:var(--fw-bold); /* ✅ كان 1000 */
}
.cardTitle{
  margin:12px 0 0;
  font-size:17px;
  font-weight:var(--fw-bold); /* ✅ كان 1000 */
  color:rgba(11,18,32,.92);
}
.cardText{
  margin:8px 0 0;
  color:rgba(11,18,32,.72);
  font-size:14px;
  font-weight:var(--fw-regular);
}

/* ===== Steps (with images) ===== */
.stepsGrid{
  margin-top:18px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
@media (max-width:980px){ .stepsGrid{grid-template-columns:1fr} }
.stepCard .thumb{height:170px}
.stepNo{
  position:absolute;
  top:12px;right:12px;
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  color:#fff;
  font-weight:var(--fw-bold); /* ✅ كان 1000 */
  padding:8px 12px;
  border-radius:999px;
  box-shadow:0 14px 30px rgba(31,63,139,.25);
  font-size:12px;
}
.thumbWrap{position:relative}

/* ===== Why Us (4 points) ===== */
.whyGrid{
  margin-top:18px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}
@media (max-width:980px){ .whyGrid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:620px){ .whyGrid{grid-template-columns:1fr} }
.whyItem{
  padding:16px;
  border-radius:var(--radius2);
  border:1px solid var(--line);
  background:#fff;
  box-shadow:0 12px 28px rgba(17,24,39,.06);
}
.whyItem b{display:block;color:var(--primary);font-weight:var(--fw-bold)} /* ✅ كان 1000 */
.whyItem span{
  display:block;
  margin-top:8px;
  color:rgba(11,18,32,.72);
  font-weight:var(--fw-regular); /* ✅ كان 800 */
  font-size:14px
}

/* ===== Brands ===== */
.brandsRow{
  margin-top:18px;
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
}
.brandLogo{
  width:170px;
  height:100px;
  padding:12px;
  border-radius:18px;
  border:1px solid var(--line);
  background:#fff;
  box-shadow:0 12px 28px rgba(17,24,39,.05);
  display:flex;align-items:center;justify-content:center;
  filter:grayscale(.2);
  transition:transform .18s ease, filter .18s ease;
}
.brandLogo:hover{transform:translateY(-2px);filter:grayscale(0)}
.brandLogo img{max-height:60px;object-fit:contain}

/* ===== Contact ===== */
.contactWrap{
  margin-top:18px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  align-items:stretch;
}
@media (max-width:980px){ .contactWrap{grid-template-columns:1fr} }
.infoList{
  margin:12px 0 0;
  display:grid;
  gap:10px;
}
.infoRow{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:12px 12px;
  border:1px solid var(--line);
  border-radius:16px;
  background:#fff;
  box-shadow:0 12px 28px rgba(17,24,39,.05);
}
.infoIcon{
  width:38px;height:38px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(31,63,139,.10);
  color:var(--primary);
  font-weight:var(--fw-bold); /* ✅ كان 1000 */
  flex:0 0 auto;
}
.infoText b{display:block;font-weight:var(--fw-bold)} /* ✅ كان 1000 */
.infoText span{
  display:block;
  margin-top:4px;
  color:rgba(11,18,32,.72);
  font-weight:var(--fw-regular); /* ✅ كان 800 */
  font-size:14px
}

.mapBox{
  padding:12px;
  border-radius:var(--radius2);
  border:1px solid var(--line);
  background:#fff;
  box-shadow:var(--shadow2);
  overflow:hidden;
}
.mapBox iframe{
  width:100%;
  height:360px;
  border:0;
  border-radius:16px;
  background:#f1f5f9;
}
@media (max-width:720px){ .mapBox iframe{height:320px} }

/* ===== Footer ===== */
.footer{
  padding:26px 0;
  border-top:1px solid var(--line);
  background:#fff;
}
.footer__inner{
  display:flex;
  gap:14px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}
.footer small{color:rgba(11,18,32,.62);font-weight:var(--fw-regular)} /* ✅ كان 800 */

/* ===== Back to top ===== */
.toTop{
  position:fixed;
  left:18px;
  bottom:18px;
  width:48px;height:48px;
  border-radius:16px;
  border:1px solid var(--line);
  background:#fff;
  box-shadow:var(--shadow2);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  opacity:0;
  transform:translateY(8px);
  pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
  z-index:70;
  font-weight:var(--fw-bold); /* ✅ كان 1000 */
}
.toTop.show{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}

/* ===== Helpers ===== */
.rowActions{
  margin-top:18px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}
 
.hero{
  position:relative;
  overflow:hidden;
}

.hero__media{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}
 
.hero__video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  opacity:.28;          
  transform:scale(2.06);
  filter:saturate(1.2) contrast(1.5) blur(1.9px);
}
 
.hero__overlay{
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.78)),
    radial-gradient(900px 520px at 50% 25%, rgba(31,63,139,.10), transparent 60%);
}
 
.hero__inner{
  position:relative;
  z-index:2;
}