/* ==========================================================================
   استایل اصلی سایت «آمود گستران پایاب»
   نسخه‌ی دوم: پالت رنگی و فونت این نسخه مستقیماً از لوگوی رسمی شرکت
   استخراج شده (زغالی + طلایی/برنزی روی زمینه‌ی کرم روشن) و با الهام از
   حس‌وحال دو نمونه‌ی مرجع (باران و نکست‌آفیس) بازطراحی شده: مینیمال،
   فضادار، با تایپوگرافی درشت به‌جای آیکون‌های شلوغ.
   نکته برای شما: این فایل به بخش‌های مشخص تقسیم شده. هر بخش با یک عنوان
   داخل کامنت شروع می‌شود تا بعداً راحت پیدایش کنید.
   ==========================================================================
*/

/* --------------------------------------------------------------------
   ۱. متغیرهای طراحی (Design Tokens)
   همه‌ی رنگ‌ها و اندازه‌های تکرارشونده را اینجا تعریف می‌کنیم تا اگر
   روزی خواستید رنگ سایت را عوض کنید، فقط کافی‌ست همین چند خط را ویرایش کنید.
   -------------------------------------------------------------------- */
:root{
  /* پالت رنگی: دقیقاً از فایل لوگوی شرکت نمونه‌برداری شده است. */
  --charcoal-900: #2B2C2B; /* زغالی بسیار تیره - برای هدر/فوتر و متن روی زمینه‌ی روشن */
  --charcoal-800: #3D3E3D; /* زغالی اصلی برند - همرنگ حرف A در لوگو */
  --charcoal-600: #6B6C68; /* زغالی روشن‌تر - متن ثانویه */
  --gold-500:  #B3996C;    /* طلایی/برنزی - همرنگ نمودار میله‌ای لوگو */
  --gold-600:  #96805A;    /* طلایی تیره‌تر - حالت هاور */
  --gold-100:  #EDE4D3;    /* طلایی بسیار روشن - پس‌زمینه‌های ملایم */
  --cream-050: #FAF9F6;    /* کرم روشن - پس‌زمینه‌ی اصلی سایت، همرنگ زمینه‌ی لوگو */
  --cream-100: #F1EEE8;
  --cream-300: #E2DDD3;
  --text-900:  #2B2C2B;    /* رنگ اصلی متن */
  --text-600:  #6E6E6A;    /* رنگ متن کم‌رنگ‌تر (توضیحات) */
  --white:     #FFFFFF;

  /* فونت: تیترها با وزن سنگین Vazirmatn (حس شیک و محکم)،
     متن با وزن معمولی همان خانواده - یک فونت کاملاً فارسی، بدون هیچ نامی
     که به عربی اشاره داشته باشد. */
  --font-base: 'Vazirmatn', Tahoma, sans-serif;

  --radius-sm: 6px;
  --radius-md: 12px;
  --shadow-md: 0 10px 30px rgba(43, 44, 43, 0.08);
  --shadow-lg: 0 24px 50px rgba(43, 44, 43, 0.14);

  --container: 1180px;
}

/* --------------------------------------------------------------------
   ۲. ریست پایه و تنظیمات کلی
   -------------------------------------------------------------------- */
*, *::before, *::after{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html{
  scroll-behavior: smooth;
}

body{
  direction: rtl; /* سایت راست‌به‌چپ است چون فارسی است */
  text-align: right;
  font-family: var(--font-base);
  background: var(--cream-050);
  color: var(--text-900);
  line-height: 1.9;
  font-size: 16px;
  overflow-x: hidden;
}

img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ list-style: none; }
button{ font-family: inherit; cursor: pointer; border: none; background: none; }
input, textarea, select{ font-family: inherit; font-size: 1rem; }

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

/* احترام به کاربرانی که ترجیح می‌دهند انیمیشن کمتری ببینند */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* دسترس‌پذیری: نمایش واضح فوکوس کیبورد */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline: 3px solid var(--gold-500);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------
   ۳. عنصر امضا/شاخص طراحی: «خط اندازه‌گیری مهندسی» (Dimension Line)
   این یک خط افقی با دو علامت عمود در دو سر آن است، دقیقاً شبیه خطوطی
   که در نقشه‌های ساختمانی برای نشان‌دادن ابعاد استفاده می‌شود.
   از این المان برای عنوان بخش‌ها استفاده می‌کنیم تا هویت بصری «مهندسی»
   سایت حفظ شود.
   -------------------------------------------------------------------- */
