/**
 * ECOIA — صفحه عضویت
 * Concept: "The Invitation" — Cinematic Dark Luxury
 * Inner Hero | Plans | Process (۵ مرحله) | Join Form (+Wallet) | CTA
 *
 * هم‌سطح کیفیت about.css:
 *  - همه transition‌ها: 400ms cubic-bezier(0.16, 1, 0.3, 1)
 *  - عدد/quote دکوراتیو پشت‌زمینه با opacity پایین
 *  - hover: lift + glow + خط طلایی
 *  - mobile-first با breakpoint های 1024 / 768 / 480
 *
 * نکته: کلاس‌ها با پیشوند mp- تا با بخش عضویتِ صفحه اصلی
 *       (.membership-section / .membership-card) تداخل نکنند.
 */

/* ════════════════════════════════════════════════════════════
   ۰. SKIP LINK
   (در home.css هست ولی global نیست — اینجا برای صفحه عضویت
    تعریف می‌شود تا تا قبل از focus مخفی بماند)
════════════════════════════════════════════════════════════ */

.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:   var(--radius-md, 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; }

/* ════════════════════════════════════════════════════════════
   ۱. SECTION-PAD — برای صفحه عضویت صریحاً تعریف می‌شود
════════════════════════════════════════════════════════════ */

.mp-plans.section-pad,
.mp-process.section-pad,
.mp-join.section-pad {
    padding-top:    var(--section-pad, clamp(80px, 10vw, 140px));
    padding-bottom: var(--section-pad, clamp(80px, 10vw, 140px));
}

/* ════════════════════════════════════════════════════════════
   ۲. INNER HERO  (هماهنگ با about — متغیر تصویر اختصاصی)
════════════════════════════════════════════════════════════ */

.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(--mp-hero-img, none);
    background-size:     cover;
    background-position: center 30%;
}

.inner-hero::before {
    content:  '';
    position: absolute;
    inset:    0;
    z-index:  1;
    background:
        radial-gradient(ellipse 80% 60% at 70% 80%, rgba(200,169,81,0.08) 0%, transparent 60%),
        linear-gradient(200deg, 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;
}

.inner-hero--has-image {
    background-position: center 25%;
}
.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%);
}

/* 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;
    left:       0;
    width:      420px;
    height:     1px;
    background: linear-gradient(90deg, 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;
    left:       80px;
    width:      200px;
    height:     1px;
    background: linear-gradient(90deg, rgba(200,169,81,0.25) 0%, transparent 100%);
}

.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__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;
}
.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;
}

/* ════════════════════════════════════════════════════════════
   ۳. PLANS — ۴ کارت قیمت
════════════════════════════════════════════════════════════ */

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

.mp-plans__grid {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   clamp(16px, 1.8vw, 24px);
    align-items:           stretch;
    margin-top:            clamp(52px, 7vh, 88px);
}

