/* =============================================================================
   pages.css — چیدمان بخش‌ها
   تصویر عکاسی‌شده در این سایت به کار نرفته است: صفحه ۱۴ گاید تصویر استوک را
   ممنوع کرده و تصویر واقعی پروژه را مشروط به مجوز کارفرما و رعایت کامل PPE
   دانسته است. جای تصویر با همان چیزی پر شده که گاید تجویز می‌کند: الگوی
   شش‌ضلعی، سطوح Deep Navy و المان گرافیکی برند.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Hero
-------------------------------------------------------------------------------*/
.hero {
  position: relative; overflow: hidden;
  background: var(--navy);
  color: var(--white);
  padding-block: 96px 88px;
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background-image: url('../img/hex-pattern.svg');
  background-size: 168px auto;
  opacity: .5;
  pointer-events: none;
}
.hero::after {
  content: ""; position: absolute; inset-block: 0; inset-inline-end: -12%;
  width: 58%;
  background: radial-gradient(closest-side, rgba(46,134,193,.30), transparent 72%);
  pointer-events: none;
}
.hero > .wrap { position: relative; z-index: 1; }

.hero__grid {
  display: grid; grid-template-columns: 1.55fr .85fr;
  gap: 56px; align-items: center;
}
.hero__kicker {
  display: inline-block;
  font-size: var(--fs-small); letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.8);
  padding-block-end: 10px;
  border-block-end: var(--amber-rule) solid var(--amber);
  margin-block-end: 26px;
}
.hero h1 { max-width: 18ch; }
.hero__tagline-en {
  font-size: 16px; color: rgba(255,255,255,.62);
  letter-spacing: .01em; margin-block-start: 12px;
}
.hero__lede {
  font-size: 20px; line-height: 1.65; max-width: 52ch;
  margin-block-start: 26px; color: rgba(255,255,255,.9);
}
.hero__actions {
  display: flex; flex-wrap: wrap; gap: 14px; margin-block-start: 34px;
}
.hero__mark { display: grid; place-items: center; }
.hero__mark svg { width: 100%; max-width: 240px; height: auto; }
.hero__mark-img { width: 100%; max-width: 300px; height: auto; }

@media (max-width: 900px) {
  .hero { padding-block: 56px 52px; }
  .hero__grid { grid-template-columns: 1fr; gap: 36px; }
  .hero__mark { display: none; }
}

/* صفحات داخلی: هدر کوتاه‌تر */
.page-hero { background: var(--navy); color: var(--white); padding-block: 66px 58px;
  position: relative; overflow: hidden; }
.page-hero::before {
  content: ""; position: absolute; inset: 0;
  background-image: url('../img/hex-pattern.svg');
  background-size: 168px auto; opacity: .38; pointer-events: none;
}
.page-hero > .wrap { position: relative; z-index: 1; }
.page-hero__kicker {
  font-size: var(--fs-small); letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.72); margin-block-end: 12px;
}
.page-hero h1 { font-size: clamp(28px, 4.4vw, 40px); max-width: 22ch; }
.page-hero p { margin-block-start: 18px; max-width: 62ch; color: rgba(255,255,255,.86); }

/* مسیر راهنما */
.crumbs { font-size: var(--fs-small); color: rgba(255,255,255,.66); margin-block-end: 14px; }
.crumbs a { color: rgba(255,255,255,.86); }

/* -----------------------------------------------------------------------------
   نوار اعداد — الگوی کارت عددی
-------------------------------------------------------------------------------*/
.stats { border-block-end: var(--hairline-w) solid var(--hairline); }
.stats__grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); }
.stat {
  padding: 34px 26px;
  border-inline-start: var(--hairline-w) solid var(--hairline);
}
.stat:first-child { border-inline-start: 0; }
.stat__value {
  font-size: 34px; line-height: 1.15; font-weight: 700; color: var(--navy);
  display: block; margin-block-end: 10px;
}
.stat__label { font-size: 15px; line-height: 1.55; color: var(--steel); }
@media (max-width: 980px) {
  .stats__grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .stat:nth-child(odd) { border-inline-start: 0; }
  .stat:nth-child(n+3) { border-block-start: var(--hairline-w) solid var(--hairline); }
}
/* روی موبایل دو ستون می‌ماند: یک‌ستونه شدن، این نوار را بی‌جهت بلند
   می‌کرد و کاربر باید چهار پرده اسکرول می‌کرد تا به محتوا برسد. */
@media (max-width: 560px) {
  .stat { padding: 22px 16px; }
  .stat__value { font-size: 24px; margin-block-end: 7px; }
  .stat__label { font-size: 13px; line-height: 1.5; }
}

/* -----------------------------------------------------------------------------
   ستون‌های تخصص
-------------------------------------------------------------------------------*/
.pillar { display: flex; flex-direction: column; gap: 16px; height: 100%; }
.pillar h3 { color: var(--navy); }
.pillar p { color: var(--steel); }

/* -----------------------------------------------------------------------------
   پروژه‌ها
-------------------------------------------------------------------------------*/
.project {
  position: relative; overflow: hidden;
  background: var(--navy); color: var(--white);
  border-radius: var(--radius);
  padding: 30px 28px 26px;
  min-height: 186px;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.project::before {
  content: ""; position: absolute; inset: 0;
  background-image: url('../img/hex-pattern.svg');
  background-size: 132px auto; opacity: .45;
}
.project > * { position: relative; z-index: 1; }
.project__kind {
  font-size: var(--fs-small); letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.72); margin-block-end: 10px;
}
.project h3 { font-size: 22px; font-weight: 700; }
.project__detail { margin-block-start: 10px; color: rgba(255,255,255,.84); font-size: 16px; }
.project__meta {
  margin-block-start: 16px; padding-block-start: 14px;
  border-block-start: 1px solid var(--hairline-on-navy);
  font-size: 16px; font-weight: 600; color: var(--white);
}
/* برچسب «مرحله» — روی Deep Navy سفیدِ کم‌رنگ، نه Steel Gray (صفحه ۱۲). */
.project__meta > span {
  display: block; margin-block-end: 5px;
  font-size: 12px; letter-spacing: .1em; font-weight: 600;
  color: rgba(255, 255, 255, .66);
}

/* دو ستون «قابل انتشار / منتشر نمی‌شود» */
.publish-cols { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; }
.publish-col { padding: 26px; border-radius: var(--radius); background: var(--light-bg); }
.publish-col h3 { margin-block-end: 16px; font-weight: 700; }
.publish-col--yes { box-shadow: inset 4px 0 0 0 var(--eng-blue); }
.publish-col--no  { box-shadow: inset 4px 0 0 0 #A32E2E; }
html[dir="rtl"] .publish-col--yes { box-shadow: inset -4px 0 0 0 var(--eng-blue); }
html[dir="rtl"] .publish-col--no  { box-shadow: inset -4px 0 0 0 #A32E2E; }
@media (max-width: 760px) { .publish-cols { grid-template-columns: 1fr; } }

/* -----------------------------------------------------------------------------
   ارزش‌ها، پیام‌ها، صدای برند
-----------------------------------------------------------------------------*/
.value h3 { color: var(--navy); margin-block-end: 8px; font-weight: 700; }
.value p { color: var(--steel); margin: 0; }

.message { padding-block: 26px; border-block-start: var(--hairline-w) solid var(--hairline); }
.message:first-child { border-block-start: 0; padding-block-start: 0; }
.message__kicker {
  font-size: var(--fs-small); letter-spacing: .1em; text-transform: uppercase;
  color: var(--eng-blue); margin-block-end: 8px;
}
.message__body { font-size: 20px; line-height: 1.6; font-weight: 500; max-width: 74ch; }

/* -----------------------------------------------------------------------------
   اعتبارنامه‌ها
-------------------------------------------------------------------------------*/
.creds { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 40px; }
.cred {
  display: flex; align-items: baseline; gap: 12px;
  padding-block: 16px; border-block-end: var(--hairline-w) solid var(--hairline);
}
.cred__name { font-weight: 700; color: var(--navy); }
.cred__note { font-size: 15px; color: var(--steel); }
@media (max-width: 760px) { .creds { grid-template-columns: 1fr; } }

/* -----------------------------------------------------------------------------
   هوش مصنوعی — قبل/بعد
-------------------------------------------------------------------------------*/
.ba { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; }
.ba__col { padding: 28px; border-radius: var(--radius); }
.ba__col--before { background: var(--light-bg); }
.ba__col--after { background: var(--navy); color: var(--white); }
.ba__col h3 { margin-block-end: 14px; font-weight: 700; }
.ba__col--before h3 { color: var(--eng-blue); }
@media (max-width: 820px) { .ba { grid-template-columns: 1fr; } }

/* -----------------------------------------------------------------------------
   تماس
-------------------------------------------------------------------------------*/
.contact-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: start; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; gap: 32px; } }

