/* SaminDP — سایت عمومی. همه‌ی رنگ‌ها، فاصله‌ها و شعاع‌ها از styles/samindp.tokens.css می‌آیند.
   موبایل‌محور؛ نقاط شکست فقط 640 / 768 / 1024 / 1280. */

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0; background: var(--color-bg-primary); color: var(--color-text-primary);
  font-size: var(--font-size-body); line-height: var(--line-height-body);
  -webkit-font-smoothing: antialiased; letter-spacing: 0;
}
h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
p, li, dd, summary { text-wrap: pretty; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-underline-offset: 5px; }
img { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; letter-spacing: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
::selection { background: var(--color-primary-100); color: var(--color-primary-900); }
.site-foot ::selection { background: var(--color-brand-accent); color: var(--color-primary-900); }
html { scrollbar-color: var(--color-primary-300) var(--color-neutral-100); caret-color: var(--color-brand-primary); accent-color: var(--color-brand-primary); }
html { font-variant-numeric: tabular-nums; }
address { font-style: normal; }
svg.i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.container { width: 100%; max-width: calc(var(--container-content) + 2 * var(--page-padding)); margin-inline: auto; padding-inline: var(--page-padding); }
.skip-link {
  position: absolute; inset-inline-start: var(--spacing-md); top: -100px; z-index: 100;
  padding: var(--spacing-sm) var(--spacing-md); border-radius: var(--radius-md);
  background: var(--color-brand-primary); color: var(--color-neutral-white); text-decoration: none;
}
.skip-link:focus { top: var(--spacing-sm); }
.muted { color: var(--color-text-secondary); }

/* ---------------------------------------------------------------- type */
.display { font-size: var(--font-size-display); line-height: var(--line-height-display); font-weight: var(--font-weight-bold); }
.h1 { font-size: var(--font-size-h1); line-height: var(--line-height-h1); font-weight: var(--font-weight-bold); }
.h2 { font-size: var(--font-size-h2); line-height: var(--line-height-h2); font-weight: var(--font-weight-bold); }
.h3 { font-size: var(--font-size-h3); line-height: var(--line-height-h3); font-weight: var(--font-weight-semibold); }
.h4 { font-size: var(--font-size-h4); line-height: var(--line-height-h4); font-weight: var(--font-weight-semibold); }
.h5 { font-size: var(--font-size-h5); line-height: var(--line-height-h5); font-weight: var(--font-weight-semibold); }
.h6 { font-size: var(--font-size-h6); line-height: var(--line-height-h6); font-weight: var(--font-weight-semibold); }
.lead { font-size: var(--font-size-body-lg); line-height: var(--line-height-body-lg); color: var(--color-text-secondary); max-width: var(--container-reading); }


/* ---------------------------------------------------------------- buttons & links */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-xs);
  min-height: 44px; padding-inline: var(--spacing-md); border: 1px solid transparent; border-radius: var(--radius-md);
  font-size: var(--font-size-button); line-height: var(--line-height-button); font-weight: var(--font-weight-semibold);
  text-decoration: none; white-space: nowrap; cursor: pointer; background: transparent; color: inherit;
  transition: background-color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard);
}
.btn-sm { min-height: 36px; padding-inline: var(--spacing-sm); }
.btn-sm svg.i { width: 16px; height: 16px; }
.btn-lg { min-height: 52px; padding-inline: 20px; gap: 10px; }
.btn-block { width: 100%; }
.btn-primary { background: var(--color-brand-primary); border-color: var(--color-brand-primary); color: var(--color-neutral-white); }
.btn-primary:hover { background: var(--color-brand-primary-hover); border-color: var(--color-brand-primary-hover); }
.btn-primary:active { background: var(--color-brand-primary-active); border-color: var(--color-brand-primary-active); }
.btn-secondary { background: var(--color-surface); border-color: var(--color-brand-primary); color: var(--color-brand-primary); }
.btn-secondary:hover { background: var(--color-brand-primary-light); }
.btn-secondary:active { background: var(--color-secondary-steel-light); }
.btn-ghost { color: var(--color-brand-primary); }
.btn-ghost:hover { background: var(--color-neutral-100); }
.btn-ghost:active { background: var(--color-neutral-200); }
.btn-danger-ghost { color: var(--color-error-700); }
.btn-danger-ghost:hover { background: var(--color-error-50); }
/* دکمه‌ی نارنجی فقط روی سطح تیره؛ متن Navy روی Orange کنتراست AA دارد */
.btn-accent { background: var(--color-brand-accent); border-color: var(--color-brand-accent); color: var(--color-primary-900); }
.btn-accent:hover { background: var(--color-brand-accent-active); border-color: var(--color-brand-accent-active); }
.btn:disabled, .btn[aria-disabled="true"] { background: var(--color-neutral-200); border-color: var(--color-neutral-200); color: var(--color-text-disabled); cursor: not-allowed; }
.icon-btn {
  width: 44px; height: 44px; display: grid; place-items: center; flex: none; padding: 0; cursor: pointer;
  border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-icon-primary);
  transition: background-color var(--motion-fast) var(--ease-standard);
}
.icon-btn:hover { background: var(--color-surface-hover); }
.link-arrow {
  display: inline-flex; align-items: center; gap: var(--spacing-xs); min-height: 44px;
  font-weight: var(--font-weight-semibold); font-size: var(--font-size-button); color: var(--color-brand-primary); text-decoration: none;
}
.link-arrow:hover { text-decoration: underline; text-underline-offset: 6px; }
.link-arrow svg.i { transition: transform var(--motion-fast) var(--ease-standard); }
.link-arrow:hover svg.i { transform: translateX(-3px); }
.link-on-dark { color: var(--color-neutral-white); }

