/* ==========================================================================
   pages/about.css — صفحة من نحن
   ========================================================================== */

body.page-about{
  --gold:#d6a74a;
  --gold2:#f0cb78;
  --ink:#0a0b0b;
  --ink2:#131515;
  --paper:#f6f2eb;
  --paper2:#fffdf9;
  --text:#232323;
  --muted:#6f6b63;
  --line:rgba(214,167,74,.42);
  --container:1180px;

  background:var(--paper);
  color:var(--text);
}

body.page-about main .container{width:min(calc(100% - 32px),1180px);margin:auto}

body.page-about .reveal{transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}

/* ---------- عناصر عامة ---------- */
body.page-about .section{padding:74px 0}

body.page-about .title{text-align:center;margin-bottom:38px}
body.page-about .title h2{font-size:clamp(28px,3vw,42px);font-weight:700}

body.page-about .title span{
  display:block;
  width:58px;
  height:3px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  margin:14px auto 0;
}

body.page-about .btn{
  min-height:48px;
  padding:0 26px;
  border-radius:26px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border:1px solid var(--gold);
  transition:.3s;
}

body.page-about .btn-gold{background:linear-gradient(135deg,var(--gold2),var(--gold));color:#17120a}
body.page-about .btn-outline{color:#fff;border-color:rgba(255,255,255,.7);background:rgba(0,0,0,.24)}
body.page-about .btn:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(0,0,0,.18)}

/* ---------- الواجهة ---------- */
body.page-about .hero{
  min-height:620px;
  position:relative;
  display:flex;
  align-items:center;
  background:
    linear-gradient(to right,rgba(4,5,5,.06) 0%,rgba(4,5,5,.32) 25%,rgba(4,5,5,.6) 50%,rgba(4,5,5,.8) 75%,rgba(4,5,5,.82) 100%),
    url("../../images/about/about-hero.webp") center/cover no-repeat;
}

[dir="ltr"] body.page-about .hero{
  background:
    linear-gradient(to left,rgba(4,5,5,.06) 0%,rgba(4,5,5,.32) 25%,rgba(4,5,5,.6) 50%,rgba(4,5,5,.8) 75%,rgba(4,5,5,.82) 100%),
    url("../../images/about/about-hero.webp") center/cover no-repeat;
}

body.page-about .hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 65% 20%,rgba(214,167,74,.18),transparent 38%);
}

