/* ===== طراحی تیره‌محور — الهام از پوستر لیگ بنیان‌گذاران: سرمه‌ای + کرم + درخششِ طلایی ===== */
  /*
   * نکته‌ی مهم درباره‌ی «background-image: url(data:image/png;base64,...)» که در
   * جاهای مختلف این فایل کنار رنگ‌های طلایی/شنی (sand) دیده می‌شود:
   * مرورگر «اینترنت سامسونگ» — که خیلی از کاربران گوشی‌های سامسونگ استفاده می‌کنند —
   * یک الگوریتم اختصاصی دارد که رنگ‌های CSS را حتی وقتی سایت صریحاً می‌گوید
   * «color-scheme: dark» دوباره و به‌اشتباه تغییر رنگ می‌دهد (این یک محدودیتِ
   * شناخته‌شده‌ی خودِ آن مرورگر است، نه چیزی که با CSS معمولی بشود کامل خاموشش کرد).
   * اما این الگوریتم روی عکس‌ها دست نمی‌برد. برای همین، رنگ‌های طلایی/شنیِ برند که
   * بیشتر در معرض این تغییرِ رنگِ ناخواسته بودند (دکمه‌ها، نشانگرها، خط‌های تزئینی)
   * علاوه بر رنگ خامِ CSS، به‌صورت یک عکسِ تک‌رنگِ بسیار کوچک (چند بایت، به‌شکل
   * data URI، بدون درخواست شبکه‌ی اضافه) هم گذاشته شده‌اند تا در همه‌ی مرورگرها،
   * از جمله اینترنت سامسونگ، دقیقاً یک رنگ ثابت دیده شوند.
   */
  :root {
    color-scheme: dark;
    /* فونت‌ها — نام واقعی اول، جایگزین پیش‌نمایش بعد */
    --f-head: "YekanBakh", "Vazirmatn", "Segoe UI", sans-serif;      /* یکان — فونت پایه‌ی سایت، تیترها */
    --f-display: "Potk", "Lalezar", "Vazirmatn", cursive;        /* پتک — نمایشی بزرگ (بدون تغییر) */
    --f-label: "YekanBakh", "Vazirmatn", sans-serif;                 /* یکان — برچسب و شماره */
    --f-body: "YekanBakh", "Vazirmatn", "Segoe UI", Tahoma, sans-serif; /* یکان — متن */

    /* طبق بازخورد کارفرما («خیلی تیره و سنگینه») پوسته‌ی تیره یک درجه روشن‌تر
       و پرجان‌تر شد (همان خانواده‌ی تیل-سرمه‌ای کاتالوگ، فقط با روشنایی بیشتر)
       تا حس سنگینی کمتر شود، بدون این‌که از فضای رنگی کاتالوگ خارج شویم. */
    --paper: #0F3E51;      /* زمینه — تیل‌-سرمه‌ای کاتالوگ، یک درجه روشن‌تر از قبل */
    --paper-2: #12475C;    /* بخش خدمات */
    --card: #1C5772;       /* سطح برجسته — تیل کاتالوگ */
    --ink: #EEE4D1;        /* کرم — متن اصلی */
    --ink-2: #A9B7C4;      /* فولادی سرد — متن فرعی */
    --muted: #71808D;
    --line: #2D5D79;
    --navy: #176E8D;       /* رنگ اصلی کاتالوگ — پرکردنِ بخش‌های تیره */
    --navy-2: #145974;
    --navy-3: #0E465C;
    --teal: #15809B;       /* لهجه‌ی تعاملی فرعی (لینک) — دقیقاً رنگ کاتالوگ */
    --teal-bright: #24BAD7;
    --sand: #C9A876;       /* طلایی مات کاتالوگ — دکمه و هایلایت و گرافیک */
    --sand-2: #DEC38D;     /* درخشش روبانِ طلایی */
    --gold-text: #E2D3B7;  /* کرمِ گرم — برای متن‌های تأکیدی */
    --green: #86BBA1;      /* سبزِ ملایم — برای متن‌های کوچک و برچسب‌ها */
    --violet: #6E5F97;     /* هاله‌ی بنفشِ محیطی */
    --on-dark: #EEE4D1;    /* کرم روی تیره */
    --on-dark-soft: #A6B4C1;
    --glass: rgba(10, 37, 48, 0.85);
    --shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
    --ease: cubic-bezier(.19, 1, .22, 1);
  }
  /* توجه: قبلاً اینجا یک پوسته‌ی روشن جایگزین وجود داشت که بسته به تنظیم
     لایت‌مود/دارک‌مود سیستم‌عامل دستگاه، رنگ‌بندی سایت را عوض می‌کرد. طبق
     درخواست کارفرما این رفتار حذف شد تا سایت در همه‌ی حالت‌ها دقیقاً همین
     پوسته‌ی تیره (بالا) را نشان دهد، مستقل از تنظیمات دستگاه کاربر. */

  * { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
  body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--f-body);
    font-size: 17px;
    line-height: 1.95;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
    padding-inline: env(safe-area-inset-left, 0) env(safe-area-inset-right, 0);
  }
  @media (max-width: 380px) { body { font-size: 15.5px; } }
  .rtl { direction: rtl; text-align: right; }
  /* رنگ و فونتِ پیش‌فرضِ قالب برای تیترها (نزدیک به مشکی، فونت Cardo) با
     اولویتی صفر روی هر h1-h6 اعمال می‌شود؛ بدون یک قاعده‌ی صریح مثل
     همین‌جا، تیترهایی که کلاس یا سکشن اختصاصی رنگ/فونت ندارند (مثلاً یک
     h2 ساده داخل .node، یا داخل .band بدون on-dark) به همان رنگ
     نزدیک‌به‌مشکی و فونت لاتین قالب برمی‌گردند: هم روی زمینه‌ی تیره‌ی
     سایت تقریباً ناخوانا می‌شوند، هم با فونت اصلی سایت (یکان‌بخش) ناهماهنگ. */
  h1, h2, h3, h4, h5, h6 {
    margin: 0; font-weight: 700; line-height: 1.45;
    color: var(--ink); font-family: var(--f-head);
    text-wrap: balance;
  }
  /* از تک‌کلمه یا عدد تنها در انتهای پاراگراف/خط جلوگیری می‌کند؛ مثلاً
     «... برای ۳ تا ۶ / ماه آینده» که روی موبایل به‌طرز زشتی می‌شکست. */
  p { margin: 0; text-wrap: pretty; }
  a { color: var(--teal); text-decoration: none; }
  ::selection { background: var(--sand); color: #241a0c; }
  img { max-width: 100%; }

  .wrap { max-width: 1120px; margin: 0 auto; padding: 0 28px; }
  .measure { max-width: 58ch; }
  @media (max-width: 480px) { .wrap { padding: 0 18px; } }
  .btn, .opt, .tab, .nav-toggle, a.hub-card { touch-action: manipulation; }

  /* ---------- scroll progress ---------- */
  .progress {
    position: fixed; inset-block-start: 0; inset-inline: 0;
    height: 3px; z-index: 90;
    background: linear-gradient(90deg, var(--teal-bright), var(--sand));
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAABCAIAAADhDz9AAAAAM0lEQVR42mNUmr2ZmeE/E8N/Zsb/UAbDf2aG/0yMMAY6lwG/SmZGJClsXEJ6GZClCNoCAKfnPulARCbSAAAAAElFTkSuQmCC);
    background-size: 100% 100%;
    transform: scaleX(0); transform-origin: right;
  }

  /* ---------- eyebrow ---------- */
  .eyebrow {
    font-family: var(--f-label); font-weight: 600;
    font-size: 12.5px; letter-spacing: 0;
    color: var(--gold-text);
    display: inline-flex; align-items: center; gap: 12px;
  }
  .eyebrow::before { content: ""; width: 30px; height: 2px; background: var(--sand); background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAFUlEQVR42mM8uaLsPwMSYGJAA4QFAL71Au5zHnrFAAAAAElFTkSuQmCC); background-size: 100% 100%; opacity: 0.6; }

  /* روی موبایل، برچسبِ خط‌دارِ بالای هیرو (مثلاً «خدمات ما») را کمی بزرگ‌تر می‌کنیم
     تا خواناتر باشد؛ اما مثل بقیه‌ی محتوای هیرو، همان‌جای همیشگی‌اش (سمت راست) می‌ماند
     و کاملاً وسط‌چین نمی‌شود. */
  @media (max-width: 640px) {
    .hero .eyebrow { font-size: 14px; }
  }

  /* ---------- top bar ---------- */
  .topbar {
    position: sticky; inset-block-start: 0; z-index: 80;
    background: var(--glass); backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
  }
  .topbar .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; }
  @media (max-width: 480px) { .topbar .wrap { height: 56px; } }
  .brand { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 17px; color: var(--ink); }
  .brand .seal {
    width: 34px; height: 34px; border-radius: 10px; background: var(--navy);
    display: grid; place-items: center; color: var(--gold-text);
    font-family: var(--f-display); font-size: 20px; line-height: 1;
    padding-bottom: 4px;
  }
  .nav-ethos { display: flex; gap: 12px; font-family: var(--f-label); font-size: 12px; letter-spacing: 0; color: var(--green); }
  .nav-ethos b { color: var(--green); font-weight: 600; }
  @media (max-width: 620px) { .nav-ethos { display: none; } }

  /* ================= HERO ================= */
  .hero {
    position: relative; overflow: hidden;
    background:
      radial-gradient(90% 70% at 78% 0%, rgba(201, 168, 118, 0.16), transparent 55%),
      radial-gradient(70% 60% at 12% 100%, rgba(110, 95, 151, 0.24), transparent 60%),
      linear-gradient(180deg, #18536B, #0C3445);
    color: var(--on-dark);
    padding: clamp(46px, 7vw, 84px) 0 clamp(64px, 8vw, 100px);
  }
  .hero .wrap { position: relative; z-index: 2; }
  .blob {
    position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.5;
    pointer-events: none; z-index: 1;
  }
  .blob.b1 { width: 460px; height: 460px; background: #1F7898; inset-block-start: -140px; inset-inline-start: -120px; opacity: 0.42; }
  .blob.b2 { width: 380px; height: 380px; background: #C9A876; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAFUlEQVR42mM8uaLsPwMSYGJAA4QFAL71Au5zHnrFAAAAAElFTkSuQmCC); background-size: cover; inset-block-end: -160px; inset-inline-end: 8%; opacity: 0.20; }
  .blob.b3 { width: 320px; height: 320px; background: #6E5F97; inset-block-start: 26%; inset-inline-end: -120px; opacity: 0.32; }
  /* روی موبایل، بلاب‌ها نسبت به عرض صفحه خیلی بزرگ‌ترند و واترمارک/متن هیرو را
     زیر خودشان محو می‌کنند؛ کمی کم‌رنگ‌ترشان می‌کنیم تا فضا برای تایپوگرافی باز شود. */
  @media (max-width: 640px) {
    .blob.b1 { opacity: 0.26; }
    .blob.b3 { opacity: 0.2; }
  }
  @media (prefers-reduced-motion: no-preference) {
    .blob.b1 { animation: drift1 20s var(--ease) infinite alternate; }
    .blob.b2 { animation: drift2 26s var(--ease) infinite alternate; }
    .blob.b3 { animation: drift1 18s var(--ease) infinite alternate-reverse; }
  }
  @keyframes drift1 { to { transform: translate(60px, 40px) scale(1.15); } }
  @keyframes drift2 { to { transform: translate(-50px, -30px) scale(1.1); } }
  .hero::after {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background-image: radial-gradient(rgba(255,255,255,0.055) 1px, transparent 1.4px);
    background-size: 24px 24px;
    mask-image: radial-gradient(120% 90% at 80% 10%, black, transparent 75%);
  }
  .hero .eyebrow { color: var(--gold-text); }

  .hero-title { margin: 26px 0 8px; }
  .hero-title .big {
    display: block;
    font-family: var(--f-display);
    font-size: clamp(3.2rem, 16vw, 7rem);
    line-height: 1.25;
    color: #fff;
    position: relative;
    width: max-content;
    max-width: 100%;
    padding-inline-start: 0.15em;
    overflow-wrap: anywhere;
  }
  /* روی موبایل، کلمه‌ی درشتِ هیرو (مثلاً «رشد») بزرگ‌تر و پرقدرت‌تر نمایش داده می‌شود. */
  @media (max-width: 640px) {
    .hero-title .big { font-size: clamp(4.2rem, 24vw, 7.5rem); }
  }
  .hero-title .big .ul {
    position: absolute; inset-inline: 0.1em 0.4em; inset-block-end: 2px; height: 14px;
    overflow: visible;
  }
  .hero-title .big .ul path {
    stroke: var(--sand); stroke-width: 5; fill: none; stroke-linecap: round;
    stroke-dasharray: 320; stroke-dashoffset: 320;
  }
  .hero-title .rest {
    display: block;
    font-family: var(--f-head); font-weight: 700;
    font-size: clamp(1.6rem, 5.2vw, 2.4rem);
    color: var(--on-dark);
    margin-top: 8px;
  }
  .hero .kick {
    color: var(--on-dark-soft); font-size: clamp(1rem, 2.3vw, 1.2rem);
    max-width: 46ch; margin-top: 22px;
  }

  /* ethos ticker */
  .ticker {
    margin-top: 44px; overflow: hidden; position: relative;
    border-block: 1px solid rgba(255,255,255,0.12);
    padding: 14px 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
            mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  }
  .ticker .track { display: flex; width: max-content; }
  @media (prefers-reduced-motion: no-preference) { .ticker .track { animation: slide 28s linear infinite; } }
  @keyframes slide { to { transform: translateX(50%); } }
  .ticker span {
    font-family: var(--f-display); font-size: 1.45rem; color: var(--gold-text);
    padding: 0 30px; white-space: nowrap;
  }
  .ticker span::before { content: "✦"; font-family: "Vazirmatn"; font-size: 0.6rem; color: var(--teal-bright); margin-inline-end: 26px; vertical-align: middle; }

  /* استکِ عکسِ کنار تیترِ هیرو — تا همان نگاهِ اول، سایت «عکس‌محور» دیده شود،
     نه فقط یک متنِ بزرگ روی یک پس‌زمینه. سه قابِ کوچکِ واقعی، پلکانی و
     کمی کج، درست زیرِ تیتر و خط می‌آیند. */
  .hero-photos { display: flex; gap: 16px; margin-top: 38px; }
  .hero-photos .hp {
    display: block; flex: 1 1 0; max-width: 168px; aspect-ratio: 3 / 4;
    border-radius: 18px; overflow: hidden; border: 1px solid rgba(255,255,255,.2);
    box-shadow: var(--shadow); background: var(--navy-2);
  }
  .hero-photos .hp img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .hero-photos .hp:nth-child(1) { transform: rotate(-3deg) translateY(10px); }
  .hero-photos .hp:nth-child(2) { transform: translateY(-10px); }
  .hero-photos .hp:nth-child(3) { transform: rotate(3deg) translateY(14px); }
  @media (max-width: 640px) {
    .hero-photos { gap: 10px; margin-top: 30px; }
    .hero-photos .hp { max-width: 104px; }
    .hero-photos .hp:nth-child(1), .hero-photos .hp:nth-child(2), .hero-photos .hp:nth-child(3) { transform: none; }
  }

  .scroll-cue {
    margin-top: 40px; display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--f-label); font-size: 12px; letter-spacing: 0;
    color: var(--green);
  }
  .scroll-cue i {
    width: 22px; height: 34px; border: 1.5px solid rgba(255,255,255,0.3); border-radius: 12px;
    position: relative; flex: none;
  }
  .scroll-cue i::after {
    content: ""; position: absolute; inset-block-start: 6px; inset-inline-start: 50%;
    width: 3px; height: 7px; border-radius: 2px; background: var(--sand); background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAFUlEQVR42mM8uaLsPwMSYGJAA4QFAL71Au5zHnrFAAAAAElFTkSuQmCC); background-size: 100% 100%; transform: translateX(-50%);
  }
  @media (prefers-reduced-motion: no-preference) { .scroll-cue i::after { animation: cue 1.6s var(--ease) infinite; } }
  @keyframes cue { 50% { transform: translate(-50%, 12px); opacity: 0.3; } }

  /* ================= STATS ================= */
  .stats { background: var(--navy-2); color: var(--on-dark); }
  .stats .wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding-block: 34px; }
  .stats .cell { text-align: center; padding: 10px 8px; position: relative; }
  .stats .cell + .cell::before {
    content: ""; position: absolute; inset-inline-start: 0; inset-block: 20% 20%;
    width: 1px; background: rgba(255,255,255,0.12);
  }
  .stats .num {
    font-family: var(--f-label); font-weight: 700;
    font-size: clamp(1.7rem, 4.5vw, 2.5rem); color: var(--gold-text);
    font-variant-numeric: tabular-nums; unicode-bidi: plaintext;
  }
  .stats .lbl { font-size: 12.5px; color: var(--green); line-height: 1.7; }
  @media (max-width: 620px) { .stats .wrap { grid-template-columns: repeat(2, 1fr); gap: 22px 4px; } }

  /* ================= SECTION SHELL ================= */
  section.band { padding: clamp(70px, 10vw, 120px) 0; position: relative; }
  section.on-dark { background: var(--navy); color: var(--on-dark); }
  section.on-dark .lead, section.on-dark h2 { color: #fff; }

  /* connector spine */
  .node { position: relative; padding-inline-start: 60px; }
  .node::before {
    content: ""; position: absolute; inset-inline-start: 19px; inset-block: 0;
    width: 2px; background: linear-gradient(var(--line), var(--line));
  }
  section.on-dark .node::before { background: rgba(255,255,255,0.12); }
  .node::after {
    content: ""; position: absolute; inset-inline-start: 12px; inset-block-start: 6px;
    width: 16px; height: 16px; border-radius: 50%;
    background-color: var(--paper); border: 2px solid transparent;
    /* حلقه‌ی دور نقطه به‌جای border رنگی، با یک عکسِ کوچکِ طلایی کشیده می‌شود؛
       چون border یک رنگِ خامِ CSS است، مرورگر اینترنت سامسونگ همین رنگ طلایی/شنی
       را در حالت تیره به آبی/فیروزه‌ای تغییر می‌دهد؛ عکس از این تغییر رنگ در امان است. */
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABBUlEQVR42u1Xyw3DIAzNCqySGbJCMkMOnDsA99wZoXskl04QMUJ2QGqNZCSEEkQoyFZVpHcB/7GN6br/urFez8cAWAAb4ABYxIF77mxooXgG7IB3JhztXENxj57FClaABiiExr2YzvH2pconDK8XZgASIBI8AmlMwOdkTCXKQ09UgQMqkjHdCXvo+fjFFY5RJPocpq2G8gsjtpxsLw575nXMKUJfaqZBKfvE3FNNxlspGxggA/nDGcESEIgGBohA/pJKvrVhK18vkxH7uTvUDQ3QqOM4O7S1sz9RDZalAeRXQJ6E5GVI24jIWzGLx4j8OWYxkJCPZCyGUhZjOYuPCZuv2U+vD2K6vj/Tqh2xAAAAAElFTkSuQmCC);
    background-size: 100% 100%;
    box-shadow: 0 0 0 0 rgba(212, 175, 131, 0.5);
    transition: box-shadow .6s var(--ease), background .4s;
  }
  section.on-dark .node::after { background-color: var(--navy); }
  .node.lit::after {
    background: var(--sand);
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAFUlEQVR42mM8uaLsPwMSYGJAA4QFAL71Au5zHnrFAAAAAElFTkSuQmCC);
    background-size: 100% 100%;
    box-shadow: 0 0 0 8px rgba(212, 175, 131, 0.14), 0 0 24px 2px rgba(212, 175, 131, 0.4);
  }
  @media (max-width: 640px) { .node { padding-inline-start: 40px; } .node::before { inset-inline-start: 7px; } .node::after { inset-inline-start: 0; } }

  .lead {
    font-size: clamp(1.15rem, 2.6vw, 1.5rem); color: var(--ink);
    font-weight: 500; line-height: 1.85;
  }
  .body-1 { color: var(--ink-2); margin-top: 20px; }
  section.on-dark .body-1 { color: var(--on-dark-soft); }
  @media (min-width: 641px) { .body-1.oneline { max-width: none; white-space: nowrap; } }
  .fade { color: var(--muted); }

  /* reveal (animates from a near-visible resting state; JS adds .in) */
  .rv { opacity: 1; }
  @media (prefers-reduced-motion: no-preference) {
    .js .rv { opacity: 0; transform: translateY(26px) scale(.96); transition: opacity .8s var(--ease), transform .9s var(--ease); }
    .js .rv.in { opacity: 1; transform: none; }
    .js .rv.d1 { transition-delay: .08s; }
    .js .rv.d2 { transition-delay: .16s; }
    .js .rv.d3 { transition-delay: .24s; }
    .js .rv.d4 { transition-delay: .32s; }
    /* درخشش لحظه‌ای تیترها هنگام ورود به دید */
    .js .node > h2.rv.in, .js .node > h3.rv.in { animation: headGlow 1.1s var(--ease); }
  }
  @keyframes headGlow { 0%, 100% { text-shadow: 0 0 0 rgba(201,168,118,0); } 40% { text-shadow: 0 0 18px rgba(201,168,118,.5); } }

  /* belief */
  .belief {
    margin: 40px 0 8px; display: flex; gap: 22px; align-items: flex-start;
  }
  .belief .bar {
    flex: none; width: 5px; align-self: stretch; min-height: 90px; border-radius: 4px;
    background: linear-gradient(var(--teal-bright), var(--sand));
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABACAIAAABUc4oXAAAAM0lEQVR42mNQmr2ZiZnhPxMTw38mZsb/CDYUMzEisbGKMRCtj5kRTQ0eMeLNY8BQQ4I7ALLWP2bkceAtAAAAAElFTkSuQmCC);
    background-size: 100% 100%;
  }
  .belief .txt {
    font-family: var(--f-display); font-size: clamp(1.5rem, 4vw, 2.4rem);
    line-height: 1.7; color: var(--ink);
  }
  section.on-dark .belief .txt { color: #fff; }

  /* triad cards */
  .triad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 48px; }
  .triad article {
    background: var(--card); border: 1px solid var(--line); border-radius: 20px;
    padding: 22px 22px; box-shadow: var(--shadow);
    transition: transform .4s var(--ease), border-color .4s, box-shadow .4s var(--ease);
  }
  .triad article:hover { transform: perspective(800px) rotateX(var(--tiltX,0deg)) rotateY(var(--tiltY,0deg)) translateY(-8px) scale(1.015); border-color: var(--sand); box-shadow: 0 22px 50px rgba(201,168,118,.14); }
  .triad .k {
    font-family: var(--f-display); font-size: 1.5rem; color: var(--gold-text);
    display: block; margin-bottom: 6px; line-height: 1.5;
  }
  .triad .t { font-size: 15px; color: var(--ink-2); }
  @media (max-width: 760px) { .triad { grid-template-columns: 1fr; } }

  /* ================= SERVICES / TABS ================= */
  .services { background: var(--paper-2); }
  .services h2 {
    font-family: var(--f-head); font-weight: 800;
    font-size: clamp(1.7rem, 4.4vw, 2.7rem); margin: 20px 0 10px; max-width: 22ch;
  }
  .services .sub { color: var(--ink-2); max-width: 46ch; margin-bottom: 46px; }

  .tabsys { display: grid; grid-template-columns: 360px 1fr; gap: 30px; align-items: start; }
  @media (max-width: 900px) { .tabsys { grid-template-columns: 1fr; } }

  .tablist { display: flex; flex-direction: column; gap: 10px; }
  @media (max-width: 900px) {
    .tablist { flex-direction: row; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
    .tablist::-webkit-scrollbar { display: none; }
  }
  .tab {
    appearance: none; border: 1px solid var(--line); background: var(--card);
    border-radius: 16px; padding: 18px 20px; cursor: pointer;
    text-align: start; color: var(--ink);
    display: grid; grid-template-columns: auto 1fr; gap: 4px 14px;
    align-items: center;
    transition: background .45s var(--ease), color .45s var(--ease), border-color .45s, transform .3s var(--ease), box-shadow .3s var(--ease);
    position: relative; overflow: hidden;
    flex: 0 0 auto; min-width: 260px;
  }
  .tab .tnum {
    grid-row: 1 / 3;
    font-family: var(--f-label); font-weight: 700; font-size: 1.1rem;
    color: var(--muted); transition: color .45s;
  }
  .tab .tt { font-family: var(--f-head); font-weight: 700; font-size: 1.02rem; line-height: 1.6; }
  .tab .td { font-size: 12.5px; color: var(--green); line-height: 1.6; transition: color .45s; }
  .tab::after {
    content: ""; position: absolute; inset-inline-end: 0; inset-block: 14px;
    width: 4px; border-radius: 4px; background: var(--sand);
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAFUlEQVR42mM8uaLsPwMSYGJAA4QFAL71Au5zHnrFAAAAAElFTkSuQmCC);
    background-size: 100% 100%;
    transform: scaleY(0); transform-origin: center; transition: transform .45s var(--ease);
  }
  .tab:hover { transform: translateX(-4px); border-color: var(--sand); box-shadow: 0 10px 26px rgba(201,168,118,.14); }
  .tab[aria-selected="true"] {
    background: linear-gradient(150deg, var(--sand-2), var(--sand));
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAIAAAAlC+aJAAACe0lEQVR42tWaW3bDIAxE6Tmz/a6q++hW1A/qR2AwY9mWwR95kAQGuJZHir9+f77TephZ+jxs+aBs+X9lZePSTjuyVDVXHRvtrhpm6Qq799aRTgeRpVffpWtyQnpuBJFOldQLb93pbqMJ0qXNLdSnlNBf+E63Z6TX49PF0KTnZzzHzO24F435AT3prRW5zswl6esU8CzuAjM67oX0/IB7QiSRznbOzUwtfT0HLCZE3oF7YoMhBHdhc62JeXudki3nwBy400iH4ULkIfa1AgziCBTcqePBK46A/FRmpjgwiCOgq38sPVtnTIR7rT5PwGbBneYsiDfAbtzrlc5h9A7cWePtuNOkBfEG2I07jfN4zBE0DXBzl+2c9O06MIIjEJmpxcLCDbAbd3rJRTzueojslhcsJYQb4BMhsnV13bfjQdyvMdMqlxSKMIgjUHBn1ZzNTg+Ju1CnQrwBbkhPZ0psm1J0M+IXQ+RRqlhU5gbDvecF9lWJiXA3VnuC00Xe7Qh0ZooxMYgjoCHyWHr9B0eQAXbjTjtCvAFWcJdzdMNEuNN8C9dDZBjulADEG+BTuHfzLcQb4KSlHlKquHOjcQb4IjPlOWCjhMiO9Fav4FsV7ghUZqoQACczFwywG3eauCPeALtxp0kLXnMEKu6dsIVHQ+Ql3LViD8qeXnIEmnTyLQziCBTc6awRb4DduNOxEW+A3bjTsTER7tTqYCLcaaqIQRyBzoxwz9zDBtiNO3H8VtwzF+gIHLjTfAvxBlhY+EPpn8+YCHc6teqeuYgQ6cSdfoiDu7ReD5HNVJH9wfGyI1BwpzUHxBtgN+506zGII9CZKRwPxsJdrG3uRvwDpI6t1Z57rDcAAAAASUVORK5CYII=);
    background-size: cover; background-position: center;
    color: #241703; border-color: var(--sand);
    box-shadow: 0 12px 30px rgba(201, 168, 118, 0.28);
  }
  .tab[aria-selected="true"] .tnum { color: #6b4a12; }
  .tab[aria-selected="true"] .td { color: rgba(36, 23, 3, 0.66); }
  .tab[aria-selected="true"]::after { transform: scaleY(1); background: #6b4a12; }

  .panelwrap { position: relative; }
  .panel {
    background: var(--card); border: 1px solid var(--line); border-radius: 24px;
    padding: 40px 38px; box-shadow: var(--shadow);
    position: relative; overflow: hidden;
  }
  @media (max-width: 520px) { .panel { padding: 28px 22px; } }
  .panel[hidden] { display: none; }
  .panel .wm {
    position: absolute; inset-block-start: -30px; inset-inline-end: -10px;
    font-family: var(--f-label); font-weight: 700;
    font-size: 12rem; line-height: 1; color: var(--paper-2);
    z-index: 0; pointer-events: none; opacity: 0.8;
  }
  .panel > * { position: relative; z-index: 1; }
  @media (prefers-reduced-motion: no-preference) {
    .panel:not([hidden]) > .pc { opacity: 0; transform: translateY(18px); animation: pcIn .55s var(--ease) forwards; }
    .panel:not([hidden]) > .pc:nth-child(2) { animation-delay: .05s; }
    .panel:not([hidden]) > .pc:nth-child(3) { animation-delay: .12s; }
    .panel:not([hidden]) > .pc:nth-child(4) { animation-delay: .19s; }
    .panel:not([hidden]) > .pc:nth-child(5) { animation-delay: .26s; }
    .panel:not([hidden]) > .pc:nth-child(6) { animation-delay: .33s; }
    .panel:not([hidden]) > .pc:nth-child(7) { animation-delay: .40s; }
  }
  @keyframes pcIn { to { opacity: 1; transform: none; } }

  .panel h3 { font-family: var(--f-display); font-size: clamp(1.7rem, 4vw, 2.4rem); color: var(--ink); line-height: 1.4; margin-bottom: 8px; }
  .panel .hl { color: var(--green); font-weight: 600; font-size: 1.05rem; margin-bottom: 18px; }
  .panel p { color: var(--ink-2); font-size: 15.5px; margin-bottom: 14px; }
  .panel .q {
    font-family: var(--f-display); font-size: clamp(1.5rem, 3.8vw, 2.1rem);
    color: var(--ink); line-height: 1.55; margin: 10px 0 16px;
  }
  .panel .q em { font-style: normal; color: var(--gold-text); }

  .plist { list-style: none; margin: 4px 0 20px; padding: 0; display: grid; gap: 16px; }
  .plist li { position: relative; padding-inline-start: 28px; color: var(--ink-2); font-size: 15px; }
  section.on-dark .plist li { color: var(--on-dark-soft); }
  .plist li::before {
    content: ""; position: absolute; inset-inline-start: 2px; inset-block-start: 10px;
    width: 9px; height: 9px; background: var(--sand); background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAFUlEQVR42mM8uaLsPwMSYGJAA4QFAL71Au5zHnrFAAAAAElFTkSuQmCC); background-size: 100% 100%; transform: rotate(45deg); border-radius: 2px;
  }
  .plist li b {
    display: block; color: var(--gold-text); font-family: var(--f-label);
    font-weight: 700; font-size: 15.5px; margin-bottom: 4px;
  }
  .plist li span { display: block; }

  .steps { display: flex; align-items: center; gap: 0; margin: 8px 0 22px; }
  .steps i { width: 11px; height: 11px; border-radius: 50%; background: var(--teal); flex: none; }
  .steps u { flex: 1; height: 2px; background: repeating-linear-gradient(90deg, var(--sand) 0 6px, transparent 6px 12px); }

  .chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 6px; }
  .chips span {
    font-size: 13px; padding: 8px 15px; border-radius: 999px;
    border: 1px solid var(--line); color: var(--ink-2); background: var(--paper);
    transition: transform .3s var(--ease), border-color .3s, color .3s;
  }
  .chips span:hover { transform: translateY(-3px); border-color: var(--teal); color: var(--teal); }

  /* ================= BUTTONS ================= */
  .btn {
    display: inline-flex; align-items: center; gap: 12px;
    font-family: var(--f-label); font-weight: 700; font-size: 15px;
    background: var(--sand);
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAFUlEQVR42mM8uaLsPwMSYGJAA4QFAL71Au5zHnrFAAAAAElFTkSuQmCC);
    background-size: 100% 100%;
    color: #241703; border: 0; cursor: pointer;
    padding: 15px 28px; border-radius: 999px;
    position: relative; overflow: hidden;
    transition: transform .25s var(--ease), box-shadow .3s;
    box-shadow: 0 12px 30px rgba(201, 168, 118, 0.24);
  }
  .btn span.t { position: relative; z-index: 1; }
  .btn .arw { position: relative; z-index: 1; transition: transform .3s var(--ease); }
  .btn::before {
    content: ""; position: absolute; inset: 0; background: var(--sand-2);
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAFUlEQVR42mO8d7j3PwMSYGJAA4QFANFBAzVakfxJAAAAAElFTkSuQmCC);
    background-size: 100% 100%;
    transform: translateX(-101%); transition: transform .4s var(--ease); z-index: 0;
  }
  .btn:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(201, 168, 118, 0.34); }
  .btn:hover::before { transform: translateX(0); }
  .btn:hover .arw { transform: translateX(-6px); }
  /* دکمه‌ی بخش «کوچینگ فردی» در صفحه‌ی اصلی: وسط‌چین و با فاصله‌ی بیشتر از متن بالای خودش */
  .coaching-cta { display: flex; width: fit-content; margin: 40px auto 0; }
  .btn.ghost {
    background: transparent; background-image: none; color: var(--ink);
    border: 1.5px solid var(--line); box-shadow: none;
  }
  .btn.ghost::before { background: var(--card); background-image: none; }
  .btn.ghost:hover { border-color: var(--sand); }
  .btn.sand { background: var(--sand); background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAFUlEQVR42mM8uaLsPwMSYGJAA4QFAL71Au5zHnrFAAAAAElFTkSuQmCC); background-size: 100% 100%; color: #241703; }
  .btn.sand::before { background: var(--sand-2); background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAFUlEQVR42mO8d7j3PwMSYGJAA4QFANFBAzVakfxJAAAAAElFTkSuQmCC); background-size: 100% 100%; }
  .btn.lg { padding: 18px 38px; font-size: 16px; }
  .btn.sm { padding: 10px 20px; font-size: 12.5px; gap: 8px; }

  /* ================= WHAT WE BUILD ================= */
  .build h2 { font-family: var(--f-head); font-weight: 800; font-size: clamp(1.7rem, 4.4vw, 2.7rem); margin: 20px 0 12px; max-width: 24ch; }
  .marquee {
    margin: 44px 0; overflow: hidden; border-block: 1px solid var(--line);
    padding: 20px 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
            mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
  }
  .marquee .track { display: flex; width: max-content; gap: 0; }
  @media (prefers-reduced-motion: no-preference) { .marquee .track { animation: slide 22s linear infinite; } }
  .marquee:hover .track { animation-play-state: paused; }
  .marquee b {
    font-family: var(--f-display); font-weight: 400; font-size: clamp(1.8rem, 5vw, 2.8rem);
    color: var(--ink); padding: 0 34px; white-space: nowrap;
  }
  section.on-dark .marquee b { color: #fff; }
  .marquee b::before { content: "•"; color: var(--gold-text); font-family: "Vazirmatn"; margin-inline-end: 30px; vertical-align: middle; }

  .punch {
    font-family: var(--f-display); font-size: clamp(1.6rem, 4.4vw, 2.6rem);
    color: var(--ink); line-height: 1.6; margin-top: 8px;
  }
  section.on-dark .punch { color: #fff; }
  .punch em { font-style: normal; color: var(--gold-text); }
  section.on-dark .punch em { color: var(--gold-text); }

  /* ================= FOUNDER ================= */
  .founder { background: var(--paper-2); }
  .founder-grid {
    display: grid; grid-template-columns: 300px 1fr; gap: 46px; align-items: start; margin-top: 10px;
  }
  @media (max-width: 820px) { .founder-grid { grid-template-columns: 1fr; gap: 26px; max-width: 460px; } }
  .portrait {
    position: relative; border-radius: 22px; overflow: hidden; aspect-ratio: 4 / 5;
    border: 1px solid var(--line); margin-top: 34px;
    background:
      radial-gradient(120% 75% at 50% 0%, rgba(222, 195, 141, 0.16), transparent 60%),
      linear-gradient(180deg, #216280, #0F3E51);
    display: grid; place-items: center;
    box-shadow: var(--shadow);
  }
  @media (max-width: 820px) { .portrait { max-width: 280px; margin: 34px auto 0; } }
  .portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .portrait .ph {
    font-family: var(--f-label); font-size: 11.5px; letter-spacing: 0;
    color: var(--on-dark-soft); text-align: center; padding: 22px; line-height: 1.9;
  }
  .portrait .ph b {
    display: block; color: var(--gold-text); font-size: 1.5rem;
    font-family: var(--f-display); letter-spacing: 0; margin-bottom: 8px;
  }
  .founder h2 {
    font-family: var(--f-display); font-size: clamp(2rem, 5vw, 3rem);
    color: var(--ink); line-height: 1.3; margin: 4px 0 6px;
  }
  .founder .role {
    font-family: var(--f-label); font-size: 13px; letter-spacing: 0;
    color: var(--green); margin-bottom: 22px;
  }
  .founder p { color: var(--ink-2); margin-bottom: 14px; font-size: 15.5px; }
  .founder .fq {
    font-family: var(--f-display); font-size: clamp(1.3rem, 3.4vw, 1.9rem);
    color: var(--ink); line-height: 1.6; margin: 20px 0;
    padding-inline-start: 18px; border-inline-start: 3px solid var(--sand);
  }
  .founder-facts { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 20px; }
  .founder-facts div { font-size: 14px; color: var(--ink-2); }
  .founder-facts b {
    color: var(--gold-text); font-family: var(--f-label); font-weight: 700;
    font-size: 1.15rem; margin-inline-end: 6px; unicode-bidi: plaintext;
  }
  .fill-note {
    margin-top: 24px; font-size: 12px; color: var(--muted); line-height: 1.9;
    border: 1px dashed var(--line); border-radius: 12px; padding: 12px 16px;
  }

  /* ---- نسخه‌ی اِدیتوریالِ بخشِ بنیان‌گذار — پرتره‌ی بزرگ‌تر + نشان‌های اعتبار ---- */
  .founder-v2 .founder-grid { grid-template-columns: 340px 1fr; }
  .founder-v2 .portrait { aspect-ratio: 3 / 4; }
  .founder-v2 .founder-intro { font-size: 17px; color: var(--ink); line-height: 1.9; margin-bottom: 22px; }
  .founder-v2 .founder-intro b { color: var(--sand); font-weight: 700; }
  .founder-badges { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 26px; }
  .founder-badges .fb {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 16px; border-radius: 999px; font-size: 13px;
    background: var(--card); border: 1px solid var(--line); color: var(--ink-2);
  }

  /* ---- تیزرِ بنیان‌گذار در صفحه‌ی اصلی — کارتِ کوچکِ کلیک‌پذیر به‌سمتِ معرفیِ کامل ---- */
  .founder-teaser { padding-top: 0; padding-bottom: clamp(50px, 8vw, 90px); }
  .ft-card {
    display: grid; grid-template-columns: 120px 1fr; gap: 24px; align-items: center;
    background: var(--card); border: 1px solid var(--line); border-radius: 22px;
    padding: 22px; color: inherit; box-shadow: var(--shadow);
    transition: border-color .35s, transform .35s var(--ease);
  }
  @media (hover: hover) and (pointer: fine) { .ft-card:hover { border-color: var(--sand); transform: translateY(-4px); } }
  .ft-photo { display: block; border-radius: 16px; overflow: hidden; aspect-ratio: 1 / 1; }
  .ft-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .ft-body h3 { font-family: var(--f-display); font-size: 1.5rem; color: var(--ink); margin: 6px 0 8px; }
  .ft-body p { color: var(--ink-2); font-size: 14px; margin-bottom: 10px; }
  @media (max-width: 560px) { .ft-card { grid-template-columns: 1fr; text-align: center; } .ft-photo { max-width: 140px; margin: 0 auto; } }

  /* ================= FINAL CTA ================= */
  .final {
    text-align: center; overflow: hidden;
    background:
      radial-gradient(520px 340px at 50% 4%, rgba(222, 195, 141, 0.3), transparent 70%),
      radial-gradient(700px 460px at 50% 120%, rgba(110, 95, 151, 0.28), transparent 65%),
      linear-gradient(180deg, #21627E, #0F3E51);
  }
  .final .wrap { position: relative; z-index: 2; }
  /*
   * قبلاً این تیتر با یک افکت متحرکِ درجه‌بندی‌شده (gradient متن) رسم می‌شد که
   * بسته به لحظه‌ی عکس‌گیری/مرورگر، گاهی رنگش کدر و کم‌خوانا به نظر می‌رسید.
   * حالا یک رنگ طلاییِ ثابت و پرکنتراست با درخشش ملایم استفاده می‌شود تا در
   * هر لحظه و هر دستگاهی یکسان و خوانا دیده شود، و فاصله‌اش با زیرنویس هم
   * بیشتر شده تا فشرده به نظر نرسد.
   */
  .final .z {
    font-family: var(--f-display); font-size: clamp(3.4rem, 12vw, 7rem);
    line-height: 1.4; margin-bottom: 18px;
    color: var(--sand-2);
    text-shadow: 0 0 30px rgba(222, 195, 141, 0.45);
  }
  .final h2 { font-family: var(--f-head); font-weight: 700; font-size: clamp(1.3rem, 3.4vw, 1.9rem); color: var(--gold-text); margin-bottom: 18px; }
  @media (max-width: 640px) { .final .z { margin-bottom: 22px; } }
  .final p { color: var(--on-dark-soft); max-width: 42ch; margin: 0 auto 34px; }

  :focus-visible { outline: 3px solid var(--sand); outline-offset: 3px; border-radius: 6px; }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
    html { scroll-behavior: auto; }
  }

  /* ================= ACADEMY SERVICE GRID ================= */
  .svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 34px; }
  /* فاصله‌ی بیشتر بین متنِ توضیحِ بخش و شبکه‌ی کارت‌های خدمات؛ روی موبایل حتی بیشتر،
     چون آنجا این فاصله در کنار عرض کم صفحه به‌چشم می‌آید و کم به‌نظر می‌رسید. */
  .svc-grid-spaced { margin-top: 44px; }
  @media (max-width: 640px) { .svc-grid-spaced { margin-top: 54px; } }
  .svc-card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 22px 20px; transition: transform .35s var(--ease), border-color .35s, box-shadow .35s var(--ease); }
  section.on-dark .svc-card { background: var(--navy-2); border-color: rgba(255,255,255,.12); }
  .svc-card:hover { transform: perspective(800px) rotateX(var(--tiltX,0deg)) rotateY(var(--tiltY,0deg)) translateY(-6px) scale(1.015); border-color: var(--sand); box-shadow: 0 20px 45px rgba(201,168,118,.16); }
  .svc-icon { display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 16px; background: color-mix(in srgb, var(--sand) 14%, transparent); background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAFUlEQVR42mM8uaJMhQEJMDGgAcICAIg1AhO9q5AKAAAAAElFTkSuQmCC); background-size: 100% 100%; margin-bottom: 14px; transition: transform .35s var(--ease), background .35s; flex: none; }
  /* چرخش هاورِ آیکون فقط برای ماوسِ دقیق (دسکتاپ) فعال است؛ روی موبایل، تپ‌کردن هم
     همین حالتِ hover را «گیر می‌انداخت» و آیکون چرخیده و بزرگ‌شده باقی می‌ماند. */
  @media (hover: hover) and (pointer: fine) {
    .svc-card:hover .svc-icon { transform: scale(1.1) rotate(-6deg); background: color-mix(in srgb, var(--sand) 24%, transparent); background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAFUlEQVR42mM8uaLMlgEJMDGgAcICAI51AiwKaIYnAAAAAElFTkSuQmCC); background-size: 100% 100%; }
  }
  .svc-icon-svg { width: 27px; height: 27px; color: var(--sand); }
  /* سرِ کارت‌های خدمات (صفحه‌ی مدرسه‌ی کسب‌وکار): آیکون و عنوان کنار هم، به‌جای
     آیکونِ تنها بالای متن — هم آیکون فضای بیشتری می‌گیرد هم فاصله‌اش با عنوان یکدست می‌ماند. */
  .svc-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
  .svc-card .svc-head .svc-icon { margin-bottom: 0; }
  .svc-card .svc-head h4 { margin: 0; }
  .svc-card .svc-tagline { font-family: var(--f-label); color: var(--sand); font-weight: 700; font-size: 13px; letter-spacing: 0; margin: 0 0 8px; }
  section.on-dark .svc-card .svc-tagline { color: var(--gold-text); }
  .svc-pricing { border-top: 1px solid var(--line); padding-top: 12px; margin-bottom: 14px; }
  section.on-dark .svc-pricing { border-color: rgba(255,255,255,.12); }
  .svc-price-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 4px 0; font-size: 13px; }
  .svc-price-row .lbl { color: var(--ink-2); }
  section.on-dark .svc-price-row .lbl { color: var(--on-dark-soft); }
  .svc-price-row .amt { font-family: var(--f-label); color: var(--gold-text); font-weight: 700; white-space: nowrap; }
  .svc-card h4 { font-family: var(--f-head); font-size: 1.05rem; color: var(--ink); margin: 10px 0 10px; line-height: 1.6; }
  section.on-dark .svc-card h4 { color: #fff; }
  .svc-card p { color: var(--ink-2); font-size: 13.5px; line-height: 1.9; margin: 0; }
  /* ردیف دکمه‌های کارت خدمات (صفحه‌ی خدمات): دو دکمه کنار هم و هم‌اندازه؛
     وقتی فقط یک دکمه هست (اکثر کارت‌ها)، به‌جای تمام‌عرض، سمت چپ کارت می‌نشیند. */
  .svc-actions { display: flex; gap: 10px; }
  .svc-actions .btn { flex: 1; justify-content: center; }
  .svc-actions.single { justify-content: flex-end; }
  .svc-actions.single .btn { flex: none; }
  @media (max-width: 380px) { .svc-actions { flex-direction: column; } .svc-actions .btn { width: 100%; } .svc-actions.single .btn { width: auto; } }
  section.on-dark .svc-card p { color: var(--on-dark-soft); }
  @media (max-width: 900px) { .svc-grid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 560px) { .svc-grid { grid-template-columns: 1fr; } }

  /* ---- خوشه‌های خدمات آموزشی: هر عکس، راهنمای دو کارتِ مرتبط با خودش —
     به‌جای یک شبکه‌ی آیکونیِ خشک و یک ردیفِ عکسِ بی‌ربط زیرش، عکس و کارت‌ها
     یک واحدِ بصری‌اند. ---- */
  .svc-cluster-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 8px; }
  .svc-cluster { display: flex; flex-direction: column; gap: 14px; }
  .svc-cluster .sc-media { display: block; border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 3; box-shadow: var(--shadow); }
  .svc-cluster .sc-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
  @media (hover: hover) and (pointer: fine) { .svc-cluster:hover .sc-media img { transform: scale(1.06); } }
  .svc-cluster .svc-card { padding: 20px 20px; }
  /* نکته: اینجا عمداً پلکان دوستونه حذف شده — با ۳ خوشه، چیدمان دوستونه یکی از
     آن‌ها را تنها و بی‌ربط به بقیه در ردیف بعد رها می‌کند (انگار عکس آخر از
     کارت‌هایش جدا افتاده)؛ به‌جایش مستقیم روی موبایل/تبلت تک‌ستونه می‌شویم تا
     هر عکس همیشه بالای دو کارتِ خودش بماند. */
  @media (max-width: 900px) { .svc-cluster-grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } }

  /* ================= LEAD FORM (کوچینگ فردی) ================= */
  .lead-section { scroll-margin-top: 80px; }
  .lead-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: start; }
  @media (max-width: 860px) { .lead-grid { grid-template-columns: 1fr; } }
  .lead-card {
    background: var(--card); border: 1px solid var(--line); border-radius: 20px;
    padding: 30px 26px; box-shadow: var(--shadow);
  }
  .lead-card h3 { font-family: var(--f-head); font-weight: 800; font-size: 1.3rem; color: var(--ink); margin-bottom: 6px; }
  .lead-card .sub { color: var(--ink-2); font-size: 13.5px; line-height: 1.9; margin-bottom: 22px; }
  .lead-field { margin-bottom: 18px; }
  .lead-field label { display: block; font-weight: 700; color: var(--ink); margin-bottom: 8px; font-size: 14px; }
  .lead-field input, .lead-field select {
    width: 100%; font-family: var(--f-body); font-size: 16px; color: var(--ink);
    background: var(--paper-2); border: 1px solid var(--line); border-radius: 12px;
    padding: 13px 16px;
  }
  .lead-field select { cursor: pointer; }
  .lead-field input::placeholder { color: var(--muted); }
  .lead-field input:focus, .lead-field select:focus { outline: none; border-color: var(--sand); box-shadow: 0 0 0 3px rgba(201,168,118,.16); }
  .lead-alert { border-radius: 12px; padding: 13px 16px; font-size: 13.5px; margin-bottom: 18px; line-height: 1.8; }
  .lead-alert.err { background: color-mix(in srgb, var(--danger) 14%, var(--card)); border: 1px solid var(--danger); color: var(--danger); }
  .lead-alert.ok { background: color-mix(in srgb, var(--green) 14%, var(--card)); border: 1px solid var(--green); color: var(--green); }
  .lead-note { font-size: 12.5px; color: var(--muted); margin-top: 16px; text-align: center; }

  /* ================= PATH COMPARE (LEAGUE) ================= */
  .path-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 34px; }
  @media (max-width: 760px) { .path-grid { grid-template-columns: 1fr; } }
  .path-card { background: var(--navy-2); border: 1px solid rgba(255,255,255,.12); border-radius: 22px; padding: 30px 26px; transition: transform .4s var(--ease), border-color .4s, box-shadow .4s var(--ease); }
  .path-card:hover { transform: perspective(800px) rotateX(var(--tiltX,0deg)) rotateY(var(--tiltY,0deg)) translateY(-6px); border-color: var(--sand); box-shadow: 0 20px 50px rgba(0,0,0,.35); }
  .path-card h3 { font-family: var(--f-display); font-size: 1.6rem; color: #fff; margin: 4px 0 0; }
  .path-card .tag { font-family: var(--f-label); font-size: 12px; color: var(--gold-text); letter-spacing: 0; }
  .path-card ul { list-style: none; margin: 20px 0; padding: 0; display: grid; gap: 12px; }
  .path-card ul li { position: relative; padding-inline-start: 22px; font-size: 14px; color: var(--on-dark-soft); line-height: 1.85; }
  .path-card ul li::before {
    content: ""; position: absolute; inset-inline-start: 2px; inset-block-start: 8px;
    width: 7px; height: 7px; background: var(--sand); background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAFUlEQVR42mM8uaLsPwMSYGJAA4QFAL71Au5zHnrFAAAAAElFTkSuQmCC); background-size: 100% 100%; transform: rotate(45deg); border-radius: 2px;
  }
  .path-card ul li b { color: #fff; font-family: var(--f-head); font-weight: 600; }
  .path-card .out { font-size: 13px; color: var(--green); font-weight: 700; border-top: 1px dashed rgba(255,255,255,.14); padding-top: 14px; margin-top: 6px; text-wrap: pretty; }
  @media (max-width: 480px) { .path-card .out { font-size: 11.5px; letter-spacing: 0; } }

  /* ---- نسخه‌ی عکس‌دارِ کارتِ مسیر — عکس به‌جای ردیفِ جداگانه‌ی زیرِ هر دو
     کارت، حالا بالای خودِ همان کارت می‌نشیند؛ هر مسیر، عکسِ خودش را دارد. ---- */
  .path-card.has-photo { padding: 0; overflow: hidden; }
  .path-card.has-photo .pc-media { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
  .path-card.has-photo .pc-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
  .path-card.has-photo .pc-body { padding: 28px 26px 30px; }
  .path-card.has-photo .pc-body ul { margin-top: 18px; }
  @media (hover: hover) and (pointer: fine) { .path-card.has-photo:hover .pc-media img { transform: scale(1.06); } }

  /* ================= PHASE TRACK ================= */
  .phase-track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 36px; }
  @media (max-width: 760px) { .phase-track { grid-template-columns: 1fr 1fr; } }
  .phase-track .ph-step { text-align: center; }
  .phase-track .ph-num { width: 46px; height: 46px; border-radius: 13px; margin: 0 auto 12px; display: grid; place-items: center; font-family: var(--f-label); font-weight: 700; color: #fff; }
  .phase-track .t1 .ph-num { background: #6E5F97; }
  .phase-track .t2 .ph-num { background: #15809B; }
  .phase-track .t3 .ph-num { background: #229BB3; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAFUlEQVR42mNUmr35PwMSYGJAA4QFAJ9jAneJVip+AAAAAElFTkSuQmCC); background-size: cover; }
  .phase-track .t4 .ph-num { background: var(--sand); background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAFUlEQVR42mM8uaLsPwMSYGJAA4QFAL71Au5zHnrFAAAAAElFTkSuQmCC); background-size: cover; color: #241703; }
  .phase-track h5 { font-family: var(--f-head); font-size: .98rem; color: var(--ink); margin: 0 0 4px; }
  section.on-dark .phase-track h5 { color: #fff; }
  .phase-track p { font-size: 12.5px; color: var(--ink-2); margin: 0; }
  section.on-dark .phase-track p { color: var(--on-dark-soft); }

  .judge-flow { margin-top: 30px; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; font-family: var(--f-label); font-size: 13px; border: 1px solid var(--line); border-radius: 999px; padding: 14px 22px; }
  section.on-dark .judge-flow { border-color: rgba(255,255,255,.12); }
  .judge-flow span:not(.arrow) { color: var(--ink); }
  section.on-dark .judge-flow span:not(.arrow) { color: #fff; }
  .judge-flow .arrow { color: var(--muted); }
  section.on-dark .judge-flow .arrow { color: var(--sand); }
  /* روی موبایل جا برای همه‌ی مراحل در یک ردیف کافی نیست؛ به‌جای شکستن به چند
     خط، در یک خط نگه می‌داریم و با اسکرول افقی قابل دیدن می‌کنیم. */
  @media (max-width: 640px) {
    .judge-flow {
      flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto;
      -webkit-overflow-scrolling: touch; scrollbar-width: none; font-size: 12px;
      padding: 12px 18px;
    }
    .judge-flow::-webkit-scrollbar { display: none; }
    .judge-flow span:not(.arrow) { white-space: nowrap; }
  }

  /* ================= REMAIN CARDS (4-col) ================= */
  .remain-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 36px; }
  @media (max-width: 900px) { .remain-grid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 560px) { .remain-grid { grid-template-columns: 1fr; } }
  .remain-grid .rc { background: var(--navy-2); border: 1px solid rgba(255,255,255,.12); border-radius: 18px; padding: 22px 18px; text-align: center; transition: transform .35s var(--ease), border-color .35s, box-shadow .35s var(--ease); }
  .remain-grid .rc:hover { transform: perspective(800px) rotateX(var(--tiltX,0deg)) rotateY(var(--tiltY,0deg)) translateY(-5px); border-color: var(--sand); box-shadow: 0 16px 36px rgba(0,0,0,.3); }
  .remain-grid .rc h5 { font-family: var(--f-head); font-size: 1rem; color: var(--gold-text); margin: 0 0 10px; }
  .remain-grid .rc p { font-size: 13px; color: var(--on-dark-soft); line-height: 1.85; margin: 0; }
  .remain-grid .rc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; text-align: start; }
  .remain-grid .rc ul li { position: relative; padding-inline-start: 15px; font-size: 12.5px; color: var(--on-dark-soft); line-height: 1.8; }
  .remain-grid .rc ul li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--sand); background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAFUlEQVR42mM8uaLsPwMSYGJAA4QFAL71Au5zHnrFAAAAAElFTkSuQmCC); background-size: 100% 100%; }

  /* ---- خروجیِ کوچینگ: کنارِ شبکه‌ی ۲×۲ متن، یک عکسِ همراه — به‌جای یک
     بخشِ کاملاً متنی، یک نگاهِ تصویری هم به چشم می‌آید. ---- */
  .outcomes-split { display: grid; grid-template-columns: 1.15fr .85fr; gap: 28px; align-items: stretch; margin-top: 36px; }
  .remain-grid.compact { grid-template-columns: repeat(2, 1fr); margin-top: 0; }
  .outcomes-split .oc-media { display: block; border-radius: 20px; overflow: hidden; box-shadow: var(--shadow); min-height: 220px; }
  .outcomes-split .oc-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
  @media (max-width: 860px) {
    .outcomes-split { grid-template-columns: 1fr; }
    .outcomes-split .oc-media { order: -1; aspect-ratio: 16 / 9; min-height: 0; }
    .remain-grid.compact { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 560px) { .remain-grid.compact { grid-template-columns: 1fr; } }

  /* ================= CONTACT BLOCK ================= */
  .contact-block { display: flex; flex-wrap: wrap; gap: 12px 30px; margin-top: 26px; font-size: 13.5px; color: var(--ink-2); }
  section.on-dark .contact-block { color: var(--on-dark-soft); }
  .contact-block span { white-space: nowrap; }
  .contact-block b { color: var(--gold-text); font-family: var(--f-label); margin-inline-end: 6px; }

  /* ================= FOOTER (کامل) ================= */
  /* توجه: پس‌زمینه‌ی فوتر همیشه تیره است (var(--navy-2))، چه سایت در حالت روشن باشد چه تیره؛
     پس رنگ متن‌های آن باید همیشه از توکن‌های on-dark استفاده کند، نه ink/ink-2 که با تغییر
     تم روشن/تیره عوض می‌شوند و باعث متن تیره روی زمینه‌ی تیره (نامرئی) می‌شدند. */
  footer.foot { background: var(--navy-2); color: var(--on-dark-soft); position: relative; padding-top: 8px; }
  footer.foot::before {
    content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--sand) 50%, transparent);
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAABCAYAAABubagXAAAAKklEQVR42mM8uaKMgYGBgQML5sQhTq46XGoZGBgYfqDh71jEcOHvlKgDAMhtIOnuXwwDAAAAAElFTkSuQmCC);
    background-size: 100% 100%;
    opacity: .55;
  }
  .foot-top {
    display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 32px 28px;
    padding: 56px 0 40px; border-bottom: 1px solid rgba(255,255,255,.1);
  }
  .foot-brand .foot-logo { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-head); font-weight: 700; font-size: 15px; color: #fff; }
  .foot-brand .foot-logo img { width: 28px; height: 28px; border-radius: 9px; flex: none; }
  .foot-tag { margin-top: 16px; font-size: 13px; line-height: 1.95; max-width: 34ch; color: var(--on-dark-soft); }
  .foot-social { display: flex; gap: 10px; margin-top: 22px; }
  .foot-social a {
    width: 36px; height: 36px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.06); color: var(--on-dark-soft);
    transition: background .3s var(--ease), color .3s, transform .3s var(--ease);
  }
  .foot-social a svg { width: 17px; height: 17px; }
  .foot-social a:hover { background: color-mix(in srgb, var(--sand) 22%, transparent); background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAFUlEQVR42mM8uaLMggEJMDGgAcICAI01AieAi872AAAAAElFTkSuQmCC); background-size: 100% 100%; color: var(--sand-2); transform: translateY(-3px); }
  .foot-col { display: flex; flex-direction: column; }
  .foot-col h5 { font-family: var(--f-label); font-size: 11.5px; letter-spacing: 0; color: var(--sand-2); font-weight: 700; margin: 0 0 16px; }
  .foot-col a {
    color: var(--on-dark-soft); font-size: 13.5px; line-height: 2.5; text-decoration: none;
    display: inline-flex; align-items: center; gap: 9px; width: max-content; max-width: 100%;
    transition: color .25s, transform .25s var(--ease);
  }
  .foot-col a:hover { color: var(--sand-2); transform: translateX(3px); }
  .foot-col a svg { width: 15px; height: 15px; flex: none; color: var(--sand); opacity: .85; }
  /* عنوان این ستون دیگر یک کلیدواژه‌ی کوتاه نیست، یک جمله‌ی کامل است؛ فاصله‌ی حروفِ
     زیادِ سبکِ لیبل باعث می‌شد بدشکل و سخت‌خوان به نظر برسد، اینجا برایش مناسب‌سازی می‌شود. */
  .foot-cta h5 { font-size: 13.5px; letter-spacing: 0; line-height: 1.6; max-width: 22ch; }
  .foot-cta-txt { font-size: 13px; line-height: 1.9; color: var(--on-dark-soft); margin: 0 0 16px; max-width: 24ch; }
  /* دکمه‌ی «گزارش نقطه صفر» داخل فوتر نسبت به متن کوچکِ همین ستون خیلی بزرگ به نظر
     می‌رسید؛ چون کلاس sm تا اینجا اندازه‌ی جداگانه‌ای تعریف نکرده بود و از سایز
     پیش‌فرض دکمه‌ها استفاده می‌کرد. */
  .foot-cta .btn.sand.sm { width: max-content; padding: 10px 20px; font-size: 12.5px; gap: 8px; }
  .foot-bottom { padding: 20px 0; display: flex; align-items: center; justify-content: center; }
  .foot-copy { font-size: 12px; color: color-mix(in srgb, var(--on-dark-soft) 65%, transparent); direction: rtl; }

  @media (max-width: 860px) {
    .foot-top { grid-template-columns: 1fr 1fr; row-gap: 36px; }
    .foot-brand { grid-column: 1 / -1; }
  }
  @media (max-width: 560px) {
    .foot-top { grid-template-columns: 1fr; text-align: center; padding: 48px 0 32px; }
    .foot-brand .foot-logo, .foot-tag, .foot-social, .foot-col a, .foot-cta-txt, .foot-cta h5 { margin-inline: auto; }
    .foot-social { justify-content: center; }
    .foot-col a { width: auto; }
  }