.eyebrow{
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--gold-600);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.5px;
  margin-bottom: 14px;
}
.eyebrow::before, .eyebrow::after{
  content: "";
  height: 10px;
  width: 1px;
  background: var(--gold-500);
}
.eyebrow-line{
  flex: 1;
  height: 1px;
  background: var(--gold-500);
  max-width: 70px;
}

.section-title{
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 800; letter-spacing: -0.01em;
  color: var(--charcoal-800);
  margin-bottom: 12px;
}

.section-desc{
  color: var(--text-600);
  max-width: 640px;
  font-size: 1.02rem;
}

.section-head{
  margin-bottom: 48px;
}
.section-head.center{
  text-align: center;
  margin-inline: auto;
}
.section-head.center .section-desc{ margin-inline: auto; }
.section-head.center .eyebrow{ justify-content: center; }
.section-head.center .eyebrow-line{ display:none; }

section{ padding: 88px 0; }
.bg-alt{ background: var(--cream-100); }
.bg-ink{ background: var(--charcoal-800); color: var(--cream-050); }

/* --------------------------------------------------------------------
   ۴. دکمه‌ها
   -------------------------------------------------------------------- */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 0.98rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.btn-primary{
  background: var(--gold-500);
  color: var(--charcoal-900);
}
.btn-primary:hover{
  background: var(--gold-600);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.btn-outline{
  border: 1.5px solid var(--cream-300);
  color: var(--charcoal-800);
}
.btn-outline:hover{
  border-color: var(--gold-500);
  color: var(--gold-600);
}
.btn-outline-light{
  border: 1.5px solid rgba(255,255,255,0.4);
  color: var(--white);
}
.btn-outline-light:hover{
  border-color: var(--gold-500);
  background: rgba(255,255,255,0.06);
}

/* --------------------------------------------------------------------
   ۵. هدر و منو
   -------------------------------------------------------------------- */
.site-header{
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250,249,246,0.95);
  backdrop-filter: blur(6px);
  color: var(--charcoal-900);
  border-bottom: 1px solid var(--cream-300);
}

.header-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
}

.logo{
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 800; letter-spacing: -0.01em;
  font-size: 1.05rem;
  color: var(--charcoal-800);
}
.logo img{
  height: 46px;
  width: auto;
  flex-shrink: 0;
}
.logo-text small{
  display: block;
  font-weight: 400;
  font-size: 0.72rem;
  color: var(--text-600);
  margin-top: 2px;
}

.main-nav ul{
  display: flex;
  gap: 6px;
}
.main-nav a{
  display: block;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  color: var(--charcoal-800);
  transition: background 0.2s ease, color 0.2s ease;
}
.main-nav a:hover,
.main-nav a[aria-current="page"]{
  background: var(--gold-100);
  color: var(--gold-600);
}

.nav-toggle{
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
}
.nav-toggle span{
  width: 26px; height: 2px;
  background: var(--charcoal-800);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.nav-toggle.is-open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity: 0; }
.nav-toggle.is-open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* --------------------------------------------------------------------
   ۶. هیرو (بخش ابتدایی صفحه اصلی) - با الگوی شبکه‌ی نقشه‌کشی
   -------------------------------------------------------------------- */
.hero{
  position: relative;
  background: var(--charcoal-800);
  color: var(--white);
  padding: 110px 0 130px;
  overflow: hidden;
}
/* یک قوس ظریف طلایی، الهام‌گرفته از قوس داخل لوگو، به‌عنوان امضای بصری هیرو */
.hero::before{
  content: "";
  position: absolute;
  width: 900px; height: 900px;
  right: -320px; top: -420px;
  border: 1px solid rgba(179,153,108,0.35);
  border-radius: 50%;
  pointer-events: none;
}
/* این کلاس دیگر در طراحی جدید استفاده نمی‌شود؛ فقط برای سازگاری با HTML قدیمی نگه داشته شده */
.corner-mark{ display: none; }

