@charset "UTF-8";
/* ============================================================================
   ارکان (Arkan) — قالب شرکتی/مهندسی
   ----------------------------------------------------------------------------
   تنها استایل‌شیتِ قالب. ترتیبِ اولویت با ‎@layer‎ صریح تعیین می‌شود، نه با
   ترتیبِ تگ‌های <link> — تا وقتی صفحات بعدی اضافه شدند، تعریف‌های تکراری
   بی‌صدا همدیگر را بازنویسی نکنند.

     tokens      متغیرهای طراحی — تنها منبعِ حقیقتِ رنگ/فاصله/سایه/موشن/تایپ
     reset       نرمال‌سازی
     base        تایپوگرافی و عناصرِ پایه
     layout      قالب‌بندی: wrap، section، هدر، فوتر، داک
     components  کامپوننت‌های قابل استفاده‌ی مجدد (دکمه، کارت، چیپ، فرم)
     pages       بخش‌های مخصوصِ صفحه‌ها
     utilities   کلاس‌های تک‌منظوره
     a11y        بازنویسی‌های دسترسی‌پذیری (reduced-motion، فوکوس، پرینت)

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

@layer tokens, reset, base, layout, components, pages, utilities, a11y;

/* ========================================================================= */
/* فونت                                                                       */
/* ========================================================================= */
@font-face { font-family: 'IRANSans'; font-style: normal; font-weight: 300; font-display: swap; src: url('/fonts/IRANSansWeb_Light.woff2') format('woff2'); }
@font-face { font-family: 'IRANSans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/IRANSansWeb.woff2') format('woff2'); }
@font-face { font-family: 'IRANSans'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/IRANSansWeb_Medium.woff2') format('woff2'); }
@font-face { font-family: 'IRANSans'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/IRANSansWeb_Bold.woff2') format('woff2'); }


/* ========================================================================= */
@layer tokens {

  :root {
    /* ---------------------------------------------------------------------
       ۱) پالتِ خام
       خنثی‌ها آبی‌مایل‌اند (نه خاکستریِ خالص) تا کنارِ لهجه‌ی فیروزه‌ای
       یکدست دیده شوند. لهجه یک فیروزه‌ایِ عمیق است: هم‌زمان «آب» و «فولاد».
       ------------------------------------------------------------------ */
    --i-950: #06121a;
    --i-900: #0b1c26;   /* متنِ اصلی — ۱۶٫۵:۱ روی سفید */
    --i-800: #132734;
    --i-700: #26404f;
    --i-600: #3d5a6b;   /* متنِ ثانویه — ۷٫۹:۱ روی سفید */
    --i-500: #5d7a8a;   /* متنِ کم‌رنگ — ۴٫۷:۱ روی سفید */
    --i-400: #8aa1ad;
    --i-300: #b6c6cf;
    --i-200: #dbe4e9;
    --i-150: #e8eef1;
    --i-100: #f1f5f7;
    --i-050: #f7fafb;

    --a-900: #04333d;
    --a-800: #064551;
    --a-700: #075a69;
    --a-600: #0a7085;   /* لهجه‌ی برند — سفید رویش ۵٫۶:۱ */
    --a-500: #0e8ba3;
    --a-400: #2fa4bb;
    --a-300: #6fbdcd;
    --a-200: #c3e2ea;
    --a-100: #e6f4f7;

    /* ---------------------------------------------------------------------
       ۲) نقش‌ها — ویوها فقط از این‌ها استفاده کنند، نه از پالتِ خام.
       ------------------------------------------------------------------ */
    --bg:          #ffffff;
    --bg-soft:     var(--i-050);
    --bg-mute:     var(--i-100);
    --bg-ink:      var(--i-950);

    --ink:         var(--i-900);
    --ink-2:       var(--i-600);
    --ink-3:       var(--i-500);
    --ink-inv:     #ffffff;
    --ink-inv-2:   rgba(255,255,255,.72);
    --ink-inv-3:   rgba(255,255,255,.52);

    --line:        #e2eaee;
    --line-2:      #cfdbe2;
    --line-inv:    rgba(255,255,255,.14);

    --brand:       var(--a-600);
    --brand-dark:  var(--a-700);
    --brand-deep:  var(--a-900);
    --brand-soft:  var(--a-100);
    --brand-line:  var(--a-200);
    --on-brand:    #ffffff;

    /* ۳) شکل */
    --r1: 4px;
    --r2: 8px;
    --r3: 14px;
    --pill: 999px;
    --hair: 1px solid var(--line);

    /* ۴) سایه — بسیار ملایم؛ عمق از خط می‌آید نه از سایه */
    --sh1: 0 1px 2px rgba(11,28,38,.05);
    --sh2: 0 10px 26px -14px rgba(11,28,38,.20);
    --sh3: 0 26px 56px -28px rgba(11,28,38,.32);

    /* ۵) موشن */
    --e:   cubic-bezier(.22,.72,.28,1);
    --t:   .32s;
    --t-f: .18s;

    /* ۶) تایپوگرافی */
    --f: 'IRANSans', ui-sans-serif, system-ui, 'Segoe UI', Tahoma, sans-serif;
    --f-num: 'IRANSans', ui-monospace, monospace;

    --fs-d1:   clamp(2.05rem, 1.12rem + 3.5vw, 3.85rem);
    --fs-h2:   clamp(1.5rem,  1.02rem + 1.8vw, 2.35rem);
    --fs-h3:   clamp(1.05rem, .97rem + .34vw, 1.22rem);
    --fs-lead: clamp(1rem,    .95rem + .3vw,  1.14rem);
    --fs-b:    1rem;
    --fs-s:    .875rem;
    --fs-xs:   .78rem;

    /* فاصله‌ی خطِ فارسی سخاوتمند است؛ کمتر از این، متن فشرده دیده می‌شود */
    --lh-b: 2;
    --lh-h: 1.52;

    /* ۷) قالب‌بندی */
    --wrap: 1200px;
    --gut:  clamp(1.1rem, .45rem + 2.5vw, 2.5rem);
    --sec:  clamp(3.75rem, 1.9rem + 6.8vw, 7rem);
    --navh: 68px;
  }
}


/* ========================================================================= */
@layer reset {

  *, *::before, *::after { box-sizing: border-box; }

  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

  body, h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }

  ul[class], ol[class] { list-style: none; padding: 0; }

  img, svg, video { display: block; max-width: 100%; }
  img { height: auto; }

  button, input, textarea, select { font: inherit; color: inherit; }
  button { background: none; border: 0; cursor: pointer; }

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

  table { border-collapse: collapse; }
}


/* ========================================================================= */
@layer base {

  body {
    font-family: var(--f);
    font-size: var(--fs-b);
    line-height: var(--lh-b);
    color: var(--ink-2);
    background: var(--bg);
    overflow-x: hidden;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }

  /* هنگام باز بودنِ منوی موبایل، اسکرولِ پس‌زمینه قفل می‌شود */
  body.is-locked { overflow: hidden; }

  h1, h2, h3, h4 {
    color: var(--ink);
    font-weight: 700;
    line-height: var(--lh-h);
    letter-spacing: -.005em;
  }

  h1 { font-size: var(--fs-d1); line-height: 1.34; }
  h2 { font-size: var(--fs-h2); }
  h3 { font-size: var(--fs-h3); }

  p { text-wrap: pretty; }

  strong, b { font-weight: 700; color: var(--ink); }

  em { font-style: normal; }

  ::selection { background: var(--a-200); color: var(--a-900); }

  /* لینکِ پرش — تا وقتی فوکوس نگیرد دیده نمی‌شود */
  .skip {
    position: fixed; inset-block-start: -100px; inset-inline-start: 1rem;
    z-index: 200; padding: .7rem 1.1rem;
    background: var(--brand); color: var(--on-brand);
    border-radius: 0 0 var(--r2) var(--r2); font-size: var(--fs-s); font-weight: 700;
    transition: inset-block-start var(--t-f) var(--e);
  }
  .skip:focus-visible { inset-block-start: 0; }
}


/* ========================================================================= */
@layer layout {

  .wrap {
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: var(--gut);
  }

  .sec { padding-block: var(--sec); }
  .sec--alt { background: var(--bg-soft); border-block: var(--hair); }

  /* ─── نوار بالایی ─────────────────────────────────────────────────────── */
  .topbar {
    background: var(--i-950);
    color: var(--ink-inv-2);
    font-size: var(--fs-xs);
    line-height: 1;
  }
  .topbar-in {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; min-height: 40px;
  }
  .topbar-note { color: var(--ink-inv-3); }
  .topbar-links { display: flex; align-items: center; gap: 1.35rem; }
  .topbar-links a {
    display: inline-flex; align-items: center; gap: .45rem;
    transition: color var(--t-f) var(--e);
  }
  .topbar-links a:hover { color: var(--ink-inv); }
  .topbar-links svg { width: 14px; height: 14px; opacity: .65; }
  .topbar-tel { font-weight: 500; color: var(--ink-inv); }

  @media (max-width: 860px) {
    .topbar-note { display: none; }
    .topbar-in { justify-content: center; }
  }
  @media (max-width: 520px) {
    .topbar-links a:not(.topbar-tel) { display: none; }
  }

  /* ─── هدر ─────────────────────────────────────────────────────────────── */
  .nav {
    position: sticky; inset-block-start: 0; z-index: 90;
    background: rgba(255,255,255,.9);
    backdrop-filter: saturate(1.6) blur(12px);
    -webkit-backdrop-filter: saturate(1.6) blur(12px);
    border-block-end: var(--hair);
    transition: box-shadow var(--t) var(--e), background var(--t) var(--e);
  }
  .nav.is-stuck { box-shadow: var(--sh2); background: rgba(255,255,255,.96); }

  .nav-in {
    display: flex; align-items: center; gap: 1.25rem;
    min-height: var(--navh);
  }

  .brand {
    display: inline-flex; align-items: center; gap: .65rem;
    color: var(--brand); flex: none;
  }
  .brand-mark { width: 34px; height: 34px; flex: none; }
  .brand-logo { width: auto; height: 36px; flex: none; }
  .brand-text {
    display: flex; flex-direction: column; gap: .1rem;
    font-size: 1.08rem; font-weight: 700; line-height: 1.2; color: var(--ink);
  }
  .brand-text small {
    font-size: .66rem; font-weight: 400; letter-spacing: .04em;
    color: var(--ink-3);
  }

  /* ─── منوی اصلی ───────────────────────────────────────────────────────── */
  .menu {
    display: flex; align-items: center; gap: .15rem;
    margin-inline-start: auto;
  }
  .menu > a, .mi-btn {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .55rem .7rem; border-radius: var(--r1);
    font-size: var(--fs-s); font-weight: 500; color: var(--ink-2);
    white-space: nowrap;
    transition: color var(--t-f) var(--e), background var(--t-f) var(--e);
  }
  .menu > a:hover, .mi-btn:hover { color: var(--ink); background: var(--bg-mute); }
  .menu > a[aria-current="page"], .mi-btn[aria-current="page"] { color: var(--brand); font-weight: 700; }
  .mi-btn svg { width: 14px; height: 14px; transition: transform var(--t-f) var(--e); }
  .mi.is-open .mi-btn svg { transform: rotate(180deg); }
  .menu-foot { display: none; }

  /* پنلِ کشویی */
  .mi { position: relative; }
  .mpanel {
    position: absolute; inset-block-start: calc(100% + .5rem); inset-inline-start: 50%;
    translate: -50% 0;
    width: min(560px, calc(100vw - 2rem));
    padding: .55rem;
    background: var(--bg); border: var(--hair); border-radius: var(--r3);
    box-shadow: var(--sh3);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity var(--t-f) var(--e), transform var(--t-f) var(--e), visibility var(--t-f);
  }
  .mi.is-open .mpanel { opacity: 1; visibility: visible; transform: none; }

  .mpanel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .15rem; }
  .mpanel-grid > a {
    display: flex; align-items: flex-start; gap: .6rem;
    padding: .6rem .65rem; border-radius: var(--r2);
    font-size: var(--fs-s); font-weight: 500; color: var(--ink);
    transition: background var(--t-f) var(--e);
  }
  .mpanel-grid > a:hover { background: var(--bg-mute); }
  .mpanel-grid > a > span { display: flex; flex-direction: column; line-height: 1.6; }
  .mpanel-grid small { font-size: var(--fs-xs); font-weight: 400; color: var(--ink-3); }
  .mpanel-ico {
    display: grid; place-items: center; flex: none;
    width: 30px; height: 30px; border-radius: var(--r1);
    background: var(--brand-soft); color: var(--brand);
  }
  .mpanel-ico svg { width: 17px; height: 17px; }

  .mpanel-foot {
    display: flex; flex-wrap: wrap; gap: 1rem;
    margin-block-start: .4rem; padding: .75rem .65rem .35rem;
    border-block-start: var(--hair);
    font-size: var(--fs-s); font-weight: 700; color: var(--brand);
  }
  .mpanel-foot a:hover { text-decoration: underline; text-underline-offset: 3px; }

  /* ─── سمتِ راستِ هدر ──────────────────────────────────────────────────── */
  .nav-cta { display: flex; align-items: center; gap: .6rem; flex: none; }

  .burger {
    display: none; flex-direction: column; justify-content: center; gap: 5px;
    width: 42px; height: 42px; padding: 0 10px;
    border: var(--hair); border-radius: var(--r1);
  }
  .burger span {
    display: block; height: 2px; width: 100%; border-radius: 2px;
    background: var(--ink);
    transition: transform var(--t-f) var(--e), opacity var(--t-f) var(--e);
  }
  .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(-45deg); }
  .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(45deg); }

  .nav-scrim {
    position: fixed; inset: 0; z-index: 88;
    background: rgba(6,18,26,.42);
    opacity: 0; transition: opacity var(--t) var(--e);
  }
  .nav-scrim.is-on { opacity: 1; }

  /* ─── موبایل: منو به کشوی کناری تبدیل می‌شود ──────────────────────────── */
  @media (max-width: 1040px) {
    .nav-cta .btn { display: none; }
    .burger { display: flex; }

    .menu {
      position: fixed; inset-block: 0; inset-inline-end: 0; z-index: 95;
      width: min(360px, 88vw);
      flex-direction: column; align-items: stretch; gap: .1rem;
      margin: 0; padding: 1.1rem 1.1rem 2rem;
      background: var(--bg); border-inline-start: var(--hair);
      box-shadow: var(--sh3);
      overflow-y: auto; overscroll-behavior: contain;
      transform: translateX(-100%);
      visibility: hidden;
      transition: transform var(--t) var(--e), visibility var(--t);
    }
    .menu.is-open { transform: none; visibility: visible; }

    .menu > a, .mi-btn {
      justify-content: space-between;
      padding: .85rem .4rem; font-size: 1rem;
      border-block-end: var(--hair); border-radius: 0;
    }
    .menu > a:hover, .mi-btn:hover { background: none; color: var(--brand); }
    .mi-btn { width: 100%; }

    .mpanel {
      position: static; width: auto; translate: none; transform: none;
      padding: 0; border: 0; border-radius: 0; box-shadow: none;
      opacity: 1; visibility: visible;
      display: none;
    }
    .mi.is-open .mpanel { display: block; }
    .mpanel-grid { grid-template-columns: 1fr; padding-block: .35rem; }
    .mpanel-grid > a { padding-inline-start: .4rem; }
    .mpanel-foot { padding-inline: .4rem; }

    .menu-foot { display: grid; gap: .8rem; margin-block-start: 1.4rem; }
    .menu-tel {
      text-align: center; font-size: 1.05rem; font-weight: 700;
      color: var(--brand); font-family: var(--f-num);
    }
  }

  /* ─── فوتر ────────────────────────────────────────────────────────────── */
  .ft {
    padding-block: clamp(3rem, 1.6rem + 4vw, 4.5rem) 0;
    background: var(--bg-ink); color: var(--ink-inv-2);
    font-size: var(--fs-s);
  }
  .ft-grid {
    display: grid; gap: clamp(2rem, 1rem + 3vw, 3.5rem);
    grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
    padding-block-end: 2.5rem;
  }
  @media (max-width: 900px) { .ft-grid { grid-template-columns: 1fr 1fr; } .ft-about { grid-column: 1 / -1; } }
  @media (max-width: 560px) { .ft-grid { grid-template-columns: 1fr; } }

  .ft h2 {
    margin-block-end: 1rem; font-size: var(--fs-s);
    color: var(--ink-inv); letter-spacing: .02em;
  }
  .ft ul { display: grid; gap: .7rem; }
  .ft a { transition: color var(--t-f) var(--e); }
  .ft ul a:hover { color: var(--ink-inv); }

  .brand--ft { color: var(--ink-inv); margin-block-end: 1.1rem; }
  .brand--ft .brand-mark rect { fill: var(--brand); }
  .brand--ft .brand-text { color: var(--ink-inv); }
  .brand--ft .brand-text small { color: var(--ink-inv-3); }
  .ft-about p { max-width: 42ch; line-height: 1.95; }

  .socials { display: flex; gap: .5rem; margin-block-start: 1.25rem; }
  .socials a {
    display: grid; place-items: center; width: 38px; height: 38px;
    border: 1px solid var(--line-inv); border-radius: var(--r1);
    transition: border-color var(--t-f) var(--e), background var(--t-f) var(--e), color var(--t-f) var(--e);
  }
  .socials a:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
  .socials svg { width: 18px; height: 18px; }

  .ft-contact li { line-height: 1.9; }
  .ft-badges { margin-block-start: 1.2rem; display: flex; gap: .6rem; flex-wrap: wrap; }
  .ft-badges img { max-width: 84px; height: auto; border-radius: var(--r1); background: #fff; }

  .ft-bot {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: .6rem; padding-block: 1.35rem;
    border-block-start: 1px solid var(--line-inv);
    font-size: var(--fs-xs); color: var(--ink-inv-3);
  }
  .ft-bot a { color: var(--ink-inv-2); }
  .ft-bot a:hover { color: var(--ink-inv); text-decoration: underline; text-underline-offset: 3px; }

  /* ─── داکِ تماسِ موبایل ───────────────────────────────────────────────── */
  .cdock { display: none; }
  @media (max-width: 720px) {
    .cdock {
      position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 80;
      display: grid; grid-template-columns: 1fr 1fr;
      background: var(--bg); border-block-start: var(--hair);
      box-shadow: 0 -8px 24px -16px rgba(11,28,38,.4);
      padding-block-end: env(safe-area-inset-bottom);
    }
    .cdock a {
      display: flex; align-items: center; justify-content: center; gap: .45rem;
      padding-block: .95rem; font-size: var(--fs-s); font-weight: 700;
    }
    .cdock svg { width: 18px; height: 18px; }
    .cdock-a { color: var(--ink); border-inline-start: var(--hair); }
    .cdock-b { background: var(--brand); color: var(--on-brand); }

    /* جا برای داک، وگرنه انتهای فوتر زیرش گم می‌شود */
    .ft-bot { padding-block-end: 4.6rem; }
  }
}