/* ================= SITE NAVIGATION ================= */
.topbar .wrap.navwrap { gap: 22px; }
.nav-links { display: flex; gap: 28px; font-family: var(--f-label); font-size: 13.5px; }
.nav-links a { color: var(--ink-2); position: relative; padding-bottom: 4px; transition: color .25s; }
.nav-links a:hover { color: var(--ink); }
.nav-links a.active { color: var(--sand); }
.nav-links a.active::after {
  content: ""; position: absolute; inset-inline: 0; inset-block-end: -2px;
  height: 2px; background: var(--sand);
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAFUlEQVR42mM8uaLsPwMSYGJAA4QFAL71Au5zHnrFAAAAAElFTkSuQmCC);
  background-size: 100% 100%;
  border-radius: 2px;
}
.nav-right { display: flex; align-items: center; gap: 14px; margin-inline-start: auto; }
.nav-cta { padding: 10px 20px; font-size: 12.5px; }
.nav-toggle {
  display: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  background: none; border: 0; cursor: pointer; padding: 6px; width: 34px; height: 34px; position: relative;
}
.nav-toggle span { width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .32s var(--ease), opacity .32s var(--ease); }
.nav-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---- منوی موبایل: پنل کارت‌مانند با آیکون، حالتِ فعالِ برجسته و ورودِ پلکانی ---- */
.nav-mobile {
  display: none; flex-direction: column; gap: 3px;
  background: var(--paper); border-top: 1px solid var(--line);
  padding: 12px; border-radius: 0 0 20px 20px; box-shadow: 0 24px 46px rgba(0,0,0,.22);
}
.nav-mobile a {
  display: flex; align-items: center; gap: 13px;
  padding: 12px 14px; border-radius: 13px; border-bottom: 0;
  color: var(--ink-2); font-family: var(--f-label); font-size: 14px;
  transition: background .25s var(--ease), color .25s;
}
.nav-mobile a:active { background: color-mix(in srgb, var(--sand) 12%, transparent); background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAFUlEQVR42mM8uaJMngEJMDGgAcICAIb1Ag6GVxohAAAAAElFTkSuQmCC); background-size: 100% 100%; }
.nav-mobile .mnav-ic {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 34px; height: 34px; border-radius: 10px;
  background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink-2);
  transition: background .25s, color .25s;
}
.nav-mobile .mnav-ic svg { width: 16px; height: 16px; }
.nav-mobile a.active { color: var(--sand); background: color-mix(in srgb, var(--sand) 9%, transparent); background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAFUlEQVR42mM8uaJMnAEJMDGgAcICAIT1AgbD6541AAAAAElFTkSuQmCC); background-size: 100% 100%; }
.nav-mobile a.active .mnav-ic { background: var(--sand); background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAFUlEQVR42mM8uaLsPwMSYGJAA4QFAL71Au5zHnrFAAAAAElFTkSuQmCC); background-size: 100% 100%; color: #241703; }
.nav-mobile .mnav-div { height: 1px; background: var(--line); margin: 8px 8px; flex: none; }
.nav-mobile .mnav-cta { background: var(--sand); background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAFUlEQVR42mM8uaLsPwMSYGJAA4QFAL71Au5zHnrFAAAAAElFTkSuQmCC); background-size: 100% 100%; color: #241703; font-weight: 700; justify-content: center; margin-top: 2px; }
.nav-mobile .mnav-cta .mnav-ic { background: rgba(36,23,3,.14); color: #241703; }
.nav-mobile.open { display: flex; }
@media (prefers-reduced-motion: no-preference) {
  .nav-mobile.open { animation: mnavPanelIn .32s var(--ease); }
  .nav-mobile.open a { opacity: 0; transform: translateY(-8px); animation: mnavItemIn .42s var(--ease) forwards; }
  .nav-mobile.open a:nth-child(1) { animation-delay: .03s; }
  .nav-mobile.open a:nth-child(2) { animation-delay: .07s; }
  .nav-mobile.open a:nth-child(3) { animation-delay: .11s; }
  .nav-mobile.open a:nth-child(4) { animation-delay: .15s; }
  .nav-mobile.open a:nth-child(5) { animation-delay: .19s; }
  .nav-mobile.open a:nth-child(6) { animation-delay: .23s; }
  .nav-mobile.open a:nth-child(7) { animation-delay: .27s; }
  .nav-mobile.open a:nth-child(8) { animation-delay: .31s; }
  @keyframes mnavPanelIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
  @keyframes mnavItemIn { to { opacity: 1; transform: none; } }
}
/* توجه: آستانه‌ی ۱۰۶۰px (نه ۷۶۰px) عمداً انتخاب شده — زیر همین عرض، مجموع
   عرض لوگو + منو + دو دکمه از فضای واقعی ناوبری بیشتر می‌شود و دکمه‌ها به‌شکل
   بیضی/دایره‌ی فشرده و ناخوانا درمی‌آیند؛ در این بازه منو به همبرگری تبدیل می‌شود. */
@media (max-width: 1060px) {
  .nav-links, .nav-cta { display: none; }
  .nav-toggle { display: flex; }
}

/* ================= PAGE HEADER (academy / league) ================= */
.hero.small { padding: clamp(40px, 6vw, 64px) 0 clamp(46px, 6vw, 70px); }
/* روی موبایل، همین پدینگ کف هیرو کافی نبود: آخرین خط متنِ کیک تقریباً به لبه‌ی
   پایین هیرو می‌چسبید و محوشدگیِ زیرِ آن را شلوغ/فشرده نشان می‌داد. کمی فاصله‌ی
   بیشتر می‌دهیم تا متن نفس بکشد. */
@media (max-width: 640px) {
  .hero.small { padding-bottom: clamp(84px, 20vw, 108px); }
}
/* وقتی هیرو بلافاصله با یک بخش تخت دنبال می‌شود، ته‌رنگ تیره‌ی هیرو (که خودش یک
   گرادیانت است) با رنگ بخش بعدی یک‌مرتبه و بی‌مقدمه عوض می‌شد و یک «خط» دیده می‌شد.
   به‌جای سایه‌ی محو (که لبه‌اش هنوز محسوس بود)، یک گرادیانت واقعی و چندمرحله‌ای روی
   پایین هیرو می‌کشیم که خیلی دیر و آرام شروع می‌شود (تا زیرِ متن خلوت بماند) و به‌آرامی
   به رنگ دقیق بخش بعدی می‌رسد — یک محو مدرن، صاف و ملایم، بدون خط برش. */
.hero.seam-soften { position: relative; }
.hero.seam-soften::before {
  content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; z-index: 1;
  height: min(38%, 170px); pointer-events: none;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 25%,
    color-mix(in srgb, var(--navy) 14%, transparent) 48%,
    color-mix(in srgb, var(--navy) 45%, transparent) 68%,
    color-mix(in srgb, var(--navy) 78%, transparent) 86%,
    var(--navy) 100%
  );
}
@media (max-width: 640px) { .hero.seam-soften::before { height: min(46%, 150px); } }
/* صفحاتی که بلافاصله بعد از هیرو یک بخش «on-dark» ندارند (رنگ‌شان var(--paper) است،
   نه var(--navy))، از این حالت استفاده می‌کنند تا محو با رنگ واقعی بخش بعدی هماهنگ باشد. */