.contact-list { list-style: none; margin: 0; padding: 0; }
.contact-list li {
  padding-block: 18px; border-block-end: var(--hairline-w) solid var(--hairline);
  display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: baseline;
}
.contact-list .k { font-size: var(--fs-small); letter-spacing: .08em;
  text-transform: uppercase; color: var(--steel); }
.contact-list .v { font-size: 18px; }
.contact-list .v a { word-break: break-word; }
@media (max-width: 520px) { .contact-list li { grid-template-columns: 1fr; gap: 4px; } }

/* -----------------------------------------------------------------------------
   نوار خواسته پایانی — طبق صفحه ۵: خواسته یک جمله است و در انتها می‌آید
-------------------------------------------------------------------------------*/
.cta-band {
  background: var(--navy); color: var(--white);
  position: relative; overflow: hidden;
  padding-block: 62px;
}
.cta-band::before {
  content: ""; position: absolute; inset: 0;
  background-image: url('../img/hex-pattern.svg');
  background-size: 168px auto; opacity: .4;
}
.cta-band > .wrap { position: relative; z-index: 1; }
.cta-band__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px; flex-wrap: wrap;
}
.cta-band h2 { font-size: 26px; max-width: 30ch; }
.cta-band p { margin-block-start: 12px; color: rgba(255,255,255,.84); max-width: 56ch; }

/* -----------------------------------------------------------------------------
   پرتره و زیست‌نامه — صفحه «درباره»
   صفحه ۱۴ گاید عکس استوک را ممنوع کرده است. این تصویر، پرتره واقعی و با اجازه
   صاحب آن است، پس همان‌جایی می‌نشیند که گاید برای تصویر واقعی باز گذاشته بود.
-------------------------------------------------------------------------------*/
.bio {
  display: grid; grid-template-columns: 330px minmax(0, 1fr);
  gap: 56px; align-items: start;
}
.bio__lede { font-size: 19px; line-height: 1.75; color: var(--navy); }
.bio__text > p + p { margin-block-start: 18px; }

.portrait { margin: 0; }
.portrait__frame { position: relative; }
/* سطح Deep Navy که از زیر و از سمت بیرونی قاب بیرون می‌زند — همان نقش
   «سطوح Deep Navy» که گاید جای عکس تجویز کرده بود. زیرنویس بیرون این قاب
   می‌ماند تا Steel Gray هرگز روی Deep Navy ننشیند (قاعده صفحه ۱۲). */
.portrait__frame::before {
  content: ""; position: absolute; z-index: 0;
  inset-block: 26px -16px; inset-inline: 26px -16px;
  background: var(--navy); border-radius: var(--radius);
}
.portrait__img {
  position: relative; z-index: 1;
  display: block; width: 100%; height: auto;
  border-radius: var(--radius);
  box-shadow: 0 16px 38px rgba(11, 44, 74, .20);
}
.portrait__cap {
  margin-block-start: 34px; padding-inline-start: 14px;
  border-inline-start: var(--amber-rule) solid var(--amber);
  font-size: var(--fs-small); line-height: 1.5; color: var(--steel);
}
.portrait__name { margin-block-start: 20px; font-size: 21px; font-weight: 700; }
.portrait__role { margin-block-start: 4px; font-size: 15px; color: var(--steel); }
.portrait__role-en {
  margin-block-start: 6px; font-size: 13px; color: var(--steel);
  direction: ltr; text-align: start;
}

.facts { margin: 0; margin-block-start: 34px; }
.facts__row {
  display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 6px 20px;
  padding-block: 13px;
  border-block-start: var(--hairline-w) solid var(--hairline);
}
.facts__row:last-child { border-block-end: var(--hairline-w) solid var(--hairline); }
.facts dt { font-size: var(--fs-small); font-weight: 500; color: var(--steel); }
.facts dd { margin: 0; font-size: 15px; line-height: 1.6; }

