:root { --p:#1A5FA8;--pd:#0E3F75;--pp:#EBF3FB;--s:#1E7A5C;--sp:#E7F5F0;--a:#E86920;--ap:#FEF0E7;--w:#D4920A;--n50:#F7F8FA;--n100:#EFF1F5;--n200:#DDE1EA;--n400:#9BA3B2;--n600:#5B6478;--n800:#2C3345;--n900:#151C2C;--fh:'Cairo',sans-serif;--fb:'IBM Plex Sans Arabic','Cairo',sans-serif;--pad:clamp(20px,6vw,80px);--r-md:10px;--r-lg:16px;--r-xl:24px }
body { font-family:var(--fb);background:var(--n50);color:var(--n800);font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased }
.btn { display:inline-flex;align-items:center;gap:8px;font-family:var(--fh);font-weight:600;font-size:14px;border-radius:var(--r-md);padding:9px 20px;cursor:pointer;border:none;transition:all .2s }
.btn-p:hover { background:var(--pd) }
.btn-wh:hover { background:#1da856 }
.nav-links a { font-family:var(--fh);font-size:14px;font-weight:500;color:var(--n600);padding:6px 13px;border-radius:6px;transition:all .18s }
.nav-links a.active { color:var(--p);background:var(--pp);font-weight:700 }
.hero { background:linear-gradient(135deg,#051525,var(--pd));padding:60px var(--pad) 50px;text-align:center }
.hero-badge { display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;font-family:var(--fh);letter-spacing:.06em;color:rgba(255,255,255,.7);background:rgba(255,255,255,.1);padding:5px 14px;border-radius:20px;margin-bottom:16px }
.hero h1 { font-family:var(--fh);font-size:42px;font-weight:900;color:#fff;line-height:1.25;margin-bottom:14px }
.hero h1 span { color:#60B5FF }
.hero p { font-size:17px;color:rgba(255,255,255,.75);max-width:600px;margin:0 auto 28px;line-height:1.7 }
.hero-btns { display:flex;gap:12px;justify-content:center;flex-wrap:wrap }
.hero-stats { display:flex;gap:32px;justify-content:center;margin-top:36px;flex-wrap:wrap }
.hs { text-align:center }
.hs-val { font-family:var(--fh);font-size:28px;font-weight:900;color:#fff;line-height:1 }
.hs-lbl { font-size:12px;color:rgba(255,255,255,.5);margin-top:4px }
.filter-bar { background:#fff;border-bottom:1px solid var(--n200);padding:16px var(--pad);position:sticky;top:66px;z-index:100 }
.filter-inner { max-width:1280px;margin:0 auto;display:flex;gap:12px;align-items:center;flex-wrap:wrap }
.search-box { flex:1;min-width:220px;display:flex;align-items:center;gap:10px;background:var(--n50);border:1.5px solid var(--n200);border-radius:var(--r-md);padding:8px 14px;transition:border-color .2s }
.search-box:focus-within { border-color:var(--p) }
.search-box i { color:var(--n400);font-size:14px;flex-shrink:0 }
.search-box input { border:none;background:transparent;outline:none;font-family:var(--fb);font-size:14px;color:var(--n800);width:100%;direction:rtl }
.search-box input::placeholder { color:var(--n400) }
.filter-chips { display:flex;gap:8px;flex-wrap:wrap }
.chip { font-family:var(--fh);font-size:12px;font-weight:600;padding:6px 14px;border-radius:20px;cursor:pointer;border:1.5px solid var(--n200);background:#fff;color:var(--n600);transition:all .2s;white-space:nowrap }
.chip:hover { border-color:var(--p);color:var(--p) }
.chip.active { background:var(--p);color:#fff;border-color:var(--p) }
.main { max-width:1280px;margin:36px auto;padding:0 var(--pad) }
.section-header { display:flex;align-items:center;justify-content:space-between;margin-bottom:20px }
.section-title { font-family:var(--fh);font-size:22px;font-weight:800;color:var(--n900);display:flex;align-items:center;gap:10px }
.section-count { font-size:13px;color:var(--n400);font-weight:500 }
.cards-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:40px }
.card { background:#fff;border-radius:var(--r-xl);border:1px solid var(--n200);overflow:hidden;transition:all .22s;display:flex;flex-direction:column }
.card:hover { transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.1);border-color:var(--p) }
.card-top { padding:18px 18px 0;display:flex;align-items:flex-start;justify-content:space-between;gap:8px }
.card-sector { font-size:10px;font-weight:700;font-family:var(--fh);padding:3px 10px;border-radius:20px;white-space:nowrap }
.card-icon { width:40px;height:40px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0 }
.card-body { padding:12px 18px 16px;flex:1;display:flex;flex-direction:column }
.card-title { font-family:var(--fh);font-size:15px;font-weight:800;color:var(--n900);line-height:1.4;margin-bottom:8px }
.card-excerpt { font-size:13px;color:var(--n600);line-height:1.65;flex:1;margin-bottom:14px }
.card-meta { display:flex;align-items:center;justify-content:space-between }
.card-time { font-size:11px;color:var(--n400);display:flex;align-items:center;gap:4px }
.card-read { font-size:12px;font-weight:700;font-family:var(--fh);color:var(--p);display:flex;align-items:center;gap:4px }
.card-read:hover { color:var(--pd) }
.featured { display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:40px }
.card-featured { background:#fff;border-radius:var(--r-xl);border:1px solid var(--n200);overflow:hidden;transition:all .22s;display:flex;gap:0;flex-direction:column }
.card-featured:hover { transform:translateY(-3px);box-shadow:0 10px 28px rgba(0,0,0,.1);border-color:var(--p) }
.cf-banner { height:160px;display:flex;align-items:center;justify-content:center;font-size:56px }
.cf-body { padding:20px;flex:1;display:flex;flex-direction:column }
.cf-label { font-size:10px;font-weight:700;font-family:var(--fh);padding:3px 10px;border-radius:20px;display:inline-flex;align-items:center;gap:4px;margin-bottom:10px }
.cf-title { font-family:var(--fh);font-size:18px;font-weight:900;color:var(--n900);line-height:1.35;margin-bottom:8px }
.cf-excerpt { font-size:13px;color:var(--n600);line-height:1.65;flex:1;margin-bottom:14px }
.cta-band { background:linear-gradient(135deg,#051525,var(--pd));border-radius:var(--r-xl);padding:32px;text-align:center;margin:20px 0 40px }
.cta-band h3 { font-family:var(--fh);font-size:22px;font-weight:800;color:#fff;margin-bottom:8px }
.cta-band p { font-size:14px;color:rgba(255,255,255,.75);margin-bottom:20px;line-height:1.7 }
.cta-band-btns { display:flex;gap:12px;justify-content:center;flex-wrap:wrap }
.no-results { text-align:center;padding:60px 20px;color:var(--n400) }
.no-results i { font-size:48px;display:block;margin-bottom:12px;opacity:.4 }
.no-results p { font-family:var(--fh);font-size:16px }
.footer { background:var(--n900);padding:40px var(--pad) 24px;margin-top:60px }
.ft-inner { max-width:1280px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;margin-bottom:32px }
.ft-brand-name { font-family:var(--fh);font-weight:800;font-size:18px;color:#fff;display:flex;align-items:center;gap:10px;margin-bottom:10px }
.ft-brand-icon { width:34px;height:34px;background:var(--p);border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff }
.ft-brand-desc { font-size:13px;color:rgba(255,255,255,.45);line-height:1.7;margin-bottom:16px }
.ft-contacts a { display:flex;align-items:center;gap:8px;color:rgba(255,255,255,.6);font-size:13px;margin-bottom:7px }
.ft-contacts a:hover { color:#fff }
.ft-col-title { font-family:var(--fh);font-weight:700;font-size:13px;color:rgba(255,255,255,.5);letter-spacing:.06em;margin-bottom:12px }
.ft-col a { display:block;color:rgba(255,255,255,.55);font-size:13px;margin-bottom:6px }
.ft-col a:hover { color:#fff }
.ft-bottom { max-width:1280px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;padding-top:20px;border-top:1px solid rgba(255,255,255,.08);flex-wrap:wrap;gap:10px }
.ft-copy { font-size:12px;color:rgba(255,255,255,.3) }
.ft-social { display:flex;gap:12px }
.ft-social a { width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.5);font-size:14px;transition:all .2s }
.ft-social a:hover { background:var(--p);color:#fff }

@media(max-width:1100px) {
  .cards-grid { grid-template-columns:1fr 1fr }
  .ft-inner { grid-template-columns:1fr 1fr }
}

@media(max-width:768px) {
  .navbar { padding:0 16px }
  .hero h1 { font-size:28px }
  .hero-stats { gap:20px }
  .cards-grid,.featured { grid-template-columns:1fr }
  .ft-inner { grid-template-columns:1fr }
}
