/*  ======== include local font family =========
 در این بخش فونت های سفارشی به صورت محلی به پروژه اضافه می شوند
 */
@font-face {
    font-family: 'IRANSansX';
    src: url('../font/IRANSansX-Regular.woff2') format('woff2'),
    url('../font/IRANSansX-Regular.woff') format('woff');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'IRANSansX';
    src: url('../font/IRANSansX-Bold.woff2') format('woff2'),
    url('../font/IRANSansX-Bold.woff') format('woff');
    font-weight: 700;
    font-display: swap;
}

/* ==========================================================================
   ROOT VARIABLES — رنگ‌ها، فاصله‌ها و رادیوس‌های سراسری سایت
   هرجا رنگ اصلی برند (var(--accent)) یا رادیوس گوشه‌ها (var(--radius)) رو
   عوض کنی، همه‌جای سایت خودش آپدیت می‌شه.
   ========================================================================== */
:root {
    --bg: #faf7f2;
    --surface: #ffffff;
    --ink: #1a1a1a;
    --ink-soft: #3a3a3a;
    --muted: #000000;
    --line: #e8e4dc;
    --line-strong: #d8d3c8;
    --dark: #1a1a1a;
    --dark-2: #111111;
    --accent: #c60000;
    --accent-deep: #940000;
    --warning: #ff0000;
    --radius: 24px;
    --radius-sm: 14px;
}

/* ==========================================================================
   RESET / BASE — ریست پایه مرورگر + استایل کلی بادی و تایپوگرافی
   ========================================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'IRANSansX', 'Vazirmatn', sans-serif;
    background: var(--bg);
    color: var(--ink);
    line-height: 1.8;
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

.container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 32px;
}

/* برچسب کوچیک بالای تیترها (استفاده نشده فعلاً توی HTML، ولی موجوده) */
.eyebrow {
    font-size: 12px;
    letter-spacing: 2px;
    color: var(--muted);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    direction: ltr;
    justify-content: flex-end;
}

.eyebrow::before {
    content: "";
    width: 22px;
    height: 1px;
    background: var(--line-strong);
}

/* تایپوگرافی و بلاک‌های عمومی سکشن‌ها (section-head همه‌جا استفاده می‌شه) */
h1, h2, h3 {
    font-weight: 600;
    letter-spacing: -0.01em;
}

.section {
    padding: 72px 0;
}

.section.tight {
    padding: 52px 0;
}

.section-head {
    max-width: 640px;
    margin-bottom: 40px;
}

.section-head h2 {
    font-size: 23px;
    line-height: 1.4;
    margin-bottom: 16px;
}

.section-head p {
    color: var(--muted);
    font-size: 15px;
    max-width: 520px;
}

/* دکمه‌های عمومی سایت (btn-primary همه‌جا از دکمه قرمز اصلی استفاده می‌کنه) */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    font-size: 14px;
    font-weight: 600;
    border-radius: var(--radius);
    transition: all .25s ease;
}

.btn-primary {
    background: var(--accent);
    color: #fff;
}

.btn-primary:hover {
    background: var(--accent-deep);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(198, 0, 0, .28);
}

.btn-outline {
    border: 1px solid rgba(255, 255, 255, .7);
    color: #fff;
}

.btn-outline:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.btn-ghost {
    border: 1px solid var(--line-strong);
    color: var(--ink);
}

.btn-ghost:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* ==========================================================================
   HEADER — نوار شناور بالای صفحه (لوگو، منو، سوییچ زبان، دکمه‌ها)
   HTML مرتبط: تگ <header> + <div class="mobile-nav">
   ========================================================================== */
.header-spacer {
    height: 18px;
}

header {
    position: fixed;
    top: 14px;
    left: 16px;
    right: 16px;
    z-index: 950;
    max-width: 1180px;
    margin: 0 auto;
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: 0 14px 40px rgba(20, 18, 16, .12);
    padding: 12px 26px;
}

.nav-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.logo-zone {
    display: flex;
    align-items: center;
    gap: 14px;
}

.logo-real {
    display: flex;
    align-items: center;
}

.logo-real img {
    height: 36px;
    width: auto;
    display: block;
}

/* --- سوییچر زبان (FA/AR/EN) --- */
.lang-switch {
    position: relative;
    direction: ltr;
}

.lang-current {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink);
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    transition: background .2s ease, color .2s ease;
}

.lang-current svg:first-child {
    width: 16px;
    height: 16px;
    color: var(--muted);
    transition: color .2s ease;
}

.lang-current:hover {
    background: var(--bg);
}

.lang-current:hover svg:first-child {
    color: var(--accent);
}

.lang-caret {
    width: 12px;
    height: 12px;
    transition: transform .25s ease;
}

.lang-switch:hover .lang-caret,
.lang-switch:focus-within .lang-caret {
    transform: rotate(180deg);
}

.lang-dropdown {
    position: absolute;
    top: 38px;
    left: 0;
    background: #fff;
    border-radius: var(--radius-sm);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .14);
    padding: 8px;
    min-width: 130px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
    z-index: 10;
}

.lang-switch:hover .lang-dropdown,
.lang-switch:focus-within .lang-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.lang-dropdown button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 9px 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-soft);
    border-radius: 8px;
    transition: background .2s ease, color .2s ease;
}

.lang-dropdown button:hover {
    background: var(--bg);
    color: var(--accent);
}

.lang-dropdown button.active {
    color: var(--accent);
    font-weight: 700;
}

/* --- منوی اصلی دسکتاپ + ساب‌منوی محصولات --- */
nav ul {
    list-style: none;
    display: flex;
    gap: 32px;
    align-items: center;
}

nav a {
    color: var(--ink);
    font-size: 14px;
    font-weight: 500;
    opacity: .85;
    transition: opacity .2s, color .2s;
    position: relative;
}

nav a:hover {
    opacity: 1;
    color: var(--accent);
}

.has-dropdown {
    position: relative;
}

.has-dropdown > a {
    display: flex;
    align-items: center;
    gap: 5px;
}

.dropdown {
    position: absolute;
    top: 38px;
    right: -16px;
    background: #fff;
    color: var(--ink);
    min-width: 230px;
    border-radius: var(--radius-sm);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .14);
    padding: 10px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: all .2s ease;
}

.has-dropdown:hover .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown a {
    color: var(--ink-soft);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    font-size: 13px;
    border-radius: 10px;
    opacity: 1;
    transition: background .2s ease, color .2s ease;
}

.dropdown a:hover {
    background: var(--bg);
    color: var(--accent);
}

.dropdown a svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--muted);
    transition: color .2s ease;
}

.dropdown a:hover svg {
    color: var(--accent);
}

/* --- دکمه‌های سمت راست هدر (دانلود کاتالوگ + تماس) --- */
.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.phone-link {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
    direction: ltr;
    letter-spacing: .3px;
    transition: color .2s ease;
    margin-inline-end: 6px;
}

.phone-link:hover {
    color: var(--accent);
}

.phone-link-dark {
    color: var(--ink);
}

.phone-link-dark:hover {
    color: var(--accent);
}

.header-actions .btn {
    padding: 11px 20px;
    font-size: 13.5px;
}

.btn-consult {
    padding-top: 11px;
    padding-bottom: 11px;
}

.btn-consult-phone {
    font-size: 13.5px;
    color: #fff;
    font-weight: 600;
    direction: ltr;
}

/* ==========================================================================
   MOBILE NAV — دکمه همبرگری + منوی کشویی تمام‌صفحه موبایل
   HTML مرتبط: <button id="nav-toggle"> + <div id="mobile-nav">
   جی‌اس مرتبط: IIFE مربوط به nav-toggle در main.js
   ========================================================================== */
.nav-toggle {
    display: none;
    position: relative;
    z-index: 901;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 38px;
    height: 38px;
    border-radius: var(--radius-sm);
}

.nav-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--ink);
    transition: transform .25s ease, opacity .25s ease, background .25s ease;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.mobile-nav {
    position: fixed;
    inset: 0;
    z-index: 900;
    background: var(--surface);
    display: flex;
    flex-direction: column;
    padding: 96px 32px 32px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
    overflow-y: auto;
}

.mobile-nav.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.mobile-nav-links {
    list-style: none;
}

.mobile-nav-links li {
    border-bottom: 1px solid var(--line);
}

.mobile-nav-links li:first-child {
    border-top: 1px solid var(--line);
}

.mobile-nav-links a {
    display: block;
    padding: 16px 4px;
    font-size: 16px;
    font-weight: 500;
    color: var(--ink);
    transition: color .2s ease;
}

.mobile-nav-links a:hover {
    color: var(--accent);
}

.mobile-nav-links .mobile-nav-sub a {
    padding-inline-start: 20px;
    font-size: 14px;
    color: var(--muted);
    font-weight: 400;
}

.mobile-nav-actions {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 28px;
}

.mobile-nav-actions .btn {
    justify-content: center;
}

.mobile-nav-actions .phone-link {
    font-size: 16px;
    text-align: center;
}

/* ==========================================================================
   HERO — اسلایدر تمام‌صفحه اول سایت
   HTML مرتبط: <section class="hero"> با #hero-slider و #hero-pagination
   جی‌اس مرتبط: اولین IIFE در main.js (چرخش خودکار اسلایدها)
   ========================================================================== */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: flex-end;
    background: #0e0e0e;
    color: #fff;
    overflow: hidden;
}

.hero-slider {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.6s ease;
}

.hero-slide.active {
    opacity: 1;
    z-index: 1;
}

.hero-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1);
    transition: transform 7s ease-out;
}

.hero-slide.active img {
    transform: scale(1.07);
}

@media (prefers-reduced-motion: reduce) {
    .hero-slide img {
        transition: none;
        transform: scale(1) !important;
    }
}

.hero-bg-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg,
    rgba(8, 8, 8, .55) 0%,
    rgba(8, 8, 8, .35) 40%,
    rgba(8, 8, 8, .65) 78%,
    rgba(6, 6, 6, .92) 100%);
}

.hero-inner {
    position: relative;
    z-index: 2;
    padding-bottom: 70px;
    width: 100%;
}

.hero-tag {
    font-size: 12px;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, .6);
    margin-bottom: 22px;
    direction: ltr;
    text-align: right;
}

.hero h1 {
    font-size: 43px;
    line-height: 1.35;
    font-weight: 700;
    color: #fff;
    max-width: 780px;
    margin-bottom: 22px;
}

.hero p {
    font-size: 16px;
    color: rgba(255, 255, 255, .72);
    max-width: 520px;
    margin-bottom: 36px;
}

.hero-actions {
    display: flex;
    gap: 16px;
    margin-bottom: 48px;
}

.hero-pagination {
    position: relative;
    z-index: 2;
    display: flex;
    gap: 10px;
    margin-bottom: 8px;
}

.hero-pagination .dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .35);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background .25s ease, transform .25s ease;
}

.hero-pagination .dot.active {
    background: var(--accent);
    transform: scale(1.2);
}

/* آمار داخل هیرو (فعلاً توی HTML استفاده نشده، برای آینده نگه داشته شده) */
.counters {
    display: grid;
    grid-template-columns:repeat(4, 1fr);
    gap: 16px;
}

.counter {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 26px 22px;
    text-align: center;
    background: var(--surface);
    transition: box-shadow .3s ease, transform .3s ease, background .3s ease, border-color .3s ease;
}

.counter:hover {
    box-shadow: 0 20px 45px rgba(20, 18, 16, .12);
    transform: translateY(-4px);
    border-color: var(--accent);
}

.counter .num {
    font-size: 32px;
    font-weight: 700;
    color: var(--ink);
    display: flex;
    align-items: baseline;
    gap: 2px;
    direction: ltr;
    justify-content: center;
    transition: color .3s ease;
}

.counter:hover .num {
    color: var(--accent);
}

.counter .num small {
    font-size: 15px;
    color: var(--accent);
    font-weight: 600;
}

.counter .label {
    font-size: 13px;
    color: var(--muted);
    margin-top: 8px;
}


/* ==========================================================================
   PRODUCTS / SOLUTIONS GRID — گرید ۸تایی محصولات با عکس پس‌زمینه و هاور
   HTML مرتبط: <section class="section solutions"> با .sol-grid / .sol-card
   ========================================================================== */
.solutions {
    background: var(--surface);
}

.sol-grid {
    display: grid;
    grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
}

.sol-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--line);
    padding: 34px 28px;
    min-height: 250px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition: box-shadow .3s ease, transform .3s ease;
}

.sol-card:hover {
    box-shadow: 0 20px 45px rgba(20, 18, 16, .14);
    transform: translateY(-4px);
}

.sol-bg-photo {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center;
    opacity: 1;
    transform: scale(1.02);
    transition: transform .5s ease;
}

.sol-card:hover .sol-bg-photo {
    transform: scale(1.08);
}

.sol-photo-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(15, 13, 12, .15) 0%, rgba(10, 9, 8, .55) 60%, rgba(8, 7, 6, .88) 100%);
    opacity: .55;
    transition: opacity .4s ease;
}

.sol-card:hover .sol-photo-scrim {
    opacity: 1;
}

.sol-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .92);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink);
    margin-bottom: 22px;
    transition: background .3s ease, color .3s ease;
    position: relative;
    z-index: 2;
}

.sol-icon svg {
    width: 25px;
    height: 25px;
}

.sol-card:hover .sol-icon {
    background: var(--accent);
    color: #fff;
}

.sol-code {
    font-size: 11.5px;
    color: rgba(255, 255, 255, .7);
    letter-spacing: 1px;
    direction: ltr;
    font-weight: 600;
    position: relative;
    z-index: 2;
    transition: color .3s ease;
}

.sol-card:hover .sol-code {
    color: rgba(255, 255, 255, .9);
}

.sol-card h3 {
    font-size: 19px;
    margin: 8px 0 0;
    color: #fff;
    position: relative;
    z-index: 2;
}

.sol-view {
    margin-top: auto;
    padding-top: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
    position: relative;
    z-index: 2;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .3s ease, transform .3s ease, color .3s ease;
}

.sol-card:hover .sol-view {
    opacity: 1;
    transform: translateY(0);
    color: #fff;
}

/* ==========================================================================
   CAPABILITIES — «توانمندی‌های تولید و مهندسی» (عکس کارخانه + لیست ۳ آیتمی)
   HTML مرتبط: .cap-grid / .cap-image / .cap-list / .cap-item
   ========================================================================== */
.cap-grid {
    display: grid;
    grid-template-columns:1.1fr 1fr;
    gap: 64px;
    align-items: center;
}

.cap-image {
    border-radius: var(--radius);
    overflow: hidden;
    aspect-ratio: 16/11;
}

.cap-list {
    display: flex;
    flex-direction: column;
}

.cap-item {
    display: flex;
    gap: 20px;
    padding: 18px 0;
    border-top: 1px solid var(--line);
}

.cap-item:last-child {
    border-bottom: 1px solid var(--line);
}

.cap-num {
    font-size: 13px;
    color: var(--accent);
    font-weight: 700;
    direction: ltr;
    min-width: 44px;
}

.cap-item h4 {
    font-size: 16px;
    margin-bottom: 6px;
}

.cap-item p {
    font-size: 13.5px;
    color: var(--muted);
}

/* ==========================================================================
   PROCESS STEPS — «مسیر همکاری» (۵ دایره آیکون‌دار روی یک خط افقی)
   HTML مرتبط: .simple-steps / .simple-step / .simple-step-icon / .simple-step-num
   جی‌اس مرتبط: IIFE simple-step-icon (پرشدن تدریجی دایره‌ها هنگام اسکرول)
   ========================================================================== */
.simple-steps {
    display: flex;
    justify-content: space-between;
    position: relative;
    padding-top: 8px;
}

.simple-steps::before {
    content: "";
    position: absolute;
    top: 32px;
    right: 9%;
    left: 9%;
    height: 1px;
    background: var(--line-strong);
    z-index: 0;
}

.simple-step {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    width: 18%;
    text-align: center;
}

.simple-step-icon {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink);
    transition: background .7s ease, color .5s ease, border-color .7s ease, transform .25s ease, box-shadow .3s ease;
}

.simple-step-icon svg {
    width: 26px;
    height: 26px;
}

.simple-step-icon.filled {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.simple-step:hover .simple-step-icon {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(198, 0, 0, .2);
}

.simple-step-num {
    position: absolute;
    top: -6px;
    left: -6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--ink);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10.5px;
    font-weight: 700;
    direction: ltr;
    border: 2px solid var(--bg);
}

.simple-step-title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
}

.simple-step-desc {
    font-size: 11.5px;
    color: var(--muted);
    line-height: 1.6;
    max-width: 130px;
}

/* ==========================================================================
   PROJECTS GALLERY — «پروژه‌های منتخب» (آکاردئون افقی عکس‌ها، کلیک = بازشدن)
   HTML مرتبط: #projGallery / .proj-panel / .proj-panel-info / .proj-meta
   جی‌اس مرتبط: IIFE projGallery در main.js
   ========================================================================== */
.proj-gallery {
    display: flex;
    gap: 8px;
    height: 460px;
    overflow: hidden;
}

.proj-panel {
    position: relative;
    flex: 0 0 90px;
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
    transition: flex-basis .6s cubic-bezier(.22, 1, .36, 1);
}