/* ---------------------------------------------------------------- header */
.site-head { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--color-neutral-white) 92%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--color-border); }
.head-in { display: flex; align-items: center; gap: var(--spacing-md); min-height: 64px; }
.logo { display: flex; margin-inline-end: auto; text-decoration: none; border-radius: var(--radius-sm); }
.lockup { display: inline-flex; align-items: center; gap: 10px; color: var(--color-brand-primary); }
.site-foot .lockup { color: var(--color-neutral-white); }
.lockup img { width: 36px; height: auto; }
.lockup-text { display: grid; line-height: 1.15; }
.lockup-text b { font-size: var(--font-size-h6); font-weight: var(--font-weight-extrablack); white-space: nowrap; }
.lockup-text span { font-size: var(--font-size-caption); font-weight: var(--font-weight-semibold); white-space: nowrap; }
.nav { display: none; }
.head-cta { display: none; }
@media (min-width: 640px) { .head-cta { display: inline-flex; } }
@media (min-width: 1024px) {
  .head-in { min-height: 72px; }
  .lockup img { width: 40px; }
  .logo { margin-inline-end: 0; }
  .nav { display: flex; align-self: stretch; gap: 28px; margin-inline: auto; }
  .nav a {
    position: relative; display: flex; align-items: center;
    font-size: var(--font-size-nav); line-height: var(--line-height-nav); font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary); text-decoration: none; transition: color var(--motion-fast) var(--ease-standard);
  }
  .nav a:hover, .nav a[aria-current] { color: var(--color-brand-primary); }
  .nav a[aria-current]::after { content: ""; position: absolute; inset-inline: 0; bottom: -1px; height: 2px; background: var(--color-brand-accent); }
  .menu-btn { display: none; }
}

/* ---------------------------------------------------------------- drawer */
.drawer {
  position: fixed; inset-block: 0; inset-inline-start: auto; inset-inline-end: 0; margin: 0;
  width: min(360px, 88vw); max-width: none; height: 100dvh; max-height: none; padding: 0;
  border: 0; border-inline-start: 1px solid var(--color-border);
  background: var(--color-surface); color: var(--color-text-primary); box-shadow: var(--shadow-md);
}
.drawer[open] { display: flex; flex-direction: column; animation: drawer-in var(--motion-slow) var(--ease-enter); }
.drawer::backdrop { background: color-mix(in srgb, var(--color-neutral-black) 40%, transparent); }
@keyframes drawer-in { from { transform: translateX(-100%); } }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: var(--spacing-sm) var(--spacing-md); min-height: 64px; border-bottom: 1px solid var(--color-border); }
.drawer-head img { width: 30px; height: 33px; }
.drawer-nav { display: flex; flex-direction: column; padding: var(--spacing-xs) var(--spacing-md); }
.drawer-nav a {
  display: flex; align-items: center; min-height: 52px; border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-nav); font-weight: var(--font-weight-medium); text-decoration: none;
}
.drawer-nav a[aria-current] { color: var(--color-brand-primary); font-weight: var(--font-weight-bold); }
.drawer-foot { margin-top: auto; padding: var(--spacing-md) var(--spacing-md) calc(var(--spacing-md) + env(safe-area-inset-bottom)); }

/* ---------------------------------------------------------------- cards & small parts */
.card { position: relative; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 20px; }
@media (min-width: 768px) { .card { padding: var(--spacing-lg); } }
.card-link { transition: transform var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard); }
.card-link:hover { transform: translateY(-2px); border-color: var(--color-border-strong); }
.stretched { text-decoration: none; }
.stretched::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card-link:has(.stretched:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; }
@supports selector(:has(*)) { .card-link .stretched:focus-visible { outline: none; } }
.card-arrow { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-inline-start: -12px; color: var(--color-brand-primary); }
.tags { display: flex; flex-wrap: wrap; gap: var(--spacing-xs); }
.tags li, .tags a {
  display: inline-flex; align-items: center; min-height: 28px; padding-inline: 10px; border-radius: var(--radius-sm);
  background: var(--color-bg-tertiary); color: var(--color-neutral-700);
  font-size: var(--font-size-body-sm); line-height: 1.5; text-decoration: none;
}
.tags a { background: var(--color-brand-primary-light); color: var(--color-brand-primary); min-height: 36px; }
.tags a:hover { background: var(--color-secondary-steel-light); }
.tags li:has(a) { padding: 0; background: none; }
.badge { display: inline-flex; align-items: center; min-height: 22px; padding-inline: var(--spacing-xs); border-radius: var(--radius-sm); background: var(--color-brand-primary-light); color: var(--color-brand-primary); font-size: var(--font-size-caption); font-weight: var(--font-weight-semibold); }
.status { display: inline-flex; align-items: center; gap: 6px; font-size: var(--font-size-body-sm); font-weight: var(--font-weight-medium); }
.status::before { content: ""; width: 8px; height: 8px; border-radius: var(--radius-full); background: currentColor; }
.status-on { color: var(--color-success-700); }
.status-off { color: var(--color-error-700); }
.status-wait { color: var(--color-warning-700); }
.list-check { display: grid; gap: var(--spacing-xs); }
.list-check li { display: flex; gap: var(--spacing-xs); align-items: flex-start; }
.list-check svg.i { margin-top: .3em; color: var(--color-brand-primary); }
.list-marker { display: grid; gap: var(--spacing-sm); }
.list-marker li { display: flex; gap: var(--spacing-sm); align-items: flex-start; }
/* نشانه‌ی ۳۰ درجه برگرفته از مسیر منفی لوگو */
.list-marker li::before { content: ""; flex: none; width: 14px; height: 4px; margin-top: .85em; border-radius: 1px; background: var(--color-brand-accent); transform: rotate(-30deg); }
.list-steps { display: grid; gap: var(--spacing-sm); counter-reset: st; }
.list-steps li { display: flex; gap: var(--spacing-sm); counter-increment: st; }
.list-steps li::before { content: counter(st, persian); flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-sm); background: var(--color-brand-primary-light); color: var(--color-brand-primary); font-weight: var(--font-weight-semibold); font-size: var(--font-size-body-sm); }
.ext-links { display: flex; flex-wrap: wrap; gap: var(--spacing-xs) var(--spacing-lg); margin-top: var(--spacing-md); }
.ext-links a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--color-brand-primary); font-weight: var(--font-weight-semibold); text-decoration: none; }
.ext-links a:hover { text-decoration: underline; text-underline-offset: 4px; }
.ext-links svg.i { width: 16px; height: 16px; }
.note { display: flex; gap: var(--spacing-xs); align-items: center; margin-top: var(--spacing-xl); color: var(--color-text-secondary); font-size: var(--font-size-body-sm); }
.note svg.i { width: 18px; height: 18px; margin-top: .2em; }
.note a { color: var(--color-brand-primary); font-weight: var(--font-weight-semibold); display: inline-flex; align-items: center; min-height: 44px; }
.note span { display: inline; }
.empty { color: var(--color-text-secondary); padding-block: var(--spacing-md); }

