/* ====== ألوان داكنة عامة ====== */
:root{
  --bg: linear-gradient(135deg, #0b0f14ff, #0c121bff); /* خلفية متدرجة أنيقة */
  --card:#0f172a;
  --surface:#111826;
  --border:#1f2a3b;
  --text:#e5e7eb;
  --muted:#9aa4b2;
  --accent:#3b82f6;
  --accent2:#8b5cf6;
  --success:#10b981;
  --danger:#ef4444;
  --radius:20px;
  --container:1150px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}
.site-header { display:none !important; }

/* ===== 2. زر الدخول الثابت في اللاندينغ (Fixed Landing Button) ===== */
.landing-login-btn {
    /* التثبيت في الزاوية العلوية اليمنى */
    top: 20px; 
    right: 20px;
    z-index: 9999; /* يضمن ظهوره فوق كل العناصر */
    
    /* المظهر */
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px; 
    border-radius: 999px;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    
    /* 🛑 الألوان (بارز على الخلفية الداكنة) */
    background: #fff; 
    color: var(--card); /* لون النص داكن ليبرز */
    border: 2px solid #fff;
    
    transition: all 0.3s ease;
    box-shadow: 0 8px 20px rgba(0,0,0,0.4); 
}

/* حالة التحويم (Hover State) */
.landing-login-btn:hover {
    background: var(--card); /* يصبح شفافاً أو يأخذ لون الخلفية الداكن */
    color: #fff;
    box-shadow: 0 0 15px rgba(255,255,255,0.4); /* تأثير لمعة خفيفة */
    transform: none !important;
}

.hero-top {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  margin-bottom: 20px;
}

.hero-top img {
  height: 70px;
  object-fit: contain;
}


.hero-logo img {
  height: 100px;   /* اللوقو */
  object-fit: contain;
}

.hero-meta img {
  height: 100px;    /* صورة Meta */
  object-fit: contain;
}
.old-price {
  text-decoration: line-through;
  color: #888;
  margin-left: 8px;
}
.badge {
  font-size: 16px;       /* حجم النص */
  padding: 12px 16px;     /* المساحة الداخلية (ارتفاع/عرض) */
  border-radius: 12px;   /* استدارة الحواف */
  display: inline-block; /* يخليها مثل شارة صغيرة */
  font-weight: bold;     /* خط عريض */
}
.plan h3 {
  font-size: 28px;   /* حجم الخط */
  font-weight: 700;  /* سماكة الخط */
  margin-bottom: 15px; /* مسافة تحت الاسم */
}
.trusted-companies {
  padding: 60px 20px;
  background: linear-gradient(135deg, #000000ff, #1e293b); /* تدرج غامق */
  border-radius: 12px;
  margin: 60px 0;
  box-shadow: 0 8px 30px rgba(0,0,0,0.4); /* ظل أقوى وناعم */
}

.trusted-companies h3 {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 30px;
  color: #fff;
  text-align: center;
}

.logos-slider {
  overflow: hidden;
  position: relative;
  width: 100%;
  margin-top: 20px;
}

.logos-track {
  display: flex;
  gap: 60px;
  white-space: nowrap;
  direction: ltr !important; /* avoid RTL affecting transform */
}

.logos-track img {
  height: 60px;
  opacity: 0.7;
  transition: 0.3s;
}

.logos-track img:hover {
  opacity: 1;
  transform: scale(1.05);
}


.card.bullet {
  transition: all 0.3s ease;
}

.card.bullet:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

/* ========================== */
/* 📱 الفرق بين شات بوت وذكاء روّاد */
/* ========================== */

.compare-section .title {
  text-align: center;
  margin-bottom: 10px;
}
.compare-section .sub {
  text-align: center;
  margin-bottom: 35px;
  font-size: 18px;
  color: var(--muted);
}

/* الكروت */
.compare-cards {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
}

.compare-card {
  flex: 1 1 45%;
  max-width: 420px;
  background: #111827;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
}

.compare-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.35);
}

