/* ===== درباره ما (طرح «About») =====
   روی home.css سوار است (رنگ‌ها، هدر، فوتر، بخش دانلود)؛ فقط بخش‌های خاص این صفحه اینجاست. */

.blob1 { top: -260px; right: -160px; height: 640px; width: 640px; background: radial-gradient(closest-side, rgba(48,111,87,.14), rgba(48,111,87,0)); }
.blob2 { top: 40px; left: -220px; height: 560px; width: 560px; background: radial-gradient(closest-side, rgba(0,167,157,.09), rgba(0,167,157,0)); }
.hdr-nav a.on { background: var(--mint2); color: var(--gd); }

/* ---------- هیرو ---------- */
.ahero { position: relative; margin: 0 auto; max-width: 1200px; padding: 64px 24px 88px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.halo { position: relative; display: grid; place-items: center; height: 270px; width: 270px; }
.halo span { position: absolute; border-radius: 999px; }
.halo-1 { inset: 0; background: radial-gradient(closest-side, rgba(48,111,87,.16), rgba(48,111,87,.04) 60%, rgba(48,111,87,0)); }
.halo-2 { inset: 8%; border: 1px solid rgba(48,111,87,.14); }
.halo-3 { inset: 22%; border: 1px solid rgba(48,111,87,.1); background: rgba(255,255,255,.55); }
.halo img { position: relative; height: 150px; width: auto; display: block; filter: drop-shadow(0 22px 30px rgba(24,64,46,.25)); }
.akick { margin-top: 8px; }
.ahero .r1 + h1 { animation-delay: .12s; }
.ahero h1 { margin: 14px 0 0; font-size: clamp(32px, 5vw, 58px); font-weight: 900; line-height: 1.3; letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.ahero > p { margin: 20px 0 0; max-width: 44rem; font-size: clamp(15.5px, 1.5vw, 17.5px); line-height: 2.1; color: var(--muted); text-wrap: balance; }
.ahero .r2 { animation-delay: .18s; }
.cry { position: relative; margin-top: 30px; width: 100%; max-width: 40rem; border-radius: 24px; border: 1px solid #dfe9e3; background: linear-gradient(135deg, #f4f9f6, #eaf4ef); padding: 28px 32px; box-shadow: 0 1px 2px rgba(16,40,32,.04), 0 24px 50px -36px rgba(16,48,36,.35); }
.cry-t { font-size: clamp(22px, 2.6vw, 30px); font-weight: 900; line-height: 1.5; color: var(--gd); }
.cry p { margin: 10px 0 0; font-size: 15px; line-height: 2; color: var(--muted); text-wrap: balance; }

/* ---------- داستان ---------- */
.astory { background: linear-gradient(180deg, #ffffff 0%, #f5f9f6 30%); }
.story-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 40px; align-items: center; }
.story-text { text-align: right; }
.story-text h2, .sec-head h2 { margin: 14px 0 0; font-size: clamp(24px, 3.4vw, 40px); font-weight: 900; line-height: 1.45; letter-spacing: -.015em; color: var(--ink); text-wrap: balance; }
.story-text h2 .hl { color: var(--g); }
.story-text > p { margin: 16px 0 0; font-size: 16px; line-height: 2.05; color: var(--muted); text-wrap: pretty; }
.story-text > p b { color: var(--ink); }
.founders { margin-top: 26px; display: flex; gap: 12px; flex-wrap: wrap; }
.founders > div { border-radius: 16px; border: 1px solid #e3eae5; background: #ffffff; padding: 12px 18px; }
.founders b { display: block; font-size: 14.5px; color: var(--ink); }
.founders span { font-size: 12.5px; color: var(--soft); }
.quote { position: relative; margin: 0; overflow: hidden; border-radius: 28px; background: linear-gradient(135deg, #337a5e 0%, #27583f 55%, #1b4230 100%); padding: 40px 36px; box-shadow: 0 40px 80px -46px rgba(24,64,46,.7); }
.quote-mark { pointer-events: none; position: absolute; bottom: -50px; left: -20px; height: 230px; opacity: .07; }
.quote-q { position: relative; font-size: 72px; font-weight: 900; line-height: .6; color: rgba(255,255,255,.3); }
.quote blockquote { position: relative; margin: 18px 0 0; font-size: clamp(18px, 1.9vw, 22px); font-weight: 700; line-height: 1.95; color: #ffffff; text-wrap: pretty; }
.quote blockquote span { color: #a8ecc8; }
.quote figcaption { position: relative; margin-top: 20px; font-size: 13.5px; font-weight: 600; color: rgba(255,255,255,.7); }

/* ---------- چرا ای‌داد ---------- */
.why { margin-top: 44px; display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.why-card { display: flex; flex-direction: column; border-radius: 22px; border: 1px solid #e6ece8; background: #ffffff; padding: 24px; box-shadow: 0 1px 2px rgba(16,40,32,.03); transition: all .25s; }
.why-card:hover { transform: translateY(-3px); border-color: #d7e6dc; box-shadow: 0 24px 50px -30px rgba(16,48,36,.35); }
.why-top { display: flex; align-items: center; justify-content: space-between; }
.why-ic { display: grid; height: 46px; width: 46px; flex-shrink: 0; place-items: center; border-radius: 14px; background: var(--mint2); color: var(--g); }
.why-n { font-size: 22px; font-weight: 900; letter-spacing: .02em; color: #dbe8e0; }
.why h3 { margin: 18px 0 0; font-size: 18px; font-weight: 800; color: var(--ink); }
.why p { margin: 8px 0 0; font-size: 14.5px; line-height: 1.95; color: var(--muted); }
.why-goal { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; border-radius: 22px; background: linear-gradient(135deg, #337a5e 0%, #27583f 60%, #1b4230 100%); padding: 24px; box-shadow: 0 30px 60px -40px rgba(24,64,46,.7); }
.why-goal img { pointer-events: none; position: absolute; bottom: -30px; left: -10px; height: 140px; opacity: .08; }
.why-goal h3 { position: relative; margin: 0; color: #ffffff; }
.why-goal p { position: relative; margin-top: 10px; color: rgba(255,255,255,.82); }

/* ---------- سه اصل ---------- */
.prin { margin-top: 44px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: hidden; border-radius: 28px; border: 1px solid #dfe9e3; background: #ffffff; box-shadow: 0 1px 2px rgba(16,40,32,.04), 0 30px 60px -44px rgba(16,48,36,.35); }
.prin > div { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 36px 28px; }
.prin > div + div { border-right: 1px solid var(--line2); }
.prin h3 { margin: 16px 0 0; font-size: 20px; font-weight: 900; color: var(--ink); }
.prin p { margin: 8px 0 0; max-width: 18rem; font-size: 14.5px; line-height: 1.95; color: var(--muted); }

/* ---------- موبایل ---------- */
@media (max-width: 720px) {
  .ahero { padding: 40px 20px 56px; }
  .halo { height: 220px; width: 220px; }
  .halo img { height: 118px; }
  .cry { padding: 22px 20px; }
  .story-grid { grid-template-columns: minmax(0, 1fr); }
  .quote { padding: 28px 24px; }
  .prin { grid-template-columns: minmax(0, 1fr); }
  .prin > div + div { border-right: 0; border-top: 1px solid var(--line2); }
}