/* alerts: رنگ + آیکون + متن، نه فقط رنگ */
.alert { display: flex; gap: var(--spacing-sm); align-items: flex-start; padding: var(--spacing-md); border: 1px solid; border-radius: var(--radius-md); font-size: var(--font-size-body-sm); line-height: var(--line-height-body-sm); margin-bottom: var(--spacing-lg); }
.alert > div { display: grid; gap: 2px; min-width: 0; flex: 1; }
.alert strong { font-weight: var(--font-weight-semibold); font-size: var(--font-size-body); }
.alert svg.i { margin-top: 2px; }
.alert:focus { outline: none; }
.alert:focus-visible { outline: 2px solid var(--color-focus); }
.alert-success { border-color: var(--color-success-border); background: var(--color-success-50); color: var(--color-success-700); }
.alert-error { border-color: var(--color-error-border); background: var(--color-error-50); color: var(--color-error-700); }
.alert-info { border-color: var(--color-info-border); background: var(--color-info-50); color: var(--color-info-700); }

/* ---------------------------------------------------------------- sections */
.section { padding-block: var(--section-space); }
.section-tight { padding-block: var(--spacing-2xl); }
.section-alt { border-top: 1px solid var(--color-border); }
.sec-head { display: grid; gap: var(--spacing-sm); margin-bottom: var(--spacing-2xl); }
.sec-head-main { display: grid; gap: var(--spacing-xs); max-width: var(--container-reading); }
.sec-lead { color: var(--color-text-secondary); font-size: var(--font-size-body); line-height: var(--line-height-body); }
.sec-link { justify-self: start; }
.sec-foot { margin-top: var(--spacing-lg); color: var(--color-text-secondary); font-size: var(--font-size-body-sm); line-height: var(--line-height-body-sm); }
@media (min-width: 1024px) {
  .sec-head { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .sec-head .sec-link { justify-self: end; margin-bottom: 4px; }
}
.sec-head .h2 { font-weight: var(--font-weight-extrablack); }


/* ---------------------------------------------------------------- world: سفید، سرمه‌ای، یک اقدام نارنجی */
:root { --ease-out-expo: cubic-bezier(.16, 1, .3, 1); --frame-shadow: 0 30px 60px -30px rgba(12,41,92,.35), 0 8px 20px -12px rgba(12,41,92,.18); }
.status-tag { display: inline-flex; align-items: center; height: 22px; padding-inline: 8px; margin-inline-start: 8px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); font-size: var(--font-size-caption); font-weight: var(--font-weight-medium); color: var(--color-text-secondary); }

/* اسکرین و قاب */
.shot { display: block; overflow: hidden; aspect-ratio: 16 / 10; background: var(--color-bg-tertiary); }
.shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.shot.is-crop-top img { transform: scale(1.07); transform-origin: 50% 100%; }
.frame { display: block; overflow: hidden; background: var(--color-surface); border-radius: var(--radius-md); box-shadow: var(--frame-shadow); }
.frame-bar { display: flex; gap: 6px; padding: 9px 12px; background: var(--color-bg-secondary); border-bottom: 1px solid var(--color-border); direction: ltr; }
.frame-bar i { width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--color-neutral-300); }

/* ---------------------------------------------------------------- hero */
.hero { border-bottom: 1px solid var(--color-border); }
.hero-in { display: grid; gap: var(--spacing-xl); padding-block: var(--spacing-2xl) var(--spacing-xl); }
.hero-copy { display: grid; justify-items: start; align-content: center; }
.hero-copy .lead { max-width: 44ch; }
.hero-copy .display { font-weight: var(--font-weight-extrablack); max-width: 22ch; }
.hero-copy .lead { margin-top: var(--spacing-md); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-sm) var(--spacing-lg); margin-top: var(--spacing-xl); }
.hero .actions { margin-top: var(--spacing-lg); }
.hero-meet { display: flex; align-items: center; gap: var(--spacing-xs); margin-top: var(--spacing-md); font-size: var(--font-size-body-sm); line-height: var(--line-height-body-sm); color: var(--color-text-secondary); }
.hero-meet svg.i { width: 18px; height: 18px; color: var(--color-brand-primary); }
.hero-media { display: block; border-radius: var(--radius-md); }
.hero-frame { animation: settle 1.1s var(--ease-out-expo) both; }
@keyframes settle { from { translate: 0 24px; filter: blur(4px); } }
@media (min-width: 1024px) {
  .hero-in { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: center; gap: var(--spacing-2xl); padding-block: var(--spacing-3xl); }
  .hero-media { margin-inline-end: calc(-1 * var(--page-padding)); }
}
@media (min-width: 1280px) { .hero-copy .display { font-size: 50px; line-height: 1.22; } .hero-in { gap: var(--spacing-3xl); } .hero-media { margin-inline-end: -48px; } }
@media (max-width: 639px) { .hero-copy .display { font-size: 34px; line-height: 1.25; } }
.clients { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--spacing-lg); padding-block: var(--spacing-md); border-top: 1px solid var(--color-border); }
.clients a { display: grid; gap: 1px; min-height: 52px; align-content: center; text-decoration: none; color: inherit; }
.clients b { font-weight: var(--font-weight-bold); }
.clients span { font-size: var(--font-size-caption); line-height: 1.5; color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clients a:hover b { color: var(--color-brand-primary); }
@media (min-width: 768px) { .clients { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .clients { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* ---------------------------------------------------------------- solutions: سه ستون با خط */
.sol-list { display: grid; border-top: 1px solid var(--color-border-strong); }
.sol-row { position: relative; display: grid; gap: var(--spacing-sm); padding-block: var(--spacing-lg); border-bottom: 1px solid var(--color-border); }
.sol-icon { display: grid; place-items: center; width: 28px; height: 28px; color: var(--color-brand-primary); }
.sol-icon svg.i { width: 24px; height: 24px; }
.sol-main { display: grid; gap: var(--spacing-xs); min-width: 0; }
.sol-problem { font-size: var(--font-size-h5); line-height: var(--line-height-h5); font-weight: var(--font-weight-bold); max-width: 26ch; }
.sol-problem a { color: inherit; }
.sol-summary { color: var(--color-text-secondary); max-width: 52ch; }
.sol-outputs { display: grid; gap: var(--spacing-2xs); font-size: var(--font-size-body-sm); line-height: var(--line-height-body-sm); color: var(--color-text-secondary); }
.sol-outputs li { display: flex; gap: var(--spacing-xs); align-items: baseline; }
.sol-outputs li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--color-brand-accent); transform: translateY(-2px); }
.sol-name { display: inline-flex; align-items: center; gap: var(--spacing-xs); min-height: 44px; font-weight: var(--font-weight-semibold); color: var(--color-brand-primary); }
.sol-name svg.i { transition: transform var(--motion-fast) var(--ease-standard); }
.sol-row:hover .sol-name svg.i { transform: translateX(-3px); }
.sol-row:hover .sol-problem { color: var(--color-brand-primary); }
@media (min-width: 1024px) {
  .sol-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-2xl); border-top: 0; }
  .sol-row { grid-template-rows: auto auto 1fr auto; align-content: start; padding: var(--spacing-lg) 0 0; border-bottom: 0; border-top: 1px solid var(--color-border-strong); }
}
.sol-row:has(.stretched:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 4px; }
@supports selector(:has(*)) { .sol-row .stretched:focus-visible { outline: none; } }