@media (max-width: 900px) {
  .bio { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .portrait { max-width: 330px; }
}
@media (max-width: 560px) {
  .facts__row { grid-template-columns: minmax(0, 1fr); gap: 3px; }
}

/* -----------------------------------------------------------------------------
   مسیر حرفه‌ای — صفحه «درباره»
   بولت‌ها dash-list هستند، چون نقش شش‌ضلعی این صفحه شماره‌گذار است و طبق
   صفحه ۱۳ هر صفحه فقط یک نقش می‌گیرد.
-------------------------------------------------------------------------------*/
.tl { display: block; }
.tl__item {
  display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 20px 36px;
  padding-block: 32px;
  border-block-start: var(--hairline-w) solid var(--hairline);
}
.tl__item:first-child { border-block-start: 0; padding-block-start: 6px; }
.tl__period {
  font-size: var(--fs-small); font-weight: 600; color: var(--eng-blue);
  line-height: 1.6;
}
.tl__role { color: var(--navy); margin-block-end: 6px; }
.tl__scope {
  font-size: 15px; color: var(--steel); line-height: 1.65;
  margin-block-end: 18px; max-width: 60ch;
}
@media (max-width: 820px) {
  .tl__item { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}

/* -----------------------------------------------------------------------------
   کارت دامنه کاربرد — صفحه «هوش مصنوعی»
-------------------------------------------------------------------------------*/
.domain h3 { color: var(--eng-blue); margin-block-end: 10px; }
.domain__out {
  margin-block-start: 18px; padding-block-start: 14px;
  border-block-start: var(--hairline-w) solid var(--hairline);
  font-size: 15px; line-height: 1.65;
}
.domain__out > span {
  display: block; margin-block-end: 6px;
  font-size: 12px; letter-spacing: .1em; font-weight: 600;
  color: var(--steel);
}

/* گواهی‌های آموزشی هوش مصنوعی */
.certs { list-style: none; margin: 0; padding: 0; }
.certs > li {
  padding-block: 16px;
  border-block-start: var(--hairline-w) solid var(--hairline-on-navy);
}
.certs > li:first-child { border-block-start: 0; }
.certs__en { display: block; direction: ltr; text-align: start; font-weight: 600; }
.certs__fa {
  display: block; margin-block-start: 4px;
  font-size: var(--fs-small); color: rgba(255,255,255,.74);
}

/* بولت دوخطی: عنوان پررنگ + شرح. در صفحه تخصص به کار می‌رود. */
.dash-list--spaced > li { margin-block-end: 20px; line-height: 1.7; }
.dash-list--spaced > li > strong { color: var(--navy); }

/* -----------------------------------------------------------------------------
   خودارزیابی
   شماره پرسش‌ها همان شماره‌گذار شش‌ضلعی صفحه است، پس اینجا فقط پرسش، گزینه
   و کارت نتیجه تعریف می‌شود.
-------------------------------------------------------------------------------*/
.quiz__q { font-size: var(--fs-h3); font-weight: 500; color: var(--navy); }
.quiz__opts { margin-block-start: 14px; display: grid; gap: 8px; }

.opt {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 13px 16px; cursor: pointer;
  background: var(--light-bg); border: var(--hairline-w) solid transparent;
  border-radius: var(--radius); line-height: 1.55;
  transition: border-color .15s ease, background .15s ease;
}
.opt:hover { border-color: var(--hairline); }
.opt input { margin-block-start: .34em; accent-color: var(--eng-blue); flex: 0 0 auto; }
.opt:has(input:checked) { background: var(--white); border-color: var(--eng-blue); }
.opt:has(input:focus-visible) { outline: 3px solid var(--amber); outline-offset: 2px; }

.quiz__actions {
  display: flex; flex-wrap: wrap; gap: 14px; margin-block-start: 40px;
}
.btn--ghost {
  background: transparent; color: var(--link-blue);
  border: var(--hairline-w) solid var(--hairline);
}
.quiz__note { margin-block-start: 18px; font-size: var(--fs-small); }

.quiz__result {
  margin-block-start: 48px; padding-block-start: 40px;
  border-block-start: var(--amber-rule) solid var(--amber);
  scroll-margin-block-start: calc(var(--hdr-h) + 28px);
}
.quiz__result:focus { outline: none; }
.quiz__result-kicker {
  font-size: var(--fs-small); letter-spacing: .14em;
  text-transform: uppercase; color: var(--steel);
}
.quiz__result-title { margin-block: 6px 16px; }

.quiz__meter {
  margin-block-start: 18px; height: 10px; border-radius: 999px;
  background: var(--light-bg); overflow: hidden;
}
.quiz__meter-fill { display: block; block-size: 100%; background: var(--eng-blue); }
.quiz__score { margin-block-start: 12px; color: var(--steel); font-size: 15px; }
.quiz__score strong { color: var(--navy); font-size: 21px; }

.quiz__axis {
  margin-block-start: 18px; padding-inline-start: 16px;
  border-inline-start: 3px solid var(--bright-blue);
}
.quiz__policy, .quiz__next { margin-block-start: 26px; }
.quiz__result .btn { margin-block-start: 26px; }
.quiz__warn {
  padding: 16px 18px; border-radius: var(--radius);
  background: var(--amber-tint); color: var(--navy);
  border-inline-start: 5px solid var(--amber);
}

/* یادداشت زیر فهرست گواهی‌ها — روی زمینه Deep Navy، پس متن سفید. */
.certs__note {
  margin-block-start: 22px; padding-block-start: 20px;
  border-block-start: var(--hairline-w) solid var(--hairline-on-navy);
  font-size: var(--fs-small); line-height: 1.75;
  color: rgba(255, 255, 255, .82);
}

/* -----------------------------------------------------------------------------
   گواهی‌ها
   تصویر گواهی خودش شاهد است، پس باید خوانده شود. نسخه کوچک روی صفحه می‌نشیند و
   نسخه کامل با کلیک باز می‌شود. قاب، همان قاب پرتره است: سطح روشن، خط کهربایی
   پایین، و سایه ملایم — تا گواهی‌ها با بقیه سایت یک زبان داشته باشند.
-------------------------------------------------------------------------------*/
.cert-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px 32px; align-items: start;
}
.cert-grid--single { grid-template-columns: minmax(0, 560px); margin-block-start: 40px; }
@media (max-width: 820px) { .cert-grid { grid-template-columns: minmax(0, 1fr); gap: 34px; } }

.cert { margin: 0; }
.cert__frame {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: 0 0 0 1px var(--hairline), 0 10px 26px rgba(11, 44, 74, .12);
  text-decoration: none;
  transition: box-shadow .18s ease, transform .18s ease;
}
.section--light .cert__frame { background: var(--white); }
.cert__frame img { display: block; width: 100%; height: auto; }
.cert__frame::after {
  content: ""; position: absolute; inset-block-end: 0; inset-inline: 0;
  height: 3px; background: var(--amber);
}
.cert__frame:hover, .cert__frame:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 0 0 1px var(--hairline), 0 18px 38px rgba(11, 44, 74, .22);
}

/* برچسب «نمای کامل» تا کلیک‌شدنی بودن تصویر اعلام شود. روی صفحه لمسی که
   hover ندارد، همیشه دیده می‌شود. */
.cert__zoom {
  position: absolute; inset-block-start: 12px; inset-inline-end: 12px;
  padding: 5px 11px; border-radius: 999px;
  background: rgba(11, 44, 74, .90); color: var(--white);
  font-size: 12px; font-weight: 700; line-height: 1.4;
  opacity: 0; transition: opacity .18s ease;
}
.cert__frame:hover .cert__zoom, .cert__frame:focus-visible .cert__zoom { opacity: 1; }
@media (hover: none) { .cert__zoom { opacity: 1; } }

.cert__body { margin-block-start: 20px; }
.cert__title { font-size: 18px; font-weight: 700; line-height: 1.45; color: var(--navy); }
.cert__sub { margin-block-start: 5px; font-size: 15px; color: var(--eng-blue); }
.cert__issuer { margin-block-start: 8px; font-size: 15px; line-height: 1.6; color: var(--steel); }
.cert__meta { margin: 18px 0 0; }
.cert__row {
  display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 4px 16px;
  padding-block: 10px;
  border-block-start: var(--hairline-w) solid var(--hairline);
}
.cert__row:last-child { border-block-end: var(--hairline-w) solid var(--hairline); }
.cert__meta dt { font-size: 13px; font-weight: 500; color: var(--steel); }
.cert__meta dd { margin: 0; font-size: 14px; line-height: 1.6; }
@media (max-width: 460px) { .cert__row { grid-template-columns: minmax(0, 1fr); gap: 2px; } }

/* -----------------------------------------------------------------------------
   P3.express
-------------------------------------------------------------------------------*/
.p3-foot {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 30px;
  align-items: center; margin-block-start: 38px;
}
.p3-foot .muted { font-size: 15px; line-height: 1.75; }
@media (max-width: 820px) { .p3-foot { grid-template-columns: minmax(0, 1fr); gap: 22px; } }

