/*
 * تم «رنگ‌های لوگو» با زمینه‌ی تیز (انتخاب صاحب پروژه، ۱ آبان ۱۴۰۵؛ با اصلاحات دور هشتم تا دهم؛ فاز ۱ بسته شد ۴ آبان ۱۴۰۵).
 * زمینه همان سرمه‌ای تقریباً مشکی پشت لوگو (#050B19) با صفحه‌های نورانی زاویه‌دار؛ در هدر لوگوی کامل بدون زمینه.
 * تأکید فیروزه‌ای نئونی لوگو؛ آبی و نیلی برای نورهای زمینه. کنتراست‌ها روی --c-bg (همه‌ی متن‌ها AA).
 * ترتیب بارگذاری: tokens.css، base.css، theme.css. رنگ‌ها و اندازه‌های پایه در tokens.css (فاز ۶)؛ قانون‌ها: docs/design.md.
 */
:root {
  /* بقیه‌ی رنگ‌ها، گوشه‌ها و ارتفاع هدر در tokens.css (یک بار؛ تمیزکاری فاز ۶، ۲۲ آبان ۱۴۰۵) */
  --r-pill: 999px;
}

/* زمینه: صفحه‌های زاویه‌دار تیز */
body::before { background: var(--c-bg) url("../img/facets.svg") center / cover no-repeat; }
@media (orientation: portrait) { body::before { background-position: 30% 50%; } }

/* لوگوی کامل بدون زمینه (logo-transparent؛ انتخاب صاحب پروژه، ۱ آبان ۱۴۰۵) */
.brand__logo { width: auto; height: 64px; }
@media (max-width: 767px) { .brand__logo { height: 56px; } }

.header-cta { border-radius: var(--r-pill); }
.btn--contact .icon { color: var(--c-cyan); }
.price--call { border-radius: var(--r-pill); }
.site-header.is-solid { -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.sheet { border-radius: var(--r-lg) var(--r-lg) 0 0; }
@media (min-width: 640px) { .sheet { border-radius: var(--r-lg); } }

/* ==========================================================================
 * اصلاحات نهایی (۲ آبان ۱۴۰۵): دکمه‌ها، فرم پنجره‌ای، هدر و حاشیه‌ی کامپیوتر
 * همه از این توکن‌ها خوانده می‌شوند تا در کل سایت یکی باشند (موقع نهایی شدن به tokens.css می‌روند).
 * ========================================================================== */
:root {
  /* دکمه‌ی اصلی: فیروزه‌ای روشن به آبیِ زمینه، از راست به چپ؛ متن تیره در همه‌ی نقطه‌ها ≥ ۶٫۴:۱ (تیره‌ترین نقطه #3A9CEB) */
  --grad-primary: linear-gradient(to left, #5ED6EA 0%, #2CC6E0 48%, #3A9CEB 100%);
  /* لبه‌ی گرادیان رنگ‌های لوگو (فیروزه‌ای به نیلی): دکمه‌ی دوم، قاب پنجره، فیلد فعال، گزینه‌ی انتخاب‌شده */
  --grad-brand-line: linear-gradient(to left, #2CC6E0, #4F5BD5);
  --grad-secondary-fill: linear-gradient(to left, rgb(44 198 224 / 0.10), rgb(79 91 213 / 0.12));
  --c-secondary-hover: rgb(79 91 213 / 0.14);
  /* فرم */
  --c-modal: #0B172C;          /* قاب پنجره */
  --c-field: #08111F;          /* زمینه‌ی فیلد */
  --c-field-focus: #0C1930;
  --c-field-line: #5A6E96;     /* لبه‌ی فیلد؛ ۳٫۷:۱ روی زمینه‌ی فیلد */
  --c-choice-on: #13223F;      /* زمینه‌ی گزینه‌ی انتخاب‌شده */
  --gutter-wide: clamp(24px, 5vw, 96px);
}

/* ---------- دکمه‌ها: همه کپسولی ---------- */
.btn { border-radius: var(--r-pill); position: relative; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), filter var(--dur) var(--ease), transform var(--dur-fast) var(--ease); }
.btn:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 3px; border-radius: var(--r-pill); }

/* اصلی: گرادیان؛ بدون درخشش؛ hover کمی روشن‌تر */
.btn--primary { background: var(--grad-primary); color: var(--c-on-primary); border: 0; font-weight: var(--fw-semibold); overflow: hidden; }
.btn--primary:hover { background: var(--grad-primary); color: var(--c-on-primary); } /* روشن‌تر شدن فقط با نشانگر دقیق (پایین) */
.btn__arrow { width: 18px; height: 18px; stroke-width: 2; transition: transform var(--dur-hover, 200ms) var(--ease); }

/* دوم: زمینه‌ی تقریباً شفاف + لبه‌ی ۱٫۵ پیکسلی گرادیان لوگو (شبه‌عنصر با mask تا وسطش شفاف بماند) */
.btn--secondary, .btn--contact {
  background-color: transparent; background-image: var(--grad-secondary-fill);
  border: 0; color: var(--c-text);
}
.btn--secondary::before, .btn--contact::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: var(--grad-brand-line);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.btn--secondary .icon, .btn--contact .icon { color: var(--c-cyan); }

/* غیرفعال: بدون گرادیان */
.btn[disabled], .btn[aria-disabled="true"] { background: var(--c-surface-3); color: var(--c-text-3); filter: none; }
.btn[disabled]::before, .btn[aria-disabled="true"]::before { display: none; }

/* در حال ارسال: همان گرادیان + نوار نوری که رویش حرکت می‌کند + چرخنده (نوار نور در بخش «حرکت‌های ریز» پایین) */
.btn--primary.is-loading { background: var(--grad-primary); color: var(--c-on-primary); }

/* ---------- برگه‌ها ---------- */
.sheet__group { font-size: var(--fs-sm); color: var(--c-text-3); margin-top: var(--sp-2); }
.sheet__chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.sheet__chip {
  display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--tap); padding: 0 var(--sp-4);
  border: 1px solid var(--c-line); border-radius: var(--r-pill); background: var(--c-surface-1);
  color: var(--c-text); text-decoration: none; transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.sheet__chip:hover { border-color: var(--c-line-strong); background: var(--c-surface-3); color: var(--c-text); }
.sheet__chip .icon { width: 18px; height: 18px; color: var(--c-violet-text); }
.sheet__link { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--tap); align-self: flex-start; margin-top: var(--sp-1); }
.sheet__link .icon { width: 16px; height: 16px; }