/* ---------------------------------------------------------------- work: ردیف‌های بزرگ و شبکه */
.work-rows { display: grid; gap: var(--spacing-2xl); }
.work-row { position: relative; display: grid; gap: var(--spacing-lg); }
.work-row.no-media { padding-top: var(--spacing-lg); border-top: 1px solid var(--color-border-strong); }
.work-row-media { display: block; border-radius: var(--radius-md); }
.work-row-body { display: grid; justify-items: start; gap: var(--spacing-sm); align-content: center; }
.work-sector { display: inline-flex; align-items: center; font-size: var(--font-size-body-sm); font-weight: var(--font-weight-medium); color: var(--color-secondary-steel); }
.work-row-title { font-size: var(--font-size-h3); line-height: var(--line-height-h3); font-weight: var(--font-weight-extrablack); }
.work-row-title a { color: inherit; }
.work-row-text { color: var(--color-text-secondary); max-width: 44ch; }
.work-scope { display: grid; gap: var(--spacing-2xs); font-size: var(--font-size-body-sm); line-height: var(--line-height-body-sm); }
.work-scope li { display: flex; gap: var(--spacing-xs); align-items: baseline; }
.work-scope li::before { content: ""; flex: none; width: 14px; height: 2px; background: var(--color-brand-accent); transform: translateY(-4px); }
.work-row .frame { transition: transform var(--motion-slow) var(--ease-out-expo), box-shadow var(--motion-slow) var(--ease-out-expo); }
.work-row:hover .frame { transform: translateY(-4px); box-shadow: 0 40px 70px -32px rgba(12,41,92,.4), 0 10px 24px -12px rgba(12,41,92,.2); }
.work-row:has(.stretched:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 6px; border-radius: var(--radius-md); }
@supports selector(:has(*)) { .work-row .stretched:focus-visible { outline: none; } }
@media (min-width: 1024px) {
  .work-row { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "media body"; gap: var(--spacing-3xl); align-items: center; }
  .work-row-media { grid-area: media; }
  .work-row-body { grid-area: body; }
  .work-rows > .work-row:nth-child(even) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "body media"; }
  .work-row.no-media, .work-rows > .work-row.no-media:nth-child(even) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "body"; }
  .work-row.no-media .work-row-body { max-width: 62ch; }
}
.work-grid { display: grid; gap: var(--spacing-xl) var(--grid-gutter); margin-top: var(--spacing-2xl); }
@media (min-width: 640px) { .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .work-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.work-cell-link { display: grid; gap: var(--spacing-sm); color: inherit; text-decoration: none; border-radius: var(--radius-md); }
.work-cell-link .frame { transition: transform var(--motion-slow) var(--ease-out-expo); }
.work-cell-link:hover .frame { transform: translateY(-4px); }
.work-cell-body { display: grid; gap: 2px; }
.work-cell.no-media { display: grid; align-content: end; }
.work-cell.no-media .work-cell-link { padding-top: var(--spacing-md); border-top: 1px solid var(--color-border-strong); }
.work-cell-title { font-size: var(--font-size-h6); line-height: var(--line-height-h6); font-weight: var(--font-weight-bold); }
.work-cell-link:hover .work-cell-title { color: var(--color-brand-primary); }
.work-cell-text { color: var(--color-text-secondary); font-size: var(--font-size-body-sm); line-height: var(--line-height-body-sm); }

/* ---------------------------------------------------------------- مراحل */
.path { display: grid; gap: var(--spacing-lg); counter-reset: none; }
.path-step { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: var(--spacing-2xs) var(--spacing-sm); padding-top: var(--spacing-md); border-top: 1px solid var(--color-border-strong); }
.path-num { grid-row: span 2; font-size: var(--font-size-h4); line-height: 1; font-weight: var(--font-weight-extrablack); color: var(--color-brand-primary); font-variant-numeric: tabular-nums; }
.path-title { font-size: var(--font-size-h6); line-height: var(--line-height-h6); font-weight: var(--font-weight-bold); }
.path-step p { color: var(--color-text-secondary); font-size: var(--font-size-body-sm); line-height: var(--line-height-body-sm); }
@media (min-width: 640px) { .path { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .path { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------------------------------------------------------------- اصول */
.principles { display: grid; gap: var(--spacing-xl); }
.pr-intro { display: grid; justify-items: start; gap: var(--spacing-sm); }
.pr-intro p { color: var(--color-text-secondary); max-width: 36ch; }
.pr-list { display: grid; gap: var(--spacing-lg); }
.pr-item { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--spacing-2xs) var(--spacing-sm); padding-top: var(--spacing-md); border-top: 1px solid var(--color-border-strong); }
.pr-icon { width: 24px; height: 24px; color: var(--color-brand-primary); margin-top: 2px; }
.pr-title { font-size: var(--font-size-h6); line-height: var(--line-height-h6); font-weight: var(--font-weight-bold); }
.pr-item p { grid-column: 2; color: var(--color-text-secondary); font-size: var(--font-size-body-sm); line-height: var(--line-height-body-sm); }
@media (min-width: 640px) { .pr-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .principles { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--spacing-3xl); } }

/* ---------------------------------------------------------------- نوار تیره‌ی پایانی */
.cta-dark { background: var(--color-brand-primary); color: var(--color-neutral-white); }
.cta-in { display: grid; justify-items: start; gap: var(--spacing-md); padding-block: var(--section-space); }
.cta-in .h2 { font-weight: var(--font-weight-extrablack); max-width: 20ch; }
.cta-in p { color: var(--color-primary-100); max-width: 52ch; }
.cta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-sm) var(--spacing-lg); margin-top: var(--spacing-xs); }
.cta-dark :focus-visible { outline-color: var(--color-brand-accent); }
.cta-dark ::selection { background: var(--color-brand-accent); color: var(--color-primary-900); }

