/* =========================================================
   Data Space — PHP Site
   Clean, modern, neutral NGO aesthetic (dark-first)
   ========================================================= */

:root{
  --bg: 8 12 22;
  --panel: 13 18 32;
  --panel2: 17 24 44;
  --text: 234 240 255;
  --muted: 164 177 206;
  --border: 255 255 255;
  --primary: 109 91 255;    /* violet */
  --accent: 34 211 238;     /* cyan */
  --success: 16 196 124;
  --warn: 245 158 11;
  --danger: 239 68 68;

  --radius: 18px;
  --shadow: 0 18px 60px rgb(0 0 0 / .35);
  --shadow2: 0 10px 30px rgb(0 0 0 / .25);

  --container: 1160px;
}

html[data-theme="light"]{
  --bg: 245 247 252;
  --panel: 255 255 255;
  --panel2: 246 248 252;
  --text: 16 22 40;
  --muted: 90 102 130;
  --border: 15 23 42;
  --shadow: 0 18px 60px rgb(8 12 22 / .10);
  --shadow2: 0 10px 30px rgb(8 12 22 / .08);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color: rgb(var(--text));
  background:
    radial-gradient(900px 600px at 50% 10%, rgb(var(--primary) / .35), transparent 60%),
    radial-gradient(900px 600px at 55% 38%, rgb(var(--accent) / .22), transparent 62%),
    radial-gradient(1200px 900px at 50% 120%, rgb(0 0 0 / .35), rgb(0 0 0 / 0)),
    rgb(var(--bg));
  overflow-x:hidden;
}

a{color:inherit; text-decoration:none}
svg{display:block}

.container-wide{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
}

.section-padding{padding: 80px 0}
@media (max-width: 768px){ .section-padding{padding: 64px 0} }

.site-main{padding-top: 82px}
@media (max-width: 768px){ .site-main{padding-top: 72px} }

.gradient-hero{
  background:
    radial-gradient(900px 500px at 30% 20%, rgb(var(--primary) / .22), transparent 60%),
    radial-gradient(900px 500px at 70% 30%, rgb(var(--accent) / .16), transparent 62%);
}

.gradient-showcase{
  background:
    radial-gradient(900px 550px at 40% 25%, rgb(var(--accent) / .20), transparent 62%),
    radial-gradient(900px 550px at 70% 30%, rgb(var(--primary) / .20), transparent 60%);
}

.card{
  background: rgb(var(--panel) / .92);
  border: 1px solid rgb(var(--border) / .10);
  border-radius: var(--radius);
  box-shadow: var(--shadow2);
}

.muted{color: rgb(var(--muted) / .92)}
.text-balance{ text-wrap: balance; }
.max-w{max-width: 42rem}

/* =========================================================
   Navbar
   ========================================================= */
.site-header{
  position: fixed; inset: 0 0 auto 0;
  z-index: 50;
  transition: all .25s ease;
  border-bottom: 1px solid transparent;
}
.site-header.scrolled{
  background: rgb(var(--bg) / .75);
  backdrop-filter: blur(12px);
  border-bottom-color: rgb(var(--border) / .10);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  height: 72px;
}
@media (min-width: 768px){ .nav{height:82px;} }

.brand{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:-.02em}
.brand-badge{
  width:34px; height:34px;
  display:grid; place-items:center;
  border-radius: 10px;
  background: rgb(var(--primary) / 1);
  color: rgb(255 255 255 / .96);
  box-shadow: 0 10px 25px rgb(var(--primary) / .25);
  font-size: 12px;
}
.brand-name{font-size: 18px}

.nav-links{display:none; gap:28px}
@media (min-width: 768px){ .nav-links{display:flex;} }
.nav-link{font-size: 14px; font-weight:600; color: rgb(var(--muted) / .95); transition: color .2s ease}
.nav-link:hover{color: rgb(var(--text) / .98)}
.nav-link.active{color: rgb(var(--accent) / 1)}

