/* ============================================================
   صفحة «من نحن» — أفق التقنية (كحلي + ذهبي، خط Zain)
   ============================================================ */
.about-hero {
  position: relative;
  padding: clamp(120px, 16vh, 200px) 0 clamp(60px, 9vh, 110px);
  background: radial-gradient(120% 120% at 82% 8%, #294364 0%, #1F334E 46%, #16273b 100%);
  color: #fff; overflow: hidden; text-align: center;
}
.about-hero::before {
  content: ""; position: absolute; inset: 0; opacity: .06;
  background-image: linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px);
  background-size: 46px 46px; pointer-events: none;
}
.about-hero .container { position: relative; z-index: 2; }
.about-hero .eyebrow {
  display: inline-block; color: var(--secondary-color); font-weight: 800;
  font-size: clamp(15px, 1.4vw, 19px); letter-spacing: .5px; margin-bottom: 14px;
  border: 1.5px solid rgba(242,177,0,.4); padding: 6px 18px; border-radius: 999px;
  background: rgba(242,177,0,.08);
}
.about-hero h1 { font-size: clamp(32px, 5vw, 60px); font-weight: 900; line-height: 1.2; margin: 0 0 18px; }
.about-hero h1 .accent { color: var(--secondary-color); }
.about-hero p { font-size: clamp(17px, 1.7vw, 22px); line-height: 1.9; max-width: 780px; margin: 0 auto; color: rgba(255,255,255,.82); }

/* شريط الإحصائيات */
.about-stats { background: var(--white); }
.about-stats .container {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  margin-top: -46px; position: relative; z-index: 5;
}
.about-stat {
  background: #fff; border-radius: 18px; padding: 26px 18px; text-align: center;
  box-shadow: 0 14px 40px rgba(31,51,78,.12); border: 1px solid rgba(31,51,78,.06);
}
.about-stat .num { font-size: clamp(30px, 3.4vw, 44px); font-weight: 900; color: var(--primary-color); line-height: 1; }
.about-stat .num span { color: var(--secondary-color); }
.about-stat .lbl { font-size: clamp(14px, 1.2vw, 16px); font-weight: 700; color: var(--text-light); margin-top: 8px; }

/* أقسام عامة */
.about-section { padding: clamp(56px, 8vh, 96px) 0; }
.about-section.alt { background: var(--light-bg); }
.about-section .section-head { text-align: center; max-width: 760px; margin: 0 auto 46px; }
.about-section .section-head .kicker { color: var(--secondary-color); font-weight: 800; font-size: 16px; letter-spacing: .4px; }
.about-section .section-head h2 { font-size: clamp(26px, 3.4vw, 40px); font-weight: 900; color: var(--primary-color); margin: 8px 0 14px; line-height: 1.3; }
.about-section .section-head p { font-size: clamp(16px, 1.5vw, 19px); line-height: 1.9; color: var(--text-light); }

/* قصتنا — نص + نقاط */
.about-story { display: grid; grid-template-columns: 1.15fr .85fr; gap: 44px; align-items: center; }
.about-story .story-text p { font-size: clamp(16px, 1.5vw, 19px); line-height: 2; color: var(--text-color); margin: 0 0 18px; }
.about-story .story-text strong { color: var(--primary-color); }
.about-card {
  background: linear-gradient(135deg, var(--primary-color), #16273b); color: #fff;
  border-radius: 22px; padding: 34px 30px; box-shadow: 0 20px 50px rgba(31,51,78,.28);
}
.about-card h3 { font-size: 22px; font-weight: 800; margin: 0 0 18px; display: flex; align-items: center; gap: 10px; }
.about-card ul { list-style: none; margin: 0; padding: 0; }
.about-card li { display: flex; gap: 12px; align-items: flex-start; padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.1); font-size: 16px; line-height: 1.7; }
.about-card li:last-child { border-bottom: none; }
.about-card li .tick {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
  background: var(--secondary-color); color: var(--primary-color);
  display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 14px;
}

/* القيم — شبكة بطاقات */
.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.value-card {
  background: #fff; border-radius: 18px; padding: 30px 26px; box-shadow: 0 10px 34px rgba(0,0,0,.06);
  border: 1px solid rgba(31,51,78,.06); transition: var(--transition);
}
.value-card:hover { transform: translateY(-6px); box-shadow: 0 22px 50px rgba(31,51,78,.14); }
.value-card .ico {
  width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center;
  background: rgba(242,177,0,.15); color: var(--secondary-color); margin-bottom: 18px;
}
.value-card .ico svg { width: 30px; height: 30px; }
.value-card h3 { font-size: 20px; font-weight: 800; color: var(--primary-color); margin: 0 0 10px; }
.value-card p { font-size: 15.5px; line-height: 1.8; color: var(--text-light); margin: 0; }

/* كيف نعمل — خطوات */
.workflow-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.workflow-step { text-align: center; position: relative; }
.workflow-step .step-num {
  width: 58px; height: 58px; border-radius: 50%; margin: 0 auto 16px;
  background: linear-gradient(135deg, var(--secondary-color), #ffcb3d); color: var(--primary-color);
  display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 900;
  box-shadow: 0 8px 22px rgba(242,177,0,.35);
}
.workflow-step h3 { font-size: 18px; font-weight: 800; color: var(--primary-color); margin: 0 0 8px; }
.workflow-step p { font-size: 15px; line-height: 1.7; color: var(--text-light); margin: 0; }

/* CTA */
.about-cta { padding: clamp(56px, 8vh, 90px) 0; }
.about-cta .cta-box {
  background: linear-gradient(135deg, var(--primary-color), #16273b); color: #fff;
  border-radius: 26px; padding: clamp(40px, 6vw, 64px); text-align: center;
  box-shadow: 0 24px 60px rgba(31,51,78,.3); position: relative; overflow: hidden;
}
.about-cta .cta-box::after {
  content: ""; position: absolute; width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle, rgba(242,177,0,.22) 0%, rgba(242,177,0,0) 70%);
  top: -160px; inset-inline-start: -120px;
}
.about-cta h2 { font-size: clamp(26px, 3.4vw, 40px); font-weight: 900; margin: 0 0 14px; position: relative; }
.about-cta p { font-size: clamp(16px, 1.6vw, 20px); line-height: 1.8; color: rgba(255,255,255,.85); max-width: 620px; margin: 0 auto 28px; position: relative; }
.about-cta .cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; position: relative; }
.about-cta .btn-a {
  padding: 14px 30px; border-radius: 999px; font-weight: 800; font-size: 17px; transition: var(--transition);
}
.about-cta .btn-a.primary { background: linear-gradient(135deg, var(--secondary-color), #ffcb3d); color: var(--primary-color); }
.about-cta .btn-a.primary:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(242,177,0,.4); }
.about-cta .btn-a.ghost { border: 2px solid rgba(255,255,255,.4); color: #fff; }
.about-cta .btn-a.ghost:hover { border-color: var(--secondary-color); color: var(--secondary-color); }

/* استجابة */
@media (max-width: 992px) {
  .about-stats .container { grid-template-columns: repeat(2, 1fr); }
  .about-story { grid-template-columns: 1fr; gap: 30px; }
  .values-grid { grid-template-columns: repeat(2, 1fr); }
  .workflow-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .about-stats .container { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .values-grid { grid-template-columns: 1fr; }
  .workflow-grid { grid-template-columns: 1fr; }
}