.hero-inner{
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
}
.hero-kicker{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--gold-500);
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 18px;
}
.hero-kicker span.dot{
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold-500);
}
.hero h1{
  font-size: clamp(2rem, 4.2vw, 3.2rem);
  font-weight: 800; letter-spacing: -0.01em;
  line-height: 1.35;
  margin-bottom: 20px;
}
.hero h1 em{
  font-style: normal;
  color: var(--gold-500);
}
.hero p{
  color: var(--cream-300);
  font-size: 1.08rem;
  max-width: 560px;
  margin-bottom: 32px;
}
.hero-actions{
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.hero-stats{
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-top: 64px;
}
.stat{
  background: rgba(255,255,255,0.03);
  padding: 24px 18px;
  text-align: center;
}
.stat b{
  display: block;
  font-size: 1.9rem;
  color: var(--gold-500);
  font-weight: 800; letter-spacing: -0.01em;
}
.stat span{
  font-size: 0.85rem;
  color: var(--cream-300);
}

/* پنل نمادین گوشه‌ی هیرو، به‌جای عکس - با استفاده از گرادیان و خطوط فنی */
.hero-panel{
  position: relative;
  z-index: 2;
  aspect-ratio: 4/5;
  border-radius: var(--radius-md);
  background:
    linear-gradient(160deg, rgba(179,153,108,0.25), transparent 55%),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 18px),
    linear-gradient(200deg, var(--charcoal-600), var(--charcoal-900));
  border: 1px solid rgba(255,255,255,0.15);
  display: flex;
  align-items: flex-end;
  padding: 26px;
  box-shadow: var(--shadow-lg);
}
.hero-panel-tag{
  background: rgba(43,44,43,0.75);
  border: 1px solid rgba(255,255,255,0.15);
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  backdrop-filter: blur(4px);
}
.hero-panel-tag b{ color: var(--gold-500); display:block; font-size: 1rem; margin-bottom: 4px;}

/* --------------------------------------------------------------------
   ۷. کارت‌های عمومی (خدمات، پروژه‌ها، وبلاگ)
   -------------------------------------------------------------------- */
.grid{
  display: grid;
  gap: 28px;
}
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }

.card{
  background: var(--white);
  border: 1px solid var(--cream-300);
  border-radius: var(--radius-md);
  padding: 32px 26px;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  position: relative;
}
.card:hover{
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: var(--gold-500);
}
.card-index{
  position: absolute;
  top: 22px; left: 26px;
  font-size: 0.78rem;
  color: var(--charcoal-600);
  font-weight: 700;
  letter-spacing: 0.5px;
}
.card-icon{
  width: 54px; height: 54px;
  border-radius: var(--radius-sm);
  background: var(--charcoal-800);
  color: var(--gold-500);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
}
.card-icon svg{ width: 26px; height: 26px; stroke: currentColor; }
.card h3{
  font-size: 1.15rem;
  color: var(--charcoal-800);
  margin-bottom: 10px;
  font-weight: 800; letter-spacing: -0.01em;
}
.card p{ color: var(--text-600); font-size: 0.96rem; }

/* --------------------------------------------------------------------
   ۸. بخش «چرا آمود گستران پایاب» - نوار امتیازات
   -------------------------------------------------------------------- */
.feature-row{
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 22px 0;
  border-bottom: 1px dashed var(--cream-300);
}
.feature-row:last-child{ border-bottom: none; }
.feature-num{
  font-weight: 800; letter-spacing: -0.01em;
  color: var(--gold-500);
  font-size: 1.1rem;
  min-width: 40px;
}
.feature-row h4{ color: var(--charcoal-800); margin-bottom: 6px; font-size: 1.05rem; }
.feature-row p{ color: var(--text-600); font-size: 0.95rem; }

/* --------------------------------------------------------------------
   ۹. گالری/اسلایدر پروژه‌ها
   -------------------------------------------------------------------- */
