:root{
  --brand-navy:#171a46; /* مستوحى من الشعار */
  --brand-gold:#f0ab22; /* ذهبي الشعار */
  --ink:#0e0f1a;
  --muted:#6b7085;
  --bg:#ffffff;
  --section:#f7f7fb;
  --radius:12px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:'Cairo',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu;
  color:var(--ink); background:var(--bg); line-height:1.7;
}

.container{width:min(1120px, 92%); margin-inline:auto}
.center{text-align:center}
.mt-24{margin-top:24px}
.muted{color:var(--muted)}

/* Utility */
.is-hidden{display:none !important}

/* Topbar */
.topbar{background:var(--brand-navy); color:#fff; font-size:14px}
.topbar__inner{display:flex; align-items:center; justify-content:space-between; padding:6px 0}
.topbar a{color:#fff; text-decoration:none; opacity:.9}
.topbar a:hover{opacity:1}
.topbar__contact span{opacity:.5; margin-inline:8px}

/* Nav */
.nav{background:#fff; position:sticky; top:0; z-index:20; box-shadow:0 1px 0 rgb(0 0 0 / 6%)}
.nav__inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); font-weight:800}
.brand img{width:36px; height:36px; border-radius:6px; object-fit:cover}
.nav__menu{list-style:none; display:flex; align-items:center; gap:18px; margin:0; padding:0}
.nav__menu a{color:var(--ink); text-decoration:none; font-weight:600}
.nav__menu a.active{color:var(--brand-gold)}
.nav__toggle{display:none; background:transparent; border:0; font-size:26px; cursor:pointer}

/* Buttons */
.btn{background:var(--brand-gold); color:#111; text-decoration:none; padding:12px 18px; border-radius:999px; font-weight:800; display:inline-block}
.btn:hover{filter:brightness(0.95)}
.btn--outline{background:transparent; border:2px solid var(--brand-gold); color:var(--brand-gold)}
.btn--light{background:#fff; color:var(--brand-navy)}
.btn--sm{padding:8px 14px; font-size:14px}

/* Hero */
.hero{background:var(--brand-navy); color:#fff; padding:64px 0}
.hero__inner{display:grid; grid-template-columns:1.1fr .9fr; gap:26px; align-items:center}
.hero__content h1{font-size:40px; line-height:1.2; margin:0 0 12px}
.hero__content p{opacity:.95; max-width:60ch}
.hero__actions{margin-top:18px; display:flex; gap:12px}
.hero__media img{width:100%; border-radius:var(--radius); box-shadow:0 10px 30px rgb(0 0 0 / 30%)}

/* Badges */
.badges{background:#0f1033; color:#fff}
.badges__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:14px 0}
.badge{background:rgb(255 255 255 / 08%); border:1px solid rgb(255 255 255 / 12%); padding:10px 12px; border-radius:999px; text-align:center; font-weight:700}

/* Sections */
.section{padding:64px 0}
.section--alt{background:var(--section)}
.section__title{font-size:28px; margin:0 0 18px}

/* Cards */
.cards{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.card{border:1px solid #e9e9f1; border-radius:var(--radius); padding:18px; background:#fff}
.card h3{margin:0 0 8px}

/* Cases */
.cases{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.case{background:#fff; border:1px solid #eee; border-radius:var(--radius); padding:16px}

/* CTA */
.cta{background:linear-gradient(135deg, var(--brand-navy), #0f1033); color:#fff}
.cta__inner{display:flex; gap:16px; align-items:center; justify-content:space-between; padding:32px 0}
.cta h2{margin:0}

/* Footer */
.footer{background:#0f1033; color:#cfd1e6; padding:24px 0}
.footer__grid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:16px}
.brand--footer{margin-bottom:8px}
.footer a{color:#fff}
.footer__copy{border-top:1px solid rgb(255 255 255 / 10%); margin-top:16px; padding-top:16px; text-align:center}

/* Pages */
.page__header{background:var(--section); padding:36px 0}
.cols-2{display:grid; grid-template-columns:1fr 1fr; gap:24px}
.stats{display:flex; gap:16px; margin-top:12px}
.stat{background:#fff; border:1px solid #eee; border-radius:var(--radius); padding:14px 16px; text-align:center}
.stat strong{font-size:22px; display:block}
.service-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.service{background:#fff; border:1px solid #eee; border-radius:var(--radius); padding:18px}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}

/* Forms */
.form{display:grid; gap:12px}
.form input, .form textarea, .form select{
  width:100%; padding:12px 14px; border-radius:10px; border:1px solid #dfe1ea; background:#fff; font-family:inherit
}
.form button{justify-self:start}

/* Alerts */
.alert{margin-top:12px; padding:12px 14px; border-radius:10px; font-weight:700}
.alert--ok{background:#e9f9ef; color:#155724; border:1px solid #c7f0d4}
.alert--err{background:#fdeaea; color:#8e1b1b; border:1px solid #f6c7c7}

/* Lists */
.list{list-style:none; padding:0; margin:0}
.list li{margin:6px 0}
.list.small li{font-size:14px}

/* Responsive */
@media (max-width: 980px){
  .hero__inner{grid-template-columns:1fr}
  .badges__grid{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr 1fr}
  .cases{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr}
  .cols-2{grid-template-columns:1fr}
  .service-grid{grid-template-columns:1fr 1fr}
}

@media (max-width: 720px){
  .nav__toggle{display:block}
  .nav__menu{position:absolute; inset-inline:0; top:64px; background:#fff; display:none; flex-direction:column; padding:12px; border-top:1px solid #eee}
  .nav__menu.show{display:flex}
  .cards{grid-template-columns:1fr}
  .service-grid{grid-template-columns:1fr}
}

/* Partners */
.filters{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px}
.chip{border:1px solid #e3e6f2; background:#fff; padding:8px 12px; border-radius:999px; cursor:pointer; font-weight:700}
.chip.active{background:var(--brand-gold); color:#111; border-color:var(--brand-gold)}
.partner-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.partner-card{background:#fff; border:1px solid #e9e9f1; border-radius:var(--radius); padding:16px; display:flex; flex-direction:column; align-items:center; text-align:center}
.partner-logo{margin-bottom:10px}

@media (max-width: 980px){
  .partner-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 640px){
  .partner-grid{grid-template-columns:1fr}
}