.proj-panel.active {
    flex: 1 1 0%;
}

.proj-panel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.proj-panel-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    writing-mode: vertical-rl;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(180deg, rgba(10, 9, 8, .1) 0%, rgba(10, 9, 8, .6) 100%);
    transition: opacity .3s ease;
    padding: 20px 0;
    white-space: nowrap;
}

.proj-panel.active .proj-panel-label {
    opacity: 0;
    pointer-events: none;
}

.proj-panel-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 28px;
    color: #fff;
    background: linear-gradient(180deg, transparent 35%, rgba(8, 7, 6, .92) 100%);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .35s ease .15s, transform .35s ease .15s;
    pointer-events: none;
}

.proj-panel.active .proj-panel-info {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.tag {
    font-size: 11px;
    color: var(--accent);
    letter-spacing: 1px;
    direction: ltr;
    font-weight: 700;
    margin-bottom: 8px;
    display: block;
}

.proj-panel-info h4 {
    font-size: 18px;
    margin-bottom: 10px;
}

.proj-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-bottom: 14px;
}

.proj-meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: rgba(255, 255, 255, .7);
}

.proj-meta-item svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    color: var(--accent);
}

.proj-view {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: #fff;
}

/* ==========================================================================
   WHY US — کارت‌های «چرا متالیست» (فعلاً توی HTML استفاده نشده، برای آینده)
   ========================================================================== */
.why-grid {
    display: grid;
    grid-template-columns:repeat(2, 1fr);
    gap: 16px;
}

.why-card {
    background: var(--surface);
    padding: 30px 28px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    transition: box-shadow .3s ease, transform .3s ease;
}

.why-card:hover {
    box-shadow: 0 20px 45px rgba(20, 18, 16, .1);
    transform: translateY(-3px);
}

.why-card h4 {
    font-size: 16px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.why-card h4::before {
    content: "";
    width: 6px;
    height: 6px;
    background: var(--accent);
    flex-shrink: 0;
}

.why-card p {
    font-size: 13.5px;
    color: var(--muted);
}

/* ==========================================================================
   CLIENT LOGOS MARQUEE — «مشتریان ما» (نوار بی‌نهایت لوگوهای در حال حرکت)
   HTML مرتبط: .client-marquee / .client-track / .client-logo
   جی‌اس مرتبط: IIFE client-track (کپی لوگوها برای لوپ بی‌پایان) در main.js
   ========================================================================== */
.client-head {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.dashed-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
}

.dashed-title .dash {
    display: inline-block;
    width: 44px;
    height: 2px;
    background: var(--accent);
    flex-shrink: 0;
}

.client-marquee {
    overflow: hidden;
    direction: ltr;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}

.client-track {
    display: flex;
    gap: 16px;
    width: max-content;
    animation: clientMarquee 26s linear infinite;
}

.client-marquee:hover .client-track {
    animation-play-state: paused;
}

@keyframes clientMarquee {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

.client-logo {
    flex: 0 0 180px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    filter: grayscale(1);
    opacity: .55;
    transition: filter .35s ease, opacity .35s ease, box-shadow .35s ease, transform .35s ease, border-color .35s ease;
}

.client-logo span {
    font-size: 11.5px;
    color: var(--muted);
    letter-spacing: .3px;
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-sm);
    padding: 6px 12px;
}

.client-logo:hover {
    filter: grayscale(0);
    opacity: 1;
    box-shadow: 0 18px 40px rgba(20, 18, 16, .12);
    transform: translateY(-4px);
    border-color: var(--line-strong);
}

@media (prefers-reduced-motion: reduce) {
    .client-track {
        animation: none;
    }
}

@media (max-width: 640px) {
    .client-logo {
        flex-basis: 140px;
        height: 76px;
    }
}

/* ==========================================================================
   TESTIMONIALS — «نظرات مشتریان» (اسلایدر ۳بعدی وسط-چپ-راست با فلش/دات)
   HTML مرتبط: .testi-carousel / #testiTrack / .testi-slide / .testi-arrow / #testiDots
   جی‌اس مرتبط: بزرگ‌ترین IIFE فایل main.js (testiTrack) — رندر و اتوپلی
   ========================================================================== */
.testi-carousel {
    position: relative;
    padding: 20px 54px 8px;
}

.testi-viewport {
    overflow: hidden;
}

.testi-track {
    position: relative;
    transition: height .35s ease;
}

.testi-slide {
    position: absolute;
    top: 0;
    left: 50%;
    width: calc(33.333% - 10px);
    aspect-ratio: 1/1;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 26px 26px 24px;
    display: flex;
    flex-direction: column;
    transform: translate(calc(-50% + var(--tx, 0px)), 0) scale(.8);
    opacity: 0;
    pointer-events: none;
    z-index: 0;
    transition: transform .55s cubic-bezier(.22, 1, .36, 1), opacity .45s ease, box-shadow .4s ease, border-color .4s ease;
    will-change: transform, opacity;
}

.testi-slide.is-visible {
    opacity: 1;
}

.testi-slide.is-prev, .testi-slide.is-next {
    z-index: 3;
}

.testi-slide.is-active {
    transform: translate(calc(-50% + var(--tx, 0px)), 0) scale(1);
    box-shadow: inset 0 0 40px rgba(20, 18, 16, .16);
    z-index: 5;
    border-color: var(--line-strong);
    pointer-events: auto;
}

.testi-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 16px;
}

.testi-quote {
    width: 30px;
    height: 30px;
    color: var(--line-strong);
    flex-shrink: 0;
}

.testi-stars {
    display: flex;
    gap: 2px;
    color: var(--accent);
}

.testi-stars svg {
    width: 13px;
    height: 13px;
}

.testi-slide p {
    font-size: 13.5px;
    color: var(--ink-soft);
    line-height: 1.75;
    flex: 1;
}

.testi-bottom {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

.testi-who {
    display: flex;
    align-items: center;
    gap: 12px;
}

.testi-date {
    font-size: 10.5px;
    color: var(--muted);
    letter-spacing: .3px;
    font-weight: 600;
    white-space: nowrap;
}

.testi-arrow {
    position: absolute;
    top: 44%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    color: var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 6;
    box-shadow: 0 8px 20px rgba(20, 18, 16, .08);
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.testi-arrow svg {
    width: 18px;
    height: 18px;
}

.testi-arrow-prev {
    right: 0;
}

.testi-arrow-next {
    left: 0;
}

.testi-arrow:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.testi-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
}

.testi-dots button {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--line-strong);
    transition: background .25s ease, transform .25s ease;
}

.testi-dots button.active {
    background: var(--accent);
    transform: scale(1.3);
}

/* استایل قدیمی .testi (پیش‌نویس اولیه)؛ الان تکست/آواتار واقعی از .testi-slide میاد */
.testi p {
    font-size: 14.5px;
    color: var(--ink-soft);
    margin-bottom: 24px;
}

.testi-who {
    display: flex;
    align-items: center;
    gap: 12px;
}

.testi-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--dark);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
}

.testi-who .name {
    font-size: 13.5px;
    font-weight: 600;
}

.testi-who .role {
    font-size: 12px;
    color: var(--muted);
}

/* ==========================================================================
   BLOG — «از وبلاگ» (۳ کارت مقاله)
   HTML مرتبط: .blog-grid / .blog-card
   ========================================================================== */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 26px;
}

.blog-row {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 26px;
}

.blog-card img {
    aspect-ratio: 16/10;
    object-fit: cover;
    border-radius: var(--radius);
    margin-bottom: 18px;
}

.blog-card .cat {
    font-size: 11px;
    color: var(--accent);
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.blog-card h4 {
    font-size: 16px;
    margin-bottom: 8px;
}

.blog-card p {
    font-size: 13px;
    color: var(--muted);
}

/* ==========================================================================
   FAQ — «سوالات متداول» (آکاردئون)
   HTML مرتبط: .faq-wrap / .faq-item (.open) / .faq-q / .faq-a
   جی‌اس مرتبط: querySelectorAll('.faq-q') click handler در main.js
   ========================================================================== */
.faq-wrap {
    max-width: 820px;
}

.faq-item {
    border-bottom: 1px solid var(--line);
}

.faq-q {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    text-align: right;
    font-family: inherit;
    padding: 24px 0;
    font-size: 15.5px;
    font-weight: 500;
    cursor: pointer;
}

.faq-q .plus {
    font-size: 20px;
    color: var(--muted);
    transition: transform .25s ease;
    font-weight: 400;
}

.faq-item.open .plus {
    transform: rotate(45deg);
    color: var(--accent);
}

.faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
}

.faq-a p {
    font-size: 13.5px;
    color: var(--muted);
    padding-bottom: 22px;
    max-width: 640px;
}

.faq-item.open .faq-a {
    max-height: 200px;
}

/* ==========================================================================
   CTA FORM — سکشن «پروژه‌ای برای بررسی دارید؟» (متن + فرم درخواست مشاوره)
   HTML مرتبط: #cta-form / .cta-grid / .field / .ms-field (مولتی‌سلکت سفارشی)
   جی‌اس مرتبط: IIFE های msField و rfqForm و rfq-file در main.js
   ========================================================================== */
.cta {
    background: var(--surface);
    color: var(--ink);
}

.cta-grid {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 64px;
    align-items: center;
}

.cta-text {
    order: 2;
}

.cta-form-col {
    order: 1;
}

.cta h2 {
    font-size: 30px;
    margin-bottom: 16px;
    color: var(--ink);
}

.cta p {
    color: var(--muted);
    font-size: 14.5px;
    margin-bottom: 28px;
    max-width: 400px;
}

.form-row {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
}

.field {
    background: var(--surface);
    border: 1px solid var(--line-strong);
    padding: 14px 16px;
    border-radius: var(--radius);
}

.field input, .field textarea {
    width: 100%;
    background: none;
    border: none;
    color: var(--ink);
    font-family: inherit;
    font-size: 14px;
    outline: none;
}

.field input::placeholder, .field textarea::placeholder {
    color: var(--muted);
}

.field-file {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.field-file svg {
    width: 20px;
    height: 20px;
    color: var(--muted);
    flex-shrink: 0;
}

.field-file-text {
    font-size: 13.5px;
    color: var(--muted);
}

.field-file-text strong {
    color: var(--ink);
    font-weight: 600;
}

.field-file input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}

/* --- دراپ‌داون مولتی‌سلکت سفارشی «نوع پروژه» --- */
.ms-field {
    position: relative;
    padding: 0;
    overflow: visible;
}

.ms-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 16px;
    font-family: inherit;
    font-size: 14px;
    color: var(--muted);
    text-align: right;
}

.ms-field.has-selection .ms-trigger {
    color: var(--ink);
}

.ms-caret {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--muted);
    transition: transform .2s ease;
}

.ms-field.open .ms-caret {
    transform: rotate(180deg);
}

.ms-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    left: 0;
    z-index: 20;
    background: #fff;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .14);
    padding: 8px;
    max-height: 260px;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}

.ms-field.open .ms-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.ms-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13.5px;
    color: var(--ink-soft);
    transition: background .2s ease;
}

.ms-option:hover {
    background: var(--bg);
}

.ms-option input {
    accent-color: var(--accent);
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.ms-validator {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

/* ==========================================================================
   FOOTER CTA BANNER — نوار مشکی باریک قبل از فوتر
   HTML مرتبط: <section class="foot-cta">
   ========================================================================== */
.foot-cta {
    background: var(--ink);
    padding: 52px 0;
}

.foot-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.foot-cta h3 {
    color: #fff;
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 8px;
}

.foot-cta p {
    color: rgba(255, 255, 255, .55);
    font-size: 14px;
}

/* ==========================================================================
   FOOTER — فوتر اصلی (لوگو/توضیح، دسترسی سریع، شرکت، ارتباط با ما، کپی‌رایت)
   HTML مرتبط: <footer> با .foot-grid / #about / .foot-contact-list / .foot-bottom
   ========================================================================== */
footer {
    --foot-rgb: 16, 16, 18; /* رنگ پایه فوتر — خاکستری تیره خنثی، نه قرمز */
    background: linear-gradient(160deg, rgb(var(--foot-rgb)) 0%, rgb(6, 6, 7) 100%);
    color: rgba(255, 255, 255, .65);
    padding: 0 0 30px;
    position: relative;
    overflow: hidden;
}

.foot-bg-photo {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url('../images/footer-bg.webp');
    background-size: cover;
    background-position: center;
    opacity: .48;
}

.foot-bg-overlay {
    --foot-darkness: .1;
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(180deg, rgba(var(--foot-rgb), .35) 0%, rgba(6, 6, 7, var(--foot-darkness)) 100%);
}

.foot-accent {
    position: relative;
    z-index: 1;
    height: 3px;
    width: 100%;
    background: linear-gradient(90deg, var(--accent) 0%, #ff8a3d 50%, var(--accent) 100%);
}

footer .container {
    position: relative;
    z-index: 1;
    padding-top: 64px;
}

.foot-grid {
    display: grid;
    grid-template-columns:1.4fr 1fr 1fr 1.2fr;
    gap: 40px;
    margin-bottom: 48px;
}

.foot-logo {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 16px;
}

.foot-logo span {
    color: var(--accent);
}

footer h5 {
    color: #fff;
    font-size: 13px;
    margin-bottom: 18px;
    letter-spacing: .5px;
}

footer ul {
    list-style: none;
}

footer li {
    margin-bottom: 12px;
    font-size: 13.5px;
    line-height: 1.6;
}

footer a {
    transition: color .2s ease;
}

footer a:hover {
    color: #ff8a3d;
}

.foot-social {
    display: flex;
    gap: 10px;
    margin-top: 22px;
}

.foot-social-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .18);
    color: rgba(255, 255, 255, .7);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}

.foot-social-icon svg {
    width: 16px;
    height: 16px;
}

.foot-social-icon:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    transform: translateY(-3px);
}

.foot-contact-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.foot-contact-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, .18);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}

.foot-contact-icon svg {
    width: 14px;
    height: 14px;
    color: #ff8a3d;
}

.foot-bottom {
    border-top: 1px solid rgba(255, 255, 255, .1);
    padding-top: 24px;
    display: flex;
    justify-content: space-between;
    font-size: 12.5px;
    color: rgba(255, 255, 255, .4);
}

@media (max-width: 760px) {
    .foot-cta-inner {
        flex-direction: column;
        align-items: flex-start;
        text-align: right;
    }
}

/* ==========================================================================
   RESPONSIVE — مدیاکوئری‌های عمومی کل صفحه (چند سکشن با هم)
   نکته: .intro-grid همینجا هم توی ۹۰۰px به یک ستون تبدیل می‌شه؛ نسخه دسکتاپش
   پایین‌تر توی بخش VIDEO + ABOUT تعریف شده.
   ========================================================================== */
@media (max-width: 900px) {
    .hero h1 {
        font-size: 34px;
    }

    .counters {
        grid-template-columns:repeat(2, 1fr);
        gap: 20px;
    }

    .counter {
        border-inline-start: none;
        padding-inline-start: 0;
    }

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

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

    .intro-grid {
        grid-template-columns:1fr;
        gap: 24px;
    }

    .proj-grid, .testi-wrap, .blog-grid {
        grid-template-columns:1fr;
    }

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

    .form-row {
        grid-template-columns:1fr;
    }

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

    nav ul {
        display: none;
    }

    .header-actions {
        display: none;
    }

    .nav-toggle {
        display: flex;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 20px;
    }

    .section {
        padding: 56px 0;
    }

    .section.tight {
        padding: 40px 0;
    }

    .section-head {
        margin-bottom: 28px;
    }

    .hero h1 {
        font-size: 27px;
    }

    .hero p {
        font-size: 14.5px;
    }

    .hero-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .hero-actions .btn {
        justify-content: center;
    }

    .counters {
        grid-template-columns:1fr 1fr;
        gap: 16px;
    }

    .counter .num {
        font-size: 26px;
    }

    .foot-grid {
        grid-template-columns:1fr;
        gap: 32px;
    }

    .logo-real img {
        height: 30px;
    }

    .fab-label-bubble {
        font-size: 11px;
        padding: 7px 12px;
    }
}

/* ==========================================================================
   CUSTOM CURSOR — کرسر دایره‌ای سفارشی (فقط دسکتاپ با موس/هاور)
   جی‌اس مرتبط: دومین IIFE در main.js (custom-cursor-active)
   ========================================================================== */
body.custom-cursor-active,
body.custom-cursor-active * {
    cursor: none !important;
}

body.custom-cursor-active input,
body.custom-cursor-active textarea {
    cursor: text !important;
}

.custom-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 14px;
    height: 14px;
    border: 1.5px solid var(--ink);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    will-change: transform;
}

.custom-cursor.on-dark {
    border-color: #fff;
}

/* ==========================================================================
   ACCESSIBILITY — لینک پرش، حالت فوکوس کیبورد
   ========================================================================== */
.skip-link {
    position: absolute;
    top: -60px;
    right: 16px;
    z-index: 9999;
    background: var(--ink);
    color: #fff;
    padding: 10px 18px;
    border-radius: 2px;
    font-size: 13px;
    transition: top .2s ease;
}

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

a:focus-visible,
button:focus-visible,
.faq-q:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 2px;
}