/* ---------------------------------------------------------------- صفحه‌های داخلی */
.feat-sector { display: inline-flex; align-items: center; font-size: var(--font-size-body-sm); font-weight: var(--font-weight-medium); color: var(--color-secondary-steel); }
.feat-sector svg.i { width: 16px; height: 16px; margin-inline-end: 6px; }
.ph-grid { display: grid; gap: var(--spacing-xl); }
@media (min-width: 1024px) { .ph-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: center; gap: var(--spacing-3xl); } }
.work-list { display: grid; gap: var(--grid-gutter); }
@media (min-width: 768px) { .work-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.work-item { display: grid; gap: var(--spacing-sm); padding: var(--spacing-xs); }
.work-item-body { display: grid; gap: var(--spacing-2xs); padding: 0 var(--spacing-xs) var(--spacing-xs); }
.work-item-body p:not(.feat-sector) { font-size: var(--font-size-body-sm); line-height: var(--line-height-body-sm); color: var(--color-text-secondary); }
.work-thumb { display: block; overflow: hidden; aspect-ratio: 16 / 10; border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-bg-secondary); }
.work-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* ---------------------------------------------------------------- reveal: یک بار، ملایم */
[data-reveal] { opacity: 1; }
.js [data-reveal] { opacity: 0; translate: 0 16px; transition: opacity .7s var(--ease-out-expo), translate .7s var(--ease-out-expo); }
.js [data-reveal].is-in { opacity: 1; translate: 0 0; }

/* ---------------------------------------------------------------- footer */
.site-foot { background: var(--color-primary-900); color: var(--color-primary-100); padding-block: var(--spacing-2xl) var(--spacing-xl); }
.site-foot :focus-visible { outline-color: var(--color-brand-accent); }
.foot-tag { font-weight: var(--font-weight-bold); color: var(--color-neutral-white); }
.foot-in { display: grid; gap: var(--spacing-lg); justify-items: start; }
.foot-logo { display: inline-flex; text-decoration: none; border-radius: var(--radius-sm); }
.foot-nav { display: flex; flex-wrap: wrap; gap: 0 var(--spacing-lg); }
.foot-nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-primary-100); font-weight: var(--font-weight-medium); text-decoration: none; }
.foot-nav a:hover { color: var(--color-neutral-white); text-decoration: underline; }
.foot-copy { font-size: var(--font-size-body-sm); color: var(--color-primary-300); }
.foot-copy a { color: var(--color-primary-100); text-decoration: none; }
.foot-copy a:hover { text-decoration: underline; }
.foot-contact { display: grid; font-size: var(--font-size-body-sm); line-height: var(--line-height-body-sm); color: var(--color-primary-100); }
.foot-contact > a, .foot-contact > span { display: inline-flex; align-items: center; gap: var(--spacing-xs); min-height: 44px; text-decoration: none; }
.foot-contact > a:hover { color: var(--color-neutral-white); text-decoration: underline; }
.foot-contact svg.i { width: 18px; height: 18px; color: var(--color-brand-accent); }
@media (min-width: 1024px) {
  .foot-in { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "logo nav" "tag tag" "contact copy"; align-items: center; row-gap: var(--spacing-sm); }
  .foot-logo { grid-area: logo; }
  .foot-tag { grid-area: tag; }
  .foot-nav { grid-area: nav; justify-self: end; }
  .foot-contact { grid-area: contact; display: flex; flex-wrap: wrap; gap: 0 var(--spacing-lg); }
  .foot-copy { grid-area: copy; justify-self: end; }
}

/* ---------------------------------------------------------------- mobile action bar */
.mbar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 40; display: flex; gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--page-padding) calc(var(--spacing-xs) + env(safe-area-inset-bottom));
  background: var(--color-bg-primary); border-top: 1px solid var(--color-border);
  box-shadow: 0 -10px 24px -14px rgba(5,7,10,.22);
  transition: transform var(--motion-slow) var(--ease-standard), visibility 0s;
  animation: mbar-in var(--motion-slow) var(--ease-enter) .5s backwards;
}
.mbar .btn { flex: 1; }
.mbar-call { width: 52px; height: 52px; color: var(--color-brand-primary); }
.mbar.is-off { transform: translateY(110%); visibility: hidden; transition: transform var(--motion-slow) var(--ease-standard), visibility 0s var(--motion-slow); }
@keyframes mbar-in { from { transform: translateY(110%); } }
@media (max-width: 639px) { body:has(.mbar) .site-foot { padding-bottom: calc(var(--spacing-xl) + 72px); } }
@media (min-width: 640px) { .mbar { display: none; } }

/* ---------------------------------------------------------------- inner pages */
.page-head { padding-block: var(--spacing-xl) var(--spacing-2xl); border-bottom: 1px solid var(--color-border); }
.page-head .h1 { font-weight: var(--font-weight-extrablack); max-width: 24ch; }
.page-head .h1 { margin-block: var(--spacing-xs) var(--spacing-sm); }
.page-head .feat-sector + .h1 { margin-top: var(--spacing-2xs); }
.page-problem { max-width: 36ch; margin-bottom: var(--spacing-xs); font-size: var(--font-size-h5); line-height: var(--line-height-h5); font-weight: var(--font-weight-semibold); }
.page-empty { border-bottom: 0; padding-block: var(--spacing-4xl); min-height: 50vh; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: var(--spacing-2xs) var(--spacing-xs); font-size: var(--font-size-body-sm); color: var(--color-neutral-500); }
.crumbs li { display: inline-flex; align-items: center; gap: var(--spacing-xs); }
.crumbs li + li::before { content: "/"; color: var(--color-neutral-400); }
.crumbs a { color: var(--color-text-secondary); text-decoration: none; display: inline-flex; min-height: 32px; align-items: center; }
.crumbs a:hover { color: var(--color-brand-primary); text-decoration: underline; }
.crumbs [aria-current] { color: var(--color-neutral-800); }
.two-col { display: grid; gap: var(--spacing-xl); }
@media (min-width: 1024px) {
  .two-col { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--spacing-3xl); align-items: start; }
  .two-col.work-detail { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}