.compare-card h3 {
  text-align: center;
  margin: 15px 0;
  font-size: 20px;
  color: var(--text);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
.compare-card h3 i {
  font-size: 20px;
}

/* ألوان الأيقونات */
.bot-icon { color: #9ca3af; }
.rowad-icon { color: #4b4c74ff; }

/* الميزات والعيوب */
.card-features {
  background: #0f172a;
  margin: 0;
  padding: 15px 20px;
  list-style: none;
}

.card-features li {
  font-size: 15px;
  margin: 8px 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
}

.bad-list i { color: #ef4444; }
.good-list i { color: #10b981; }

/* تمييز كارد ذكاء رواد */
.compare-card.highlight {
  border: 2px solid #00c8ff;
  box-shadow: 0 0 18px rgba(0, 200, 255, 0.3);
  transform: scale(1.02);
  z-index: 1;
}

/* إطار آيفون */
.iphone-frame {
  position: relative;
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  border: 14px solid #111;
  border-radius: 40px;
  background: #000;
  box-shadow: 0 12px 30px rgba(0,0,0,0.45);
  overflow: hidden;
}

.iphone-frame .lottie-box {
  width: 100%;
  height: 600px;
  background: #fff;
  border-radius: 28px;
  overflow: hidden;
}

/* النوتش */
.iphone-notch {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 26px;
  background: #111;
  border-radius: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
}
.iphone-notch .camera {
  width: 10px;
  height: 10px;
  background: #1e3a8a;
  border-radius: 50%;
}
.iphone-notch .sensor {
  width: 6px;
  height: 6px;
  background: #333;
  border-radius: 50%;
}

/* ========================== */
/* 📱 RESPONSIVE للجوال والتابلت */
/* ========================== */
@media (max-width: 1024px) {
  .compare-cards {
    gap: 20px;
  }
  .compare-card {
    flex: 1 1 100%;
    max-width: 360px;
  }
  .compare-card h3 {
    font-size: 18px;
  }
  .iphone-frame .lottie-box {
    height: 520px;
  }
}

@media (max-width: 640px) {
  .compare-section .sub {
    font-size: 16px;
    margin-bottom: 25px;
  }

  .compare-cards {
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }

  .compare-card {
    width: 100%;
    max-width: 300px;
    transform: none;
  }

  .compare-card.highlight {
    transform: none;
    box-shadow: 0 0 10px rgba(0, 200, 255, 0.25);
  }

  .iphone-frame {
    max-width: 260px;
    border-width: 10px;
    border-radius: 32px;
  }

  .iphone-frame .lottie-box {
    height: 480px;
  }

  .iphone-notch {
    width: 90px;
    height: 22px;
  }
}


/* ===== WHY US (Professional) ===== */
.why-us { padding: 64px 0; }
.why-us .head .subtitle { color: var(--muted); margin-top: 6px; }

.why-us .badges {
  display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; padding: 0; list-style: none;
}
.why-us .badges li {
  background: rgba(255,255,255,0.06);
  color: #cbd5e1;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 13px; display: inline-flex; align-items: center; gap: 8px;
}

.why-us .layout {
  display: grid; gap: 24px; grid-template-columns: 1.2fr .8fr; margin-top: 28px;
}
@media (max-width: 1024px){ .why-us .layout { grid-template-columns: 1fr; } }

/* Feature cards */
.why-us .features {
  display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 640px){ .why-us .features { grid-template-columns: 1fr; } }

.why-us .feature {
  background: linear-gradient(180deg, var(--card), #0d1422);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 18px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  position: relative;
}
.why-us .feature:hover {
  transform: translateY(-4px);
  border-color: color-mix(in oklab, var(--accent) 60%, var(--border));
  box-shadow: 0 12px 24px rgba(0,0,0,.25);
}
.why-us .feature .ico {
  width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center; margin-bottom: 10px;
  background: radial-gradient(120% 120% at 30% 30%, color-mix(in oklab, var(--accent) 45%, transparent) 0%, transparent 70%);
  border: 1px solid var(--border);
}
.why-us .feature .ico i { font-size: 18px; color: #fff; }
.why-us .feature h3 { font-size: 18px; color: #fff; margin: 6px 0 6px; }
.why-us .feature p { color: #cbd5e1; font-size: 14px; line-height: 1.7; }

/* Insight card */
.why-us .insight {
  background: linear-gradient(135deg, #0f172a, #0b1220);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 18px;
  box-shadow: var(--shadow);
}
.why-us .insight-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px;
}
.why-us .insight-head h4 { margin: 0; color: #fff; font-size: 16px; }
.why-us .insight-head .period {
  font-size: 12px; color: #a3aab5; background: rgba(255,255,255,0.06);
  border: 1px solid var(--border); border-radius: 999px; padding: 4px 10px;
}

/* KPIs */
.why-us .kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 10px 0 14px; }
.why-us .kpi {
  background: rgba(255,255,255,0.04); border: 1px solid var(--border);
  border-radius: 14px; padding: 10px; text-align: center;
}
.why-us .kpi-val { color: #fff; font-weight: 800; font-size: 16px; }
.why-us .kpi-label { color: #a3aab5; font-size: 12px; margin-top: 4px; }

/* Issues bars */
.why-us .issues { display: grid; gap: 10px; }
.why-us .issues .row { display: grid; grid-template-columns: 1fr auto 52px; align-items: center; gap: 10px; }
.why-us .issues .label { color: #e5e7eb; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.why-us .issues .bar {
  height: 10px; background: rgba(255,255,255,0.06); border: 1px solid var(--border);
  border-radius: 999px; overflow: hidden; position: relative;
}
.why-us .issues .bar span {
  display: block; height: 100%; width: calc(var(--p)*1%); 
  background: linear-gradient(90deg, var(--accent), color-mix(in oklab, var(--accent) 60%, #00ffd0));
}
.why-us .issues .val { color: #cbd5e1; font-size: 12px; text-align: end; }

.why-us .note { color: #8f9bad; font-size: 12px; margin-top: 12px; }

/* ====== كيف يعمل؟ ====== */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 30px;
}
@media (max-width: 768px) {
  .steps-grid {
    grid-template-columns: 1fr;
  }
}
.step {
  text-align: center;
  padding: 20px;
  background: linear-gradient(180deg, var(--card), #0d1422);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
  transition: transform .3s ease, box-shadow .3s ease;
}
.step:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 12px 25px rgba(0,0,0,.4);
}
.step-number {
  font-size: 28px;
  font-weight: 900;
  color: var(--accent);
  background: #0c1320;
  border: 2px solid var(--accent);
  border-radius: 50%;
  width: 64px;
  height: 64px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 15px;
}

/* ====== رضا مرتفع ودعم لا ينقطع ====== */
.section-satisfaction {
  padding: 48px 0;
}

.section-satisfaction .cards {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1024px) {
  .section-satisfaction .cards {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .section-satisfaction .cards {
    grid-template-columns: 1fr;
  }
}

.section-satisfaction .card {
  background: #0c1320;
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 0 0 rgba(255,255,255,0);
  padding: 26px;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  z-index: 1;
}

.section-satisfaction .card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 0 25px rgba(255, 255, 255, 0.25); /* Glow أبيض */
  z-index: 10;
}

.section-satisfaction .icon {
  width: 60px;
  height: 60px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: #fff;
  margin: 0 auto 15px;
}

/* ألوان الأيقونات */
.section-satisfaction .icon.green  { background: linear-gradient(135deg, #22c55e, #16a34a); }
.section-satisfaction .icon.blue   { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.section-satisfaction .icon.purple { background: linear-gradient(135deg, #a855f7, #7e22ce); }

.section-satisfaction .big {
  font-size: 32px;
  font-weight: 900;
  margin-bottom: 6px;
  color: #fff;
}

.section-satisfaction .muted {
  font-size: 14px;
  color: var(--muted);
}


/* قسم الأتمتة */
.automation-section {
  background: linear-gradient(135deg, #000000c4, #162741e3); /* أزرق غامق */
  padding: 60px 0;
  color: #e0e0e0; /* نصوص فاتحة */
}

.automation-section .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 40px;
}

.automation-box {
  flex: 1;
  min-width: 320px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.automation-wrapper {
  background: #26303bff; /* مربع غامق */
  border-radius: 20px;
  padding: 30px;
  width: 420px;
  height: 420px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}

#automation-animation {
  width: 100%;
  height: 100%;
}

.automation-text {
  flex: 1;
  min-width: 320px;
}

.automation-text h2 {
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 20px;
  color: #ffffff; /* العنوان أبيض */
}

.automation-text p {
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 15px;
  color: #d5d5d5; /* نص رمادي فاتح */
}

/* Responsive */
@media (max-width: 768px) {
  .automation-section .container {
    flex-direction: column;
    text-align: center;
  }

  .automation-wrapper {
    width: 300px;
    height: 300px;
  }
}

/* النصوص الأساسية */
body, p, span, li, a {
  font-family: 'IBM Plex Sans Arabic', sans-serif;
  font-weight: 400;
}

/* العناوين */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Cairo', sans-serif;
  font-weight: 700;
}
.tick i {
  font-size: 20px;
  color: #ef4444; /* أحمر */
}
.bad-list li, .good-list li {
  list-style: none;
  margin: 10px 0;
  font-size: 16px;
}

.bad-list i {
  color: #ef4444; /* أحمر للخسارة */
  margin-left: 8px;
}

.good-list i {
  color: #10b981; /* أخضر للصح */
  margin-left: 8px;
}
.icon {
  width: 60px;
  height: 60px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: #fff;
  margin: 0 auto 15px;
}

.icon.green {
  background: linear-gradient(135deg, #22c55e, #16a34a); /* أخضر */
}
.icon.blue {
  background: linear-gradient(135deg, #3b82f6, #2563eb); /* أزرق */
}
.icon.purple {
  background: linear-gradient(135deg, #a855f7, #7e22ce); /* بنفسجي */
}
.icon {
  width: 60px;
  height: 60px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: #fff;
  margin: 0 auto 15px;
}

/* نفس أسماء HTML */
.icon.green {
  background: linear-gradient(135deg, #22c55e, #16a34a); /* أخضر */
}

.icon.purple {
  background: linear-gradient(135deg, #a855f7, #7e22ce); /* بنفسجي */
}

.icon.orange {
  background: linear-gradient(135deg, #f97316, #ea580c); /* برتقالي */
}

.icon.blue {
  background: linear-gradient(135deg, #3b82f6, #2563eb); /* أزرق */
}

/* تنسيق الأيقونة نفسها (الفونت) */
.icon i {
  font-size: 22px;
  color: #fff;
}


.landing{direction:rtl;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial}
body, .landing{background:var(--bg); color:var(--text)}
.wrap{max-width:var(--container);margin:0 auto;padding:0 18px}

/* نخفي العنوان الافتراضي ونضيف لوجو بدل rowadai (نقطة 1) */
.site-title{display:none !important}
.site-header{background:linear-gradient(180deg,#0b0f14,#0b0f14f2);border-bottom:1px solid var(--border)}
.brand-injected img{
  height:75px;
  max-height:75px;
}
.site-header .inner{gap:16px}

/* أزرار عامة */
.btn{display:inline-block;padding:12px 18px;border-radius:999px;font-weight:800;text-decoration:none}
.btn.primary{background:var(--accent);color:#fff}
.btn.try{background:#458642;color:#fff}
.btn.ghost{background:transparent;border:1px solid var(--border);color:#fff}
.btn.success{background:var(--accent);color:#fff}
.btn:hover{opacity:.95}
/* زر المؤسسات فقط */
.btn.enterprise-btn {
  background: linear-gradient(135deg, #f59e0b, #d97706); /* ذهبي */
  color: #fff;
  border: none;
  font-weight: 700;
  padding: 12px 24px;
  border-radius: 10px;
  transition: all 0.3s ease;
}

.btn.enterprise-btn:hover {
  background: linear-gradient(135deg, #d97706, #b45309); /* أغمق عند الهوفر */
  transform: translateY(-2px);
}

/* ====== HERO ====== (نقطة 2 + 3) */
.hero{padding:64px 0 40px;background:
    radial-gradient(1200px 400px at 50% -20%, rgba(59,130,246,.25), transparent 60%),
    radial-gradient(900px 300px at 100% 0%, rgba(139,92,246,.18), transparent 60%)}
.hero .eyebrow{color:var(--accent);font-weight:800;letter-spacing:-.2px;margin-bottom:8px}
.hero h1{margin:8px 0 10px;font-weight:900;letter-spacing:-.8px;line-height:1.1;
  font-size:clamp(30px,6vw,56px)}
.hero .typed{color:var(--accent2)}
.hero p{color:var(--muted);font-size:18px;line-height:1.9;max-width:780px;margin:8px auto 18px}
.hero .hook{font-size:20px;font-weight:900;color:#fff;margin:6px auto 18px}
.cta-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.hero .wrap{
  text-align:center;
  display:grid;
  justify-items:center;} /* يوسّط العناصر البلوكية مثل h1 */
/* ====== ميزات / خسارة العملاء (نقطة 4) ====== */

/* القسم */
.section {
  padding: 48px 0;
}

/* العنوان الرئيسي */
.title {
  font-weight: 900;
  font-size: clamp(24px, 4.5vw, 38px);
  text-align: center;
  margin: 0 0 8px;
}

/* العنوان الفرعي */
.sub {
  color: var(--muted);
  text-align: center;
  max-width: 820px;
  margin: 0 auto 24px;
  line-height: 1.9;
}

/* شبكة الكروت */
.cards {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, 1fr);
}

/* الاستجابة للشاشات */
@media (max-width: 1024px) {
  .cards {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .cards {
    grid-template-columns: 1fr;
  }
}

/* الكرت */
.card {
  background: linear-gradient(180deg, var(--card), #0d1422);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow);
  padding: 20px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* تأثير عند hover */
.card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}

/* الأيقونة داخل الكرت */
.card .icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  margin-bottom: 8px;
  color: #fff;
  font-size: 20px;
}

/* ألوان الأيقونات */
.loss-card .icon.red {
  background: linear-gradient(135deg, #ef4444, #f97316);
}
.loss-card .icon.blue {
  background: linear-gradient(135deg, #2563eb, #3b82f6);
}
.loss-card .icon.purple {
  background: linear-gradient(135deg, #7c3aed, #a855f7);
}

/* عنوان الكرت */
.card h3 {
  margin: 6px 0 8px;
  font-size: 18px;
}

/* نصوص ثانوية */
.muted {
  color: var(--muted);
}

/* النص الكبير */
.big {
  font-size: 30px;
  font-weight: 900;
}


/* ====== لماذا روّاد مختلف (نقطة 5) ====== */
.bullet {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: #0c1320;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

/* تأثير الهوفر */
.bullet:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* أيقونة الصح */
.feature-card .tick i {
  color: var(--success);
  font-size: 22px;
  transition: transform 0.3s ease;
}
.feature-card:hover .tick i {
  transform: scale(1.2) rotate(-5deg);
  color: #16f2b3;
}


/* حركة الأيقونة عند الهوفر */
.bullet:hover .tick {
  transform: scale(1.2) rotate(-5deg);
}


/* ====== الأرقام تتحدث (نقطة 9) ====== */
.stats {
  padding: 48px 0; /* مسافة علوية وسفلية للقسم */
}

.stat-card {
  background: #0c1320;              /* خلفية الكرت */
  border: 1px solid var(--border);  /* حدود خفيفة */
  border-radius: 20px;              /* زوايا ناعمة */
  box-shadow: var(--shadow);        /* ظل أنيق */
  padding: 22px;                    /* مسافة داخلية */
  text-align: center;               /* محاذاة المحتوى للوسط */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

.stat-card:hover {
  transform: translateY(-8px) scale(1.02); /* حركة عند الهوفر */
  box-shadow: 0 0 25px rgba(255, 255, 255, 0.25);
  z-index: 10; /* يخلي الكرت المحدد فوق البقية */
}

.stat-card .value {
  font-size: 38px;
  font-weight: 900;
  margin-bottom: 6px;
  color: #fff;
}

.stat-card .label {
  font-weight: 800;
  font-size: 18px;
  margin-bottom: 4px;
  color: var(--accent);
}

.stat-card .desc {
  color: var(--muted);
  line-height: 1.9;
  font-size: 14px;
}
/* ====== الاسألة الشائعة ====== */
.faq-items {
  display: grid;
  gap: 16px;
}
.faq-item {
  background: #0c1320;
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
}
.faq-question{
  width:100%;
  background:none;
  border:none;
  color:var(--text);
  font-size:18px;
  font-weight:700;
  text-align:right;
  padding:16px 20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  cursor:pointer;
}
.faq-question i{ transition: transform .3s; }

.faq-item.active .faq-question i{ transform: rotate(180deg); }

/* انتقال سلس */
.faq-answer{
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
  padding: 0 20px 0; /* نحافظ على الهوامش بدون ما تفتح المساحة */
}
.faq-item.active .faq-answer{
  /* اختياري: لما تكون مفتوحة نخلي بس padding سفلي */
  padding-bottom: 16px;
}

/*جرب رواد على التواصل الاجتماعي*/
.dark-bg {
  background: #0a0f1a; /* استبدل بنفس الكود اللوني لقسم +400 شركة إذا مختلف */
  color: #fff;
}

/* العنوان */
.dark-bg .social-title {
  font-size: 28px;
  margin-bottom: 15px;
  color: #fff;
  font-weight: 700;
}

/* مركزية النصوص */
.social-section .social-title,
.social-section .social-subtitle {
  text-align: center;
}

/* الوصف */
.dark-bg .social-subtitle {
  color: #ccc;
  max-width: 600px;
  margin: 0 auto 30px;
  font-size: 16px;
}

/* الأزرار */
.social-section .btn-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 30px;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  text-align: center;
  min-width: 160px;  /* نفس العرض لكل الأزرار */
  height: 50px;      /* نفس الارتفاع */
}

/* واتساب */
.dark-bg .btn-social.whatsapp {
  background-color: #25D366;
}
.dark-bg .btn-social.whatsapp:hover {
  background-color: #20b955;
}

/* تليجرام */
.social-section .btn-social.telegram {
  background-color: #0088cc;
}
.social-section .btn-social.telegram:hover {
  background-color: #0077b3;
}

/* ماسنجر */
.social-section .btn-social.messenger {
  background-color: #006AFF;
}
.social-section .btn-social.messenger:hover {
  background-color: #0057d6;
}


/* إنستغرام */
.dark-bg .btn-social.instagram {
  background: linear-gradient(45deg, #f58529, #dd2a7b, #8134af, #515bd4);
}
.dark-bg .btn-social.instagram:hover {
  opacity: 0.85;
}

/* ====== شات تجريبي (نقطة 7) ====== */
.chat{display:grid;grid-template-columns:1.1fr .9fr;gap:16px}
@media (max-width:900px){.chat{grid-template-columns:1fr}}
.chatbox{background:#0c1320;border:1px solid var(--border);border-radius:20px;overflow:hidden}
.chat-header{padding:12px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px}
.dot{width:8px;height:8px;border-radius:50%;background:#34d399}
.chat-body{height:360px;overflow:auto;padding:14px;display:flex;flex-direction:column;gap:10px}
.msg{max-width:80%;padding:10px 12px;border-radius:14px;line-height:1.7}
.msg.user{align-self:flex-end;background:#21304a;color:#dbeafe}
.msg.bot{align-self:flex-start;background:#0a1a2f;border:1px solid var(--border)}
.chat-input{display:flex;gap:8px;padding:12px;border-top:1px solid var(--border);background:#0c1320}
.chat-input input{flex:1;background:#0a1220;border:1px solid var(--border);border-radius:10px;padding:10px;color:#fff}
.chat-input button{min-width:92px}

/* ====== الباقات ====== */
.section-pricing {
  padding: 60px 0;
}

.pricing {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 30px; /* مسافة قبل المؤسسات */
}

@media (max-width: 1024px) {
  .pricing { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .pricing { grid-template-columns: 1fr; }
}
/* تصميم كل خطة */
.plan {
  background: linear-gradient(180deg, var(--card), #0d1422);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow);
  padding: 24px;
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.plan ul.features {
  list-style: none; /* إزالة نقاط القائمة الافتراضية */
  padding: 0;
  margin-bottom: 20px; /* مسافة قبل الزر CTA */
  
  /* 🛑 الخاصية الحاسمة: تجعل القائمة تتمدد وتملأ المساحة */
  flex-grow: 1; 
}
.plan:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 25px rgba(255,255,255,0.1);
}
.plan h3 {
  font-size: 24px;
  font-weight: 900;
  margin-bottom: 6px;
  color: #fff;
}
.badge-sub {
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  margin-bottom: 15px;
}

/* المؤسسات (عرض كامل) */
.plan.enterprise {
  grid-column: 1 / -1; /* تمتد كامل الصف */
  text-align: center;
  background: linear-gradient(135deg, #1e293b, #0f172a);
  border: 2px solid var(--accent);
}
.plan.enterprise h3 {
  font-size: 26px;
  color: #fff;
  margin-bottom: 8px;
}
/* تمييز باقة النمو (الأكثر طلباً) */
.plan.growth.popular {
  border: 2px solid #00c8ffff; /* إطار بلون مميز */
  box-shadow: 0 0 20px rgba(0, 255, 204, 0.25); /* ظل متوهج */
  transform: scale(1.05); /* تكبير بسيط */
  z-index: 1; /* تخليها فوق الباقي */
}

/* عند المرور عليها بالفأرة */
.plan.growth.popular:hover {
  transform: scale(1.08); 
  box-shadow: 0 0 30px rgba(0, 255, 204, 0.4);
}

/* العلامة "الأكثر طلباً" */
.plan.growth.popular .popular-tag {
  position: absolute;
  top: -14px;
  right: 20px;
  background: #00aaffff;
  color: #000;
  font-size: 14px;
  font-weight: bold;
  padding: 6px 14px;
  border-radius: 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

/* ======== الأسعار ======== */
.plan .price {
  font-size: 40px;       /* كبر الرقم */
  font-weight: 800;      /* يخلي الخط سميك */
  color: #dbdde0ff;        /* لون مميز (ممكن تخليه أبيض أو لون الهوية) */
  margin: 15px 0;
}

/* السعر القديم (قبل الخصم) */
.plan .price .old {
  font-size: 18px;
  color: #9C1A15;
  text-decoration: line-through;
  margin-right: 8px;
}

/* السعر الجديد (بعد الخصم) */
.plan .price .new {
  font-size: 44px;       /* أكبر من السعر القديم */
  font-weight: 900;
  color: #ffffffdb;   /* لون ملفت */
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap; /* يمنع كسر السطر */
}
/* شارة نسبة الخصم */
.discount-badge{
  position:absolute;
  top:-12px;
  inset-inline-end: 16px;       /* يدعم RTL و LTR */
  padding:6px 12px;
  border-radius:9999px;
  font-weight:700;
  font-size:0.9rem;
  background:#10b9811a;
  border:1px solid #10b981;
  color:#d1fae5;
  backdrop-filter:blur(6px);
}
.plan{ position:relative; }      /* لضبط تموضع الشارة */

.fa-check { color: #22c55e; margin-left: 6px; }  /* أخضر */
.fa-xmark { color: #ef4444; margin-left: 6px; } /* أحمر */
.fa-crown { color: gold; }

.sar-icon {
  width: 20px;
  height: 20px;
  display: inline-block;         /* يجعل الصورة تتماشى مع النص */
  vertical-align: middle;        /* يحاذيها مع الرقم بالضبط */
  margin-inline-start: 6px;      /* مسافة صغيرة بعد الرقم */
  margin-inline-end: 4px;
  filter: brightness(0) invert(1); /* يجعلها بيضاء للخلفيات الداكنة */
  opacity: 0.95;
  position: relative;
  top: -2px;                     /* ✨ لتعديل طفيف للأسفل */
}
.sar-wrap{
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

/* قسم من نحن */
.about-card {
  max-width: 800px;
  margin: 0 auto;
  padding: 40px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  text-align: center;
}
.about-card p {
  font-size: 18px;
  line-height: 2;
  margin-bottom: 0;
}
.about-card p:first-child {
  margin-bottom: 20px;
}
.about-us {
  opacity:0;transform:translateY(30px);transition:.6s
}
.about-card .sub {
  margin-bottom: 18px;   /* مسافة أسفل كل فقرة */
  line-height: 1.8;      /* ارتفاع السطر لزيادة الراحة */
}

.about-card ul.sub li {
  margin-bottom: 10px;   /* مسافة بين كل عنصر في القائمة */
  line-height: 1.8;
}

/* رؤيتنا, مهمتنا, قوتنا */
.vm-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}
@media (max-width: 1024px) {
  .vm-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .vm-grid {
    grid-template-columns: 1fr;
  }
}
.vm-card {
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.vm-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}
.vm-icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  background: var(--accent);
  color: #fff;
  font-size: 22px;
  display: grid;
  place-items: center;
  margin: 0 auto 12px;
}
.vm-icon i {
  color: #fff;
}
.vm-card h3 {
  font-size: 20px;
  margin-bottom: 8px;
  text-align: center;
}
.vm-card p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.7;
}
/* زر التبديل شهري/سنوي */
/* 🟢 (الستايل الجديد) - حاوية المفتاح الجديد */
.toggle-switch-container {
    display: flex;
    align-items: center;
    justify-content: center; 
    gap: 15px; 
    margin: 20px 0 30px; 
    color: var(--text); 
    font-weight: 700;
}

/* The switch - the box around the slider */
.switch {
  font-size: 17px;
  position: relative;
  display: inline-block;
  width: 3.5em;
  height: 2em;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: var(--surface); /* استخدام متغير القالب للخلفية */
  border-radius: 50px;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.215, 0.610, 0.355, 1);
  border: 1px solid var(--border); /* إضافة حدود المفتاح */
}

.slider:before {
  position: absolute;
  content: "";
  height: 1.4em;
  width: 1.4em;
  right: 0.3em;
  bottom: 0.3em;
  transform: translateX(150%);
  background-color: var(--success); /* لون التفعيل (الأخضر/الأزرق) */
  border-radius: inherit;
  transition: all 0.4s cubic-bezier(0.215, 0.610, 0.355, 1);
}

.slider:after {
  position: absolute;
  content: "";
  height: 1.4em;
  width: 1.4em;
  left: 0.3em;
  bottom: 0.3em;
  background-color: var(--muted); /* لون عدم التفعيل (الرمادي) */
  border-radius: inherit;
  transition: all 0.4s cubic-bezier(0.215, 0.610, 0.355, 1);
}

.switch input:focus + .slider {
  box-shadow: 0 0 1px var(--success);
}

.switch input:checked + .slider:before {
  transform: translateY(0);
}

.switch input:checked + .slider::after {
  transform: translateX(-150%);
}

/* تذييل */
.section + .section{border-top:1px solid var(--border)}

/* تأثير ظهور ناعم عند السكول (أضفته بدون حذف أي شيء) */
.title,.sub,.card,.bullet,.stat-card,.chatbox,.plan,.step,.faq-item,.logos-grid img,.about-us,.vm-card{opacity:0;transform:translateY(30px);transition:.6s}
.show{opacity:1 !important;transform:translateY(0) !important}
.plan .btn-yearly { display: none !important; }