body.page-about .hero-map{
  position:absolute;
  inset:0;
  opacity:.22;
  background:
    radial-gradient(circle at 70% 22%,#d9ab53 0 2px,transparent 3px),
    radial-gradient(circle at 60% 28%,#d9ab53 0 2px,transparent 3px),
    radial-gradient(circle at 78% 32%,#d9ab53 0 2px,transparent 3px);
}

body.page-about .hero-content{position:relative;z-index:2}
body.page-about .hero-copy{max-width:620px}
body.page-about .hero h1{font-size:clamp(42px,6vw,76px);line-height:1.18;color:#fff;margin-bottom:20px;text-shadow:0 2px 14px rgba(0,0,0,.65),0 1px 4px rgba(0,0,0,.85)}
body.page-about .hero p{color:#e2e0d8;font-size:18px;line-height:2;max-width:560px;text-shadow:0 2px 10px rgba(0,0,0,.6),0 1px 3px rgba(0,0,0,.8)}
body.page-about .hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}

/* ---------- من نحن ---------- */
body.page-about .about-split{display:grid;grid-template-columns:1fr 1.1fr;min-height:560px}

body.page-about .about-media{position:relative;overflow:hidden;background:#ddd}
body.page-about .about-media img{height:100%;object-fit:cover}

body.page-about .about-media::after{
  content:"";
  position:absolute;
  left:-16%;
  bottom:-22%;
  width:70%;
  height:48%;
  background:linear-gradient(135deg,var(--gold2),#fff0c6);
  border-radius:50% 50% 0 0;
}

body.page-about .about-card{
  padding:70px 7vw;
  background:var(--paper2);
  display:flex;
  flex-direction:column;
  justify-content:center;
}

body.page-about .about-card h2{font-size:48px;margin-bottom:24px}
body.page-about .about-card p{color:var(--muted);line-height:2.15;margin-bottom:14px;font-size:14px}

body.page-about .about-features{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:36px}
body.page-about .about-feature{text-align:center}

body.page-about .about-feature i{
  width:54px;
  height:54px;
  border:1px solid var(--gold);
  border-radius:50%;
  display:grid;
  place-items:center;
  color:var(--gold);
  font-size:21px;
  margin:0 auto 10px;
}

body.page-about .about-feature span{font-size:11px;color:#6e675d}

/* ---------- الرسالة والرؤية ---------- */
body.page-about .mission-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}

body.page-about .mission-card{
  min-height:300px;
  border-radius:14px;
  border:1px solid var(--line);
  padding:48px;
  position:relative;
  overflow:hidden;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
}

body.page-about .mission-card.dark{background:linear-gradient(135deg,#0d0f0f,#191919);color:#fff}
body.page-about .mission-card.light{background:#fffdf9}

body.page-about .mission-card::after{
  content:"";
  position:absolute;
  left:-30px;
  top:-40px;
  width:130px;
  height:380px;
  border-radius:50%;
  border:16px solid rgba(214,167,74,.45);
  transform:rotate(-25deg);
}

body.page-about .mission-card h3{font-size:30px;margin-bottom:22px;position:relative;z-index:1}
body.page-about .mission-card h3 i{color:var(--gold);margin-right:8px}
body.page-about .mission-card p{position:relative;z-index:1;line-height:2.1;font-size:14px;color:#777168}
body.page-about .mission-card.dark p{color:#cbc9c3}

/* ---------- القيم ---------- */
body.page-about .values{background:#fffaf3}
body.page-about .values-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}

body.page-about .value-card{
  background:rgba(255,255,255,.7);
  border:1px solid var(--line);
  border-radius:10px;
  text-align:center;
  padding:30px 22px;
  min-height:250px;
  transition:.3s;
}

body.page-about .value-card:hover{transform:translateY(-7px);box-shadow:0 14px 32px rgba(0,0,0,.08)}
body.page-about .value-card i{font-size:42px;color:var(--gold);margin-bottom:18px}
body.page-about .value-card h3{font-size:20px;margin-bottom:10px}
body.page-about .value-card p{font-size:12px;color:#766f65;line-height:1.9}

/* ---------- كيف نعمل ---------- */
body.page-about .process{background:linear-gradient(135deg,#0b0d0d,#161818);color:#fff}
body.page-about .process-list{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;position:relative}

body.page-about .process-list::before{
  content:"";
  position:absolute;
  right:8%;
  left:8%;
  top:24px;
  height:1px;
  background:var(--gold);
}

body.page-about .step{text-align:center;position:relative;z-index:1}

body.page-about .step-num{
  width:48px;
  height:48px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--gold2),var(--gold));
  color:#17120a;
  display:grid;
  place-items:center;
  font-weight:700;
  margin:0 auto 18px;
  box-shadow:0 0 0 8px #111414;
}

body.page-about .step i{display:block;color:var(--gold);font-size:42px;margin-bottom:12px}
body.page-about .step h3{color:var(--gold2);font-size:18px;margin-bottom:10px}
body.page-about .step p{color:#c8c7c2;font-size:12px;line-height:1.9}

/* ---------- الحضور العالمي ---------- */
body.page-about .global{background:#fbf8f2}
body.page-about .global-grid{display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:60px}

body.page-about .map{
  height:360px;
  background:
    radial-gradient(circle at 55% 48%,rgba(214,167,74,.22),transparent 7%),
    url("../../images/icons/world-map.svg") center/contain no-repeat;
  filter:sepia(.25);
  opacity:.72;
}

body.page-about .global-copy h2{font-size:42px;line-height:1.35;margin-bottom:20px}
body.page-about .global-copy p{color:var(--muted);line-height:2;font-size:14px}

body.page-about .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:34px}
body.page-about .stat{text-align:center;border-left:1px solid var(--line)}
body.page-about .stat:last-child{border-left:0}
body.page-about .stat strong{display:block;color:var(--gold);font-size:28px}
body.page-about .stat span{font-size:12px;color:#6f685d}

/* ---------- دعوة للتواصل ---------- */
body.page-about .cta{
  padding:70px 0;
  color:#fff;
  background:
    linear-gradient(90deg,rgba(7,8,8,.96),rgba(7,8,8,.72)),
    url("../../images/about/about-cta.webp") center/cover no-repeat;
}

body.page-about .cta .container{display:flex;align-items:center;justify-content:space-between;gap:40px}
body.page-about .cta h2{font-size:42px;margin-bottom:12px}
body.page-about .cta p{color:#cfcec8}

/* ==========================  الاستجابة  ========================== */
@media(max-width:1000px){
  body.page-about .about-features{grid-template-columns:repeat(2,1fr)}
  body.page-about .values-grid{grid-template-columns:repeat(3,1fr)}
}

@media(max-width:820px){
  body.page-about .about-split,
  body.page-about .global-grid{grid-template-columns:1fr}
  body.page-about .about-media{min-height:430px}
  body.page-about .mission-grid{grid-template-columns:1fr}
  body.page-about .process-list{grid-template-columns:repeat(2,1fr)}
  body.page-about .process-list::before{display:none}
  body.page-about .cta .container{flex-direction:column;align-items:flex-start}
}

@media(max-width:600px){
  body.page-about .hero{min-height:660px}
  body.page-about .hero h1{font-size:44px}
  body.page-about .hero-actions{display:grid}
  body.page-about .about-card{padding:50px 24px}
  body.page-about .about-card h2{font-size:38px}
  body.page-about .about-features{grid-template-columns:repeat(2,1fr)}
  body.page-about .values-grid{grid-template-columns:1fr}
  body.page-about .process-list{grid-template-columns:1fr}
  body.page-about .stats{grid-template-columns:repeat(2,1fr)}
  body.page-about .mission-card{padding:34px 26px}
}