.work-detail .card-note { margin-top: 0; }
.card-note .btn { margin-top: var(--spacing-xs); }
.card-note-foot { margin-top: var(--spacing-xs); font-size: var(--font-size-body-sm); line-height: var(--line-height-body-sm); color: var(--color-text-secondary); }
.card-note-foot a { color: var(--color-brand-primary); font-weight: var(--font-weight-semibold); }
.prose { display: grid; gap: var(--spacing-sm); max-width: 36rem; }
.prose p { color: var(--color-text-secondary); }
.prose .h5 { margin-top: var(--spacing-md); }
.prose .h5:first-child { margin-top: 0; }
.deliver-grid { display: grid; gap: var(--grid-gutter); }
@media (min-width: 768px) { .deliver-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .deliver-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.deliver-group { padding-top: var(--spacing-md); border-top: 2px solid var(--color-brand-primary); }
.deliver-grid .h6 { margin-bottom: var(--spacing-sm); }
.deliver-grid .list-check { font-size: var(--font-size-body-sm); line-height: var(--line-height-body-sm); }
.other-links { display: flex; flex-wrap: wrap; gap: 0 var(--spacing-xl); margin-top: var(--spacing-xs); }
/* تخصص‌ها: سه گروه دوتایی، بدون کارت */
.exp-groups { display: grid; gap: var(--spacing-2xl); }
@media (min-width: 768px) { .exp-groups { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spacing-xl); } }
.exp-group { padding-top: var(--spacing-md); border-top: 2px solid var(--color-brand-primary); }
.exp-group-title { margin-bottom: var(--spacing-md); font-size: var(--font-size-h6); line-height: var(--line-height-h6); font-weight: var(--font-weight-bold); color: var(--color-brand-primary); }
.exp-group dl { display: grid; gap: var(--spacing-md); }
.exp-group dt { font-weight: var(--font-weight-semibold); }
.exp-group dd { margin-top: var(--spacing-2xs); color: var(--color-text-secondary); font-size: var(--font-size-body-sm); line-height: var(--line-height-body-sm); }

/* نشانی و راه‌های تماس */
.office { display: grid; gap: var(--spacing-xl); }
@media (min-width: 1024px) { .office { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--spacing-3xl); align-items: start; } }
.office-intro { display: grid; justify-items: start; gap: var(--spacing-sm); }
.office-intro .btn { margin-top: var(--spacing-xs); }
.office-list { display: grid; border-top: 1px solid var(--color-border); }
.office-list > div { display: grid; gap: var(--spacing-2xs); padding-block: var(--spacing-md); border-bottom: 1px solid var(--color-border); }
@media (min-width: 640px) { .office-list > div { grid-template-columns: 160px minmax(0, 1fr); align-items: center; } }
.office-list dt { display: inline-flex; align-items: center; gap: var(--spacing-xs); font-size: var(--font-size-body-sm); color: var(--color-text-secondary); }
.office-list dt svg.i { width: 18px; height: 18px; color: var(--color-brand-primary); }
.office-list dd { font-weight: var(--font-weight-medium); }
.office-list a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-brand-primary); font-weight: var(--font-weight-semibold); text-decoration: none; }
.office-list a:hover { text-decoration: underline; }