.hero.seam-soften.to-paper::before {
  background: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 25%,
    color-mix(in srgb, var(--paper) 14%, transparent) 48%,
    color-mix(in srgb, var(--paper) 45%, transparent) 68%,
    color-mix(in srgb, var(--paper) 78%, transparent) 86%,
    var(--paper) 100%
  );
}
.page-title {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(2.3rem, 6.6vw, 3.8rem); color: #fff; margin: 18px 0 6px; line-height: 1.3;
}

/* ================= HOME HUB CARDS (academy/league teasers) ================= */
.hub-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 44px; }
@media (max-width: 760px) { .hub-grid { grid-template-columns: 1fr; } }
.hub-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 24px;
  padding: 36px 32px; position: relative; overflow: hidden; box-shadow: var(--shadow);
  transition: transform .4s var(--ease), border-color .4s, box-shadow .4s var(--ease); display: block; color: inherit;
}
/* اثر برجسته‌شدن هنگام هاور، فقط روی دستگاه‌هایی با ماوس واقعی فعال است؛
   وگرنه روی موبایل، با تپ‌کردن روی این کارت‌های قابل‌کلیک، حالت هاور «گیر»
   می‌کند و اسکیل‌شدن/سایه‌ی بزرگ باعث می‌شود کارت از قاب خودش بیرون بزند. */
