/* =====================================================================
   FYRIX — ملف الأنماط المشترك لكل صفحات الموقع الثابت
   ---------------------------------------------------------------------
   ملاحظة هندسية: الصفحات بقيت HTML مستقل كل وحدة (بلا أي بناء/Build
   Step)، بس صار عنا ملف CSS واحد مشترك بدل تكرار ~250 سطر بكل صفحة —
   لأنه أصلاً صار لازم مجلد assets/ لاستضافة خط TS Ateq محلياً، فإضافة
   ملف نمط واحد جنبه ما بزيد تعقيد حقيقي، وبيمنع انحراف الصفحات عن بعض
   لاحقاً (نفس درس "مصدر الحقيقة الواحد" الموثّق بـERRORS_LOG.md).
   ===================================================================== */

/* -------- خط TS Ateq — مستضاف محلياً (خط شخصي مجاني، بلا توفّر على Google Fonts) -------- */
@font-face{
  font-family:"TS Ateq";
  src:url("fonts/TSAteq-Regular.otf") format("opentype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

:root{
  --bg:       #1F1F1F; /* الأساس - درع الروبوت */
  --bg-2:     #343434; /* الثانوي - البطاقات والفواصل */
  --neutral:  #D4CCC6; /* محايد صناعي */
  --ink:      #FFFFFF;
  --mut:      rgba(255,255,255,.62);
  --mut-2:    rgba(255,255,255,.4);
  --red:      #E30102; /* اللون الإشاري - 10% فقط */
  --line:     rgba(255,255,255,.08);

  /* خط العناوين: TS Ateq (خط عرض عربي)، مع Cairo كبديل احتياطي لو ما تحمّل */
  --ar-head: "TS Ateq", "Cairo", "Segoe UI", Tahoma, sans-serif;
  /* خط النصوص: IBM Plex Sans Arabic بدل DIN Next LT Arabic —
     استبدال متعمّد بسبب قيد ترخيص Web حقيقي بملف DIN Next (راجع الشرح
     بالمحادثة)، وIBM Plex Sans Arabic قريب من نفس الطابع الهندسي/التقني
     ومرخّص مجاناً بالكامل (SIL OFL) عبر Google Fonts. */
  --ar-body: "IBM Plex Sans Arabic", "Cairo", "Segoe UI", Tahoma, sans-serif;
  /* خط العناصر الإنجليزية/اللاتينية (الشعار، الوسوم التقنية) — بلا تغيير */
  --en: "Montserrat", "Segoe UI", Tahoma, sans-serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--ar-body); line-height:1.75; overflow-x:hidden;
  background-image:
    radial-gradient(60% 50% at 50% 0%, rgba(227,1,2,.10), transparent 70%),
    radial-gradient(40% 30% at 85% 10%, rgba(227,1,2,.06), transparent 70%);
}
.ltr{ direction:ltr; unicode-bidi:isolate; font-family:var(--en); }
a{ color:inherit; }
img,svg{ display:block; max-width:100%; }

h1,h2,h3,.heading{ font-family:var(--ar-head); letter-spacing:-.005em; }
h1 em, h2 em{ font-style:normal; color:var(--red); }
/* خط TS Ateq خط عرض مصمَّم لعناوين كبيرة (24px فما فوق) — بهالحجم بيطلع نضيف وواضح.
   تحت هالحجم (عناوين البطاقات الصغيرة 15-16px) المتصفح بيعمل Faux Bold
   (تثخين اصطناعي) لأنه الخط موجود بوزن Regular وحيد بس، وهالتثخين عند حجم صغير
   بيخرّب تفاصيل الخط ويخليه يصير متلخبط وصعب القراءة (هاد بالضبط سبب مشكلة
   "عين لا تخدع" وعناوين البطاقات إجمالاً). لهيك رجّعنا عناوين البطاقات الصغيرة
   لخط IBM Plex Sans Arabic (نفس خط النصوص) بوزن 700 حقيقي — أوضح وأثبت من أي
   محاولة لتكبير حجم TS Ateq أو تغيير وزنه، وبيضل TS Ateq محجوز للعناوين
   الكبيرة يلي فعلاً بيبين فيها جماله. */
.card h3, .team-card h3, .heading{ font-family:var(--ar-body); letter-spacing:0; }

/* ---------- الرأس + شريط التنقّل الموحّد ---------- */
.site-header{
  position:relative; z-index:6; display:flex; align-items:center; flex-wrap:wrap;
  justify-content:space-between; gap:14px;
  padding:24px clamp(20px,5vw,64px);
}
.brand{ display:flex; align-items:center; gap:10px; }
.brand svg{ width:28px; height:auto; }
.brand b{ font-family:var(--en); letter-spacing:.14em; font-size:15px; font-weight:700; }

.site-nav{
  display:flex; gap:4px; flex-wrap:wrap; order:3; width:100%; justify-content:center;
  background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:999px; padding:6px;
}
.site-nav a{
  font-family:var(--ar-body); font-size:13.5px; font-weight:600; padding:9px 18px;
  border-radius:999px; color:var(--mut); text-decoration:none;
  transition:background .2s ease,color .2s ease;
}
.site-nav a:hover{ color:var(--ink); }
/* الأحمر إشارة لا سطح (قاعدة صريحة بدليل الهوية v2.1) — مؤشر الصفحة الحالية
   نص + خط تحتي أحمر، مو تعبئة حمراء كاملة تحوّل اللون لسطح واجهة. */
.site-nav a.active{
  color:var(--ink); font-weight:700; position:relative;
}
.site-nav a.active::after{
  content:""; position:absolute; right:18px; left:18px; bottom:4px;
  height:2px; background:var(--red); border-radius:2px;
}

@media (min-width:760px){
  .site-nav{ order:0; width:auto; }
}

.tagline-pill{
  font-family:var(--en); font-size:11px; letter-spacing:.16em; font-weight:600;
  color:var(--mut); border:1px solid var(--line); border-radius:999px;
  padding:7px 14px; white-space:nowrap;
}

/* ---------- رأس صفحة داخلية (Features / Team / Contact / Dashboard) ---------- */
.page-hero{
  position:relative; z-index:1; text-align:center;
  padding:clamp(20px,5vw,40px) 20px clamp(40px,6vw,60px);
  max-width:760px; margin:0 auto;
}
.page-hero .glow{
  position:absolute; top:-20%; left:50%; transform:translateX(-50%);
  width:520px; height:320px; max-width:120vw;
  background:radial-gradient(closest-side, rgba(227,1,2,.18), transparent 72%);
  filter:blur(6px); z-index:-1;
}
.page-hero .eyebrow{
  font-family:var(--en); font-size:12px; letter-spacing:.22em; font-weight:600;
  color:var(--red); margin:0 0 16px; text-transform:uppercase;
}
.page-hero h1{
  font-weight:900; font-size:clamp(24px,4.2vw,38px); line-height:1.4; margin:0 0 16px;
}
.page-hero .lede{ color:var(--mut); font-size:clamp(14.5px,1.8vw,17px); margin:0 auto; }

.status{
  display:inline-flex; align-items:center; gap:10px; padding:10px 20px;
  border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.03);
  font-size:14px; color:var(--mut); margin-top:22px;
}
.dot{
  width:9px; height:9px; border-radius:50%; background:var(--red); flex:none;
  box-shadow:0 0 0 0 rgba(227,1,2,.55); animation:pulseDot 1.8s ease-out infinite;
}
@keyframes pulseDot{
  0%{ box-shadow:0 0 0 0 rgba(227,1,2,.55); }
  70%{ box-shadow:0 0 0 9px rgba(227,1,2,0); }
  100%{ box-shadow:0 0 0 0 rgba(227,1,2,0); }
}

