/**
 * ECOIA — صفحه درباره ما (نسخه ۲ — Fix Pass)
 * Concept: "The Living Story"
 * Inner Hero | Identity | Timeline | Vision/Mission | Goals | Values | CTA
 *
 * Fix‌های این نسخه:
 *  - section-pad تعریف شد (padding واقعی)
 *  - gap‌های grid بزرگتر شدن
 *  - همه transition‌ها: 400ms cubic-bezier(0.16, 1, 0.3, 1)
 *  - timeline pulse قوی‌تر
 *  - value card shadow در hover بهتر شد
 */

/* ════════════════════════════════════════════════════════════
   ۰. SECTION-PAD — این class در layout.css global تعریف
   نشده؛ اینجا برای صفحه about صریحاً تعریف می‌شود
════════════════════════════════════════════════════════════ */

.about-identity.section-pad,
.about-timeline.section-pad,
.about-vision-mission.section-pad,
.about-goals.section-pad,
.about-values.section-pad {
    padding-top:    var(--section-pad, clamp(80px, 10vw, 140px));
    padding-bottom: var(--section-pad, clamp(80px, 10vw, 140px));
}

/* ════════════════════════════════════════════════════════════
   ۱. INNER HERO
   grain texture + gradient + خط طلایی + breadcrumb تزئینی
════════════════════════════════════════════════════════════ */

.inner-hero {
    position:            relative;
    width:               100%;
    min-height:          clamp(52vh, 70vh, 640px);
    display:             flex;
    align-items:         flex-end;
    padding-bottom:      clamp(64px, 9vw, 108px);
    overflow:            hidden;
    background-color:    var(--bg-void, #070707);
    background-image:    var(--about-hero-img, none);
    background-size:     cover;
    background-position: center 30%;
}

/* Gradient سینمایی — پایه */
.inner-hero::before {
    content:  '';
    position: absolute;
    inset:    0;
    z-index:  1;
    background:
        radial-gradient(ellipse 80% 60% at 30% 80%, rgba(200,169,81,0.08) 0%, transparent 60%),
        linear-gradient(160deg, rgba(200,169,81,0.04) 0%, transparent 45%),
        linear-gradient(to bottom, rgba(7,7,7,0.35) 0%, rgba(7,7,7,0.75) 55%, rgba(7,7,7,0.97) 100%);
    pointer-events: none;
}

/* وقتی تصویر دارد: overlay سینماتیک‌تر و عمیق‌تر */
.inner-hero--has-image::before {
    background:
        radial-gradient(ellipse 60% 50% at 50% 100%, rgba(200,169,81,0.10) 0%, transparent 70%),
        linear-gradient(to bottom,
            rgba(7,7,7,0.25) 0%,
            rgba(7,7,7,0.45) 35%,
            rgba(7,7,7,0.82) 65%,
            rgba(7,7,7,0.97) 100%
        );
}

/* vignette لبه‌های تصویر — فقط وقتی عکس دارد */
.inner-hero--has-image {
    background-position: center 25%;
}
.inner-hero--has-image::after {
    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)'/%3E%3C/svg%3E"),
        radial-gradient(ellipse 120% 100% at 50% 50%, transparent 40%, rgba(7,7,7,0.55) 100%);
    opacity: 1;
    mix-blend-mode: normal;
}

/* grain texture */
.inner-hero::after {
    content:            '';
    position:           absolute;
    inset:              0;
    z-index:            2;
    background-image:   url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)'/%3E%3C/svg%3E");
    background-repeat:  repeat;
    background-size:    200px 200px;
    opacity:            0.035;
    pointer-events:     none;
    mix-blend-mode:     overlay;
}