@media (hover: hover) and (pointer: fine) {
  .hub-card:hover { transform: perspective(800px) rotateX(var(--tiltX,0deg)) rotateY(var(--tiltY,0deg)) translateY(-8px) scale(1.01); border-color: var(--sand); box-shadow: 0 26px 60px rgba(201,168,118,.16); }
  .hub-card:hover .hub-go .arw { transform: translateX(-4px); }
}
/* نسخه‌ی عمومیِ hub-facts — برای جاهایی که این لیستِ آمار دیگر داخلِ کارت نیست
   (مثلاً داخلِ ماژول‌های تمام‌عرضِ photo-lead). */
.hub-facts { display: flex; gap: 18px; flex-wrap: wrap; margin: 18px 0 24px; }
.hub-facts span { font-size: 12.5px; color: var(--muted); }
.hub-facts b { color: var(--gold-text); font-family: var(--f-label); margin-inline-end: 4px; unicode-bidi: plaintext; }
section.on-dark .hub-facts span { color: var(--on-dark-soft); }

.hub-card .hub-eyebrow { font-family: var(--f-label); font-size: 12px; letter-spacing: 0; color: var(--green); }
.hub-card h3 { font-family: var(--f-display); font-size: clamp(1.6rem, 4vw, 2.1rem); color: var(--ink); margin: 14px 0 12px; line-height: 1.4; }
.hub-card p { color: var(--ink-2); font-size: 14.5px; line-height: 1.9; margin-bottom: 22px; }
.hub-card .hub-facts { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 24px; }
.hub-card .hub-facts span { font-size: 12.5px; color: var(--muted); }
.hub-card .hub-facts b { color: var(--gold-text); font-family: var(--f-label); margin-inline-end: 4px; unicode-bidi: plaintext; }
.hub-card .hub-go { font-family: var(--f-label); font-size: 13.5px; font-weight: 700; color: var(--sand); display: inline-flex; align-items: center; gap: 8px; }
.hub-card .hub-go .arw { transition: transform .3s var(--ease); }

