/* ================== Reset & Base ================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; font-synthesis: none; } /* يمنع أوزان مزيفة */
body{
  margin:0;
  /* fallback بميتركس مضبوطة لتقليل القفزة وقت تبديل Tajawal */
  font-family:'Tajawal','Tajawal Fallback',Tahoma,Arial,sans-serif;
  background:#fff; color:#222; line-height:1.6; overflow-x:hidden;
}
img, svg, video, canvas { max-width:100%; height:auto; display:block; }

a:focus-visible, .btn:focus-visible, .floating-btn:focus-visible{
  outline:2px solid #ff9900; outline-offset:3px;
}

/* ======= Tajawal Fallback metrics (يقلل CLS بشكل واضح) ======= */
@font-face{
  font-family:'Tajawal Fallback';
  src:local('Tahoma');
  /* قيم تقريبية مضبوطة لتقليل فرق المقاسات */
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
  size-adjust: 97%;
}

/* ================== Header ================== */
header{
  background:#000; color:#fff; padding:1rem 2rem;
  display:flex; justify-content:space-between; align-items:center; gap:12px;
}
.logo{ width:50px; height:50px; object-fit:contain; display:block; }
header img{ height:50px; }
nav{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
nav a{
  color:#fff; margin:0 10px; text-decoration:none; font-weight:bold; transition:color .3s;
}
nav a:hover{ color:#ff9900; }

/* ================== Hero ================== */
.hero{
  position:relative;
  background:#000 url('images/hero.webp') center/cover no-repeat;
  min-height:clamp(360px,60vh,560px);
  display:flex; align-items:center; justify-content:center;
  color:#fff; text-align:center; overflow:hidden; contain:paint;
}
.hero::before{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.6); }
.hero-content{ position:relative; z-index:1; width:100%; max-width:680px; padding:56px 16px 24px; }
.hero-content h1{ font-size:clamp(1.6rem,6vw,2.8rem); line-height:1.35; margin:0; color:#ff9900; }
.hero-content p{ font-size:clamp(1rem,3.8vw,1.2rem); margin:10px 0 0; }

@media (max-width:768px){
  .hero{ min-height:clamp(320px,70svh,560px); background-position:center 25%; }
  .hero-content{ padding:calc(24px + env(safe-area-inset-top)) 16px 24px; }
  .btn{ min-width:180px; }
}
@supports not (height:1svh){ @media (max-width:768px){ .hero{ min-height:clamp(320px,70vh,560px); } } }
@supports not (height:1vh){ .hero{ height:400px; } }

/* ================== Buttons ================== */
.btn{
  background:linear-gradient(45deg,#ff9900,#ffc107); color:#fff;
  padding:.8rem 1.5rem; border:none; text-decoration:none; border-radius:50px;
  font-weight:bold; margin-top:1rem; transition:transform .3s; display:inline-block;
}
.btn i{ margin-inline-end:.4em; }         /* يحجز مساحة الأيقونة */
.fa, .fas, .fab{ width:1.25em; text-align:center; } /* منع أي قفز عرضي */
.btn:hover{ transform:scale(1.05); }

/* ================== Sections ================== */
.services, .about, .clients, .why-us{ padding:2rem; text-align:center; }
.services{
  background:#f7f7f7; display:flex; flex-wrap:wrap; justify-content:center; gap:1.5rem;
}
.service{
  flex:1 1 200px; background:#fff; padding:1.5rem; border-radius:8px; text-align:center;
  box-shadow:0 2px 8px rgba(0,0,0,.1); transition:transform .3s; will-change:transform;
}
.service:hover{ transform:translateY(-5px); }
.service i{ font-size:2rem; margin-bottom:10px; color:#ff9900; transition:transform .3s; }
.service:hover i{ transform:scale(1.2); }
.about h2, .clients h2, .why-us h2{ color:#ff9900; font-size:1.8rem; margin-bottom:1rem; }
.clients ul{ list-style:none; padding:0; }
.clients li{ margin:.5rem 0; font-weight:bold; }

/* ================== Footer ================== */
footer{ background:#000; color:#fff; text-align:center; padding:1rem 2rem; }
footer a{ color:#fff; text-decoration:none; }

/* روابط الكروت */
.service-link{ display:block; text-decoration:none; color:inherit; }

/* ================== Floating Buttons ================== */
.floating-buttons{
  position:fixed; bottom:calc(16px + env(safe-area-inset-bottom));
  left:calc(16px + env(safe-area-inset-left)); display:flex; gap:10px; z-index:1000;
}
.floating-btn{
  width:56px; height:56px; background:#25D366; color:#fff; border-radius:50%;
  display:inline-grid; place-items:center; text-decoration:none; font-size:22px;
  box-shadow:0 2px 6px rgba(0,0,0,.3); transition:transform .3s;
}
.floating-btn:hover{ transform:scale(1.1); }
.floating-btn.call{ background:#007bff; }

/* H2 مخفي لتحسين التسلسل */
.sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ================== Mobile Tweaks ================== */
@media (max-width:768px){
  header{ flex-direction:column; }
  nav{ margin-top:10px; display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
  .services{ flex-direction:column; padding:1.25rem; gap:1rem; }
  .service{ flex:1 1 100%; }
}
@media (max-width:400px){
  .btn{ padding:.7rem 1.1rem; }
  .floating-btn{ width:52px; height:52px; }
}

/* ===== Font Awesome webfonts بصيغة swap (لتقليل FOIT/CLS) ===== */
@font-face{
  font-family:"Font Awesome 6 Brands";
  font-style:normal; font-weight:400; font-display:swap;
  src:url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/webfonts/fa-brands-400.woff2") format("woff2");
}
@font-face{
  font-family:"Font Awesome 6 Free";
  font-style:normal; font-weight:900; font-display:swap;
  src:url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/webfonts/fa-solid-900.woff2") format("woff2");
}