.slider{
  position: relative;
}
.slider-track{
  display: flex;
  overflow: hidden;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  aspect-ratio: 16/8;
  background: var(--charcoal-800);
}
.slide{
  min-width: 100%;
  position: relative;
  display: flex;
  align-items: flex-end;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.slide.is-active{ opacity: 1; }
.slide:not(.is-active){ position: absolute; inset: 0; }
.slide-caption{
  position: relative;
  z-index: 2;
  padding: 28px;
  color: var(--white);
  background: linear-gradient(to top, rgba(0,0,0,0.75), transparent);
  width: 100%;
}
.slide-caption span{ color: var(--gold-500); font-weight: 700; font-size: 0.85rem; }
.slide-caption h3{ font-size: 1.3rem; margin-top: 6px; }

.slider-controls{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 18px;
}
.slider-dots{ display: flex; gap: 8px; }
.slider-dots button{
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--cream-300);
  transition: background 0.2s ease, transform 0.2s ease;
}
.slider-dots button.is-active{ background: var(--gold-500); transform: scale(1.2); }
.slider-arrows{ display: flex; gap: 10px; }
.slider-arrows button{
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--cream-300);
  display: flex; align-items: center; justify-content: center;
  color: var(--charcoal-800);
  transition: border-color 0.2s ease, color 0.2s ease;
}
.slider-arrows button:hover{ border-color: var(--gold-500); color: var(--gold-500); }

/* --------------------------------------------------------------------
   ۱۰. صفحه‌ی پروژه‌ها - کارت پروژه با تصویر
   -------------------------------------------------------------------- */
.project-card{
  background: var(--white);
  border: 1px solid var(--cream-300);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.project-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-md); }
.project-thumb{
  aspect-ratio: 4/3;
  background-size: cover;
  background-position: center;
  position: relative;
}
.project-thumb .tag{
  position: absolute;
  top: 14px; right: 14px;
  background: rgba(43,44,43,0.85);
  color: var(--gold-500);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 100px;
}
.project-body{ padding: 22px; }
.project-body h3{ color: var(--charcoal-800); font-size: 1.1rem; margin-bottom: 8px; }
.project-body p{ color: var(--text-600); font-size: 0.93rem; margin-bottom: 14px; }
.project-meta{
  display: flex;
  justify-content: space-between;
  font-size: 0.82rem;
  color: var(--charcoal-600);
  border-top: 1px dashed var(--cream-300);
  padding-top: 12px;
}

.filter-bar{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 40px;
}
.filter-btn{
  padding: 9px 18px;
  border-radius: 100px;
  border: 1.5px solid var(--cream-300);
  font-size: 0.9rem;
  color: var(--text-600);
  transition: all 0.2s ease;
}
.filter-btn.is-active, .filter-btn:hover{
  background: var(--charcoal-800);
  border-color: var(--charcoal-800);
  color: var(--white);
}

/* جزئیات کامل پروژه (صفحه‌ی داخلی) */
.project-detail-header{
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 40px;
  align-items: start;
  margin-bottom: 40px;
}
.spec-list{ background: var(--cream-100); border-radius: var(--radius-md); padding: 24px; }
.spec-list li{
  display: flex; justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--cream-300);
  font-size: 0.92rem;
}
.spec-list li:last-child{ border-bottom: none; }
.spec-list li b{ color: var(--charcoal-800); }
.spec-list li span{ color: var(--text-600); }

/* --------------------------------------------------------------------
   ۱۱. وبلاگ
   -------------------------------------------------------------------- */
.blog-card{
  background: var(--white);
  border: 1px solid var(--cream-300);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.blog-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-md); }
.blog-thumb{ aspect-ratio: 16/10; background-size: cover; background-position: center; }
.blog-body{ padding: 22px; }
.blog-meta{ display:flex; gap:14px; font-size:0.8rem; color: var(--charcoal-600); margin-bottom: 10px; }
.blog-body h3{ color: var(--charcoal-800); font-size: 1.08rem; margin-bottom: 10px; }
.blog-body p{ color: var(--text-600); font-size: 0.93rem; margin-bottom: 16px; }
.blog-link{ color: var(--gold-600); font-weight: 700; font-size: 0.9rem; }
.blog-link:hover{ text-decoration: underline; }