/* -----------------------------------------------------------------------------
   فرم سه‌خطی تماس
   فرم بلند نیست: سه فیلد، همان سه خطی که قواعد جلسه از پیش می‌خواهد.
-------------------------------------------------------------------------------*/
.lead-form { margin-block-start: 8px; }
.field { margin-block-end: 24px; }
.field label { display: block; font-weight: 700; margin-block-end: 8px; color: var(--navy); }
.field input, .field select, .field textarea {
  display: block; width: 100%;
  font: inherit; font-size: 16px; color: var(--navy);
  padding: 12px 14px; border-radius: var(--radius);
  background: var(--white);
  border: var(--hairline-w) solid var(--hairline);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.field textarea { resize: vertical; min-height: 108px; line-height: 1.7; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--steel); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--eng-blue);
  box-shadow: 0 0 0 3px rgba(20, 80, 127, .16);
}
.field .is-invalid, .field input.is-invalid, .field select.is-invalid,
.field textarea.is-invalid { border-color: #A32E2E; }
.field__hint { margin: 8px 0 0; font-size: 13px; line-height: 1.6; color: var(--steel); }

.lead-form__warn {
  margin-block: 4px 24px; padding: 14px 16px; border-radius: var(--radius);
  background: var(--amber-tint); color: var(--navy);
  border-inline-start: 5px solid var(--amber);
  font-size: 14px; line-height: 1.7;
}
.lead-form__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* .btn--ghost پایه برای زمینه Deep Navy ساخته شده؛ اینجا زمینه روشن است. */
.lead-form .btn--ghost {
  color: var(--navy);
  box-shadow: inset 0 0 0 1px var(--hairline);
}
.lead-form .btn--ghost:hover { background: var(--white); color: var(--navy); }

.lead-form__status:empty { display: none; }
.lead-form__status {
  margin-block-start: 16px; font-size: 14px; font-weight: 500; color: var(--eng-blue);
}

/* -----------------------------------------------------------------------------
   فرم خبرنامه — فقط ایمیل
-------------------------------------------------------------------------------*/
.subscribe {
  padding: 28px 26px; border-radius: var(--radius);
  background: var(--white); border: var(--hairline-w) solid var(--hairline);
  border-block-start: 4px solid var(--amber);
}
.subscribe__title { margin: 0 0 8px; font-size: 20px; font-weight: 800; color: var(--navy); }
.subscribe__body { margin: 0 0 18px; color: var(--steel); line-height: 1.8; }
.subscribe__label { display: block; font-weight: 700; margin-block-end: 8px; color: var(--navy); }
.subscribe__row { display: flex; flex-wrap: wrap; gap: 12px; }
.subscribe__row input {
  flex: 1 1 240px; min-width: 0;
  font: inherit; font-size: 16px; color: var(--navy);
  padding: 12px 14px; border-radius: var(--radius);
  background: var(--white); border: var(--hairline-w) solid var(--hairline);
}
.subscribe__row input:focus {
  outline: none; border-color: var(--eng-blue);
  box-shadow: 0 0 0 3px rgba(20, 80, 127, .16);
}
.subscribe__row input[aria-invalid="true"] { border-color: #A32E2E; }
.subscribe__trap { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; opacity: 0; }
.subscribe__status:empty { display: none; }
.subscribe__status { margin: 14px 0 0; font-size: 14px; font-weight: 500; color: #A32E2E; }
.subscribe__status.is-ok { color: var(--eng-blue); }
.subscribe__privacy { margin: 14px 0 0; font-size: 13px; line-height: 1.6; color: var(--steel); }

/* -----------------------------------------------------------------------------
   نظرسنجی پژوهشی
-------------------------------------------------------------------------------*/
.survey { margin-block-start: 32px; }
.sv__closed { margin-block-start: 24px; }
.sv__section { margin-block-end: 40px; }
.sv__section h2 { font-size: 22px; margin-block-end: 20px; }
.sv__q { margin: 0 0 26px; padding: 18px 20px; border: var(--hairline-w) solid var(--hairline);
  border-radius: var(--radius); background: var(--white); }
.sv__q.is-invalid { border-color: #A32E2E; }
.sv__q legend, .sv__q > label { padding: 0; font-weight: 700; color: var(--navy); line-height: 1.7; }
.sv__req { color: #A32E2E; }
.sv__opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 18px;
  margin-block-start: 12px; }
.sv__opt { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; line-height: 1.6; }
.sv__opt input { margin-block-start: 5px; accent-color: var(--eng-blue); flex: none; }
.survey-thanks { margin-block-start: 32px; outline: none; }

/* -----------------------------------------------------------------------------
   یادداشت‌ها
-------------------------------------------------------------------------------*/
.posts { display: grid; gap: 24px; }
.post__meta { margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--eng-blue); }
.post__title { margin-block-end: 14px; }
.post__title a { color: inherit; text-decoration: none; }
.post__title a:hover { text-decoration: underline; }
.post__body p { line-height: 1.9; }
.post__body p + p { margin-block-start: 12px; }

/* -----------------------------------------------------------------------------
   تیتر سربرگ خانه
   با فونت تازه، وزن ۸۰۰ و فاصله‌حروف کمی بسته‌تر بهتر می‌نشیند. اندازه هم یک
   پله بالاتر می‌رود چون این تیتر، اولین و مهم‌ترین جمله سایت است.
-------------------------------------------------------------------------------*/
.hero h1 {
  font-size: clamp(34px, 4.6vw, 56px);
  font-weight: 800;
  letter-spacing: -.015em;
  line-height: 1.22;
  max-width: 20ch;
}
.hero__lede { max-width: 54ch; }

/* -----------------------------------------------------------------------------
   نشان دستیار هوشمند
   inset-inline-end یعنی سمت پایانی خط — در صفحه راست‌به‌چپ، گوشه چپ. با همین
   یک ویژگی، نشان در هر دو جهت درست می‌نشیند.
-------------------------------------------------------------------------------*/
.chat {
  position: fixed; inset-block-end: 22px; inset-inline-end: 22px;
  z-index: 60; display: flex; flex-direction: column; align-items: flex-end;
  gap: 12px;
}
.chat__button {
  display: inline-flex; align-items: center; gap: 9px;
  border: 0; cursor: pointer; font: inherit;
  font-size: 14px; font-weight: 700; line-height: 1;
  padding: 13px 18px; border-radius: 999px;
  background: var(--amber); color: var(--navy);
  box-shadow: 0 6px 22px rgba(11, 44, 74, .32);
  transition: background .18s ease, transform .18s ease;
}
/* هم‌رنگ دکمه درخواست مشاوره (.btn) */
.chat__button:hover { background: #C4831A; transform: translateY(-2px); }
.chat__button svg { width: 19px; height: 19px; flex: 0 0 auto; }

.chat__panel {
  position: relative; display: flex; flex-direction: column;
  width: min(380px, calc(100vw - 44px));
  height: min(600px, calc(100vh - 110px));
  border-radius: var(--radius); overflow: hidden;
  background: var(--white); color: var(--navy);
  box-shadow: 0 0 0 1px var(--hairline), 0 20px 48px rgba(11, 44, 74, .26);
}
.chat__panel[hidden] { display: none; }

.chat__head {
  position: relative; flex: 0 0 auto;
  padding: 14px 18px 12px; padding-inline-start: 48px;
  border-block-end: 1px solid var(--hairline);
}
.chat__title { font-size: 16px; font-weight: 700; line-height: 1.4; margin: 0; }
.chat__sub { margin: 2px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--steel); }
.chat__close {
  position: absolute; inset-block-start: 10px; inset-inline-start: 10px;
  width: 30px; height: 30px; padding: 0;
  border: 0; border-radius: 50%; cursor: pointer;
  background: transparent; color: var(--steel);
  font-size: 22px; line-height: 1;
}
.chat__close:hover { background: var(--light-bg); color: var(--navy); }

/* در صفحه راست‌به‌چپ، flex-start سمت راست است: پیام کاربر راست، پاسخ چپ. */
.chat__log {
  flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px; background: var(--light-bg);
}
.chat__msg {
  max-width: 86%; margin: 0; padding: 9px 12px; border-radius: 12px;
  font-size: 14.5px; line-height: 1.8;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
/* نوار کهربایی کنار پاسخ، المان گرافیکی است نه رنگ متن (صفحه ۱۲ گاید). */
.chat__msg--bot {
  align-self: flex-end; background: var(--white); color: var(--navy);
  box-shadow: inset 0 0 0 1px var(--hairline);
  border-inline-start: 3px solid var(--amber);
}
.chat__msg--me { align-self: flex-start; background: var(--navy); color: var(--white); }
.chat__msg--sys {
  align-self: center; max-width: 94%; text-align: center;
  background: var(--amber-tint); color: var(--navy); font-size: 13px;
}

.chat__typing {
  align-self: flex-end; display: inline-flex; gap: 4px;
  padding: 12px 14px; border-radius: 12px;
  background: var(--white); box-shadow: inset 0 0 0 1px var(--hairline);
}
.chat__typing i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--steel);
  animation: chat-blink 1.2s infinite;
}
.chat__typing i:nth-child(2) { animation-delay: .2s; }
.chat__typing i:nth-child(3) { animation-delay: .4s; }
@keyframes chat-blink { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }

.chat__chips {
  flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 6px;
  padding: 10px 14px 0; background: var(--white);
}
.chat__chips[hidden] { display: none; }
.chat__chip {
  border: 1px solid var(--hairline); border-radius: 999px; cursor: pointer;
  padding: 5px 11px; background: var(--white); color: var(--link-blue);
  font: inherit; font-size: 13px; line-height: 1.5;
}
.chat__chip:hover { background: var(--light-bg); }

.chat__form {
  flex: 0 0 auto; display: flex; align-items: flex-end; gap: 8px;
  padding: 10px 14px; background: var(--white);
}
/* ۱۶ پیکسل: کمتر از این، iOS موقع تایپ صفحه را بزرگ می‌کند. */
.chat__input {
  flex: 1 1 auto; min-width: 0; height: 42px; max-height: 120px; resize: none;
  padding: 8px 11px; border: 1px solid var(--hairline); border-radius: var(--radius);
  background: var(--white); color: var(--navy);
  font: inherit; font-size: 16px; line-height: 1.55;
}
.chat__input:focus { outline: 2px solid var(--link-blue); outline-offset: -1px; }
.chat__send {
  flex: 0 0 auto; height: 42px; padding: 0 16px;
  border: 0; border-radius: var(--radius); cursor: pointer;
  background: var(--amber); color: var(--navy);
  font: inherit; font-size: 14px; font-weight: 700;
}
.chat__send:hover { background: #C4831A; }
.chat__send:disabled { opacity: .55; cursor: not-allowed; }

.chat__note {
  flex: 0 0 auto; margin: 0; padding: 0 14px 10px;
  font-size: 11.5px; line-height: 1.6; color: var(--steel); background: var(--white);
}
.chat__note a { color: var(--link-blue); }

@media (prefers-reduced-motion: reduce) {
  .chat__typing i { animation: none; opacity: .6; }
}

@media (max-width: 620px) {
  .chat { inset-block-end: 16px; inset-inline-end: 16px; }
  .chat__button-text { display: none; }
  .chat__button { padding: 14px; }
  .chat__button svg { width: 21px; height: 21px; }
  .chat__panel { width: calc(100vw - 32px); height: calc(100vh - 100px); }
}

/* -----------------------------------------------------------------------------
   کتابخانه
   دکمه دانلود همیشه ته کارت می‌نشیند تا کارت‌های کنار هم، با متن کوتاه و بلند،
   دکمه‌هایشان در یک خط باشد.
-------------------------------------------------------------------------------*/
.lib { display: flex; flex-direction: column; }
.lib__kind { margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--eng-blue); }
.lib h3 { margin-block-end: 10px; }
.lib__meta { margin: 14px 0 0; font-size: 14px; line-height: 1.6; color: var(--steel); }
.lib__row {
  display: flex; gap: 10px; padding-block: 5px;
  border-block-start: 1px solid var(--hairline);
}
.lib__row dt { flex: 0 0 5.5em; font-weight: 700; color: var(--navy); }
.lib__row dd { margin: 0; }
.lib__actions {
  margin-block-start: auto; padding-block-start: 18px;
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
}
.lib__size { font-size: 13px; color: var(--steel); }

/* =============================================================================
   لایه تصویری
   برند گاید هویت چاپی است و درباره هنر تصویری وب چیزی نمی‌گوید. این بخش همان
   لایه است: مقیاس و عکس. پالت، فونت و قواعد برند دست‌نخورده می‌مانند.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   سربرگ تمام‌عرض با عکس
   متن روی عکس می‌نشیند، پس خوانایی نباید به روشنایی عکس گره بخورد: یک لایه
   گرادیان Deep Navy میان عکس و متن می‌آید تا کنتراست در هر عکسی ثابت بماند.
-------------------------------------------------------------------------------*/
.phero {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--navy); color: var(--white);
  display: flex; align-items: flex-end;
  min-height: 460px; padding-block: 92px 62px;
}
.phero--home { min-height: 640px; padding-block: 132px 76px; }

.phero__media { position: absolute; inset: 0; z-index: -2; }
.phero__img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* دو لایه: یکی از پایین برای متن، یکی کلی برای اینکه عکس زیر متن آرام شود.
   جهت گرادیان با inset-inline کار ندارد، پس در هر دو جهت یکسان می‌ماند. */
.phero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to left, rgba(11,44,74,.72) 0%, rgba(11,44,74,.34) 46%,
                    rgba(11,44,74,.12) 100%),
    linear-gradient(to top, rgba(11,44,74,.95) 0%, rgba(11,44,74,.72) 40%,
                    rgba(11,44,74,.34) 72%, rgba(11,44,74,.22) 100%);
}
.phero__inner { position: relative; }
.phero .crumbs { color: rgba(255,255,255,.72); margin-block-end: 16px; }
.phero .crumbs a { color: rgba(255,255,255,.9); }
.phero__kicker {
  display: inline-block; margin: 0 0 20px;
  font-size: var(--fs-small); letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.86);
  padding-block-end: 10px;
  border-block-end: var(--amber-rule) solid var(--amber);
}
.phero h1 { max-width: 19ch; text-shadow: 0 2px 24px rgba(0,0,0,.34); }
.phero--home h1 { font-size: clamp(36px, 5.2vw, 62px); font-weight: 800;
  letter-spacing: -.018em; line-height: 1.16; }
