/* =========================================================
   about.css — صفحه‌ی «درباره ما»
   پس‌زمینه‌ی روشن در کل صفحه (به‌جز فوتر که تیره می‌ماند)،
   دقیقاً هم‌راستا با project.css / articles.css / contact.css
   ========================================================= */

.about-body{
  background:var(--c-mist) !important;
  color:#16302f;
}
.about-body .site-footer{
  background:var(--c-ink);
  color:var(--c-mist);
}

.about-page{
  position:relative; z-index:2;
}

/* ---------------------------------------------------------
   عناصر مشترک بین بخش‌های جدید این صفحه
--------------------------------------------------------- */
.about-eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.78rem; font-weight:800; color:var(--c-teal);
  background:rgba(12,141,141,.09);
  padding:.4rem 1.1rem; border-radius:999px; letter-spacing:.02em;
  margin-bottom:1.1rem;
}
.about-eyebrow::before{
  content:""; width:6px; height:6px; border-radius:50%; background:var(--c-teal);
}

/* ---------------------------------------------------------
   ۱) هیرو
--------------------------------------------------------- */
.about-hero{
  max-width:680px; margin:0 auto; padding:3.2rem 5vw 1rem; text-align:center;
}
.about-hero-title{
  font-family:var(--font-display); font-weight:900;
  font-size:clamp(1.9rem, 4.6vw, 3rem); line-height:1.35;
  color:var(--c-ink); margin:0 0 .9rem;
}
.about-hero-title em{
  font-style:normal; color:var(--c-teal);
}
.about-hero-sub{
  color:#4f7373; font-size:1rem; line-height:1.9; margin:0 auto;
  max-width:520px;
}

/* ---------------------------------------------------------
   ۲) چرا این کار را شروع کردیم
--------------------------------------------------------- */
.about-why{ padding:4.5rem 5vw 1rem; max-width:1180px; margin:0 auto; }
.about-why-head{ text-align:center; max-width:600px; margin:0 auto 3rem; }
.about-why-head .about-eyebrow{ display:inline-flex; }
.about-why-title{
  font-family:var(--font-display); font-weight:900;
  font-size:clamp(1.6rem, 3.6vw, 2.3rem); color:var(--c-ink); margin:0 0 .7rem;
}
.about-why-sub{ color:#4f7373; font-size:.95rem; line-height:1.85; margin:0; }

.about-why-grid{
  display:grid; grid-template-columns:1fr; gap:1.1rem;
}
@media (min-width:700px){ .about-why-grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:1050px){ .about-why-grid{ grid-template-columns:repeat(4, 1fr); } }

.about-why-card{
  background:#fff; border:1px solid rgba(12,84,84,.08); border-radius:20px;
  padding:1.8rem 1.5rem; text-align:right;
  box-shadow:0 22px 45px -34px rgba(12,84,84,.35);
  transition:transform .35s var(--ease-signature), box-shadow .35s ease;
}
.about-why-card:hover{ transform:translateY(-6px); box-shadow:0 30px 55px -30px rgba(12,84,84,.3); }
.about-why-num{
  font-family:var(--font-display); font-weight:900; font-size:.85rem;
  color:var(--c-cyan-2); background:var(--c-ink);
  width:34px; height:34px; border-radius:10px;
  display:flex; align-items:center; justify-content:center; margin:0 0 1.1rem auto;
}
.about-why-card h3{
  font-family:var(--font-display); font-weight:800; font-size:1.08rem;
  color:var(--c-ink); margin:0 0 .55rem;
}
.about-why-card p{ color:#4f7373; font-size:.88rem; line-height:1.85; margin:0; }

/* ---------------------------------------------------------
   ۳) چی شد این شرکت تاسیس شد (روایت + عکس)
--------------------------------------------------------- */
.about-founding{ padding:5rem 5vw; max-width:1180px; margin:0 auto; }
.about-founding-grid{
  display:flex; flex-direction:column-reverse; gap:2.2rem;
  background:#fff; border-radius:28px; overflow:hidden;
  box-shadow:0 30px 60px -40px rgba(12,84,84,.35);
}
@media (min-width:900px){
  .about-founding-grid{ flex-direction:row; align-items:stretch; min-height:460px; }
}

.about-founding-media{
  position:relative; min-height:260px; overflow:hidden;
}
.about-founding-media img{
  width:100%; height:100%; object-fit:cover; min-height:260px;
}
.about-founding-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(12,84,84,.55) 0%, transparent 45%);
}
.about-founding-badge{
  position:absolute; z-index:2; bottom:1rem; right:1rem;
  background:rgba(255,255,255,.92); color:var(--c-deep);
  font-size:.78rem; font-weight:800; padding:.45rem 1rem; border-radius:12px;
}
@media (min-width:900px){ .about-founding-media{ width:42%; min-height:auto; } }

