/**
 * ECOIA — pages/home.css (Full Redesign)
 * About | Services Bento | Why ECOIA | Parallax CTA
 * Offices | Membership | Achievements
 * Cinematic Dark Luxury — همه sections صفحه اصلی
 */

/* ════════════════════════════════════════════════════════════
   ۱. ABOUT SECTION — Split Layout 50/50
════════════════════════════════════════════════════════════ */

.about-section {
    background:  var(--bg-primary, #0A0A0A);
    padding:     var(--section-pad, clamp(80px, 10vw, 140px)) 0;
    overflow:    hidden;
    position:    relative;
}

/* Grid دو ستونه */
.about-grid {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   clamp(48px, 6vw, 80px);
    align-items:           center;
    direction:             rtl;
}

/* ─── ستون محتوا (راست) ─────────────────────────────────── */

.about-content {
    padding-left: clamp(32px, 4vw, 56px);  /* فاصله از تصویر */
    border-left:  1px solid var(--border-gold, rgba(200,169,81,0.18));
    position:     relative;
}

.about-content::before {
    content:    '';
    position:   absolute;
    top:        0;
    left:       -1px;
    width:      1px;
    height:     40%;
    background: var(--gold, #C8A951);
    opacity:    0.6;
}

.about-text {
    margin-bottom: clamp(24px, 3vh, 36px);
}

.about-text p {
    font-family:   var(--font-fa, 'Vazirmatn', sans-serif);
    font-size:     clamp(15px, 1.5vw, 17px);
    font-weight:   400;
    color:         var(--text-secondary, #9A9590);
    line-height:   1.9;
    margin-bottom: clamp(16px, 2vh, 22px);
}

.about-text p:last-child { margin-bottom: 0; }

.about-text strong {
    color:       var(--text-primary, #F0EDE8);
    font-weight: 600;
}

/* خط آماری کوچک: «تأسیس ۱۴۰۰ | استانبول» */
.about-meta {
    display:      flex;
    align-items:  center;
    gap:          16px;
    margin-top:   clamp(24px, 3vh, 32px);
    margin-bottom: clamp(28px, 3.5vh, 40px);
    font-family:  var(--font-body-en, 'DM Sans', sans-serif);
    font-size:    12px;
    font-weight:  400;
    color:        var(--text-muted, #4A4845);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.about-meta__sep {
    width:         4px;
    height:        4px;
    border-radius: 50%;
    background:    var(--gold-dark, #8B6914);
    flex-shrink:   0;
}

/* ─── ستون تصویر (چپ) ───────────────────────────────────── */

.about-visual {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-sm, 2px);
    aspect-ratio: 4 / 5;
    max-height:   600px;
}

.about-img {
    width:    100%;
    height:   100%;
    overflow: hidden;
    border-radius: 4px;   /* IMPROVEMENT 7 */
}

.about-img img {
    width:      100%;
    height:     110%;   /* فضای اضافه برای parallax GSAP */
    object-fit: cover;
    display:    block;
    transform:  translateY(-5%);  /* GSAP از اینجا شروع می‌کند */
    filter:     brightness(0.9);
    transition: filter 0.5s var(--ease-cinematic, cubic-bezier(0.23,1,0.32,1));
}

.about-visual:hover .about-img img {
    filter: brightness(1.02);
}

/* Badge «SINCE 1400» */
.since-badge {
    position:    absolute;
    bottom:      clamp(24px, 3vw, 36px);
    right:       clamp(20px, 2.5vw, 28px);
    background:  var(--gold, #C8A951);
    color:       var(--text-on-gold, #070707);
    font-family: var(--font-body-en, 'DM Sans', sans-serif);
    font-size:   11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding:     12px 24px;
    border-radius: var(--radius-sm, 2px);
    z-index:     2;
}

/* ════════════════════════════════════════════════════════════
   ۲. SERVICES SECTION — Bento Grid با Image Hover
════════════════════════════════════════════════════════════ */

.services-section {
    background: var(--bg-secondary, #0E0E0E);
    padding:    var(--section-pad, clamp(80px, 10vw, 140px)) 0;
    overflow:   hidden;
}

/* Header: label | عنوان | توضیح | دکمه */
.services-header {
    display:         flex;
    align-items:     flex-end;
    justify-content: space-between;
    gap:             var(--space-8, 32px);
    margin-bottom:   clamp(40px, 5vw, 64px);
    flex-wrap:       wrap;
}

.services-header__left  { flex: 1; min-width: 0; }
.services-header__right { flex-shrink: 0; }

/* Grid بنتو: ۳ ستون × ۲ ردیف */
.services-bento-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   clamp(12px, 1.5vw, 18px);
    background:            transparent;
}

/* هر کارت */
.service-bento-card {
    position:    relative;
    height:      320px;
    overflow:    hidden;
    background:  var(--bg-card, #111111);
    cursor:      none;

    /* border-bottom: خط طلایی رشد می‌کند */
    border-bottom: 2px solid transparent;
    transition:    border-color 0.35s ease;
}

.service-bento-card:hover {
    border-bottom-color: var(--gold, #C8A951);
}

/* لایه ۱ — تصویر پس‌زمینه */
.service-bento-card__bg {
    position:            absolute;
    inset:               0;
    background-image:    var(--card-bg);
    background-size:     cover;
    background-position: center;
    filter:              brightness(0.25) contrast(1.1);
    transform:           scale(1.0);
    transition:          transform  0.65s var(--ease-cinematic, cubic-bezier(0.23,1,0.32,1)),
                         filter     0.50s ease;
}

.service-bento-card:hover .service-bento-card__bg {
    transform: scale(1.08);
    filter:    brightness(0.55) contrast(1.1);   /* محسوس‌تر — IMPROVEMENT 3 */
}

/* Gradient overlay روی تصویر */
.service-bento-card::before {
    content:    '';
    position:   absolute;
    inset:      0;
    z-index:    1;
    background: linear-gradient(
        to top,
        rgba(7, 7, 7, 0.95) 0%,
        rgba(7, 7, 7, 0.50) 50%,
        rgba(7, 7, 7, 0.20) 100%
    );
    transition: opacity 0.4s ease;
}

.service-bento-card:hover::before {
    background: linear-gradient(
        to top,
        rgba(7, 7, 7, 0.85) 0%,
        rgba(7, 7, 7, 0.35) 60%,
        rgba(7, 7, 7, 0.10) 100%
    );
}

/* لایه ۲ — محتوا */
.service-bento-card__body {
    position:       absolute;
    inset:          0;
    z-index:        2;
    padding:        clamp(20px, 2.5vw, 28px);
    display:        flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* شماره «۰۱»–«۰۶» */
.service-bento-card__num {
    font-family:   var(--font-display, 'Cormorant Garamond', serif);
    font-style:    italic;
    font-weight:   300;
    font-size:     clamp(28px, 3vw, 40px);
    color:         var(--gold, #C8A951);
    opacity:       0.4;
    line-height:   1;
    margin-bottom: auto;
    display:       block;
    align-self:    flex-start;
    transition:    opacity 0.3s ease;
}

.service-bento-card:hover .service-bento-card__num {
    opacity: 0.7;
}

/* آیکون */
.service-bento-card__icon {
    width:         32px;
    height:        32px;
    color:         var(--gold, #C8A951);
    margin-bottom: 12px;
    flex-shrink:   0;
}

.service-bento-card__icon svg {
    width:  32px;
    height: 32px;
    stroke: currentColor;
    fill:   none;
    stroke-width: 1.5;
}

/* عنوان خدمت */
.service-bento-card__title {
    font-family:   var(--font-fa, 'Vazirmatn', sans-serif);
    font-size:     clamp(16px, 1.6vw, 20px);
    font-weight:   700;
    color:         var(--text-primary, #F0EDE8);
    margin-bottom: 10px;
    line-height:   1.3;
}

/* توضیح: پنهان → ظاهر در hover */
.service-bento-card__desc {
    font-family:   var(--font-fa, 'Vazirmatn', sans-serif);
    font-size:     clamp(13px, 1.2vw, 15px);
    font-weight:   400;
    color:         var(--text-secondary, #9A9590);
    line-height:   1.7;
    margin-bottom: 12px;
    opacity:       0;
    transform:     translateY(8px);
    transition:    opacity   0.4s ease,
                   transform 0.4s var(--ease-cinematic, cubic-bezier(0.23,1,0.32,1));
    display:       -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow:      hidden;
}

.service-bento-card:hover .service-bento-card__desc {
    opacity:   1;
    transform: translateY(0);
}

/* arrow «←» */
.service-bento-card__arrow {
    font-family:   var(--font-body-en, 'DM Sans', sans-serif);
    font-size:     18px;
    color:         var(--gold, #C8A951);
    display:       inline-block;
    transition:    transform 0.3s ease;
    line-height:   1;
}

.service-bento-card:hover .service-bento-card__arrow {
    transform: translateX(-8px);  /* RTL: چپ = جلو */
}

/* ════════════════════════════════════════════════════════════
   ۳. WHY ECOIA SECTION — Dark Grid با ghost numbers
════════════════════════════════════════════════════════════ */

.why-section {
    background: var(--bg-secondary, #0E0E0E);
    padding:    var(--section-pad, clamp(80px, 10vw, 140px)) 0;
    position:   relative;
    overflow:   hidden;
}

/* شعار اصلی «شبکه سازی تخصص ماست» */
.why-headline {
    font-family:    var(--font-fa, 'Vazirmatn', sans-serif);
    font-style:     normal;
    font-weight:    700;
    font-size:      clamp(26px, 3.2vw, 50px);
    color:          var(--text-primary, #F0EDE8);
    line-height:    1.35;
    letter-spacing: -0.01em;
    margin-bottom:  clamp(16px, 2vh, 24px);
    overflow:       hidden;  /* SplitType */
}

.why-sub {
    font-size:     clamp(15px, 1.5vw, 17px);
    color:         var(--text-secondary, #9A9590);
    max-width:     520px;
    margin-bottom: clamp(48px, 6vw, 72px);
}

/* Grid 2×2 */
.why-grid {
    display:               grid;
    grid-template-columns: repeat(2, 1fr);
    gap:                   2px;
    background:            var(--border, #1A1A1A);
}

/* کارت چرا */
.why-card {
    background:    var(--bg-card, #111111);
    border-right:  3px solid var(--gold, #C8A951);  /* RTL: border start */
    padding:       clamp(32px, 4vw, 44px) clamp(28px, 3.5vw, 40px);
    position:      relative;
    overflow:      hidden;
    transition:    background      0.30s ease,
                   transform       0.30s ease,
                   border-color    0.30s ease;
}

.why-card:hover {
    background:  var(--bg-card-hover, #161616);
    transform:   translateY(-4px);
}

/* شماره بزرگ ghost در پس‌زمینه */
.why-card__ghost-num {
    position:      absolute;
    bottom:        -28px;
    left:          -12px;
    font-family:   var(--font-display, 'Cormorant Garamond', serif);
    font-style:    italic;
    font-weight:   300;
    font-size:     clamp(80px, 12vw, 140px);
    color:         var(--text-primary, #F0EDE8);
    opacity:       0.04;
    line-height:   1;
    user-select:   none;
    pointer-events: none;
    transition:    opacity 0.3s ease;
}

.why-card:hover .why-card__ghost-num {
    opacity: 0.06;
}

/* آیکون */
.why-card__icon {
    width:         44px;
    height:        44px;
    border-radius: var(--radius-md, 4px);
    background:    rgba(200, 169, 81, 0.08);
    border:        1px solid var(--border-gold, rgba(200,169,81,0.18));
    display:       flex;
    align-items:   center;
    justify-content: center;
    margin-bottom: clamp(20px, 2.5vh, 28px);
    position:      relative;
    z-index:       1;
    transition:    background 0.3s ease, border-color 0.3s ease;
}

.why-card:hover .why-card__icon {
    background:   rgba(200, 169, 81, 0.14);
    border-color: rgba(200, 169, 81, 0.40);
}

.why-card__icon svg {
    width:  22px;
    height: 22px;
    stroke: var(--gold, #C8A951);
    fill:   none;
    stroke-width: 1.5;
}

/* عنوان */
.why-card__title {
    font-family:   var(--font-fa, 'Vazirmatn', sans-serif);
    font-size:     clamp(18px, 2vw, 24px);
    font-weight:   700;
    color:         var(--text-primary, #F0EDE8);
    margin-bottom: clamp(12px, 1.5vh, 18px);
    position:      relative;
    z-index:       1;
}

/* متن */
.why-card__text {
    font-family:   var(--font-fa, 'Vazirmatn', sans-serif);
    font-size:     clamp(14px, 1.4vw, 16px);
    font-weight:   400;
    color:         var(--text-secondary, #9A9590);
    line-height:   1.85;
    position:      relative;
    z-index:       1;
}

/* ════════════════════════════════════════════════════════════
   ۴. PARALLAX CTA — محتوای داخلی
   (bg و overlay در animations.css تعریف شده)
════════════════════════════════════════════════════════════ */

.parallax-cta {
    padding: var(--section-pad, clamp(80px, 10vw, 140px)) 0;
}

.cta-title {
    font-family:   var(--font-fa, 'Vazirmatn', sans-serif);
    font-size:     clamp(32px, 5vw, 64px);
    font-weight:   700;
    color:         var(--text-primary, #F0EDE8);
    line-height:   1.2;
    margin-bottom: clamp(16px, 2vh, 24px);
    letter-spacing: var(--tracking-tight, -0.02em);
}

.cta-title span {
    color:       var(--gold, #C8A951);
    font-style:  italic;
    font-family: var(--font-display, 'Cormorant Garamond', serif);
    font-weight: 300;
}

.cta-sub {
    font-size:     clamp(15px, 1.5vw, 18px);
    color:         rgba(240, 237, 232, 0.65);
    max-width:     480px;
    margin:        0 auto clamp(36px, 4vh, 48px);
    line-height:   1.8;
}

.cta-actions {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             clamp(12px, 2vw, 20px);
    flex-wrap:       wrap;
}

/* ════════════════════════════════════════════════════════════
   ۵. OFFICES SECTION — نقشه + Grid کشورها
════════════════════════════════════════════════════════════ */

.offices-section {
    background: var(--bg-primary, #0A0A0A);
    padding:    var(--section-pad, clamp(80px, 10vw, 140px)) 0;
    overflow:   hidden;
}


/* Grid کارت کشورها: ۴×۲ */
.offices-grid {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   clamp(10px, 1.5vw, 16px);
}

.office-card {
    background:    var(--bg-card, #111111);
    border:        1px solid var(--border, #1A1A1A);
    border-radius: var(--radius-md, 4px);
    padding:       clamp(16px, 2vw, 22px) clamp(14px, 1.8vw, 20px);
    display:       flex;
    align-items:   center;
    gap:           14px;
    direction:     rtl;
    transition:    border-color 0.28s ease,
                   background   0.28s ease,
                   transform    0.28s ease;
}

.office-card:hover {
    border-color: var(--border-gold, rgba(200,169,81,0.35));
    background:   var(--bg-card-hover, #161616);
    transform:    translateY(-2px);
}

.office-card__flag {
    font-size:  clamp(22px, 3vw, 28px);
    flex-shrink: 0;
    line-height: 1;
}

.office-card__info { flex: 1; min-width: 0; }

.office-card__country {
    font-family:  var(--font-fa, 'Vazirmatn', sans-serif);
    font-size:    clamp(13px, 1.3vw, 15px);
    font-weight:  700;
    color:        var(--text-primary, #F0EDE8);
    margin-bottom: 3px;
    white-space:  nowrap;
    overflow:     hidden;
    text-overflow: ellipsis;
}

.office-card__city {
    font-family:    var(--font-body-en, 'DM Sans', sans-serif);
    font-size:      11px;
    color:          var(--text-muted, #4A4845);
    letter-spacing: 0.06em;
}

/* badge «مرکزی» */
.office-card__badge {
    font-size:    9px;
    font-weight:  600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background:   rgba(200, 169, 81, 0.10);
    color:        var(--gold, #C8A951);
    border:       1px solid var(--border-gold, rgba(200,169,81,0.20));
    border-radius: var(--radius-full, 9999px);
    padding:      3px 8px;
    flex-shrink:  0;
    white-space:  nowrap;
}

/* ════════════════════════════════════════════════════════════
   ۶. MEMBERSHIP SECTION — Pricing Cards
════════════════════════════════════════════════════════════ */

.membership-section {
    background: var(--bg-secondary, #0E0E0E);
    padding:    var(--section-pad, clamp(80px, 10vw, 140px)) 0;
    overflow:   hidden;
}

/* ردیف ۴ کارت */
.membership-cards-wrap {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   clamp(12px, 1.5vw, 20px);
    align-items:           stretch;
}

/* کارت پایه */
.membership-card {
    background:     var(--bg-card, #111111);
    border:         1px solid var(--border, #1A1A1A);
    border-radius:  var(--radius-md, 4px);
    padding:        clamp(28px, 3.5vw, 44px) clamp(20px, 2.5vw, 32px);
    display:        flex;
    flex-direction: column;
    position:       relative;
    overflow:       hidden;
    transition:     transform 0.40s var(--ease-cinematic, cubic-bezier(0.23,1,0.32,1)),
                    border-color 0.30s ease,
                    box-shadow   0.40s ease;
    cursor:         none;
}

.membership-card:hover {
    transform:    translateY(-8px);
    border-color: var(--border-gold, rgba(200,169,81,0.35));
}

/* نوع عضویت */
.membership-card__type {
    font-family:    var(--font-body-en, 'DM Sans', sans-serif);
    font-size:      10px;
    font-weight:    600;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    color:          var(--text-muted, #4A4845);
    margin-bottom:  clamp(16px, 2vh, 24px);
    display:        block;
}

/* قیمت */
.membership-card__price {
    display:       flex;
    align-items:   baseline;
    gap:           6px;
    margin-bottom: clamp(24px, 3vh, 32px);
}

.membership-card__amount {
    font-family:   var(--font-display, 'Cormorant Garamond', serif);
    font-style:    italic;
    font-weight:   300;
    font-size:     clamp(40px, 5vw, 60px);
    color:         var(--gold-light, #E8D5A0);
    line-height:   1;
}

.membership-card__currency {
    font-family:    var(--font-body-en, 'DM Sans', sans-serif);
    font-size:      14px;
    font-weight:    500;
    color:          var(--text-secondary, #9A9590);
    letter-spacing: 0.05em;
}

/* مزایا */
.membership-card__features {
    list-style:    none;
    padding:       0;
    margin:        0 0 clamp(28px, 3.5vh, 40px);
    flex:          1;
    display:       flex;
    flex-direction: column;
    gap:           clamp(10px, 1.2vh, 14px);
}

.membership-card__feature {
    display:     flex;
    align-items: flex-start;
    gap:         10px;
    font-family: var(--font-fa, 'Vazirmatn', sans-serif);
    font-size:   clamp(13px, 1.3vw, 14px);
    font-weight: 400;
    color:       var(--text-secondary, #9A9590);
    line-height: 1.5;
    direction:   rtl;
}

/* checkmark طلایی */
.membership-card__check {
    flex-shrink:  0;
    width:        16px;
    height:       16px;
    margin-top:   1px;
    color:        var(--gold, #C8A951);
}

.membership-card__check svg {
    width:  16px;
    height: 16px;
    stroke: currentColor;
    fill:   none;
    stroke-width: 2.5;
}

/* دکمه عضویت — استایل‌ها در پایین فایل تعریف شده */

/* ─── کارت VIP — ویژه ────────────────────────────────────── */

.membership-card--vip {
    background:  linear-gradient(135deg, #111111 0%, #130f03 100%);
    border-color: var(--gold, #C8A951);
    box-shadow:  0 0 48px rgba(200, 169, 81, 0.10),
                 0 0 96px rgba(200, 169, 81, 0.05);
}

.membership-card--vip:hover {
    box-shadow: 0 0 64px rgba(200, 169, 81, 0.20),
                0 24px 48px rgba(0, 0, 0, 0.60);
}

/* Badge «محبوب‌ترین» */
.membership-card--vip .membership-badge {
    position:    absolute;
    top:         -1px;
    right:       50%;
    transform:   translateX(50%);
    background:  var(--gold, #C8A951);
    color:       var(--text-on-gold, #070707);
    font-family: var(--font-body-en, 'DM Sans', sans-serif);
    font-size:   9px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding:     7px 18px;
    border-radius: 0 0 var(--radius-md, 4px) var(--radius-md, 4px);
    white-space: nowrap;
}

.membership-card--vip .membership-card__type {
    color:       var(--gold-dark, #8B6914);
    margin-top:  clamp(16px, 2vh, 24px);  /* فضا برای badge */
}

.membership-card--vip .membership-card__amount {
    color: var(--gold-bright, #F0E0A8);
}

/* membership-card--vip .membership-card__btn — استایل‌ها در پایین فایل تعریف شده */

/* ════════════════════════════════════════════════════════════
   ۷. ACHIEVEMENTS SECTION — Cards با Image
════════════════════════════════════════════════════════════ */

.achievements-section {
    background: var(--bg-primary, #0A0A0A);
    padding:    var(--section-pad, clamp(80px, 10vw, 140px)) 0;
    overflow:   hidden;
}

/* Grid ۳ کارت */
.achievements-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   clamp(16px, 2vw, 24px);
}

/* کارت دستاورد */
.achievement-card {
    background:     var(--bg-card, #111111);
    border:         1px solid var(--border, #1A1A1A);
    border-radius:  var(--radius-md, 4px);
    overflow:       hidden;
    display:        flex;
    flex-direction: column;
    cursor:         none;
    text-decoration: none;   /* لینک است */
    color:          inherit;
    border-bottom:  2px solid transparent;
    transition:     border-color 0.40s var(--ease-cinematic, cubic-bezier(0.23,1,0.32,1)),
                    transform    0.40s var(--ease-cinematic, cubic-bezier(0.23,1,0.32,1));
}

.achievement-card:hover,
.achievement-card:focus-visible {
    border-color:        var(--border-gold, rgba(200,169,81,0.35));
    border-bottom-color: var(--gold, #C8A951);
    transform:           translateY(-4px);
}

/* تصویر بالا */
.achievement-card__img {
    height:   clamp(180px, 22vw, 260px);
    overflow: hidden;
    position: relative;
    background: var(--bg-secondary, #0E0E0E);
    border-radius: 4px;   /* IMPROVEMENT 7 */
    cursor: none;          /* custom cursor VIEW */
}

.achievement-card__img img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    filter:     brightness(0.85);
    transition: transform 0.5s var(--ease-cinematic, cubic-bezier(0.23,1,0.32,1)),
                filter    0.5s var(--ease-cinematic, cubic-bezier(0.23,1,0.32,1));
    display:    block;
}

.achievement-card:hover .achievement-card__img img,
.achievement-card__img:hover img {
    transform: scale(1.06);
    filter:    brightness(1.05);   /* روشن‌تر در hover — IMPROVEMENT 3 */
}

/* overlay تصویر */
.achievement-card__img::after {
    content:    '';
    position:   absolute;
    inset:      0;
    background: linear-gradient(to top, rgba(7,7,7,0.5) 0%, transparent 60%);
    pointer-events: none;
}

/* محتوا پایین */
.achievement-card__body {
    padding:        clamp(20px, 2.5vw, 28px);
    flex:           1;
    display:        flex;
    flex-direction: column;
    gap:            clamp(10px, 1.2vh, 14px);
}

/* تگ / دسته‌بندی */
.achievement-card__tag {
    font-family:    var(--font-body-en, 'DM Sans', sans-serif);
    font-size:      10px;
    font-weight:    600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color:          var(--gold, #C8A951);
    line-height:    1;
}

/* عنوان */
.achievement-card__title {
    font-family:   var(--font-fa, 'Vazirmatn', sans-serif);
    font-size:     clamp(16px, 1.6vw, 20px);
    font-weight:   700;
    color:         var(--text-primary, #F0EDE8);
    line-height:   1.4;
    margin:        0;
}

/* توضیح */
.achievement-card__desc {
    font-family:        var(--font-fa, 'Vazirmatn', sans-serif);
    font-size:          clamp(13px, 1.3vw, 15px);
    font-weight:        400;
    color:              var(--text-secondary, #9A9590);
    line-height:        1.75;
    margin:             0;
    flex:               1;
    display:            -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow:           hidden;
}

/* تاریخ */
.achievement-card__date {
    font-family:    var(--font-body-en, 'DM Sans', sans-serif);
    font-size:      11px;
    color:          var(--text-muted, #4A4845);
    margin-top:     auto;
    padding-top:    clamp(12px, 1.5vh, 16px);
    border-top:     1px solid var(--border-subtle, #141414);
    letter-spacing: 0.06em;
}

/* ════════════════════════════════════════════════════════════
   ۸. Responsive — همه sections
════════════════════════════════════════════════════════════ */

/* Tablet (1024px) */
@media (max-width: 1024px) {
    .about-grid {
        grid-template-columns: 1fr;
        gap: clamp(36px, 5vw, 56px);
    }

    .about-content {
        border-left: none;
        padding-left: 0;
        order: 2;
    }

    .about-content::before { display: none; }
    .about-visual { order: 1; aspect-ratio: 16 / 9; max-height: 420px; }

    .services-bento-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .why-grid {
        grid-template-columns: 1fr;
    }

    .membership-cards-wrap {
        grid-template-columns: repeat(2, 1fr);
    }

    .offices-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile (768px) */
@media (max-width: 768px) {
    .services-bento-grid {
        grid-template-columns: 1fr;
    }

    .service-bento-card {
        height: 280px;
    }

    /* روی موبایل: desc همیشه نشان داده می‌شود */
    .service-bento-card__desc {
        opacity:   1;
        transform: translateY(0);
    }

    .achievements-grid {
        grid-template-columns: 1fr;
    }

    .membership-cards-wrap {
        grid-template-columns: 1fr;
    }

    .services-header {
        flex-direction: column;
        align-items:    flex-start;
    }
}

/* Mobile Small (480px) */
@media (max-width: 480px) {
    .offices-grid {
        grid-template-columns: 1fr 1fr;
    }

    .why-headline {
        font-size: clamp(22px, 7vw, 36px);
    }
}


/* ════════════════════════════════════════════════════════════
   ۹. OVERRIDES — Bug Fix + UI/UX Pass v2
   (این بخش بعد از hero.css لود می‌شود و آن را override می‌کند)
════════════════════════════════════════════════════════════ */

/* ─── Typography: عنوان hero با مقیاس جدید --fs-hero ────────── */
.hero__title {
    font-size: var(--fs-hero, clamp(42px, 5.5vw, 80px));
}

/* عناوین section با مقیاس جدید (refined) */
.section-heading {
    font-size: var(--fs-h2);
}

/* why-headline size override — اندازه را ثابت نگه‌دار، فونت در تعریف اصلی */
.why-headline {
    font-size: clamp(26px, 3.2vw, 50px);
}

/* ─── ساختار نهایی: Stats روی hero overlap، Marquee زیر stats ──── */
.hero__marquee {
    position:   relative;   /* جریان عادی — بعد از stats */
    bottom:     auto;
    left:       auto;
    right:      auto;
    z-index:    1;
    width:      100%;
    direction:  ltr;        /* RTL page — مهم: بدون این track از راست شروع می‌کند */
}

/* Stats Strip: overlap با پایین hero (طراحی اولیه) */
.stats-strip {
    margin-top: -90px;
    position:   relative;
    z-index:    20;
}

@media (max-width: 1024px) {
    .stats-strip { margin-top: -60px; }
}
@media (max-width: 768px) {
    .stats-strip { margin-top: -40px; }
}
@media (max-width: 480px) {
    .stats-strip { margin-top: 0; }
}

/* کارت‌های stats: border-radius 4px */
.stat-card {
    border-radius: 4px;
}

/* texture grain ظریف روی stats strip */
.stats-strip__grid {
    position: relative;
}
.stats-strip__grid::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='n'%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(%23n)'/%3E%3C/svg%3E");
    background-size: 180px 180px;
    opacity:        0.025;
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index:        1;
}

/* ─── Hero scroll indicator: موقعیت پایین‌تر (marquee حذف شد) ── */
.hero__scroll {
    bottom: clamp(32px, 5vh, 56px);
}

/* ─── IMPROVEMENT 7: Border Radius یکنواخت ─────────────────── */

/* دکمه‌ها: 6px */
.hero-btn--primary,
.hero-btn--secondary,
.btn,
.membership-card__btn {
    border-radius: 6px;
}

/* تصاویر service card: 4px */
.service-bento-card {
    border-radius: 4px;
}

.service-bento-card__bg {
    border-radius: 4px;
}

/* ─── IMPROVEMENT 4: کارت‌های service به‌صورت لینک ──────────── */
a.service-bento-card {
    text-decoration: none;
    color:           inherit;
    display:         block;
}

/* ════════════════════════════════════════════════════════════
   ۱۰. PARALLAX INTRO — Section بین About و Services
   IMPROVEMENT 5
════════════════════════════════════════════════════════════ */

.parallax-intro {
    position:            relative;
    min-height:          60vh;
    display:             flex;
    align-items:         center;
    justify-content:     center;
    overflow:            hidden;
    /* background-image:    url('https://picsum.photos/seed/aerial/1920/1080'); */
    background-image:    url('/assets/images/pages/home/parallax-intro.png');
    background-size:     cover;
    background-position: center;
    background-attachment: fixed;   /* parallax fixed */
    background-color:    var(--bg-void, #070707);  /* fallback */
}

/* روی موبایل: fixed را غیرفعال کن (مشکل عملکرد iOS) */
@media (max-width: 768px) {
    .parallax-intro {
        background-attachment: scroll;
        min-height: 50vh;
    }
}

.parallax-intro__overlay {
    position:   absolute;
    inset:      0;
    background: rgba(7, 7, 7, 0.72);
    z-index:    1;
}

.parallax-intro__content {
    position:   relative;
    z-index:    2;
    text-align: center;
    max-width:  720px;
    margin:     0 auto;
    padding:    clamp(48px, 8vw, 80px) var(--container-pad, 24px);
}

.parallax-intro__content .section-label {
    color:         var(--gold-light, #E8D5A0);
    margin-bottom: clamp(16px, 2vh, 24px);
}

.parallax-intro__content h2 {
    font-family:   var(--font-display, 'Cormorant Garamond', serif);
    font-style:    italic;
    font-weight:   300;
    font-size:     var(--fs-display, clamp(36px, 4.5vw, 64px));
    color:         var(--text-primary, #F0EDE8);
    line-height:   1.1;
    margin-bottom: clamp(20px, 2.5vh, 28px);
    letter-spacing: -0.02em;
}

.parallax-intro__content p {
    font-family: var(--font-fa, 'Vazirmatn', sans-serif);
    font-size:   var(--fs-body, clamp(15px, 1.4vw, 17px));
    font-weight: 400;
    color:       rgba(240, 237, 232, 0.80);
    line-height: 1.9;
    max-width:   560px;
    margin:      0 auto;
}

/* ════════════════════════════════════════════════════════════
   ۱۲. SKELETON LOADING — تصاویری که دیر لود می‌شوند
   IMPROVEMENT 8
════════════════════════════════════════════════════════════ */

/* placeholder تا وقتی img با data-src لود شود */
img[data-src]:not(.loaded) {
    background: linear-gradient(
        100deg,
        var(--bg-card, #111111) 30%,
        var(--bg-card-hover, #161616) 50%,
        var(--bg-card, #111111) 70%
    );
    background-size: 200% 100%;
    animation: skeleton-pulse 1.4s ease-in-out infinite;
    min-height: 120px;
}

@keyframes skeleton-pulse {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* fade-in نرم وقتی تصویر لود شد */
img[data-src].loaded {
    animation: img-fade-in 0.5s ease forwards;
}

@keyframes img-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ════════════════════════════════════════════════════════════
   ۱۳. WCAG / Accessibility — focus states عمومی
   IMPROVEMENT 8
════════════════════════════════════════════════════════════ */

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.hero-btn--primary:focus-visible,
.hero-btn--secondary:focus-visible,
.membership-card__btn:focus-visible,
.office-card:focus-visible,
.service-bento-card:focus-visible {
    outline:        2px solid var(--gold, #C8A951);
    outline-offset: 3px;
    border-radius:  4px;
}

/* skip-link برای screen reader / keyboard */
.skip-link {
    position:   absolute;
    top:        -100px;
    right:      20px;
    z-index:    var(--z-preloader, 9999);
    background: var(--gold, #C8A951);
    color:      var(--text-on-gold, #070707);
    padding:    12px 20px;
    border-radius: 4px;
    font-family:var(--font-fa, 'Vazirmatn', sans-serif);
    font-weight:600;
    font-size:  14px;
    text-decoration: none;
    transition: top 0.3s ease;
}

.skip-link:focus {
    top: 20px;
}


/* ════════════════════════════════════════════════════════════
   ۱۴. FINAL POLISH — تنظیمات تکمیلی
════════════════════════════════════════════════════════════ */

/* scroll-margin-top برای anchor links — جبران ارتفاع header */
section[id],
[id^="service-"] {
    scroll-margin-top: calc(var(--header-height, 80px) + 20px);
}

/* line-height فارسی برای خوانایی بهتر (۱.۹–۲.۱) */
.about-text p,
.why-card__text,
.service-bento-card__desc,
.achievement-card__desc,
.parallax-intro__content p,
.section-desc {
    line-height: 1.95;
}

/* اطمینان از position:relative روی parentهای دارای ::after/::before absolute */
.stats-strip__grid,
.service-bento-card,
.why-card,
.parallax-intro,
.parallax-cta,
.hero,
.about-img,
.achievement-card__img {
    position: relative;
}

/* prefers-reduced-motion — غیرفعال کردن انیمیشن‌ها و smooth scroll */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto !important;
    }
    *,
    *::before,
    *::after {
        animation-duration:        0.01ms !important;
        animation-iteration-count: 1      !important;
        transition-duration:       0.01ms !important;
    }
    .parallax-intro {
        background-attachment: scroll !important;
    }
}

/* CLS prevention — نسبت ابعاد برای تصاویر */
.about-img img       { aspect-ratio: 4 / 5; }
.achievement-card__img { aspect-ratio: 3 / 2; }

/* mobile: حذف overflow-x ناخواسته */
@media (max-width: 768px) {
    .why-section,
    .services-section,
    .about-section {
        overflow-x: clip;
    }
}
/* ════════════════════════════════════════════════════════════
   STAGE-4 IMPROVEMENTS — این block را به انتهای home.css اضافه کن
════════════════════════════════════════════════════════════ */

/* ── ۱. SLOT MACHINE STATS CSS ──────────────────────────────
   ساختار:
   .slot-wrap > .slot-col > .slot-n × 10
   کل ارتفاع column نشان داده نمی‌شه — overflow hidden
─────────────────────────────────────────────────────────── */

.slot-wrap {
    display:     inline-flex;
    align-items: flex-start;
    gap:         1px;
    line-height: 1;
    overflow:    hidden;
    /* همان font که stat-card__value داشت */
    font-family: inherit;
    font-size:   inherit;
    font-weight: inherit;
    color:       inherit;
}

.slot-col {
    display:        flex;
    flex-direction: column;
    overflow:       hidden;
    height:         1em;        /* فقط یک رقم نشون میده */
    will-change:    transform;
}

.slot-n {
    display:     block;
    line-height: 1;
    text-align:  center;
    flex-shrink: 0;
}

/* ── ۲. SERVICES BENTO NUM — scale 1.4 روی hover ───────────
   override کامل rule قبلی
─────────────────────────────────────────────────────────── */

.service-bento-card__num {
    transform-origin: top right;          /* RTL: از راست scale شود */
    transition:       transform 0.35s cubic-bezier(0.23, 1, 0.32, 1),
                      opacity   0.35s ease;
}

.service-bento-card:hover .service-bento-card__num {
    opacity:   1 !important;
    transform: scale(1.4);
}

/* ── ۳. SERVICES BENTO ICON — rotate روی hover ─────────────
   انیمیشن JS هم داره — این CSS fallback هست
─────────────────────────────────────────────────────────── */

.service-bento-card__icon {
    transition: transform 0.35s cubic-bezier(0.23, 1, 0.32, 1);
}

/* ── ۴. OFFICE CARD — hover بهتر ───────────────────────────
─────────────────────────────────────────────────────────── */

.office-card__flag {
    display:         inline-block;
    transition:      transform 0.30s cubic-bezier(0.23, 1, 0.32, 1);
    transform-origin: center;
}

/* ── ۵. MEMBERSHIP VIP CARD — ambient glow ──────────────────
─────────────────────────────────────────────────────────── */

.membership-card--vip {
    animation: vip-pulse 3.5s ease-in-out infinite;
}

@keyframes vip-pulse {
    0%,  100% { box-shadow: 0 0 30px rgba(200,169,81,0.18); }
    50%        { box-shadow: 0 0 50px rgba(200,169,81,0.32), 0 0 80px rgba(200,169,81,0.10); }
}

/* ── ۶. WHY CARD — ghost number contrast بهتر ───────────────
─────────────────────────────────────────────────────────── */

.why-card {
    transition: border-color 350ms ease,
                box-shadow   350ms ease,
                transform    250ms ease;
}

.why-card:hover {
    transform: translateY(-4px);
}

.why-card__ghost-num {
    transition: opacity 350ms ease, transform 350ms ease;
}

.why-card:hover .why-card__ghost-num {
    opacity:   0.08;
    transform: scale(1.05);
}

/* ── ۷. ACHIEVEMENTS CARD — border reveal ───────────────────
─────────────────────────────────────────────────────────── */

.achievement-card {
    transition: border-color 350ms ease, transform 250ms ease;
}

.achievement-card:hover {
    border-color: rgba(200,169,81,0.35);
    transform:    translateY(-3px);
}

/* ── RESPONSIVE SLOT MACHINE ─────────────────────────────── */
@media (max-width: 480px) {
    .slot-col { height: 0.9em; }
}

/* ════════════════════════════════════════════════════════════
   ABOUT IMAGE — lightbox trigger
════════════════════════════════════════════════════════════ */
.about-img__lightbox-wrap {
    position:   relative;
    display:    block;
    cursor:     pointer;
    overflow:   hidden;
}
.about-img__lightbox-wrap img {
    display:    block;
    width:      100%;
    transition: transform 0.55s cubic-bezier(0.23,1,0.32,1);
}
.about-img__lightbox-wrap:hover img {
    transform: scale(1.04);
}
.about-img__view-hint {
    position:        absolute;
    inset:           0;
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      rgba(7,7,7,0);
    transition:      background 0.4s ease;
    pointer-events:  none;
}
.about-img__view-hint svg {
    width:      40px;
    height:     40px;
    color:      rgba(232,213,160,0);
    stroke:     currentColor;
    stroke-width: 1.5;
    fill:       none;
    transition: color 0.4s ease, transform 0.4s cubic-bezier(0.23,1,0.32,1);
    transform:  scale(0.7);
    filter:     drop-shadow(0 2px 12px rgba(200,169,81,0));
}
.about-img__lightbox-wrap:hover .about-img__view-hint {
    background: rgba(7,7,7,0.38);
}
.about-img__lightbox-wrap:hover .about-img__view-hint svg {
    color:     rgba(232,213,160,0.95);
    transform: scale(1);
    filter:    drop-shadow(0 2px 16px rgba(200,169,81,0.55));
}
.about-img__lightbox-wrap:focus-visible {
    outline:        2px solid var(--gold, #C8A951);
    outline-offset: 3px;
}

/* ════════════════════════════════════════════════════════════
   MEMBERSHIP CARD BUTTON — بازطراحی
════════════════════════════════════════════════════════════ */
.membership-card__btn {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    padding:         clamp(11px,1.4vh,15px) 20px;
    background:      rgba(200,169,81,0.04);
    border:          1px solid rgba(200,169,81,0.28);
    border-radius:   var(--radius-md, 4px);
    color:           var(--gold, #C8A951);
    font-family:     var(--font-fa, 'Vazirmatn', sans-serif);
    font-size:       13px;
    font-weight:     600;
    letter-spacing:  0.02em;
    text-decoration: none;
    cursor:          pointer;
    position:        relative;
    overflow:        hidden;
    transition:      background    0.32s ease,
                     border-color  0.32s ease,
                     color         0.25s ease,
                     transform     0.28s cubic-bezier(0.23,1,0.32,1),
                     box-shadow    0.32s ease;
}
.membership-card__btn::before {
    content:    '';
    position:   absolute;
    inset:      0;
    background: linear-gradient(135deg,
                    rgba(200,169,81,0.12) 0%,
                    transparent          100%);
    opacity:    0;
    transition: opacity 0.35s ease;
}
.membership-card__btn:hover,
.membership-card:hover .membership-card__btn {
    background:   rgba(200,169,81,0.08);
    border-color: rgba(200,169,81,0.56);
    color:        var(--gold-bright, #F0E0A8);
    transform:    translateY(-2px);
    box-shadow:   0 6px 24px rgba(200,169,81,0.16);
}
.membership-card__btn:hover::before { opacity: 1; }

/* VIP card button — solid gold */
.membership-card--vip .membership-card__btn {
    background:  linear-gradient(135deg, #D4B860 0%, #A07828 100%);
    color:       #0A0800;
    border-color: transparent;
    font-weight: 700;
    box-shadow:  0 4px 20px rgba(200,169,81,0.20),
                 inset 0 1px 0 rgba(255,255,255,0.15);
}
.membership-card--vip:hover .membership-card__btn,
.membership-card--vip .membership-card__btn:hover {
    background:  linear-gradient(135deg, #E8D580 0%, #C8A951 55%, #8B6914 100%);
    border-color: transparent;
    color:       #0A0800;
    box-shadow:  0 8px 32px rgba(200,169,81,0.38),
                 inset 0 1px 0 rgba(255,255,255,0.20);
}


/* ════════════════════════════════════════════════════════════
   PREMIUM UPGRADE — Cinematic Dark Luxury v3
   بزرگترین ارتقاء بصری سایت
════════════════════════════════════════════════════════════ */

/* ─── ۱. HERO: Ambient gold glow below content ──────────────── */
.hero__body::after {
    content:    '';
    position:   absolute;
    bottom:     10%;
    left:       50%;
    transform:  translateX(-50%);
    width:      60%;
    height:     200px;
    background: radial-gradient(ellipse at center,
        rgba(200,169,81,0.06) 0%,
        transparent 70%);
    pointer-events: none;
    z-index:    0;
}

/* ─── ۲. HERO: Edge vignette for depth ─────────────────────── */
.hero::after {
    content:    '';
    position:   absolute;
    inset:      0;
    z-index:    4;
    background:
        linear-gradient(to right,  rgba(7,7,7,0.30) 0%, transparent 18%, transparent 82%, rgba(7,7,7,0.30) 100%),
        linear-gradient(to bottom, rgba(7,7,7,0.15) 0%, transparent 25%);
    pointer-events: none;
}

/* ─── ۳. STATS: Ambient radial glow around numbers ─────────── */
.stat-card__value {
    position: relative;
    display:  inline-block;
}

.stat-card:hover .stat-card__value {
    text-shadow: 0 0 28px rgba(200,169,81,0.35), 0 0 56px rgba(200,169,81,0.12);
}

/* Stats strip elevated glass */
.stats-strip__grid {
    background: linear-gradient(135deg,
        rgba(12,12,12,0.96) 0%,
        rgba(10,10,10,0.94) 100%);
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid rgba(200,169,81,0.12);
    box-shadow: 0 -4px 40px rgba(0,0,0,0.5), 0 4px 20px rgba(0,0,0,0.3);
}

/* ─── ۴. SERVICES BENTO: Asymmetric premium layout ─────────── */

/* اول کارت: 2 ستون — bento ناهمارز premium */
.service-bento-card:first-child {
    grid-column: span 2;
    height: 380px;
}

.service-bento-card:first-child .service-bento-card__title {
    font-size: clamp(20px, 2.2vw, 26px);
}

.service-bento-card:first-child .service-bento-card__body {
    padding: clamp(24px, 3vw, 40px);
}

/* آخرین کارت: کمی متفاوت */
.service-bento-card:last-child {
    grid-column: span 2;
}

/* Services section: ambient border glow */
.services-section::before {
    content:    '';
    position:   absolute;
    top:        0;
    left:       50%;
    transform:  translateX(-50%);
    width:      80%;
    height:     1px;
    background: linear-gradient(90deg, transparent, rgba(200,169,81,0.25), transparent);
    pointer-events: none;
}

/* ─── ۵. SECTION LABEL: Glowing dot accent ─────────────────── */
.section-label::before {
    content:       '';
    display:       inline-block;
    width:         5px;
    height:        5px;
    border-radius: 50%;
    background:    var(--gold, #C8A951);
    margin-left:   10px;  /* RTL: قبل از متن */
    vertical-align: middle;
    box-shadow:    0 0 8px rgba(200,169,81,0.6), 0 0 16px rgba(200,169,81,0.3);
    flex-shrink:   0;
}

/* ─── ۶. ABOUT SECTION: Premium depth line ─────────────────── */
.about-section {
    background: linear-gradient(
        180deg,
        var(--bg-primary, #0A0A0A) 0%,
        rgba(9,9,9,1) 100%
    );
}

/* Subtle radial glow behind the image */
.about-visual::before {
    content:    '';
    position:   absolute;
    inset:      -30px;
    background: radial-gradient(ellipse at center,
        rgba(200,169,81,0.05) 0%,
        transparent 65%);
    z-index:    -1;
    pointer-events: none;
}

/* ─── ۷. WHY SECTION: Ambient glow at top ──────────────────── */
.why-section::before {
    content:    '';
    position:   absolute;
    top:        0;
    left:       50%;
    transform:  translateX(-50%);
    width:      90%;
    height:     1px;
    background: linear-gradient(90deg, transparent, rgba(200,169,81,0.20), transparent);
    pointer-events: none;
}

/* Gold radial glow at top center */
.why-section::after {
    content:    '';
    position:   absolute;
    top:        0;
    left:       50%;
    transform:  translateX(-50%);
    width:      50%;
    height:     300px;
    background: radial-gradient(ellipse at top,
        rgba(200,169,81,0.04) 0%,
        transparent 65%);
    pointer-events: none;
    z-index:    0;
}

/* Why card: elevated border on hover with gold glow */
.why-card:hover {
    box-shadow: 4px 0 0 0 var(--gold, #C8A951) inset,
                0 8px 32px rgba(0,0,0,0.4),
                0 0 0 1px rgba(200,169,81,0.15);
}

/* ─── ۸. PARALLAX INTRO: Refined typography ────────────────── */
.parallax-intro__content h2 {
    text-shadow: 0 2px 40px rgba(0,0,0,0.5);
}

/* ─── ۹. PARALLAX CTA: Premium text treatment ──────────────── */
.cta-title {
    position: relative;
}

/* Gold line above CTA title */
.parallax-cta__content::before {
    content:    '';
    display:    block;
    width:      56px;
    height:     1px;
    background: var(--gold-gradient, linear-gradient(90deg, #C8A951, #8B6914));
    margin:     0 auto clamp(20px, 2.5vh, 28px);
    opacity:    0.7;
}

/* ─── ۱۰. OFFICES: Regional grouping visual ────────────────── */
.offices-section::before {
    content:    '';
    position:   absolute;
    bottom:     0;
    left:       50%;
    transform:  translateX(-50%);
    width:      80%;
    height:     1px;
    background: linear-gradient(90deg, transparent, rgba(200,169,81,0.15), transparent);
    pointer-events: none;
}

/* Office card: flag scale on hover */
.office-card:hover .office-card__flag {
    transform: scale(1.2);
}

/* Office card: badge glow */
.office-card__badge {
    animation: badge-glow 4s ease-in-out infinite;
}

@keyframes badge-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(200,169,81,0); }
    50%       { box-shadow: 0 0 12px rgba(200,169,81,0.25); }
}

/* ─── ۱۱. MEMBERSHIP: Price display refinement ─────────────── */

/* Membership type label with gold horizontal rule */
.membership-card__type {
    position:      relative;
    padding-bottom: 14px;
    margin-bottom: clamp(16px, 2vh, 24px);
}

.membership-card__type::after {
    content:    '';
    position:   absolute;
    bottom:     0;
    right:      0;
    width:      32px;
    height:     1px;
    background: var(--border-gold, rgba(200,169,81,0.25));
}

/* VIP card type line is gold */
.membership-card--vip .membership-card__type::after {
    background: var(--gold, #C8A951);
    width:      48px;
    opacity:    0.7;
}

/* Honorary card: subtle distinction */
.membership-card:last-child {
    background: linear-gradient(135deg, #0D0D0D 0%, #0A0A0A 100%);
    border-color: rgba(200,169,81,0.12);
    border-style: dashed;
}

.membership-card:last-child:hover {
    border-style: solid;
    border-color: rgba(200,169,81,0.30);
}

/* ─── ۱۲. ACHIEVEMENTS: Image date overlay ─────────────────── */

/* Date badge overlay on image */
.achievement-card__img::before {
    content:    attr(data-year);
    position:   absolute;
    top:        16px;
    left:       16px;    /* RTL: left of image */
    z-index:    3;
    font-family: var(--font-display, 'Cormorant Garamond', serif);
    font-style:  italic;
    font-weight: 300;
    font-size:   13px;
    color:       var(--gold-light, #E8D5A0);
    background:  rgba(7,7,7,0.7);
    padding:     4px 10px;
    border-radius: 2px;
    letter-spacing: 0.08em;
    border: 1px solid rgba(200,169,81,0.20);
    backdrop-filter: blur(4px);
}

/* ─── ۱۳. SECTION HEADINGS: Refined letter-spacing ─────────── */
.section-heading {
    letter-spacing: -0.025em;
}

/* ─── ۱۴. GOLD DIVIDER: Enhanced glow ──────────────────────── */
.gold-divider {
    background: var(--gold-gradient, linear-gradient(90deg, #C8A951, #8B6914));
    box-shadow: 0 0 12px rgba(200,169,81,0.20);
    opacity:    0.7;
}

/* ─── ۱۵. SECTION TRANSITIONS: Gradient connectors ─────────── */

/* about → parallax-intro */
.about-section {
    padding-bottom: calc(var(--section-pad) + 40px);
}

/* مرز نرم پایین about */
.about-section::after {
    content:    '';
    position:   absolute;
    bottom:     0;
    left:       0;
    right:      0;
    height:     80px;
    background: linear-gradient(to bottom,
        transparent,
        rgba(7,7,7,0.4));
    pointer-events: none;
}

/* مرز نرم بالای services */
.services-section {
    padding-top: calc(var(--section-pad) + 20px);
    position:    relative;
}

.why-section {
    position: relative;
}

.offices-section {
    position: relative;
}

/* ─── ۱۶. HERO MARQUEE: Premium styling ────────────────────── */
.hero__marquee {
    background:  rgba(7,7,7,0.60);
    border-top:  1px solid rgba(200,169,81,0.10);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.hero__marquee-item {
    color: rgba(200,169,81,0.55);
    letter-spacing: 0.06em;
}

/* ─── ۱۷. SOCIAL ICONS: Enhanced micro-interaction ─────────── */
.social-icon::after {
    content:    '';
    position:   absolute;
    inset:      -1px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(200,169,81,0.15), transparent 70%);
    opacity:    0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}

.social-icon {
    position: relative;
}

.social-icon:hover::after {
    opacity: 1;
}

/* ─── ۱۸. FOOTER: Premium watermark contrast ───────────────── */
.footer__watermark {
    opacity: 0.018;
    letter-spacing: 0.08em;
}

/* Footer bottom bar: subtle gold separator */
.footer__bottom {
    border-top-color: rgba(200,169,81,0.08);
}

/* ─── ۱۹. BENTO RESPONSIVE: Fix span on small screens ──────── */
@media (max-width: 1024px) {
    .service-bento-card:first-child,
    .service-bento-card:last-child {
        grid-column: span 1;
        height: 320px;
    }
}

@media (max-width: 768px) {
    .service-bento-card:first-child,
    .service-bento-card:last-child {
        grid-column: span 1;
        height: 280px;
    }

    .about-section::after { display: none; }
    .services-section { padding-top: var(--section-pad); }
}

/* ─── ۲۰. GENERAL PREMIUM: Smooth focus rings ──────────────── */
:focus-visible {
    outline:        2px solid rgba(200,169,81,0.7);
    outline-offset: 3px;
    border-radius:  3px;
}

/* ─── ۲۱. SCROLL PROGRESS BAR: Premium gold gradient ────────── */
#scroll-progress {
    background: linear-gradient(90deg,
        var(--gold-dark,  #8B6914) 0%,
        var(--gold,       #C8A951) 50%,
        var(--gold-light, #E8D5A0) 100%
    ) !important;
    height: 2px !important;
    box-shadow: 0 0 8px rgba(200,169,81,0.30) !important;
}

/* ─── ۲۲. SERVICE CARD BORDER: Seamless grid ───────────────── */
.services-bento-grid {
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 8px 48px rgba(0,0,0,0.5);
}

/* ─── ۲۳. WHY CARD: Border reveal on hover ─────────────────── */
.why-card {
    border-right: 3px solid rgba(200,169,81,0.15);
    transition: border-color 0.35s ease, box-shadow 0.35s ease, transform 0.25s ease, background 0.30s ease;
}

.why-card:hover {
    border-right-color: var(--gold, #C8A951);
}

/* ─── ۲۴. MEMBERSHIP VIP: Shimmer effect on badge ──────────── */
.membership-badge {
    overflow: hidden;
    position: relative;
}

.membership-badge::after {
    content:    '';
    position:   absolute;
    top:        -10%;
    right:      -80%;
    width:      40%;
    height:     120%;
    background: linear-gradient(105deg, transparent, rgba(255,255,255,0.25), transparent);
    transform:  skewX(-15deg);
    animation:  badge-shimmer 3s ease-in-out infinite;
}

@keyframes badge-shimmer {
    0%   { right: -80%; }
    40%  { right: 120%; }
    100% { right: 120%; }
}

/* ─── ۲۵. ACHIEVEMENT CARD: hover reveal effect ────────────── */
.achievement-card__img::after {
    background: linear-gradient(
        to top,
        rgba(7,7,7,0.65) 0%,
        rgba(7,7,7,0.10) 50%,
        transparent      100%
    );
}

.achievement-card:hover .achievement-card__img::after {
    background: linear-gradient(
        to top,
        rgba(7,7,7,0.40) 0%,
        rgba(200,169,81,0.04) 40%,
        transparent      100%
    );
}

/* ─── ۲۶. PARALLAX-INTRO: Enhanced text backdrop ───────────── */
.parallax-intro__overlay {
    background: linear-gradient(
        to bottom,
        rgba(7,7,7,0.60) 0%,
        rgba(7,7,7,0.75) 50%,
        rgba(7,7,7,0.60) 100%
    );
}

/* ─── ۲۷. STATS: Number hover glow ─────────────────────────── */
.stat-card__number {
    position: relative;
}

.stat-card__number::after {
    content:    '';
    position:   absolute;
    inset:      -8px -16px;
    background: radial-gradient(ellipse at center,
        rgba(200,169,81,0.08) 0%, transparent 70%);
    opacity:    0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    border-radius: 50%;
}

.stat-card:hover .stat-card__number::after {
    opacity: 1;
}

/* ─── ۲۸. ABOUT: Line animation on scroll ──────────────────── */
.about-content::before {
    transition: height 0.8s cubic-bezier(0.23,1,0.32,1);
}

/* ─── ۲۹. HEADER: Gold accent on scrolled state ────────────── */
.site-header.is-scrolled {
    border-bottom-color: rgba(200,169,81,0.12);
}

/* Subtle logo glow on scrolled header */
.site-header.is-scrolled .header__logo img {
    filter: brightness(1.0) drop-shadow(0 0 8px rgba(200,169,81,0.10));
}

/* ════════════════════════════════════════════════════════════
   HOME FAQ — mini accordion در صفحه اصلی
════════════════════════════════════════════════════════════ */
.home-faq {
    background: var(--bg-secondary, #0E0E0E);
    position: relative;
}
.home-faq::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.18) 30%, rgba(200,169,81,0.18) 70%, transparent);
    pointer-events: none;
}

.home-faq__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: clamp(36px, 5vw, 56px);
}
.home-faq__head .section-label { margin-bottom: 6px; }
.home-faq__head .section-heading { margin-bottom: 0; }

.home-faq__all {
    display:         inline-flex;
    align-items:     center;
    gap:             6px;
    font-family:     var(--font-fa, 'Vazirmatn', sans-serif);
    font-size:       clamp(13px, 1.1vw, 14px);
    font-weight:     600;
    color:           var(--gold, #C8A951);
    text-decoration: none;
    white-space:     nowrap;
    transition:      color 300ms ease, gap 300ms ease;
    flex-shrink:     0;
    align-self:      center;
    padding-bottom:  2px;
}
.home-faq__all:hover { color: var(--gold-light, #E8D5A0); gap: 10px; }

.home-faq__list {
    border-top: 1px solid rgba(200,169,81,0.10);
    max-width: 860px;
}

.home-faq__item {
    border-bottom: 1px solid rgba(200,169,81,0.10);
}

.home-faq__toggle {
    width:           100%;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             16px;
    padding:         clamp(18px, 2.4vw, 22px) 0;
    background:      transparent;
    border:          none;
    cursor:          pointer;
    text-align:      right;
    direction:       rtl;
}

.home-faq__question {
    font-family: var(--font-fa, 'Vazirmatn', sans-serif);
    font-size:   clamp(14px, 1.25vw, 16px);
    font-weight: 600;
    color:       var(--text-primary, #F0EDE8);
    line-height: 1.55;
    transition:  color 280ms ease;
}
.home-faq__toggle:hover .home-faq__question { color: var(--gold-light, #E8D5A0); }
.home-faq__item.is-open .home-faq__question { color: var(--gold, #C8A951); }

.home-faq__chevron {
    flex-shrink: 0;
    display:     inline-flex;
    color:       var(--gold, #C8A951);
    opacity:     0.65;
    transform:   rotate(90deg);
    transition:  transform 350ms cubic-bezier(0.16,1,0.3,1), opacity 280ms ease;
}
.home-faq__toggle:hover .home-faq__chevron { opacity: 1; }
.home-faq__item.is-open .home-faq__chevron { transform: rotate(-90deg); opacity: 1; }

.home-faq__panel {
    max-height: 0;
    overflow:   hidden;
    transition: max-height 400ms cubic-bezier(0.16,1,0.3,1);
}
.home-faq__answer {
    font-family: var(--font-fa, 'Vazirmatn', sans-serif);
    font-size:   clamp(13px, 1.1vw, 15px);
    color:       var(--text-secondary, #9A9590);
    line-height: 1.95;
    margin:      0;
    padding-bottom: clamp(18px, 2.5vw, 24px);
    max-width:   680px;
}

@media (max-width: 768px) {
    .home-faq__head { flex-direction: column; align-items: flex-start; }
    .home-faq__all  { align-self: flex-start; }
    .home-faq__list { max-width: 100%; }
}