/* ---------- پنجره‌ی فرم «درخواست مشاوره» ---------- */
.modal {
  padding: 0; border: 0; color: var(--c-text); background: var(--c-modal); overflow: hidden;
  width: min(560px, calc(100vw - 32px)); max-width: none; max-height: calc(100svh - 48px);
  border-radius: var(--r-lg); box-shadow: 0 24px 64px -24px rgb(0 0 0 / 0.9);
}
.modal[open] { display: flex; flex-direction: column; animation: modal-in var(--dur-slow) var(--ease-out-expo); }
/* قاب ۱ پیکسلی با گرادیان لوگو */
.modal::before {
  content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; padding: 1px; pointer-events: none;
  background: var(--grad-brand-line);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.modal::backdrop { background: rgb(2 6 16 / 0.72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
@keyframes modal-in { from { opacity: 0; transform: translateY(16px) scale(0.98); } }
.modal__form { display: flex; flex-direction: column; flex: 1; min-height: 0; gap: 0; }
.modal__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding-block: var(--sp-2); padding-inline: var(--sp-5) var(--sp-3);
  border-bottom: 1px solid var(--c-line);
}
.modal__head h2 { font-size: var(--fs-md); font-weight: var(--fw-semibold); line-height: 1.5; }
.modal__body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-5); }
.modal__lead { color: var(--c-text-2); }
.modal__foot { padding: var(--sp-4) var(--sp-5) calc(var(--sp-4) + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--c-line); display: flex; flex-direction: column; gap: var(--sp-2); background: var(--c-modal); }
.modal__fine { font-size: var(--fs-sm); color: var(--c-text-3); text-align: center; }
.modal .form-grid { gap: var(--sp-4); }
@media (min-width: 720px) { .modal .form-grid { grid-template-columns: 1fr; } }
/* کامپیوتر: پنج نوع ماده در سه ستون تا یکی تنها در ردیف دوم نماند */
@media (min-width: 640px) { .modal .choice-group:not(.choice-group--cities) { display: grid; grid-template-columns: repeat(3, 1fr); } .modal .choice-group:not(.choice-group--cities) .choice > span { width: 100%; } }
.preview-demo { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }
/* گوشی: از پایین بالا می‌آید، تقریباً تمام‌قد؛ سر پنجره و دکمه‌ی ارسال همیشه پیدا، بدنه اسکرول می‌خورد.
   --vvh و --kb را request.js از visualViewport می‌دهد تا با کیبورد باز، پنجره بالای کیبورد بماند. */
@media (max-width: 639px) {
  .modal {
    width: 100%; height: 92svh; max-height: calc(var(--vvh, 100svh) - 8px);
    margin: auto 0 var(--kb, 0px); border-radius: var(--r-lg) var(--r-lg) 0 0;
  }
  .modal[open] { animation: modal-up var(--dur-slow) var(--ease-out-expo); }
  .modal__head { padding-inline: max(20px, env(safe-area-inset-right, 0px)) var(--sp-3); }
  .modal__body { padding: var(--sp-4) max(20px, env(safe-area-inset-right, 0px)) var(--sp-5) max(20px, env(safe-area-inset-left, 0px)); }
  .modal__foot { padding-inline: max(20px, env(safe-area-inset-right, 0px)) max(20px, env(safe-area-inset-left, 0px)); }
}
@keyframes modal-up { from { transform: translateY(40%); opacity: 0.4; } }
html:has(.modal[open]) { overflow: hidden; }