/* عکس معرفی، بالای هر کارت مسیر همکاری؛ چسبیده به لبه‌های کارت (کارت خودش
   overflow:hidden و border-radius دارد، پس عکس گوشه‌ی جداگانه لازم ندارد). */
.hub-card .photo-frame {
  margin: -36px -32px 24px; border-radius: 0; border: 0; box-shadow: none;
  aspect-ratio: 16 / 9;
}
@media (max-width: 480px) { .hub-card { padding: 28px 22px; } .hub-card .photo-frame { margin: -28px -22px 22px; } }

/* ---- نسخه‌ی «عکس‌محور» کارت‌های مسیر همکاری (مدرسه کسب‌وکار / لیگ کارآفرینی) ----
   به‌جای کارتِ کاغذیِ روشن با یک عکسِ کوچک بالا، کل کارت یک عکسِ واقعیِ
   تمام‌قد با گرادیانِ تیره روی آن است و متن، سفید و روی عکس می‌نشیند؛ وایبِ
   بصریِ کاملاً متفاوت و عکس‌محور، طبق خواسته‌ی کارفرما. */
.hub-card--photo { padding: 0; min-height: 460px; display: flex; align-items: flex-end; }
.hub-card--photo .hub-bg { position: absolute; inset: 0; z-index: 0; display: block; }
.hub-card--photo .hub-bg img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s var(--ease); }
@media (hover: hover) and (pointer: fine) { .hub-card--photo:hover .hub-bg img { transform: scale(1.07); } }
.hub-card--photo::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(10,28,38,.05) 0%, rgba(9,24,33,.55) 52%, rgba(7,18,25,.95) 100%);
}
.hub-card--photo .hub-body { position: relative; z-index: 3; display: block; width: 100%; padding: 34px 32px; }
.hub-card--photo .hub-eyebrow { color: var(--sand-2); }
.hub-card--photo h3 { color: #fff; }
.hub-card--photo p { color: rgba(255,255,255,.82); }
.hub-card--photo .hub-facts { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 24px; }
.hub-card--photo .hub-facts span { font-size: 12.5px; color: rgba(255,255,255,.68); }
.hub-card--photo .hub-facts b { color: var(--sand-2); font-family: var(--f-label); margin-inline-end: 4px; unicode-bidi: plaintext; }
@media (max-width: 480px) { .hub-card--photo { min-height: 400px; } .hub-card--photo .hub-body { padding: 26px 22px; } }

/* ================= نوار مجوزها و نهادهای عضویت ================= */
/* لوگوهای نهادهای رسمی معمولاً روی زمینه‌ی سفید طراحی شده‌اند؛ برای اینکه
   روی پس‌زمینه‌ی تیره‌ی سایت درست و خوانا دیده شوند، هر کدام داخل یک کارت
   سفیدِ کوچک با گوشه‌ی گرد قرار می‌گیرد. */
.cert-strip {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 18px; margin-top: 34px;
}
.cert-badge {
  /* پس‌زمینه‌ی سفید این کارت‌ها، در بعضی مرورگرهای موبایل (مثل اینترنت
     سامسونگ) حتی وقتی از عکس هم استفاده شود، توسط الگوریتم «تیره‌سازی
     خودکار محتوای وب» کمی خاکستری دیده می‌شود؛ چون آن الگوریتم بر اساس
     رنگِ نهایی تصمیم می‌گیرد، نه فقط رنگ خامِ CSS. راه‌حل استاندارد و
     قطعی، اعلامِ صریحِ «این بخش، عمداً روشن است» با color-scheme است؛
     مرورگر با دیدن این خط، دیگر هیچ رنگی را داخل این کارت (چه پس‌زمینه،
     چه خودِ عکسِ لوگو) تغییر نمی‌دهد. */
  color-scheme: light;
  background-color: #fff;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAACCAYAAAB/qH1jAAAADklEQVR42mP4jwYY0AUAHiAf4Qv1y3EAAAAASUVORK5CYII=);
  background-size: 100% 100%;
  border-radius: 16px; padding: 14px 20px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow); flex: 0 0 auto;
}
.cert-badge img { height: 52px; width: auto; max-width: 150px; object-fit: contain; display: block; }
@media (max-width: 640px) {
  .cert-strip { gap: 12px; }
  .cert-badge { padding: 10px 14px; }
  .cert-badge img { height: 40px; max-width: 110px; }
}

/* ================= BRAND LOGO / CLIENT LOGOS ================= */
.seal-logo { width: 26px; height: 26px; object-fit: contain; display: block; flex: none; }

/*
 * لوگوی مشتریان به‌جای جدولِ ثابت، به‌صورت یک نوارِ درحال‌حرکتِ بی‌پایان (همان
 * تکنیکِ .ticker/.marquee که در سایت استفاده شده) نمایش داده می‌شود؛ هم روی
 * موبایل فضای کمتری می‌گیرد، هم روی دسکتاپ جذاب‌تر است. محتوا دوبار در HTML
 * تکرار می‌شود تا چرخش، بی‌درز به نظر برسد؛ نسخه‌ی دوم برای screen reader
 * با aria-hidden مخفی است تا نام برندها فقط یک‌بار برای کاربران صفحه‌خوان
 * خوانده شود.
 */
.client-marquee {
  margin-top: 30px; overflow: hidden; position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
}
.client-marquee .track { display: flex; width: max-content; gap: 16px; }
.client-marquee .set { display: flex; gap: 16px; }
@media (prefers-reduced-motion: no-preference) { .client-marquee .track { animation: slide 46s linear infinite; } }
.client-marquee:hover .track { animation-play-state: paused; }

.client-logo {
  /* همان مشکل کارت‌های مجوز، اینجا هم هست؛ همان راه‌حل (color-scheme: light). */
  color-scheme: light;
  background-color: #fff;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAACCAYAAAB/qH1jAAAADklEQVR42mP4jwYY0AUAHiAf4Qv1y3EAAAAASUVORK5CYII=);
  background-size: 100% 100%;
  border-radius: 16px; padding: 20px;
  display: grid; place-items: center; aspect-ratio: 1 / 1;
  width: 150px; flex: none;
  box-shadow: var(--shadow); transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
@media (max-width: 560px) { .client-logo { width: 118px; padding: 16px; } }
.client-logo:hover { transform: translateY(-4px) scale(1.04); box-shadow: 0 20px 40px rgba(0,0,0,.16); }
.client-logo img { width: 100%; height: 100%; object-fit: contain; }

/* بنر یکپارچه‌ی باشگاه مشتریان (یک تصویر با تمام لوگوها) */
.client-banner {
  margin-top: 30px; border-radius: 20px; overflow: hidden;
  background: linear-gradient(180deg, var(--navy), var(--navy-2));
  border: 1px solid rgba(255,255,255,.1);
  padding: clamp(18px, 3vw, 34px) clamp(14px, 3vw, 30px);
  box-shadow: var(--shadow);
}
.client-banner img { width: 100%; height: auto; display: block; }

/* ================= تصاویر واقعی (کاتالوگ) — فریم عکس، گالری و چیدمان دوستونه ================= */
.photo-frame {
  position: relative; border-radius: 20px; overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--shadow);
  aspect-ratio: 4 / 3; background: var(--navy-2);
}
.photo-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-frame .cap {
  position: absolute; inset-inline: 0; inset-block-end: 0;
  padding: 14px 18px 12px; color: #fff;
  background: linear-gradient(0deg, rgba(6,12,20,.82), transparent);
  font-family: var(--f-label); font-size: 12px; letter-spacing: 0; line-height: 1.7;
}
/* بخش «رویدادها و همکاری‌ها»: به‌جای نوشتن کپشن روی پایین عکس (که یا روی
   نوشته‌ی داخل خودِ عکس می‌افتد یا روی چهره‌ی افراد)، عنوان هر رویداد در
   یک نوار توپر و کاملاً جدا، بالای قاب عکس قرار می‌گیرد. */
#home-events .photo-frame { display: flex; flex-direction: column; aspect-ratio: auto; }
#home-events .photo-frame .cap-top {
  order: -1; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  padding: 12px 16px; background: var(--navy-3); color: var(--gold-text);
  font-family: var(--f-label); font-size: 12.5px; letter-spacing: 0; line-height: 1.6;
  text-align: center; border-block-end: 2px solid var(--sand);
}
#home-events .photo-frame .shot { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
#home-events .photo-frame .shot img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ================= اسلایدر نشست‌های تخصصی (صفحه‌ی آکادمی) =================
   همان طرح «عنوان در نوار توپر بالای عکس» که در رویدادهای صفحه‌ی اصلی جواب
   داد، اینجا هم به‌صورت یک ردیف اسلایدر با قابلیت اسکرول لمسی/دکمه‌ای است. */
.ev-slider { margin-top: 28px; }
.ev-track {
  display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; padding-bottom: 2px;
  -ms-overflow-style: none; scrollbar-width: none;
}
.ev-track::-webkit-scrollbar { display: none; }
.ev-slide {
  flex: 0 0 min(320px, 78%); scroll-snap-align: start;
  display: flex; flex-direction: column;
  border-radius: 20px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow);
}
.ev-slide .cap-top {
  order: -1; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  padding: 12px 16px; background: var(--navy-3); color: var(--gold-text);
  font-family: var(--f-label); font-size: 12.5px; letter-spacing: 0; line-height: 1.6;
  text-align: center; border-block-end: 2px solid var(--sand);
}
.ev-slide .shot { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.ev-slide .shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ev-controls { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 20px; }
.ev-arrow {
  width: 40px; height: 40px; border-radius: 50%; flex: none; padding: 0;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink);
  display: grid; place-items: center; cursor: pointer;
  transition: border-color .3s, color .3s, transform .3s var(--ease);
}
.ev-arrow:hover { border-color: var(--sand); color: var(--sand-2); transform: translateY(-2px); }
.ev-arrow svg { width: 18px; height: 18px; }
.ev-dots { display: flex; align-items: center; gap: 8px; }
.ev-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); transition: background .3s, transform .3s; }
.ev-dots i.on { background: var(--sand); transform: scale(1.35); }

.photo-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 30px; }
@media (max-width: 720px) { .photo-gallery { grid-template-columns: 1fr; } }
.photo-gallery.g3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .photo-gallery.g3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .photo-gallery.g3 { grid-template-columns: 1fr; } }

/* ---- گالریِ رویدادها: دو ردیفِ درحال‌حرکتِ پیوسته (marquee)، در دو جهتِ
   مخالف، به‌جای چیدمانِ شطرنجیِ ایستا (که کارفرما آن را «حالتِ عکسِ وایساده»
   نامید). هر ردیف محتوایش دوبار تکرار شده (یک .set قابل‌مشاهده + یک .set با
   aria-hidden) تا چرخشِ انیمیشن بی‌درز به نظر برسد — دقیقاً همان تکنیکِ
   .client-marquee که در این فایل تعریف شده (از همان کی‌فریمِ slide استفاده
   می‌شود؛ ردیفِ دوم با reverse در جهتِ مخالف حرکت می‌کند). */
#home-events .photo-marquee { display: flex; flex-direction: column; gap: 20px; }
#home-events .pm-row {
  overflow: hidden; position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
#home-events .pm-row .track { display: flex; width: max-content; gap: 20px; }
#home-events .pm-row .set { display: flex; gap: 20px; }
@media (prefers-reduced-motion: no-preference) {
  #home-events .pm-row.r1 .track { animation: slide 48s linear infinite; }
  #home-events .pm-row.r2 .track { animation: slide 48s linear infinite reverse; }
}
#home-events .pm-row:hover .track { animation-play-state: paused; }
#home-events .photo-marquee .photo-frame {
  flex: 0 0 auto; width: clamp(230px, 27vw, 330px); height: auto;
}
#home-events .photo-marquee .photo-frame .shot { flex: none; aspect-ratio: 4 / 3; }
#home-events .photo-marquee .photo-frame .shot img { transition: transform .6s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  #home-events .photo-marquee .photo-frame:hover .shot img { transform: scale(1.08); }
}
@media (max-width: 560px) {
  #home-events .photo-marquee .photo-frame { width: 72vw; }
  #home-events .pm-row .track, #home-events .pm-row .set { gap: 14px; }
  #home-events .photo-marquee { gap: 14px; }
}

.split-media { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: center; margin-top: 34px; }
@media (max-width: 860px) { .split-media { grid-template-columns: 1fr; gap: 22px; } }
.split-media .photo-frame { aspect-ratio: 5 / 4; }

/* روی موبایل، عکس‌های خیلی پهن (نسبت ۲۱ به ۹) خیلی کوتاه می‌شوند و کپشن
   دو خطی تقریباً کل عکس را می‌پوشاند؛ برای خوانایی بهتر، نسبت را کمی
   بلندتر می‌کنیم. */
.photo-frame.wide { aspect-ratio: 16 / 9; }
@media (max-width: 640px) {
  .photo-frame.wide { aspect-ratio: 4 / 3; }
}

/* ================= هیرو با تصویر پس‌زمینه (صفحه اصلی) ================= */
.hero.hero-photo::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: var(--hero-photo-url); background-size: cover; background-position: center 30%;
  opacity: .4;
}
.hero.hero-photo .wrap { position: relative; z-index: 2; }

/* ================= HERO اِدیتوریال — بازطراحیِ کامل هیروها ================= *
 * به‌جای هیروی قبلی (متنِ تخت روی گرادیانِ تیره + یک عکسِ خیلی کم‌رنگ در پس‌زمینه)،
 * اینجا خودِ عکسِ واقعی، تمام‌قد و پررنگ است؛ تیتر و توضیح روی آن می‌نشینند، با یک
 * گرادیانِ تیره‌ی پایین‌به‌بالا برای خوانایی. از DOM واقعی (نه ::before/::after که
 * قبلاً برای نقطه‌چین و seam-soften اشغال شده بودند) استفاده شده تا با هیچ افکتِ
 * قبلی تداخل نکند. */
.hero.hero-editorial {
  position: relative; overflow: hidden; padding: 0;
  min-height: 78vh; display: flex; align-items: flex-end;
  background: var(--navy-3);
}
@media (max-width: 760px) { .hero.hero-editorial { min-height: 66vh; } }
.hero.hero-editorial .blob { display: none; }
.hero.hero-editorial::after { display: none; }
.hero-editorial .hero-media {
  position: absolute; inset: 0; z-index: 0; display: block;
  background-size: cover; background-position: center;
}
.hero-editorial .hero-scrim {
  position: absolute; inset: 0; z-index: 1; display: block;
  background: linear-gradient(180deg,
    rgba(6,16,22,.32) 0%,
    rgba(6,16,22,.5) 38%,
    color-mix(in srgb, var(--navy) 60%, rgba(6,14,20,.88)) 76%,
    var(--navy) 100%);
}
.hero.hero-editorial.to-paper .hero-scrim {
  background: linear-gradient(180deg,
    rgba(6,16,22,.32) 0%,
    rgba(6,16,22,.5) 38%,
    color-mix(in srgb, var(--paper) 60%, rgba(6,14,20,.88)) 76%,
    var(--paper) 100%);
}
.hero.hero-editorial.to-navy-2 .hero-scrim {
  background: linear-gradient(180deg,
    rgba(6,16,22,.32) 0%,
    rgba(6,16,22,.5) 38%,
    color-mix(in srgb, var(--navy-2) 60%, rgba(6,14,20,.88)) 76%,
    var(--navy-2) 100%);
}
.hero.hero-editorial .wrap {
  position: relative; z-index: 2; width: 100%;
  padding-block: clamp(110px, 20vw, 190px) clamp(40px, 6vw, 60px);
}
.hero.hero-editorial .hero-cta { margin-top: 28px; display: inline-flex; }
@media (max-width: 640px) { .hero.hero-editorial .hero-cta { width: 100%; justify-content: center; } }

/* ---- حرکتِ ظریفِ «کن برنز» روی عکسِ هیرو و ماژول‌های تمام‌عرض — به‌جای یک
   عکسِ کاملاً ثابت و «یخ‌زده»، عکس بسیار آرام بزرگ‌نمایی می‌شود تا صفحه زنده‌تر
   به‌نظر برسد؛ برای کاربرانی که انیمیشن کمتر می‌خواهند، غیرفعال می‌ماند. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.1); } }
  .hero-editorial .hero-media { animation: kenburns 26s ease-in-out infinite alternate; will-change: transform; }
}

/* ================= HERO «اورورا» (فقط صفحه اصلی) =================
   نسخه‌ی بازطراحی‌شده‌ی کامل: بازخورد صریح این بود که مشکل، خودِ عکس نیست —
   مشکل کل کانسپت است. به‌جای تکیه‌ی هیرو به یک عکسِ واقعی (که بارها، با هر
   انتخابی، یا تیره/گل‌آلود بود یا برندِ مشتریِ دیگری در پس‌زمینه داشت)، اینجا
   هیچ عکسی در هیرو نیست: یک صحنه‌ی کاملاً تایپوگرافیک و متحرک، با یک
   پس‌زمینه‌ی گرادیانیِ نرم و درحال‌حرکت («اورورا»، در پالتِ خودِ سایت) به‌علاوه‌ی
   یک خطِ طلاییِ موج‌دار که پیوسته جاری می‌شود — استعاره‌ی مستقیمِ «جریان» در
   نامِ برند. عکس‌های واقعی همچنان در نوارِ اثباتِ اجتماعیِ زیرِ هیرو و در
   مسیرهای همکاری حضور دارند؛ فقط دیگر بارِ اصلیِ اولین‌برخورد را به دوش
   نمی‌کشند. ---- */