.mp-card {
    background:     var(--bg-card, #111111);
    border:         1px solid var(--border, #1A1A1A);
    border-radius:  var(--radius-md, 4px);
    padding:        clamp(32px, 3.4vw, 46px) clamp(22px, 2.4vw, 32px);
    display:        flex;
    flex-direction: column;
    position:       relative;
    overflow:       hidden;
    isolation:      isolate;
    transition:     transform   400ms cubic-bezier(0.16, 1, 0.3, 1),
                    border-color 400ms cubic-bezier(0.16, 1, 0.3, 1),
                    box-shadow   400ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* خط طلایی بالای کارت در hover */
.mp-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);
    z-index:    2;
}
.mp-card:hover {
    transform:    translateY(-8px);
    border-color: var(--border-gold, rgba(200,169,81,0.35));
    box-shadow:
        0 0 0 1px rgba(200,169,81,0.10),
        0 16px 48px rgba(0,0,0,0.50);
}
.mp-card:hover::after { right: 0; left: 0; opacity: 0.7; }

/* نوع عضویت (انگلیسی، بالا) */
.mp-card__type {
    font-family:    var(--font-body-en, 'Inter', 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, 22px);
    display:        block;
}

/* نام فارسی نوع */
.mp-card__name {
    font-family:   var(--font-fa, 'Vazirmatn', sans-serif);
    font-size:     clamp(17px, 1.7vw, 20px);
    font-weight:   700;
    color:         var(--text-primary, #F0EDE8);
    margin-bottom: clamp(14px, 1.8vh, 20px);
}

/* قیمت */
.mp-card__price {
    display:     flex;
    align-items: baseline;
    gap:         6px;
    margin-bottom: 4px;
}
.mp-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;
}
.mp-card__currency {
    font-family:    var(--font-body-en, 'Inter', sans-serif);
    font-size:      14px;
    font-weight:    500;
    color:          var(--text-secondary, #9A9590);
    letter-spacing: 0.05em;
}
.mp-card__period {
    font-family:   var(--font-fa, 'Vazirmatn', sans-serif);
    font-size:     12px;
    color:         var(--text-muted, #4A4845);
    margin-bottom: clamp(22px, 2.8vh, 30px);
}

/* جداکننده */
.mp-card__divider {
    height:        1px;
    background:    linear-gradient(90deg, transparent, rgba(200,169,81,0.18) 30%, rgba(200,169,81,0.18) 70%, transparent);
    margin-bottom: clamp(22px, 2.8vh, 30px);
    border:        none;
}

/* مزایا */
.mp-card__features {
    list-style:     none;
    padding:        0;
    margin:         0 0 clamp(28px, 3.4vh, 38px);
    flex:           1;
    display:        flex;
    flex-direction: column;
    gap:            clamp(11px, 1.3vh, 15px);
}
.mp-card__feature {
    display:     flex;
    align-items: flex-start;
    gap:         10px;
    font-family: var(--font-fa, 'Vazirmatn', sans-serif);
    font-size:   clamp(13px, 1.25vw, 14px);
    font-weight: 400;
    color:       var(--text-secondary, #9A9590);
    line-height: 1.6;
    direction:   rtl;
}
.mp-card__check {
    flex-shrink: 0;
    width:       16px;
    height:      16px;
    margin-top:  2px;
    color:       var(--gold, #C8A951);
}
.mp-card__check svg {
    width:        16px;
    height:       16px;
    stroke:       currentColor;
    fill:         none;
    stroke-width: 2.5;
}

/* CTA کارت */
.mp-card__cta {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    margin-top:      auto;
    width:           100%;
    padding:         13px 18px;
    border-radius:   var(--radius-md, 4px);
    font-family:     var(--font-fa, 'Vazirmatn', sans-serif);
    font-size:       var(--fs-small, 14px);
    font-weight:     600;
    text-decoration: none;
    border:          1px solid rgba(200,169,81,0.30);
    background:      transparent;
    color:           var(--gold, #C8A951);
    cursor:          pointer;
    transition:      background   400ms cubic-bezier(0.16, 1, 0.3, 1),
                     border-color 400ms cubic-bezier(0.16, 1, 0.3, 1),
                     color        300ms ease,
                     box-shadow   400ms cubic-bezier(0.16, 1, 0.3, 1);
}
.mp-card__cta svg { width: 16px; height: 16px; }
.mp-card__cta:hover {
    background:   rgba(200,169,81,0.08);
    border-color: rgba(200,169,81,0.6);
    color:        var(--gold-light, #E8D5A0);
    box-shadow:   0 0 22px rgba(200,169,81,0.14);
}

/* ─── کارت VIP — برجسته ─── */
.mp-card--featured {
    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);
}
.mp-card--featured:hover {
    box-shadow: 0 0 64px rgba(200,169,81,0.20),
                0 24px 48px rgba(0,0,0,0.60);
}
.mp-card--featured .mp-card__amount { color: var(--gold-bright, #F0E0A8); }
.mp-card--featured .mp-card__cta {
    background:   var(--gold, #C8A951);
    border-color: var(--gold, #C8A951);
    color:        var(--text-on-gold, #070707);
    font-weight:  700;
}
.mp-card--featured .mp-card__cta:hover {
    background: var(--gold-bright, #F0E0A8);
    box-shadow: 0 0 32px rgba(200,169,81,0.45);
    color:      var(--text-on-gold, #070707);
}

/* Badge بالای کارت */
.mp-card__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, 'Inter', 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;
    z-index:        3;
}
.mp-card--featured { margin-top: 0; }
.mp-card--featured .mp-card__type { margin-top: clamp(14px, 1.8vh, 22px); }

/* ─── کارت افتخاری — دعوتی ─── */
.mp-card--honorary .mp-card__badge {
    background:   transparent;
    color:        var(--gold-light, #E8D5A0);
    border:       1px solid rgba(200,169,81,0.4);
    border-top:   none;
    font-weight:  600;
}
.mp-card--honorary .mp-card__type { margin-top: clamp(14px, 1.8vh, 22px); }
.mp-card--honorary .mp-card__amount {
    font-size:   clamp(30px, 3.6vw, 44px);
    font-style:  italic;
}
.mp-card--honorary .mp-card__cta {
    border-style: dashed;
}

/* ════════════════════════════════════════════════════════════
   ۴. PROCESS — فرآیند ۵ مرحله‌ای
════════════════════════════════════════════════════════════ */

.mp-process {
    background: var(--bg-secondary, #0E0E0E);
    position:   relative;
    overflow:   hidden;
}
.mp-process::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;
}

.mp-steps {
    position:              relative;
    display:               grid;
    grid-template-columns: repeat(5, 1fr);
    gap:                   clamp(12px, 1.6vw, 24px);
    margin-top:            clamp(56px, 7vh, 92px);
    z-index:               1;
}

/* خط افقی پشت شماره‌ها */
.mp-steps__line {
    position:   absolute;
    top:        29px;
    right:      8%;
    left:       8%;
    height:     1px;
    background: rgba(200,169,81,0.15);
    z-index:    0;
}
.mp-steps__progress {
    position:         absolute;
    top:              28px;
    right:            8%;
    height:           2px;
    width:            84%;
    background:       linear-gradient(270deg, var(--gold, #C8A951) 0%, rgba(200,169,81,0.35) 70%, transparent 100%);
    transform-origin: right center;
    box-shadow:       0 0 12px rgba(200,169,81,0.35);
    z-index:          0;
}

.mp-step {
    position:   relative;
    text-align: center;
    z-index:    1;
}
.mp-step__num {
    width:           60px;
    height:          60px;
    margin:          0 auto clamp(18px, 2.4vh, 26px);
    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;
    font-family:     var(--font-fa, 'Vazirmatn', sans-serif);
    font-size:       22px;
    font-weight:     800;
    color:           var(--gold, #C8A951);
    line-height:     1;
    transition:      border-color 400ms cubic-bezier(0.16, 1, 0.3, 1),
                     box-shadow   400ms cubic-bezier(0.16, 1, 0.3, 1),
                     background    400ms cubic-bezier(0.16, 1, 0.3, 1);
}
.mp-step:hover .mp-step__num {
    border-color: var(--gold, #C8A951);
    background:   rgba(200,169,81,0.08);
    box-shadow:   0 0 24px rgba(200,169,81,0.35);
}
.mp-step__title {
    font-family:   var(--font-fa, 'Vazirmatn', sans-serif);
    font-size:     clamp(14px, 1.4vw, 16px);
    font-weight:   700;
    color:         var(--text-primary, #F0EDE8);
    margin-bottom: 10px;
    line-height:   1.4;
}
.mp-step__desc {
    font-family: var(--font-fa, 'Vazirmatn', sans-serif);
    font-size:   clamp(12px, 1.05vw, 13px);
    color:       var(--text-secondary, #9A9590);
    line-height: 1.8;
    padding:     0 clamp(4px, 1vw, 10px);
}

/* ════════════════════════════════════════════════════════════
   ۵. JOIN — فرم ثبت‌نام + باکس پرداخت + ستون کناری
════════════════════════════════════════════════════════════ */

.mp-join {
    background: var(--bg-primary, #0A0A0A);
    position:   relative;
}

.mp-join__grid {
    display:               grid;
    grid-template-columns: 1.55fr 1fr;
    gap:                   clamp(28px, 3.5vw, 56px);
    margin-top:            clamp(48px, 6vh, 76px);
    align-items:           start;
}

/* فرم */
.mp-form {
    background:    var(--bg-card, #111111);
    border:        1px solid var(--border-gold, rgba(200,169,81,0.18));
    border-radius: var(--radius-md, 4px);
    padding:       clamp(28px, 3.4vw, 48px);
    position:      relative;
    overflow:      hidden;
}
.mp-form__row-2 {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   clamp(14px, 1.6vw, 20px);
}

/* عنوان داخلی گروه‌ها */
.mp-form__legend {
    font-family:    var(--font-body-en, 'Inter', sans-serif);
    font-size:      11px;
    font-weight:    600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color:          var(--gold, #C8A951);
    margin:         clamp(20px, 2.6vh, 30px) 0 clamp(14px, 1.8vh, 20px);
    padding-bottom: 10px;
    border-bottom:  1px solid rgba(200,169,81,0.12);
    display:        flex;
    align-items:    center;
    gap:            8px;
}
.mp-form__legend:first-child { margin-top: 0; }
.mp-form__legend svg { width: 15px; height: 15px; }

/* باکس پرداخت — برجسته */
.mp-pay {
    background:    linear-gradient(135deg, var(--bg-input, #0D0D0D) 0%, #0c0a04 100%);
    border:        1px solid rgba(200,169,81,0.22);
    border-radius: var(--radius-md, 4px);
    padding:       clamp(18px, 2.4vw, 26px);
    margin-bottom: clamp(18px, 2.4vh, 26px);
}
.mp-pay__row {
    display:         flex;
    align-items:     baseline;
    justify-content: space-between;
    gap:             12px;
    flex-wrap:       wrap;
    margin-bottom:   16px;
}
.mp-pay__row-label {
    font-family: var(--font-fa, 'Vazirmatn', sans-serif);
    font-size:   var(--fs-small, 14px);
    color:       var(--text-secondary, #9A9590);
}
.mp-pay__amount {
    font-family: var(--font-display, 'Cormorant Garamond', serif);
    font-style:  italic;
    font-weight: 400;
    font-size:   clamp(26px, 3vw, 36px);
    color:       var(--gold-light, #E8D5A0);
    line-height: 1;
    direction:   ltr;
}
.mp-pay__amount-cur {
    font-family:   var(--font-body-en, 'Inter', sans-serif);
    font-size:     14px;
    color:         var(--text-secondary, #9A9590);
    margin-inline-start: 4px;
}
.mp-pay__network {
    display:        inline-flex;
    align-items:    center;
    gap:            6px;
    font-family:    var(--font-body-en, 'Inter', sans-serif);
    font-size:      11px;
    font-weight:    600;
    letter-spacing: 0.08em;
    color:          var(--gold, #C8A951);
    background:     var(--gold-muted, rgba(200,169,81,0.10));
    border:         1px solid var(--border-gold-faint, rgba(200,169,81,0.15));
    border-radius:  var(--radius-full, 9999px);
    padding:        3px 12px;
    direction:      ltr;
}
.mp-pay__hint {
    font-family:   var(--font-fa, 'Vazirmatn', sans-serif);
    font-size:     12px;
    color:         var(--text-muted, #4A4845);
    line-height:   1.7;
    margin-top:    12px;
}
.mp-pay__hint strong { color: var(--state-warning, #E8A020); font-weight: 600; }

/* دکمه ارسال */
.mp-form__submit {
    margin-top: clamp(22px, 2.8vh, 32px);
    width:      100%;
}

/* الزامی */
.mp-req { color: var(--state-error, #E05252); margin-inline-start: 3px; }

/* ستون کناری — اطمینان و راهنما */
.mp-aside {
    position:       sticky;
    top:            calc(var(--header-height, 80px) + 24px);
    display:        flex;
    flex-direction: column;
    gap:            clamp(16px, 2vh, 22px);
}
.mp-aside__panel {
    background:    var(--bg-card, #111111);
    border:        1px solid var(--border, #1A1A1A);
    border-radius: var(--radius-md, 4px);
    padding:       clamp(22px, 2.6vw, 30px);
}
.mp-aside__title {
    font-family:   var(--font-fa, 'Vazirmatn', sans-serif);
    font-size:     clamp(15px, 1.5vw, 17px);
    font-weight:   700;
    color:         var(--text-primary, #F0EDE8);
    margin:        0 0 clamp(14px, 1.8vh, 20px);
    display:       flex;
    align-items:   center;
    gap:           10px;
}
.mp-aside__title svg { width: 18px; height: 18px; color: var(--gold, #C8A951); flex-shrink: 0; }
.mp-aside__list {
    list-style:     none;
    margin:         0;
    padding:        0;
    display:        flex;
    flex-direction: column;
    gap:            clamp(12px, 1.5vh, 16px);
}
.mp-aside__item {
    display:     flex;
    align-items: flex-start;
    gap:         10px;
    font-family: var(--font-fa, 'Vazirmatn', sans-serif);
    font-size:   clamp(12px, 1.15vw, 13.5px);
    color:       var(--text-secondary, #9A9590);
    line-height: 1.7;
}
.mp-aside__item svg {
    width:       16px;
    height:      16px;
    margin-top:  2px;
    color:       var(--gold, #C8A951);
    flex-shrink: 0;
}
.mp-aside__note {
    font-family: var(--font-fa, 'Vazirmatn', sans-serif);
    font-size:   12px;
    color:       var(--text-muted, #4A4845);
    line-height: 1.8;
    margin:      0;
}
.mp-aside__note a { color: var(--gold-light, #E8D5A0); text-decoration: none; }
.mp-aside__note a:hover { text-decoration: underline; }

/* ─── پنل موفقیت (پس از ثبت) ─── */
.mp-success {
    max-width:     720px;
    margin:        clamp(40px, 6vh, 72px) auto 0;
    background:    var(--bg-card, #111111);
    border:        1px solid rgba(61,190,122,0.35);
    border-radius: var(--radius-md, 4px);
    padding:       clamp(36px, 5vw, 60px) clamp(28px, 4vw, 52px);
    text-align:    center;
    position:      relative;
    overflow:      hidden;
}
.mp-success::before {
    content:    '';
    position:   absolute;
    top:        0; right: 0; left: 0;
    height:     3px;
    background: linear-gradient(90deg, transparent, var(--state-success, #3DBE7A), transparent);
}
.mp-success__icon {
    width:           72px;
    height:          72px;
    margin:          0 auto clamp(20px, 3vh, 28px);
    border-radius:   50%;
    border:          1px solid rgba(61,190,122,0.4);
    background:      var(--state-success-bg, rgba(61,190,122,0.08));
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           var(--state-success, #3DBE7A);
}
.mp-success__icon svg { width: 34px; height: 34px; stroke-width: 2; }
.mp-success__title {
    font-family:   var(--font-fa, 'Vazirmatn', sans-serif);
    font-size:     clamp(22px, 2.8vw, 32px);
    font-weight:   700;
    color:         var(--text-primary, #F0EDE8);
    margin:        0 0 clamp(14px, 2vh, 20px);
}
.mp-success__text {
    font-family: var(--font-fa, 'Vazirmatn', sans-serif);
    font-size:   clamp(14px, 1.4vw, 16px);
    color:       var(--text-secondary, #9A9590);
    line-height: 2;
    max-width:   520px;
    margin:      0 auto clamp(28px, 4vh, 40px);
}
.mp-success__steps {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   clamp(14px, 2vw, 22px);
    margin-bottom:         clamp(28px, 4vh, 40px);
    text-align:            right;
}
.mp-success__step {
    background:    var(--bg-input, #0D0D0D);
    border:        1px solid var(--border, #1A1A1A);
    border-radius: var(--radius-md, 4px);
    padding:       clamp(14px, 1.8vw, 20px);
}
.mp-success__step-num {
    font-family: var(--font-body-en, 'Inter', sans-serif);
    font-size:   12px;
    font-weight: 700;
    color:       var(--gold, #C8A951);
    display:     block;
    margin-bottom: 8px;
}
.mp-success__step-text {
    font-family: var(--font-fa, 'Vazirmatn', sans-serif);
    font-size:   13px;
    color:       var(--text-secondary, #9A9590);
    line-height: 1.7;
}

/* ════════════════════════════════════════════════════════════
   ۶. CTA STRIP — هماهنگ با about-cta
════════════════════════════════════════════════════════════ */

.mp-cta {
    background: var(--bg-void, #070707);
    padding:    clamp(96px, 12vw, 152px) 0;
    text-align: center;
    position:   relative;
    overflow:   hidden;
}
.mp-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;
}
.mp-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;
}
.mp-cta .container { position: relative; z-index: 1; }
.mp-cta .container::before,
.mp-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);
}
.mp-cta .container::before { top:    calc(-1 * clamp(44px, 6vw, 74px)); }
.mp-cta .container::after  { bottom: calc(-1 * clamp(44px, 6vw, 74px)); }

.mp-cta__label {
    font-family:    var(--font-body-en, 'Inter', 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);
    display:        block;
}
.mp-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);
    line-height:   1.3;
}
.mp-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);
    line-height: 2;
}
.mp-cta__actions {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             20px;
    flex-wrap:       wrap;
}

/* ════════════════════════════════════════════════════════════
   ۷. BUTTON OVERRIDES — برابری بصری با about-cta
════════════════════════════════════════════════════════════ */

.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;
    font-size: var(--fs-body, 15px);
    gap:       10px;
}

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

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

    .mp-plans.section-pad,
    .mp-process.section-pad,
    .mp-join.section-pad {
        padding-top:    clamp(56px, 8vw, 80px);
        padding-bottom: clamp(56px, 8vw, 80px);
    }

    .mp-plans__grid { grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 2.4vw, 22px); }

    /* فرآیند: ۵ ستون سنگین است → سطر دوم */
    .mp-steps { grid-template-columns: repeat(3, 1fr); row-gap: clamp(32px, 5vw, 44px); }
    .mp-steps__line,
    .mp-steps__progress { display: none; }

    /* فرم: تک‌ستونه، ستون کناری زیر فرم */
    .mp-join__grid { grid-template-columns: 1fr; gap: clamp(24px, 4vw, 36px); }
    .mp-aside { position: static; }
}

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

    .mp-plans.section-pad,
    .mp-process.section-pad,
    .mp-join.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);
    }

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

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

    .mp-plans.section-pad,
    .mp-process.section-pad,
    .mp-join.section-pad {
        padding-top:    clamp(36px, 6vw, 52px);
        padding-bottom: clamp(36px, 6vw, 52px);
    }

    .breadcrumb { font-size: 11px; }

    .mp-plans__grid { grid-template-columns: 1fr; }
    .mp-steps       { grid-template-columns: 1fr; gap: clamp(20px, 6vw, 28px); }
    .mp-form__row-2 { grid-template-columns: 1fr; }

    .mp-pay__row { flex-direction: column; align-items: flex-start; gap: 6px; }

    .mp-cta__actions {
        flex-direction: column;
        align-items:    stretch;
        gap:            12px;
    }
    .mp-cta__actions .btn { width: 100%; justify-content: center; }
}