.has-dropdown:focus-within .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* ==========================================================================
   SCROLL REVEAL — انیمیشن فید+اسلاید هنگام ورود به دید (IntersectionObserver)
   جی‌اس مرتبط: سومین IIFE در main.js (revealTargets)
   ========================================================================== */
.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s ease, transform .6s ease;
}

.reveal.in-view {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ==========================================================================
   CONTACT FAB — دکمه شناور پایین-راست (بله/واتساپ/تلگرام) با انیمیشن شناور
   HTML مرتبط: .contact-fab (.open) / .fab-popouts / .fab-main
   جی‌اس مرتبط: IIFE fab-main در main.js
   ========================================================================== */
.contact-fab {
    position: fixed;
    bottom: 26px;
    right: 26px;
    z-index: 500;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
}

.fab-popouts {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
}

.fab-item-row {
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0;
    transform: translateY(14px) scale(.9);
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
}

.contact-fab.open .fab-item-row {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.contact-fab.open .fab-item-row:nth-child(1) {
    transition-delay: .05s;
}

.contact-fab.open .fab-item-row:nth-child(2) {
    transition-delay: .1s;
}

.contact-fab.open .fab-item-row:nth-child(3) {
    transition-delay: .15s;
}

.fab-item {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .18);
}

.fab-item svg {
    width: 20px;
    height: 20px;
}

.fab-item-label {
    background: var(--ink);
    color: #fff;
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .18);
}

.fab-bale {
    background: #f7941d;
}

.fab-whatsapp {
    background: #25d366;
}

.fab-telegram {
    background: #229ed9;
}

.fab-bottom-row {
    display: flex;
    align-items: center;
    gap: 10px;
    animation: fabFloat 3.2s ease-in-out infinite;
}

@keyframes fabFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .fab-bottom-row {
        animation: none;
    }
}

.fab-label-bubble {
    background: var(--ink);
    color: #fff;
    padding: 9px 16px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .18);
}

.fab-main {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--ink);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .22);
    transition: background .2s ease, transform .2s ease;
    flex-shrink: 0;
}

.fab-main svg {
    width: 24px;
    height: 24px;
}

.fab-main:hover {
    background: var(--accent);
}

.contact-fab.open .fab-main {
    background: var(--accent);
    transform: rotate(45deg);
}

@media (max-width: 640px) {
    .contact-fab {
        bottom: 18px;
        right: 18px;
    }

    .fab-main {
        width: 50px;
        height: 50px;
    }

    .fab-item {
        width: 42px;
        height: 42px;
    }

    .fab-label-bubble {
        font-size: 12px;
        padding: 8px 14px;
    }

    .fab-item-label {
        font-size: 11.5px;
        padding: 6px 12px;
    }
}

/* ==========================================================================
   BACK TO TOP — دکمه گرد پایین-چپ برای برگشت به بالای صفحه
   HTML مرتبط: #back-to-top
   جی‌اس مرتبط: IIFE back-to-top در main.js
   ========================================================================== */
.back-to-top {
    position: fixed;
    bottom: 26px;
    left: 26px;
    z-index: 500;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--ink);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .22);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s ease, background .2s ease;
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    background: var(--accent);
}

.back-to-top svg {
    width: 20px;
    height: 20px;
}

@media (max-width: 640px) {
    .back-to-top {
        bottom: 18px;
        left: 18px;
        width: 44px;
        height: 44px;
    }
}

/* ==========================================================================
   ★ VIDEO + ABOUT — سکشن «درباره متالیست» (فریم گرادیانت + آمار ساده)
   HTML مرتبط: .intro-grid > .v-video-frame + .intro-text > .stats-plain
   جی‌اس مرتبط: IIFE videoBock/introVideo/playBtn در main.js
   نکته: این سکشنیه که چند بار روش کار کردیم تا با عکس بوذرجمهر تطبیقش بدیم.
   ========================================================================== */

.intro-grid {
    display: grid;
    grid-template-columns:1.15fr .85fr;
    gap: 36px;
    align-items: center;
}

.intro-text h2 {
    font-size: 36px;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--ink);
}

.intro-text p {
    font-size: 14px;
    color: var(--muted);
    max-width: 400px;
}

/* --- فریم گرادیانت نارنجی-قرمز دور ویدیو --- */
/* --- ویدیو سمت چپ + بکگراند نارنجی که از بالا/پایین بیرون می‌زنه --- */
.v-video-wrap {
    position: relative;
}

.v-video-accent-bg {
    position: absolute;
    top: -18px;
    bottom: -18px;
    left: 14px;
    right: 14px;
    background: linear-gradient(135deg, #ff8a3d 0%, #c11c1c 100%);
    border-radius: 24px;
    z-index: 0;
}

.v-video-box {
    position: relative;
    z-index: 1;
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 16/9;
    background: #0c0c0c;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .16);
}

/* --- ردیف آمار: بدون کارت، فقط بوردر کم‌رنگ بین‌شون + سایه ملایم پایین --- */
.v-stats-row {
    display: flex;
    margin-top: 32px;
    box-shadow: 0 32px 16px -24px rgba(43, 55, 66, .1);
}

.v-stat {
    position: relative;
    flex: 1;
    padding: 0 18px;
}

.v-stat::before {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 28px;
    background: var(--line);
}

.v-stat:first-child::before {
    display: none;
}

.v-stat:first-child {
    border-inline-start: none;
    padding-inline-start: 0;
}

.v-stat-label {
    display: block;
    font-size: 12.5px;
    color: var(--muted);
    margin-top: 6px;
}

.v-video-inner {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    aspect-ratio: 16/9;
    background: #0c0c0c;
}

.v-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* گرادیانت تیره روی ویدیو برای خوانایی واترمارک/دکمه پلی */
.v-video-scrim {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(0deg, rgba(0, 0, 0, .75) 0%, rgba(0, 0, 0, .1) 45%, rgba(0, 0, 0, .3) 100%);
    transition: opacity .3s ease;
}

/* متن واترمارک گوشه پایین-چپ ویدیو */
.v-video-watermark {
    position: absolute;
    left: 24px;
    bottom: 20px;
    z-index: 2;
    color: rgba(255, 255, 255, .55);
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 2px;
    transition: opacity .3s ease;
}

/* دکمه پلی وسط ویدیو + دو حلقه پالسی دورش */
.v-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: #c11c1c;
    z-index: 3;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity .3s ease, transform .3s ease, background .2s ease;
}

.v-video-play:hover {
    background: #e8380d;
}

.v-video-play svg {
    width: 26px;
    height: 26px;
    fill: #fff;
    margin-inline-start: 3px;
}

.v-video-play::before,
.v-video-play::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(193, 28, 28, .5);
    animation: vPulse 2.4s ease-out infinite;
}

.v-video-play::after {
    animation-delay: .8s;
}

@keyframes vPulse {
    0% {
        transform: scale(1);
        opacity: .8;
    }
    100% {
        transform: scale(1.9);
        opacity: 0;
    }
}

/* وقتی ویدیو play شد (کلاس playing از جی‌اس اضافه می‌شه): اسکریم/واترمارک/دکمه محو می‌شن */
.v-video-frame.playing .v-video-scrim,
.v-video-frame.playing .v-video-play {
    opacity: 0;
    pointer-events: none;
}

/* --- آمار ساده زیر متن: عدد بالا / لیبل پایین، بدون کارت و آیکون --- */
.stats-plain {
    display: flex;
    gap: 44px;
    margin-top: 32px;
}

.stat-plain {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.stat-plain-value {
    display: flex;
    align-items: flex-start;
    gap: 2px;
    font-size: 22px;
    font-weight: 800;
    color: var(--accent);
    direction: ltr;
    white-space: nowrap;
    line-height: 1;
}

.stat-plain-value small {
    order: 1;
    font-size: 22px;
    font-weight: 800;
    color: var(--accent);
    line-height: 1;
}

.stat-plain-value .num-value {
    order: 2;
}

.stat-plain-label {
    font-size: 13.5px;
    color: var(--ink);
    font-weight: 500;
}


/* ==========================================================================
   PAGE HERO — هیرو کوتاه صفحات داخلی (درباره ما، تماس با ما، محصولات و ...)
   استایل مرتبط: .page-hero, .page-hero-bg, .page-hero-overlay, .breadcrumb
   ========================================================================== */
.page-hero {
    position: relative;
    min-height: 46vh;
    display: flex;
    align-items: flex-end;
    background: #0e0e0e;
    color: #fff;
    overflow: hidden;
    padding-top: 170px;
}

.page-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.page-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.page-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg,
    rgba(8, 8, 8, .55) 0%,
    rgba(8, 8, 8, .35) 40%,
    rgba(8, 8, 8, .65) 78%,
    rgba(6, 6, 6, .92) 100%);
}

.page-hero-inner {
    position: relative;
    z-index: 2;
    padding-bottom: 46px;
    width: 100%;
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: rgba(255, 255, 255, .6);
    margin-bottom: 20px;
    direction: rtl;
}

.breadcrumb a {
    color: rgba(255, 255, 255, .6);
    transition: color .2s ease;
}

.breadcrumb a:hover {
    color: #fff;
}

.breadcrumb .sep {
    opacity: .5;
}

.breadcrumb .current {
    color: #fff;
}

.page-hero h1 {
    font-size: 38px;
    line-height: 1.35;
    font-weight: 700;
    color: #fff;
    max-width: 700px;
    margin-bottom: 16px;
}

.page-hero p {
    font-size: 15.5px;
    color: rgba(255, 255, 255, .72);
    max-width: 560px;
}

/* لینک ساده «زیرساخت تولید» زیر آمار سکشن دوم درباره‌ما */
.glance-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 28px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--accent);
}

.glance-link:hover {
    color: var(--accent-deep);
}

/* ==========================================================================
   ADVANTAGES — سکشن ۳ درباره‌ما: «مزیت راهکار یکپارچه متالیست»
   استایل مرتبط: .adv-tag, .adv-grid, .adv-card, .adv-icon
   ========================================================================== */
.adv-tag {
    font-size: 12px;
    letter-spacing: 1px;
    color: var(--accent);
    font-weight: 700;
    margin-bottom: 14px;
}

.adv-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-top: 40px;
}

.adv-card {
    background: var(--surface);
    border-top: 3px solid var(--accent);
    border-radius: var(--radius-sm);
    padding: 30px 26px;
    box-shadow: 0 14px 30px rgba(20, 18, 16, .06);
}

.adv-icon {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1.5px solid var(--line-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    margin-bottom: 18px;
}

.adv-icon svg {
    width: 22px;
    height: 22px;
}

.adv-card h4 {
    font-size: 16.5px;
    margin-bottom: 8px;
}

.adv-card p {
    font-size: 13.5px;
    color: var(--muted);
}

.adv-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 40px;
    padding-top: 32px;
    border-top: 1px solid var(--line);
    flex-wrap: wrap;
}

.adv-footer h3 {
    font-size: 19px;
    max-width: 560px;
}

/* ==========================================================================
   SERVICE CHAIN — سکشن ۴ درباره‌ما: «زنجیره یکپارچه خدمات» (۷ مرحله)
   استایل مرتبط: .chain-grid, .chain-step, .chain-icon, .chain-num, .chain-title
   ========================================================================== */
.chain-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-top: 40px;
}

.chain-step {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 24px 16px;
    text-align: center;
    transition: all .25s ease;
}

.chain-step:hover {
    border-color: var(--accent);
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(198, 0, 0, .12);
}

.chain-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--bg);
    border: 1px solid var(--line-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    margin: 0 auto 14px;
}

.chain-icon svg {
    width: 23px;
    height: 23px;
}

.chain-num {
    font-size: 11px;
    color: var(--muted);
    font-weight: 700;
    direction: ltr;
    margin-bottom: 6px;
}

.chain-title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.5;
}

@media (max-width: 760px) {
    .chain-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==========================================================================
   PRODUCTION INFRASTRUCTURE — سکشن ۵ درباره‌ما: «زیرساخت تولید» (تیره)
   استایل مرتبط: .zir-section, .zir-grid, .zir-stat, .chain-row
   ========================================================================== */
.zir-section {
    background: #0e0e0e;
    color: #fff;
    padding: 80px 0;
}

.zir-grid {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: 56px;
    align-items: center;
}

.zir-image {
    border-radius: var(--radius);
    overflow: hidden;
    aspect-ratio: 4/3;
}

.zir-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.zir-tag {
    font-size: 12px;
    letter-spacing: 1px;
    color: var(--accent);
    font-weight: 700;
    margin-bottom: 14px;
}

.zir-content h2 {
    font-size: 28px;
    color: #fff;
    margin-bottom: 16px;
    max-width: 520px;
}

.zir-content p {
    font-size: 14px;
    color: rgba(255, 255, 255, .65);
    max-width: 480px;
    margin-bottom: 28px;
}

.zir-stats {
    display: flex;
    gap: 16px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}

.zir-stat {
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: var(--radius-sm);
    padding: 20px 22px;
    min-width: 170px;
}

.zir-stat-value {
    font-size: 26px;
    font-weight: 800;
    color: #fff;
    direction: ltr;
    display: block;
    text-align: right;
}

.zir-stat-label {
    font-size: 12.5px;
    color: rgba(255, 255, 255, .55);
    margin-top: 6px;
}

.chain-row-wrap {
    margin-top: 64px;
    padding-top: 56px;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.chain-row-title {
    text-align: center;
    font-size: 13px;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, .5);
    margin-bottom: 34px;
}

.chain-row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

.chain-row-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    width: 120px;
}

.chain-row-num {
    font-size: 11px;
    color: rgba(255, 255, 255, .4);
    direction: ltr;
}

.chain-row-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .18);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: all .25s ease;
}

.chain-row-icon svg {
    width: 22px;
    height: 22px;
}

.chain-row-item:hover .chain-row-icon {
    background: var(--accent);
    border-color: var(--accent);
}

.chain-row-label {
    font-size: 12px;
    color: rgba(255, 255, 255, .75);
}

.chain-row-sep {
    color: rgba(255, 255, 255, .25);
    font-size: 18px;
    margin: 0 -2px;
}

@media (max-width: 900px) {
    .zir-grid {
        grid-template-columns: 1fr;
    }

    .chain-row-sep {
        display: none;
    }
}

/* عکس گواهینامه‌ها داخل نوار استانداردها (سکشن ۶ درباره‌ما) */
/* گواهینامه‌ها (سکشن ۶ درباره‌ما) — قاب عمودی بزرگ‌تر به‌جای لوگوی افقی */
.cert-logo {
    flex: 0 0 210px;
    height: 290px;
    padding: 10px;
}

.cert-logo img {
    max-width: 100%;
    max-height: 100%;
}

/* ==========================================================================
   CERT LIGHTBOX — نمایش تمام‌صفحه گواهینامه‌ها با کلیک
   استایل مرتبط: .cert-logo (کلیک‌پذیر), .cert-lightbox, .cert-lightbox-close
   جی‌اس مرتبط: IIFE cert-lightbox در main.js
   ========================================================================== */
.cert-logo {
    cursor: zoom-in;
}

.cert-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(10, 9, 8, .92);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease;
}

.cert-lightbox.open {
    opacity: 1;
    visibility: visible;
}

.cert-lightbox img {
    max-width: 90vw;
    max-height: 88vh;
    border-radius: 10px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, .5);
    transform: scale(.92);
    transition: transform .25s ease;
}

.cert-lightbox.open img {
    transform: scale(1);
}

.cert-lightbox-close {
    position: absolute;
    top: 24px;
    left: 24px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .2);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.cert-lightbox-close:hover {
    background: var(--accent);
    border-color: var(--accent);
}

.cert-lightbox-close svg {
    width: 20px;
    height: 20px;
}

/* دکمه‌های بعدی/قبلی — اضافه‌شده برای prd-lightbox (گالری چند عکسی) */
.prd-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .2);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .2s ease;
}

.prd-lightbox-nav:hover {
    background: var(--accent);
    border-color: var(--accent);
}

.prd-lightbox-nav svg {
    width: 22px;
    height: 22px;
}

.prd-lightbox-prev {
    right: 24px;
}

.prd-lightbox-next {
    left: 24px;
}

@media (max-width: 640px) {
    .prd-lightbox-nav {
        width: 40px;
        height: 40px;
    }

    .prd-lightbox-prev {
        right: 8px;
    }

    .prd-lightbox-next {
        left: 8px;
    }
}

/* ==========================================================================
   CONTACT PAGE — سکشن فرم+اطلاعات تماس و سکشن نقشه
   استایل مرتبط: .contact-grid, .contact-info-card, .contact-row, .contact-social,
                  .map-wrap, .addr-grid, .addr-card
   ========================================================================== */
.contact-grid {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 48px;
    align-items: start;
}

.contact-info-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 32px 28px;
}

.contact-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 0;
    border-top: 1px solid var(--line);
}

.contact-row:first-of-type {
    border-top: none;
    padding-top: 0;
}

.contact-row-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg);
    border: 1px solid var(--line-strong);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.contact-row-icon svg {
    width: 18px;
    height: 18px;
}

.contact-row-label {
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 3px;
}

.contact-row-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
}

.contact-row-value a {
    color: var(--ink);
}