/* ---------- شبكة بطاقات عامة (قدرات / لوحة المراقبة) ---------- */
.grid{
  position:relative; z-index:1; max-width:1100px; margin:0 auto; padding:10px 20px 70px;
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
}
.grid.cols-3{ grid-template-columns:repeat(3,1fr); }
.grid.cols-2{ grid-template-columns:repeat(2,1fr); }
.card{
  background:var(--bg-2); border:1px solid var(--line); border-radius:16px;
  padding:26px 22px; text-align:center; transition:transform .25s ease, border-color .25s ease, background .25s ease;
}
.card:hover{ transform:translateY(-4px); border-color:rgba(227,1,2,.4); background:#3a3a3a; }
.card .ic{ width:44px; height:44px; margin:0 auto 16px; color:var(--red); }
.card h3{ font-size:16px; margin:0 0 8px; font-weight:700; }
.card p{ font-size:13.5px; color:var(--mut); margin:0; line-height:1.8; }

@media (max-width:820px){
  .grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:520px){
  .grid{ grid-template-columns:1fr; }
}

/* ---------- بطاقات الفريق ---------- */
.team-card{
  background:var(--bg-2); border:1px solid var(--line); border-radius:16px;
  padding:26px 22px; text-align:center;
}
.team-card .avatar{
  width:84px; height:84px; border-radius:50%; margin:0 auto 16px;
  background:linear-gradient(160deg, rgba(227,1,2,.35), rgba(255,255,255,.06));
  display:flex; align-items:center; justify-content:center;
  font-family:var(--en); font-weight:700; font-size:11px; color:var(--neutral);
  border:1px solid var(--line); overflow:hidden;
}
.team-card .avatar.empty{ border-style:dashed; text-align:center; line-height:1.4; padding:6px; }
.team-card .avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.team-card h3{ font-size:16px; margin:0 0 4px; }
.team-card .role{ font-size:12.5px; color:var(--red); font-weight:600; margin:0 0 16px; }
.team-card .achievement{ font-size:13px; color:var(--mut); line-height:1.75; margin:0 0 14px; min-height:44px; }
.team-card .li-link{
  display:inline-flex; align-items:center; gap:6px; font-family:var(--en); font-size:12px;
  color:var(--mut-2); text-decoration:none; border:1px solid var(--line); border-radius:999px; padding:6px 14px;
}
.team-card .li-link:hover{ color:var(--ink); border-color:rgba(227,1,2,.4); }
.team-card.placeholder{ border-style:dashed; }
.team-card .todo-badge{
  display:inline-block; font-family:var(--en); font-size:10px; letter-spacing:.08em; font-weight:700;
  color:#ffcf5c; background:rgba(255,207,92,.1); border:1px solid rgba(255,207,92,.3);
  border-radius:999px; padding:4px 10px; margin-bottom:10px;
}

/* ---------- صفحة التواصل ---------- */
.contact-grid{
  max-width:640px; margin:0 auto; padding:0 20px 70px; display:flex; flex-direction:column; gap:14px;
}
.contact-item{
  display:flex; align-items:center; gap:16px; padding:18px 20px;
  background:var(--bg-2); border:1px solid var(--line); border-radius:14px;
  text-decoration:none; color:var(--ink); transition:border-color .2s ease, transform .2s ease;
}
.contact-item:hover{ border-color:rgba(227,1,2,.4); transform:translateY(-2px); }
.contact-item .ic{ flex:0 0 auto; width:22px; height:22px; color:var(--red); }
.contact-item .txt{ flex:1; }
.contact-item .txt .lbl{ font-size:11px; color:var(--mut-2); font-family:var(--en); letter-spacing:.05em; margin-bottom:3px; }
.contact-item .txt .val{ font-size:14.5px; font-weight:600; }
.contact-item .val.ltr{ direction:ltr; text-align:right; display:block; }

.audience-strip{
  max-width:900px; margin:0 auto 70px; padding:0 20px; text-align:center;
}
.audience-strip .chips{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:18px; }
.audience-strip .chip{
  font-size:13px; padding:9px 18px; border-radius:999px; border:1px solid var(--line);
  color:var(--mut); background:rgba(255,255,255,.03);
}

/* ---------- الشريط السفلي + الفوتر (موحّد) ---------- */
.strip{
  position:relative; z-index:1; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:22px 20px; text-align:center; color:var(--mut-2); font-size:13px;
}
.strip b{ color:var(--neutral); font-weight:600; }

footer{
  position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:14px;
  align-items:center; justify-content:space-between;
  padding:26px clamp(20px,5vw,64px) 40px; color:var(--mut-2); font-size:12.5px;
}
footer .fmark{ display:flex; align-items:center; gap:8px; }
footer .fmark svg{ width:20px; height:auto; opacity:.8; }
footer nav{ display:flex; gap:18px; }

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
}