/* خط طلایی بالا */
.inner-hero__accent {
    position:   absolute;
    top:        0;
    right:      0;
    width:      420px;
    height:     1px;
    background: linear-gradient(270deg, var(--gold, #C8A951) 0%, rgba(200,169,81,0.3) 60%, transparent 100%);
    z-index:    3;
    opacity:    0.7;
}

.inner-hero__accent::after {
    content:    '';
    position:   absolute;
    top:        20px;
    right:      80px;
    width:      200px;
    height:     1px;
    background: linear-gradient(270deg, rgba(200,169,81,0.25) 0%, transparent 100%);
}

/* محتوای inner hero */
.inner-hero__content {
    position:    relative;
    z-index:     10;
    width:       100%;
    max-width:   var(--container-max, 1280px);
    margin:      0 auto;
    padding:     0 var(--container-pad, 24px);
    padding-top: clamp(110px, 15vw, 170px);
}

/* breadcrumb */
.breadcrumb {
    display:        flex;
    align-items:    center;
    gap:            8px;
    margin-bottom:  clamp(24px, 3.5vh, 36px);
    font-family:    var(--font-fa, 'Vazirmatn', sans-serif);
    font-size:      var(--fs-small, 13px);
    color:          var(--text-secondary, #9A9590);
    position:       relative;
    padding-bottom: 16px;
}

.breadcrumb::after {
    content:    '';
    position:   absolute;
    bottom:     0;
    right:      0;
    width:      60px;
    height:     1px;
    background: linear-gradient(270deg, var(--gold, #C8A951), transparent);
    opacity:    0.5;
}

.breadcrumb a {
    color:           var(--text-secondary, #9A9590);
    text-decoration: none;
    transition:      color 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

.breadcrumb a:hover { color: var(--gold-light, #E8D5A0); }

.breadcrumb__sep {
    color:     var(--gold, #C8A951);
    opacity:   0.5;
    font-size: 16px;
}

.breadcrumb [aria-current="page"] {
    color: var(--text-primary, #F0EDE8);
}

/* عنوان اصلی inner hero */
.inner-hero__title {
    font-family:    var(--font-fa, 'Vazirmatn', sans-serif);
    font-size:      clamp(32px, 4.2vw, 58px);
    font-weight:    700;
    color:          var(--text-primary, #F0EDE8);
    line-height:    1.25;
    margin:         0 0 18px 0;
    letter-spacing: -0.01em;
}

/* شعار italic */
.inner-hero__subtitle {
    font-family:    var(--font-display, 'Cormorant Garamond', serif);
    font-size:      clamp(18px, 2.3vw, 28px);
    font-style:     italic;
    font-weight:    400;
    color:          var(--gold-light, #E8D5A0);
    letter-spacing: 0.02em;
    margin:         0;
    opacity:        0.82;
}

/* ════════════════════════════════════════════════════════════
   ۲. IDENTITY — شناسنامه سازمان
   ۳ کارت با عدد دکوراتیو بزرگ پشت‌زمینه
════════════════════════════════════════════════════════════ */

.about-identity {
    background: var(--bg-secondary, #0E0E0E);
    position:   relative;
    overflow:   hidden;
}

.about-identity::before {
    content:    '';
    position:   absolute;
    top:        0;
    right:      var(--container-pad, 24px);
    left:       var(--container-pad, 24px);
    height:     1px;
    background: linear-gradient(90deg, transparent, rgba(200,169,81,0.25) 30%, rgba(200,169,81,0.25) 70%, transparent);
    pointer-events: none;
}

.about-identity__grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   1px;
    background:            rgba(200,169,81,0.12);
    border:                1px solid rgba(200,169,81,0.12);
    border-radius:         var(--radius-md, 4px);
    overflow:              hidden;
    margin-top:            clamp(52px, 7vh, 88px);   /* FIX: از 44px به 52px */
}

.identity-card {
    background:  var(--bg-card, #111111);
    padding:     clamp(40px, 5.5vw, 68px) clamp(28px, 4vw, 52px);   /* FIX: padding بزرگتر */
    text-align:  center;
    position:    relative;
    overflow:    hidden;
    transition:  background 400ms cubic-bezier(0.16, 1, 0.3, 1);    /* FIX: ease بهتر */
}

.identity-card::before {
    position:    absolute;
    bottom:      -20px;
    left:        50%;
    transform:   translateX(-50%);
    font-family: var(--font-display, 'Cormorant Garamond', serif);
    font-size:   clamp(100px, 16vw, 200px);
    font-weight: 700;
    color:       var(--gold, #C8A951);
    opacity:     0.028;
    line-height: 1;
    pointer-events: none;
    user-select: none;
    transition:  opacity 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

.identity-card:nth-child(1)::before { content: '۱'; }
.identity-card:nth-child(2)::before { content: '۲'; }
.identity-card:nth-child(3)::before { content: '۳'; }

.identity-card:hover { background: var(--bg-card-hover, #161616); }
.identity-card:hover::before { opacity: 0.045; }

.identity-card::after {
    content:    '';
    position:   absolute;
    top:        0;
    right:      50%;
    left:       50%;
    height:     2px;
    background: var(--gold, #C8A951);
    opacity:    0;
    transition: right 400ms cubic-bezier(0.16, 1, 0.3, 1),
                left  400ms cubic-bezier(0.16, 1, 0.3, 1),
                opacity 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

.identity-card:hover::after { right: 0; left: 0; opacity: 0.7; }

.identity-card__icon {
    width:          56px;
    height:         56px;
    margin:         0 auto 24px;
    display:        flex;
    align-items:    center;
    justify-content: center;
    border:         1px solid rgba(200,169,81,0.18);
    border-radius:  var(--radius-md, 4px);
    color:          var(--gold, #C8A951);
    opacity:        0.85;
    position:       relative;
    z-index:        1;
    transition:     border-color 400ms cubic-bezier(0.16, 1, 0.3, 1),
                    background   400ms cubic-bezier(0.16, 1, 0.3, 1);
}

.identity-card:hover .identity-card__icon {
    border-color: rgba(200,169,81,0.5);
    background:   rgba(200,169,81,0.08);
}

.identity-card__label {
    font-family:    var(--font-body-en, 'DM Sans', sans-serif);
    font-size:      11px;
    font-weight:    500;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    color:          var(--text-secondary, #9A9590);
    margin-bottom:  14px;   /* FIX: از 12px به 14px */
    display:        block;
    position:       relative;
    z-index:        1;
}

.identity-card__value {
    font-family: var(--font-fa, 'Vazirmatn', sans-serif);
    font-size:   clamp(15px, 1.5vw, 18px);
    font-weight: 600;
    color:       var(--text-primary, #F0EDE8);
    line-height: 1.65;
    direction:   rtl;
    position:    relative;
    z-index:     1;
}

.identity-card__value--en {
    font-family:    var(--font-body-en, 'DM Sans', sans-serif);
    direction:      ltr;
    font-weight:    400;
    font-size:      13px;
    color:          var(--gold-light, #E8D5A0);
    letter-spacing: 0.03em;
    display:        inline-block;
}

/* ════════════════════════════════════════════════════════════
   ۳. TIMELINE
   FIX: pulse قوی‌تر با ring expand
════════════════════════════════════════════════════════════ */

.about-timeline {
    background: var(--bg-primary, #0A0A0A);
    overflow:   hidden;
}

.timeline {
    position:   relative;
    margin-top: clamp(64px, 8vh, 100px);   /* FIX: از 56px به 64px */
}

.timeline__track {
    position:    relative;
    display:     flex;
    align-items: flex-start;
    gap:         0;
}

.timeline__line {
    position:   absolute;
    top:        28px;
    right:      0;
    left:       0;
    height:     1px;
    background: rgba(200,169,81,0.15);
}

.timeline__progress {
    position:        absolute;
    top:             27px;
    right:           0;
    height:          2px;
    width:           78%;
    background:      linear-gradient(270deg, var(--gold, #C8A951) 0%, rgba(200,169,81,0.4) 70%, transparent 100%);
    transform-origin: right center;
    box-shadow:      0 0 12px rgba(200,169,81,0.35);
}

.timeline-item {
    flex:        1;
    position:    relative;
    text-align:  center;
    padding-top: 72px;
}

.timeline-item:nth-child(odd)  { padding-top: 72px; }
.timeline-item:nth-child(even) { padding-top: 24px; flex-direction: column-reverse; }

.timeline-item__dot {
    position:         absolute;
    top:              14px;
    left:             50%;
    transform:        translateX(-50%);
    width:            28px;
    height:           28px;
    border-radius:    50%;
    border:           1px solid rgba(200,169,81,0.35);
    background:       var(--bg-card, #111111);
    display:          flex;
    align-items:      center;
    justify-content:  center;
    transition:       border-color 400ms cubic-bezier(0.16, 1, 0.3, 1),
                      box-shadow   400ms cubic-bezier(0.16, 1, 0.3, 1);
    z-index:          2;
}

.timeline-item__dot::before {
    content:       '';
    width:         8px;
    height:        8px;
    border-radius: 50%;
    background:    var(--gold, #C8A951);
    opacity:       0.65;
    transition:    transform 400ms cubic-bezier(0.16, 1, 0.3, 1),
                   opacity   400ms cubic-bezier(0.16, 1, 0.3, 1);
}

.timeline-item:hover .timeline-item__dot {
    border-color: var(--gold, #C8A951);
    box-shadow:   0 0 20px rgba(200,169,81,0.40);
}

.timeline-item:hover .timeline-item__dot::before {
    opacity:   1;
    transform: scale(1.35);
}

/* FIX: pulse قوی‌تر — ring expand + glow */
.timeline-item--active .timeline-item__dot {
    border-color: rgba(200,169,81,0.9);
    background:   rgba(200,169,81,0.08);
    animation:    timeline-pulse 2.2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.timeline-item--active .timeline-item__dot::before {
    opacity:   1;
    transform: scale(1.1);
}

@keyframes timeline-pulse {
    0% {
        box-shadow:  0 0 0 0   rgba(200,169,81,0.50),
                     0 0 16px  rgba(200,169,81,0.25);
        border-color: rgba(200,169,81,0.70);
    }
    50% {
        box-shadow:  0 0 0 10px rgba(200,169,81,0),
                     0 0 40px  rgba(200,169,81,0.70);
        border-color: rgba(200,169,81,1.00);
    }
    100% {
        box-shadow:  0 0 0 0   rgba(200,169,81,0.50),
                     0 0 16px  rgba(200,169,81,0.25);
        border-color: rgba(200,169,81,0.70);
    }
}

.timeline-item__year {
    font-family:    var(--font-fa, 'Vazirmatn', sans-serif);
    font-size:      clamp(20px, 2.2vw, 26px);
    font-weight:    900;
    letter-spacing: -0.03em;
    color:          var(--gold-light, #E8D5A0);
    margin-bottom:  12px;
    display:        block;
}

.timeline-item__title {
    font-family:   var(--font-fa, 'Vazirmatn', sans-serif);
    font-size:     var(--fs-small, 13px);
    font-weight:   700;
    color:         var(--text-primary, #F0EDE8);
    margin-bottom: 10px;   /* FIX: از 8px به 10px */
}

.timeline-item__desc {
    font-family: var(--font-fa, 'Vazirmatn', sans-serif);
    font-size:   clamp(11px, 0.95vw, 13px);
    color:       var(--text-secondary, #9A9590);
    line-height: 1.8;   /* FIX: از 1.75 به 1.8 */
    padding:     0 clamp(6px, 1.5vw, 16px);
}

/* ════════════════════════════════════════════════════════════
   ۴. VISION & MISSION
   gradient border دیاگونال | quote mark دکوراتیو
════════════════════════════════════════════════════════════ */

.about-vision-mission {
    background: var(--bg-secondary, #0E0E0E);
}

.vision-mission__grid {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   clamp(28px, 4vw, 48px);    /* FIX: از 20px,3vw,36px */
    margin-top:            clamp(52px, 7vh, 80px);    /* FIX: از 44px,6vh,72px */
}

.vm-card {
    position:      relative;
    padding:       clamp(40px, 5vw, 64px);            /* FIX: از 36px,4.5vw,56px */
    background:    var(--bg-card, #111111);
    border-radius: var(--radius-md, 4px);
    overflow:      hidden;
    isolation:     isolate;
    transition:    box-shadow 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Border دیاگونال — mask-composite */
.vm-card::before {
    content:      '';
    position:     absolute;
    inset:        0;
    padding:      1px;
    border-radius: var(--radius-md, 4px);
    background:   linear-gradient(135deg,
                    rgba(200,169,81,0.55) 0%,
                    rgba(200,169,81,0.08) 40%,
                    rgba(200,169,81,0.08) 60%,
                    rgba(200,169,81,0.55) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box,
                  linear-gradient(#fff 0 0);
    mask:         linear-gradient(#fff 0 0) content-box,
                  linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    transition:   opacity 400ms cubic-bezier(0.16, 1, 0.3, 1);
    opacity:      0.7;
}

.vm-card:hover::before { opacity: 1; }

.vm-card:hover {
    box-shadow: 0 12px 48px rgba(200,169,81,0.14),
                0 0 0 1px rgba(200,169,81,0.18);
}

/* quote mark دکوراتیو */
.vm-card::after {
    content:        open-quote;
    position:       absolute;
    top:            -20px;
    left:           20px;
    font-family:    var(--font-display, 'Cormorant Garamond', serif);
    font-size:      clamp(120px, 18vw, 220px);
    font-weight:    700;
    color:          var(--gold, #C8A951);
    opacity:        0.025;
    line-height:    1;
    pointer-events: none;
    user-select:    none;
    transition:     opacity 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

.vm-card:hover::after { opacity: 0.04; }

.vm-card__bg-num {
    position:    absolute;
    bottom:      -24px;
    right:       -8px;
    font-family: var(--font-display, 'Cormorant Garamond', serif);
    font-size:   clamp(120px, 16vw, 200px);
    font-weight: 700;
    color:       var(--gold, #C8A951);
    opacity:     0.025;
    line-height: 1;
    pointer-events: none;
    user-select: none;
    z-index:     0;
}

.vm-card__tag {
    display:        inline-block;
    font-family:    var(--font-body-en, 'DM Sans', sans-serif);
    font-size:      11px;
    font-weight:    600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color:          var(--gold, #C8A951);
    margin-bottom:  clamp(20px, 3vh, 32px);    /* FIX: از 18px,2.8vh,28px */
    position:       relative;
    z-index:        1;
}

.vm-card__title {
    font-family:   var(--font-fa, 'Vazirmatn', sans-serif);
    font-size:     clamp(22px, 2.8vw, 38px);
    font-weight:   700;
    color:         var(--text-primary, #F0EDE8);
    line-height:   1.35;
    margin-bottom: clamp(20px, 3vh, 32px);    /* FIX: از 18px,2.8vh,28px */
    position:      relative;
    z-index:       1;
}

.vm-card__text {
    font-family: var(--font-fa, 'Vazirmatn', sans-serif);
    font-size:   clamp(14px, 1.3vw, 16px);
    color:       var(--text-secondary, #9A9590);
    line-height: 2.1;
    position:    relative;
    z-index:     1;
}

/* ════════════════════════════════════════════════════════════
   ۵. STRATEGIC GOALS — ۸+۸
   underline از راست به چپ | grid background
════════════════════════════════════════════════════════════ */

.about-goals {
    background: var(--bg-primary, #0A0A0A);
    position:   relative;
    overflow:   hidden;
}

.about-goals::before {
    content:          '';
    position:         absolute;
    inset:            0;
    background-image: linear-gradient(rgba(200,169,81,0.03) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(200,169,81,0.03) 1px, transparent 1px);
    background-size:  80px 80px;
    pointer-events:   none;
}

.goals__wrapper {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   clamp(48px, 7vw, 96px);    /* FIX: از 40px,6vw,80px */
    margin-top:            clamp(56px, 7vh, 92px);    /* FIX: از 52px,7vh,88px */
}

.goals__group-title {
    font-family:    var(--font-display, 'Cormorant Garamond', serif);
    font-size:      clamp(19px, 2.2vw, 27px);
    font-style:     italic;
    font-weight:    400;
    color:          var(--gold-light, #E8D5A0);
    margin-bottom:  clamp(32px, 4.5vh, 48px);   /* FIX: از 28px,4vh,44px */
    padding-bottom: 20px;
    border-bottom:  1px solid rgba(200,169,81,0.15);
    position:       relative;
}

.goals__group-title::after {
    content:    '';
    position:   absolute;
    bottom:     -1px;
    right:      0;
    width:      44px;
    height:     1px;
    background: var(--gold, #C8A951);
    opacity:    0.7;
}

.goals__list {
    list-style:     none;
    margin:         0;
    padding:        0;
    display:        flex;
    flex-direction: column;
    gap:            clamp(16px, 2.2vh, 24px);   /* FIX: از 14px,2vh,20px */
}

.goals__item {
    display:        flex;
    align-items:    flex-start;
    gap:            16px;                       /* FIX: از 14px */
    font-family:    var(--font-fa, 'Vazirmatn', sans-serif);
    font-size:      clamp(14px, 1.3vw, 16px);
    color:          var(--text-secondary, #9A9590);
    line-height:    1.8;
    padding-bottom: 16px;                       /* FIX: از 14px */
    position:       relative;
    transition:     color 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* underline — slide از راست به چپ (RTL) */
.goals__item::after {
    content:          '';
    position:         absolute;
    bottom:           0;
    right:            0;
    width:            0;
    height:           1px;
    background:       linear-gradient(270deg, rgba(200,169,81,0.50) 0%, transparent 100%);
    transition:       width 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.goals__item:hover { color: var(--text-primary, #F0EDE8); }
.goals__item:hover::after { width: 100%; }

.goals__num {
    flex-shrink:     0;
    width:           30px;
    height:          30px;
    border:          1px solid rgba(200,169,81,0.18);
    border-radius:   var(--radius-sm, 2px);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-family:     var(--font-fa, 'Vazirmatn', sans-serif);
    font-size:       15px;
    font-weight:     700;
    color:           var(--gold, #C8A951);
    line-height:     1;
    margin-top:      2px;
    transition:      border-color 400ms cubic-bezier(0.16, 1, 0.3, 1),
                     background   400ms cubic-bezier(0.16, 1, 0.3, 1),
                     transform    400ms cubic-bezier(0.16, 1, 0.3, 1);
}

.goals__item:hover .goals__num {
    border-color: var(--gold, #C8A951);
    background:   rgba(200,169,81,0.10);
    transform:    scale(1.10);
}

/* ════════════════════════════════════════════════════════════
   ۶. CORE VALUES — ۴ کارت
   FIX: shadow بهتر + transition smooth‌تر
════════════════════════════════════════════════════════════ */

.about-values {
    background: var(--bg-secondary, #0E0E0E);
}

.values__grid {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   clamp(20px, 2.5vw, 28px);  /* FIX: از 14px,2vw,22px */
    margin-top:            clamp(56px, 7vh, 92px);    /* FIX: از 52px,7vh,88px */
}

.value-card {
    padding:         clamp(36px, 4.2vw, 52px) clamp(24px, 3vw, 38px);  /* FIX: بزرگتر */
    background:      var(--bg-card, #111111);
    border:          1px solid rgba(200,169,81,0.15);
    border-radius:   var(--radius-md, 4px);
    text-align:      center;
    transform-style: preserve-3d;
    /* FIX: transition کامل برای shadow و border */
    transition:      transform    150ms ease-out,
                     border-color 400ms cubic-bezier(0.16, 1, 0.3, 1),
                     box-shadow   400ms cubic-bezier(0.16, 1, 0.3, 1);
    position:        relative;
    overflow:        hidden;
    will-change:     transform, box-shadow;
}

/* light sweep */
.value-card::before {
    content:    '';
    position:   absolute;
    top:        -50%;
    right:      -50%;
    width:      200%;
    height:     200%;
    background: radial-gradient(circle at center, rgba(200,169,81,0.07) 0%, transparent 60%);
    opacity:    0;
    transition: opacity 500ms cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}

/* خط طلایی پایین */
.value-card::after {
    content:    '';
    position:   absolute;
    bottom:     0;
    right:      50%;
    left:       50%;
    height:     2px;
    background: var(--gold, #C8A951);
    opacity:    0;
    transition: right   400ms cubic-bezier(0.16, 1, 0.3, 1),
                left    400ms cubic-bezier(0.16, 1, 0.3, 1),
                opacity 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* FIX: shadow بهتر با چند لایه */
.value-card:hover {
    border-color: rgba(200,169,81,0.50);
    box-shadow:
        0 0 0   1px rgba(200,169,81,0.12),
        0 4px   20px rgba(200,169,81,0.12),
        0 16px  48px rgba(0,0,0,0.50),
        inset 0 1px 0 rgba(200,169,81,0.06);
}

.value-card:hover::before { opacity: 1; }

.value-card:hover::after {
    right:   8%;
    left:    8%;
    opacity: 0.75;
}

.value-card__icon {
    width:          56px;
    height:         56px;
    margin:         0 auto 28px;                       /* FIX: از 26px به 28px */
    border:         1px solid rgba(200,169,81,0.15);
    border-radius:  var(--radius-md, 4px);
    display:        flex;
    align-items:    center;
    justify-content: center;
    color:          var(--gold, #C8A951);
    transition:     border-color 400ms cubic-bezier(0.16, 1, 0.3, 1),
                    background   400ms cubic-bezier(0.16, 1, 0.3, 1),
                    box-shadow   400ms cubic-bezier(0.16, 1, 0.3, 1);
    position:       relative;
    z-index:        1;
}

.value-card:hover .value-card__icon {
    border-color: var(--gold, #C8A951);
    background:   rgba(200,169,81,0.10);
    box-shadow:   0 0 24px rgba(200,169,81,0.30);
}

.value-card__title {
    font-family:   var(--font-fa, 'Vazirmatn', sans-serif);
    font-size:     clamp(15px, 1.6vw, 19px);
    font-weight:   700;
    color:         var(--text-primary, #F0EDE8);
    margin-bottom: 16px;   /* FIX: از 14px به 16px */
    line-height:   1.4;
    position:      relative;
    z-index:       1;
}

.value-card__text {
    font-family: var(--font-fa, 'Vazirmatn', sans-serif);
    font-size:   clamp(12px, 1.05vw, 14px);
    color:       var(--text-secondary, #9A9590);
    line-height: 1.9;
    position:    relative;
    z-index:     1;
}

/* ════════════════════════════════════════════════════════════
   ۷. ABOUT CTA STRIP
   gradient طلایی + grain + دو دکمه
════════════════════════════════════════════════════════════ */

.about-cta {
    background: var(--bg-void, #070707);
    padding:    clamp(96px, 12vw, 152px) 0;   /* FIX: از 88px,12vw,148px */
    text-align: center;
    position:   relative;
    overflow:   hidden;
}

.about-cta::before {
    content:       '';
    position:      absolute;
    top:           50%;
    left:          50%;
    transform:     translate(-50%, -50%);
    width:         700px;
    height:        700px;
    border-radius: 50%;
    background:    radial-gradient(circle, rgba(200,169,81,0.09) 0%, transparent 65%);
    pointer-events: none;
}

.about-cta::after {
    content:            '';
    position:           absolute;
    inset:              0;
    background-image:   url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)'/%3E%3C/svg%3E");
    background-repeat:  repeat;
    background-size:    180px 180px;
    opacity:            0.022;
    pointer-events:     none;
    mix-blend-mode:     overlay;
}

.about-cta .container {
    position: relative;
    z-index:  1;
}

.about-cta .container::before,
.about-cta .container::after {
    content:    '';
    position:   absolute;
    right:      0;
    left:       0;
    height:     1px;
    background: linear-gradient(90deg, transparent, rgba(200,169,81,0.30) 50%, transparent);
}

.about-cta .container::before { top:    calc(-1 * clamp(44px, 6vw, 74px)); }
.about-cta .container::after  { bottom: calc(-1 * clamp(44px, 6vw, 74px)); }

.about-cta__label {
    font-family:    var(--font-body-en, 'DM Sans', sans-serif);
    font-size:      11px;
    font-weight:    600;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color:          var(--gold, #C8A951);
    margin-bottom:  clamp(22px, 3.2vh, 32px);   /* FIX: بزرگتر */
    display:        block;
}

.about-cta__title {
    font-family:   var(--font-fa, 'Vazirmatn', sans-serif);
    font-size:     clamp(28px, 3.8vw, 52px);
    font-weight:   700;
    color:         var(--text-primary, #F0EDE8);
    margin-bottom: clamp(20px, 3vh, 32px);    /* FIX: از 18px */
    line-height:   1.3;
}

.about-cta__text {
    font-family: var(--font-fa, 'Vazirmatn', sans-serif);
    font-size:   clamp(14px, 1.4vw, 17px);
    color:       var(--text-secondary, #9A9590);
    max-width:   560px;
    margin:      0 auto clamp(40px, 5.5vh, 60px);   /* FIX: از 36px,5vh,56px */
    line-height: 2;
}

.about-cta__actions {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             20px;   /* FIX: از 16px */
    flex-wrap:       wrap;
}

.btn--gold {
    background:     var(--gold, #C8A951);
    color:          var(--bg-void, #070707);
    border:         1px solid var(--gold, #C8A951);
    font-weight:    700;
    letter-spacing: 0.02em;
    transition:     background 400ms cubic-bezier(0.16, 1, 0.3, 1),
                    box-shadow  400ms cubic-bezier(0.16, 1, 0.3, 1),
                    transform   300ms cubic-bezier(0.16, 1, 0.3, 1);
}

.btn--gold:hover {
    background: var(--gold-bright, #F0E0A8);
    box-shadow: 0 0 32px rgba(200,169,81,0.45);
    transform:  translateY(-2px);
}

.btn--lg {
    padding:   14px 30px;    /* FIX: از 14px 28px */
    font-size: var(--fs-body, 15px);
    gap:       10px;
}

/* ════════════════════════════════════════════════════════════
   ۸. RESPONSIVE — Mobile First
════════════════════════════════════════════════════════════ */

/* Tablet — ≤ 1024px */
@media (max-width: 1024px) {

    .about-identity.section-pad,
    .about-timeline.section-pad,
    .about-vision-mission.section-pad,
    .about-goals.section-pad,
    .about-values.section-pad {
        padding-top:    clamp(56px, 8vw, 80px);
        padding-bottom: clamp(56px, 8vw, 80px);
    }

    .about-identity__grid  { grid-template-columns: 1fr; gap: 1px; }
    .vision-mission__grid  { grid-template-columns: 1fr; gap: clamp(20px, 3vw, 28px); }
    .goals__wrapper        { grid-template-columns: 1fr; gap: clamp(48px, 6vw, 64px); }
    .values__grid          { grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 2.5vw, 22px); }

    /* Timeline عمودی */
    .timeline__track {
        flex-direction: column;
        gap:            0;
    }

    .timeline__line,
    .timeline__progress {
        top:    0;
        right:  28px;
        left:   auto;
        width:  1px;
        height: 100%;
    }

    .timeline__progress {
        height:           75%;
        width:            2px;
        transform-origin: top center;
        background:       linear-gradient(180deg, var(--gold, #C8A951) 0%, rgba(200,169,81,0.3) 70%, transparent 100%);
    }

    .timeline-item {
        display:    flex;
        align-items: flex-start;
        gap:         24px;
        padding:     0 0 clamp(36px, 5vw, 56px) 0;
        text-align:  right;
    }

    .timeline-item:nth-child(odd),
    .timeline-item:nth-child(even) { padding-top: 0; }

    .timeline-item__dot {
        position:    relative;
        top:         auto;
        left:        auto;
        transform:   none;
        flex-shrink: 0;
        margin-top:  0;
    }

    .timeline-item__content { flex: 1; }
    .timeline-item__desc    { padding: 0; }
}

/* Mobile — ≤ 768px */
@media (max-width: 768px) {

    .about-identity.section-pad,
    .about-timeline.section-pad,
    .about-vision-mission.section-pad,
    .about-goals.section-pad,
    .about-values.section-pad {
        padding-top:    clamp(44px, 7vw, 64px);
        padding-bottom: clamp(44px, 7vw, 64px);
    }

    .inner-hero {
        min-height:     44vh;
        padding-bottom: clamp(44px, 7vw, 72px);
    }

    .values__grid   { grid-template-columns: 1fr; }
    .vm-card::after { display: none; }
    .vm-card__bg-num { display: none; }
}

/* Mobile Small — ≤ 480px */
@media (max-width: 480px) {

    .about-identity.section-pad,
    .about-timeline.section-pad,
    .about-vision-mission.section-pad,
    .about-goals.section-pad,
    .about-values.section-pad {
        padding-top:    clamp(36px, 6vw, 52px);
        padding-bottom: clamp(36px, 6vw, 52px);
    }

    .breadcrumb { font-size: 11px; }

    .goals__num {
        width:     26px;
        height:    26px;
        font-size: 13px;
    }

    .about-cta__actions {
        flex-direction: column;
        align-items:    stretch;
        gap:            12px;
    }

    .about-cta__actions .btn {
        width:           100%;
        justify-content: center;
    }

    .identity-card::before {
        font-size: 80px;
        opacity:   0.02;
    }
}