/**
 * ECOIA — تماس با ما (نسخه ۲)
 * Concept: "The Hub" — مرکز ارتباطی با همه کانال‌ها
 *
 * ساختار:
 *   ① inner-hero + capabilities list
 *   ② channels-bento (grid 6 کانال)
 *   ③ phone-strip
 *   ④ contact-main (form + aside)
 *
 * Channel Bento Layout (6col):
 *   Row 1: [WA span3] [TG span3]
 *   Row 2: [IG span2] [LI span2] [Email span2]
 */

/* ════════════════════════════════════════════════════════════
   ۰. GLOBALS
════════════════════════════════════════════════════════════ */

.skip-link {
    position: absolute; top: -100%; right: 0;
    z-index: var(--z-preloader, 9999);
    background: var(--gold, #C8A951); color: var(--bg-void, #070707);
    padding: 8px 18px; font-size: 13px; font-weight: 700;
    font-family: var(--font-fa, 'Vazirmatn', sans-serif); transition: top 200ms ease;
}
.skip-link:focus { top: 0; }

.contact-channels.section-pad,
.contact-main.section-pad {
    padding-top: var(--section-pad, clamp(80px, 10vw, 140px));
    padding-bottom: var(--section-pad, clamp(80px, 10vw, 140px));
}

/* ════════════════════════════════════════════════════════════
   ① INNER HERO
════════════════════════════════════════════════════════════ */

.inner-hero {
    position: relative; width: 100%;
    min-height: clamp(56vh, 74vh, 680px);
    display: flex; align-items: flex-end;
    padding-bottom: clamp(64px, 9vw, 108px);
    overflow: hidden; background-color: var(--bg-void, #070707);
    background-size: cover; background-position: center 30%;
}
.inner-hero.contact-hero.inner-hero--has-image {
    background-image: var(--contact-hero-img, none);
    background-position: center 35%;
}
.inner-hero::before {
    content: ''; position: absolute; inset: 0; z-index: 1;
    background:
        radial-gradient(ellipse 75% 55% at 25% 75%, rgba(200,169,81,0.09) 0%, transparent 60%),
        linear-gradient(to bottom, rgba(7,7,7,0.25) 0%, rgba(7,7,7,0.65) 50%, rgba(7,7,7,0.97) 100%);
    pointer-events: none;
}
.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.20) 0%, rgba(7,7,7,0.40) 35%, rgba(7,7,7,0.85) 65%, rgba(7,7,7,0.97) 100%);
}
.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='g'%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(%23g)'/%3E%3C/svg%3E");
    background-size: 200px 200px; opacity: 0.030; pointer-events: none; mix-blend-mode: overlay;
}
.inner-hero__accent {
    position: absolute; top: 0; right: 0; width: 420px; height: 1px; z-index: 3; opacity: 0.7;
    background: linear-gradient(270deg, var(--gold, #C8A951) 0%, rgba(200,169,81,0.3) 60%, transparent 100%);
}
.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__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 {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: clamp(24px, 3.5vh, 36px);
    font-family: var(--font-fa, 'Vazirmatn', sans-serif);
    font-size: 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); text-decoration: none; transition: color 400ms ease; }
.breadcrumb a:hover { color: var(--gold-light, #E8D5A0); }
.breadcrumb__sep { color: var(--gold); 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(36px, 5vw, 66px); font-weight: 700;
    color: var(--text-primary, #F0EDE8); line-height: 1.15;
    margin: 0 0 18px 0; letter-spacing: -0.02em;
}
.inner-hero__subtitle {
    font-family: var(--font-display, 'Cormorant Garamond', serif);
    font-size: clamp(18px, 2.3vw, 28px); font-style: italic;
    color: var(--gold-light, #E8D5A0); letter-spacing: 0.02em;
    margin: 0 0 clamp(24px, 3.5vh, 36px); opacity: 0.82;
}

/* capabilities list */
.contact-hero-caps {
    display:     flex;
    flex-wrap:   wrap;
    gap:         clamp(10px, 2vw, 18px);
    list-style:  none;
    padding:     0;
    margin:      0;
}
.contact-hero-caps li {
    display:        inline-flex;
    align-items:    center;
    gap:            7px;
    padding:        7px 14px;
    border:         1px solid rgba(200,169,81,0.22);
    border-radius:  2px;
    background:     rgba(200,169,81,0.05);
    font-family:    var(--font-fa, 'Vazirmatn', sans-serif);
    font-size:      clamp(11px, 1vw, 13px);
    color:          var(--gold-light, #E8D5A0);
    backdrop-filter: blur(4px);
}
.contact-hero-caps li .icon { opacity: 0.70; flex-shrink: 0; }

/* ════════════════════════════════════════════════════════════
   ② CHANNELS BENTO — grid نامتقارن
════════════════════════════════════════════════════════════ */

.contact-channels {
    background: var(--bg-primary, #0A0A0A); position: relative; overflow: hidden;
}
.contact-channels::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.20) 30%, rgba(200,169,81,0.20) 70%, transparent);
    pointer-events: none;
}

.channels-bento {
    display:               grid;
    grid-template-columns: repeat(6, 1fr);
    gap:                   1px;
    background:            rgba(200,169,81,0.10);
    border:                1px solid rgba(200,169,81,0.10);
    border-radius:         var(--radius-md, 4px);
    overflow:              hidden;
    margin-top:            clamp(48px, 6.5vh, 80px);
}

/* ─── کارت پایه ── */
.ch-card {
    background:      var(--bg-card, #111111);
    padding:         clamp(28px, 4vw, 44px) clamp(24px, 3.5vw, 40px);
    display:         flex;
    flex-direction:  column;
    gap:             0;
    text-decoration: none;
    position:        relative;
    overflow:        hidden;
    cursor:          pointer;
    isolation:       isolate;
    transition:
        background   400ms cubic-bezier(0.16, 1, 0.3, 1),
        border-color 400ms cubic-bezier(0.16, 1, 0.3, 1);
    min-height:      clamp(200px, 22vw, 280px);
}
.ch-card:hover { background: var(--bg-card-hover, #161616); }

/* خط بالا sweep */
.ch-card::before {
    content:    '';
    position:   absolute; top: 0; right: 0; left: 100%; height: 2px;
    background: linear-gradient(270deg, var(--gold, #C8A951), rgba(200,169,81,0.2));
    z-index:    3; transition: left 500ms cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}
.ch-card:hover::before { left: 0; }

/* گلوا / glow */
.ch-card__glow {
    position: absolute; inset: 0; z-index: 2; pointer-events: none;
}

/* accent blur — هر کانال رنگ خودش را دارد */
.ch-card__accent {
    position:   absolute;
    bottom:     -40%; right: -20%;
    width:      200px; height: 200px;
    border-radius: 50%;
    opacity:    0;
    pointer-events: none; z-index: 1;
    transition: opacity 500ms ease;
}
.ch-card:hover .ch-card__accent { opacity: 1; }

.ch-card--whatsapp  .ch-card__accent { background: radial-gradient(circle, rgba(37,211,102,0.10) 0%, transparent 70%); }
.ch-card--telegram  .ch-card__accent { background: radial-gradient(circle, rgba(42,171,238,0.10) 0%, transparent 70%); }
.ch-card--instagram .ch-card__accent { background: radial-gradient(circle, rgba(225,48,108,0.08) 0%, transparent 70%); }
.ch-card--linkedin  .ch-card__accent { background: radial-gradient(circle, rgba(10,102,194,0.10) 0%, transparent 70%); }
.ch-card--email     .ch-card__accent { background: radial-gradient(circle, rgba(200,169,81,0.12) 0%, transparent 70%); }

/* ─── Grid Placement ── */
/* Row 1: WhatsApp (col 1-3) | Telegram (col 4-6) */
.ch-card--whatsapp  { grid-column: 1 / 4; }
.ch-card--telegram  { grid-column: 4 / 7; }
/* Row 2: Instagram (2) | LinkedIn (2) | Email (2) */
.ch-card--instagram { grid-column: 1 / 3; }
.ch-card--linkedin  { grid-column: 3 / 5; }
.ch-card--email     { grid-column: 5 / 7; }

/* row 1: بلندتر */
.ch-card--whatsapp,
.ch-card--telegram { min-height: clamp(240px, 26vw, 320px); }

/* آیکون */
.ch-card__icon {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           64px; height: 64px;
    border:          1px solid rgba(200,169,81,0.14);
    border-radius:   var(--radius-md, 4px);
    background:      rgba(200,169,81,0.05);
    color:           var(--gold, #C8A951);
    margin-bottom:   clamp(22px, 3.2vh, 32px);
    position:        relative; z-index: 4;
    flex-shrink:     0;
    transition:
        transform    450ms cubic-bezier(0.34, 1.56, 0.64, 1),
        border-color 400ms ease,
        background   400ms ease;
}
.ch-card:hover .ch-card__icon {
    transform: scale(1.10) rotate(-3deg);
    border-color: rgba(200,169,81,0.38);
    background:   rgba(200,169,81,0.10);
}

/* رنگ‌های آیکون */
.ch-card--whatsapp  .ch-card__icon { border-color: rgba(37,211,102,0.20); background: rgba(37,211,102,0.05); color: #4CAF6F; }
.ch-card--whatsapp:hover  .ch-card__icon { border-color: rgba(37,211,102,0.45); background: rgba(37,211,102,0.10); }
.ch-card--telegram  .ch-card__icon { border-color: rgba(42,171,238,0.20); background: rgba(42,171,238,0.05); color: #4BA8D4; }
.ch-card--telegram:hover  .ch-card__icon { border-color: rgba(42,171,238,0.45); background: rgba(42,171,238,0.10); }
.ch-card--instagram .ch-card__icon { border-color: rgba(225,48,108,0.18); background: rgba(225,48,108,0.04); color: #E64D8A; }
.ch-card--instagram:hover .ch-card__icon { border-color: rgba(225,48,108,0.40); background: rgba(225,48,108,0.08); }
.ch-card--linkedin  .ch-card__icon { border-color: rgba(10,102,194,0.20); background: rgba(10,102,194,0.05); color: #4D9ED6; }
.ch-card--linkedin:hover  .ch-card__icon { border-color: rgba(10,102,194,0.45); background: rgba(10,102,194,0.10); }

/* body */
.ch-card__body {
    flex: 1; position: relative; z-index: 4;
    margin-bottom: clamp(20px, 3vh, 28px);
}
.ch-card__title {
    font-family: var(--font-fa, 'Vazirmatn', sans-serif);
    font-size: clamp(18px, 2vw, 24px); font-weight: 700;
    color: var(--text-primary, #F0EDE8); line-height: 1.3;
    margin-bottom: 8px; letter-spacing: -0.01em;
    transition: color 350ms ease;
}
.ch-card:hover .ch-card__title { color: var(--gold-light, #E8D5A0); }

.ch-card__desc {
    font-family: var(--font-fa, 'Vazirmatn', sans-serif);
    font-size: clamp(12px, 1.1vw, 14px); color: var(--text-secondary, #9A9590);
    line-height: 1.75; margin-bottom: 10px;
}
.ch-card__meta {
    display: block; font-family: var(--font-body-en, 'Inter', sans-serif);
    font-size: clamp(11px, 1vw, 13px); color: var(--gold, #C8A951);
    opacity: 0.55; transition: opacity 350ms ease; letter-spacing: 0.02em;
}
.ch-card:hover .ch-card__meta { opacity: 0.90; }

/* دکمه hover */
.ch-card__btn {
    display:         inline-flex; align-items: center; gap: 7px;
    font-family:     var(--font-fa, 'Vazirmatn', sans-serif);
    font-size:       12px; font-weight: 700; color: var(--gold, #C8A951);
    letter-spacing:  0.06em; position: relative; z-index: 4;
    opacity: 0; transform: translateY(10px);
    transition: opacity 380ms ease, transform 380ms cubic-bezier(0.16, 1, 0.3, 1);
}
.ch-card:hover .ch-card__btn { opacity: 1; transform: translateY(0); }
.ch-card__btn .icon { transition: transform 300ms ease; }
.ch-card:hover .ch-card__btn .icon { transform: translateX(-3px); }

/* focus */
.ch-card:focus-visible { outline: 2px solid var(--gold, #C8A951); outline-offset: 3px; }

/* ════════════════════════════════════════════════════════════
   ③ PHONE STRIP
════════════════════════════════════════════════════════════ */

.phone-strip {
    background: var(--bg-void, #070707);
    padding: clamp(20px, 3.5vw, 30px) 0;
    position: relative;
}
.phone-strip::before,
.phone-strip::after {
    content: ''; position: absolute; right: 0; left: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(200,169,81,0.18) 25%, rgba(200,169,81,0.18) 75%, transparent);
    pointer-events: none;
}
.phone-strip::before { top: 0; }
.phone-strip::after  { bottom: 0; }

.phone-strip__inner {
    display:         flex;
    align-items:     center;
    gap:             clamp(20px, 4vw, 48px);
    flex-wrap:       wrap;
}

.phone-strip__label {
    display:        inline-flex;
    align-items:    center;
    gap:            8px;
    font-family:    var(--font-body-en, 'Inter', sans-serif);
    font-size:      11px;
    font-weight:    700;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    color:          var(--gold, #C8A951);
    opacity:        0.65;
    white-space:    nowrap;
    flex-shrink:    0;
}
.phone-strip__label .icon { opacity: 0.80; }

.phone-strip__numbers {
    display:     flex;
    align-items: center;
    gap:         clamp(16px, 3vw, 32px);
    flex-wrap:   wrap;
}

.phone-strip__num {
    font-family:     var(--font-body-en, 'Inter', sans-serif);
    font-size:       clamp(14px, 1.4vw, 17px);
    font-weight:     600;
    color:           var(--text-primary, #F0EDE8);
    text-decoration: none;
    letter-spacing:  0.03em;
    transition:      color 300ms ease;
    position:        relative;
}
.phone-strip__num::after {
    content:    '';
    position:   absolute;
    bottom:     -2px; right: 0; left: 100%;
    height:     1px;
    background: var(--gold, #C8A951);
    transition: left 300ms cubic-bezier(0.16, 1, 0.3, 1);
}
.phone-strip__num:hover { color: var(--gold-light, #E8D5A0); }
.phone-strip__num:hover::after { left: 0; }

/* ════════════════════════════════════════════════════════════
   ④ CONTACT MAIN — فرم + aside
════════════════════════════════════════════════════════════ */

.contact-main {
    background: var(--bg-secondary, #0E0E0E); position: relative;
}
.contact-main::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.20) 30%, rgba(200,169,81,0.20) 70%, transparent);
    pointer-events: none;
}

.contact-main__grid {
    display: grid; grid-template-columns: 1.4fr 1fr;
    gap: clamp(48px, 7vw, 96px); align-items: start;
}

/* ── ستون فرم ── */
.contact-form-col__title {
    font-family: var(--font-fa, 'Vazirmatn', sans-serif);
    font-size: clamp(22px, 2.5vw, 32px); font-weight: 700;
    color: var(--text-primary, #F0EDE8); line-height: 1.3;
    margin-bottom: clamp(20px, 3vh, 32px); letter-spacing: -0.01em;
}

/* alert */
.ct-alert {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 16px 18px; border-radius: var(--radius-md, 4px);
    margin-bottom: 24px;
    font-family: var(--font-fa, 'Vazirmatn', sans-serif); font-size: 14px; line-height: 1.7;
}
.ct-alert--ok  { background: rgba(34,197,94,0.08);  border: 1px solid rgba(34,197,94,0.25);  color: #4ade80; }
.ct-alert--err { background: rgba(239,68,68,0.08);  border: 1px solid rgba(239,68,68,0.25);  color: #f87171; }
.ct-alert--err ul { margin: 0; padding: 0 16px 0 0; list-style: disc; }
.ct-alert--err li { margin-bottom: 2px; }
.ct-alert .icon { flex-shrink: 0; margin-top: 1px; }

/* ── Purpose Tabs ── */
.ct-purposes {
    display:   flex;
    flex-wrap: wrap;
    gap:       8px;
    margin-bottom: clamp(24px, 3.5vh, 36px);
}

.ct-purpose-tab {
    display:        inline-flex;
    align-items:    center;
    gap:            7px;
    padding:        9px 16px;
    background:     rgba(255,255,255,0.02);
    border:         1px solid rgba(200,169,81,0.12);
    border-radius:  2px;
    font-family:    var(--font-fa, 'Vazirmatn', sans-serif);
    font-size:      clamp(12px, 1.1vw, 14px);
    font-weight:    600;
    color:          var(--text-secondary, #9A9590);
    cursor:         pointer;
    transition:
        border-color 300ms ease,
        background   300ms ease,
        color        300ms ease;
    flex-shrink:    0;
}
.ct-purpose-tab .icon { opacity: 0.55; transition: opacity 300ms ease; flex-shrink: 0; }
.ct-purpose-tab:hover {
    border-color: rgba(200,169,81,0.32);
    background:   rgba(200,169,81,0.06);
    color:        var(--text-primary, #F0EDE8);
}
.ct-purpose-tab:hover .icon { opacity: 0.85; }
.ct-purpose-tab.is-active {
    border-color: var(--gold, #C8A951);
    background:   rgba(200,169,81,0.10);
    color:        var(--gold-light, #E8D5A0);
}
.ct-purpose-tab.is-active .icon { opacity: 1; color: var(--gold, #C8A951); }

/* فرم */
.ct-form { display: flex; flex-direction: column; gap: clamp(20px, 3vh, 28px); }

.cf-row { display: flex; gap: clamp(16px, 2.5vw, 24px); }
.cf-row > .cf-field { flex: 1; min-width: 0; }
.cf-field { display: flex; flex-direction: column; gap: 8px; }

.cf-label {
    font-family: var(--font-fa, 'Vazirmatn', sans-serif);
    font-size: 12px; font-weight: 600;
    color: var(--text-secondary, #9A9590); letter-spacing: 0.03em;
    display: flex; align-items: center; gap: 4px;
    transition: color 300ms ease;
}
.cf-field:focus-within .cf-label { color: var(--gold-light, #E8D5A0); }
.cf-req { color: var(--gold, #C8A951); }

.cf-wrap { position: relative; }

.cf-input {
    width: 100%; background: rgba(255,255,255,0.03);
    border: 1px solid rgba(200,169,81,0.14); border-radius: var(--radius-sm, 2px);
    padding: clamp(12px, 1.8vw, 15px) clamp(14px, 2vw, 18px);
    font-family: var(--font-fa, 'Vazirmatn', sans-serif);
    font-size: clamp(13px, 1.15vw, 15px); color: var(--text-primary, #F0EDE8);
    outline: none; display: block;
    transition: border-color 300ms ease, background 300ms ease;
}
.cf-input::placeholder { color: rgba(154,149,144,0.50); }
.cf-input:hover  { border-color: rgba(200,169,81,0.28); }
.cf-input:focus  { border-color: rgba(200,169,81,0.55); background: rgba(200,169,81,0.04); }

/* خط انیمیشن‌دار */
.cf-line {
    position: absolute; bottom: 0; right: 50%; left: 50%; height: 2px;
    background: var(--gold, #C8A951);
    transition: right 350ms cubic-bezier(0.16, 1, 0.3, 1),
                left  350ms cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}
.cf-input:focus ~ .cf-line { right: 0; left: 0; }

.cf-ta { resize: vertical; min-height: 120px; max-height: 340px; line-height: 1.75; }
.cf-wrap--ta .cf-line { display: none; }
.cf-ta:focus { border-color: rgba(200,169,81,0.55); background: rgba(200,169,81,0.04); }

.cf-hint {
    font-family: var(--font-fa, 'Vazirmatn', sans-serif);
    font-size: 11px; color: var(--text-secondary); opacity: 0.60;
    align-self: flex-end;
}

.cf-actions {
    display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
    padding-top: clamp(12px, 2vh, 20px); border-top: 1px solid rgba(200,169,81,0.08);
}
.cf-privacy {
    font-family: var(--font-fa, 'Vazirmatn', sans-serif);
    font-size: 12px; color: var(--text-secondary); opacity: 0.65;
    max-width: 240px; line-height: 1.65;
}

/* ── Aside ── */
.contact-aside { position: sticky; top: 100px; display: flex; flex-direction: column; gap: clamp(12px, 1.8vw, 16px); }

.ca-block {
    display: flex; align-items: flex-start; gap: clamp(12px, 1.8vw, 18px);
    padding: clamp(16px, 2.2vw, 22px) clamp(18px, 2.5vw, 26px);
    background: var(--bg-card, #111111);
    border: 1px solid rgba(200,169,81,0.10); border-radius: var(--radius-md, 4px);
}
.ca-block--link {
    text-decoration: none; cursor: pointer;
    transition: border-color 350ms ease, background 350ms ease;
}
.ca-block--link:hover { border-color: rgba(200,169,81,0.30); background: var(--bg-card-hover, #161616); }

.ca-block__icon {
    display: flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; flex-shrink: 0;
    border: 1px solid rgba(200,169,81,0.15); border-radius: var(--radius-sm, 2px);
    background: rgba(200,169,81,0.05); color: var(--gold, #C8A951);
    transition: border-color 350ms ease, background 350ms ease;
}
.ca-block--link:hover .ca-block__icon { border-color: rgba(200,169,81,0.38); background: rgba(200,169,81,0.10); }

.ca-block__label {
    font-family: var(--font-body-en, 'Inter', sans-serif);
    font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--gold, #C8A951); opacity: 0.55; margin-bottom: 4px; display: block;
}
.ca-block__main {
    font-family: var(--font-fa, 'Vazirmatn', sans-serif);
    font-size: clamp(13px, 1.15vw, 15px); font-weight: 700;
    color: var(--text-primary, #F0EDE8); line-height: 1.4; margin-bottom: 3px;
    transition: color 350ms ease;
}
.ca-block--link:hover .ca-block__main { color: var(--gold-light, #E8D5A0); }
.ca-block__sub {
    font-family: var(--font-body-en, 'Inter', sans-serif);
    font-size: 11px; color: var(--text-secondary); opacity: 0.65; line-height: 1.5; margin: 0;
}

/* response indicator */
.ca-response { position: relative; }
.ca-response__dot {
    position: absolute; top: 18px; left: 18px;
    width: 8px; height: 8px; border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34,197,94,0.15);
    animation: pulseDot 2s ease-in-out infinite;
}
@keyframes pulseDot {
    0%, 100% { box-shadow: 0 0 0 3px rgba(34,197,94,0.15); }
    50%       { box-shadow: 0 0 0 6px rgba(34,197,94,0.05); }
}

/* socials */
.ca-socials {
    padding: clamp(16px, 2.2vw, 22px) clamp(18px, 2.5vw, 26px);
    background: var(--bg-card, #111111);
    border: 1px solid rgba(200,169,81,0.10); border-radius: var(--radius-md, 4px);
}
.ca-socials__label {
    font-family: var(--font-body-en, 'Inter', sans-serif);
    font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--gold, #C8A951); opacity: 0.55; margin-bottom: 14px; display: block;
}
.ca-socials__row { display: flex; gap: 10px; flex-wrap: wrap; }

.ca-social {
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    border: 1px solid rgba(200,169,81,0.14); border-radius: var(--radius-sm, 2px);
    background: rgba(200,169,81,0.04); color: var(--text-secondary, #9A9590);
    text-decoration: none;
    transition: border-color 350ms ease, background 350ms ease, color 350ms ease;
}
.ca-social:hover { border-color: rgba(200,169,81,0.38); background: rgba(200,169,81,0.09); color: var(--gold, #C8A951); }

/* دکمه */
.btn--gold {
    background: var(--gold, #C8A951); color: var(--bg-void, #070707);
    border: 1px solid var(--gold, #C8A951); font-weight: 700;
    transition: background 400ms ease, box-shadow 400ms ease, transform 300ms ease;
}
.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 28px; font-size: var(--fs-body, 15px); gap: 10px; }

/* ════════════════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════════════════ */

/* ≤ 1100px */
@media (max-width: 1100px) {
    .contact-channels.section-pad, .contact-main.section-pad {
        padding-top: clamp(56px, 8vw, 80px); padding-bottom: clamp(56px, 8vw, 80px);
    }
    .channels-bento { grid-template-columns: repeat(4, 1fr); }
    .ch-card--whatsapp  { grid-column: 1 / 3; }
    .ch-card--telegram  { grid-column: 3 / 5; }
    .ch-card--instagram { grid-column: 1 / 3; }
    .ch-card--linkedin  { grid-column: 3 / 5; }
    .ch-card--email     { grid-column: 1 / 5; }
    .contact-main__grid { grid-template-columns: 1fr; gap: clamp(40px, 6vh, 60px); }
    .contact-aside      { position: static; }
}

/* ≤ 768px */
@media (max-width: 768px) {
    .contact-channels.section-pad, .contact-main.section-pad {
        padding-top: clamp(44px, 7vw, 64px); padding-bottom: clamp(44px, 7vw, 64px);
    }
    .inner-hero    { min-height: 50vh; padding-bottom: clamp(44px, 7vw, 72px); }
    .inner-hero__title { font-size: clamp(30px, 7vw, 46px); }
    .contact-hero-caps { gap: 8px; }
    .contact-hero-caps li { font-size: 11px; padding: 5px 10px; }

    .channels-bento { grid-template-columns: repeat(2, 1fr); }
    .ch-card--whatsapp  { grid-column: 1/2; }
    .ch-card--telegram  { grid-column: 2/3; }
    .ch-card--instagram { grid-column: 1/2; }
    .ch-card--linkedin  { grid-column: 2/3; }
    .ch-card--email     { grid-column: 1/3; }

    .cf-row         { flex-direction: column; gap: clamp(20px, 3vh, 28px); }
    .ct-purposes    { gap: 6px; }
    .ct-purpose-tab { font-size: 11px; padding: 7px 12px; }
    .phone-strip__inner { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ≤ 480px */
@media (max-width: 480px) {
    .inner-hero__title { font-size: clamp(26px, 6.5vw, 36px); }
    .channels-bento     { grid-template-columns: 1fr; }
    .ch-card--whatsapp, .ch-card--telegram, .ch-card--instagram,
    .ch-card--linkedin, .ch-card--email { grid-column: 1; }
    .cf-actions { flex-direction: column; gap: 12px; }
    .cf-actions .btn { width: 100%; justify-content: center; }
    .breadcrumb { font-size: 11px; }
}

/* ════════════════════════════════════════════════════════════
   FAQ GATE — بخش "پیش از ارسال پیام"
════════════════════════════════════════════════════════════ */
.ct-faq-gate {
    background: var(--bg-void, #070707);
    padding:    clamp(72px, 10vw, 120px) 0;
    position:   relative;
    overflow:   hidden;
}
.ct-faq-gate__grain {
    position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%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(%23g)'/%3E%3C/svg%3E");
    background-size: 200px 200px; opacity: 0.022; mix-blend-mode: overlay;
}
/* glow مرکزی */
.ct-faq-gate::before {
    content: ''; position: absolute; top: 50%; right: 10%; transform: translateY(-50%);
    width: 500px; height: 500px; border-radius: 50%; pointer-events: none; z-index: 0;
    background: radial-gradient(circle, rgba(200,169,81,0.06) 0%, transparent 65%);
}
/* خط جداکننده بالا */
.ct-faq-gate::after {
    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);
}

.ct-faq-gate__inner {
    display:     grid;
    grid-template-columns: 1fr 1.15fr;
    gap:         clamp(56px, 8vw, 100px);
    align-items: center;
    position:    relative;
    z-index:     1;
}

/* ── intro ── */
.ct-faq-gate__tag {
    display:        inline-flex;
    align-items:    center;
    gap:            7px;
    font-family:    var(--font-body-en, 'Inter', sans-serif);
    font-size:      11px;
    font-weight:    700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color:          var(--gold, #C8A951);
    margin-bottom:  clamp(18px, 3vh, 26px);
    display:        block;
}
.ct-faq-gate__title {
    font-family:    var(--font-fa, 'Vazirmatn', sans-serif);
    font-size:      clamp(26px, 3.2vw, 44px);
    font-weight:    700;
    color:          var(--text-primary, #F0EDE8);
    line-height:    1.25;
    margin-bottom:  clamp(14px, 2.5vh, 20px);
    letter-spacing: -0.015em;
}
.ct-faq-gate__em {
    font-style: normal;
    color:      var(--gold, #C8A951);
    position:   relative;
}
.ct-faq-gate__em::after {
    content: '';
    position: absolute; bottom: -4px; right: 0; left: 0; height: 1px;
    background: linear-gradient(270deg, var(--gold, #C8A951), transparent);
    opacity: 0.5;
}
.ct-faq-gate__desc {
    font-family: var(--font-fa, 'Vazirmatn', sans-serif);
    font-size:   clamp(13px, 1.2vw, 15.5px);
    color:       var(--text-secondary, #9A9590);
    line-height: 2;
    margin-bottom: clamp(28px, 4.5vh, 40px);
    max-width:   380px;
}
.ct-faq-gate__actions {
    display:        flex;
    flex-direction: column;
    gap:            14px;
}
.ct-faq-gate__cta-link {
    display:         inline-flex;
    align-items:     center;
    gap:             8px;
    padding:         13px 24px;
    background:      var(--gold, #C8A951);
    color:           var(--bg-void, #070707);
    font-family:     var(--font-fa, 'Vazirmatn', sans-serif);
    font-size:       clamp(13px, 1.15vw, 15px);
    font-weight:     700;
    border-radius:   var(--radius-md, 4px);
    text-decoration: none;
    transition:      background 350ms ease, transform 300ms ease, box-shadow 350ms ease;
    align-self:      flex-start;
}
.ct-faq-gate__cta-link:hover {
    background:  var(--gold-bright, #F0E0A8);
    transform:   translateY(-2px);
    box-shadow:  0 8px 28px rgba(200,169,81,0.35);
    color:       var(--bg-void, #070707);
}
.ct-faq-gate__full-link {
    display:         inline-flex;
    align-items:     center;
    gap:             6px;
    font-family:     var(--font-fa, 'Vazirmatn', sans-serif);
    font-size:       clamp(12px, 1.05vw, 13.5px);
    color:           var(--text-secondary, #9A9590);
    text-decoration: none;
    transition:      color 280ms ease, gap 280ms ease;
    align-self:      flex-start;
}
.ct-faq-gate__full-link:hover { color: var(--gold-light, #E8D5A0); gap: 10px; }

/* ── accordion ── */
.ct-faq-gate__list {
    border-top: 1px solid rgba(200,169,81,0.12);
}

.ct-fq {
    border-bottom: 1px solid rgba(200,169,81,0.12);
    position:      relative;
}
/* خط طلایی سمت راست وقتی باز است */
.ct-fq.is-open::before {
    content: '';
    position: absolute; top: 0; right: 0; bottom: 0; width: 2px;
    background: var(--gold, #C8A951);
    border-radius: 0 2px 2px 0;
}

.ct-fq__btn {
    width:           100%;
    display:         flex;
    align-items:     center;
    gap:             14px;
    padding:         clamp(16px, 2.2vw, 20px) clamp(4px, 1vw, 12px);
    background:      transparent;
    border:          none;
    cursor:          pointer;
    text-align:      right;
    direction:       rtl;
    transition:      background 250ms ease;
}
.ct-fq__btn:hover { background: rgba(200,169,81,0.03); }
.ct-fq.is-open .ct-fq__btn { background: rgba(200,169,81,0.05); }

.ct-fq__num {
    flex-shrink:    0;
    width:          28px;
    height:         28px;
    border-radius:  50%;
    background:     rgba(200,169,81,0.08);
    border:         1px solid rgba(200,169,81,0.18);
    display:        inline-flex;
    align-items:    center;
    justify-content:center;
    font-family:    var(--font-display, 'Cormorant Garamond', serif);
    font-style:     italic;
    font-size:      13px;
    color:          var(--gold, #C8A951);
    transition:     background 280ms ease, border-color 280ms ease;
}
.ct-fq.is-open .ct-fq__num {
    background:   rgba(200,169,81,0.18);
    border-color: rgba(200,169,81,0.45);
}

.ct-fq__q {
    flex:        1;
    font-family: var(--font-fa, 'Vazirmatn', sans-serif);
    font-size:   clamp(13.5px, 1.2vw, 15.5px);
    font-weight: 600;
    color:       var(--text-primary, #F0EDE8);
    line-height: 1.5;
    text-align:  right;
    transition:  color 280ms ease;
}
.ct-fq__btn:hover .ct-fq__q  { color: var(--gold-light, #E8D5A0); }
.ct-fq.is-open .ct-fq__q     { color: var(--gold, #C8A951); }

.ct-fq__icon {
    flex-shrink: 0;
    display:     inline-flex;
    color:       var(--gold, #C8A951);
    opacity:     0.5;
    transform:   rotate(90deg);
    transition:  transform 350ms cubic-bezier(0.16,1,0.3,1), opacity 280ms ease;
}
.ct-fq__btn:hover .ct-fq__icon { opacity: 0.9; }
.ct-fq.is-open .ct-fq__icon {
    transform: rotate(-90deg);
    opacity:   1;
}

.ct-fq__panel {
    max-height: 0;
    overflow:   hidden;
    transition: max-height 400ms cubic-bezier(0.16,1,0.3,1);
}
.ct-fq__a {
    font-family: var(--font-fa, 'Vazirmatn', sans-serif);
    font-size:   clamp(12.5px, 1.05vw, 14px);
    color:       var(--text-secondary, #9A9590);
    line-height: 2;
    margin:      0;
    padding:     0 clamp(4px, 1vw, 12px) clamp(16px, 2.5vw, 22px) 42px;
}

/* ── responsive ── */
@media (max-width: 1024px) {
    .ct-faq-gate__inner { grid-template-columns: 1fr; gap: clamp(40px, 6vh, 56px); }
    .ct-faq-gate__desc  { max-width: 100%; }
}
@media (max-width: 768px) {
    .ct-faq-gate { padding: clamp(56px, 8vw, 80px) 0; }
    .ct-faq-gate__title { font-size: clamp(22px, 5.5vw, 32px); }
    .ct-fq__a { padding-left: 0; }
}
@media (max-width: 480px) {
    .ct-faq-gate__cta-link { width: 100%; justify-content: center; align-self: stretch; }
}