.contact-row-value a:hover {
    color: var(--accent);
}

.contact-social {
    display: flex;
    gap: 10px;
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
}

.contact-social-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--line-strong);
    color: var(--muted);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s ease;
}

.contact-social-icon svg {
    width: 16px;
    height: 16px;
}

.contact-social-icon:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    transform: translateY(-3px);
}

/* --- نقشه + کارت‌های آدرس --- */
.map-wrap {
    border-radius: var(--radius);
    overflow: hidden;
    height: 380px;
    border: 1px solid var(--line);
}

.map-wrap iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.addr-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 28px;
}

.addr-card {
    display: flex;
    gap: 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 22px;
}

.addr-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--bg);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.addr-card-icon svg {
    width: 20px;
    height: 20px;
}

.addr-card h4 {
    font-size: 14.5px;
    margin-bottom: 6px;
}

.addr-card p {
    font-size: 13px;
    color: var(--muted);
}

@media (max-width: 900px) {
    .contact-grid, .addr-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   PRODUCT CATEGORIES — لندینگ محصولات: ۳ کارت دسته‌بندی
   استایل مرتبط: .cat-grid, .cat-card, .cat-photo, .cat-body, .cat-tags
   ========================================================================== */
.cat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.cat-card {
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--surface);
    transition: all .3s ease;
}

.cat-card:hover {
    box-shadow: 0 20px 45px rgba(20, 18, 16, .12);
    transform: translateY(-4px);
}

.cat-photo {
    aspect-ratio: 4/3;
    overflow: hidden;
}

.cat-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.cat-card:hover .cat-photo img {
    transform: scale(1.06);
}

.cat-body {
    padding: 24px 22px;
}

.cat-body h3 {
    font-size: 18px;
    margin-bottom: 8px;
}

.cat-body p {
    font-size: 13.5px;
    color: var(--muted);
    margin-bottom: 16px;
}

.cat-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cat-tag {
    font-size: 12px;
    padding: 6px 12px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    color: var(--ink-soft);
}

@media (max-width: 900px) {
    .cat-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   CONTACT HOVER — افکت هاور با خط قرمز زیر هر کارت (صفحه تماس با ما)
   روی این‌ها اعمال میشه: .addr-card, .contact-row
   نکته: عمداً روی .contact-info-card (کانتینر بیرونی) هاور نذاشتیم که با
   هاورِ ردیف‌های داخلش تداخل نکنه و دوتا خط هم‌زمان نیاد
   ========================================================================== */
.addr-card {
    position: relative;
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease;
}

.addr-card::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background: var(--accent);
    transition: width .35s ease;
}

.addr-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 34px rgba(20, 18, 16, .1);
}

.addr-card:hover::after {
    width: 100%;
}

/* ردیف‌های داخل کارت اطلاعات تماس */
.contact-row {
    position: relative;
    padding-right: 8px;
    padding-left: 8px;
    margin: 0 -8px;
    border-radius: 8px;
    transition: none;
}

.contact-row::after {
    content: "";
    position: absolute;
    right: 8px;
    left: 8px;
    bottom: 0;
    width: 0;
    height: 2px;
    background: var(--accent);
    transition: width .35s ease;
}

.contact-row:hover::after {
    width: calc(100% - 16px);
}

/* ==========================================================================
   SERVICE CHAIN V2 — تایم‌لاین اسکرول‌محورِ «زنجیره یکپارچه خدمات»
   استایل مرتبط: .chain-v2, .chain-v2-layout, .chain-v2-sticky, .chain-v2-steps,
                 .chain-v2-step, .chain-v2-line-track, .chain-v2-line-fill
   جی‌اس مرتبط: IIFE «SERVICE CHAIN V2» در main.js (IntersectionObserver اسکرولی)
   ========================================================================== */
.chain-v2 {
    position: relative;
    overflow: hidden;
}

/* پس‌زمینه گرید کم‌رنگ، حس نقشه مهندسی */
.chain-v2::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: 46px 46px;
    opacity: .5;
    -webkit-mask-image: radial-gradient(circle at 25% 15%, #000 0%, transparent 65%);
    mask-image: radial-gradient(circle at 25% 15%, #000 0%, transparent 65%);
    pointer-events: none;
}

.chain-v2-layout {
    position: relative;
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 64px;
    margin-top: 44px;
}

/* --- پنل ثابت سمت چپ --- */
.chain-v2-sticky {
    position: sticky;
    top: 130px;
    align-self: start;
    padding: 30px 26px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 20px 45px rgba(20, 18, 16, .06);
}

.chain-v2-count {
    display: flex;
    align-items: baseline;
    gap: 8px;
    direction: ltr;
    margin-bottom: 18px;
}

.chain-v2-count-num {
    font-size: 46px;
    font-weight: 800;
    color: var(--accent);
    line-height: 1;
    transition: opacity .2s ease;
}

.chain-v2-count-total {
    font-size: 15px;
    color: var(--muted);
    font-weight: 600;
}

.chain-v2-sticky h3 {
    font-size: 17px;
    line-height: 1.6;
    margin-bottom: 22px;
    min-height: 55px;
    transition: opacity .2s ease;
}

.chain-v2-progress {
    height: 4px;
    border-radius: 999px;
    background: var(--bg);
    overflow: hidden;
}

.chain-v2-progress-bar {
    height: 100%;
    width: 8%;
    background: var(--accent);
    border-radius: 999px;
    transition: width .35s ease;
}

/* --- ستون مراحل --- */
.chain-v2-steps {
    position: relative;
}

.chain-v2-line-track {
    position: absolute;
    top: 28px;
    bottom: 28px;
    right: 27px;
    width: 2px;
    background: var(--line);
    z-index: 0;
}

.chain-v2-line-fill {
    position: absolute;
    top: 28px;
    right: 27px;
    width: 2px;
    height: 8%;
    background: var(--accent);
    z-index: 0;
    transition: height .35s ease;
}

.chain-v2-step {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 22px;
    padding: 30px 0;
    opacity: .4;
    transition: opacity .4s ease;
}

.chain-v2-step.active {
    opacity: 1;
}

.chain-v2-step-icon {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--surface);
    border: 2px solid var(--line-strong);
    color: var(--muted);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .4s ease;
}

.chain-v2-step-icon svg {
    width: 24px;
    height: 24px;
}

.chain-v2-step.active .chain-v2-step-icon {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
    transform: scale(1.1);
    box-shadow: 0 0 0 8px rgba(198, 0, 0, .12);
}

.chain-v2-step-num {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
    direction: ltr;
    margin-bottom: 6px;
    transition: color .3s ease;
}

.chain-v2-step.active .chain-v2-step-num {
    color: var(--accent);
}

.chain-v2-step-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 6px;
    transition: color .3s ease;
}

.chain-v2-step.active .chain-v2-step-title {
    color: var(--accent);
}

.chain-v2-step-desc {
    font-size: 13.5px;
    color: var(--muted);
    max-width: 460px;
    line-height: 1.8;
}

@media (max-width: 900px) {
    .chain-v2-layout {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .chain-v2-sticky {
        position: static;
    }
}

/* ==========================================================================
   CHAIN SHOWCASE — سکشن ۴: قاب مشکی اسلایدر «زنجیره یکپارچه خدمات»
   استایل مرتبط: .chain-showcase, .cs-slide, .chain-showcase-nav, .cs-navbtn
   جی‌اس مرتبط: IIFE «CHAIN SHOWCASE» در main.js (اتوپلی + کلیک + توقف روی هاور)
   ========================================================================== */
.chain-showcase {
    background: #0e0e0e;
    border-radius: var(--radius);
    padding: 16px;
}

.chain-showcase-stage {
    position: relative;
    border-radius: calc(var(--radius) - 8px);
    overflow: hidden;
    height: 460px;
}

.cs-progress {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    background: rgba(255, 255, 255, .15);
    z-index: 3;
}

.cs-progress-bar {
    height: 100%;
    width: 0%;
    background: var(--accent);
}

.cs-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    z-index: 1;
    transition: opacity .7s ease;
}

.cs-slide.active {
    opacity: 1;
    z-index: 2;
}

.cs-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cs-caption {
    position: absolute;
    inset: auto 0 0 0;
    padding: 28px 30px;
    background: linear-gradient(0deg, rgba(0, 0, 0, .88) 0%, rgba(0, 0, 0, .4) 60%, transparent 100%);
    color: #fff;
}

.cs-caption-num {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    letter-spacing: .5px;
    direction: ltr;
    margin-bottom: 8px;
    opacity: .85;
}

.cs-caption h4 {
    font-size: 21px;
    color: #fff;
    margin-bottom: 8px;
}

.cs-caption p {
    font-size: 13.5px;
    color: rgba(255, 255, 255, .78);
    max-width: 480px;
    line-height: 1.8;
}

/* --- نوار تب‌های افقی پایین عکس --- */
.chain-showcase-nav {
    display: flex;
    gap: 10px;
    margin-top: 16px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
}

.chain-showcase-nav::-webkit-scrollbar {
    display: none;
}

.cs-navbtn {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .14);
    background: transparent;
    color: rgba(255, 255, 255, .55);
    cursor: pointer;
    white-space: nowrap;
    font-family: inherit;
    transition: all .3s ease;
}

.cs-navbtn:hover {
    border-color: rgba(255, 255, 255, .32);
    color: #fff;
}

.cs-navbtn.active {
    background: #fff;
    color: #161514;
    border-color: #fff;
}

.cs-navnum {
    font-size: 11px;
    direction: ltr;
    opacity: .65;
}

.cs-navbtn.active .cs-navnum {
    color: var(--accent);
    opacity: 1;
    font-weight: 700;
}

.cs-navicon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cs-navbtn.active .cs-navicon {
    background: var(--accent);
    color: #fff;
}

.cs-navbtn svg {
    width: 13px;
    height: 13px;
}

.cs-navlabel {
    font-size: 12.5px;
}

@media (max-width: 640px) {
    .chain-showcase-stage {
        height: 340px;
    }
}

/* ==========================================================================
   GLANCE SECTION UPGRADE — بج روی عکس و کارت‌های آماری سکشن «متالیست در یک نگاه»
   استایل مرتبط: .cap-badge, .glance-stats, .glance-stat-card
   ========================================================================== */
.cap-image {
    position: relative;
}

.cap-badge {
    position: absolute;
    right: 24px;
    bottom: -20px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border-radius: var(--radius-sm);
    padding: 14px 18px;
    box-shadow: 0 18px 40px rgba(20, 18, 16, .15);
    max-width: 260px;
}

.cap-badge-logo {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 12px;
    letter-spacing: .5px;
    flex-shrink: 0;
}

.cap-badge-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--ink);
}

.cap-badge-sub {
    font-size: 11.5px;
    color: var(--muted);
    margin-top: 2px;
}

.glance-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 10px;
}

.glance-stat-card {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 18px 14px;
    text-align: center;
    transition: all .25s ease;
}

.glance-stat-card:hover {
    border-color: var(--accent);
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(198, 0, 0, .08);
}

.glance-stat-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
}

.glance-stat-icon svg {
    width: 17px;
    height: 17px;
}

.glance-stat-label {
    display: block;
    font-size: 11.5px;
    color: var(--muted);
    margin-top: 4px;
}

@media (max-width: 640px) {
    .cap-badge {
        display: none;
    }
}

/* ==========================================================================
   PROJECTS BENTO — سکشن ۷ درباره‌ما: چیدمان بنتوی «پروژه‌های منتخب»
   استایل مرتبط: .proj-bento, .proj-bento-card, .proj-bento-overlay
   ========================================================================== */
.proj-bento {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 210px;
    gap: 16px;
    margin-top: 40px;
}

.proj-bento-card {
    position: relative;
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.proj-bento-card.large {
    grid-column: span 2;
    grid-row: span 2;
}

.proj-bento-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}

.proj-bento-card:hover img {
    transform: scale(1.08);
}

.proj-bento-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, .1) 55%, transparent 75%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 18px;
}

.proj-bento-title {
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 4px;
}

.proj-bento-card.large .proj-bento-title {
    font-size: 21px;
}

.proj-bento-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, .7);
    font-size: 12px;
    opacity: 0;
    transform: translateY(6px);
    transition: all .3s ease;
}

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

.proj-bento-meta svg {
    width: 13px;
    height: 13px;
}

@media (max-width: 760px) {
    .proj-bento {
        grid-template-columns: 1fr;
        grid-auto-rows: 220px;
    }

    .proj-bento-card.large {
        grid-column: span 1;
        grid-row: span 1;
        height: 280px;
    }
}

/* ==========================================================================
   CONTACT HERO SPLIT — هیرو دوبخشی با فرم شیشه‌ای
   HTML مرتبط: .chs, .chs-bg, .chs-overlay, .chs-grid, .chs-text, .chs-form-card
   ========================================================================== */
.chs {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 170px 0 60px;
    color: #fff;
}

.chs-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.chs-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.chs-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(120deg, rgba(8, 8, 8, .82) 0%, rgba(8, 8, 8, .55) 45%, rgba(8, 8, 8, .30) 100%);
}

.chs-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 50px;
    align-items: center;
}

.chs-text .breadcrumb {
    color: rgba(255, 255, 255, .55);
}

.chs-text .breadcrumb a {
    color: rgba(255, 255, 255, .55);
}

.chs-text .breadcrumb .current {
    color: #fff;
}

.chs-text h1 {
    font-size: 23px;
    line-height: 1.5;
    color: #fff;
    margin-bottom: 16px;
    max-width: 520px;
}

.chs-text p {
    color: rgba(255, 255, 255, .72);
    font-size: 15px;
    max-width: 460px;
    margin-bottom: 26px;
}

.chs-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.chs-note {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: rgba(255, 255, 255, .6);
}

.chs-note svg {
    width: 16px;
    height: 16px;
    color: var(--accent);
    flex-shrink: 0;
}

.chs-form-card {
    position: relative;
    background: rgba(255, 255, 255, .08);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    backdrop-filter: blur(22px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: var(--radius);
    padding: 30px 28px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, .35);
}

.chs-form-card h4 {
    color: #fff;
    font-size: 18px;
    margin-bottom: 4px;
}

.chs-form-card .chs-form-sub {
    color: rgba(255, 255, 255, .6);
    font-size: 13px;
    margin-bottom: 22px;
}

.chs-field {
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: var(--radius-sm);
    padding: 13px 15px;
    margin-bottom: 12px;
    transition: border-color .2s ease, background .2s ease;
}

.chs-field:focus-within {
    border-color: var(--accent);
    background: rgba(255, 255, 255, .1);
}

.chs-field input, .chs-field textarea, .chs-field select {
    width: 100%;
    background: none;
    border: none;
    color: #fff;
    font-family: inherit;
    font-size: 13.5px;
    outline: none;
}

.chs-field input::placeholder, .chs-field textarea::placeholder {
    color: rgba(255, 255, 255, .5);
}

.chs-field select option {
    color: #1a1a1a;
}

.chs-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.chs-row .chs-field {
    margin-bottom: 0;
}

.chs-submit {
    width: 100%;
    justify-content: center;
    margin-top: 6px;
}

.chs-form-foot {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: rgba(255, 255, 255, .5);
    margin-top: 14px;
    justify-content: center;
}

@media (max-width: 900px) {
    .chs-grid {
        grid-template-columns: 1fr;
    }

    .chs-row {
        grid-template-columns: 1fr;
    }

    .chs {
        min-height: auto;
        padding: 150px 0 50px;
    }
}

/* ==========================================================================
   CHS MULTI-SELECT — نسخه شیشه‌ای دراپ‌داون «نوع پروژه» برای فرم هیرو تماس
   HTML مرتبط: .chs-ms-field (#msField) / .chs-ms-trigger (#msTrigger) / .chs-ms-dropdown (#msDropdown)
   جی‌اس مرتبط: همون IIFE «MULTI-SELECT DROPDOWN» موجود در main.js (بر اساس id کار می‌کنه)
   ========================================================================== */
.chs-ms-field {
    position: relative;
    overflow: visible;
}

.chs-ms-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 13px 15px;
    font-family: inherit;
    font-size: 13.5px;
    color: rgba(255, 255, 255, .55);
    text-align: right;
}

.chs-ms-field.has-selection .chs-ms-trigger {
    color: #fff;
}

.chs-ms-field.open .chs-ms-trigger {
    color: #fff;
}

.chs-ms-caret {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    color: rgba(255, 255, 255, .5);
    transition: transform .2s ease;
}

.chs-ms-field.open .chs-ms-caret {
    transform: rotate(180deg);
    color: var(--accent);
}

.chs-ms-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: 0;
    z-index: 30;
    background: #fff;
    border-radius: var(--radius-sm);
    box-shadow: 0 24px 50px rgba(0, 0, 0, .35);
    padding: 8px;
    max-height: 240px;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}

.chs-ms-field.open .chs-ms-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.chs-ms-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13.5px;
    color: var(--ink-soft);
    transition: background .2s ease;
}

.chs-ms-option:hover {
    background: var(--bg);
}