.hero.hero-aurora { padding-block: clamp(76px, 11vw, 132px) clamp(104px, 13vw, 156px); isolation: isolate; }
.hero-aurora-wrap { position: relative; z-index: 3; max-width: 760px; margin-inline: auto; text-align: center; }
.hero-aurora .eyebrow { display: inline-block; }
.hero-aurora .hero-title { display: flex; flex-direction: column; align-items: center; }
.hero-aurora .kick { max-width: 540px; margin-inline: auto; }
.hero.hero-aurora .hero-cta { margin-top: 30px; display: inline-flex; }

/* ---- میدانِ اورورا: چند بلابِ تار و رنگی که به‌آرامی حرکت می‌کنند ---- */
.aurora-field { position: absolute; inset: -12%; z-index: 0; pointer-events: none; filter: blur(64px) saturate(165%); }
.aurora-field i { position: absolute; display: block; border-radius: 50%; mix-blend-mode: screen; }
.aurora-field i:nth-child(1) {
  inset-inline-start: -6%; inset-block-start: -10%; width: 44vw; height: 44vw; max-width: 600px; max-height: 600px;
  background: radial-gradient(circle, rgba(47,166,184,.55) 0%, transparent 70%);
}
.aurora-field i:nth-child(2) {
  inset-inline-end: -8%; inset-block-start: 2%; width: 38vw; height: 38vw; max-width: 540px; max-height: 540px;
  background: radial-gradient(circle, rgba(201,168,118,.5) 0%, transparent 72%);
}
.aurora-field i:nth-child(3) {
  inset-inline-start: 24%; inset-block-end: -22%; width: 48vw; height: 48vw; max-width: 660px; max-height: 660px;
  background: radial-gradient(circle, rgba(110,95,151,.45) 0%, transparent 70%);
}
@media (prefers-reduced-motion: no-preference) {
  .aurora-field i:nth-child(1) { animation: auroraA 22s ease-in-out infinite alternate; }
  .aurora-field i:nth-child(2) { animation: auroraB 27s ease-in-out infinite alternate; }
  .aurora-field i:nth-child(3) { animation: auroraC 31s ease-in-out infinite alternate-reverse; }
}
@keyframes auroraA { to { transform: translate(6%, 9%) scale(1.18); } }
@keyframes auroraB { to { transform: translate(-9%, -6%) scale(1.12); } }
@keyframes auroraC { to { transform: translate(5%, -7%) scale(1.22); } }
@media (max-width: 640px) { .aurora-field { opacity: .8; } }

