/* ═══════════════════════════════════════════════════════════
   صفحة نظام ERP — الطبقة المميّزة فوق style.css

   ليه ملف لوحده؟ لأن ERP هو المنتج الرئيسي، وله لغة بصرية أثقل
   من باقي الصفحات: خلفية داكنة، لمسة ذهبية من اللوجو، وتفاصيل
   أكثر كثافة. الباقي بيفضل خفيف زي ما هو.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* نفس ألوان style.css — مصدر واحد للهوية، مش نسختين */
  --gold:      var(--amber);
  --gold-soft: var(--amber-soft);
  --gold-dim:  var(--amber-dim);
}

/* ─────────── الترويسة ─────────── */
.erp-hero {
  background: linear-gradient(160deg, #12121c 0%, #181824 45%, #1e2438 100%);
  color: #fff; position: relative; overflow: hidden;
  padding: var(--sp-section) 0;
}
.erp-hero::before {
  content: ''; position: absolute; width: 820px; height: 820px; border-radius: 50%;
  top: -420px; inset-inline-start: -260px; pointer-events: none;
  background: radial-gradient(circle, rgba(48, 72, 120, .46), transparent 65%);
}
.erp-hero::after {
  content: ''; position: absolute; width: 560px; height: 560px; border-radius: 50%;
  bottom: -320px; inset-inline-end: -180px; pointer-events: none;
  background: radial-gradient(circle, rgba(240, 132, 12, .18), transparent 68%);
}
.erp-hero .wrap { position: relative; z-index: 1; }

.erp-badge {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 24px;
  padding: 8px 16px; border-radius: 999px; font-size: 13px; font-weight: 600;
  background: var(--gold-dim); color: var(--gold-soft);
  border: 1px solid rgba(240, 132, 12, .32);
}
.erp-badge svg { width: 15px; height: 15px; }

.erp-hero h1 {
  font-size: clamp(32px, 5vw, 42px); font-weight: 800; line-height: 1.25;
  letter-spacing: -1.2px; margin-bottom: 20px; max-width: 17ch;
}
.erp-hero h1 .g {
  background: linear-gradient(120deg, var(--gold), var(--gold-soft));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.erp-lead {
  font-size: clamp(17px, 1.9vw, 20px); color: rgba(255, 255, 255, .78);
  line-height: 1.9; max-width: 62ch; margin-bottom: 32px;
}

.erp-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 40px; }
.btn-gold {
  background: linear-gradient(120deg, var(--gold), var(--gold-soft));
  color: #1c1301; font-weight: 600;
  box-shadow: 0 8px 26px rgba(240, 132, 12, .32);
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 12px 34px rgba(240, 132, 12, .44); }

/* شريط أرقام الترويسة */
.erp-facts {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: rgba(255, 255, 255, .1); border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .1);
}
.erp-facts div { background: rgba(255, 255, 255, .04); padding: 20px 16px; text-align: center; }
.erp-facts b { display: block; font-size: 25px; font-weight: 600; letter-spacing: -.6px; }
.erp-facts span { font-size: 12px; color: rgba(255, 255, 255, .6); font-weight: 600; }