/* «+ نام شرکت و ایمیل (اختیاری)» */
.more-fields > summary {
  display: inline-flex; align-items: center; min-height: var(--tap); cursor: pointer; list-style: none;
  color: var(--c-violet-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em;
}
.more-fields > summary::-webkit-details-marker { display: none; }
.more-fields[open] > summary { color: var(--c-text-2); }
.more-fields__grid { display: grid; gap: var(--sp-4); margin-top: var(--sp-3); }

/* ---------- ظاهر فرم (همان زبان دکمه‌ها؛ پنجره و فرم باز صفحه‌ی تماس) ---------- */
.input { border-radius: var(--r-md); background: var(--c-field); border: 1px solid var(--c-field-line); }
/* فوکوس: لبه‌ی گرادیان (دو لایه زمینه: داخل تیره، لبه گرادیان) */
.input:focus {
  outline: none; box-shadow: none; border-color: transparent;
  background: linear-gradient(var(--c-field-focus), var(--c-field-focus)) padding-box, var(--grad-brand-line) border-box;
}
.field.has-error .input, .field.has-error .input:focus { border-color: var(--c-error); background: var(--c-field); }
.choice > span { border-radius: var(--r-pill); background: var(--c-field); border: 1px solid var(--c-field-line); padding-inline: var(--sp-3) var(--sp-4); }
.choice > span::before, .choice input[type="radio"] + span::before { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--c-text-3); }
.choice input:checked + span {
  color: var(--c-text); border-color: transparent;
  background: linear-gradient(var(--c-choice-on), var(--c-choice-on)) padding-box, var(--grad-brand-line) border-box;
}
.choice input:checked + span::before {
  border-color: transparent; box-shadow: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2304121C' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat, var(--grad-primary);
}
.choice input:focus-visible + span { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.field.has-error .choice > span { border-color: var(--c-error); }
.choice-group--cities .choice > span { justify-content: flex-start; }


/* ---------- کامپیوتر (≥۱۰۲۴، افقی): هدر و متن هیرو حاشیه‌ی متناسب با عرض؛ بخش‌های پایین در همان ستون خوانا ---------- */
@media (min-width: 1024px) and (orientation: landscape) and (min-height: 500px) {
  .site-header > .container, .js-story .hero__chapters.container { max-width: none; padding-inline: var(--gutter-wide); }
}
/* پیام پیش‌نمایش بعد از ارسال (فقط پیش‌نمایش) */
.alert--note { border-color: var(--c-line-strong); background: var(--c-surface-2); }

/* ==========================================================================
 * دور هشتم اصلاحات (۲ آبان ۱۴۰۵): «ارتباط با ما»، هدر ۱۰۲۴ تا ۱۲۷۹، فوتر جدید، فرم، حرکت‌های ریز، کپی شماره
 * قانون‌ها: hover فقط برای نشانگر دقیق (hover: hover و pointer: fine)؛ در لمس فشردن (بخش دور نهم پایین).
 * «کاهش حرکت» (دور نهم): حرکت‌های ریز در هر دو حالت اجرا می‌شوند؛ فقط چرخش آرام زنجیر و غبار متوقف است.
 * ========================================================================== */
:root {
  /* رنگ رسمی برندها (از خود آیکن‌های رسمی، دور نهم): تنها استثنای پالت، فقط برای «ارتباط با ما» و نوار پایین */
  --c-brand-bale: #0ACA9B;
  --c-brand-telegram: #2AABEE;
  --c-brand-whatsapp: #25D366;
  --c-brand-linkedin: #2867B2;
  /* اینستاگرام (۱۶ آبان ۱۴۰۵): رنگ‌های گرادیان رسمی (زرد #FEDA75، نارنجی #FA7E1E، سرخابی #D62976، بنفش #962FBF، آبی #4F5BD5).
     متن سفید روی زرد و نارنجی به ۴٫۵:۱ نمی‌رسد (۱٫۳۵ و ۲٫۶۰)، پس زرد و نارنجی فقط هاله‌ی گرد گوشه‌ی پشت آیکن‌اند (مثل لوگوی خود
     اینستاگرام، سمت شروع سطر)، و زیر متن فقط سرخابی تا بنفش و آبی است (۴٫۷۳، ۶٫۰۸، ۵٫۵۴). --c-brand-instagram برای سایه‌ی hover. */
  --c-brand-instagram: #D62976;
  --grad-instagram:
    radial-gradient(circle at calc(100% - 6px) 120%, #FEDA75 0, #FA7E1E 16px, rgb(250 126 30 / 0) 34px),
    linear-gradient(to left, #D62976 0%, #962FBF 62%, #4F5BD5 100%);
  /* زمینه‌ی کاشی‌ها: همان رنگ، کمی تیره‌تر تا اسم سفید دست‌کم ۳:۱ باشد (لینکدین خودش ۵٫۷:۱) */
  --c-tile-bale: #08A780;       /* ۳٫۰۷:۱ */
  --c-tile-telegram: #229ED9;   /* ۳٫۰۲:۱؛ پایین گرادیان آیکن رسمی تلگرام */
  /* واتساپ توضیح ۱۴ پیکسلی هم دارد، پس ۴٫۵:۱ (۵ آبان ۱۴۰۵): همان رنگ‌مایه و اشباع #1DAA61 (۳٫۰۱:۱)، فقط تیره‌تر */
  --c-tile-whatsapp: #17854C;   /* ۴٫۶۷:۱ */
  --c-ok: #4ADE80;
  /* فوتر */
  --c-footer-top: #06102A;
  --c-tile: rgb(242 247 255 / 0.025);       /* زمینه‌ی خیلی کم‌رنگ کاشی */
  --c-tile-press: rgb(242 247 255 / 0.07);  /* فشردن در لمس */
  /* حرکت */
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-hover: 200ms;
  --dur-sheen: 750ms;
}
/* «کاهش حرکت» (دور نهم، ۳ آبان ۱۴۰۵) فقط چرخش آرام زنجیر و غبار را متوقف می‌کند (polymer-chain.js)، متن فصل‌ها را فقط محو
   و ظاهر می‌کند و پرش به فصل را بدون اسکرول نرم؛ حرکت‌های ریز همه می‌مانند. */

/* ---------- هدر ≥۱۰۲۴: برند و دکمه‌ها به اندازه‌ی خودشان، منو وسط فضای باقی‌مانده ---------- */
@media (min-width: 1024px) {
  .brand, .header-end { flex: 0 0 auto; }
  .main-nav, .main-nav.is-open { flex: 1 1 auto; min-width: 0; display: flex; justify-content: center; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .nav-link, .nav-group__toggle { padding-inline: var(--sp-2); }
  .brand__name { font-size: var(--fs-base); }
}
/* «تماس» و «ارتباط با ما» در منوی همبرگری گوشی نیستند (تماس در نوار پایین است) */
.nav-item--connect { display: none; }
@media (min-width: 1024px) { .nav-item--connect { display: block; } }

/* منوی «قیمت روز»: هر مورد دوخطی (اسم و توضیح کوچک) */
.nav-sub--regions a { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; padding-block: var(--sp-2); line-height: 1.5; }
.nav-sub__note { font-size: var(--fs-sm); color: var(--c-text-3); }
@media (min-width: 1024px) {
  .nav-sub--regions { min-width: max-content; }
  .nav-sub--regions .nav-sub__name { white-space: nowrap; }
  /* پنل «ارتباط با ما»: ۳۵rem (نه ۳۴) تا ایمیل، کپی، لینکدین و اینستاگرام در یک ردیف جا شوند (۵۱۹ پیکسل؛ ۱۷ آبان ۱۴۰۵). آخرین آیتم منوست، پس از لبه‌ی چپ همان آیتم به سمت راست باز می‌شود تا در ۱۰۲۴ هم از صفحه بیرون نزند */
  .nav-panel { width: 35rem; max-width: calc(100vw - 32px); inset-inline-start: auto; left: 0; padding: var(--sp-4); }
}

/* ---------- جزء مشترک «ارتباط با ما» ---------- */
.connect { display: flex; flex-direction: column; gap: var(--sp-4); }
.connect__tiles { list-style: none; display: grid; gap: var(--sp-3); }
.connect--two .connect__tiles { grid-template-columns: 1fr 1fr; }
@media (min-width: 640px) { .connect--footer .connect__tiles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .connect--footer .connect__tiles { grid-template-columns: repeat(4, 1fr); } }
.connect-tile {
  --brand: var(--c-surface-3);
  display: flex; align-items: center; justify-content: center; gap: var(--sp-3); min-height: 64px; height: 100%; padding: var(--sp-3) var(--sp-4);
  border: 0; border-radius: 16px; background: var(--brand);
  color: #fff; text-decoration: none;
  /* خروج از hover حداکثر ۲۰۰ms؛ ورود ۱۵۰ms (پایین) */
  transition: transform var(--dur-hover) var(--ease), box-shadow var(--dur-hover) var(--ease), filter var(--dur-hover) var(--ease);
}
.connect-tile:hover { color: #fff; }
.connect-tile--bale { --brand: var(--c-tile-bale); }
.connect-tile--telegram { --brand: var(--c-tile-telegram); }
.connect-tile--whatsapp { --brand: var(--c-tile-whatsapp); }
/* آیکن رسمی تک‌رنگ، سفید (فایل‌ها شکل و رنگ اصلی را دارند؛ سفید شدن فقط با filter) */
.connect-tile__icon { width: 30px; height: 30px; flex: none; object-fit: contain; filter: brightness(0) invert(1); }
.connect-tile__text { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; line-height: 1.35; }
.connect-tile__name { font-size: 1.1875rem; font-weight: 800; }
.connect-tile__text small { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: #fff; }
.connect__minor { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
.connect--two .connect__minor, .connect--footer .connect__minor { padding-top: var(--sp-4); border-top: 1px solid var(--c-line); }
.connect-minor { display: inline-flex; align-items: center; gap: var(--sp-1); }
/* ایمیل و لینکدین: کپسول کوچک تمام‌رنگ (لینکدین آبی خودش، ایمیل گرادیان دکمه‌ی اصلی با متن تیره) */
.connect-minor__link {
  --brand: var(--c-cyan);
  display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--tap); padding-inline: var(--sp-4);
  border-radius: var(--r-pill); background: var(--grad-primary); color: var(--c-on-primary);
  text-decoration: none; font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  transition: transform var(--dur-hover) var(--ease), box-shadow var(--dur-hover) var(--ease), filter var(--dur-hover) var(--ease);
}
.connect-minor__link:hover { color: var(--c-on-primary); }
.connect-minor__link--linkedin { --brand: var(--c-brand-linkedin); background: var(--brand); color: #fff; }
.connect-minor__link--linkedin:hover { color: #fff; }
.connect-minor__link--instagram { --brand: var(--c-brand-instagram); background: var(--grad-instagram); color: #fff; }
/* لینکدین و اینستاگرام با هم می‌شکنند: اگر ردیف جا نشد، هر دو با هم به خط بعد می‌روند */
.connect-minor__social { display: inline-flex; flex-wrap: nowrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
.connect-minor__link--instagram:hover { color: #fff; }
.connect-minor__link--instagram img { width: 18px; height: 18px; }
.connect-minor__link img { width: 19px; height: 18px; flex: none; filter: brightness(0) invert(1); }
.connect-minor__mail { display: inline-grid; place-items: center; flex: none; color: inherit; }
.connect-minor__mail .icon { width: 18px; height: 18px; stroke-width: 1.9; }
.connect-minor__link .ltr, .nav-sub .connect-minor__link .ltr { font-size: var(--fs-sm); letter-spacing: 0; color: inherit; } /* نه فاصله‌ی حروف کدهای PE و PP */
/* ایمیل، لینکدین و اینستاگرام در یک ردیف (اصلاح‌های بقیه‌ی فاز ۳، ۱۷ آبان ۱۴۰۵).
   گوشی (کمتر از ۷۰۰) و برگه‌ی «پیام» (در تبلت هم فقط ۴۳۸ پیکسل پهناست): لینکدین و اینستاگرام کاشی مربع ۴۴ فقط با آیکن، اسم برای صفحه‌خوان؛
   دکمه‌ی کپی ایمیل نیست؛ کپسول ایمیل باریک‌تر. زیر ۳۷۵: متن ایمیل ۱۳ پیکسل (نه کمتر) و فاصله‌ها کمتر، تا در ۳۶۰ هم یک ردیف بماند. */
@media (max-width: 699px) {
  .connect__minor { column-gap: var(--sp-2); }
  .connect-minor__social { column-gap: var(--sp-2); }
  .connect-minor__link--mail { padding-inline: var(--sp-3); }
}
@media (max-width: 699px) { .connect .copy-btn { display: none; } }
.connect--sheet .copy-btn { display: none; }
@media (max-width: 699px) {
  .connect-minor__link--linkedin, .connect-minor__link--instagram { width: var(--tap); padding: 0; justify-content: center; flex: none; }
  .connect-minor__name { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
}
.connect--sheet .connect__minor, .connect--sheet .connect-minor__social { column-gap: var(--sp-2); }
.connect--sheet .connect-minor__link--mail { padding-inline: var(--sp-3); }
.connect--sheet .connect-minor__link--linkedin, .connect--sheet .connect-minor__link--instagram { width: var(--tap); padding: 0; justify-content: center; flex: none; }
.connect--sheet .connect-minor__name { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 374px) {
  .connect__minor, .connect-minor__social, .connect--sheet .connect__minor, .connect--sheet .connect-minor__social { column-gap: 6px; }
  .connect-minor__link--mail, .connect--sheet .connect-minor__link--mail { padding-inline: 10px; gap: 6px; }
  .connect-minor__link--mail .ltr { font-size: 0.8125rem; }
}

/* ---------- کپی شماره و ایمیل: فقط با نشانگر دقیق؛ در گوشی هیچ دکمه یا آیکن کپی نیست ---------- */
.copy-ico, .copy-btn { display: none; }
.copy-ico { position: relative; width: 16px; height: 16px; margin-inline-start: var(--sp-2); vertical-align: -2px; color: var(--c-cyan); }
.copy-ico .icon, .copy-btn .icon { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity var(--dur-hover) var(--ease), transform 300ms var(--spring); }
.copy-ico__ok, .copy-btn .copy-ico__ok { opacity: 0; transform: scale(0.4); color: var(--c-ok); }
.is-copied .copy-ico__copy { opacity: 0; transform: scale(0.4); }
.is-copied .copy-ico__ok { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) {
  .copy-ico { display: inline-block; opacity: 0; transition: opacity var(--dur-hover) var(--ease); }
  a:hover > .copy-ico, a:hover .copy-ico, a:focus-visible .copy-ico, .is-copied .copy-ico { opacity: 1; }
  .copy-btn {
    display: inline-grid; position: relative; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%;
    background: none; color: var(--c-text-3); cursor: pointer; transition: color var(--dur-hover) var(--ease), background-color var(--dur-hover) var(--ease);
  }
  .copy-btn .icon { inset: 8px; width: 16px; height: 16px; }
  .copy-btn:hover { color: var(--c-cyan); background: var(--c-tile-press); }
}

/* ---------- اعلان: ۸ پیکسل بالا آمدن و ظاهر شدن در ۲۰۰ms، ۲٫۲ ثانیه ---------- */
.toast {
  position: fixed; z-index: 70; inset-inline: 16px; bottom: calc(var(--mobile-bar-h) + 16px + env(safe-area-inset-bottom, 0px));
  margin-inline: auto; max-width: 26rem; width: max-content; display: flex; align-items: center; gap: var(--sp-2);
  background: var(--c-surface-3); color: var(--c-text); border: 1px solid var(--c-line-strong);
  border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); font-size: var(--fs-sm); box-shadow: var(--shadow-pop);
  opacity: 0; visibility: hidden; transform: translateY(8px); pointer-events: none;
  transition: opacity var(--dur-hover) var(--ease), transform var(--dur-hover) var(--ease), visibility 0s linear var(--dur-hover);
}
.toast.is-shown { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.toast__icon { display: none; width: 20px; height: 20px; color: var(--c-ok); stroke-width: 2; }
.toast--ok .toast__icon { display: block; }
@media (min-width: 1024px) { .toast { bottom: 24px; } }

/* ---------- برگه‌های تماس: شماره راست‌چین زیر برچسب، ساعت کاری زیرش ---------- */
.contact-option__value.ltr { align-self: flex-start; text-align: right; }
.contact-option__hours { font-size: var(--fs-sm); color: var(--c-text-3); }
.sheet .connect { margin-top: var(--sp-1); }

/* ---------- فوتر: زمینه‌ی یکدست، دو هاله‌ی ملایم، خط بالایی با گرادیان لوگو ---------- */
.site-footer {
  position: relative; border-top: 0;
  background:
    radial-gradient(60% 260px at 100% 0, rgb(44 198 224 / 0.14), transparent 70%),
    radial-gradient(60% 260px at 0 0, rgb(79 91 213 / 0.18), transparent 70%),
    linear-gradient(180deg, var(--c-footer-top) 0, var(--c-bg) 100%);
}
.site-footer::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: var(--grad-brand-line); }
.footer-brand { flex-direction: row; align-items: center; gap: var(--sp-4); max-width: 40rem; }
.footer-brand__logo { width: auto; height: 84px; flex: none; }
.footer-brand__text { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
@media (max-width: 479px) { .footer-brand { flex-direction: column; align-items: flex-start; } }
.footer-connect { margin-top: var(--sp-7); padding-top: var(--sp-6); border-top: 1px solid var(--c-line); }
.footer-connect .footer-title { margin-bottom: var(--sp-4); }

/* ---------- فرم: گرادیان پنجره (تأییدشده) و همان ظاهر برای فرم باز صفحه‌ی تماس ---------- */
.modal, .form-panel {
  background:
    radial-gradient(120% 55% at 100% 0%, rgb(44 198 224 / 0.14), transparent 70%),
    linear-gradient(165deg, rgb(44 198 224 / 0.05) 0%, rgb(79 91 213 / 0.15) 45%, rgb(79 91 213 / 0.12) 100%),
    var(--c-modal);
}
.modal__foot { background: transparent; border-top: 0; }
.modal__head { border-bottom-color: rgb(255 255 255 / 0.06); }
/* متنی که زیر دکمه‌ی ارسال اسکرول می‌شود در ۲۸ پیکسل آخر نرم محو می‌شود */
/* فضای خالی بالای دکمه‌ی ارسال (جواب صاحب پروژه به نقد دور دهم): جعبه‌ی پیام نتیجه تا خالی است فاصله نمی‌گیرد
   (در صفحه می‌ماند چون aria-live است)، فاصله‌ی پایین بدنه به اندازه‌ی همان محو شدن ۲۸ پیکسلی، و پای پنجره بالای دکمه ۸ پیکسل */
.modal__body > .form-result:empty { margin-top: calc(-1 * var(--sp-5)); }
.modal__body, .modal .modal__body { padding-bottom: 28px; }
.modal__foot { padding-top: var(--sp-2); }
.modal__body { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent); }
.form-panel { position: relative; border: 0; border-radius: var(--r-lg); }
.form-panel::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: var(--grad-brand-line);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
/* نوع ماده: شش گزینه، کامپیوتر ۳×۲ */
@media (min-width: 640px) {
  .choice-group--materials { display: grid; grid-template-columns: repeat(3, 1fr); }
  .choice-group--materials .choice > span { width: 100%; }
}
.choice-other { margin-top: var(--sp-3); }
/* «درباره‌ی ماده‌ی مورد نیازم مشاوره می‌خواهم»: برای خریداری که نوع ماده را نمی‌داند؛ یک ردیف کامل */
.choice--wide { grid-column: 1 / -1; flex-basis: 100%; }
.choice--wide > span { width: 100%; }

/* گزینه‌ها: لبه‌ی گرادیان در ۲۵۰ms ظاهر می‌شود؛ تیک داخل دایره‌ی گرادیان با فنر کوچک (۳۲۰ms) */
.choice > span { position: relative; }
.choice > span::before, .choice input[type="radio"] + span::before { content: none; }
.choice input:checked + span { background: var(--c-choice-on); border-color: transparent; }
.choice > span::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: var(--grad-brand-line); opacity: 0; transition: opacity 250ms var(--ease);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.choice input:checked + span::after { opacity: 1; }
.choice__mark { position: relative; width: 18px; height: 18px; flex: none; border-radius: 50%; border: 1.5px solid var(--c-text-3); transition: border-color var(--dur-hover) var(--ease); }
.choice__mark::before {
  content: ""; position: absolute; inset: -1.5px; border-radius: 50%; transform: scale(0); transition: transform 320ms var(--spring);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2304121C' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 11px no-repeat, var(--grad-primary);
}
.choice input:checked + span .choice__mark { border-color: transparent; }
/* نوع ماده چندانتخابی است: تیک مربعِ گوشه‌گرد (قرارداد آشنای «چند مورد»)؛ شهر تک‌انتخابی همان دایره (۲۲ آبان ۱۴۰۵) */
.choice input[type="checkbox"] + span .choice__mark, .choice input[type="checkbox"] + span .choice__mark::before { border-radius: 5px; }
.choice input:checked + span .choice__mark::before { transform: none; }
.field.has-error .choice > span { border-color: var(--c-error); }

/* «درخواست شما رسید»: تیکی که کشیده می‌شود (۴۰۰ms) */
.tick-draw path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: tick-draw 400ms var(--ease) 120ms forwards; }
@keyframes tick-draw { to { stroke-dashoffset: 0; } }

/* ---------- حرکت‌های ریز (فقط نشانگر دقیق؛ هر کدام یک بار در هر ورود نشانگر یا فوکوس) ---------- */
/* نوار نور دکمه‌ی اصلی: از راست به چپ */
.btn--primary::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / 0.45) 50%, transparent 65%) no-repeat;
  background-size: 250% 100%; background-position: -30% 0;
}
@keyframes btn-sheen-once { 0% { opacity: 1; background-position: -30% 0; } 100% { opacity: 1; background-position: 130% 0; } }
.btn--primary.is-loading::after { opacity: 1; animation: btn-sheen-rtl 1.3s linear infinite; }
@keyframes btn-sheen-rtl { from { background-position: -30% 0; } to { background-position: 130% 0; } }
/* موج‌های گوشی تلفن */
.icon--call { overflow: visible; }
.icon--call .wave { opacity: 0; transform-box: view-box; transform-origin: 13px 11px; }
@keyframes call-wave { 0% { opacity: 0; transform: scale(0.6); } 35% { opacity: 1; } 100% { opacity: 0; transform: scale(1.15); } }
/* تپش هدفون */
@keyframes headset-beat { 0%, 100% { transform: scale(1); } 20% { transform: scale(1.2); } 40% { transform: scale(1); } 60% { transform: scale(1.12); } 80% { transform: scale(1); } }
.icon--beat { transform-origin: 50% 55%; }

@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { filter: brightness(1.07); }
  .btn:hover .btn__arrow, .btn:focus-visible .btn__arrow { transform: translateX(-4px); }
  .btn--primary:hover::after, .btn--primary:focus-visible::after { animation: btn-sheen-once var(--dur-sheen) var(--ease) 1; }
  .btn--secondary:hover, .btn--contact:hover { background-color: var(--c-secondary-hover); color: var(--c-text); }
  .btn--call:hover .wave, .btn--call:focus-visible .wave { animation: call-wave 900ms var(--ease) 1 both; }
  .btn--call:hover .wave:nth-child(2), .btn--call:focus-visible .wave:nth-child(2) { animation-delay: 120ms; }
  .btn--call:hover .wave:nth-child(3), .btn--call:focus-visible .wave:nth-child(3) { animation-delay: 240ms; }
  .price--call:hover .wave, .price--call:focus-visible .wave { animation: call-wave 900ms var(--ease) 1 both; }
  .price--call:hover .wave:nth-child(2), .price--call:focus-visible .wave:nth-child(2) { animation-delay: 120ms; }
  .price--call:hover .wave:nth-child(3), .price--call:focus-visible .wave:nth-child(3) { animation-delay: 240ms; }
  .btn:hover .icon--beat, .btn:focus-visible .icon--beat { animation: headset-beat 750ms var(--ease) 1; }
  .connect-tile:hover, .connect-minor__link:hover {
    transform: translateY(-2px); filter: brightness(0.9); box-shadow: 0 12px 26px -12px var(--brand);
    transition-duration: 150ms;
  }
  .choice:hover > span { border-color: var(--c-text-3); color: var(--c-text); }
  .input:hover { border-color: var(--c-text-3); }
}
/* فوکوس صفحه‌کلید: همان حلقه‌ی فوکوس سایت (بدون جابه‌جایی) */
.connect-tile:focus-visible, .connect-minor__link:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 3px; }

/* ---------- لمس (بدون hover): هیچ حالت hover نمی‌ماند؛ فقط فشردن کوتاه ---------- */
@media (hover: none) {
  .btn--primary:hover { filter: none; }
  .btn--secondary:hover, .btn--contact:hover { background-color: transparent; background-image: var(--grad-secondary-fill); }
  .input:hover { border-color: var(--c-field-line); }
  .btn--ghost:hover { color: var(--c-text-2); }
  .icon-btn:hover { background: transparent; }
  .nav-link:hover, .nav-group__toggle:hover { color: var(--c-text); }
  .nav-sub a:hover { background: none; color: var(--c-text-2); }
  .contact-option:hover { border-color: var(--c-line); background: var(--c-surface-1); }
  .mobile-bar__btn:hover { color: var(--c-text-2); }
  .choice:hover > span { border-color: var(--c-field-line); color: var(--c-text-2); }
  .choice input:checked + span { color: var(--c-text); }
  .footer-links a:hover { color: var(--c-text-2); }
  .office a:hover { color: var(--c-text); }
  .price-row:has(.grade-name a):hover { background: none; }
  .price-row:hover .grade-name a { color: var(--c-text); }
  .price--call:hover { border-color: var(--c-line-strong); color: var(--c-text-2); }
  .price-card__title a:hover { color: var(--c-text); }
  .breadcrumb a:hover { color: var(--c-text-2); }
  .more-fields > summary:hover { color: var(--c-violet-text); }

  .btn { transition: filter var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease); }
  .btn--primary:active { filter: brightness(0.94); }
  .btn--secondary:active, .btn--contact:active { background-color: var(--c-secondary-hover); }
  .contact-option:active, .nav-sub a:not(.connect-tile):not(.connect-minor__link):active { background: var(--c-tile-press); }
  /* کاشی‌ها پیش از رها کردن: همان حالت پررنگ hover، بدون بالا آمدن */
  .connect-tile:active, .connect-minor__link:active, .connect-tile.is-pressed, .connect-minor__link.is-pressed { filter: brightness(0.9); box-shadow: 0 12px 26px -12px var(--brand); transition-duration: 150ms; }
  .mobile-bar__btn:active, .mobile-bar__btn.is-pressed { color: #fff; }
}

/* ==========================================================================
 * دور نهم اصلاحات (۳ آبان ۱۴۰۵): حرکت در لمس، نوار پایین گوشی (طرح «الف»)، گزینه‌های فرم در گوشی
 * ========================================================================== */
/* --mobile-bar-h (۶۸ = ۸ + ۵۲ + ۸) در tokens.css */

/* ---------- نوار پایین گوشی (دور دهم): سه دکمه‌ی یکدست؛ آیکن فیروزه‌ای بالا، نوشته زیرش، بدون زمینه و کپسول ---------- */
.mobile-bar {
  grid-template-columns: repeat(3, 1fr); align-items: center; gap: var(--sp-1);
  background: rgb(5 11 25 / 0.9); border-top: 0;
  padding: 8px max(8px, env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px));
}
.mobile-bar::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: var(--grad-brand-line); opacity: 0.75; pointer-events: none; }
.mobile-bar__btn { min-height: 52px; gap: 3px; color: var(--c-text-2); }
.mobile-bar__btn .icon { width: 24px; height: 24px; color: var(--c-cyan); overflow: visible; }
/* «تماس» مهم‌ترین کار است: شکل دکمه‌ها یکی است، فقط نوشته‌ی «تماس» سفید و نیمه‌پررنگ (جواب صاحب پروژه به نقد دور دهم) */
.mobile-bar__btn--call, .mobile-bar__btn--call:hover { color: var(--c-text); font-weight: var(--fw-semibold); }
/* پاکت نامه (ساده‌شده): در حالت عادی بسته؛ با .is-nudge در باز و دوباره بسته می‌شود و پاکت یک لحظه بزرگ و کوچک (۰٫۹ ثانیه)، بدون برگه */
.icon--mail .flap { transform-box: view-box; transform-origin: 12px 7.6px; }
.icon--mail { transform-origin: 50% 60%; }
.is-nudge .icon--mail { animation: mail-pop 900ms var(--ease) 1; }
.is-nudge .icon--mail .flap { animation: mail-flap 900ms var(--ease) 1; }
@keyframes mail-flap { 0% { transform: none; } 25%, 40% { transform: scaleY(-1); } 65%, 100% { transform: none; } }
@keyframes mail-pop { 0%, 62%, 100% { transform: none; } 80% { transform: scale(1.14); } }

/* ---------- فرم در گوشی: هیچ گزینه‌ای دوخطی نشود ---------- */
@media (max-width: 479px) { .choice-group--cities { grid-template-columns: 1fr; } }
/* نوع ماده زیر ۶۴۰: دوستونه (پلی‌اتیلن و پلی‌پروپیلن، پلی‌استایرن و ABS، پلی‌کربنات و سایر)، گزینه‌ی مشاوره ردیف کامل */
@media (max-width: 639px) {
  .choice-group--materials { display: grid; grid-template-columns: 1fr 1fr; }
  .choice-group--materials .choice > span { width: 100%; }
}
.choice > span { white-space: nowrap; }

/* ---------- حرکت‌ها با محرک خودشان (همه‌ی دستگاه‌ها، هر دو حالت «کاهش حرکت») ----------
 * .is-nudge را site.js می‌گذارد: هنگام فشردن در لمس، و جلب توجه خودکار؛ همان حرکت hover یک بار. */
.btn--primary.is-nudge::after { animation: btn-sheen-once var(--dur-sheen) var(--ease) 1; }
.is-nudge .btn__arrow { animation: arrow-nudge 600ms var(--ease) 1; }
@keyframes arrow-nudge { 40% { transform: translateX(-4px); } }
.is-nudge .wave { animation: call-wave 900ms var(--ease) 1 both; }
.is-nudge .wave:nth-child(2) { animation-delay: 120ms; }
.is-nudge .wave:nth-child(3) { animation-delay: 240ms; }
.is-nudge .icon--beat { animation: headset-beat 750ms var(--ease) 1; }

/* پنل «ارتباط با ما» داخل منوی هدر: قانون عمومی لینک‌های منو (.nav-sub a در base.css: رنگ، زمینه‌ی hover، چیدمان دوطرفه)
   روی کاشی‌ها و کپسول‌ها اثر نکند */
.nav-sub .connect-tile, .nav-sub .connect-tile:hover {
  justify-content: center; min-height: 64px; padding: var(--sp-3) var(--sp-4); border-radius: 16px; background: var(--brand); color: #fff;
}
.nav-sub .connect-minor__link, .nav-sub .connect-minor__link:hover {
  justify-content: center; padding: 0 var(--sp-4); border-radius: var(--r-pill); background: var(--grad-primary); color: var(--c-on-primary);
}
.nav-sub .connect-minor__link--linkedin, .nav-sub .connect-minor__link--linkedin:hover { background: var(--brand); color: #fff; }
.nav-sub .connect-minor__link--instagram, .nav-sub .connect-minor__link--instagram:hover { background: var(--grad-instagram); color: #fff; }