/* =====================================================
   about.css — استایل اختصاصی صفحه درباره ما
   ===================================================== */

.about-intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
}
@media (max-width: 860px) { .about-intro { grid-template-columns: 1fr; } }
.about-intro .prose p { margin: 0 0 18px; color: var(--ink-700); }
.about-intro .prose p:last-child { margin-bottom: 0; }

.about-visual {
    aspect-ratio: 4/3;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-hover);
}

/* ---- مراحل کار (شماره‌گذاری با رنگ‌های فرآیند چاپ) ---- */
.process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
@media (max-width: 900px) { .process-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .process-grid { grid-template-columns: 1fr; } }

.process-step {
    position: relative;
    padding: 28px 22px;
    border-radius: var(--radius-lg);
    background: var(--paper-050);
    border: 1px solid var(--paper-line);
    transition: transform var(--duration-med) var(--ease-out), box-shadow var(--duration-med) ease;
}
.process-step:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-card);
}
.process-num {
    font-size: 42px;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 14px;
    display: inline-block;
}
.process-step:nth-child(1) .process-num { color: var(--cyan-500); }
.process-step:nth-child(2) .process-num { color: var(--magenta-500); }
.process-step:nth-child(3) .process-num { color: #d4b500; } /* نسخه تیره‌تر زرد برای خوانایی روی کاغذ روشن */
.process-step:nth-child(4) .process-num { color: var(--ink-900); }
.process-step h3 { font-size: 16px; margin-bottom: 8px; }
.process-step p { font-size: 14px; color: var(--ink-700); margin: 0; }

/* ---- آمار ---- */
.stats-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    text-align: center;
}
@media (max-width: 700px) { .stats-strip { grid-template-columns: 1fr; } }
.stat-item .stat-number {
    font-size: clamp(32px, 4vw, 44px);
    font-weight: 900;
    color: var(--ink-900);
    display: block;
}
.stat-item .stat-label { font-size: 14px; color: var(--ink-700); margin-top: 6px; }