.chs-ms-option input {
    accent-color: var(--accent);
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* ==========================================================================
   CONTACT MAP + OFFICE CARDS — نسخه جدید سکشن دفتر مرکزی
   ========================================================================== */
/* --- بک‌گراند اپاسیتی‌دار سکشن نقشه (این کلاس‌ها قبلاً جا افتاده بودن) --- */
.contact-bg-section {
    position: relative;
    overflow: hidden;
}

.contact-bg-photo {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.contact-bg-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .30;
}

.contact-bg-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(250, 247, 242, .55) 0%, rgba(250, 247, 242, .9) 100%);
}

.contact-map-box {
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--line);
    box-shadow: 0 25px 60px rgba(0, 0, 0, .35);
}

.contact-map-box iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.contact-grid-v2 {
    grid-template-columns: 1.3fr 1fr;
    align-items: stretch;
}

.contact-map-large {
    min-height: 480px;
}

.contact-map-large iframe {
    min-height: 480px;
}

.contact-office-stack {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contact-office-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: linear-gradient(145deg, rgba(20, 20, 20, .92) 0%, rgba(5, 5, 5, .85) 100%);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--radius);
    padding: 28px 26px;
    box-shadow: 0 20px 45px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .08);
    transition: box-shadow .25s ease, transform .25s ease;
}

.contact-office-card:hover {
    box-shadow: 0 20px 45px rgba(20, 18, 16, .1);
    transform: translateY(-3px);
}

.contact-office-icon {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    background: var(--bg);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.contact-office-icon svg {
    width: 22px;
    height: 22px;
}

.contact-office-card h4 {
    color: #fff;
}

.contact-office-card p {
    color: rgba(255, 255, 255, .7);
}

.contact-office-card .link-arrow {
    color: #fff;
}

.contact-office-card .link-arrow:hover {
    color: var(--accent);
}

.contact-office-card:hover .contact-office-icon {
    background: var(--accent);
    color: #fff;
}

.contact-office-icon {
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

@media (max-width: 900px) {
    .contact-grid-v2 {
        grid-template-columns: 1fr;
    }

    .contact-map-large {
        min-height: 320px;
    }
}

/* ==========================================================================
   RESULT DARK SECTION — سکشن تیره «بعد از ثبت درخواست» با بک‌گراند اپاسیتی‌دار
   شبیه هیرو هدر ولی ارتفاع کمتر (min-height auto، فقط پدینگ)
   ========================================================================== */
/* --- کلاس‌های پایه‌ی تایم‌لاین (این‌ها هم قبلاً جا افتاده بودن) --- */
.result-timeline {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    margin-bottom: 24px;
}

.result-timeline::before {
    content: '';
    position: absolute;
    top: 22px;
    right: 8%;
    left: 8%;
    height: 1px;
    background-image: linear-gradient(to left, var(--line-strong) 50%, transparent 50%);
    background-size: 12px 1px;
}

.result-step {
    flex: 1;
    text-align: center;
    position: relative;
    z-index: 1;
    padding: 0 12px;
}

.result-step-num {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    color: var(--accent);
    font-weight: 700;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.result-step h4 {
    font-size: 15px;
    margin-bottom: 6px;
}

.result-step p {
    font-size: 13px;
    color: var(--muted);
    max-width: 220px;
    margin: 0 auto;
    line-height: 1.7;
}

.result-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--muted);
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-sm);
    padding: 14px;
    max-width: 460px;
    margin: 0 auto;
}

.result-note svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

@media (max-width: 760px) {
    .result-timeline {
        flex-direction: column;
        gap: 24px;
    }

    .result-timeline::before {
        display: none;
    }
}

.result-dark-section {
    position: relative;
    overflow: hidden;
    padding: 64px 0;
    color: #fff;
}

.result-bg-photo {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.result-bg-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.result-bg-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(8, 8, 8, .88) 0%, rgba(8, 8, 8, .75) 60%, rgba(8, 8, 8, .9) 100%);
}

.result-dark-section .result-step-num {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .25);
    color: var(--accent);
}

.result-dark-section .result-step h4 {
    color: #fff;
}

.result-dark-section .result-step p {
    color: rgba(255, 255, 255, .6);
}

.result-dark-section .result-timeline::before {
    background-image: linear-gradient(to left, rgba(255, 255, 255, .3) 50%, transparent 50%);
    background-size: 12px 1px;
}

.result-dark-section .result-note {
    color: rgba(255, 255, 255, .65);
    border-color: rgba(255, 255, 255, .25);
}

/* --- شماره تلفن کلیک‌پذیر داخل باکس‌های مشکی --- */
.contact-office-phone {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 12px;
    transition: color .2s ease;
}

.contact-office-phone svg {
    width: 16px;
    height: 16px;
    color: var(--accent);
    flex-shrink: 0;
}

.contact-office-phone:hover {
    color: var(--accent);
}

/* --- ردیف آیکون شبکه‌های اجتماعی زیر باکس‌ها --- */
.contact-office-social {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 4px;
}

.contact-office-social-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(10, 10, 10, .55);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, .15);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s ease;
}

.contact-office-social-icon svg {
    width: 18px;
    height: 18px;
}

.contact-office-social-icon:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    transform: translateY(-3px);
}

/* ==========================================================================
   ABOUT HERO — هیرو تمام‌عرض با عکس بک‌گراند، افکت زوم، تگ «با ما بدرخشید»
   و درخشش ستاره‌ای دنبال ماوس
   HTML مرتبط: .about-hero, .about-hero-bg, .about-hero-overlay, .about-hero-tag,
                .about-hero-sparkle, .about-hero-grid, .about-hero-text
   جی‌اس مرتبط: IIFE «ABOUT HERO SPARKLE» در main.js (روی #aboutHeroSparkle)
   ========================================================================== */
.about-hero {
    position: relative;
    overflow: hidden;
    min-height: 92vh;
    display: flex;
    align-items: center;
    padding: 170px 0 70px;
}

.about-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.about-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s ease;
}

.about-hero:hover .about-hero-bg img {
    transform: scale(1.06);
}

.about-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg, rgba(8, 8, 8, .05) 0%, rgba(8, 8, 8, .55) 45%, rgba(8, 8, 8, .9) 70%, rgba(8, 8, 8, .97) 100%);
}

.about-hero-sparkle {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
}

.about-hero-grid {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: flex-end;
    padding-inline-end: 60px;
    padding-inline-start: 32px;
    padding-right: 100px;
}

.about-hero-text {
    position: relative;
    z-index: 2;
    max-width: 560px;
}

.about-hero-text h1, .about-hero-text .breadcrumb .current {
    color: #fff;
}

.about-hero-text p {
    color: rgba(255, 255, 255, .72);
    margin-bottom: 34px;
}

.about-hero-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* تگ «با ما بدرخشید» پایین سمت چپ کل سکشن */
.about-hero-tag {
    position: absolute;
    left: 32px;
    bottom: 28px;
    z-index: 3;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .4s ease, transform .4s ease;
}

.about-hero:hover .about-hero-tag {
    opacity: 1;
    transform: translateY(0);
}

.about-hero-tag span {
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .3px;
}

@media (max-width: 900px) {
    .about-hero {
        padding: 150px 0 50px;
        min-height: auto;
    }
}

.about-hero-actions .btn-ghost {
    color: #fff;
    border-color: rgba(255, 255, 255, .4);
}

.about-hero-actions .btn-ghost:hover {
    color: var(--accent);
    border-color: var(--accent);
    background: rgba(255, 255, 255, .06);
}

/* ==========================================================================
   GLANCE DARK SECTION — سکشن تمام‌عرض «متالیست در یک نگاه» با بک‌گراند و باکس شیشه‌ای
   HTML مرتبط: .glance-dark-section, .glance-dark-bg, .glance-dark-overlay, .glance-stats-v2
   ========================================================================== */
.glance-dark-section {
    position: relative;
    overflow: hidden;
    padding: 90px 0;
}

.glance-dark-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.glance-dark-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.glance-dark-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, #0e0e0e 0%, rgba(8, 8, 8, .55) 15%, rgba(8, 8, 8, .7) 100%);
}

.glance-dark-content {
    position: relative;
    z-index: 2;
}

.glance-stats-v2 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 820px;
    margin: 0 auto;
}

.glance-stat-card-v2 {
    background: rgba(255, 255, 255, .08);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    backdrop-filter: blur(22px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: var(--radius-sm);
    padding: 26px 18px;
    text-align: center;
    transition: transform .25s ease, border-color .25s ease;
}

.glance-stat-card-v2:hover {
    border-color: var(--accent);
    transform: translateY(-4px);
}

.glance-stat-icon-v2 {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .07);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
}

.glance-stat-icon-v2 svg {
    width: 20px;
    height: 20px;
}

.glance-stat-value {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
    font-size: 24px;
    font-weight: 800;
    color: #fff;
    direction: ltr;
    line-height: 1;
}

.glance-stat-value small {
    order: 1;
    font-size: 16px;
    font-weight: 700;
    color: var(--accent);
}

.glance-stat-value .num-value {
    order: 2;
}

.glance-stat-label-v2 {
    display: block;
    font-size: 12.5px;
    color: rgba(255, 255, 255, .6);
    margin-top: 10px;
}

@media (max-width: 760px) {
    .glance-stats-v2 {
        grid-template-columns: 1fr;
    }
}

/* --- گذار نرم بین هیرو و این سکشن (بدون خط کنتراست) --- */
.about-hero::after {
    content: '';
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    height: 140px;
    z-index: 2;
    background: linear-gradient(180deg, transparent 0%, #0e0e0e 100%);
    pointer-events: none;
}

.glance-stat-card-v2:hover .glance-stat-icon-v2 {
    background: var(--accent) !important;
    color: #fff !important;
}

.process-bg-section {
    position: relative;
    overflow: hidden;
}

.process-bg-section::before {
    content: '';
    position: absolute;
    inset: -50%;
    background-image: linear-gradient(rgba(198, 0, 0, .5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(198, 0, 0, .5) 1px, transparent 1px);
    background-size: 46px 46px;
    opacity: .3;
    animation: processGridMove 1s linear infinite;
    pointer-events: none;
}

@keyframes processGridMove {
    from {
        transform: translate(0, 0);
    }
    to {
        transform: translate(46px, 46px);
    }
}

.process-bg-section .container {
    position: relative;
    z-index: 1;
}

.zir-section {
    position: relative;
    overflow: hidden;
}

.zir-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.zir-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.zir-bg-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(14, 14, 14, .85) 0%, rgba(14, 14, 14, .7) 50%, rgba(14, 14, 14, .9) 100%);
}

.zir-section .container {
    position: relative;
    z-index: 2;
}

/* ==========================================================================
   PRODUCTS HERO SLIDER — اسلایدر هیرو صفحه محصولات با نوار پیشرفت قرمز
   ========================================================================== */
.prod-hero-track {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.prod-hero-slider {
    min-height: 80vh !important;
}

.prod-hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.2s ease;
}

.prod-hero-slide.active {
    opacity: 1;
    z-index: 1;
}

.prod-hero-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.05);
    transition: transform 6s ease-out;
}

.prod-hero-slide.active img {
    transform: scale(1);
}

.prod-hero-progress {
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 3;
    height: 3px;
    background: rgba(255, 255, 255, .15);
}

.prod-hero-progress-bar {
    height: 100%;
    width: 0%;
    background: var(--accent);
    transition: width linear;
}

.prod-hero-text-wrap {
    position: relative;
    min-height: 140px;
}

.prod-hero-text {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity .8s ease;
}

.prod-hero-text.active {
    opacity: 1;
    pointer-events: auto;
}

.prod-hero-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 22px;
}

.prod-hero-text-wrap {
    min-height: 210px;
}

/* ==========================================================================
   GEAR CURSOR — چرخ‌دنده‌ی سراسری که جای کرسر ماوس می‌شینه
   ========================================================================== */
.gear-hover {
    cursor: none;
}

#gearCursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 30px;
    height: 30px;
    margin: -15px 0 0 -15px;
    z-index: 9999;
    color: var(--accent);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
    will-change: transform;
}

#gearCursor.active {
    opacity: 1;
}

#gearCursor .gear-spin {
    width: 100%;
    height: 100%;
    display: block;
    animation: gearSpin 3s linear infinite;
}

#gearCursor svg {
    width: 100%;
    height: 100%;
}

@keyframes gearSpin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}


/* ==========================================================================
   PRODUCT SINGLE PAGE — سکشن‌های صفحه تک محصول (اولین محصول: سوله مدولار تمام‌نبشی)
   این بلاک برای همه‌ی صفحات تک‌محصول قابل استفاده مجدده. کلاس‌ها با پیشوند prd- هستن.
   استایل‌های مرتبط با placeholder عکس هم همینجاست (.img-ph)
   ========================================================================== */

/* --- Placeholder عکس عمومی — هرجا عکس واقعی نداریم از این استفاده می‌شه --- */
.img-ph {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: repeating-linear-gradient(135deg, var(--bg), var(--bg) 10px, var(--surface) 10px, var(--surface) 20px);
    border: 1.5px dashed var(--line-strong);
    color: var(--muted);
}

.img-ph svg {
    width: 30px;
    height: 30px;
    opacity: .55;
}

.img-ph span {
    font-size: 11.5px;
    font-weight: 500;
    opacity: .7;
}

/* --- برادکرامب روشن (برای هیرو‌های روشن، برخلاف breadcrumb تیره‌ی صفحات دیگه) --- */
.prd-breadcrumb-light {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 22px;
}

.prd-breadcrumb-light a {
    color: var(--muted);
    transition: color .2s ease;
}

.prd-breadcrumb-light a:hover {
    color: var(--accent);
}

.prd-breadcrumb-light .current {
    color: var(--ink);
    font-weight: 600;
}

/* ==========================================================================
   1) هیرو صفحه محصول — بک‌گراند عکس تمام‌عرض (بدون اسلایدر)، اورلی گرادیانت روشن
   الگو از .about-hero گرفته شده ولی اورلی‌اش روشنه نه تیره (طبق سلیقه برند)
   HTML: .prd-hero / .prd-hero-bg / .prd-hero-overlay / .prd-hero-inner / .prd-hero-text
   ========================================================================== */
.prd-hero {
    position: relative;
    overflow: hidden;
    min-height: 78vh;
    display: flex;
    align-items: center;
    padding: 170px 0 64px;
}

.prd-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.prd-hero-bg img,
.prd-hero-bg .img-ph {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.prd-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    /* گرادیانت روشن از شفاف (چپ) به رنگ روشن برند (راست، پشت متن) — نه تیره */
    background: linear-gradient(90deg,
    rgba(250, 247, 242, .1) 0%,
    rgba(250, 247, 242, .68) 42%,
    rgba(253, 239, 232, .93) 68%,
    rgba(253, 239, 232, .98) 100%);
}

.prd-hero-inner {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: flex-start;
    width: 100%;
}

.prd-hero-text {
    max-width: 560px;
    text-align: right !important;
}

.prd-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(198, 0, 0, .08);
    color: var(--accent);
    font-size: 12.5px;
    font-weight: 700;
    padding: 7px 16px;
    border-radius: 30px;
    margin-bottom: 18px;
}

.prd-hero-text h1 {
    font-size: 40px;
    line-height: 1.35;
    margin-bottom: 18px;
    color: var(--ink);
}

.prd-hero-text > p {
    color: var(--ink-soft);
    font-size: 16px;
    margin-bottom: 28px;
}

.prd-hero-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

@media (max-width: 900px) {
    .prd-hero {
        min-height: auto;
        padding: 150px 0 56px;
    }

    .prd-hero-text {
        max-width: 100%;
    }

    .prd-hero-overlay {
        background: linear-gradient(180deg,
        rgba(250, 247, 242, .35) 0%,
        rgba(253, 239, 232, .92) 55%,
        rgba(253, 239, 232, .98) 100%);
    }
}

/* ==========================================================================
   1b) توضیحات کامل محصول — متن بلند سئومحور، زیر هیرو
   HTML: .prd-desc-full
   ========================================================================== */
.prd-desc-full {
    max-width: 880px;
}

.prd-desc-full p {
    color: var(--ink-soft);
    font-size: 15.5px;
    line-height: 1.9;
    margin-bottom: 18px;
}

.prd-desc-full p:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   2) معرفی محصول — توضیح کوتاه + ۴ باکس ویژگی (راست) و عکس (چپ)
   HTML: .prd-intro-grid / .prd-feat-grid / .prd-feat-card / .prd-intro-visual
   ========================================================================== */
.prd-intro-grid {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 60px;
    align-items: center;
}

.prd-intro-visual {
    aspect-ratio: 1/1.05;
    border-radius: var(--radius);
    overflow: hidden;
    order: -1;
}

.prd-intro-text > p {
    color: var(--ink-soft);
    font-size: 15.5px;
    margin-bottom: 30px;
}

.prd-feat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.prd-feat-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 20px 18px;
    transition: all .25s ease;
}

.prd-feat-card:hover {
    border-color: var(--accent);
    transform: translateY(-3px);
    box-shadow: 0 14px 28px rgba(20, 18, 16, .08);
}

.prd-feat-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--bg);
    border: 1px solid var(--line-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    margin-bottom: 14px;
}

.prd-feat-icon svg {
    width: 20px;
    height: 20px;
}

.prd-feat-card h4 {
    font-size: 14.5px;
    margin-bottom: 6px;
}

.prd-feat-card p {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.7;
}