/* ---- خطِ طلاییِ جاری: استعاره‌ی بصریِ «جریان»، همیشه در حالِ حرکتِ ملایم ---- */
.flow-line { position: absolute; inset-inline: 0; inset-block-end: 6%; width: 100%; height: clamp(70px, 11vw, 150px); z-index: 1; pointer-events: none; }
.flow-line path { fill: none; stroke-linecap: round; filter: drop-shadow(0 0 10px rgba(201,168,118,.35)); }
.flow-line .fl1 { stroke: url(#flowGoldGrad); stroke-width: 2.5; stroke-dasharray: 14 12; opacity: .9; }
.flow-line .fl2 { stroke: url(#flowGoldGrad); stroke-width: 1.5; stroke-dasharray: 7 16; opacity: .45; }
@media (prefers-reduced-motion: no-preference) {
  .flow-line .fl1 { animation: flowDash 3.4s linear infinite; }
  .flow-line .fl2 { animation: flowDash 5.2s linear infinite reverse; }
}
@keyframes flowDash { to { stroke-dashoffset: -260; } }
@media (max-width: 640px) { .flow-line { inset-block-end: 2%; opacity: .85; } }

/* نکته: ظهورِ پلکانیِ eyebrow/عنوان/توضیح از قبل به‌صورتِ سراسری برای همه‌ی
   انواعِ هیرو تعریف شده (heroUp/heroBigIn/word-mask در پایین‌ترِ همین فایل)؛
   فقط دکمه‌ی CTA در این نوع هیرو جدید است و باید به همان توالیِ ورود بپیوندد. */
@media (prefers-reduced-motion: no-preference) {
  .js .hero-aurora .hero-cta { animation: heroFade 1s var(--ease) .5s both; }
}

/* ================= HERO «مینیمال» (الهام از اپل) — فقط صفحه اصلی =================
   برخلافِ نسخه‌ی «اورورا» (رنگ و حرکتِ زیاد)، اینجا فلسفه برعکس است: سکوتِ بصری.
   پس‌زمینه تقریباً تخت و بسیار تیره، بدون بلاب/خطِ جاری/بافتِ نقطه‌ای؛ تنها یک
   درخششِ بسیار کم‌رنگ از بالا برای عمق. تایپوگرافی به‌شدت بزرگ‌تر از حالتِ
   معمولِ سایت می‌شود تا خودش کانونِ توجه باشد، با فاصله‌های سخاوتمندانه‌ی
   عمودی — دقیقاً همان حسی که صفحاتِ معرفیِ رویدادِ اپل منتقل می‌کنند. ---- */
.hero.hero-minimal {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: min(88vh, 820px);
  padding-block: clamp(90px, 12vw, 150px);
  background:
    radial-gradient(130% 65% at 50% -15%, rgba(255,255,255,.07), transparent 62%),
    color-mix(in srgb, var(--paper) 55%, black 45%);
}
/* بافتِ نقطه‌ایِ کلاسِ پایه‌ی .hero برای این حالت حذف می‌شود — مینیمالیسم یعنی تخت و ساکت */
.hero.hero-minimal::after { content: none; }
.hero-minimal-wrap { position: relative; z-index: 3; max-width: 800px; margin-inline: auto; }
.hero-minimal .eyebrow { opacity: .85; }
.hero-minimal .hero-title { display: flex; flex-direction: column; align-items: center; margin-block: 28px 12px; }
.hero-minimal .hero-title .big { font-size: clamp(4.4rem, 11vw, 9rem); line-height: 1.04; }
.hero-minimal .hero-title .rest { font-weight: 400; opacity: .94; margin-top: 16px; }
.hero-minimal .kick { font-weight: 300; max-width: 460px; margin-inline: auto; opacity: .82; }
.hero.hero-minimal .hero-cta { margin-top: 38px; display: inline-flex; }
.hero.hero-minimal .scroll-cue { margin-top: 58px; justify-content: center; }
@media (max-width: 640px) {
  .hero.hero-minimal { min-height: auto; padding-block: clamp(76px, 20vw, 112px) clamp(64px, 16vw, 96px); }
  .hero-minimal .hero-title .big { font-size: clamp(3.6rem, 21vw, 5.6rem); }
  .hero.hero-minimal .scroll-cue { margin-top: 42px; }
}

/* ================= HERO «گوهر» (طرحِ سوم، هنری) — فقط صفحه اصلی =================
   نسخه‌ی مینیمال «ساده و زشت» ارزیابی شد؛ درخواستِ صریح این بود: «مثل یک
   طراحِ حرفه‌ای، چیزی هنری و خیلی خوشگل». اینجا برعکسِ مینیمالیسم: پسِ‌زمینه‌ی
   رنگی و متحرکِ اورورا (که قبلاً خوب جواب داده بود) دوباره برمی‌گردد، به‌علاوه‌ی
   یک آرایه‌ی هندسیِ سنتیِ ایرانی (ستاره‌ی هشت‌پر/شمسه — همان الگوی گره‌چینی و
   کاشی‌کاریِ معماریِ ایرانی) با خطوطِ نازکِ طلایی که به‌آرامی می‌چرخد، یک هاله‌ی
   نورِ طلاییِ نرم پشتِ تیتر برای عمقِ دراماتیک، و عنوانِ اصلی با گرادیانِ طلایی
   («آب‌طلا») به‌جای سفیدِ ساده. صحنه‌ای لایه‌لایه و تزئینی، دقیقاً نقطه‌ی مقابلِ
   تخت‌وخالیِ نسخه‌ی قبلی. ---- */
.hero.hero-ornate { padding-block: clamp(80px, 10vw, 128px) clamp(104px, 12vw, 152px); isolation: isolate; }
.hero-ornate-wrap { position: relative; z-index: 4; max-width: 760px; margin-inline: auto; text-align: center; }
.hero-ornate .eyebrow { display: inline-block; }
.hero-ornate .hero-title { display: flex; flex-direction: column; align-items: center; }
.hero-ornate .kick { max-width: 520px; margin-inline: auto; }
.hero.hero-ornate .hero-cta { margin-top: 30px; display: inline-flex; }

/* هاله‌ی نورِ طلایی، درست پشتِ تیتر، برای حسِ درامِ نوری */
/* نکته: برای سنترکردنِ دقیق با transform:translate(-50%,-50%)، باید از
   left/top فیزیکی استفاده شود نه inset-inline-start/start منطقی — چون
   درصدِ translate همیشه بر مبنای محورِ فیزیکیِ چپ‌به‌راست حساب می‌شود، و در
   RTL، inset-inline-start معادلِ «راست» است که با translateX(-50%) ترکیب
   نادرست می‌شود (عنصر به‌جای مرکز، کاملاً به چپ می‌رود). */
.ornate-glow {
  position: absolute; z-index: 1; pointer-events: none;
  left: 50%; top: 48%;
  width: min(760px, 80vw); height: min(760px, 80vw);
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(226,211,183,.24) 0%, rgba(201,168,118,.11) 40%, transparent 70%);
  filter: blur(6px);
}

/* ستاره‌ی هشت‌پر (شمسه) — دو مربعِ هم‌مرکزِ چرخیده روی هم، الگوی پایه‌ی
   گره‌چینیِ سنتیِ ایرانی؛ فقط خطوطِ نازکِ طلایی، بدون هیچ رنگِ تازه */
.ornate-star {
  position: absolute; z-index: 2; pointer-events: none; overflow: visible;
  left: 50%; top: 50%;
  width: min(620px, 78vw); height: min(620px, 78vw);
  transform: translate(-50%, -50%);
}
.ornate-star rect, .ornate-star circle { fill: none; stroke: var(--sand); stroke-width: 1; }
.ornate-star rect { opacity: .4; }
.ornate-star circle { opacity: .2; }
.ornate-star circle:last-child { opacity: .12; }
@media (prefers-reduced-motion: no-preference) {
  .ornate-star g { animation: ornateSpin 130s linear infinite; transform-origin: 200px 200px; }
}
@keyframes ornateSpin { to { transform: rotate(360deg); } }

/* تیترِ «آب‌طلا»: گرادیانِ طلایی به‌جای سفیدِ ساده، با درخششِ ملایم پشت آن.
   نکته: وقتی متنِ «رشد» داخلِ یک word-mask (برای افکتِ لغزشِ ماسکی) پیچیده
   می‌شود، آن span یک inline-block جداگانه است و گرادیانِ روی خودِ .big دیگر
   چیزی برای کلیپ‌شدن روی آن پیدا نمی‌کند (چون .big دیگر متنِ مستقیم ندارد) —
   نتیجه، نوشته‌ای کاملاً نامرئی (رنگِ ارث‌بریِ transparent بدونِ گرادیان) است.
   برای همین، همان گرادیان روی خودِ .word هم تکرار می‌شود. */
.hero-title.gilded .big,
.hero-title.gilded .big .word-mask .word {
  background: linear-gradient(135deg, var(--gold-text) 0%, #fff 22%, var(--sand-2) 52%, var(--sand) 78%, var(--gold-text) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
.hero-title.gilded .big { filter: drop-shadow(0 6px 22px rgba(201,168,118,.4)); }
.hero-title.gilded .big .ul path { stroke: var(--sand-2); }

@media (prefers-reduced-motion: no-preference) {
  .js .hero-ornate .hero-cta { animation: heroFade 1s var(--ease) .5s both; }
}
@media (max-width: 640px) {
  .ornate-star { width: min(440px, 92vw); height: min(440px, 92vw); }
  .ornate-glow { width: min(520px, 96vw); height: min(520px, 96vw); }
}

/* ================= HERO «گالری» (طرحِ چهارم، عکس‌محور) — فقط صفحه اصلی =================
   بازخوردِ صریح: «عکس‌محور» باشد. نسخه‌ی اول، متن را مستقیم روی عکس می‌نشاند
   که دقیقاً روی سوژه‌ی روشن (مهره‌ی سفید) می‌افتاد و هر چه تیره‌ترش می‌کردیم،
   باز با همان سوژه قاطی می‌شد. راه‌حل، همپوشانی نیست: یک قابِ عکسِ کامل و
   دست‌نخورده در بالا (با حاشیه‌ی باریکِ طلایی، حسِ یک تابلوی گالری)، و زیرش
   یک «لوحِ» تختِ تیره برای تیترِ آب‌طلا — مثلِ یک پوستر که عکس را کامل نشان
   می‌دهد و توضیح را زیرش می‌نویسد. کاملاً عکس‌محور، بدون هیچ تداخلی. ---- */
.hero.hero-photo-art { padding: 0; overflow: hidden; }
.hpa-photo { position: relative; width: 100%; height: min(58vh, 500px); overflow: hidden; background: color-mix(in srgb, var(--paper) 55%, black 45%); }
.hpa-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (prefers-reduced-motion: no-preference) {
  .hpa-photo img { animation: kenburns 32s ease-in-out infinite alternate; will-change: transform; }
}
/* قابِ باریکِ طلایی دورِ خودِ عکس — حسِ یک اثرِ هنریِ در حالِ نمایش در گالری */
.hpa-frame { position: absolute; inset: 14px; z-index: 2; pointer-events: none; border: 1px solid rgba(201,168,118,.5); }
/* لوحِ تیترِ زیرِ عکس — تخت و پیوسته، بدون هیچ گرادیانی که با عکس تداخل کند */
.hpa-caption {
  position: relative; background: color-mix(in srgb, var(--paper) 55%, black 45%);
  border-top: 1px solid rgba(201,168,118,.35);
  padding-block: clamp(52px, 8vw, 88px);
  text-align: center;
}
.hero-photo-art-wrap { position: relative; z-index: 3; max-width: 760px; margin-inline: auto; text-align: center; }
.hero-photo-art .hero-title { display: flex; flex-direction: column; align-items: center; }
.hero-photo-art .kick { max-width: 500px; margin-inline: auto; }

/* بَجِ شیشه‌ایِ بالای هیرو — به‌جای برچسبِ سادۀ eyebrow، یک نشانِ گردِ شیشه‌ای
   (چیپِ ستاره + برچسب) با همان فرمولِ شیشه‌ایِ کارتِ آمار (blur + color-mix)
   تا با بقیه‌ی صفحه هم‌خانواده بماند، ولی دقتِ بصریِ بیشتری نسبت به یک متنِ
   ساده بدهد. */
.hpa-pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 18px 7px 7px; border-radius: 999px;
  background: color-mix(in srgb, var(--navy-2) 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--sand) 38%, transparent);
  backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow: 0 10px 26px -12px rgba(0,0,0,.5);
}
.hpa-pill .chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  background: var(--sand); background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAFUlEQVR42mM8uaLsPwMSYGJAA4QFAL71Au5zHnrFAAAAAElFTkSuQmCC); background-size: 100% 100%;
  color: #241703; font-size: 12px; line-height: 1;
}
.hpa-pill .lbl {
  font-family: var(--f-label); font-weight: 600; font-size: 12.5px;
  letter-spacing: 0; color: var(--gold-text); white-space: nowrap;
}
@media (max-width: 480px) {
  .hpa-pill .lbl { font-size: 11.5px; letter-spacing: 0; }
}

/* ردیفِ دکمه‌ها: دکمه‌ی اصلیِ طلایی (اول، سمتِ راست) + یک دکمه‌ی شیشه‌ایِ
   ثانویه برای معرفیِ مدرسه — دقیقاً جفتِ «ghost + solid» که در نمونه‌ی
   درخواستی هم بود. (عمومی است، نه فقط مخصوصِ یک طرحِ هیرو، تا بینِ طرح‌های
   مختلف هم قابلِ استفاده‌ی مجدد باشد.) */
.cta-row { margin-top: 30px; display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }

@media (prefers-reduced-motion: no-preference) {
  .js .hero-photo-art .hpa-pill { animation: heroPillIn .7s var(--ease) both; }
  .js .hero-photo-art .cta-row .hero-cta { animation: heroFade 1s var(--ease) .5s both; }
  .js .hero-photo-art .cta-row .hero-cta:nth-child(1) { animation-delay: .52s; }
  .js .hero-photo-art .cta-row .hero-cta:nth-child(2) { animation-delay: .62s; }
  /* «رشد» دیگر با fade+scale عمومی (heroBigIn) نمی‌آید؛ مثلِ «از یک اقدام…»
     با همان تکنیکِ ماسکِ خطی (word-mask/word) بالا می‌لغزد — حسِ سینمایی‌ترِ
     نمونه‌ی درخواستی، ولی کاملاً با زیرساختِ موجودِ خودِ سایت. */
  .js .hero-photo-art .hero-title .big { animation: none; }
  .js .hero-photo-art .hero-title .big .word-mask .word { animation-delay: .06s; }
  @keyframes heroPillIn { from { opacity: 0; transform: translateY(14px) scale(.94); } to { opacity: 1; transform: none; } }
}
@media (max-width: 640px) {
  .hpa-photo { height: min(42vh, 340px); }
  .hpa-frame { inset: 10px; }
}

/* ================= موشن‌گرافیِ «شطرنج» — جایگزینِ صحنه‌ی کهکشانی =================
   بازخورد: صحنه‌ی فضایی کامل کنار گذاشته شد؛ به‌جایش یک موشن‌گرافیِ جالبِ
   خودِ شطرنج روی عکسِ واقعی. دو مسیرِ نازکِ خطی که مهره‌ی شاه را به دو
   خوشه‌ی سرباز (چپ/راست) وصل می‌کنند — با جلوه‌ی «کشیده‌شدن» (stroke
   dash) و محوشدنِ نرم، حلقه‌به‌حلقه — به‌علاوه‌ی یک ردِ ضربانیِ (ping) بسیار
   کم‌رنگ دورِ پایه‌ی شاه. viewBox دقیقاً برابرِ ابعادِ خودِ عکسِ
   hero-chess.jpg (۱۲۸۰×۸۶۴) با preserveAspectRatio="xMidYMid slice" است،
   یعنی همان منطقِ برش/مقیاسِ object-fit:cover که خودِ <img> دارد — پس
   مختصات روی هر اندازه‌ی صفحه‌ای دقیقاً با محلِ واقعیِ شاه/سربازها در عکس
   هم‌تراز می‌ماند. */
.hcm-motion { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }
.hcm-link path { fill: none; stroke: var(--sand); stroke-width: 1.6; stroke-dasharray: 650; stroke-dashoffset: 650; opacity: 0; }
.hcm-link rect { fill: none; stroke: var(--sand-2); stroke-width: 1.6; opacity: 0; }
.hcm-ping circle {
  fill: none; stroke: var(--sand); stroke-width: 1.8; opacity: 0;
  transform-box: fill-box; transform-origin: center;
}
@media (prefers-reduced-motion: no-preference) {
  .hcm-link path { animation: hcmDrawLine 9s ease-in-out infinite; }
  .hcm-link rect { animation: hcmDrawSquare 9s ease-in-out infinite; }
  .hcm-link.right path, .hcm-link.right rect { animation-delay: .7s; }
  .hcm-ping circle { animation: hcmPing 3.9s ease-out infinite; }
  .hcm-ping circle.d2 { animation-delay: 1.3s; }
  .hcm-ping circle.d3 { animation-delay: 2.6s; }

  @keyframes hcmDrawLine {
    0%   { stroke-dashoffset: 650; opacity: 0; }
    10%  { opacity: .6; }
    42%  { stroke-dashoffset: 0; opacity: .6; }
    70%  { stroke-dashoffset: 0; opacity: .6; }
    92%  { opacity: 0; }
    100% { stroke-dashoffset: 650; opacity: 0; }
  }
  @keyframes hcmDrawSquare {
    0%, 100% { opacity: 0; }
    15% { opacity: .6; }
    70% { opacity: .6; }
    92% { opacity: 0; }
  }
  @keyframes hcmPing {
    0%   { transform: scale(.4); opacity: .6; }
    100% { transform: scale(2.3); opacity: 0; }
  }
}
@media (max-width: 640px) {
  .hcm-link path, .hcm-link rect { stroke-width: 2; }
}

/* ================= HERO «کهکشان» — فقط صفحه اصلی =================
   بازخوردِ تازه: یک صحنه‌ی فضایی/کهکشانی، دقیقاً مثلِ نمونه‌ای که نشان داده
   شد. در این محیط ابزاری برای تولیدِ عکس/ویدیوی تازه نیست، پس کلِ صحنه با
   خودِ CSS/SVG ساخته شده: آسمانِ تیره + ستاره‌های پراکنده (چند ده
   radial-gradient تصادفی) + چند ابرِ نوریِ تار (nebula) با پالتِ خودِ سایت
   (طلایی/سبز/سرمه‌ای، نه رنگِ تازه) + یک سیاره‌ی حلقه‌دار که دقیقاً با همان
   تکنیکِ رسمِ حلقه‌ی نشانِ درجریان (حلقه‌ی پشت، دایره‌ی خلأ، سیاره، حلقه‌ی
   جلوِ dash-cut) ساخته شده — فقط این‌بار بزرگ، به‌عنوانِ تصویرِ اصلیِ هیرو.
   چون دیگر عکسِ واقعی در کار نیست، متن مستقیم روی صحنه می‌نشیند؛ چیدمان را
   خودمان طراحی کرده‌ایم، پس جایی برای تداخل با یک سوژه‌ی واقعی نیست. ---- */
.hero.hero-galaxy {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: clamp(600px, 88vh, 880px);
  display: flex; align-items: center; justify-content: center;
  padding-block: clamp(90px, 10vw, 130px);
  background:
    radial-gradient(120% 90% at 50% 0%, #0C2230 0%, transparent 60%),
    linear-gradient(180deg, #050C14 0%, #0A2230 42%, var(--navy-3) 100%);
}

.gx-sky { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.gx-sky::before, .gx-sky::after { content: ""; position: absolute; inset: 0; background-repeat: no-repeat; }
/* ستاره‌های ریزِ کم‌رنگ — ثابت */
.gx-sky::before {
  background-image:
    radial-gradient(0.79px 0.79px at 63.4% 4.4%, rgba(255,255,255,.32), transparent 100%),
    radial-gradient(1.22px 1.22px at 72.7% 65.6%, rgba(255,255,255,.28), transparent 100%),
    radial-gradient(0.75px 0.75px at 42.5% 4.8%, rgba(255,255,255,.4), transparent 100%),
    radial-gradient(1.05px 1.05px at 4.5% 20.7%, rgba(255,255,255,.41), transparent 100%),
    radial-gradient(1.17px 1.17px at 23.2% 57.4%, rgba(255,255,255,.25), transparent 100%),
    radial-gradient(0.84px 0.84px at 79.4% 67.6%, rgba(255,255,255,.3), transparent 100%),
    radial-gradient(0.66px 0.66px at 93.9% 33.6%, rgba(255,255,255,.28), transparent 100%),
    radial-gradient(1.16px 1.16px at 83.4% 58.8%, rgba(255,255,255,.47), transparent 100%),
    radial-gradient(0.86px 0.86px at 53.5% 93.5%, rgba(255,255,255,.42), transparent 100%),
    radial-gradient(1.2px 1.2px at 81.6% 60.1%, rgba(255,255,255,.42), transparent 100%),
    radial-gradient(0.76px 0.76px at 69.6% 6.3%, rgba(255,255,255,.34), transparent 100%),
    radial-gradient(0.67px 0.67px at 9.7% 23.9%, rgba(255,255,255,.33), transparent 100%),
    radial-gradient(0.86px 0.86px at 63.0% 36.3%, rgba(255,255,255,.31), transparent 100%),
    radial-gradient(1.05px 1.05px at 27.6% 90.0%, rgba(255,255,255,.43), transparent 100%),
    radial-gradient(0.71px 0.71px at 18.4% 70.5%, rgba(255,255,255,.36), transparent 100%),
    radial-gradient(0.99px 0.99px at 97.0% 62.2%, rgba(255,255,255,.46), transparent 100%),
    radial-gradient(0.76px 0.76px at 82.9% 74.9%, rgba(255,255,255,.26), transparent 100%),
    radial-gradient(0.75px 0.75px at 32.3% 27.2%, rgba(255,255,255,.53), transparent 100%),
    radial-gradient(1.06px 1.06px at 86.1% 31.6%, rgba(255,255,255,.37), transparent 100%),
    radial-gradient(0.79px 0.79px at 89.8% 45.1%, rgba(255,255,255,.32), transparent 100%),
    radial-gradient(1.01px 1.01px at 55.9% 26.7%, rgba(255,255,255,.52), transparent 100%),
    radial-gradient(1.3px 1.3px at 40.3% 22.6%, rgba(255,255,255,.4), transparent 100%),
    radial-gradient(0.68px 0.68px at 10.7% 6.4%, rgba(255,255,255,.44), transparent 100%),
    radial-gradient(0.64px 0.64px at 78.0% 41.7%, rgba(255,255,255,.36), transparent 100%),
    radial-gradient(1.28px 1.28px at 97.6% 51.7%, rgba(255,255,255,.51), transparent 100%),
    radial-gradient(1.08px 1.08px at 3.1% 69.7%, rgba(255,255,255,.41), transparent 100%),
    radial-gradient(0.68px 0.68px at 27.6% 62.3%, rgba(255,255,255,.38), transparent 100%),
    radial-gradient(1.21px 1.21px at 45.6% 91.7%, rgba(255,255,255,.33), transparent 100%),
    radial-gradient(1.24px 1.24px at 50.1% 18.8%, rgba(255,255,255,.51), transparent 100%),
    radial-gradient(1.03px 1.03px at 30.7% 62.1%, rgba(255,255,255,.3), transparent 100%),
    radial-gradient(1.15px 1.15px at 75.2% 52.7%, rgba(255,255,255,.41), transparent 100%),
    radial-gradient(0.61px 0.61px at 2.1% 32.5%, rgba(255,255,255,.53), transparent 100%),
    radial-gradient(0.82px 0.82px at 86.4% 80.2%, rgba(255,255,255,.27), transparent 100%),
    radial-gradient(0.66px 0.66px at 86.3% 91.0%, rgba(255,255,255,.4), transparent 100%),
    radial-gradient(1.14px 1.14px at 8.6% 73.5%, rgba(255,255,255,.29), transparent 100%),
    radial-gradient(0.79px 0.79px at 47.6% 53.7%, rgba(255,255,255,.51), transparent 100%),
    radial-gradient(0.98px 0.98px at 42.6% 21.9%, rgba(255,255,255,.47), transparent 100%),
    radial-gradient(1.3px 1.3px at 21.3% 31.3%, rgba(255,255,255,.44), transparent 100%),
    radial-gradient(0.68px 0.68px at 44.1% 50.7%, rgba(255,255,255,.32), transparent 100%),
    radial-gradient(0.76px 0.76px at 34.5% 57.3%, rgba(255,255,255,.32), transparent 100%),
    radial-gradient(0.76px 0.76px at 8.8% 61.3%, rgba(255,255,255,.52), transparent 100%),
    radial-gradient(0.77px 0.77px at 84.5% 8.7%, rgba(255,255,255,.45), transparent 100%),
    radial-gradient(1.25px 1.25px at 22.6% 14.4%, rgba(255,255,255,.42), transparent 100%),
    radial-gradient(1.17px 1.17px at 47.4% 75.8%, rgba(255,255,255,.31), transparent 100%),
    radial-gradient(0.9px 0.9px at 11.3% 42.5%, rgba(255,255,255,.39), transparent 100%),
    radial-gradient(1.29px 1.29px at 72.0% 65.3%, rgba(255,255,255,.28), transparent 100%),
    radial-gradient(1.2px 1.2px at 40.7% 33.9%, rgba(255,255,255,.32), transparent 100%),
    radial-gradient(0.9px 0.9px at 20.3% 44.2%, rgba(255,255,255,.33), transparent 100%),
    radial-gradient(0.91px 0.91px at 26.0% 88.8%, rgba(255,255,255,.51), transparent 100%),
    radial-gradient(1.3px 1.3px at 54.8% 6.8%, rgba(255,255,255,.5), transparent 100%),
    radial-gradient(1.19px 1.19px at 95.0% 89.1%, rgba(255,255,255,.3), transparent 100%),
    radial-gradient(0.88px 0.88px at 48.6% 22.1%, rgba(255,255,255,.27), transparent 100%),
    radial-gradient(0.79px 0.79px at 38.4% 94.6%, rgba(255,255,255,.49), transparent 100%),
    radial-gradient(1.27px 1.27px at 45.7% 41.8%, rgba(255,255,255,.55), transparent 100%),
    radial-gradient(0.71px 0.71px at 55.4% 69.5%, rgba(255,255,255,.34), transparent 100%);
}
/* چند ستاره‌ی درشت‌ترِ درخشان — با چشمک‌زدنِ آرام */
.gx-sky::after {
  background-image:
    radial-gradient(1.94px 1.94px at 95.0% 56.4%, rgba(255,255,255,.81), transparent 100%),
    radial-gradient(1.9px 1.9px at 7.5% 56.9%, rgba(255,255,255,.85), transparent 100%),
    radial-gradient(1.48px 1.48px at 17.1% 92.3%, rgba(255,255,255,.62), transparent 100%),
    radial-gradient(1.64px 1.64px at 59.1% 65.5%, rgba(255,255,255,.59), transparent 100%),
    radial-gradient(1.99px 1.99px at 87.5% 25.1%, rgba(255,255,255,.77), transparent 100%),
    radial-gradient(1.92px 1.92px at 42.2% 56.9%, rgba(255,255,255,.88), transparent 100%),
    radial-gradient(1.64px 1.64px at 21.6% 69.3%, rgba(255,255,255,.69), transparent 100%),
    radial-gradient(1.72px 1.72px at 66.5% 30.2%, rgba(255,255,255,.81), transparent 100%),
    radial-gradient(2.4px 2.4px at 9.0% 45.1%, rgba(255,255,255,.9), transparent 100%),
    radial-gradient(1.67px 1.67px at 9.0% 22.0%, rgba(255,255,255,.88), transparent 100%),
    radial-gradient(1.77px 1.77px at 86.6% 84.7%, rgba(255,255,255,.61), transparent 100%),
    radial-gradient(2.01px 2.01px at 82.0% 68.1%, rgba(255,255,255,.9), transparent 100%),
    radial-gradient(2.22px 2.22px at 64.8% 2.7%, rgba(255,255,255,.65), transparent 100%),
    radial-gradient(1.53px 1.53px at 65.7% 90.3%, rgba(255,255,255,.59), transparent 100%),
    radial-gradient(1.67px 1.67px at 12.3% 54.0%, rgba(255,255,255,.76), transparent 100%),
    radial-gradient(2.03px 2.03px at 70.9% 21.1%, rgba(255,255,255,.64), transparent 100%);
}
@media (prefers-reduced-motion: no-preference) {
  .gx-sky::after { animation: gxTwinkle 7s ease-in-out infinite alternate; }
}
@keyframes gxTwinkle { from { opacity: .7; } to { opacity: 1; } }

/* اصلاح طبقِ بازخورد: نسخه‌ی اول با ابرهای رنگیِ طلایی/سبز و سیاره‌ی کارتونیِ
   پرنور + دو تا ماهِ شناور، حسِ «بچه‌گانه» می‌داد. برای حسِ جدی و رسمی: فقط
   یک لایه‌ی بسیار محوِ سرمه‌ای (بدونِ رنگِ شاد)، و سیاره با یک طرحِ خطی و
   مینیمالِ «نمودار مداری» جایگزین شد (بدونِ گرادیانِ براق، بدونِ ماه). */
.gx-cloud { position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; z-index: 0; }
.gx-cloud.c1 { width: 520px; height: 520px; background: var(--navy); opacity: .3; inset-inline-start: 8%; inset-block-end: -160px; }
.gx-cloud.c2 { width: 420px; height: 420px; background: var(--paper); opacity: .22; inset-inline-end: 4%; inset-block-end: -80px; }
@media (prefers-reduced-motion: no-preference) {
  .gx-cloud.c1 { animation: drift1 34s var(--ease) infinite alternate; }
  .gx-cloud.c2 { animation: drift2 38s var(--ease) infinite alternate; }
}

/* نمودارِ مداری — به‌جای یک سیاره‌ی براق و کارتونی، یک طرحِ خطیِ مینیمال:
   چند مدارِ نازکِ هم‌مرکز + یک هسته‌ی کوچک در میان. حسِ «نقشه/استراتژی»،
   نه «کارتونِ فضایی». چرخشِ بسیار آرام و پیوسته (نه شناورِ بالاوپایین)،
   برای حفظِ جدیت. */
.gx-planet {
  position: absolute; z-index: 1; pointer-events: none; overflow: visible;
  width: min(520px, 62vw); height: min(520px, 62vw);
  inset-inline-end: clamp(-80px, -5vw, 20px); inset-block-end: clamp(-120px, -10vw, -30px);
  opacity: .9;
}
.gx-planet .gx-orbit-spin { transform-origin: 200px 200px; }
@media (prefers-reduced-motion: no-preference) {
  .gx-planet .gx-orbit-spin { animation: gxSpin 160s linear infinite; }
}
@keyframes gxSpin { to { transform: rotate(360deg); } }

.hero-galaxy-wrap { position: relative; z-index: 3; max-width: 760px; margin-inline: auto; text-align: center; }
.hero-galaxy .hero-title { display: flex; flex-direction: column; align-items: center; }
.hero-galaxy .kick { max-width: 500px; margin-inline: auto; }

@media (prefers-reduced-motion: no-preference) {
  .js .hero-galaxy .hpa-pill { animation: heroPillIn .7s var(--ease) both; }
  .js .hero-galaxy .cta-row .hero-cta { animation: heroFade 1s var(--ease) .5s both; }
  .js .hero-galaxy .cta-row .hero-cta:nth-child(1) { animation-delay: .52s; }
  .js .hero-galaxy .cta-row .hero-cta:nth-child(2) { animation-delay: .62s; }
  .js .hero-galaxy .hero-title .big { animation: none; }
  .js .hero-galaxy .hero-title .big .word-mask .word { animation-delay: .06s; }
}

/* روی موبایل، محتوا را به‌جای وسط‌چینِ عمودی، نزدیک‌ترِ بالا نگه می‌داریم و
   سیاره را بیشتر به گوشه‌ی پایین‌راست هل می‌دهیم — وگرنه در قدِ بلندِ هیروی
   موبایل، سیاره دقیقاً زیرِ پاراگراف/دکمه‌ها می‌افتد و با متن قاطی می‌شود. */
@media (max-width: 760px) {
  .hero.hero-galaxy { align-items: flex-start; padding-top: clamp(64px, 16vw, 96px); }
  .gx-planet { width: min(300px, 70vw); height: min(300px, 70vw); inset-block-end: clamp(-160px, -34vw, -90px); inset-inline-end: clamp(-80px, -14vw, -20px); }
  .gx-cloud.c1, .gx-cloud.c2 { width: 240px; height: 240px; }
}
@media (max-width: 480px) {
  .hero.hero-galaxy { min-height: clamp(560px, 92vh, 760px); }
}

/* ---- آمارِ «شناور» روی خطِ پایینِ هیروی اسپلیت — به‌جای نواری ساده و جدا،
   مثل یک کارتِ اعتبارسنجی روی درزِ هیرو و بخشِ بعدی می‌نشیند. ---- */
/* نکته: خودِ wrap یک کانتینرِ max-width:1120px با padding داخلی است؛ زیرِ آن
   عرض، کادرش دقیقاً لبه‌به‌لبه‌ی ویوپورت می‌افتد (چون max-width هنوز وارد عمل
   نشده) و اثرِ «کارتِ شناور» گم می‌شود. این padding-inline روی خودِ دهانه، یک
   حاشیه‌ی ثابت در همه‌ی عرض‌ها تضمین می‌کند تا کارت همیشه از لبه‌ها فاصله داشته
   باشد، نه فقط در ویوپورت‌های پهن‌تر از ۱۱۲۰px. */
.stats.dock-hero { margin-top: clamp(-78px, -7vw, -52px); position: relative; z-index: 6; background: transparent; padding-inline: clamp(14px, 4vw, 32px); }
.stats.dock-hero .wrap {
  background: color-mix(in srgb, var(--navy-2) 58%, transparent);
  backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 20px; box-shadow: 0 26px 60px -22px rgba(0,0,0,.55);
  padding-block: 28px;
}
@media (max-width: 620px) {
  .stats.dock-hero { margin-top: -24px; padding-inline: 12px; }
  .stats.dock-hero .wrap { border-radius: 16px; }
}
/* نخِ طلاییِ ظریف روی لبه‌ی بالاییِ کارتِ آمار — هم‌خانواده با حسِ «گوهر»ِ هیرو */
.stats.dock-hero.gilded .wrap { position: relative; }
.stats.dock-hero.gilded .wrap::before {
  content: ""; position: absolute; inset-inline: 22px; inset-block-start: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--sand-2), transparent); opacity: .75;
}

/* ---- نوارِ «عکس‌های واقعیِ فعالیت» — درست زیرِ آمار، پیش از مسیرهای همکاری.
   یک عکسِ شاخص و کامل (بدون کراپِ شدید) در بالا، و زیرِ آن یک «نوار فیلم»:
   چهار عکس هم‌قد (بدون هیچ پله یا فاصله‌ی شناورِ عجیب) ولی با عرض‌های
   متفاوت — عریض/باریک/متوسط/باریک — که فرم‌شان را متفاوت می‌کند بدون آنکه
   حسِ «الکی کوچک‌وبزرگ‌شده» بدهد؛ همه از بالا و پایین هم‌تراز و یک‌دست‌اند. ---- */
.proof-strip { display: flex; flex-direction: column; gap: 18px; margin-top: 44px; }
.proof-strip .pf-feature { display: block; border-radius: 20px; overflow: hidden; aspect-ratio: 21 / 9; border: 1px solid var(--line); box-shadow: var(--shadow); }
.proof-strip .pf-feature img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s var(--ease); }
.proof-strip .pf-grid { display: flex; align-items: stretch; height: clamp(150px, 16vw, 230px); gap: 14px; }
.proof-strip .pf-grid .pf { display: block; flex: 1 1 0; min-width: 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); transition: flex-grow .5s var(--ease), box-shadow .4s var(--ease); }
.proof-strip .pf-grid .pf:nth-child(1) { flex-grow: 1.5; }
.proof-strip .pf-grid .pf:nth-child(2) { flex-grow: 0.85; }
.proof-strip .pf-grid .pf:nth-child(3) { flex-grow: 1.25; }
.proof-strip .pf-grid .pf:nth-child(4) { flex-grow: 0.95; }
.proof-strip .pf-grid img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .proof-strip .pf-feature:hover img { transform: scale(1.05); }
  .proof-strip .pf-grid .pf:hover { flex-grow: 2; box-shadow: 0 20px 40px -14px rgba(0,0,0,.5); }
  .proof-strip .pf-grid .pf:hover img { transform: scale(1.08); }
}
@media (max-width: 760px) { .proof-strip .pf-feature { aspect-ratio: 16 / 9; } }
@media (max-width: 560px) {
  .proof-strip { gap: 12px; }
  .proof-strip .pf-grid { height: auto; flex-wrap: wrap; gap: 10px; }
  .proof-strip .pf-grid .pf { flex: 1 1 calc(50% - 5px); aspect-ratio: 1 / 1; }
}