article.post{
  max-width: 780px;
  margin: 0 auto;
}
article.post h1{ font-size: clamp(1.7rem, 3vw, 2.4rem); color: var(--charcoal-800); margin: 18px 0; }
article.post h2{ color: var(--charcoal-800); margin: 32px 0 14px; font-size: 1.4rem; }
article.post p{ margin-bottom: 18px; color: var(--text-900); }
article.post ul{ margin: 0 0 18px; padding-inline-start: 20px; list-style: disc; }
article.post li{ margin-bottom: 8px; }

/* --------------------------------------------------------------------
   ۱۲. فرم تماس
   -------------------------------------------------------------------- */
.form-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-group{ display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.form-group.full{ grid-column: 1 / -1; }
.form-group label{ font-size: 0.92rem; font-weight: 700; color: var(--charcoal-800); }
.form-group input, .form-group textarea, .form-group select{
  padding: 13px 16px;
  border: 1.5px solid var(--cream-300);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--text-900);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus{
  border-color: var(--charcoal-600);
  box-shadow: 0 0 0 3px rgba(179,153,108,0.15);
}
.form-group.has-error input, .form-group.has-error textarea{
  border-color: #C0392B;
}
.error-msg{
  color: #C0392B;
  font-size: 0.82rem;
  min-height: 18px;
  display: none;
}
.form-group.has-error .error-msg{ display: block; }

.form-success{
  display: none;
  background: #E7F4EC;
  border: 1px solid #A9D5B7;
  color: #1F6B3A;
  padding: 16px 20px;
  border-radius: var(--radius-sm);
  margin-bottom: 24px;
  font-weight: 700;
}
.form-success.is-visible{ display: block; }

.contact-info-card{
  background: var(--charcoal-800);
  color: var(--white);
  border-radius: var(--radius-md);
  padding: 32px 26px;
}
.contact-info-card h3{ color: var(--gold-500); margin-bottom: 20px; font-size: 1.15rem; }
.contact-info-row{ display: flex; gap: 14px; margin-bottom: 20px; align-items: flex-start; }
.contact-info-row .ci-icon{
  width: 40px; height: 40px; border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  color: var(--gold-500);
}
.contact-info-row span{ color: var(--cream-300); font-size: 0.9rem; }
.map-box{
  margin-top: 20px;
  aspect-ratio: 16/9;
  border-radius: var(--radius-sm);
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.06) 0 1px, transparent 1px 20px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.06) 0 1px, transparent 1px 20px),
    var(--charcoal-900);
  display: flex; align-items:center; justify-content:center;
  color: var(--cream-300); font-size: 0.85rem; text-align:center; padding: 20px;
  border: 1px solid rgba(255,255,255,0.1);
}

/* --------------------------------------------------------------------
   ۱۳. سوالات متداول (آکاردئون)
   -------------------------------------------------------------------- */