/* ========================================================================= */
@layer components {

  /* ─── دکمه ────────────────────────────────────────────────────────────── */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .72rem 1.25rem;
    border: 1px solid transparent; border-radius: var(--r1);
    font-size: var(--fs-s); font-weight: 700; line-height: 1.2;
    white-space: nowrap; cursor: pointer;
    transition: background var(--t-f) var(--e), color var(--t-f) var(--e),
                border-color var(--t-f) var(--e), transform var(--t-f) var(--e),
                box-shadow var(--t-f) var(--e);
  }
  .btn:active { transform: translateY(1px); }
  .btn-lg { padding: .95rem 1.6rem; font-size: var(--fs-b); }
  .btn-block { width: 100%; }

  .btn-arrow { width: 17px; height: 17px; transition: transform var(--t-f) var(--e); }
  .btn:hover .btn-arrow { transform: translateX(-4px); }

  .btn-primary { background: var(--brand); color: var(--on-brand); }
  .btn-primary:hover { background: var(--brand-dark); box-shadow: var(--sh2); }

  .btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
  .btn-ghost:hover { border-color: var(--ink); background: var(--bg-mute); }

  .btn-inv { background: #fff; color: var(--brand-deep); }
  .btn-inv:hover { background: var(--a-100); }

  /* ─── سرتیترِ بخش ─────────────────────────────────────────────────────── */
  .kicker {
    display: flex; align-items: center; gap: .6rem;
    margin-block-end: .9rem;
    font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em;
    color: var(--brand); text-transform: none;
  }
  .kicker-line { display: block; width: 26px; height: 2px; background: currentColor; flex: none; }
  .kicker--inv { color: var(--a-300); }

  .sec-head {
    display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
    gap: 1.25rem 2.5rem;
    margin-block-end: clamp(2rem, 1rem + 2.5vw, 3.25rem);
  }
  .sec-head > div { max-width: 34ch; }
  .sec-note { max-width: 40ch; font-size: var(--fs-s); color: var(--ink-3); line-height: 1.95; }

  .sec-link {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: var(--fs-s); font-weight: 700; color: var(--brand);
    padding-block-end: .2rem; border-block-end: 1px solid transparent;
    transition: border-color var(--t-f) var(--e);
  }
  .sec-link:hover { border-block-end-color: currentColor; }
  .sec-link svg { width: 16px; height: 16px; transition: transform var(--t-f) var(--e); }
  .sec-link:hover svg { transform: translateX(-4px); }

  .sec-foot { margin-block-start: 2.25rem; text-align: center; }

  /* ─── چیپ ─────────────────────────────────────────────────────────────── */
  .chip {
    display: inline-flex; align-items: center;
    padding: .22rem .6rem; border-radius: var(--r1);
    background: var(--brand); color: var(--on-brand);
    font-size: var(--fs-xs); font-weight: 700; line-height: 1.8;
  }
  .chip--soft { background: var(--brand-soft); color: var(--brand-dark); }

  /* ─── قابِ تصویر با نشانه‌ی گوشه ───────────────────────────────────────── */
  .frame {
    position: relative;
    border: var(--hair); border-radius: var(--r2);
    background: var(--bg-soft);
    overflow: visible;
  }
  .frame > img, .frame > .frame-ph {
    border-radius: calc(var(--r2) - 1px);
    aspect-ratio: 4 / 5; width: 100%; object-fit: cover;
  }
  .frame--sq > img, .frame--sq > .frame-ph { aspect-ratio: 1 / 1; }

  .frame-ph {
    display: grid; place-items: center; padding: 2rem;
    color: var(--a-300);
    background:
      linear-gradient(180deg, var(--i-050), var(--a-100));
  }
  .frame-ph svg { width: 100%; height: 100%; max-height: 340px; }

  /* براکتِ گوشه — امضای بصریِ قالب */
  .frame-tick {
    position: absolute; width: 26px; height: 26px;
    border: 2px solid var(--brand);
  }
  .frame-tick--tr {
    inset-block-start: -8px; inset-inline-end: -8px;
    border-inline-start: 0; border-block-end: 0;
    border-start-end-radius: var(--r1);
  }
  .frame-tick--bl {
    inset-block-end: -8px; inset-inline-start: -8px;
    border-inline-end: 0; border-block-start: 0;
    border-end-start-radius: var(--r1);
  }

  /* ─── فرم ─────────────────────────────────────────────────────────────── */
  .field { display: grid; gap: .4rem; margin-block-end: .9rem; }
  .field label { font-size: var(--fs-s); font-weight: 500; color: var(--ink); }
  .field .opt { font-weight: 400; color: var(--ink-3); }

  .field input, .field textarea {
    width: 100%; padding: .72rem .85rem;
    background: var(--bg); color: var(--ink);
    border: 1px solid var(--line-2); border-radius: var(--r1);
    font-size: var(--fs-s); line-height: 1.8;
    transition: border-color var(--t-f) var(--e), box-shadow var(--t-f) var(--e);
  }
  .field textarea { resize: vertical; min-height: 84px; }
  .field input::placeholder, .field textarea::placeholder { color: var(--i-400); }
  .field input:hover, .field textarea:hover { border-color: var(--i-400); }
  .field input:focus, .field textarea:focus {
    outline: 0; border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
  }
  .field.is-bad input, .field.is-bad textarea { border-color: #b4382d; }

  /* ─── ریلِ افقی (اسلایدر ساده‌ی اسکرول‌محور) ─────────────────────────── */
  .rail {
    display: grid; grid-auto-flow: column; grid-auto-columns: min(420px, 82%);
    gap: 1.25rem;
    overflow-x: auto; overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--gut);
    padding-block-end: .5rem;
    scrollbar-width: none;
  }
  .rail::-webkit-scrollbar { display: none; }
  .rail > * { scroll-snap-align: start; }

  .rail-nav { display: flex; gap: .5rem; }
  .rail-btn {
    display: grid; place-items: center; width: 42px; height: 42px;
    border: 1px solid var(--line-2); border-radius: var(--r1);
    color: var(--ink);
    transition: border-color var(--t-f) var(--e), background var(--t-f) var(--e);
  }
  .rail-btn:hover { border-color: var(--ink); background: var(--bg-mute); }
  .rail-btn svg { width: 18px; height: 18px; }

  /* ─── حالتِ خالی ──────────────────────────────────────────────────────── */
  .empty {
    padding: 2.5rem; text-align: center;
    border: 1px dashed var(--line-2); border-radius: var(--r2);
    color: var(--ink-3); font-size: var(--fs-s);
  }
}