.phero__en {
  margin-block-start: 12px; font-size: 16px; letter-spacing: .01em;
  color: rgba(255,255,255,.66);
}
.phero__lede {
  margin-block-start: 24px; max-width: 56ch;
  font-size: 19px; line-height: 1.7; color: rgba(255,255,255,.94);
  text-shadow: 0 1px 14px rgba(0,0,0,.30);
}
.phero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-block-start: 32px; }

@media (max-width: 900px) {
  .phero { min-height: 380px; padding-block: 64px 44px; }
  .phero--home { min-height: 500px; padding-block: 82px 52px; }
  .phero__lede { font-size: 17px; }
}

/* -----------------------------------------------------------------------------
   نوار میانی — مکث بصری صفحه
-------------------------------------------------------------------------------*/
.band {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--navy); color: var(--white);
  padding-block: 96px; text-align: center;
}
.band__media { position: absolute; inset: 0; z-index: -2; }
.band__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.band::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, rgba(11,44,74,.62), rgba(11,44,74,.80));
}
.band__inner { position: relative; }
.band__kicker {
  margin: 0 0 18px; font-size: var(--fs-small); letter-spacing: .14em;
  text-transform: uppercase; color: rgba(255,255,255,.74);
}
.band__line {
  margin: 0 auto; max-width: 24ch;
  font-family: 'BrandDisplayLatin', 'BrandDisplay', 'BrandLatin', 'BrandFa', Tahoma, sans-serif;
  font-size: clamp(26px, 3.4vw, 40px); font-weight: 700; line-height: 1.35;
  letter-spacing: -.01em; text-wrap: balance;
  text-shadow: 0 2px 20px rgba(0,0,0,.45);
}
.band__sub {
  margin: 18px auto 0; max-width: 48ch;
  font-size: 17px; line-height: 1.7; color: rgba(255,255,255,.88);
  text-shadow: 0 1px 12px rgba(0,0,0,.4);
}
@media (max-width: 720px) { .band { padding-block: 64px; } }

