/* ============================================
   المجموعة الطيبة زغار ابراهيم — تنسيق عام
   ============================================ */

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-ar);
  background:var(--bg);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
img,svg{display:block; max-width:100%;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; border:none; cursor:pointer; background:none;}
input,textarea,select{font-family:inherit; font-size:inherit;}

.mono{font-family:var(--font-mono); direction:ltr; unicode-bidi:isolate;}
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ===== Focus visibility (accessibility) ===== */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible{
  outline:3px solid var(--copper-light);
  outline-offset:2px;
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important;}
}

/* ===== Header (مشترك) ===== */
header.site-header{
  position:sticky; top:0; z-index:50;
  background:var(--ink);
  color:#fff;
  padding:14px 18px;
  display:flex; align-items:center; justify-content:space-between;
  box-shadow:0 2px 14px rgba(14,27,50,.25);
}
.brand{display:flex; align-items:center; gap:10px;}
.brand-mark{
  width:38px; height:38px; border-radius:10px;
  background:linear-gradient(135deg, var(--copper), var(--copper-light));
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-weight:700; font-size:14px; color:#fff;
  flex-shrink:0;
}
.brand-text{line-height:1.25;}
.brand-text strong{display:block; font-size:14px; font-weight:800;}
.brand-text span{display:block; font-size:10.5px; color:#9FB1CC; font-family:var(--font-mono); direction:ltr; text-align:right;}
.call-btn{
  background:var(--copper); color:#fff; padding:9px 14px; border-radius:100px;
  font-size:13px; font-weight:700; display:flex; align-items:center; gap:6px;
}

/* ===== Buttons ===== */
.btn-primary{
  background:var(--copper); color:#fff; padding:14px 22px; border-radius:100px;
  font-size:15px; font-weight:800; display:inline-flex; align-items:center;
  justify-content:center; gap:8px; box-shadow:var(--shadow-copper);
  min-height:48px; transition:.2s;
}
.btn-primary:active{transform:scale(.98);}
.btn-primary:disabled{opacity:.45; box-shadow:none; cursor:not-allowed;}
.btn-ghost{
  background:rgba(255,255,255,.08); color:#fff; padding:14px 22px; border-radius:100px;
  font-size:15px; font-weight:700; border:1px solid rgba(255,255,255,.18);
  min-height:48px; display:inline-flex; align-items:center; justify-content:center; gap:8px;
}
.btn-secondary{
  background:var(--card); color:var(--ink); padding:13px 20px; border-radius:100px;
  font-size:14px; font-weight:700; border:1.5px solid var(--line);
  min-height:46px; display:inline-flex; align-items:center; justify-content:center; gap:8px;
}

/* ===== Section shell ===== */
section{padding:34px 20px;}
.section-inner{max-width:640px; margin:0 auto;}
.section-head{margin-bottom:20px;}
.section-head .tag{font-family:var(--font-mono); font-size:11px; color:var(--copper); font-weight:700; letter-spacing:.05em;}
.section-head h2{font-size:22px; font-weight:900; margin-top:6px;}
.section-head p{color:var(--muted); font-size:14px; margin-top:6px;}

/* ===== Footer ===== */
footer.site-footer{background:var(--ink); color:#9FB1CC; padding:26px 20px; font-size:12.5px; text-align:center;}
footer.site-footer strong{color:#fff; display:block; margin-bottom:4px; font-size:14px;}

/* ===== Desktop ===== */
@media (min-width:860px){
  header.site-header{padding:16px 40px;}
  section{padding:56px 40px;}
  .section-inner{max-width:1120px;}
}