/* ========================================================================= */
@layer pages {

  /* ═══════════════════════ هیرو ═══════════════════════ */
  .hero { position: relative; overflow: hidden; padding-block: clamp(3rem, 1.4rem + 5.5vw, 5.5rem) var(--sec); }

  /* شبکه‌ی نقشه‌کشی — لحنِ «دفتر فنی» بدون نیاز به تصویر */
  .hero-grid-bg {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image:
      linear-gradient(to left, var(--line) 1px, transparent 1px),
      linear-gradient(to bottom, var(--line) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(120% 88% at 78% 0%, #000 0%, transparent 72%);
            mask-image: radial-gradient(120% 88% at 78% 0%, #000 0%, transparent 72%);
    opacity: .85;
  }

  .hero-in {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: 1.08fr .92fr;
    align-items: center; gap: clamp(2.5rem, 1rem + 4vw, 4.5rem);
  }

  .hero-copy h1 { max-width: 15ch; margin-block-end: 1.35rem; }
  .hero-copy h1 em {
    position: relative; color: var(--brand); white-space: nowrap;
  }
  /* زیرخطِ دست‌کشیده‌ی زیرِ کلمه‌ی تأکیدی */
  .hero-copy h1 em::after {
    content: ""; position: absolute; inset-inline: -.05em; inset-block-end: .04em;
    height: .12em; border-radius: var(--pill);
    background: var(--brand-line);
    z-index: -1;
  }

  .hero-lead { max-width: 46ch; font-size: var(--fs-lead); color: var(--ink-2); }

  .hero-cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-block-start: 2rem; }

  .hero-points {
    display: flex; flex-wrap: wrap; gap: .6rem 1.6rem;
    margin-block-start: 2.25rem; padding-block-start: 1.6rem;
    border-block-start: var(--hair);
    font-size: var(--fs-s); color: var(--ink-2);
  }
  .hero-points li { display: inline-flex; align-items: center; gap: .45rem; }
  .hero-points svg { width: 15px; height: 15px; color: var(--brand); flex: none; }

  .hero-art { position: relative; }
  .hero-badge {
    position: absolute; inset-block-end: -18px; inset-inline-start: -18px;
    display: flex; align-items: center; gap: .8rem;
    max-width: 264px; padding: .9rem 1.05rem;
    background: var(--bg); border: var(--hair); border-radius: var(--r2);
    box-shadow: var(--sh3);
  }
  .hero-badge strong {
    font-size: 1.85rem; line-height: 1; color: var(--brand);
    font-family: var(--f-num); flex: none;
  }
  .hero-badge span { font-size: var(--fs-xs); line-height: 1.75; color: var(--ink-3); }

  @media (max-width: 900px) {
    .hero-in { grid-template-columns: 1fr; }
    .hero-art { order: -1; max-width: 460px; margin-inline: auto; }
    .hero-copy h1 { max-width: none; }
    .hero-badge { inset-inline-start: -8px; inset-block-end: -14px; }
  }

  /* ═══════════════════════ نوارِ توانمندی ═══════════════════════ */
  .caps { border-block: var(--hair); background: var(--bg-soft); }
  .caps-in {
    display: grid; grid-template-columns: repeat(4, 1fr);
  }
  .cap {
    display: flex; align-items: center; justify-content: center; gap: .6rem;
    padding: 1.35rem .75rem; text-align: center;
    font-size: var(--fs-s); font-weight: 700; color: var(--ink);
    border-inline-start: var(--hair);
  }
  .cap:first-child { border-inline-start: 0; }
  .cap-ico { color: var(--brand); flex: none; }
  .cap-ico svg { width: 21px; height: 21px; }
  @media (max-width: 760px) {
    .caps-in { grid-template-columns: 1fr 1fr; }
    .cap { border-block-start: var(--hair); }
    .cap:nth-child(-n+2) { border-block-start: 0; }
    .cap:nth-child(odd) { border-inline-start: 0; }
  }

  /* ═══════════════════════ خدمات ═══════════════════════ */
  .svc-grid {
    display: grid; gap: 1px;
    grid-template-columns: repeat(3, 1fr);
    background: var(--line);
    border: var(--hair); border-radius: var(--r2);
    overflow: hidden;
  }
  @media (max-width: 900px) { .svc-grid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 560px) { .svc-grid { grid-template-columns: 1fr; } }

  .svc {
    position: relative; display: flex; flex-direction: column;
    padding: clamp(1.4rem, 1rem + 1.2vw, 2rem);
    background: var(--bg);
    transition: background var(--t) var(--e);
  }
  .svc:hover { background: var(--bg-soft); }

  .svc-num {
    position: absolute; inset-block-start: 1.1rem; inset-inline-end: 1.2rem;
    font-family: var(--f-num); font-size: var(--fs-xs); font-weight: 700;
    color: var(--i-300); letter-spacing: .06em;
  }
  .svc-ico {
    display: grid; place-items: center;
    width: 46px; height: 46px; margin-block-end: 1.1rem;
    border: 1px solid var(--brand-line); border-radius: var(--r1);
    background: var(--brand-soft); color: var(--brand);
    transition: background var(--t) var(--e), color var(--t) var(--e), border-color var(--t) var(--e);
  }
  .svc:hover .svc-ico { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
  .svc-ico svg { width: 23px; height: 23px; }

  .svc h3 { margin-block-end: .5rem; }
  .svc > p {
    flex: 1 1 auto; font-size: var(--fs-s); color: var(--ink-3); line-height: 1.95;
    margin-block-end: 1.1rem;
  }
  .svc-more {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: var(--fs-s); font-weight: 700; color: var(--brand);
  }
  .svc-more svg { width: 15px; height: 15px; transition: transform var(--t-f) var(--e); }
  .svc:hover .svc-more svg { transform: translateX(-4px); }

  /* نوارِ لهجه‌ی بالای کارت که با هاور باز می‌شود */
  .svc-tick {
    position: absolute; inset-block-start: 0; inset-inline: 0; height: 2px;
    background: var(--brand);
    transform: scaleX(0); transform-origin: right center;
    transition: transform var(--t) var(--e);
  }
  .svc:hover .svc-tick, .svc:focus-visible .svc-tick { transform: scaleX(1); }

  /* ═══════════════════════ درباره ═══════════════════════ */
  .about-in {
    display: grid; grid-template-columns: .85fr 1.15fr;
    align-items: center; gap: clamp(2.25rem, 1rem + 4vw, 4.5rem);
  }
  @media (max-width: 900px) {
    .about-in { grid-template-columns: 1fr; }
    .about-art { max-width: 420px; }
  }

  .about-copy > p { max-width: 52ch; font-size: var(--fs-lead); }
  .about-copy h2 { margin-block-end: 1.1rem; }

  .checklist { display: grid; gap: 1.15rem; margin-block: 2rem; }
  .checklist li {
    position: relative; padding-inline-start: 2rem;
    font-size: var(--fs-s); color: var(--ink-3); line-height: 1.9;
  }
  .checklist strong { display: block; color: var(--ink); font-size: var(--fs-b); line-height: 1.7; }
  .checklist li::before {
    content: ""; position: absolute; inset-block-start: .55rem; inset-inline-start: 0;
    width: 12px; height: 12px; border-radius: 2px;
    background: var(--brand-soft); border: 2px solid var(--brand);
  }

  /* ═══════════════════════ آمار ═══════════════════════ */
  .stats { background: var(--bg-ink); color: var(--ink-inv-2); padding-block: clamp(2.5rem, 1.4rem + 3.4vw, 4rem); }
  .stats-in { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
  @media (max-width: 760px) { .stats-in { grid-template-columns: 1fr 1fr; gap: 2rem 1rem; } }

  .stat { text-align: center; }
  .stat strong {
    display: block; font-family: var(--f-num);
    font-size: clamp(2rem, 1.2rem + 2.4vw, 3rem); line-height: 1.1;
    color: var(--ink-inv); letter-spacing: -.02em;
  }
  .stat span { display: block; margin-block-start: .5rem; font-size: var(--fs-s); color: var(--ink-inv-3); }

  /* ═══════════════════════ فرایند ═══════════════════════ */
  .steps {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 1px; background: var(--line);
    border-block: var(--hair);
  }
  @media (max-width: 900px) { .steps { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

  .step {
    position: relative; padding: clamp(1.5rem, 1rem + 1.4vw, 2.25rem) clamp(1.1rem, .8rem + 1vw, 1.75rem);
    background: var(--bg);
  }
  .step-num {
    display: block; margin-block-end: 1rem;
    font-family: var(--f-num); font-size: 1.55rem; font-weight: 700;
    color: var(--brand-line); line-height: 1;
    transition: color var(--t) var(--e);
  }
  .step:hover .step-num { color: var(--brand); }
  .step h3 { margin-block-end: .55rem; }
  .step p { font-size: var(--fs-s); color: var(--ink-3); line-height: 1.95; }
  .step-out {
    display: inline-block; margin-block-start: 1rem;
    font-size: var(--fs-xs); font-weight: 700; color: var(--ink-2);
    padding: .2rem .55rem; border-radius: var(--r1); background: var(--bg-mute);
  }

  /* ═══════════════════════ پروژه‌ها ═══════════════════════ */
  .prj-grid {
    display: grid; gap: 1.1rem;
    grid-template-columns: repeat(4, 1fr);
  }
  .prj--lead { grid-column: span 2; grid-row: span 2; }
  @media (max-width: 980px) {
    .prj-grid { grid-template-columns: repeat(2, 1fr); }
    .prj--lead { grid-column: 1 / -1; grid-row: auto; }
  }
  @media (max-width: 520px) { .prj-grid { grid-template-columns: 1fr; } }

  .prj {
    position: relative; display: flex; flex-direction: column;
    border: var(--hair); border-radius: var(--r2); background: var(--bg);
    overflow: hidden;
    transition: border-color var(--t) var(--e), transform var(--t) var(--e), box-shadow var(--t) var(--e);
  }
  .prj:hover { border-color: var(--line-2); transform: translateY(-3px); box-shadow: var(--sh2); }

  .prj-media {
    display: block; position: relative; overflow: hidden;
    aspect-ratio: 16 / 10; background: var(--bg-mute);
    background-image:
      linear-gradient(135deg, var(--i-100) 25%, transparent 25%, transparent 50%, var(--i-100) 50%, var(--i-100) 75%, transparent 75%);
    background-size: 18px 18px;
  }
  .prj--lead .prj-media { aspect-ratio: 16 / 11; }
  .prj-media img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .6s var(--e);
  }
  .prj:hover .prj-media img { transform: scale(1.04); }

  .prj-body {
    display: flex; flex-direction: column; align-items: flex-start; gap: .55rem;
    padding: 1.1rem 1.2rem 1.3rem;
  }
  .prj--lead .prj-body { padding: 1.5rem 1.6rem 1.75rem; gap: .7rem; }
  .prj-body h3 { font-size: var(--fs-s); line-height: 1.8; }
  .prj--lead .prj-body h3 { font-size: clamp(1.2rem, 1rem + .8vw, 1.6rem); }
  .prj-body > p { font-size: var(--fs-s); color: var(--ink-3); line-height: 1.9; }
  .prj-more {
    display: inline-flex; align-items: center; gap: .4rem; margin-block-start: .35rem;
    font-size: var(--fs-s); font-weight: 700; color: var(--brand);
  }
  .prj-more svg { width: 15px; height: 15px; transition: transform var(--t-f) var(--e); }
  .prj:hover .prj-more svg { transform: translateX(-4px); }

  /* ═══════════════════════ نظرات ═══════════════════════ */
  .quote {
    display: flex; flex-direction: column;
    padding: 1.75rem; background: var(--bg);
    border: var(--hair); border-radius: var(--r2);
  }
  .quote-mark { width: 26px; height: 20px; color: var(--brand-line); margin-block-end: 1rem; }
  .quote blockquote { flex: 1 1 auto; font-size: var(--fs-s); color: var(--ink-2); line-height: 2.05; }
  .quote figcaption {
    display: flex; align-items: center; gap: .75rem;
    margin-block-start: 1.5rem; padding-block-start: 1.25rem;
    border-block-start: var(--hair);
  }
  .quote figcaption img, .quote-av {
    width: 44px; height: 44px; border-radius: var(--pill); flex: none;
    object-fit: cover;
  }
  .quote-av {
    display: grid; place-items: center;
    background: var(--brand-soft); color: var(--brand);
    font-weight: 700; font-size: 1.05rem;
  }
  .quote figcaption span { display: flex; flex-direction: column; line-height: 1.6; }
  .quote figcaption strong { font-size: var(--fs-s); }
  .quote figcaption small { font-size: var(--fs-xs); color: var(--ink-3); }

  /* ═══════════════════════ مجله ═══════════════════════ */
  .post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
  @media (max-width: 900px) { .post-grid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 560px) { .post-grid { grid-template-columns: 1fr; } }

  .post { display: flex; flex-direction: column; }
  .post-media {
    display: block; overflow: hidden; margin-block-end: 1.1rem;
    aspect-ratio: 16 / 10; border-radius: var(--r2);
    background: var(--bg-mute);
    background-image:
      linear-gradient(135deg, var(--i-100) 25%, transparent 25%, transparent 50%, var(--i-100) 50%, var(--i-100) 75%, transparent 75%);
    background-size: 18px 18px;
  }
  .post-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--e); }
  .post:hover .post-media img { transform: scale(1.04); }

  .post-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem;
    margin-block-end: .6rem; font-size: var(--fs-xs); color: var(--ink-3);
  }
  .post h3 { font-size: var(--fs-h3); line-height: 1.75; }
  .post h3 a { transition: color var(--t-f) var(--e); }
  .post:hover h3 a { color: var(--brand); }
  .post-body > p { margin-block-start: .55rem; font-size: var(--fs-s); color: var(--ink-3); line-height: 1.95; }

  /* ═══════════════════════ فراخوان ═══════════════════════ */
  .cta {
    position: relative; overflow: hidden;
    padding-block: var(--sec);
    background: var(--brand-deep); color: var(--ink-inv-2);
  }
  .cta::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image:
      linear-gradient(to left, rgba(255,255,255,.06) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(100% 80% at 92% 10%, #000, transparent 70%);
            mask-image: radial-gradient(100% 80% at 92% 10%, #000, transparent 70%);
  }
  .cta-in {
    position: relative; display: grid; grid-template-columns: 1.05fr .95fr;
    align-items: start; gap: clamp(2.25rem, 1rem + 4vw, 4.5rem);
  }
  @media (max-width: 900px) { .cta-in { grid-template-columns: 1fr; } }

  .cta-copy h2 { color: var(--ink-inv); max-width: 20ch; margin-block-end: 1rem; }
  .cta-copy > p { max-width: 44ch; font-size: var(--fs-lead); }
  .cta-points {
    display: grid; gap: .75rem; margin-block-start: 2rem;
    padding-block-start: 1.75rem; border-block-start: 1px solid var(--line-inv);
    font-size: var(--fs-s);
  }
  .cta-points li { position: relative; padding-inline-start: 1.5rem; }
  .cta-points li::before {
    content: ""; position: absolute; inset-block-start: .82em; inset-inline-start: 0;
    width: 7px; height: 7px; border-radius: 2px; background: var(--a-400);
  }

  .lead {
    padding: clamp(1.4rem, 1rem + 1.4vw, 2rem);
    background: var(--bg); border-radius: var(--r3);
    box-shadow: var(--sh3);
  }
  .lead h3 { margin-block-end: 1.35rem; padding-block-end: 1rem; border-block-end: var(--hair); }
  .lead .btn { margin-block-start: .35rem; }
  .lead-note {
    margin-block-start: .9rem; font-size: var(--fs-xs); color: var(--ink-3);
    text-align: center; line-height: 1.85;
  }
  .lead-note.is-ok  { color: var(--brand-dark); font-weight: 700; }
  .lead-note.is-bad { color: #b4382d; font-weight: 700; }
  .lead.is-sending { opacity: .65; pointer-events: none; }
}


/* ========================================================================= */
@layer utilities {

  /* ظهورِ نرم هنگام اسکرول — فقط وقتی JS فعال است، وگرنه محتوا نامرئی می‌ماند */
  .js .reveal {
    opacity: 0; transform: translateY(14px);
    transition: opacity .6s var(--e) var(--d, 0ms), transform .6s var(--e) var(--d, 0ms);
  }
  .js .reveal.is-in { opacity: 1; transform: none; }

  .visually-hidden {
    position: absolute !important; width: 1px; height: 1px;
    margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
}


/* ========================================================================= */
@layer a11y {

  /* حلقه‌ی فوکوسِ یکدست — روی هر پس‌زمینه‌ای دیده می‌شود */
  :focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 3px;
    border-radius: var(--r1);
  }
  .topbar :focus-visible,
  .ft :focus-visible,
  .stats :focus-visible,
  .cta-copy :focus-visible { outline-color: var(--a-300); }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
      animation-duration: .001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .001ms !important;
      scroll-behavior: auto !important;
    }
    .js .reveal { opacity: 1; transform: none; }
  }

  @media print {
    .topbar, .nav, .cdock, .cta, .hero-grid-bg { display: none !important; }
    body { color: #000; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
  }
}