/* -----------------------------------------------------------------------------
   بخش دوستونی — عکس در یک سمت، متن در سمت دیگر
-------------------------------------------------------------------------------*/
.split__grid {
  display: grid; grid-template-columns: .92fr 1.08fr; gap: 52px;
  align-items: center;
}
.split__media { margin: 0; position: relative; }
/* سطح Deep Navy که از گوشه بیرون می‌زند — همان قاب پرتره صفحه درباره. */
.split__media::before {
  content: ""; position: absolute; z-index: 0;
  inset-block: 26px -18px; inset-inline: 26px -18px;
  background: var(--navy); border-radius: var(--radius);
}
.split__img {
  position: relative; z-index: 1;
  display: block; width: 100%; height: auto; border-radius: var(--radius);
  box-shadow: 0 16px 40px rgba(11, 44, 74, .22);
}
@media (max-width: 900px) {
  .split__grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .split__media { max-width: 460px; }
}

/* =============================================================================
   نسخه ۴ — محصول‌سازی خدمات، نمونه کار، چکاپ سلامت و نسخه انگلیسی
   هیچ‌کدام از قطعه‌های زیر شش‌ضلعی ندارند تا نقش شش‌ضلعی صفحه‌ها دست نخورد.
   ============================================================================= */

.sub-h { margin: 0 0 8px; font-size: 18px; font-weight: 700; color: var(--eng-blue); }
.creds--one { grid-template-columns: minmax(0, 1fr); }

/* سربرگ: با ده پیوند، زبان و دکمه، هیچ برچسبی نباید دوخطی شود. پیوند «مسیر
   انرژی» زودتر از بقیه کنار می‌رود چون در فوتر هم هست. */
.site-nav a, .header-cta, .logo__role { white-space: nowrap; }
@media (max-width: 1440px) {
  .site-link { display: none; }
  .site-header__bar { gap: 16px; }
  .site-nav ul { gap: 16px; }
  .site-nav a { font-size: 14.5px; }
}
@media (max-width: 1240px) and (min-width: 1081px) {
  .logo__role { display: none; }
  .site-nav ul { gap: 13px; }
  .site-nav a { font-size: 14px; }
}

/* موبایل: نشان، نام، دکمه زبان و دکمه منو باید در ۳۹۰ پیکسل جا شوند؛ زیرعنوان
   لوگو کنار می‌رود و هیچ بخشی از سربرگ صفحه را از عرض بیرون نمی‌زند. */
.site-header__bar { min-width: 0; }
.logo { min-width: 0; }
@media (max-width: 1080px) {
  .lang-link { margin-inline-start: auto; }
  .lang-link + .site-link + .header-cta,
  .lang-link ~ .nav-toggle { margin-inline-start: 0; }
}
@media (max-width: 620px) {
  .logo__role { display: none; }
}

/* زبان — سربرگ */
.lang-link {
  flex: 0 0 auto;
  padding: 4px 9px; border-radius: 6px;
  font-size: 13px; font-weight: 700; letter-spacing: .04em; line-height: 1.3;
  color: var(--white); text-decoration: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.4);
}
.lang-link:hover { color: var(--white); background: rgba(255,255,255,.1); }


/* گواهی‌های هوش مصنوعی */
.aicerts { list-style: none; margin: 0; padding: 0; }
.aicerts > li {
  padding-block: 14px;
  border-block-end: var(--hairline-w) solid var(--hairline);
}
.aicert__en { display: block; font-weight: 700; color: var(--navy); }
.aicert__fa { display: block; margin-block-start: 2px; font-size: 15px; color: var(--eng-blue); }
.aicert__meta { display: block; margin-block-start: 4px; font-size: 14px; line-height: 1.65; color: var(--steel); }
.aicerts--navy > li { border-block-end-color: var(--hairline-on-navy); }
.aicerts--navy .aicert__en { color: var(--white); }
.aicerts--navy .aicert__fa { color: rgba(255,255,255,.86); }
.aicerts--navy .aicert__meta { color: rgba(255,255,255,.74); }