/* ─────────── المشكلة ─────────── */
.pains { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pain {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 24px; position: relative;
}
.pain::before {
  content: ''; position: absolute; inset-block: 24px auto; inset-inline-start: 0;
  width: 3px; height: 32px; border-radius: 0 3px 3px 0; background: #ef4444;
}
.pain h3 { font-size: 17px; font-weight: 600; margin-bottom: 8px; }
.pain p { font-size: 15px; color: var(--ink-soft); line-height: 1.85; }

/* ─────────── الأعمدة المميّزة ─────────── */
.pillars { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.pillar {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 28px; transition: border-color .2s, transform .2s var(--ease), box-shadow .2s;
}
.pillar:hover { border-color: var(--gold); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.pillar-ico {
  width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
  background: var(--gold-dim); color: var(--gold); margin-bottom: 16px;
}
.pillar-ico svg { width: 23px; height: 23px; }
.pillar h3 { font-size: 20px; font-weight: 800; margin-bottom: 12px; }
.pillar p { font-size: 15px; color: var(--ink-soft); line-height: 1.9; }
/* الاسم كان .quote — والقاعدة العامة .quote في style.css (خلفية
   كحلي، حشو ٨٨ بكسل، توسيط) كانت بتنطبق عليه كمان، فالأربع جُمل
   دي كانت بلوك كحلي طوله ٢٠١ بكسل جوه كل كارت أبيض، والنص عليه
   بتباين ١.٠٤:١ — يعني مش باين خالص. الاسم اتغيّر عشان يفك التصادم. */
.pillar-note {
  margin-top: 16px; padding-inline-start: 16px; border-inline-start: 3px solid var(--gold);
  font-size: 13px; font-weight: 600; color: var(--ink);
}

/* ─────────── الموديولات ─────────── */
.mods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.mod {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px 20px; transition: border-color .18s, box-shadow .18s;
}
.mod:hover { border-color: var(--gold-soft); box-shadow: var(--shadow); }
.mod-top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.mod-ico {
  width: 36px; height: 36px; border-radius: 12px; flex-shrink: 0;
  background: var(--gold-dim); color: var(--gold); display: grid; place-items: center;
}
.mod-ico svg { width: 17px; height: 17px; }
.mod h3 { font-size: 15px; font-weight: 600; }
.mod ul { display: flex; flex-direction: column; gap: 8px; }
.mod li {
  font-size: 13px; color: var(--ink-soft); line-height: 1.7;
  padding-inline-start: 16px; position: relative;
}
.mod li::before {
  content: ''; position: absolute; inset-inline-start: 0; top: 9px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--gold-soft);
}

/* ─────────── الضمانات الهندسية ─────────── */
.rules { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.rule {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--bg-tint); border-radius: var(--radius); padding: 20px;
}
.rule svg { width: 19px; height: 19px; color: var(--gold); flex-shrink: 0; margin-top: 3px; }
.rule b { display: block; font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.rule span { font-size: 13px; color: var(--ink-soft); line-height: 1.8; }

/* ─────────── الأسئلة ─────────── */
.faq { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq details {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden;
}
.faq details[open] { border-color: var(--gold-soft); }
.faq summary {
  padding: 20px 24px; font-size: 15px; font-weight: 600; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; font-size: 20px; font-weight: 400; color: var(--gold); flex-shrink: 0;
  transition: transform .2s;
}
.faq details[open] summary::after { content: '−'; }
.faq p {
  padding: 0 24px 20px; font-size: 15px; color: var(--ink-soft); line-height: 1.95;
}

/* ─────────── الفورم ─────────── */
.erp-form-sec {
  background: linear-gradient(160deg, #181824, #1e2438);
  color: #fff; padding: var(--sp-section) 0; position: relative; overflow: hidden;
}
.erp-form-sec::before {
  content: ''; position: absolute; width: 700px; height: 700px; border-radius: 50%;
  top: -360px; inset-inline-end: -200px; pointer-events: none;
  background: radial-gradient(circle, rgba(240, 132, 12, .16), transparent 66%);
}
.erp-form-grid {
  position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1.05fr;
  gap: 48px; align-items: start;
}
.erp-form-grid h2 { font-size: clamp(25px, 3.2vw, 32px); font-weight: 800; letter-spacing: -.8px; margin-bottom: 16px; }
.erp-form-grid > div > p { color: rgba(255, 255, 255, .74); font-size: 15px; line-height: 1.95; margin-bottom: 24px; }
.promise { display: flex; flex-direction: column; gap: 12px; }
.promise li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: rgba(255, 255, 255, .86); }
.promise svg { width: 18px; height: 18px; color: var(--gold-soft); flex-shrink: 0; margin-top: 3px; }

.form-card {
  background: var(--bg); color: var(--ink); border-radius: var(--radius-lg); padding: 32px;
  box-shadow: 0 26px 60px rgba(0, 0, 0, .34);
}
.form-card h3 { font-size: 20px; font-weight: 800; margin-bottom: 4px; }
.form-card .hint { font-size: 13px; color: var(--ink-soft); margin-bottom: 24px; }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.field label i { color: #ef4444; font-style: normal; }
.field input, .field textarea {
  width: 100%; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-alt); font-family: inherit; font-size: 15px; color: var(--ink);
  outline: none; transition: border-color .16s, background .16s;
}
.field textarea { resize: vertical; min-height: 84px; line-height: 1.75; }
.field input:focus, .field textarea:focus { border-color: var(--blue); background: var(--bg); }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-mute); }
.field input[dir="ltr"] { text-align: start; }
.field.bad input, .field.bad textarea { border-color: #ef4444; background: #fef2f2; }
.field .err { display: none; font-size: 12px; color: #dc2626; font-weight: 600; margin-top: 8px; }
.field.bad .err { display: block; }
.form-card button[type="submit"] { width: 100%; justify-content: center; margin-top: 6px; }
.form-note { font-size: 12px; color: var(--ink-mute); text-align: center; margin-top: 16px; line-height: 1.8; }

.form-done { text-align: center; padding: 24px 8px; }
.form-done .tick {
  width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 16px;
  background: #dcfce7; color: #15803d; display: grid; place-items: center;
}
.form-done .tick svg { width: 30px; height: 30px; }
.form-done h3 { font-size: 20px; font-weight: 800; margin-bottom: 8px; }
.form-done p { font-size: 15px; color: var(--ink-soft); line-height: 1.9; }
.form-alert {
  background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; padding: 12px 16px;
  border-radius: var(--radius); font-size: 13px; font-weight: 600; margin-bottom: 16px;
  text-align: center; display: none;
}
.form-alert.on { display: block; }

/* ─────────── لقطة الترويسة ───────────
   إطار متصفّح بسيط حوالين الصورة — بيخلّي المتفرّج يقرأها كشاشة
   حقيقية مش كصورة تسويقية. */
.erp-hero-shot {
  margin-top: 40px; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .04);
  box-shadow: 0 32px 70px rgba(0, 0, 0, .45);
}
.shot-bar {
  display: flex; align-items: center; gap: 8px; padding: 12px 16px;
  background: rgba(255, 255, 255, .06);
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}
.shot-bar span { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .22); }
.shot-bar span:first-child { background: rgba(240, 132, 12, .6); }
.erp-hero-shot img { display: block; width: 100%; height: auto; }
.erp-hero-shot figcaption {
  padding: 12px 16px; font-size: 12px; font-weight: 600;
  color: rgba(255, 255, 255, .58); text-align: center;
  border-top: 1px solid rgba(255, 255, 255, .08);
}

/* ─────────── شريط اللقطات المتحرك ───────────
   الكروت مكرّرة مرتين في الـ HTML، والحركة بتزحزح الشريط ٥٠٪
   بالظبط — فأول ما النسخة الأولى تخلص تبقى التانية في نفس
   المكان بالضبط، واللفة تبان مستمرة من غير قفزة.

   المسافة بين الكروت بـ margin مش gap عن قصد: مع gap الـ ٥٠٪
   بتقع في نص المسافة فتحصل نطة كل لفة. */
.marquee {
  position: relative; overflow: hidden; padding-block: 6px 10px;
  /* تلاشي على الطرفين عشان الكروت تدخل وتخرج بنعومة مش تتقص فجأة */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.marquee-track {
  display: flex; width: max-content; will-change: transform;
  animation: mq-slide 78s linear infinite;
}
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track,
.marquee.paused .marquee-track { animation-play-state: paused; }
@keyframes mq-slide {
  from { transform: translateX(0); }
  to   { transform: translateX(50%); }
}

.mq {
  position: relative;
  flex: 0 0 auto; width: 460px; margin-inline-end: 20px; margin-block: 0;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}
.mq:hover { border-color: var(--gold); box-shadow: var(--shadow-md); }
.mq img {
  display: block; width: 100%; height: auto;
  border-bottom: 1px solid var(--line);
}
.mq figcaption { padding: 16px 20px; }
.mq figcaption b { display: block; font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.mq figcaption span { font-size: 13px; color: var(--ink-soft); line-height: 1.75; }

/* الكارت كله بيبقى رابط: الرابط الحقيقي في التذييل عشان قارئ الشاشة
   يلاقي نص واضح، و::after بيتمدّد على الكارت كله عشان أي ضغطة في أي
   مكان تشتغل. */
.mq-ask {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 12px; font-size: 13px; font-weight: 600; color: var(--gold);
  transition: gap .2s var(--ease);
}
.mq-ask svg { width: 14px; height: 14px; stroke-width: 2.6; }
.mq-ask::after { content: ''; position: absolute; inset: 0; }
.mq:hover .mq-ask { gap: 10px; }

.marquee-hint {
  text-align: center; font-size: 12px; color: var(--ink-mute);
  font-weight: 600; margin-top: 16px;
}

/* اللي مقفّل الحركة من إعدادات جهازه: الشريط يقف ويبقى قابل للسحب */
@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .marquee-track { animation: none; }
  .marquee-hint { display: none; }
}

/* ═══ المتن على الموبايل ═══
   صفحة ERP فيها ٧٣ عنصر نص بـ ١٣ بكسل. على شاشة ٣٩٠ ده تحت حد
   القراءة المريحة — والزائر اللي جاي من واتساب بيقرأ بإيد واحدة.
   التسميات بتفضل ١٣، بس اللي بيتقرا كجُمَل بيطلع ١٥. */
@media (max-width: 680px) {
  .mod li, .rule span, .pillar-note, .mq figcaption span { font-size: var(--fs-sm); }
}

/* ─────────── الموبايل ─────────── */
@media (max-width: 980px) {
  .pillars, .rules, .erp-form-grid { grid-template-columns: 1fr; }
  .mods { grid-template-columns: repeat(2, 1fr); }
  .pains { grid-template-columns: 1fr; }
  .erp-form-grid { gap: 32px; }
  .mq { width: 320px; }
}
@media (max-width: 680px) {
  .erp-hero { padding: var(--sp-section) 0; }
  .erp-facts { grid-template-columns: repeat(2, 1fr); }
  .mods { grid-template-columns: 1fr; }
  .form-card { padding: 24px 20px; }
  .erp-cta .btn { width: 100%; justify-content: center; }
  .erp-hero-shot { margin-top: 32px; }
  .mq { width: 280px; }
}