/* ---- سه مسیرِ همکاری، کنار هم به‌صورت کارت ----
   به‌جای یک بنرِ تمام‌عرض برای هر مسیر (که روی عکس‌های با رزولوشن محدود
   به‌شدت کیفیت را پایین می‌آورد)، عکس حالا کوچک و داخلِ خودِ کارت است؛
   سه مسیر هم در یک نگاه، کنار هم، قابل مقایسه‌اند. */
.paths-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 40px; }
.path-tile {
  display: flex; flex-direction: column; text-decoration: none;
  background: linear-gradient(175deg, var(--card), color-mix(in srgb, var(--card) 80%, #05121a 20%));
  border: 1px solid var(--line); border-radius: 22px; overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.path-tile .pt-media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.path-tile .pt-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.path-tile .pt-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,15,22,.05) 55%, rgba(5,15,22,.55) 100%); pointer-events: none; }
.path-tile .pt-tag {
  position: absolute; z-index: 2; inset-inline-start: 14px; inset-block-start: 14px;
  background: color-mix(in srgb, var(--paper) 55%, transparent); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.16); border-radius: 999px;
  padding: 6px 14px; font-size: 11.5px; font-weight: 700; color: var(--gold-text);
}
.path-tile .pt-body { display: flex; flex-direction: column; flex: 1; padding: 22px 24px 4px; }
.path-tile h3 { margin: 0 0 10px; font-size: clamp(18px, 2vw, 21px); line-height: 1.4; color: var(--ink); }
.path-tile .pt-body p { font-size: 14.5px; line-height: 1.9; color: var(--on-dark-soft); flex: 1; margin: 0; }
.path-tile .pt-cta { display: flex; align-items: center; gap: 8px; margin: 16px 24px 24px; font-weight: 700; color: var(--sand); }
.path-tile .pt-cta .arw { transition: transform .35s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .path-tile:hover { transform: translateY(-6px); box-shadow: 0 28px 55px -20px rgba(0,0,0,.5); }
  .path-tile:hover .pt-media img { transform: scale(1.07); }
  .path-tile:hover .pt-cta .arw { transform: translateX(-4px); }
}
@media (max-width: 900px) { .paths-grid { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; } }

/* ================= MOTION UPGRADE — ورود پویا و ماکرو-تعامل‌های ظریف ================= */

/* ---- ورود مرحله‌ای هدر صفحات (هم‌زمان با کشیده‌شدن خط زیر تیتر صفحه‌ی اصلی) ---- */
@media (prefers-reduced-motion: no-preference) {
  .js .hero .eyebrow { animation: heroUp .8s var(--ease) both; }
  .js .hero-title .big { animation: heroBigIn .9s var(--ease) .06s both; }
  /* توجه: عنوان‌های .hero-title .rest و .hero .page-title توسط اسکریپت به‌صورت
     کلمه‌به‌کلمه (word-mask) پیچیده و پویا می‌شوند؛ اینجا نیازی به افکت جداگانه نیست. */
  .js .hero .kick { animation: heroUp .9s var(--ease) .3s both; }
  .js .hero .ticker { animation: heroFade 1s var(--ease) .5s both; }
  .js .hero .scroll-cue { animation: heroFade 1s var(--ease) .68s both; }
  @keyframes heroUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
  @keyframes heroBigIn { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
  @keyframes heroFade { from { opacity: 0; } to { opacity: 1; } }
}

/* ---- شکافتِ کلمه‌به‌کلمه‌ی تیترهای هدر (توسط JS به‌صورت word-mask/word پیچیده می‌شود) ---- */
@media (prefers-reduced-motion: no-preference) {
  .js .word-mask { overflow: hidden; display: inline-block; vertical-align: top; }
  .js .word-mask .word {
    display: inline-block; transform: translateY(112%); opacity: 0;
    animation: wordUp .85s var(--ease) forwards;
    animation-delay: calc(var(--wi, 0) * 55ms + .15s);
  }
  @keyframes wordUp { to { transform: translateY(0); opacity: 1; } }
}

/* ---- ریزش پلکانی برچسب‌های داخل chips، پس از نمایان‌شدن کل بلوک ---- */
@media (prefers-reduced-motion: no-preference) {
  .js .chips.rv { opacity: 1; transform: none; }
  .js .chips.rv span {
    opacity: 0; transform: translateY(10px) scale(.92);
    transition: opacity .5s var(--ease), transform .5s var(--ease);
  }
  .js .chips.rv.in span { opacity: 1; transform: none; }
  .js .chips.rv.in span:nth-child(1) { transition-delay: .03s; }
  .js .chips.rv.in span:nth-child(2) { transition-delay: .08s; }
  .js .chips.rv.in span:nth-child(3) { transition-delay: .13s; }
  .js .chips.rv.in span:nth-child(4) { transition-delay: .18s; }
  .js .chips.rv.in span:nth-child(5) { transition-delay: .23s; }
  .js .chips.rv.in span:nth-child(6) { transition-delay: .28s; }
  .js .chips.rv.in span:nth-child(7) { transition-delay: .33s; }
  .js .chips.rv.in span:nth-child(8) { transition-delay: .38s; }
  .js .chips.rv.in span:nth-child(9) { transition-delay: .43s; }
  .js .chips.rv.in span:nth-child(10) { transition-delay: .48s; }
  .js .chips.rv.in span:nth-child(11) { transition-delay: .53s; }
  .js .chips.rv.in span:nth-child(12) { transition-delay: .58s; }
  .js .chips.rv.in span:nth-child(13) { transition-delay: .63s; }
}

/* ---- ضربان کوچک شمارنده‌ها هنگام رسیدن به عدد نهایی ---- */
@media (prefers-reduced-motion: no-preference) {
  .stats .num.done { animation: numPop .45s var(--ease); }
  @keyframes numPop { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.16); } }
}

/* ---- کوچک‌شدن نوار بالای صفحه هنگام اسکرول ---- */
.topbar { transition: box-shadow .35s var(--ease); }
.topbar .wrap.navwrap { transition: height .35s var(--ease); }
.topbar.scrolled { box-shadow: 0 8px 30px rgba(0,0,0,.16); }
.topbar.scrolled .wrap.navwrap { height: 54px; }
@media (max-width: 480px) { .topbar.scrolled .wrap.navwrap { height: 50px; } }

/* ---- بازخورد لمسی دکمه‌ها ---- */
.btn:active { transform: scale(.96); transition-duration: .12s; }

/* ---- پارالاکس ملایمِ هیرو با اسکرول (CSS خالص؛ فقط در مرورگرهایی که پشتیبانی می‌کنند) ---- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero { view-timeline-name: --heroTl; view-timeline-axis: block; }
    .hero .wrap { animation: heroParallax linear both; animation-timeline: --heroTl; animation-range: cover 0% cover 65%; }
    @keyframes heroParallax { from { transform: translateY(0); opacity: 1; } to { transform: translateY(46px); opacity: .72; } }
  }
}

/* ---- ظاهرشدنِ لوگوی مشتریان هنگام ورود به دید (بدون نیاز به JS) ---- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .client-logo { animation: logoIn linear both; animation-timeline: view(); animation-range: entry 0% cover 35%; }
    @keyframes logoIn { from { opacity: 0; transform: translateY(24px) scale(.92); } to { opacity: 1; transform: none; } }
  }
}

/* ================= WOW LAYER — کج‌شدنِ سه‌بعدیِ قوی، تلألؤ عبوری، آئورای پررنگ ================= */

/* ---- کارت‌هایی که با هاورِ ماوس به‌وضوح به‌سمت نور کج می‌شوند (فقط دسکتاپِ با ماوس دقیق) ---- */
@media (pointer: fine) {
  .svc-card, .hub-card, .path-card, .triad article, .remain-grid .rc {
    transition: transform .3s var(--ease), border-color .35s, box-shadow .35s var(--ease);
  }
}

/* ---- تلألؤِ نوری که با هاور از روی کارت عبور می‌کند (بدون وابستگی به موقعیت نشانگر) ---- */
.svc-card, .hub-card, .path-card, .triad article, .remain-grid .rc {
  position: relative; overflow: hidden;
}
.svc-card::before, .hub-card::before, .path-card::before, .triad article::before, .remain-grid .rc::before {
  content: ""; position: absolute; inset: -20% -60%; z-index: 2; pointer-events: none;
  background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.22) 50%, transparent 58%);
  transform: translateX(-60%);
  transition: transform .85s var(--ease);
}
.svc-card:hover::before, .hub-card:hover::before, .path-card:hover::before, .triad article:hover::before, .remain-grid .rc:hover::before {
  transform: translateX(60%);
}
@media (prefers-reduced-motion: reduce) {
  .svc-card::before, .hub-card::before, .path-card::before, .triad article::before, .remain-grid .rc::before { display: none; }
}

/* ---- درخششِ ردیاب روی نوار پیشرفتِ اسکرول ---- */
.progress { box-shadow: 0 0 16px 1px rgba(201,168,118,.6); }

/* ---- ضربانِ قوی‌ترِ توجه‌جلب‌کن روی دکمه‌ی اصلیِ فراخوان پایانی ---- */
@media (prefers-reduced-motion: no-preference) {
  .final .btn.sand.lg {
    animation: ctaPulse 2.4s var(--ease) infinite;
  }
  @keyframes ctaPulse {
    0%, 100% { box-shadow: 0 12px 30px rgba(201,168,118,.3), 0 0 0 0 rgba(201,168,118,.45); }
    50% { box-shadow: 0 18px 46px rgba(201,168,118,.5), 0 0 0 18px rgba(201,168,118,0); }
  }
  .final .btn.sand.lg:hover { animation-play-state: paused; }
}

/* ---- واترمارکِ غول‌آسا و کم‌رنگِ تیترِ هیرو در پس‌زمینه — فقط تایپوگرافی، بدون هیچ رنگِ تازه ----
   نکته: z-index باید هم‌تراز با blob (نه پایین‌تر) باشد وگرنه روی موبایل — که blobها
   نسبت‌به عرض صفحه خیلی بزرگ‌ترند — واترمارک کاملاً زیر آن‌ها محو و نامرئی می‌شود.
   ترتیب درجِ آن در DOM (بعد از blobها، در main.js) همان چیزی‌ست که رویِ‌همِ صحیح را می‌سازد. */
.hero .hero-wm {
  position: absolute; z-index: 1; pointer-events: none;
  inset-inline-start: -2%; inset-block-start: 50%; transform: translateY(-54%);
  font-family: var(--f-display); font-weight: 400; white-space: nowrap;
  font-size: clamp(6rem, 24vw, 17rem); line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.1);
}
.hero.small .hero-wm { font-size: clamp(5rem, 20vw, 13rem); }
/* روی موبایل، این واترمارکِ غول‌آسا با متن‌های دیگر هیرو (مثلاً تیکرِ زیرِ کیک)
   تداخل پیدا می‌کند؛ طبق درخواست کارفرما، فقط در سایزهای موبایل حذف می‌شود
   و خط زیرِ کلمه‌ی اصلی (که رنگی و واضح است) دست‌نخورده باقی می‌ماند. */
@media (max-width: 640px) {
  .hero .hero-wm { display: none; }
}

/* ---- بافتِ ظریفِ دانه‌ای (فیلم‌گرین) روی کل سایت — حس سینمایی و گران‌قیمت،
   بدون افزودن هیچ رنگِ جدید؛ کاملاً خنثی و همسو با پالت فعلی سایت ---- */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 500; pointer-events: none;
  opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* ================= حروفِ فارسی نباید «فاصله‌ی بین حروف» داشته باشند =================
   در مرورگر سافاری (و بعضی مرورگرهای دیگر)، letter-spacing مثبت روی متنِ فارسی،
   اتصالِ حروف را می‌شکند و کلمه‌ها «ح ر و ف ح ر و ف» دیده می‌شوند (مثلِ «خدمات
   ما» یا «مدرسه کسب‌وکار درجریان» در هیرو). همه‌ی مقادیرِ letter-spacing در CSS به
   صفر تغییر کردند؛ این قاعده فقط یک ضمانتِ نهایی برای برچسب‌های کوچکِ باقی‌مانده است. */
.eyebrow, .hpa-pill .lbl, .hub-eyebrow, .dj-profile-eyebrow, .step-head .k, .s-k,
.path-card .tag, .foot-col h5, .nav-ethos, .steps-mini { letter-spacing: 0 !important; }

/* ===== سئو (۱.۲۱.۰): h1 صفحه‌ی اصلی، متن فقط‌خوان، و بخش پرسش‌های پرتکرار ===== */
h1.hero-title { font: inherit; color: inherit; line-height: inherit; text-wrap: initial; }
.dj-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.dj-faq { background: var(--paper-2); }
.dj-faq-title { font-size: clamp(1.5rem, 4vw, 2rem); text-align: center; margin-bottom: 28px; }
.dj-faq-list { max-width: 820px; margin: 0 auto; display: grid; gap: 12px; }
.dj-faq-item {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 0 20px;
}
.dj-faq-item summary {
  cursor: pointer; list-style: none; padding: 16px 0; font-weight: 700; color: var(--ink);
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.dj-faq-item summary::-webkit-details-marker { display: none; }
.dj-faq-item summary::after { content: "+"; color: var(--sand); font-size: 1.4em; line-height: 1; flex: none; }
.dj-faq-item[open] summary::after { content: "−"; }
.dj-faq-item p { color: var(--ink-2); padding-bottom: 18px; font-size: .97em; }