/* -----------------------------------------------------------------------------
   مسائلی که حل می‌کنم
-------------------------------------------------------------------------------*/
.problems { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
@media (max-width: 900px) { .problems { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 600px) { .problems { grid-template-columns: minmax(0,1fr); } }
.problem {
  display: flex; flex-direction: column;
  padding: 24px 24px 20px; border-radius: var(--radius);
  background: var(--white); border: var(--hairline-w) solid var(--hairline);
  border-block-start: 3px solid var(--eng-blue);
}
.problem h3 { margin: 0 0 8px; font-size: 19px; font-weight: 700; color: var(--navy); }
.problem p { margin: 0; font-size: 15.5px; line-height: 1.75; color: var(--steel); }
.problem .problem__fix {
  margin-block-start: auto; padding-block-start: 14px;
  font-size: 14px; font-weight: 700;
}

/* -----------------------------------------------------------------------------
   خدمات — خلاصه (خانه) و کامل (صفحه خدمات)
-------------------------------------------------------------------------------*/
.psum { display: flex; flex-direction: column; height: 100%; border-block-start: 4px solid var(--amber); }
.psum__no { margin: 0 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .08em; color: var(--eng-blue); }
.psum h3 { font-weight: 700; color: var(--navy); }
.psum .psum__en { margin: 4px 0 14px; font-size: 13px; color: var(--steel); }
.psum > p { color: var(--steel); }
.psum .psum__meta {
  margin: 4px 0 0; padding-block-start: 12px;
  border-block-start: 1px solid var(--hairline);
  font-size: 14px; color: var(--steel);
}
.psum__meta strong { color: var(--navy); }
.psum .psum__link { margin-block-start: auto; padding-block-start: 16px; font-weight: 700; }

.products { display: grid; gap: 34px; }
.product {
  overflow: hidden; border-radius: var(--radius);
  background: var(--white); border: var(--hairline-w) solid var(--hairline);
  scroll-margin-block-start: calc(var(--hdr-h) + 24px);
}
.product__head {
  background: var(--navy); color: var(--white);
  padding: 30px 32px 26px;
  border-block-end: var(--amber-rule) solid var(--amber);
}
.product__no { margin: 0 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .1em; color: rgba(255,255,255,.72); }
.product__title { color: var(--white); font-size: clamp(22px, 2.6vw, 28px); font-weight: 700; }
.product__en { margin: 6px 0 0; font-size: 14px; color: rgba(255,255,255,.7); }
.product__promise { margin: 16px 0 0; max-width: 70ch; font-size: 18px; line-height: 1.7; color: rgba(255,255,255,.92); }
.product__body {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px 44px; padding: 30px 32px 8px;
}
.product__col h4 { margin: 0 0 10px; font-size: 15px; font-weight: 700; color: var(--eng-blue); }
.product__col h4 ~ h4 { margin-block-start: 26px; }
.product__col .spec { margin-block-start: 24px; }
.product__boundary {
  margin-block-start: 18px; padding: 12px 14px; border-radius: var(--radius);
  background: var(--amber-tint); font-size: 14px; line-height: 1.7;
}
.product__actions { display: flex; flex-wrap: wrap; gap: 12px; padding: 18px 32px 30px; }
@media (max-width: 820px) {
  .product__head { padding: 24px 20px 22px; }
  .product__body { grid-template-columns: minmax(0,1fr); padding: 24px 20px 4px; }
  .product__actions { padding: 16px 20px 24px; }
}
.btn--outline { background: transparent; color: var(--navy); box-shadow: inset 0 0 0 1px var(--hairline); }
.btn--outline:hover { background: var(--light-bg); color: var(--navy); }

/* -----------------------------------------------------------------------------
   نمونه کار
-------------------------------------------------------------------------------*/
.cases { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; align-items: start; }
@media (max-width: 820px) { .cases { grid-template-columns: minmax(0,1fr); } }
.case {
  padding: 26px 28px 14px; border-radius: var(--radius);
  background: var(--white); border: var(--hairline-w) solid var(--hairline);
  border-inline-start: 4px solid var(--navy);
  scroll-margin-block-start: calc(var(--hdr-h) + 24px);
}
.section--light .case { background: var(--white); }
.case__kind { margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--eng-blue); }
.case__name { font-size: 21px; font-weight: 700; color: var(--navy); }
.case__stage { margin: 6px 0 14px; font-size: 14px; color: var(--steel); }
.case .spec { grid-template-columns: 84px minmax(0,1fr); margin-block-start: 12px; font-size: 15.5px; line-height: 1.75; }
.case--list { padding-block-end: 22px; }
.case--list .dash-list { margin-block-start: 14px; font-size: 15.5px; }
.case--ai {
  background: var(--navy); color: var(--white);
  border-color: var(--navy); border-inline-start-color: var(--amber);
  padding-block-end: 26px;
}
.case--ai .case__kind { color: rgba(255,255,255,.74); }
.case--ai .case__name { color: var(--white); }
.case__body { margin-block-start: 14px; color: rgba(255,255,255,.9); line-height: 1.8; }
.case__link { margin-block-start: 14px; font-weight: 700; }

/* -----------------------------------------------------------------------------
   مسیر پیش و پس از هوش مصنوعی
-------------------------------------------------------------------------------*/
.flows { display: grid; gap: 22px; }
.flow { padding: 24px 26px; border-radius: var(--radius); background: var(--light-bg); }
.section--light .flow:not(.flow--navy) { background: var(--white); }
.flow--navy { background: var(--navy); color: var(--white); }
.flow__label { margin: 0 0 14px; font-size: 13px; font-weight: 700; letter-spacing: .1em; color: var(--eng-blue); }
.flow--navy .flow__label { color: rgba(255,255,255,.74); }
.flow__steps {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 0;
}
.flow__steps li {
  position: relative; padding: 9px 14px; border-radius: 999px;
  font-size: 15px; font-weight: 700; line-height: 1.4;
  background: var(--white); color: var(--navy);
  box-shadow: inset 0 0 0 1px var(--hairline);
}
.section--light .flow:not(.flow--navy) .flow__steps li { background: var(--light-bg); }
.flow--navy .flow__steps li { background: var(--navy-2); color: var(--white); box-shadow: inset 0 0 0 1px var(--hairline-on-navy); }
.flow__steps li + li { margin-inline-start: 30px; }
.flow__steps li + li::before {
  content: "←"; position: absolute; inset-inline-start: -24px; top: 50%;
  transform: translateY(-50%); font-weight: 400; color: var(--steel);
}
html[dir="ltr"] .flow__steps li + li::before { content: "→"; }
.flow--navy .flow__steps li + li::before { color: rgba(255,255,255,.7); }
.flow__note { margin: 14px 0 0; font-size: 15px; color: var(--steel); }
.flow--navy .flow__note { color: rgba(255,255,255,.82); }

/* -----------------------------------------------------------------------------
   نمونه خروجی تحلیلگر ریسک
-------------------------------------------------------------------------------*/
.demo__label {
  display: inline-block; margin: 0 0 18px; padding: 6px 12px; border-radius: 999px;
  font-size: 14px; font-weight: 700; line-height: 1.6;
  background: var(--amber-tint); color: var(--navy); border: 1px dashed var(--amber);
}
.demo {
  padding: 0 26px 26px; border-radius: var(--radius);
  background: var(--white); border: var(--hairline-w) solid var(--hairline);
  box-shadow: 0 12px 30px rgba(11, 44, 74, .08);
}
.demo .demo__bar {
  margin: 0 -26px; padding: 12px 26px;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--navy); color: var(--white);
  font-size: 14px; font-weight: 700;
}
.demo__grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 40px; }
.demo__h { margin: 28px 0 12px; font-size: 17px; font-weight: 700; color: var(--eng-blue); }
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.kpi {
  padding: 14px 16px; border-radius: var(--radius);
  background: var(--light-bg); border-inline-start: 4px solid #A32E2E;
}
.kpi__v { display: block; font-size: 26px; font-weight: 800; line-height: 1.2; color: var(--navy); }
.kpi__l { display: block; margin-block-start: 4px; font-size: 13px; color: var(--steel); }
.demo table.data { font-size: 14.5px; }
@media (max-width: 820px) {
  .demo { padding: 0 16px 20px; }
  .demo .demo__bar { margin-inline: -16px; padding-inline: 16px; }
  .demo__grid { grid-template-columns: minmax(0,1fr); }
}