.about-founding-body{ padding:2.2rem 2rem 2.4rem; display:flex; flex-direction:column; justify-content:center; }
@media (min-width:900px){ .about-founding-body{ width:58%; padding:3rem 3.4rem; } }

.about-founding-quote{
  font-family:var(--font-display); font-weight:800; font-size:clamp(1.15rem, 2.3vw, 1.55rem);
  line-height:1.7; color:var(--c-ink); margin:0 0 1.3rem; position:relative;
  padding-inline-end:1.1rem; border-inline-end:3px solid var(--c-teal);
}
.about-founding-p{ color:#4f7373; font-size:.95rem; line-height:1.9; margin:0 0 1rem; }
.about-founding-signee{ display:flex; align-items:center; gap:.7rem; margin-top:1.2rem; }
.about-founding-signee-name{ font-weight:800; color:var(--c-ink); font-size:.9rem; }
.about-founding-signee-role{ color:var(--c-teal); font-size:.78rem; }

/* ---------------------------------------------------------
   ۴) تاریخچه — تایم‌لاین عمودی
--------------------------------------------------------- */
.about-timeline{ padding:5rem 5vw; max-width:900px; margin:0 auto; }
.about-timeline-head{ text-align:center; max-width:600px; margin:0 auto 3.5rem; }
.about-timeline-title{
  font-family:var(--font-display); font-weight:900;
  font-size:clamp(1.6rem, 3.6vw, 2.3rem); color:var(--c-ink); margin:0 0 .7rem;
}
.about-timeline-sub{ color:#4f7373; font-size:.95rem; line-height:1.85; margin:0; }

.about-timeline-list{ position:relative; list-style:none; margin:0; padding:0; }
.about-timeline-list::before{
  content:""; position:absolute; top:6px; bottom:6px; right:23px;
  width:2px; background:linear-gradient(180deg, var(--c-teal), rgba(12,141,141,.15));
}
@media (min-width:760px){ .about-timeline-list::before{ right:50%; } }

.about-timeline-item{
  position:relative; padding-inline-end:4.2rem; margin-bottom:2.4rem;
  opacity:0; transform:translateY(18px);
  transition:opacity .7s var(--ease-signature), transform .7s var(--ease-signature);
}
.about-timeline-item.is-visible{ opacity:1; transform:translateY(0); }

.about-timeline-node{
  position:absolute; top:0; right:14px; width:20px; height:20px; border-radius:50%;
  background:#fff; border:3px solid var(--c-teal); z-index:1;
}
@media (min-width:760px){
  .about-timeline-item{ width:50%; padding-inline-end:0; padding-inline-start:0; }
  .about-timeline-item:nth-child(odd){ margin-inline-start:auto; padding-inline-start:3.4rem; text-align:right; }
  .about-timeline-item:nth-child(even){ margin-inline-end:auto; padding-inline-end:3.4rem; text-align:left; }
  .about-timeline-item:nth-child(odd) .about-timeline-node{ right:auto; left:-10px; }
  .about-timeline-item:nth-child(even) .about-timeline-node{ right:-10px; }
}

.about-timeline-card{
  background:#fff; border:1px solid rgba(12,84,84,.08); border-radius:18px;
  padding:1.3rem 1.4rem; box-shadow:0 18px 40px -30px rgba(12,84,84,.35);
}
.about-timeline-year{
  display:inline-block; font-family:var(--font-display); font-weight:800; font-size:.78rem;
  color:#fff; background:var(--c-deep); padding:.25rem .8rem; border-radius:999px; margin-bottom:.6rem;
}
.about-timeline-card h3{ font-family:var(--font-display); font-weight:800; font-size:1rem; color:var(--c-ink); margin:0 0 .4rem; }
.about-timeline-card p{ color:#4f7373; font-size:.85rem; line-height:1.8; margin:0; }
.about-timeline-thumb{
  width:100%; height:110px; object-fit:cover; border-radius:12px; margin-bottom:.8rem;
}

@media (max-width:759px){
  .about-timeline-list::before{ right:23px; }
  .about-timeline-item{ padding-inline-end:4rem; text-align:right; }
}

/* ---------------------------------------------------------
   ۵) فرآیند کار — استپر افقی
--------------------------------------------------------- */
.about-process{ padding:5rem 5vw 1rem; max-width:1180px; margin:0 auto; }
.about-process-head{ text-align:center; max-width:600px; margin:0 auto 3rem; }
.about-process-title{
  font-family:var(--font-display); font-weight:900;
  font-size:clamp(1.6rem, 3.6vw, 2.3rem); color:var(--c-ink); margin:0 0 .7rem;
}
.about-process-sub{ color:#4f7373; font-size:.95rem; line-height:1.85; margin:0; }

.about-process-list{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:1fr; gap:1.1rem; counter-reset:none;
}
@media (min-width:820px){
  .about-process-list{ grid-template-columns:repeat(5, 1fr); gap:0; position:relative; }
  .about-process-list::before{
    content:""; position:absolute; top:22px; right:9%; left:9%; height:2px;
    background:linear-gradient(90deg, rgba(12,141,141,.05), rgba(12,141,141,.35), rgba(12,141,141,.05));
    z-index:0;
  }
}
.about-process-step{ position:relative; z-index:1; text-align:right; padding:0 .6rem; }
@media (min-width:820px){ .about-process-step{ text-align:center; padding:0 .8rem; } }

.about-process-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%;
  background:#fff; border:2px solid var(--c-teal); color:var(--c-deep);
  font-family:var(--font-display); font-weight:900; font-size:.9rem;
  margin-bottom:1rem;
}
.about-process-step h3{ font-family:var(--font-display); font-weight:800; font-size:1rem; color:var(--c-ink); margin:0 0 .45rem; }
.about-process-step p{ color:#4f7373; font-size:.85rem; line-height:1.8; margin:0; }

/* ---------------------------------------------------------
   ۶) ابزار و تکنولوژی — گرید چیپ‌ها
--------------------------------------------------------- */
.about-tools{ padding:4.5rem 5vw 1rem; max-width:1180px; margin:0 auto; }
.about-tools-head{ text-align:center; max-width:600px; margin:0 auto 2.4rem; }
.about-tools-title{
  font-family:var(--font-display); font-weight:900;
  font-size:clamp(1.6rem, 3.6vw, 2.3rem); color:var(--c-ink); margin:0 0 .7rem;
}
.about-tools-sub{ color:#4f7373; font-size:.95rem; line-height:1.85; margin:0; }

.about-tools-grid{
  display:grid; grid-template-columns:1fr; gap:.8rem;
}
@media (min-width:640px){ .about-tools-grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:980px){ .about-tools-grid{ grid-template-columns:repeat(3, 1fr); } }

.about-tool-chip{
  display:flex; align-items:center; gap:.9rem;
  background:#fff; border:1px solid rgba(12,84,84,.08); border-radius:16px;
  padding:1rem 1.2rem; font-size:.9rem; font-weight:700; color:var(--c-ink);
  box-shadow:0 16px 34px -28px rgba(12,84,84,.35);
}
.about-tool-icon{
  flex:0 0 auto; width:38px; height:38px; border-radius:11px;
  background:rgba(12,141,141,.09); color:var(--c-teal);
  display:flex; align-items:center; justify-content:center;
}
.about-tool-icon svg{ width:19px; height:19px; }

/* ---------------------------------------------------------
   ۷) آمار رسا — شمارنده‌ها
--------------------------------------------------------- */
.about-stats{ padding:1rem 5vw 4.5rem; max-width:1180px; margin:0 auto; }
.about-stats-grid{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:1rem;
  background:var(--c-ink); border-radius:26px; padding:2.6rem 1.5rem;
}
@media (min-width:700px){ .about-stats-grid{ grid-template-columns:repeat(4, 1fr); } }

.about-stat{ text-align:center; }
.about-stat-num{
  display:block; font-family:var(--font-display); font-weight:900;
  font-size:clamp(2rem, 5vw, 2.8rem); color:var(--c-cyan-2); line-height:1;
  margin-bottom:.5rem;
}
.about-stat-label{ color:rgba(246,253,255,.7); font-size:.82rem; }

/* ---------------------------------------------------------
   ۸) مشتری‌ها و همکاران — نوار لوگو/نام برند
--------------------------------------------------------- */
.about-clients{ padding:4.5rem 5vw 1rem; max-width:1180px; margin:0 auto; }
.about-clients-head{ text-align:center; max-width:600px; margin:0 auto 2rem; }
.about-clients-title{
  font-family:var(--font-display); font-weight:900;
  font-size:clamp(1.5rem, 3.2vw, 2rem); color:var(--c-ink); margin:0 0 .6rem;
}
.about-clients-sub{ color:#4f7373; font-size:.88rem; line-height:1.8; margin:0; }

.about-clients-strip{
  display:flex; flex-wrap:wrap; justify-content:center; gap:.8rem;
}
.about-client-chip{
  background:#fff; border:1px solid rgba(12,84,84,.1); border-radius:999px;
  padding:.7rem 1.4rem; font-size:.85rem; font-weight:700; color:#4f7373;
  filter:grayscale(1); opacity:.75;
  transition:filter .3s ease, opacity .3s ease, color .3s ease, border-color .3s ease;
}
.about-client-chip:hover{ filter:none; opacity:1; color:var(--c-deep); border-color:rgba(12,141,141,.3); }

/* ---------------------------------------------------------
   ۹) توصیه‌نامه‌ها
--------------------------------------------------------- */
.about-testimonials{ padding:4.5rem 5vw 1rem; max-width:1180px; margin:0 auto; }
.about-testimonials-head{ text-align:center; max-width:600px; margin:0 auto 2.6rem; }
.about-testimonials-title{
  font-family:var(--font-display); font-weight:900;
  font-size:clamp(1.6rem, 3.6vw, 2.3rem); color:var(--c-ink); margin:0 0 .7rem;
}
.about-testimonials-sub{ color:#4f7373; font-size:.95rem; line-height:1.85; margin:0; }

.about-testi-grid{ display:grid; grid-template-columns:1fr; gap:1.1rem; }
@media (min-width:900px){ .about-testi-grid{ grid-template-columns:repeat(3, 1fr); } }

.about-testi-card{
  background:#fff; border:1px solid rgba(12,84,84,.08); border-radius:20px;
  padding:1.7rem 1.5rem; box-shadow:0 22px 45px -34px rgba(12,84,84,.35);
  display:flex; flex-direction:column; justify-content:space-between; gap:1.4rem;
}
.about-testi-quote{ color:#2c3e3e; font-size:.92rem; line-height:1.9; margin:0; }
.about-testi-person{ display:flex; align-items:center; gap:.7rem; }
.about-testi-avatar{
  width:40px; height:40px; border-radius:50%; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--c-teal), var(--c-deep));
  color:#fff; font-family:var(--font-display); font-weight:800; font-size:.85rem;
}
.about-testi-name{ font-weight:800; color:var(--c-ink); font-size:.86rem; }
.about-testi-role{ color:var(--c-teal); font-size:.76rem; }

/* ---------------------------------------------------------
   ۱۰) سوالات متداول — آکاردئون
--------------------------------------------------------- */
.about-faq{ padding:5rem 5vw 2rem; max-width:820px; margin:0 auto; }
.about-faq-head{ text-align:center; margin:0 auto 2.4rem; }
.about-faq-title{
  font-family:var(--font-display); font-weight:900;
  font-size:clamp(1.6rem, 3.6vw, 2.3rem); color:var(--c-ink); margin:0 0 .7rem;
}
.about-faq-sub{ color:#4f7373; font-size:.95rem; line-height:1.85; margin:0; }

.about-faq-list{ display:flex; flex-direction:column; gap:.8rem; }
.about-faq-item{
  background:#fff; border:1px solid rgba(12,84,84,.09); border-radius:16px;
  padding:1.1rem 1.3rem; box-shadow:0 14px 32px -28px rgba(12,84,84,.3);
}
.about-faq-item summary{
  cursor:pointer; list-style:none; font-family:var(--font-display); font-weight:800;
  font-size:.98rem; color:var(--c-ink); display:flex; align-items:center;
  justify-content:space-between; gap:1rem;
}
.about-faq-item summary::-webkit-details-marker{ display:none; }
.about-faq-item summary::after{
  content:"+"; flex:0 0 auto; width:26px; height:26px; border-radius:50%;
  background:rgba(12,141,141,.1); color:var(--c-teal); font-size:1.1rem; font-weight:700;
  display:flex; align-items:center; justify-content:center; transition:transform .25s ease;
}
.about-faq-item[open] summary::after{ transform:rotate(45deg); }
.about-faq-item p{ color:#4f7373; font-size:.88rem; line-height:1.85; margin:.9rem 0 0; }