@media (max-width: 860px) {
    .prd-intro-grid {
        grid-template-columns: 1fr;
    }

    .prd-intro-visual {
        order: 0;
        aspect-ratio: 16/10;
    }
}

/* ==========================================================================
   3) کاربردها — ردیف ۵تایی با لایت‌باکس، هاور شیک
   HTML: .prd-usecase-row / .prd-usecase-item / .prd-usecase-photo / .prd-usecase-zoom
   جی‌اس: PRODUCT LIGHTBOX در main.js (data-lightbox="usecases")
   ========================================================================== */
.prd-usecase-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}

.prd-usecase-item {
    cursor: pointer;
    text-align: center;
}

.prd-usecase-photo {
    position: relative;
    aspect-ratio: 3/3.4;
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin-bottom: 12px;
}

.prd-usecase-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 8, 6, 0) 50%, rgba(10, 8, 6, .55) 100%);
    opacity: 0;
    transition: opacity .3s ease;
}

.prd-usecase-item:hover .prd-usecase-photo::after {
    opacity: 1;
}

.prd-usecase-photo img,
.prd-usecase-photo .img-ph {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.prd-usecase-item:hover .prd-usecase-photo img,
.prd-usecase-item:hover .prd-usecase-photo .img-ph {
    transform: scale(1.08);
}

.prd-usecase-zoom {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, -50%) scale(.6);
    opacity: 0;
    transition: all .3s ease;
    z-index: 2;
}

.prd-usecase-zoom svg {
    width: 18px;
    height: 18px;
}

.prd-usecase-item:hover .prd-usecase-zoom {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.prd-usecase-item h5 {
    font-size: 13.5px;
    font-weight: 600;
    transition: color .2s ease;
}

.prd-usecase-item:hover h5 {
    color: var(--accent);
}

@media (max-width: 860px) {
    .prd-usecase-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==========================================================================
   4) مزیت‌های رقابتی — ۵ آیکون‌باکس در یک ردیف
   HTML: .prd-adv-row / .prd-adv-item
   ========================================================================== */
.prd-adv-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
}

.prd-adv-item {
    text-align: center;
    padding: 26px 14px;
    border-radius: var(--radius-sm);
    background: var(--surface);
    border: 1px solid var(--line);
    transition: all .25s ease;
}

.prd-adv-item:hover {
    border-color: var(--accent);
    box-shadow: 0 14px 30px rgba(198, 0, 0, .1);
    transform: translateY(-3px);
}

.prd-adv-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--bg);
    border: 1px solid var(--line-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    margin: 0 auto 16px;
}

.prd-adv-icon svg {
    width: 22px;
    height: 22px;
}

.prd-adv-item h5 {
    font-size: 13.5px;
    margin-bottom: 6px;
}

.prd-adv-item p {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.6;
}

@media (max-width: 960px) {
    .prd-adv-row {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 620px) {
    .prd-adv-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==========================================================================
   5) گالری آناتومی محصول — ۸ عکس، ۲ ردیف ۴تایی، هاور حرفه‌ای + لایت‌باکس
   HTML: .prd-gallery-grid / .prd-gallery-item
   جی‌اس: PRODUCT LIGHTBOX (data-lightbox="anatomy")
   ========================================================================== */
.prd-gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.prd-gallery-item {
    position: relative;
    aspect-ratio: 1/1;
    border-radius: var(--radius-sm);
    overflow: hidden;
    cursor: pointer;
}

.prd-gallery-item img,
.prd-gallery-item .img-ph {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease, filter .4s ease;
}

.prd-gallery-item:hover img,
.prd-gallery-item:hover .img-ph {
    transform: scale(1.1);
    filter: brightness(.75);
}

.prd-gallery-caption {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    padding: 14px;
    background: linear-gradient(0deg, rgba(10, 8, 6, .82), transparent);
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    transform: translateY(8px);
    opacity: 0;
    transition: all .3s ease;
}

.prd-gallery-item:hover .prd-gallery-caption {
    transform: translateY(0);
    opacity: 1;
}

.prd-gallery-num {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10.5px;
    flex-shrink: 0;
}

@media (max-width: 760px) {
    .prd-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==========================================================================
   6) روند تولید محصول — مراحل با عکس + شماره + متن
   HTML: .prd-process-row / .prd-process-step / .prd-process-photo
   ========================================================================== */
.prd-process-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.prd-process-step {
    position: relative;
}

.prd-process-photo {
    aspect-ratio: 1/0.85;
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin-bottom: 16px;
    position: relative;
}

.prd-process-photo img,
.prd-process-photo .img-ph {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.prd-process-num {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.prd-process-step h5 {
    font-size: 14.5px;
    margin-bottom: 6px;
}

.prd-process-step p {
    font-size: 12.5px;
    color: var(--muted);
    line-height: 1.7;
}

@media (max-width: 860px) {
    .prd-process-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==========================================================================
   7) کنترل کیفیت — سکشن پهن با بک‌گراند عکس + اورلی تیره + آیکون‌باکس‌ها
   HTML: .prd-quality / .prd-quality-bg / .prd-quality-overlay / .prd-quality-grid
   ========================================================================== */
.prd-quality {
    position: relative;
    padding: 84px 0;
    color: #fff;
    overflow: hidden;
}

.prd-quality-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.prd-quality-bg img,
.prd-quality-bg .img-ph {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.prd-quality-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(14, 14, 14, .55) 0%, rgba(14, 14, 14, .4) 50%, rgba(14, 14, 14, .65) 100%);
}

.prd-quality-inner {
    position: relative;
    z-index: 2;
}

.prd-quality-head {
    max-width: 560px;
    margin-bottom: 44px;
}

.prd-quality-head h2 {
    color: #fff;
    font-size: 30px;
    margin-bottom: 12px;
}

.prd-quality-head p {
    color: rgba(255, 255, 255, .7);
    font-size: 15px;
}

.prd-quality-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.prd-quality-item {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--radius-sm);
    padding: 24px 18px;
    backdrop-filter: blur(2px);
    transition: all .25s ease;
}

.prd-quality-item:hover {
    background: rgba(255, 255, 255, .1);
    transform: translateY(-3px);
}

.prd-quality-icon {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(198, 0, 0, .18);
    border: 1px solid rgba(198, 0, 0, .4);
    color: #ff5757;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.prd-quality-icon svg {
    width: 21px;
    height: 21px;
}

.prd-quality-item h5 {
    font-size: 14px;
    margin-bottom: 6px;
    color: #fff;
}

.prd-quality-item p {
    font-size: 12.5px;
    color: rgba(255, 255, 255, .65);
    line-height: 1.7;
}

@media (max-width: 960px) {
    .prd-quality-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==========================================================================
   8) مقایسه خلاصه دو محصول — کارت VS
   HTML: .prd-compare-grid / .prd-compare-card / .prd-compare-vs
   ========================================================================== */
.prd-compare-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 24px;
    align-items: center;
}

.prd-compare-card {
    background: var(--surface);
    border: 2px solid var(--line);
    border-radius: var(--radius);
    padding: 28px;
    transition: all .25s ease;
}

.prd-compare-card.is-current {
    border-color: var(--accent);
}

.prd-compare-card h4 {
    font-size: 17px;
    margin-bottom: 16px;
}

.prd-compare-card ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.prd-compare-card li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    color: var(--ink-soft);
}

.prd-compare-card li svg {
    width: 16px;
    height: 16px;
    color: var(--accent);
    flex-shrink: 0;
}

.prd-compare-vs {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--dark);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
}

@media (max-width: 760px) {
    .prd-compare-grid {
        grid-template-columns: 1fr;
    }

    .prd-compare-vs {
        margin: 0 auto;
    }
}

/* ==========================================================================
   SERVICES PAGE — مسیر خدمات (SVG خطی)، خدمات تکمیلی، FAQ حرفه‌ای، چرا متالیست
   ========================================================================== */

/* --- مسیر خدمات: خط SVG که هنگام اسکرول پر می‌شود --- */
.svc-path-wrap {
    position: relative;
    padding-top: 10px;
}

.svc-path-svg {
    width: 100%;
    height: 40px;
    display: block;
    overflow: visible;
}

#svcPathTrack {
    stroke: var(--line-strong);
    stroke-width: 2;
    fill: none;
}

#svcPathFill {
    stroke: var(--accent);
    stroke-width: 2;
    fill: none;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    transition: stroke-dashoffset 1.8s ease;
}

.svc-path-wrap.in-view #svcPathFill {
    stroke-dashoffset: 0;
}

.svc-path-nodes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: -6px;
}

.svc-path-node {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 28px 22px;
    text-align: center;
    opacity: .4;
    transform: translateY(10px);
    transition: opacity .6s ease, transform .6s ease, border-color .3s ease;
}

.svc-path-wrap.in-view .svc-path-node {
    opacity: 1;
    transform: translateY(0);
}

.svc-path-wrap.in-view .svc-path-node:nth-child(2) {
    transition-delay: .3s;
}

.svc-path-wrap.in-view .svc-path-node:nth-child(3) {
    transition-delay: .6s;
}

.svc-path-icon {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--bg);
    border: 1px solid var(--line-strong);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.svc-path-icon svg {
    width: 24px;
    height: 24px;
}

.svc-path-num {
    font-size: 12px;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: .5px;
    margin-bottom: 8px;
}

.svc-path-node h4 {
    font-size: 16px;
    margin-bottom: 8px;
}

.svc-path-node p {
    font-size: 13.5px;
    color: var(--muted);
    margin-bottom: 12px;
}

.svc-path-out {
    font-size: 12px;
    color: var(--muted);
    display: block;
    border-top: 1px dashed var(--line-strong);
    padding-top: 12px;
}

@media (max-width: 760px) {
    .svc-path-svg {
        display: none;
    }

    .svc-path-nodes {
        grid-template-columns: 1fr;
    }
}

/* --- خدمات تکمیلی: کارت آیکون‌دار با هاور --- */
.svc-comp-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.svc-comp-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 30px 24px;
    transition: all .3s ease;
}

.svc-comp-card:hover {
    border-color: var(--accent);
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(198, 0, 0, .1);
}

.svc-comp-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--bg);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    transition: background .3s ease, color .3s ease;
}

.svc-comp-card:hover .svc-comp-icon {
    background: var(--accent);
    color: #fff;
}

.svc-comp-card h4 {
    font-size: 15.5px;
    margin-bottom: 8px;
}

.svc-comp-card p {
    font-size: 13px;
    color: var(--muted);
}

@media (max-width: 900px) {
    .svc-comp-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .svc-comp-grid {
        grid-template-columns: 1fr;
    }
}

/* --- FAQ حرفه‌ای‌تر (کارت به‌جای خط ساده) --- */
.svc-faq-wrap {
    max-width: 820px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.svc-faq-item {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    overflow: hidden;
    transition: border-color .3s ease, box-shadow .3s ease;
}

.svc-faq-item:hover {
    border-color: var(--line-strong);
    box-shadow: 0 10px 26px rgba(20, 18, 16, .06);
}

.svc-faq-item.open {
    border-color: var(--accent);
    box-shadow: 0 14px 34px rgba(198, 0, 0, .08);
}

.svc-faq-q {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 20px 22px;
    text-align: right;
    font-family: inherit;
}

.svc-faq-num {
    font-size: 12px;
    font-weight: 700;
    color: var(--accent);
    direction: ltr;
    flex-shrink: 0;
}

.svc-faq-text {
    flex: 1;
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
}

.svc-faq-toggle {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bg);
    color: var(--muted);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform .3s ease, background .3s ease, color .3s ease;
}

.svc-faq-toggle svg {
    width: 15px;
    height: 15px;
}

.svc-faq-item.open .svc-faq-toggle {
    transform: rotate(180deg);
    background: var(--accent);
    color: #fff;
}

.svc-faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease;
}

.svc-faq-a p {
    font-size: 13.5px;
    color: var(--muted);
    line-height: 1.9;
    padding: 0 22px 22px 62px;
}

.svc-faq-item.open .svc-faq-a {
    max-height: 220px;
}

/* --- چرا متالیست --- */
.why-svc-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

.why-svc-card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    border-top: 3px solid var(--accent);
    border-radius: var(--radius-sm);
    padding: 26px 22px;
    transition: transform .3s ease, box-shadow .3s ease;
}

.why-svc-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 40px rgba(20, 18, 16, .08);
}

.why-svc-num {
    font-size: 26px;
    font-weight: 800;
    color: var(--line-strong);
    direction: ltr;
    margin-bottom: 10px;
}

.why-svc-card h4 {
    font-size: 15.5px;
    margin-bottom: 8px;
}

.why-svc-card p {
    font-size: 13px;
    color: var(--muted);
}

.why-commit-box {
    background: var(--ink);
    border-radius: var(--radius);
    padding: 36px 32px;
}

.why-commit-box h3 {
    color: #fff;
    font-size: 19px;
    margin-bottom: 18px;
}

.why-commit-list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 24px;
}

.why-commit-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13.5px;
    color: rgba(255, 255, 255, .75);
    line-height: 1.7;
}

.why-commit-list li::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    margin-top: 7px;
    flex-shrink: 0;
}

@media (max-width: 900px) {
    .why-svc-grid {
        grid-template-columns: 1fr;
    }

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

/* --- بک‌گراند سکشن مقایسه --- */
.prd-compare-section {
    position: relative;
    overflow: hidden;
    padding: 90px 0;
}

.prd-compare-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.prd-compare-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.prd-compare-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(10, 10, 10, .82) 0%, rgba(10, 10, 10, .7) 100%);
}

/* ==========================================================================
   PRD QUALITY — سکشن کنترل کیفیت (بک‌گراند + اورلی + گذار به سکشن بعدی)
   ========================================================================== */
.prd-quality {
    position: relative;
    overflow: hidden;
    padding: 90px 0;
    color: #fff;
}

.prd-quality-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.prd-quality-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.prd-quality-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(10, 10, 10, .55) 0%, rgba(10, 10, 10, .4) 50%, rgba(10, 10, 10, .65) 100%);
}

.prd-quality-inner {
    position: relative;
    z-index: 2;
}

/* --- جدول شیشه‌ای مقایسه با کنتراست بهتر روی بک‌گراند تیره --- */
.prd-compare-wrap {
    overflow-x: auto;
    border-radius: var(--radius);
    background: rgba(255, 255, 255, .07);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    backdrop-filter: blur(22px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, .16);
    box-shadow: 0 30px 70px rgba(0, 0, 0, .35);
}

.prd-compare-table {
    width: 100%;
    border-collapse: collapse;
    background: transparent;
}

.prd-compare-table th, .prd-compare-table td {
    padding: 18px 22px;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    font-size: 14px;
    color: rgba(255, 255, 255, .85);
}

.prd-compare-table thead th {
    background: rgba(255, 255, 255, .05);
    color: #fff;
    font-weight: 700;
    font-size: 14.5px;
}

.prd-compare-feature-col {
    text-align: right !important;
    font-weight: 600;
    color: #fff;
}

.prd-compare-table th.is-current {
    background: rgba(198, 0, 0, .25);
    color: #fff;
}

.prd-compare-table td.is-current {
    background: rgba(198, 0, 0, .1);
}

.prd-compare-table tbody tr:last-child td {
    border-bottom: none;
}

.prd-compare-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
}

.prd-compare-icon.is-yes {
    color: #fff;
    background: #16a34a;
}

.prd-compare-icon.is-no {
    color: rgba(255, 255, 255, .5);
    background: rgba(255, 255, 255, .08);
}

.prd-compare-icon svg {
    width: 16px;
    height: 16px;
}

.prd-hero-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.svc-path-bg-section {
    position: relative;
    overflow: hidden;
}

.svc-bg-photo {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: .5;
}

.svc-bg-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.why-commit-box {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(26, 26, 26, .55) 0%, rgba(26, 26, 26, .75) 100%);
}

#svcVideoEl {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
}

.v-video-frame.playing .v-video-play,
.v-video-frame.playing .v-video-scrim {
    opacity: 0;
    pointer-events: none;
}

/* ==========================================================================
   BLOG PAGE — بنر، فیلتر دسته‌بندی، گرید پست‌ها، پیجینیشن
   ========================================================================== */
.blog-banner {
    padding: 170px 0 50px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    height: 100vh;
}

.blog-banner h1 {
    font-size: 32px;
    margin-bottom: 10px;
}

.blog-banner p {
    color: var(--muted);
    font-size: 15px;
}

.blog-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 40px;
}

.blog-filter-pill {
    padding: 10px 20px;
    border-radius: 999px;
    border: 1px solid var(--line-strong);
    background: var(--surface);
    color: var(--ink-soft);
    font-size: 13.5px;
    font-weight: 600;
    transition: all .25s ease;
}

.blog-filter-pill:hover {
    border-color: var(--accent);
    color: var(--accent);
    transform: translateY(-2px);
}

.blog-filter-pill.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.blog-post-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.blog-post-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 45px rgba(20, 18, 16, .12);
    border-color: var(--line-strong);
}

.blog-post-img {
    aspect-ratio: 4/3;
    overflow: hidden;
}

.blog-post-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.blog-post-card:hover .blog-post-img img {
    transform: scale(1.08);
}