/* صفحه‌ی راهکارها: هر ردیف یک مسئله، با نمونه‌ی واقعی خودش */
.sc-list { display: grid; }
.sc-row { display: grid; gap: var(--spacing-xl); padding-block: var(--spacing-2xl); border-top: 1px solid var(--color-border); }
.sc-row:first-child { padding-top: var(--spacing-md); border-top: 0; }
@media (min-width: 1024px) { .sc-row { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--spacing-3xl); align-items: center; } }
.sc-copy { display: grid; justify-items: start; }
.sc-problem { max-width: 26ch; font-size: var(--font-size-h3); line-height: var(--line-height-h3); font-weight: var(--font-weight-bold); }
.sc-family { display: inline-flex; align-items: center; gap: var(--spacing-xs); margin-top: var(--spacing-md); font-weight: var(--font-weight-semibold); color: var(--color-brand-primary); }
.sc-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-sm); background: var(--color-brand-primary); color: var(--color-neutral-white); }
.sc-icon svg.i { width: 18px; height: 18px; }
.sc-summary { max-width: 62ch; margin-top: var(--spacing-sm); color: var(--color-text-secondary); }
.sc-signs { margin-top: var(--spacing-md); max-width: 62ch; }
.sc-copy .actions { margin-top: var(--spacing-lg); }
.sc-work { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-gutter); }
.sc-shot { display: grid; gap: var(--spacing-xs); text-decoration: none; border-radius: var(--radius-md); }
.sc-shot-name { display: grid; font-weight: var(--font-weight-semibold); }
.sc-shot-name small { font-size: var(--font-size-body-sm); line-height: var(--line-height-body-sm); font-weight: var(--font-weight-regular); color: var(--color-text-secondary); }
.sc-shot:hover .sc-shot-name { color: var(--color-brand-primary); }
.sc-shot .shot { border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.sc-unsure { margin-top: var(--spacing-lg); padding: var(--spacing-xl) var(--spacing-lg); border: 0; border-radius: var(--radius-md); background: var(--color-brand-primary-light); }
@media (min-width: 1024px) { .sc-unsure { grid-template-columns: minmax(0, 1fr); padding: var(--spacing-2xl); } }
.sc-unsure .sc-problem { font-size: var(--font-size-h4); line-height: var(--line-height-h4); max-width: none; }
.tech-list { display: grid; border-top: 1px solid var(--color-border); }
.tech-list div { display: grid; gap: var(--spacing-2xs); padding-block: var(--spacing-md); border-bottom: 1px solid var(--color-border); }
@media (min-width: 640px) { .tech-list div { grid-template-columns: 180px minmax(0, 1fr); } }
.tech-list dt { font-weight: var(--font-weight-semibold); }
.tech-list dd { color: var(--color-text-secondary); text-align: start; }
.card-note { display: flex; gap: var(--spacing-sm); margin-top: var(--grid-gutter); }
.card-note > svg.i { color: var(--color-brand-primary); margin-top: 4px; }
.card-note > div { display: grid; justify-items: start; gap: var(--spacing-xs); }
.card-note p { color: var(--color-text-secondary); font-size: var(--font-size-body-sm); line-height: var(--line-height-body-sm); }

/* ---------------------------------------------------------------- forms */
.contact-grid { display: grid; gap: var(--spacing-2xl); }
@media (min-width: 1024px) { .contact-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--spacing-3xl); align-items: start; } }
.form { display: grid; gap: var(--spacing-md); }
.form-row { display: grid; gap: var(--spacing-md); }
@media (min-width: 640px) { .form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.field { display: grid; gap: var(--spacing-xs); align-content: start; }
.field label { font-size: var(--font-size-label); line-height: var(--line-height-label); font-weight: var(--font-weight-medium); }
.field label small { font-size: inherit; font-weight: var(--font-weight-regular); color: var(--color-text-secondary); }
.control {
  width: 100%; height: 48px; padding-inline: 14px;
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-surface);
  font-size: var(--font-size-body); color: var(--color-text-primary);
  transition: border-color var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast) var(--ease-standard);
}
.control { caret-color: var(--color-brand-primary); }
select.control { appearance: none; padding-inline-end: 40px; background: var(--color-surface) url(/assets/img/chevron.svg) no-repeat; background-position: left 12px center; background-size: 20px; }
textarea.control { resize: vertical; }
textarea.control::-webkit-resizer { background: linear-gradient(135deg, transparent 45%, var(--color-border-strong) 45% 55%, transparent 55% 70%, var(--color-border-strong) 70% 80%, transparent 80%); }
/* placeholder با کنتراست AA؛ برچسب و راهنما جدا هستند */
.control::placeholder { color: var(--color-text-secondary); opacity: 1; }
.control:hover { border-color: var(--color-neutral-400); }
.control:focus { border-color: var(--color-brand-primary); }
/* حلقه‌ی فوکوس سیستم روی همه‌ی کنترل‌ها، حتی وقتی حاشیه‌ی خطا قرمز است */
.control:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.control[aria-invalid="true"] { border-color: var(--color-error-500); box-shadow: inset 0 0 0 1px var(--color-error-500); }
.control:disabled { background: var(--color-bg-tertiary); color: var(--color-text-disabled); cursor: not-allowed; }
.control[readonly] { background: var(--color-bg-secondary); }
textarea.control { height: auto; min-height: 120px; padding-block: var(--spacing-sm); line-height: var(--line-height-body); resize: vertical; }
.field-error { display: flex; align-items: center; gap: var(--spacing-2xs); font-size: var(--font-size-body-sm); line-height: var(--line-height-body-sm); color: var(--color-error-700); }
.field-error svg.i { width: 16px; height: 16px; stroke-width: 2; }
.field-hint { font-size: var(--font-size-body-sm); line-height: var(--line-height-body-sm); color: var(--color-text-secondary); }
.field-hint-row { display: flex; justify-content: space-between; gap: var(--spacing-sm); }
.count { flex: none; font-variant-numeric: tabular-nums; }
.count.is-near { color: var(--color-warning-700); font-weight: var(--font-weight-medium); }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-sm) var(--spacing-md); margin-top: var(--spacing-2xs); }
.form-note { font-size: var(--font-size-body-sm); line-height: var(--line-height-body-sm); color: var(--color-text-secondary); }
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[data-submit][aria-busy="true"] { cursor: progress; }
[data-submit][aria-busy="true"] [data-label] { opacity: 0; }
[data-submit] { position: relative; }
[data-submit][aria-busy="true"]::after { content: ""; position: absolute; width: 20px; height: 20px; border: 2px solid currentColor; border-inline-end-color: transparent; border-radius: var(--radius-full); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.card-cta { display: grid; align-content: start; background: var(--color-primary-900); border-color: var(--color-primary-900); color: var(--color-neutral-white); }
.card-cta :focus-visible { outline-color: var(--color-brand-accent); }
.cline .cline-strong { color: var(--color-neutral-white); font-size: var(--font-size-body); line-height: var(--line-height-body); }
.contact-side { display: grid; gap: var(--spacing-xl); align-content: start; }

/* پرسش‌های پیش از جلسه */
.faq .h6 { margin-bottom: var(--spacing-xs); }
.faq details { border-bottom: 1px solid var(--color-border); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-sm);
  min-height: 52px; padding-block: var(--spacing-sm); cursor: pointer; list-style: none; font-weight: var(--font-weight-medium);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 9px; height: 9px; margin-inline-end: 6px;
  border-inline-start: 1.75px solid var(--color-icon-primary); border-bottom: 1.75px solid var(--color-icon-primary);
  transform: rotate(45deg); transition: transform var(--motion-normal) var(--ease-standard);
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq summary:hover { color: var(--color-brand-primary); }
.faq details p { padding-bottom: var(--spacing-md); color: var(--color-text-secondary); font-size: var(--font-size-body-sm); line-height: var(--line-height-body-sm); }

/* خلاصه‌ی جلسه در سربرگ صفحه‌ی تماس */
.facts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-2xs) var(--spacing-lg); margin-top: var(--spacing-md); }
.facts li { display: inline-flex; align-items: center; gap: var(--spacing-xs); min-height: 32px; font-size: var(--font-size-body-sm); line-height: var(--line-height-body-sm); color: var(--color-text-secondary); }
.facts svg.i { width: 18px; height: 18px; color: var(--color-brand-primary); }
.facts-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-brand-primary); font-weight: var(--font-weight-semibold); text-decoration: none; }
.facts-link:hover { text-decoration: underline; }
.alert-actions { display: flex; flex-wrap: wrap; gap: 0 var(--spacing-lg); margin-top: var(--spacing-2xs); }
.card-cta .h6 { margin-bottom: var(--spacing-xs); }
.cline { display: grid; justify-items: start; gap: var(--spacing-2xs); padding-block: var(--spacing-md); border-top: 1px solid color-mix(in srgb, var(--color-neutral-white) 14%, transparent); }
.cline:last-child { padding-bottom: 0; }
.cline span { font-size: var(--font-size-body-sm); line-height: var(--line-height-body-sm); color: var(--color-neutral-300); }
.cline a { font-size: var(--font-size-body-lg); line-height: 1.5; font-weight: var(--font-weight-semibold); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.cline a:hover { text-decoration: underline; text-underline-offset: 4px; }
.cline p { color: var(--color-neutral-300); font-size: var(--font-size-body-sm); line-height: var(--line-height-body-sm); }

/* ---------------------------------------------------------------- members */
.m-bar { background: var(--color-primary-50); border-bottom: 1px solid var(--color-border); }
.m-bar-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--spacing-xs) var(--spacing-md); min-height: 56px; }
.m-user { display: inline-flex; align-items: center; gap: var(--spacing-xs); font-weight: var(--font-weight-medium); }
.m-user svg.i { color: var(--color-brand-primary); }
.m-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-2xs) var(--spacing-md); }
.m-nav a { display: inline-flex; align-items: center; min-height: 44px; position: relative; color: var(--color-text-secondary); font-weight: var(--font-weight-medium); text-decoration: none; }
.m-nav a:hover, .m-nav a[aria-current] { color: var(--color-brand-primary); }
.m-nav a[aria-current]::after { content: ""; position: absolute; inset-inline: 0; bottom: 6px; height: 2px; background: var(--color-brand-accent); }
.m-nav form { display: inline-flex; }
.auth-wrap { display: grid; place-items: center; padding: var(--spacing-2xl) var(--page-padding); min-height: calc(100dvh - 180px); background: var(--color-bg-secondary); }
.auth-card { width: 100%; max-width: 440px; display: grid; gap: var(--spacing-md); }
.auth-card .alert { margin-bottom: 0; }
.auth-logo { justify-self: start; text-decoration: none; margin-bottom: var(--spacing-xs); border-radius: var(--radius-sm); }
.auth-lead { color: var(--color-text-secondary); font-size: var(--font-size-body-sm); line-height: var(--line-height-body-sm); }
.auth-foot { font-size: var(--font-size-body-sm); color: var(--color-text-secondary); }
.auth-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--spacing-xs); }
.auth-row form { display: inline-flex; }
/* کد عددی لاتین است؛ فاصله‌گذاری برای ارقام مجاز است */
.control-code { font-size: var(--font-size-h5); letter-spacing: .4em; text-align: center; font-weight: var(--font-weight-semibold); }
.card-lead { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-2xs) var(--spacing-md); margin-block: var(--spacing-2xs) var(--spacing-md); color: var(--color-text-secondary); font-size: var(--font-size-body-sm); line-height: var(--line-height-body-sm); }
.auth-foot a { color: var(--color-brand-primary); font-weight: var(--font-weight-semibold); }
.case { display: grid; gap: var(--spacing-2xl); }
@media (min-width: 1024px) { .case { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); grid-template-areas: "main side"; gap: var(--spacing-3xl); align-items: start; } .case-main { grid-area: main; } .case-side { grid-area: side; position: sticky; top: 96px; } }
.case-main { display: grid; gap: var(--spacing-2xl); }
.case-sec { display: grid; gap: var(--spacing-sm); }
.case-sec > p { color: var(--color-text-secondary); max-width: var(--container-reading); }
.case-side .card { display: grid; gap: var(--spacing-sm); }
.case-side p { color: var(--color-text-secondary); font-size: var(--font-size-body-sm); line-height: var(--line-height-body-sm); }
.case-side-label { font-size: var(--font-size-label); font-weight: var(--font-weight-medium); margin-top: var(--spacing-xs); }
.gallery { display: grid; gap: var(--grid-gutter); }
@media (min-width: 768px) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gallery figure { display: grid; gap: var(--spacing-xs); align-content: start; }
.gallery figure.is-portrait { justify-items: center; }
.gallery figure.is-portrait img { height: 520px; width: auto; max-width: 100%; object-fit: contain; }
.gallery a { display: block; border-radius: var(--radius-lg); }
.gallery img { border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg-secondary); }
.gallery figcaption { font-size: var(--font-size-body-sm); color: var(--color-text-secondary); }
.admin { display: grid; gap: var(--spacing-2xl); }
.admin > .alert { margin-bottom: 0; }
.admin section > .h5 { margin-bottom: var(--spacing-md); }
.form-inline { gap: var(--spacing-md); }
@media (min-width: 1024px) { .form-inline { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: end; } }
.copy-row { display: flex; gap: var(--spacing-xs); margin-top: var(--spacing-xs); }
.copy-row .control { height: 44px; font-size: var(--font-size-body-sm); }
.table { width: 100%; border-collapse: collapse; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); font-size: var(--font-size-body-sm); line-height: var(--line-height-body-sm); }
.table th { text-align: start; font-weight: var(--font-weight-medium); color: var(--color-text-secondary); background: var(--color-bg-secondary); }
.table th, .table td { padding: var(--spacing-sm) var(--spacing-md); border-bottom: 1px solid var(--color-border); vertical-align: top; }
.table td strong { display: block; font-weight: var(--font-weight-semibold); }
.table td .muted { display: block; }
.table td [dir="ltr"] { text-align: end; }
.row-actions { display: flex; flex-wrap: wrap; gap: var(--spacing-2xs); margin-top: var(--spacing-2xs); }
.req-msg { white-space: pre-wrap; max-width: 48ch; }
@media (max-width: 767px) {
  .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
  .table thead { display: none; }
  .table { border: 0; background: none; }
  .table tr { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--spacing-xs) var(--spacing-md); margin-bottom: var(--spacing-sm); }
  .table td { border-bottom: 1px solid var(--color-border); padding: var(--spacing-xs) 0; }
  .table td:last-child { border-bottom: 0; }
  .table td::before { content: attr(data-label); display: block; font-size: var(--font-size-caption); color: var(--color-text-secondary); }
}
.audit { display: grid; gap: 0; font-size: var(--font-size-body-sm); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.audit li { display: flex; flex-wrap: wrap; gap: var(--spacing-2xs) var(--spacing-md); padding: var(--spacing-xs) var(--spacing-md); border-bottom: 1px solid var(--color-border); }
.audit li:last-child { border-bottom: 0; }
.audit code { font-size: var(--font-size-caption); color: var(--color-secondary-steel); }

/* ---------------------------------------------------------------- motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .card-link:hover { transform: none; }
  .link-arrow:hover svg.i { transform: none; }
  .drawer[open] { animation: none; }
  .mbar { animation: none; }
  .hero-frame { animation: none; }
  .work-row:hover .frame, .work-cell-link:hover .frame { transform: none; }
  .js [data-reveal] { opacity: 1; translate: 0 0; transition: none; }
  [data-submit][aria-busy="true"]::after { animation-duration: 2.4s; }
}