.faq-item{
  border-bottom: 1px solid var(--cream-300);
}
.faq-question{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 4px;
  text-align: right;
  font-weight: 700;
  color: var(--charcoal-800);
  font-size: 1.02rem;
}
.faq-question .plus{
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1.5px solid var(--cream-300);
  display: flex; align-items:center; justify-content:center;
  flex-shrink: 0;
  position: relative;
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.faq-question .plus::before, .faq-question .plus::after{
  content: ""; position: absolute; background: var(--charcoal-800);
}
.faq-question .plus::before{ width: 12px; height: 2px; }
.faq-question .plus::after{ width: 2px; height: 12px; }
.faq-item.is-open .faq-question .plus{ transform: rotate(45deg); border-color: var(--gold-500); }
.faq-answer{
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.35s ease;
  color: var(--text-600);
  font-size: 0.95rem;
  padding: 0 4px;
}
.faq-item.is-open .faq-answer{ padding: 0 4px 22px; }

/* --------------------------------------------------------------------
   ۱۴. بخش تماس/CTA پایانی
   -------------------------------------------------------------------- */
.cta-banner{
  background: var(--charcoal-800);
  color: var(--white);
  border-radius: var(--radius-md);
  padding: 56px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}
.cta-banner::before{
  /* همان قوس ظریف طلایی امضادار، این‌بار در گوشه‌ی بنر تماس */
  content: "";
  position: absolute;
  width: 500px; height: 500px;
  left: -220px; bottom: -260px;
  border: 1px solid rgba(179,153,108,0.3);
  border-radius: 50%;
}
.cta-banner h3{ font-size: 1.6rem; margin-bottom: 8px; position: relative; z-index:2; }
.cta-banner p{ color: var(--cream-300); position: relative; z-index:2; }
.cta-banner .btn{ position: relative; z-index:2; }

/* --------------------------------------------------------------------
   ۱۵. فوتر
   -------------------------------------------------------------------- */
.site-footer{
  background: var(--charcoal-900);
  color: var(--cream-300);
  padding: 64px 0 28px;
}
.footer-grid{
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 36px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer-grid h4{ color: var(--white); margin-bottom: 18px; font-size: 1rem; }
.footer-grid li{ margin-bottom: 10px; font-size: 0.9rem; }
.footer-grid a:hover{ color: var(--gold-500); }
.footer-bottom{
  display: flex;
  justify-content: space-between;
  padding-top: 24px;
  font-size: 0.85rem;
  flex-wrap: wrap;
  gap: 10px;
}

/* --------------------------------------------------------------------
   ۱۶. صفحات داخلی - هدر صفحه (Page Header) برای درباره‌ما/تماس/و...
   -------------------------------------------------------------------- */
.page-header{
  background: var(--charcoal-800);
  color: var(--white);
  padding: 64px 0;
  position: relative;
  overflow: hidden;
}
.page-header::before{
  content: "";
  position: absolute;
  width: 600px; height: 600px;
  right: -260px; top: -340px;
  border: 1px solid rgba(179,153,108,0.3);
  border-radius: 50%;
}
.breadcrumb{ position: relative; z-index:2; color: var(--cream-300); font-size: 0.9rem; margin-bottom: 12px;}
.breadcrumb a:hover{ color: var(--gold-500); }
.page-header h1{ position: relative; z-index:2; font-size: clamp(1.8rem, 3.5vw, 2.6rem); font-weight: 800; letter-spacing: -0.01em; }

/* درباره ما: ارزش‌ها و تایم‌لاین */
.timeline{ position: relative; padding-inline-start: 28px; }
.timeline::before{
  content: ""; position: absolute; right: 6px; top: 6px; bottom: 6px; width: 2px;
  background: var(--cream-300);
}
.timeline-item{ position: relative; padding-inline-end: 30px; padding-bottom: 34px; }
.timeline-item::before{
  content: ""; position: absolute; right: 0; top: 4px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--gold-500); border: 3px solid var(--cream-050);
  transform: translateX(50%);
}
.timeline-item b{ color: var(--charcoal-800); display:block; margin-bottom: 4px; }
.timeline-item span{ color: var(--gold-600); font-size: 0.85rem; font-weight: 700; }
.timeline-item p{ color: var(--text-600); font-size: 0.93rem; margin-top: 6px; }

/* --------------------------------------------------------------------
   ۱۷. ریسپانسیو - تبلت و موبایل
   -------------------------------------------------------------------- */
@media (max-width: 980px){
  .hero-inner{ grid-template-columns: 1fr; }
  .hero-panel{ order: -1; aspect-ratio: 16/9; }
  .grid-4{ grid-template-columns: repeat(2, 1fr); }
  .grid-3{ grid-template-columns: repeat(2, 1fr); }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .project-detail-header{ grid-template-columns: 1fr; }
}

@media (max-width: 720px){
  section{ padding: 60px 0; }
  .main-nav{
    position: fixed;
    inset: 68px 0 0 0;
    background: var(--charcoal-900);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    padding: 20px 24px;
    overflow-y: auto;
  }
  .main-nav.is-open{ transform: translateX(0); }
  .main-nav ul{ flex-direction: column; gap: 4px; }
  .main-nav a{ padding: 14px 16px; font-size: 1.05rem; color: var(--cream-100); }
  .main-nav a:hover, .main-nav a[aria-current="page"]{ background: rgba(255,255,255,0.08); color: var(--gold-500); }
  .nav-toggle{ display: flex; }
  .grid-3, .grid-4, .grid-2{ grid-template-columns: 1fr; }
  .form-grid{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom{ flex-direction: column; text-align: center; }
  .cta-banner{ flex-direction: column; text-align: center; }
  .hero-stats{ grid-template-columns: 1fr; }
}