.blog-post-cat {
    display: inline-block;
    margin: 18px 18px 0;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(198, 0, 0, .08);
    color: var(--accent);
    font-size: 11.5px;
    font-weight: 700;
}

.blog-post-title {
    font-size: 15.5px;
    line-height: 1.7;
    margin: 12px 18px 14px;
    color: var(--ink);
    transition: color .2s ease;
}

.blog-post-card:hover .blog-post-title {
    color: var(--accent);
}

.blog-post-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 18px 18px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    font-size: 12px;
    color: var(--muted);
}

.blog-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 50px;
}

.blog-page-btn {
    min-width: 40px;
    height: 40px;
    padding: 0 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line-strong);
    background: var(--surface);
    color: var(--ink-soft);
    font-size: 13.5px;
    font-weight: 600;
    transition: all .2s ease;
}

.blog-page-btn:hover:not(:disabled) {
    border-color: var(--accent);
    color: var(--accent);
}

.blog-page-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.blog-page-btn:disabled {
    opacity: .4;
    cursor: not-allowed;
}

.blog-page-dots {
    color: var(--muted);
    font-size: 13px;
    padding: 0 4px;
}

.blog-post-card.is-hidden {
    display: none !important;
}

.blog-carousel-wrap {
    position: relative;
}

.blog-carousel-arrow {
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    color: var(--ink);
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 24px rgba(20, 18, 16, .15);
    transition: background .2s ease, color .2s ease, transform .2s ease;
}

.blog-carousel-arrow svg {
    width: 18px;
    height: 18px;
}

.blog-carousel-arrow:hover {
    background: var(--accent);
    color: #fff;
}

.blog-carousel-prev {
    right: 6px;
}

.blog-carousel-next {
    left: 6px;
}

.blog-carousel-arrow:disabled {
    opacity: .3;
    pointer-events: none;
}

@media (max-width: 560px) {
    .blog-carousel-arrow {
        display: flex;
    }
}

/* این رو پاک کن: */
.blog-carousel-next svg {
    transform: scaleX(-1);
}

/* و این رو جاش بذار: */
.blog-carousel-prev svg {
    transform: scaleX(-1);
}

.page-white-bg {
    background: #ffffff;
}

.page-white-bg .blog-banner {
    background: #ffffff;
}

.blog-banner {
    position: relative;
    overflow: hidden;
}

.blog-banner-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: .5;
}

.blog-banner-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-banner .container {
    position: relative;
    z-index: 1;
}

/* ==========================================================================
   SINGLE BLOG POST
   ========================================================================== */
.post-hero {
    padding: 170px 0 40px;
    background: var(--bg);
    position: relative !important;
    overflow: hidden;
}

.post-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.post-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.post-hero .container {
    position: relative;
    z-index: 2;
}

.post-hero .blog-post-cat {
    margin: 20px 0 14px;
}

.post-hero h1 {
    font-size: 28px;
    line-height: 1.6;
    margin-bottom: 18px;
    max-width: 800px;
}

.post-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.post-hero-meta span {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--muted);
}

.post-hero-meta svg {
    width: 15px;
    height: 15px;
    color: var(--accent);
}

.post-featured-img {
    border-radius: var(--radius);
    overflow: hidden;
    aspect-ratio: 21/9;
}

.post-featured-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- گرید دوستونه: بدنه + سایدبار --- */
.post-layout {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.post-sidebar {
    order: 1;
}

.post-body {
    order: 2;
}

.post-toc {
    position: static;
    display: inline-block;
    width: fit-content;
    max-width: 100%;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 20px 24px;
}

.post-toc h4 {
    font-size: 14px;
    margin-bottom: 14px;
}

.post-toc nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.post-toc-link {
    font-size: 13px;
    color: var(--muted);
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--line-strong);
    transition: all .2s ease;
}

.post-toc-link:hover {
    color: var(--ink);
    border-color: var(--ink-soft);
}

.post-toc-link.active {
    color: #fff;
    background: var(--accent);
    border-color: var(--accent);
    font-weight: 600;
}

.post-body p {
    font-size: 15px;
    line-height: 2.1;
    color: var(--ink-soft);
    margin-bottom: 20px;
}

.post-body h2 {
    font-size: 20px;
    margin: 36px 0 14px;
    color: var(--ink);
    scroll-margin-top: 110px;
}

.post-body blockquote {
    border-right: 3px solid var(--accent);
    padding: 4px 20px;
    margin: 26px 0;
    font-size: 15.5px;
    color: var(--ink);
    font-weight: 600;
    background: var(--bg);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* --- جدول --- */
.post-table-wrap {
    overflow-x: auto;
    margin: 20px 0 28px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
}

.post-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

.post-table th, .post-table td {
    padding: 14px 16px;
    text-align: center;
    border-bottom: 1px solid var(--line);
}

.post-table thead th {
    background: var(--bg);
    font-weight: 700;
    color: var(--ink);
}

.post-table tbody tr:last-child td {
    border-bottom: none;
}

.post-table td:first-child, .post-table th:first-child {
    text-align: right;
    font-weight: 600;
}

/* --- ویدیو --- */
.post-video {
    border-radius: var(--radius);
    overflow: hidden;
    margin: 20px 0 28px;
    aspect-ratio: 16/9;
    background: #000;
}

.post-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.post-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 30px 0 24px;
}

.post-tag {
    font-size: 12px;
    padding: 6px 14px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    color: var(--ink-soft);
}

.post-share {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
    font-size: 13px;
    color: var(--muted);
}

.post-share-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--line-strong);
    color: var(--muted);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s ease;
}

.post-share-icon svg {
    width: 16px;
    height: 16px;
}

.post-share-icon:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

@media (max-width: 900px) {
    .post-layout {
        grid-template-columns: 1fr;
    }

    .post-sidebar {
        order: 1;
    }

    .post-body {
        order: 2;
    }

    .post-toc {
        position: static;
        margin-bottom: 24px;
    }
}

@media (max-width: 760px) {
    .post-hero h1 {
        font-size: 22px;
    }

    .post-featured-img {
        aspect-ratio: 4/3;
    }

    .post-table {
        font-size: 12px;
    }

    .post-table th, .post-table td {
        padding: 10px 8px;
    }
}

.read-progress {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    z-index: 999;
    background: transparent;
}

.read-progress::before {
    content: '';
    display: block;
    height: 100%;
    width: var(--progress, 0%);
    background: var(--accent);
    transition: width .1s ease-out;
}

.post-reviews-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.post-review-card {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 26px 24px;
}

.post-review-stars {
    display: flex;
    gap: 3px;
    color: var(--accent);
    margin-bottom: 14px;
}

.post-review-stars svg {
    width: 15px;
    height: 15px;
}

.post-review-card p {
    font-size: 13.5px;
    color: var(--ink-soft);
    line-height: 1.9;
    margin-bottom: 20px;
}

.post-review-who {
    display: flex;
    align-items: center;
    gap: 12px;
}

.post-review-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--ink);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}

.post-review-name {
    font-size: 13.5px;
    font-weight: 600;
}

.post-review-role {
    font-size: 11.5px;
    color: var(--muted);
}

@media (max-width: 900px) {
    .post-reviews-grid {
        grid-template-columns: 1fr;
    }
}

.post-video {
    position: relative;
}

#postVideoEl {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
}

.post-video-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(0, 0, 0, .25);
    transition: opacity .3s ease;
}

.post-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform .2s ease, background .2s ease;
}

.post-video-play:hover {
    background: var(--accent-deep);
    transform: translate(-50%, -50%) scale(1.08);
}

.post-video-play svg {
    width: 26px;
    height: 26px;
    fill: #fff;
    margin-right: -3px;
}

.post-video.playing .post-video-play,
.post-video.playing .post-video-scrim {
    opacity: 0;
    pointer-events: none;
}

.post-review-form {
    max-width: 780px;
    margin: 0 auto 40px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 32px 30px;
}

.post-review-form h3 {
    font-size: 18px;
    margin-bottom: 6px;
}

.post-review-form-sub {
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 20px;
}

.post-review-rating {
    display: flex;
    gap: 6px;
    margin-bottom: 22px;
}

.post-review-star {
    color: var(--line-strong);
    transition: color .15s ease, transform .15s ease;
}

.post-review-star svg {
    width: 26px;
    height: 26px;
}

.post-review-star:hover,
.post-review-star.is-hover {
    color: var(--accent);
    transform: scale(1.1);
}

.post-review-star.is-active {
    color: var(--accent);
}

.post-reviews-grid {
    max-width: 780px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.post-review-card {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 24px 22px;
    display: flex;
    flex-direction: column;
}

.post-review-stars {
    display: flex;
    gap: 3px;
    color: var(--accent);
    margin-bottom: 12px;
}

.post-review-stars svg {
    width: 14px;
    height: 14px;
}

.post-review-card p {
    font-size: 13px;
    color: var(--ink-soft);
    line-height: 1.85;
    margin-bottom: 18px;
    flex: 1;
}

.post-review-who {
    display: flex;
    align-items: center;
    gap: 10px;
}

.post-review-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--ink);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}

.post-review-name {
    font-size: 13px;
    font-weight: 600;
}

.post-review-role {
    font-size: 11px;
    color: var(--muted);
}

@media (max-width: 900px) {
    .post-reviews-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   PROJECTS ARCHIVE — فیلتر+سرچ صفحه پروژه‌ها
   HTML مرتبط: .proj-filter-bar, .proj-search, .filter-count
   ========================================================================== */
.proj-filter-bar {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 30px;
}

.proj-search {
    position: relative;
    max-width: 420px;
}

.proj-search svg {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--muted);
}

.proj-search input {
    width: 100%;
    padding: 12px 44px 12px 16px;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-family: inherit;
    font-size: 13.5px;
    background: var(--surface);
}

.proj-search input:focus {
    outline: none;
    border-color: var(--accent);
}

.filter-count {
    display: inline-block;
    margin-right: 4px;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .06);
    font-size: 10.5px;
    font-weight: 700;
}

.blog-filter-pill.active .filter-count {
    background: rgba(255, 255, 255, .25);
    color: #fff;
}

@media (min-width: 760px) {
    .proj-filter-bar {
        flex-direction: row-reverse;
        align-items: center;
        justify-content: space-between;
    }
}

/* ==========================================================================
   PROJECT ARCHIVE CARD — باکس‌دار با اطلاعات ثابت زیر عکس (الگوی بوذرجمهر)
   HTML مرتبط: .proj-archive-card, .proj-archive-img, .proj-archive-body,
                .proj-archive-info, .proj-archive-footer
   ========================================================================== */
.proj-archive-card {
    display: block;
    color: inherit;
    text-decoration: none;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.proj-archive-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 45px rgba(20, 18, 16, .1);
    border-color: var(--line-strong);
}

.proj-archive-img {
    aspect-ratio: 4/3;
    overflow: hidden;
}

.proj-archive-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}

.proj-archive-card:hover .proj-archive-img img {
    transform: scale(1.08);
}

.proj-archive-body {
    padding: 18px 18px 20px;
}

.proj-archive-title {
    font-size: 15.5px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 14px;
    transition: color .2s ease;
}

.proj-archive-card:hover .proj-archive-title {
    color: var(--accent);
}

.proj-archive-info {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    border-top: 1px solid var(--line);
    padding-top: 14px;
}

.proj-archive-info li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
}

.proj-archive-info svg {
    width: 15px;
    height: 15px;
    color: var(--accent);
    flex-shrink: 0;
}

.proj-archive-info-label {
    color: var(--muted);
}

.proj-archive-info-value {
    color: var(--ink);
    font-weight: 600;
    margin-right: auto;
}

.proj-archive-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.proj-archive-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--accent);
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 999px;
    transition: gap .2s ease;
}

.proj-archive-card:hover .proj-archive-btn {
    gap: 10px;
}

.proj-archive-cat {
    font-size: 11px;
    color: var(--muted);
    font-weight: 600;
}

.proj-archive-card.is-hidden {
    display: none !important;
}

.proj-empty {
    text-align: center;
    color: var(--muted);
    padding: 40px 0;
}

/* ==========================================================================
   PROJECTS STATS BAR — نسخه‌ی ۴ ستونه‌ی .glance-stats-v2 مخصوص صفحه پروژه‌ها
   HTML مرتبط: .glance-stats-v2.proj-stats-4col
   ========================================================================== */
.glance-stats-v2.proj-stats-4col {
    grid-template-columns: repeat(4, 1fr);
    max-width: 980px;
}

@media (max-width: 760px) {
    .glance-stats-v2.proj-stats-4col {
        grid-template-columns: repeat(2, 1fr);
        max-width: 100%;
        gap: 10px;
    }

    .glance-stats-v2.proj-stats-4col .glance-stat-card-v2 {
        padding: 14px 8px;
    }

    .glance-stats-v2.proj-stats-4col .glance-stat-icon-v2 {
        width: 32px;
        height: 32px;
        margin-bottom: 8px;
    }

    .glance-stats-v2.proj-stats-4col .glance-stat-icon-v2 svg {
        width: 15px;
        height: 15px;
    }

    .glance-stats-v2.proj-stats-4col .glance-stat-value {
        font-size: 16px;
    }

    .glance-stats-v2.proj-stats-4col .glance-stat-value small {
        font-size: 11px;
    }

    .glance-stats-v2.proj-stats-4col .glance-stat-label-v2 {
        font-size: 10.5px;
        margin-top: 6px;
    }
}

/* ==========================================================================
   COVERAGE + CTA MERGED SECTION — سکشن ادغامی محدوده خدمات و فرم
   HTML مرتبط: .coverage-cta-section, .coverage-cta-grid, .chs-form-card (بازاستفاده گلس)
   ========================================================================== */
.coverage-cta-section {
    position: relative;
    overflow: hidden;
    padding: 90px 0;
}

.coverage-cta-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.coverage-cta-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.coverage-cta-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(120deg, rgba(8, 8, 8, .85) 0%, rgba(8, 8, 8, .6) 45%, rgba(8, 8, 8, .35) 100%);
}

.coverage-cta-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 50px;
    align-items: center;
}

.coverage-cta-text h2 {
    color: #fff;
    font-size: 28px;
    margin-bottom: 14px;
}

.coverage-cta-text p {
    color: rgba(255, 255, 255, .72);
    font-size: 14.5px;
    margin-bottom: 24px;
    max-width: 460px;
}

.coverage-grid-dark {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.coverage-chip-dark {
    padding: 9px 16px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    color: #fff;
    background: rgba(255, 255, 255, .06);
}

@media (max-width: 900px) {
    .coverage-cta-grid {
        grid-template-columns: 1fr;
    }
}

/* --- گلس‌سازی فرم rfqForm فقط داخل این کارت — فرم‌های دیگه‌ی سایت دست‌نخورده می‌مونن --- */
.chs-form-card .field,
.chs-form-card .ms-trigger,
.chs-form-card .field-file {
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .18);
}

/* حذف کادر دوتایی: خودِ .ms-field (چون کلاس field رو هم داره) نباید بردر/بک‌گراند مجزا بگیره،
   فقط .ms-trigger داخلش شیشه‌ای بمونه */
.chs-form-card .field.ms-field {
    background: none;
    border: none;
}

.chs-form-card .field input,
.chs-form-card .field textarea,
.chs-form-card .ms-trigger,
.chs-form-card .ms-trigger span,
.chs-form-card #msTriggerText {
    color: #fff;
}

.chs-form-card .field input::placeholder,
.chs-form-card .field textarea::placeholder {
    color: rgba(255, 255, 255, .5);
}

.chs-form-card .field-file-text,
.chs-form-card .field-file-text strong,
.chs-form-card .field-file svg,
.chs-form-card .ms-caret {
    color: rgba(255, 255, 255, .8);
}

.chs-form-card .ms-dropdown {
    background: rgba(20, 20, 20, .55);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
    border: none;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .3);
}

.chs-form-card .ms-option:hover {
    background: rgba(0, 0, 0, .35);
}

.chs-form-card .ms-option span {
    color: #fff;
}

button#msTrigger {
    border-radius: 22px !important;
}

/* ==========================================================================
   SINGLE PROJECT PAGE — سایدبار مشخصات، چالش‌ها، تایم‌لاین، نتایج، گالری
   ========================================================================== */
.proj-hero-sub {
    color: var(--muted);
    font-size: 15px;
    max-width: 700px;
    margin: -6px 0 18px;
}

/* --- چیدمان دوستونه با سایدبار چسبان واقعی --- */
.proj-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 40px;
    align-items: start;
}

.proj-sidebar {
    position: sticky;
    top: 100px;
}

.proj-spec-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 24px;
}

.proj-spec-card h4 {
    font-size: 14px;
    margin-bottom: 16px;
}

.proj-spec-list {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.proj-spec-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
}

.proj-spec-list li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.proj-spec-list svg {
    width: 15px;
    height: 15px;
    color: var(--accent);
    flex-shrink: 0;
}

.proj-spec-label {
    color: var(--muted);
}

.proj-spec-value {
    color: var(--ink);
    font-weight: 600;
    margin-right: auto;
}

.proj-spec-cta {
    width: 100%;
    justify-content: center;
    font-size: 13px;
}

/* --- کارت‌های چالش پروژه --- */
.proj-challenge-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    margin: 20px 0 32px;
}