.nav-actions{display:flex; align-items:center; gap:12px}
.icon-btn{
  width:40px; height:40px;
  display:grid; place-items:center;
  border-radius: 12px;
  border: 1px solid rgb(var(--border) / .12);
  background: rgb(var(--panel) / .45);
  color: rgb(var(--text) / .90);
  cursor:pointer;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.icon-btn:hover{transform: translateY(-1px); background: rgb(var(--panel) / .70); border-color: rgb(var(--border) / .18)}
.icon{width:18px; height:18px; opacity:.92}

.mobile-only{display:grid}
@media (min-width: 768px){ .mobile-only{display:none} }

.mobile-menu{
  background: rgb(var(--bg) / .88);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgb(var(--border) / .10);
}
.mobile-menu-inner{
  padding: 14px 0 18px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.mobile-link{
  padding: 10px 12px;
  border-radius: 12px;
  font-weight: 600;
  color: rgb(var(--muted) / .95);
  border: 1px solid rgb(var(--border) / .10);
  background: rgb(var(--panel) / .35);
}
.mobile-link.active{color: rgb(var(--accent) / 1); border-color: rgb(var(--accent) / .22); background: rgb(var(--accent) / .08)}

/* =========================================================
   Buttons / badges / forms
   ========================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding: 11px 16px;
  border-radius: 14px;
  border: 1px solid rgb(var(--border) / .14);
  background: rgb(var(--primary) / 1);
  color: white;
  font-weight: 700;
  font-size: 14px;
  cursor:pointer;
  transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
  box-shadow: 0 18px 40px rgb(var(--primary) / .20);
}
.btn:hover{transform: translateY(-1px); filter: brightness(1.03)}
.btn:active{transform: translateY(0px)}
.btn.outline{
  background: transparent;
  color: rgb(var(--text) / .95);
  border-color: rgb(var(--border) / .16);
  box-shadow: none;
}
.btn.secondary{
  background: rgb(var(--panel) / .72);
  color: rgb(var(--text) / .95);
  border-color: rgb(var(--border) / .12);
  box-shadow: none;
}
.btn.ghost{
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  padding: 0;
  color: rgb(var(--accent) / 1);
  font-weight: 700;
}
.btn.sm{padding: 9px 12px; border-radius: 12px; font-size: 13px}
.btn.lg{padding: 13px 18px; border-radius: 16px; font-size: 15px}
.w-full{width:100%}

.badge{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid rgb(var(--border) / .12);
  background: rgb(var(--panel2) / .7);
  color: rgb(var(--muted) / .98);
}
.badge.secondary{ background: rgb(var(--primary) / .10); border-color: rgb(var(--primary) / .25); color: rgb(var(--primary) / 1); }
.badge.outline{ background: rgb(var(--panel) / .35); border-color: rgb(var(--border) / .16); color: rgb(var(--text) / .90); }

label{display:block; font-size: 13px; font-weight: 700; color: rgb(var(--text) / .92)}
.input, select, textarea{
  width:100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgb(var(--border) / .14);
  background: rgb(var(--panel) / .55);
  color: rgb(var(--text) / .95);
  outline:none;
  transition: border-color .2s ease, background .2s ease;
}
textarea{resize: vertical; min-height: 120px}
.input:focus, select:focus, textarea:focus{border-color: rgb(var(--accent) / .45); background: rgb(var(--panel) / .72)}

.form-grid{display:grid; grid-template-columns: 1fr; gap:14px}
@media (min-width: 768px){ .form-grid.two{grid-template-columns: 1fr 1fr;} }

.check-row{display:flex; gap:10px; align-items:flex-start}
.check-row input[type="checkbox"]{margin-top: 3px; width:16px; height:16px}

.alert{
  border-radius: 16px;
  padding: 12px 14px;
  border: 1px solid rgb(var(--border) / .14);
  background: rgb(var(--panel) / .55);
}
.alert.success{border-color: rgb(var(--success) / .35); background: rgb(var(--success) / .08)}
.alert.danger{border-color: rgb(var(--danger) / .35); background: rgb(var(--danger) / .08)}

/* =========================================================
   Layout helpers
   ========================================================= */
.grid{display:grid; gap:24px}
.grid-2{grid-template-columns: 1fr}
.grid-3{grid-template-columns: 1fr}
.grid-4{grid-template-columns: 1fr}
@media (min-width: 768px){ .grid-2{grid-template-columns: 1fr 1fr} .grid-3{grid-template-columns: repeat(3, 1fr)} }
@media (min-width: 1024px){ .grid-4{grid-template-columns: repeat(4, 1fr)} }
.center{text-align:center}
.stack{display:flex; flex-direction:column; gap:14px}
.flex{display:flex}
.items-center{align-items:center}
.justify-center{justify-content:center}
.gap-4{gap:16px}
.gap-6{gap:24px}
.mt-8{margin-top:32px}
.mb-12{margin-bottom:48px}

h1,h2,h3,h4{margin:0}
.h1{font-size: clamp(2.2rem, 3vw, 3.6rem); font-weight: 900; letter-spacing:-.03em}
.h2{font-size: clamp(1.8rem, 2.2vw, 2.5rem); font-weight: 900; letter-spacing:-.02em}
.h3{font-size: 1.15rem; font-weight: 800}
.p-lead{font-size: 1.05rem; line-height:1.75}
.p{line-height:1.75}

/* =========================================================
   Hero showcase blocks
   ========================================================= */
.showcase{
  position: relative;
  border-radius: 28px;
  padding: 26px;
  min-height: 400px;
  background:
    radial-gradient(700px 450px at 30% 20%, rgb(var(--primary) / .22), transparent 65%),
    radial-gradient(700px 450px at 70% 30%, rgb(var(--accent) / .18), transparent 62%),
    rgb(var(--panel) / .62);
  border: 1px solid rgb(var(--border) / .12);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.float-card{
  background: rgb(var(--panel) / .78);
  border: 1px solid rgb(var(--border) / .12);
  border-radius: 18px;
  padding: 14px;
  box-shadow: var(--shadow2);
}
.progress{
  height: 8px;
  border-radius: 999px;
  background: rgb(var(--border) / .12);
  overflow:hidden;
}
.progress > span{display:block; height:100%; border-radius:999px; background: rgb(var(--primary) / 1)}
.progress.env > span{background: rgb(var(--accent) / 1)}

.sector-industrial{color: rgb(245 158 11)}
.sector-environment{color: rgb(var(--accent))}
.sector-agri{color: rgb(16 196 124)}

.pill{
  display:inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgb(var(--primary) / .10);
  border: 1px solid rgb(var(--primary) / .22);
  color: rgb(var(--primary) / 1);
  font-size: 12px;
  font-weight: 800;
}

@keyframes floaty{ 0%,100%{transform: translateY(0)} 50%{transform: translateY(-6px)} }
.floaty{animation: floaty 4s ease-in-out infinite}
@keyframes fadeIn{ from{opacity:0; transform: translateY(10px)} to{opacity:1; transform: translateY(0)} }
.fade-in{animation: fadeIn .8s ease both}

/* =========================================================
   Footer
   ========================================================= */
.site-footer{
  background: rgb(var(--panel) / .70);
  border-top: 1px solid rgb(var(--border) / .10);
}
.footer-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 26px;
}
@media (min-width: 768px){ .footer-grid{grid-template-columns: 2fr 1fr 1fr} }
.footer-brand .brand{margin-bottom: 12px}
.footer-title{font-weight: 800; margin: 0 0 8px}
.footer-h{font-weight: 900; margin: 0 0 12px}
.footer-list{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px}
.footer-link{color: rgb(var(--muted) / .95); font-weight: 600}
.footer-link:hover{color: rgb(var(--accent) / 1)}
.footer-meta{margin-top: 12px; color: rgb(var(--muted) / .95); font-size: 14px}
.footer-note{
  margin-top: 34px;
  border: 1px solid rgb(var(--border) / .12);
  background: rgb(var(--panel2) / .55);
  border-radius: 16px;
  padding: 14px;
  color: rgb(var(--muted) / .98);
}
.footer-note strong{color: rgb(var(--text) / .95)}
.footer-bottom{
  display:flex;
  flex-direction:column;
  gap: 10px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgb(var(--border) / .10);
  color: rgb(var(--muted) / .95);
  font-size: 14px;
}
@media (min-width: 768px){ .footer-bottom{flex-direction:row; justify-content:space-between; align-items:center} }
.footer-bottom-links{display:flex; gap:16px}
.footer-bottom-links a:hover{color: rgb(var(--accent) / 1)}

/* =========================================================
   Page-specific bits
   ========================================================= */
.sticky{position: sticky; top: 98px}
@media (max-width: 1024px){ .sticky{position: static} }

.split{
  display:grid;
  grid-template-columns: 1fr;
  gap: 28px;
}
@media (min-width: 1024px){ .split{grid-template-columns: 1fr 1fr; align-items:center} }

.sector-card-left{
  padding: 26px;
  background: rgb(var(--panel2) / .55);
  border-right: 1px solid rgb(var(--border) / .10);
}
@media (max-width: 1024px){ .sector-card-left{border-right: none; border-bottom: 1px solid rgb(var(--border) / .10)} }



/* Contact layout */
.contact-layout{display:grid; grid-template-columns: 1fr; gap:22px}
@media (min-width: 1024px){
  .contact-layout{grid-template-columns: 1fr 2fr; gap:28px}
}
/* Icon tile used in "What We Do" cards */
.icon-tile{
  width:56px;
  height:56px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 14px;
  background: rgb(var(--primary) / .10);
  box-shadow: inset 0 0 0 1px rgb(var(--primary) / .18);
}

.icon-tile svg{
  width:28px;
  height:28px;
  stroke: rgb(var(--primary));
}
/* ===== Force icons to render (no global svg conflicts) ===== */
.icon-tile{
  width:56px;height:56px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 14px;
  background: rgb(var(--primary) / .10);
  box-shadow: inset 0 0 0 1px rgb(var(--primary) / .18);
}

.icon-tile svg{
  width:28px;height:28px;
  display:block !important;
}

.icon-tile svg, 
.icon-tile svg *{
  fill: none !important;
  stroke: rgb(var(--primary)) !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
/* ===========================
   ICONS (match reference UI)
   =========================== */
.icon-tile{
  width:56px;
  height:56px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(var(--primary), .10);   /* إذا عندك rgb(var(--primary) / .10) استخدمها */
  box-shadow: inset 0 0 0 1px rgba(var(--primary), .14);
  margin: 0 auto 14px;
}

.icon-tile svg{
  width:28px;
  height:28px;
  display:block;
  color: rgba(var(--primary), 1);
}

.icon-tile svg,
.icon-tile svg *{
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* ===========================
   Focus Sectors Icons (exact)
   =========================== */
.sector-icon{
  width:26px;
  height:26px;
  margin-bottom:10px;
  display:block;
}

.sector-icon svg{
  width:26px;
  height:26px;
  fill:none;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* Sector colors */
.sector-industrial-icon svg{ stroke:#2563eb; }   /* blue */
.sector-environment-icon svg{ stroke:#16a34a; } /* green */
.sector-agri-icon svg{ stroke:#f97316; }        /* orange */
/* ===========================
   Focus Sectors — FIXED ICONS
   =========================== */
.sector-icon{
  width:26px !important;
  height:26px !important;
  display:block;
  margin:0 0 12px 0;
}

.sector-icon svg{
  width:26px !important;
  height:26px !important;
  display:block !important;

  /* protect against global svg rules */
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.sector-icon svg *{
  fill: none !important;
  stroke: currentColor !important;
}

/* colors */
.sector-industrial-icon{ color:#2563eb !important; }  /* blue */
.sector-environment-icon{ color:#16a34a !important; } /* green */
.sector-agri-icon{ color:#f97316 !important; }        /* orange */
/* ===================================================
   GLOBAL SVG ICON FIX (show icons on all pages)
   Put this at the VERY END of styles.css
   =================================================== */

/* Base for icons */
svg.icon, .icon svg{
  width: 18px;
  height: 18px;
  display: inline-block;
  vertical-align: -0.15em;
}

/* Ensure strokes render even if global rules break them */
svg.icon, svg.icon *{
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

/* Ensure icon containers have a visible color */
.icon, svg.icon{
  color: rgb(var(--text)) !important; /* إذا عندك --text */
}

/* If your project uses --ink instead of --text */
:root .icon, :root svg.icon{
  color: rgba(var(--ink), 1) !important;
}
/* Sector left panel icon */
.sector-card-left{ padding:28px; }
.sector-icon{ width:28px; height:28px; }
.sector-icon svg{
  width:28px; height:28px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* Colors that match each sector */
.sector-industrial-icon{ color:#2563eb; }
.sector-environment-icon{ color:#16a34a; }
.sector-agri-icon{ color:#f97316; }
/* ===== Programs layout (matches screenshot) ===== */
.program-card{ position:relative; padding:26px; }
.program-num{
  position:absolute;
  left:26px;
  top:20px;
  font-weight:900;
  font-size:44px;
  line-height:1;
  color: rgb(var(--primary) / .18);
  user-select:none;
  pointer-events:none;
}

.program-grid{
  display:grid;
  grid-template-columns: 1.05fr 1fr .9fr;
  gap: 22px;
  align-items:flex-start;
}

.program-left{ padding-left: 56px; } /* space for big number */
.program-title{ font-size: 1.75rem; margin-top: 14px; }
.program-desc{ margin-top: 12px; max-width: 26rem; }

.program-kicker{
  font-weight:900;
  font-size:12px;
  letter-spacing:.10em;
  text-transform:uppercase;
  margin-bottom:10px;
}

.program-badges{ display:flex; flex-wrap:wrap; gap:10px; }

@media (max-width: 980px){
  .program-grid{ grid-template-columns: 1fr; }
  .program-left{ padding-left: 0; }
  .program-num{ left:18px; top:18px; font-size:40px; }
}
/* =========================
   Premium Glass Header
   ========================= */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 12px 0;
  background: linear-gradient(90deg,
    rgba(124,58,237,.14),
    rgba(59,130,246,.10),
    rgba(16,185,129,.08)
  );
  backdrop-filter: blur(10px);
}

/* nav wrapper */
.site-header .nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;

  min-height: 72px;
  padding: 12px 16px;
  border-radius: 22px;

  background: rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: 0 18px 44px rgba(0,0,0,.10);
}

/* Brand */
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  min-width: 220px;
}

.brand-logo{
  height: 40px;
  width: auto;
  display:block;
  object-fit:contain;
  border-radius: 12px;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.12));
}

.brand-name{
  font-weight: 800;
  letter-spacing: -0.02em;
  color: rgba(15,23,42,.95);
}

/* Links */
.nav-links{
  display:flex;
  align-items:center;
  gap: 14px;
}

.nav-link{
  text-decoration:none;
  color: rgba(15,23,42,.65);
  font-weight: 650;
  padding: 10px 12px;
  border-radius: 14px;
  transition: .18s ease;
}

.nav-link:hover{
  color: rgba(15,23,42,.95);
  background: rgba(255,255,255,.55);
}

.nav-link.active{
  color: rgba(15,23,42,.95);
  background: rgba(91,92,255,.14);
  border: 1px solid rgba(91,92,255,.18);
}

/* Actions */
.nav-actions{
  display:flex;
  align-items:center;
  gap:10px;
  min-width: 220px;
  justify-content:flex-end;
}

.icon-btn{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.65);
  transition: .18s ease;
}
.icon-btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.85);
}

/* Button */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 42px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.65);
  color: rgba(15,23,42,.95);
  font-weight: 750;
  text-decoration:none;
  transition: .18s ease;
}
.btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.85);
}

.btn-primary{
  background: linear-gradient(135deg, rgba(91,92,255,1), rgba(91,92,255,.80));
  color: #fff;
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 18px 34px rgba(91,92,255,.22);
}

/* Mobile */
@media (max-width: 900px){
  .brand{min-width:auto;}
  .nav-actions{min-width:auto;}
}

@media (max-width: 640px){
  .brand-name{display:none;}         /* يترك اللوغو فقط */
  .nav-links{display:none;}          /* (إذا عندك JS يفتح mobileMenu) */
}
:root{
  --bg: #f6f8ff;
  --bg2:#eef3ff;
  --t1: rgba(91,92,255,.14);   /* violet/blue */
  --t2: rgba(59,130,246,.12);  /* blue */
  --t3: rgba(34,211,238,.10);  /* cyan */
  --noise-opacity: .035;
}

/* dark mode */
:root[data-theme="dark"]{
  --bg: #070a12;
  --bg2:#0a1020;
  --t1: rgba(91,92,255,.22);
  --t2: rgba(59,130,246,.16);
  --t3: rgba(34,211,238,.12);
  --noise-opacity: .06;
}

body{
  background: var(--bg);
  position: relative;
  overflow-x: hidden;
}

/* smooth multi-layer background */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(1100px 700px at 20% 15%, var(--t1), transparent 60%),
    radial-gradient(1100px 700px at 85% 20%, var(--t2), transparent 62%),
    radial-gradient(1200px 900px at 50% 85%, var(--t3), transparent 65%),
    linear-gradient(180deg, var(--bg), var(--bg2));
}

/* anti-banding noise (NO blend-mode) */
body::after{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: var(--noise-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.30'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}
/* =========================================
   Digital Jordan — Elegant Background
   (Logo-matched, no banding, light/dark)
   ========================================= */

:root{
  /* Light */
  --bg0: #f6fbff;
  --bg1: #eef5ff;

  /* accents from logo */
  --c1: rgba(32, 140, 200, .16);  /* cyan-blue */
  --c2: rgba(49, 93, 200,  .14);  /* deep blue */
  --c3: rgba(156, 124, 255,.12);  /* soft violet */

  --noise: .035;
}

:root[data-theme="dark"]{
  /* Dark */
  --bg0: #070a12;
  --bg1: #0a1020;

  --c1: rgba(32, 140, 200, .22);
  --c2: rgba(49, 93, 200,  .18);
  --c3: rgba(156, 124, 255,.14);

  --noise: .06;
}

body{
  background: var(--bg0);
  position: relative;
  overflow-x: hidden;
}

/* Main gradient layer */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(1200px 800px at 18% 20%, var(--c3), transparent 62%),
    radial-gradient(1100px 720px at 85% 22%, var(--c2), transparent 62%),
    radial-gradient(1400px 900px at 50% 88%, var(--c1), transparent 68%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
}

/* Subtle “wave” sheen like the logo (very soft) */
body::before{
  background:
    radial-gradient(1200px 800px at 18% 20%, var(--c3), transparent 62%),
    radial-gradient(1100px 720px at 85% 22%, var(--c2), transparent 62%),
    radial-gradient(1400px 900px at 50% 88%, var(--c1), transparent 68%),
    radial-gradient(900px 220px at 65% 35%, rgba(120,170,255,.10), transparent 70%),
    radial-gradient(900px 220px at 35% 45%, rgba(120,220,255,.08), transparent 70%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
}

/* Anti-banding noise (safe, no blend modes) */
body::after{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: var(--noise);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.30'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}/* =========================
   Logo size (smaller)
   Put at END of CSS
   ========================= */
.brand-logo{
  height: 28px !important;
  width: auto !important;
  object-fit: contain;
}

/* even smaller on mobile */
@media (max-width: 640px){
  .brand-logo{
    height: 24px !important;
  }
}/* =========================
   FIX: Make header logo small
   Put at VERY END of styles.css
   ========================= */

/* keep header height ثابت */
.site-header .nav{
  min-height: 72px !important;
  height: 72px !important;
  padding: 10px 14px !important;
}
/* =========================================
   ROOT FIX: Logo (wordmark desktop, mark mobile)
   Put at END of styles.css
   ========================================= */

.site-header .nav{
  height: 72px !important;
  min-height: 72px !important;
  padding: 10px 14px !important;
  align-items: center !important;
}

.brand{
  display:flex !important;
  align-items:center !important;
  gap: 10px !important;
  min-width: auto !important;
}

.brand-logo{ display:flex; align-items:center; }

/* Desktop wordmark */
.brand-logo-img{
  height: 34px !important;       /* تحكم بالحجم */
  width: auto !important;
  max-width: 170px !important;   /* يمنع التمدد */
  object-fit: contain !important;
  display:block !important;
}

/* Optional: hide site_name text if you want ONLY logo */
@media (max-width: 640px){
  .brand-name{ display:none !important; } /* موبايل: أيقونة فقط */
  .brand-logo-img{
    height: 30px !important;
    max-width: 34px !important;  /* لأن الموبايل رح يستخدم logo-mark.png */
  }
}