/* -----------------------------------------------------------------------------
   مسیرهای شروع (چهار CTA)
-------------------------------------------------------------------------------*/
.paths { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
@media (max-width: 1000px) { .paths { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .paths { grid-template-columns: minmax(0,1fr); } }
.path {
  display: flex; flex-direction: column; gap: 8px;
  padding: 22px 22px 20px; border-radius: var(--radius);
  background: var(--white); color: var(--navy); text-decoration: none;
  border: var(--hairline-w) solid var(--hairline);
  border-block-end: 4px solid var(--amber);
  transition: transform .18s ease, box-shadow .18s ease;
}
.path:hover { color: var(--navy); transform: translateY(-3px); box-shadow: 0 14px 30px rgba(11,44,74,.14); }
.path__who { font-size: 13px; font-weight: 700; color: var(--eng-blue); }
.path__title { font-size: 18px; font-weight: 800; line-height: 1.45; }
.path__body { font-size: 14.5px; line-height: 1.7; color: var(--steel); }
.path__go { margin-block-start: auto; padding-block-start: 8px; font-size: 14px; font-weight: 700; color: var(--link-blue); }
@media (prefers-reduced-motion: reduce) { .path, .path:hover { transition: none; transform: none; } }

/* -----------------------------------------------------------------------------
   چکاپ سلامت پروژه
-------------------------------------------------------------------------------*/
.hc-promo { display: grid; grid-template-columns: 1.1fr .9fr; gap: 44px; align-items: center; }
@media (max-width: 860px) { .hc-promo { grid-template-columns: minmax(0,1fr); gap: 28px; } }
.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.chips li {
  padding: 7px 13px; border-radius: 999px; font-size: 14px;
  background: var(--navy-2); color: var(--white);
  box-shadow: inset 0 0 0 1px var(--hairline-on-navy);
}

.quiz__axis-tag { margin: 0 0 4px; font-size: 13px; font-weight: 700; color: var(--eng-blue); }
.quiz__disclaimer { margin-block-start: 8px; font-size: var(--fs-small); color: var(--steel); }
.hc-score { display: flex; align-items: baseline; gap: 10px; margin: 10px 0 0; }
.hc-score__v { font-size: 64px; font-weight: 800; line-height: 1; color: var(--navy); }
.hc-score__of { font-size: 18px; color: var(--steel); }
.hc-h { margin: 34px 0 14px; font-size: 18px; font-weight: 700; color: var(--eng-blue); }
.hc-axes { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hc-axis {
  display: grid; grid-template-columns: 150px minmax(0,1fr) 44px;
  align-items: center; gap: 14px; font-size: 15px;
}
.hc-axis__bar { display: block; height: 10px; border-radius: 999px; background: var(--light-bg); overflow: hidden; }
.hc-axis__bar > span { display: block; height: 100%; background: var(--eng-blue); }
.hc-axis.is-weak .hc-axis__bar > span { background: #A32E2E; }
.hc-axis__pct { font-weight: 700; text-align: end; }
.hc-weak > li { line-height: 1.75; }
@media (max-width: 520px) {
  .hc-axis { grid-template-columns: 112px minmax(0,1fr) 34px; gap: 10px; font-size: 14px; }
  .hc-score__v { font-size: 52px; }
}

/* -----------------------------------------------------------------------------
   نسخه انگلیسی (چپ‌به‌راست)
-------------------------------------------------------------------------------*/
html[dir="ltr"] .phero::before {
  background:
    linear-gradient(to right, rgba(11,44,74,.72) 0%, rgba(11,44,74,.34) 46%,
                    rgba(11,44,74,.12) 100%),
    linear-gradient(to top, rgba(11,44,74,.95) 0%, rgba(11,44,74,.72) 40%,
                    rgba(11,44,74,.34) 72%, rgba(11,44,74,.22) 100%);
}
html[dir="ltr"] .phero--home h1 { max-width: 22ch; }
html[dir="ltr"] .sec-head__kicker,
html[dir="ltr"] .phero__kicker { letter-spacing: .08em; }
html[dir="ltr"] .site-nav ul { gap: 18px; }

/* -----------------------------------------------------------------------------
   سربرگ عکس‌دار: هر جزء در یک خط، تا جایی که عرض صفحه اجازه می‌دهد
   تیتر، دیگر در ۱۹ کاراکتر شکسته نمی‌شود؛ اندازه‌اش با عرض صفحه کوچک می‌شود
   تا در دسکتاپ در یک خط بنشیند و روی موبایل مرتب بشکند.
-------------------------------------------------------------------------------*/
.phero h1 { max-width: none; }
.phero--home h1 { font-size: clamp(28px, 3.3vw, 46px); line-height: 1.3; }
.phero__lede { max-width: 80ch; }
.phero__en { font-size: 15px; }
@media (min-width: 1100px) {
  html[dir="rtl"] .phero--home h1,
  .phero--home .phero__en,
  .phero--home .phero__kicker { white-space: nowrap; }
}
html[dir="ltr"] .phero--home h1 { font-size: clamp(30px, 3.6vw, 50px); max-width: 24ch; }

/* فوتر همیشه با خط کهربایی از بخش تیره پیش از خود جدا می‌شود — همان خطی که
   زیر سربرگ است. بدون آن، نوار خواسته پایانی و فوتر یک سطح سرمه‌ای می‌شدند. */
.site-footer { border-block-start: var(--amber-rule) solid var(--amber); }

/* -----------------------------------------------------------------------------
   دو زبانه: زبانه فارسی / English در سربرگ
   زبانه فعال سفید است؛ روی موبایل برچسب کوتاه (فا / EN) می‌آید تا سربرگ در
   ۳۹۰ پیکسل جا شود.
-------------------------------------------------------------------------------*/
.lang-switch {
  display: inline-flex; flex: 0 0 auto; gap: 2px; padding: 3px;
  border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.4);
}
.lang-switch a {
  padding: 4px 11px; border-radius: 999px;
  font-size: 13px; font-weight: 700; line-height: 1.35; white-space: nowrap;
  color: rgba(255,255,255,.84); text-decoration: none;
}
.lang-switch a[aria-current] { background: var(--white); color: var(--navy); }
.lang-switch a:not([aria-current]):hover { background: rgba(255,255,255,.12); color: var(--white); }
.lang-switch .ls-short { display: none; }
@media (max-width: 1080px) { .lang-switch { margin-inline-start: auto; } }
@media (max-width: 620px) {
  .lang-switch .ls-long { display: none; }
  .lang-switch .ls-short { display: inline; }
  .lang-switch a { padding: 4px 9px; }
}

/* سربرگ پهن‌تر: نشان و نام به لبه صفحه نزدیک‌تر می‌شوند و با منو فاصله
   می‌گیرند. در عرض میانه، دکمه سربرگ کنار می‌رود تا منو و زبانه تداخل نکنند. */
.site-header__bar { max-width: 1360px; overflow: hidden; }
/* روی صفحه پهن، زیرعنوان کامل لوگو هم دیده می‌شود؛ سربرگ جا باز می‌کند تا منو
   به زبانه زبان نرسد. */
@media (min-width: 1501px) { .site-header__bar { max-width: 1600px; } }
.logo { margin-inline-end: 22px; flex: 0 0 auto; }
.site-nav { min-width: 0; }
/* در عرض میانه، زیرعنوان لوگو کنار می‌رود تا نشان و نام همیشه کامل در لبه
   صفحه بمانند و منو به زبانه زبان نچسبد؛ زیر ۱۳۲۰ پیکسل دکمه سربرگ هم کنار
   می‌رود (همان دعوت در سربرگ عکس‌دار هر صفحه هست). */
@media (max-width: 1500px) and (min-width: 1081px) {
  .logo__role { display: none; }
  .site-nav ul { gap: 14px; }
}
@media (max-width: 1320px) and (min-width: 1081px) { .header-cta { display: none; } }
/* زیر ۱۲۰۰ پیکسل زبانه زبان هم برچسب کوتاه (فا / EN) می‌گیرد. */
@media (max-width: 1200px) {
  .lang-switch .ls-long { display: none; }
  .lang-switch .ls-short { display: inline; }
  .lang-switch a { padding: 4px 9px; }
}
@media (max-width: 1100px) and (min-width: 1081px) {
  .site-nav ul { gap: 11px; }
  .site-nav a { font-size: 13.5px; }
}

/* شماره‌گذار شش‌ضلعی در صفحه انگلیسی با ارقام لاتین */
html[lang="en"] .hex-steps > li::before { content: counter(step); }
html[lang="en"] .portrait__role-en { direction: rtl; }

/* -----------------------------------------------------------------------------
   بازخورد سیاوش — چهره واقعی و عدد شروع
   پرتره در خانه جای عکس دو مهندس را گرفته؛ در تماس یک پرتره کوچک بالای
   اطلاعات تماس می‌نشیند. نرخ جلسه تشخیصی زیر دکمه‌های سربرگ خانه دیده می‌شود.
-------------------------------------------------------------------------------*/
.split__portrait { max-width: 360px; justify-self: center; }
@media (max-width: 900px) { .split__portrait { max-width: 300px; justify-self: start; } }

/* نام در سربرگ خانه، درشت‌تر از تیتر: برند شخصی است و اولین چیزی که دیده
   می‌شود باید نام باشد. */
.phero__name {
  margin: 0 0 14px; font-size: clamp(42px, 6vw, 84px); font-weight: 800;
  line-height: 1.1; letter-spacing: -.01em; color: var(--white);
  text-shadow: 0 2px 28px rgba(0,0,0,.40);
}
html[dir="ltr"] .phero__name { letter-spacing: -.02em; }
.split .portrait__name { font-size: 28px; font-weight: 800; }

.phero__note {
  margin-block-start: 18px; font-size: 15px; color: rgba(255,255,255,.90);
  text-shadow: 0 1px 12px rgba(0,0,0,.30);
}
.phero__note a { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }

.contact-who { display: flex; align-items: center; gap: 16px; margin-block: 8px 10px; }
.contact-who__img {
  width: 76px; height: 76px; object-fit: cover; object-position: 50% 22%;
  border-radius: 50%; flex: none;
  box-shadow: 0 6px 18px rgba(11, 44, 74, .18);
}
.contact-who p { margin: 0; line-height: 1.6; }