.proj-challenge-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 20px;
}

.proj-challenge-card svg {
    width: 26px;
    height: 26px;
    color: var(--accent);
    margin-bottom: 12px;
}

.proj-challenge-card h4 {
    font-size: 14.5px;
    margin-bottom: 8px;
    color: var(--ink);
}

.proj-challenge-card p {
    font-size: 13px;
    color: var(--muted);
    margin: 0;
}

/* --- دامنه خدمات: مراحل افقی --- */
.proj-scope-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 20px 0 28px;
}

.proj-scope-step {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    font-size: 12.5px;
    color: var(--ink-soft);
}

.proj-scope-step span {
    color: var(--accent);
    font-weight: 700;
    font-size: 11px;
}

/* --- تایم‌لاین اجرای پروژه --- */
.proj-timeline {
    position: relative;
    margin: 24px 0 32px;
    padding-right: 24px;
    border-right: 2px solid var(--line);
}

.proj-timeline-item {
    position: relative;
    padding-bottom: 36px;
}

.proj-timeline-item:last-child {
    padding-bottom: 0;
}

.proj-timeline-dot {
    position: absolute;
    right: -30px;
    top: 4px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--accent);
    border: 3px solid var(--surface);
    box-shadow: 0 0 0 1px var(--accent);
}

.proj-timeline-date {
    font-size: 11.5px;
    color: var(--accent);
    font-weight: 700;
}

.proj-timeline-content h4 {
    font-size: 15px;
    margin: 6px 0 8px;
    color: var(--ink);
}

.proj-timeline-content p {
    font-size: 13.5px;
    color: var(--muted);
    margin-bottom: 14px;
}

.proj-timeline-content img {
    width: 100%;
    border-radius: var(--radius-sm);
    aspect-ratio: 16/9;
    object-fit: cover;
}

/* --- نتیجه پروژه --- */
.proj-results-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 20px 0 30px;
}

.proj-result-card {
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 24px 10px;
}

.proj-result-value {
    display: block;
    font-size: 26px;
    font-weight: 800;
    color: var(--accent);
    margin-bottom: 6px;
}

.proj-result-label {
    font-size: 12px;
    color: var(--muted);
}

/* --- گالری تصاویر --- */
.proj-gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 160px;
    grid-auto-flow: dense;
    gap: 14px;
}

.proj-gallery-item {
    border-radius: var(--radius-sm);
    overflow: hidden;
    cursor: pointer;
    aspect-ratio: auto;
}

.proj-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.proj-gallery-item:hover img {
    transform: scale(1.06);
}

.proj-gallery-tall {
    grid-row: span 2;
}

.proj-gallery-wide {
    grid-column: span 2;
}

/* --- ریسپانسیو --- */
@media (max-width: 900px) {
    .proj-layout {
        grid-template-columns: 1fr;
    }

    .proj-sidebar {
        position: static;
        order: -1;
    }

    .proj-challenge-grid {
        grid-template-columns: 1fr;
    }

    .proj-results-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .proj-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 140px;
    }

    .proj-gallery-wide,
    .proj-gallery-tall {
        grid-column: span 1;
        grid-row: span 1;
    }
}

.post-hero-overlay {
    background: linear-gradient(180deg, rgba(10, 10, 12, .55) 0%, rgba(10, 10, 12, .78) 100%);
}

.post-hero h1,
.post-hero .breadcrumb a,
.post-hero .breadcrumb .current,
.post-hero .breadcrumb .sep {
    color: #fff;
}

.post-hero .breadcrumb a {
    opacity: .85;
}

.post-hero-meta span {
    color: rgba(255, 255, 255, .85);
}

.proj-hero-sub {
    color: rgba(255, 255, 255, .8);
}

/* ==========================================================================
   SERVICES ARCHIVE — گرید ۶ خدمت + زنجیره خدمات
   ========================================================================== */
.svc-archive-grid {
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    gap: 24px;
}

@media (max-width: 900px) {
    .svc-archive-grid {
        grid-template-columns:repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .svc-archive-grid {
        grid-template-columns:1fr;
    }
}

.svc-archive-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 32px 26px;
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
    overflow: hidden;
}

.svc-archive-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(198, 0, 0, .05), transparent 60%);
    opacity: 0;
    transition: opacity .25s ease;
}

.svc-archive-card:hover {
    border-color: var(--accent);
    box-shadow: 0 18px 40px -20px rgba(198, 0, 0, .35);
    transform: translateY(-4px);
}

.svc-archive-card:hover::before {
    opacity: 1;
}

.svc-archive-num {
    font-size: 12px;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: .04em;
}

.svc-archive-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--bg);
    border: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-deep);
    transition: background .25s ease, color .25s ease;
}

.svc-archive-icon svg {
    width: 26px;
    height: 26px;
}

.svc-archive-card:hover .svc-archive-icon {
    background: var(--accent);
    color: #fff;
}

.svc-archive-card h3 {
    font-size: 19px;
    margin: 0;
}

.svc-archive-card p {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.9;
    margin: 0;
}

.svc-archive-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--accent-deep);
    margin-top: auto;
}

.svc-archive-more svg {
    width: 16px;
    height: 16px;
    transition: transform .2s ease;
}

.svc-archive-card:hover .svc-archive-more svg {
    transform: translateX(-4px);
}

.svc-archive-card-link {
    position: absolute;
    inset: 0;
    z-index: 2;
}

/* زنجیره ۶ خدمت */
.svc-chain-grid {
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    gap: 0;
    position: relative;
}

@media (max-width: 760px) {
    .svc-chain-grid {
        grid-template-columns:1fr;
    }
}

.svc-chain-item {
    position: relative;
    text-align: center;
    padding: 22px 16px;
}

.svc-chain-item .svc-chain-num {
    width: 40px;
    height: 40px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
}

.svc-chain-item h4 {
    font-size: 15px;
    margin-bottom: 6px;
}

.svc-chain-item p {
    font-size: 12.5px;
    color: var(--muted);
    margin: 0;
}

.svc-chain-item:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 20px;
    left: -8%;
    width: 16%;
    height: 2px;
    background: var(--line-strong);
}

@media (max-width: 760px) {
    .svc-chain-item:not(:last-child)::after {
        display: none;
    }
}

/* ==========================================================================
   COOPERATION PAGE
   ========================================================================== */
.field select {
    width: 100%;
    background: none;
    border: none;
    color: var(--ink);
    font-family: inherit;
    font-size: 14px;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

.field-select {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.field-select svg {
    width: 16px;
    height: 16px;
    color: var(--muted);
    flex-shrink: 0;
    pointer-events: none;
}

.coop-hero {
    position: relative;
    padding: 60px 0 70px;
    background: var(--bg);
    overflow: hidden;
}

.coop-hero-grid {
    display: grid;
    grid-template-columns:1fr 1.05fr;
    gap: 50px;
    align-items: center;
}

@media (max-width: 900px) {
    .coop-hero-grid {
        grid-template-columns:1fr;
    }
}

.coop-hero-text .eyebrow {
    justify-content: flex-start;
}

.coop-hero-text h1 {
    font-size: 38px;
    line-height: 1.35;
    margin-bottom: 18px;
}

.coop-hero-text p {
    color: var(--muted);
    font-size: 15.5px;
    line-height: 2;
    margin-bottom: 28px;
    max-width: 520px;
}

.coop-hero-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.coop-hero-visual {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    margin-top: 34px;
}

.coop-hero-visual img {
    width: 100%;
    display: block;
}

.coop-hero-form-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 30px;
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .15);
}

.coop-hero-form-card h3 {
    font-size: 20px;
    margin-bottom: 4px;
}

.coop-hero-form-card > p {
    color: var(--muted);
    font-size: 13.5px;
    margin-bottom: 22px;
}

.coop-form-note {
    font-size: 12px;
    color: var(--muted);
    text-align: center;
    margin-top: 14px;
}

.coop-audience-grid,
.coop-model-grid {
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    gap: 20px;
}

@media (max-width: 900px) {
    .coop-audience-grid, .coop-model-grid {
        grid-template-columns:repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .coop-audience-grid, .coop-model-grid {
        grid-template-columns:1fr;
    }
}

.coop-simple-card {
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 26px 18px;
    transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}

.coop-simple-card:hover {
    border-color: var(--accent);
    transform: translateY(-4px);
    box-shadow: 0 18px 40px -22px rgba(198, 0, 0, .35);
}

.coop-simple-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 14px;
    border-radius: 14px;
    background: var(--bg);
    border: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-deep);
}

.coop-simple-icon svg {
    width: 24px;
    height: 24px;
}

.coop-simple-card h4 {
    font-size: 15.5px;
    margin-bottom: 6px;
}

.coop-simple-card p {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.8;
    margin: 0;
}

.coop-value-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
}

.coop-value-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 12px 20px;
    font-size: 13.5px;
    font-weight: 600;
}

.coop-value-item svg {
    width: 20px;
    height: 20px;
    color: var(--accent-deep);
    flex-shrink: 0;
}

.coop-process-grid {
    display: grid;
    grid-template-columns:repeat(5, 1fr);
    gap: 0;
}

@media (max-width: 900px) {
    .coop-process-grid {
        grid-template-columns:repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .coop-process-grid {
        grid-template-columns:1fr;
    }
}

.coop-process-item {
    position: relative;
    text-align: center;
    padding: 0 14px;
}

.coop-process-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-deep);
    position: relative;
}

.coop-process-icon svg {
    width: 24px;
    height: 24px;
}

.coop-process-num {
    position: absolute;
    top: -6px;
    left: -6px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.coop-process-item h4 {
    font-size: 14.5px;
    margin-bottom: 6px;
}

.coop-process-item p {
    font-size: 12.5px;
    color: var(--muted);
    margin: 0;
}

.coop-process-item:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 28px;
    left: -8%;
    width: 16%;
    height: 2px;
    background: var(--line-strong);
    background-image: linear-gradient(to left, var(--line-strong) 50%, transparent 50%);
    background-size: 8px 2px;
}

@media (max-width: 900px) {
    .coop-process-item:not(:last-child)::after {
        display: none;
    }
}

/* ==========================================================================
   BACKGROUND OVERLAYS + GLASS CARDS — صفحه تک‌خدمت
   ========================================================================== */

/* اورلی گرادیانت زیبا برای سکشن‌های بک‌گراند‌دار (به‌جای فقط opacity تخت) */
.svc-bg-photo-rich {
    opacity: 1;
}

.svc-bg-gradient {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(180deg,
    var(--bg) 0%,
    rgba(250, 247, 242, .55) 22%,
    rgba(250, 247, 242, .4) 78%,
    var(--bg) 100%);
    pointer-events: none;
}

/* اورلی تیره برای سکشن‌هایی که قراره باکس شیشه‌ای روشون بشینه (کنتراست متن) */
.svc-bg-gradient-dark {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(180deg, rgba(10, 10, 12, .35) 0%, rgba(10, 10, 12, .72) 100%);
    pointer-events: none;
}

/* کارت شیشه‌ای (Glassmorphism) */
.glass-card {
    background: rgba(255, 255, 255, .12) !important;
    border: 1px solid rgba(255, 255, 255, .28) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, .25);
}

.glass-card:hover {
    background: rgba(255, 255, 255, .2) !important;
    border-color: rgba(255, 255, 255, .5) !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .3);
}

.glass-card h4 {
    color: #fff;
}

.glass-card p {
    color: rgba(255, 255, 255, .78);
}

.glass-card .coop-simple-icon {
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .35);
    color: #fff;
}

/* ==========================================================================
   COOPERATION HERO — بک‌گراند + فرم شیشه‌ای
   ========================================================================== */
.coop-hero {
    position: relative;
    overflow: hidden;
}

.coop-hero-bg-photo {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.coop-hero-bg-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.coop-hero-bg-overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(120deg, rgba(10, 10, 12, .82) 0%, rgba(10, 10, 12, .55) 55%, rgba(10, 10, 12, .3) 100%);
}

.coop-hero-grid {
    position: relative;
    z-index: 1;
}

.coop-hero-form-card.glass-card {
    background: rgba(255, 255, 255, .1) !important;
    border: 1px solid rgba(255, 255, 255, .25) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.coop-hero-form-card.glass-card h3 {
    color: #fff;
}

.coop-hero-form-card.glass-card > p {
    color: rgba(255, 255, 255, .75);
}

.coop-hero-form-card.glass-card .coop-form-note {
    color: rgba(255, 255, 255, .55);
}

/* متن سمت راست هم روی بک‌گراند تیره باید سفید بشه */
.coop-hero-text h1,
.coop-hero-text p {
    color: #fff;
}

.coop-hero-text p {
    color: rgba(255, 255, 255, .8);
}

.coop-hero-text .eyebrow {
    color: var(--accent);
}

/* ==========================================================================
   COOPERATION PAGE v2 — فیلد شیشه‌ای + بج شیشه‌ای
   ========================================================================== */
.glass-card .field,
.glass-card .field-select {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .22);
}

.glass-card .field input,
.glass-card .field textarea,
.glass-card .field select {
    color: #fff;
}

.glass-card .field input::placeholder,
.glass-card .field textarea::placeholder {
    color: rgba(255, 255, 255, .55);
}

.glass-card .field-select svg {
    color: rgba(255, 255, 255, .65);
}

.glass-card .field-file svg {
    color: rgba(255, 255, 255, .65);
}

.glass-card .field-file-text {
    color: rgba(255, 255, 255, .7);
}

.glass-card .field-file-text strong {
    color: #fff;
}

.glass-card select option {
    color: #111;
}

.glass-pill {
    background: rgba(255, 255, 255, .55) !important;
    border: 1px solid rgba(255, 255, 255, .6) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* ==========================================================================
   COOPERATION — هاور شیک برای کارت‌ها (coop-simple-card)
   ========================================================================== */
.coop-simple-card {
    position: relative;
    overflow: hidden;
    transition: border-color .35s ease, transform .35s ease, box-shadow .35s ease;
}

/* خط بالای کارت که از وسط باز میشه */
.coop-simple-card::before {
    content: "";
    position: absolute;
    top: 0;
    right: 50%;
    left: 50%;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    transition: right .4s ease, left .4s ease;
}

.coop-simple-card:hover::before {
    right: 0;
    left: 0;
}

/* افکت درخشش که از رو کارت رد میشه */
.coop-simple-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, .35) 48%, transparent 66%);
    transform: translateX(-120%);
    transition: transform .7s ease;
    pointer-events: none;
}

.coop-simple-card:hover::after {
    transform: translateX(120%);
}

.coop-simple-card:hover {
    transform: translateY(-6px);
    border-color: var(--accent);
    box-shadow: 0 22px 45px -20px rgba(198, 0, 0, .4);
}

/* آیکون: بزرگ‌تر، رنگی و کمی چرخش */
.coop-simple-icon {
    transition: background .35s ease, color .35s ease, transform .35s ease;
}

.coop-simple-card:hover .coop-simple-icon {
    background: var(--accent);
    color: #fff;
    transform: scale(1.12) rotate(-6deg);
}

/* نسخه شیشه‌ای: رنگ درخشش و خط بالا هماهنگ با تم تیره */
.glass-card::after {
    background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, .18) 48%, transparent 66%);
}

.glass-card:hover {
    box-shadow: 0 22px 45px -18px rgba(0, 0, 0, .45);
}

.glass-card .coop-simple-icon {
    transition: background .35s ease, color .35s ease, transform .35s ease;
}

.glass-card:hover .coop-simple-icon {
    background: var(--accent);
    color: #fff;
    transform: scale(1.12) rotate(-6deg);
}

/* اورلی مات یکنواخت (بدون گرادیانت لبه‌ها) */
.svc-bg-overlay-matte {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: rgba(250, 247, 242, .72);
}

/* دراپ‌داون سفارشی تک‌انتخابی (برای فرم همکاری) */
.ss-field {
    position: relative;
}

.ss-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: none;
    border: none;
    color: inherit;
    font-family: inherit;
    font-size: 14px;
    cursor: pointer;
    padding: 0;
}

.ss-caret {
    width: 16px;
    height: 16px;
    transition: transform .2s ease;
    flex-shrink: 0;
}

.ss-field.open .ss-caret {
    transform: rotate(180deg);
}

.ss-dropdown {
    position: absolute;
    inset-inline: 0;
    top: calc(100% + 8px);
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    padding: 6px;
    box-shadow: 0 20px 40px -15px rgba(0, 0, 0, .25);
    z-index: 30;
    display: none;
    max-height: 240px;
    overflow-y: auto;
}

.ss-field.open .ss-dropdown {
    display: block;
}

.ss-option {
    display: block;
    width: 100%;
    text-align: right;
    background: none;
    border: none;
    font-family: inherit;
    font-size: 13.5px;
    color: var(--ink);
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.ss-option:hover {
    background: var(--bg);
}

.ss-option.selected {
    background: var(--accent);
    color: #fff;
}

/* نسخه شیشه‌ای — رنگ‌های دراپ‌داون باز داخل کارت شیشه‌ای هم روشن بمونه چون خودش شناوره روی صفحه */
.glass-card .ss-dropdown {
    background: #fff;
    border-color: rgba(0, 0, 0, .08);
}

.glass-card .ss-option {
    color: var(--ink);
}