@import url('fonts.css');

/* ===== theme tokens ===== */
    :root,
    html[data-theme="dark"] {
      --bg: #0A0A0A;
      --text: #F2F2EE;
      --heading-white: #FFFFFF;
      --zinc-100: #F4F4F5;
      --zinc-300: #D4D4D8;
      --zinc-400: #A1A1AA;
      --zinc-500: #71717A;
      --dim: #D4D4D8;
      --faint: #71717A;
      --surf: #111111;
      --line: rgba(255, 255, 255, .10);
      --line2: rgba(255, 255, 255, .18);
      --line3: rgba(255, 255, 255, .25);
      --navbg: rgba(10, 10, 10, .88);
      --avabg: #141414;
      --btnbg: #F2F2EE;
      --btnink: #0A0A0A;
      --btnhov: #B8B8B2;
      --imgf: grayscale(1) contrast(1.05);
      --logof: invert(1);
      color-scheme: dark;

      /* Typography Tokens */
      --font-ui: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      --font-mono: 'Geist Mono', 'JetBrains Mono', 'IBM Plex Mono', monospace;
      --font-fa-head: 'Peyda', 'Peyda Web', 'Dana', 'Dana Web', 'Vazirmatn', sans-serif;
      --font-fa-body: 'Peyda Text', 'Peyda', 'Dana', 'Vazirmatn', sans-serif;
    }

    html[data-theme="light"] {
      --bg: #F2F2EE;
      --text: #0A0A0A;
      --heading-white: #0A0A0A;
      --zinc-100: #18181B;
      --zinc-300: #3F3F46;
      --zinc-400: #52525B;
      --zinc-500: #71717A;
      --dim: #3F3F46;
      --faint: #71717A;
      --surf: #E7E7E0;
      --line: rgba(10, 10, 10, .13);
      --line2: rgba(10, 10, 10, .22);
      --line3: rgba(10, 10, 10, .30);
      --navbg: rgba(242, 242, 238, .90);
      --avabg: #E2E2DA;
      --btnbg: #0A0A0A;
      --btnink: #F2F2EE;
      --btnhov: #45453F;
      --imgf: grayscale(1) contrast(1.02);
      --logof: none;
      color-scheme: light;
    }

    /* ===== motion system: one curve, three durations ===== */
    :root {
      --ease: cubic-bezier(.2, .75, .28, 1);
      --t1: 200ms;
      --t2: 380ms;
      --t3: 520ms;
    }

    * {
      box-sizing: border-box
    }

    html {
      scroll-behavior: smooth
    }

    html {
      width: 100%;
      max-width: 100%;
      overflow-x: clip;
      -webkit-text-size-adjust: 100%;
      text-size-adjust: 100%
    }

    body {
      margin: 0;
      width: 100%;
      max-width: 100%;
      background: var(--bg);
      color: var(--text);
      transition: background .3s ease, color .3s ease;
      font-family: var(--font-ui);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      overflow-x: clip
    }

    html[lang="fa"],
    html[lang="fa"] body {
      font-family: var(--font-fa-body);
    }

    a {
      color: var(--text);
      text-decoration: none
    }

    a:hover {
      color: var(--dim)
    }

    ::selection {
      background: var(--text);
      color: var(--bg)
    }

    :focus-visible {
      outline: 2px solid var(--dim);
      outline-offset: 3px
    }

    ::placeholder {
      color: var(--faint);
      opacity: 1
    }

    /* ===== 04 — justified body text ===== */
    /* ===== 04 — body & heading typography ===== */
    .jt,
    main p:not(.lbl):not(.nojt),
    .bio,
    .cs-body p,
    .node-desc,
    .st-desc {
      text-align: start;
      text-align-last: auto;
      hyphens: none;
      -webkit-hyphens: none
    }

    h1,
    h2,
    h3,
    .lbl,
    .mono,
    .btn-s,
    .btn-o,
    .cta,
    .navlinks a,
    .field label,
    .fbot,
    .pager,
    .rl,
    .nm {
      text-align: start !important;
      hyphens: none !important
    }

    /* English Headings: Geist with -0.02em letter-spacing */
    h1, h2, h3, h4, .disp, .sect, .hero-t {
      font-family: var(--font-ui);
      letter-spacing: -0.02em;
      font-weight: 600;
    }

    h1, .hero-t {
      letter-spacing: -0.025em;
      line-height: 1.15;
    }

    /* System & Data Labels (Monospace) */
    .lbl,
    .mono,
    .status,
    .chip,
    .flow-status,
    .graph-num,
    .process-num,
    .kv span,
    .tctl,
    .ecosystem-chip {
      font-family: var(--font-mono);
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--faint);
    }

    /* =========================================================
       PERSIAN TYPOGRAPHY ARCHITECTURE (تفکیک دقیق ۵ بخش زبان فارسی)
       ========================================================= */

    /* ۱. تیترهای اصلی و هیرو (H1 / Headings) */
    html[lang="fa"] h1,
    html[lang="fa"] h1.hero-t,
    html[lang="fa"] .careers-hero-title {
      font-family: var(--font-fa-head) !important;
      font-weight: 800 !important;
      font-size: clamp(30px, 3.8vw, 46px);
      line-height: 1.25 !important;
      letter-spacing: 0 !important;
      color: var(--heading-white) !important;
      text-transform: none !important;
    }

    /* ۱.۱ تیترهای سکشن‌ها (H2 / Section Headings) */
    html[lang="fa"] h2.sect,
    html[lang="fa"] .careers-section-title {
      font-family: var(--font-fa-head) !important;
      font-weight: 700 !important;
      font-size: clamp(20px, 2.3vw, 28px) !important;
      line-height: 1.45 !important;
      letter-spacing: 0 !important;
      color: var(--heading-white) !important;
      text-transform: none !important;
      margin: 0 0 16px !important;
    }

    html[lang="fa"] h1 strong,
    html[lang="fa"] h1 b,
    html[lang="fa"] .hero-t strong,
    html[lang="fa"] .hero-t span:not(.dim) {
      font-weight: 900 !important; /* وزن Black برای کلمات کلیدی شاخص */
      color: var(--heading-white) !important;
    }

    html[lang="fa"] h2 {
      font-family: var(--font-fa-head) !important;
      font-weight: 700 !important;
      line-height: 1.25 !important;
      letter-spacing: 0 !important;
      color: var(--heading-white) !important;
    }

    html[lang="fa"] h3 {
      font-family: var(--font-fa-head) !important;
      font-weight: 700 !important;
      line-height: 1.35 !important;
      letter-spacing: 0 !important;
    }

    /* ۲. عناوین نودها و کارت‌های دیاگرام (Node Titles) */
    html[lang="fa"] .graph-title,
    html[lang="fa"] .process-title,
    html[lang="fa"] .node-title,
    html[lang="fa"] .cs-head .hl,
    html[lang="fa"] .active-card .disp,
    html[lang="fa"] .ps-title,
    html[lang="fa"] .careers-card-title,
    html[lang="fa"] .job-title,
    html[lang="fa"] .drawer-sec-title {
      font-family: var(--font-fa-head) !important;
      font-weight: 600 !important; /* SemiBold وزن ۶۰۰ */
      font-size: 14px;
      line-height: 1.4 !important;
      letter-spacing: 0 !important;
      color: var(--zinc-400); /* حالت غیرفعال: خاکستری نقره‌ای zinc-400 */
    }

    html[lang="fa"] .graph-node.on .graph-title,
    html[lang="fa"] .process-node.on .process-title,
    html[lang="fa"] .graph-node:hover .graph-title,
    html[lang="fa"] .process-node:hover .process-title,
    html[lang="fa"] .cs[data-open="1"] .cs-head .hl,
    html[lang="fa"] .job-row:hover .job-title {
      color: var(--heading-white) !important; /* حالت فعال: سفید درخشان */
    }

    /* ۳. متن بدنه و توضیحات تکمیلی (Body Text) */
    html[lang="fa"] p:not(.lbl),
    html[lang="fa"] .lead,
    html[lang="fa"] .bio,
    html[lang="fa"] .cs-inner p,
    html[lang="fa"] .ps-desc,
    html[lang="fa"] .node-desc,
    html[lang="fa"] .st-desc,
    html[lang="fa"] .careers-hero-sub,
    html[lang="fa"] .careers-card-text,
    html[lang="fa"] .drawer-text,
    html[lang="fa"] .drawer-list li,
    html[lang="fa"] .ba li,
    html[lang="fa"] .member .rl,
    html[lang="fa"] .field input,
    html[lang="fa"] .field textarea {
      font-family: var(--font-fa-body) !important;
      font-weight: 400 !important; /* Regular وزن ۴۰۰ */
      font-size: 14.5px;
      line-height: 1.75 !important; /* لاین‌هیت روان و بسیار باز ۱.۷ تا ۱.۸ */
      color: var(--zinc-300) !important; /* خاکستری نرم zinc-300، پرهیز از سفید خالص */
      letter-spacing: 0 !important;
      text-transform: none !important;
    }

    /* ۴. متادیتاها، نشانگرها و برچسب‌های سیستمی (System Labels & Numbers) */
    html[lang="fa"] .lbl,
    html[lang="fa"] .mono,
    html[lang="fa"] .sidx .n,
    html[lang="fa"] .graph-direction,
    html[lang="fa"] .graph-num,
    html[lang="fa"] .process-num,
    html[lang="fa"] .flow-status,
    html[lang="fa"] .careers-status-label,
    html[lang="fa"] .careers-status-val,
    html[lang="fa"] .careers-card-index,
    html[lang="fa"] .yr,
    html[lang="fa"] .sec,
    html[lang="fa"] .meta,
    html[lang="fa"] .ecosystem-chip,
    html[lang="fa"] .job-badge,
    html[lang="fa"] .job-domain,
    html[lang="fa"] .job-mode,
    html[lang="fa"] .ps-tab-badge {
      font-family: var(--font-mono) !important;
      font-weight: 500 !important; /* Medium وزن ۵۰۰ */
      font-size: 11px; /* بسیار ریز ۱۰ تا ۱۱ پیکسل */
      text-transform: uppercase !important;
      letter-spacing: 0.08em !important; /* فاصله باز میان کاراکترها */
      color: var(--zinc-500) !important; /* خاکستری خنثی zinc-500 */
    }

    /* ۵. دکمه‌ها و ناوبری (CTAs & Navigation Items) */
    html[lang="fa"] .btn-s,
    html[lang="fa"] .btn-o,
    html[lang="fa"] .cta,
    html[lang="fa"] .navlinks a,
    html[lang="fa"] .drawernav a,
    html[lang="fa"] .careers-filter-btn,
    html[lang="fa"] .ps-tab,
    html[lang="fa"] .careers-drawer-close,
    html[lang="fa"] .challenge-toggle-btn,
    html[lang="fa"] .tctl {
      font-family: var(--font-fa-head) !important;
      font-weight: 500 !important; /* Medium وزن ۵۰۰ */
      font-size: 13.5px;
      line-height: 1 !important; /* بدون لاین‌هیت اضافه */
      display: inline-flex;
      align-items: center;
      justify-content: center;
      vertical-align: middle;
      letter-spacing: 0 !important;
    }

    /* ۶. هماهنگی قد کاراکترها و خط کرسی (X-Height Balance) */
    html[lang="fa"] .latin {
      font-family: var(--font-ui) !important;
      unicode-bidi: isolate;
      direction: ltr;
      display: inline;
      vertical-align: baseline;
      line-height: inherit;
      letter-spacing: -0.01em;
    }

    html[lang="fa"] .latin.latin-bracket {
      display: inline-block;
      white-space: nowrap;
      unicode-bidi: isolate;
      direction: ltr;
      vertical-align: baseline;
    }

    html[lang="fa"] .mono .latin,
    html[lang="fa"] .lbl .latin,
    html[lang="fa"] .chip .latin,
    html[lang="fa"] .tag .latin,
    html[lang="fa"] .kv span .latin,
    html[lang="fa"] .ecosystem-chip .latin,
    html[lang="fa"] .job-badge .latin,
    html[lang="fa"] .graph-num,
    html[lang="fa"] .process-num {
      font-family: var(--font-mono) !important;
      vertical-align: 0.02em;
      letter-spacing: 0.08em !important;
      text-transform: uppercase;
    }

    html[lang="fa"] h1 .latin,
    html[lang="fa"] h2 .latin {
      font-family: var(--font-ui) !important;
      letter-spacing: -0.02em;
      font-weight: 700;
      vertical-align: -0.03em;
    }

    html[dir="rtl"] {
      text-align: right
    }

    html[dir="rtl"] p,
    html[dir="rtl"] h1,
    html[dir="rtl"] h2,
    html[dir="rtl"] h3,
    html[dir="rtl"] h4,
    html[dir="rtl"] .lbl,
    html[dir="rtl"] .lead,
    html[dir="rtl"] .bio,
    html[dir="rtl"] .cs-body p,
    html[dir="rtl"] .ps-desc,
    html[dir="rtl"] .ps-features li,
    html[dir="rtl"] .node-desc,
    html[dir="rtl"] .st-desc {
      text-align: right !important;
      text-align-last: right !important;
      hyphens: none !important;
      -webkit-hyphens: none !important
    }

    .disp {
      font-family: 'Space Grotesk', sans-serif
    }

    .mono {
      font-family: 'IBM Plex Mono', monospace
    }

    .wrap {
      max-width: 1440px;
      margin: 0 auto;
      padding: 0 clamp(20px, 4vw, 64px)
    }

    main,
    #stage,
    .page,
    .page>section {
      min-width: 0;
      max-width: 100%
    }

    section {
      border-top: 1px solid var(--line);
      padding: clamp(48px, 7vh, 88px) 0
    }

    section:first-of-type {
      border-top: 0
    }

    .lbl {
      margin: 0;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
      letter-spacing: .18em;
      color: var(--faint)
    }

    html[lang="fa"] .lbl {
      letter-spacing: 0
    }

    /* ===== 05 — refined technical section index ===== */
    .sidx {
      display: flex;
      align-items: baseline;
      gap: 12px;
      margin: 0 0 14px;
      padding-bottom: 10px;
      border-bottom: 1px solid var(--line);
      position: relative;
    }

    .sidx .n {
      font-family: var(--font-mono, 'Geist Mono', monospace);
      font-weight: 700;
      font-size: clamp(14px, 1.5vw, 17px);
      line-height: 1;
      letter-spacing: 0.05em;
      color: var(--text);
    }

    html[lang="fa"] .sidx .n {
      font-family: var(--font-mono, 'Geist Mono', monospace) !important;
      font-weight: 700 !important;
      font-size: clamp(14px, 1.5vw, 17px) !important;
      letter-spacing: 0.04em !important;
    }

    .sidx .w2 {
      font-family: var(--font-mono, 'Geist Mono', monospace);
      font-weight: 600;
      font-size: clamp(11.5px, 1.2vw, 13.5px);
      line-height: 1;
      letter-spacing: 0.08em;
      color: var(--faint);
      text-transform: uppercase;
    }

    html[lang="fa"] .sidx .w2 {
      font-family: var(--font-fa-head) !important;
      font-weight: 700 !important;
      font-size: clamp(12.5px, 1.3vw, 14.5px) !important;
      letter-spacing: 0 !important;
      color: var(--dim) !important;
      line-height: 1.3;
      text-transform: none;
    }

    .sidx .bar {
      flex: 1 1 auto;
      height: 1px;
      background: var(--line2);
      transform: scaleX(0);
      transform-origin: inline-start;
      animation: barIn .6s var(--ease) .15s both;
    }

    @keyframes barIn {
      to {
        transform: scaleX(1);
      }
    }

    h2.sect {
      margin: 0 0 18px;
      font-family: var(--font-ui, 'Geist Sans', sans-serif);
      font-weight: 700;
      font-size: clamp(22px, 2.5vw, 32px);
      line-height: 1.3;
      letter-spacing: -.02em;
      color: var(--text);
    }

    html[lang="fa"] h2.sect {
      font-family: var(--font-fa-head) !important;
      font-size: clamp(20px, 2.3vw, 28px) !important;
      letter-spacing: 0 !important;
      line-height: 1.45 !important;
      color: var(--heading-white) !important;
      text-transform: none;
    }

    .lead {
      margin: 0 0 34px;
      max-width: 66ch;
      font-size: 16px;
      line-height: 1.75;
      color: var(--dim)
    }

    /* ===== reveal ===== */
    .reveal {
      opacity: 0;
      transform: translateY(18px);
      transition: opacity .7s var(--ease), transform .7s var(--ease)
    }

    .reveal.in {
      opacity: 1;
      transform: none
    }

    /* ===== 10 — language swap ===== */
    #stage {
      transition: opacity var(--t1) var(--ease), transform var(--t1) var(--ease), filter var(--t1) var(--ease)
    }

    html.swapping #stage {
      opacity: 0;
      filter: blur(4px)
    }

    html[dir="ltr"].swapping #stage {
      transform: translateX(-18px)
    }

    html[dir="rtl"].swapping #stage {
      transform: translateX(18px)
    }

    html.swapping .navlinks a.n,
    html.swapping .cta {
      opacity: .25
    }

    .navlinks a.n,
    .cta {
      transition: opacity var(--t1) var(--ease)
    }

    @keyframes wordIn {
      from {
        opacity: 0;
        transform: translateY(.42em) scale(.97);
        filter: blur(3px)
      }

      60% {
        opacity: 1;
        filter: blur(0)
      }

      to {
        opacity: 1;
        transform: none;
        filter: none
      }
    }

    @keyframes blockIn {
      from {
        opacity: 0;
        transform: translateY(11px)
      }

      to {
        opacity: 1;
        transform: none
      }
    }

    .w {
      display: inline-block;
      white-space: pre;
      animation: wordIn var(--t3) var(--ease) both
    }

    .blockIn {
      animation: blockIn var(--t2) var(--ease) both
    }

    /* ===== 09 — nav, direction aware ===== */
    header {
      position: sticky;
      top: 0;
      z-index: 30;
      background: var(--navbg);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid var(--line)
    }

    .navbar {
      height: 66px;
      display: flex;
      align-items: center;
      gap: clamp(14px, 2.4vw, 34px)
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      flex: 0 0 auto
    }

    .brand img {
      width: 26px;
      height: 26px;
      object-fit: contain;
      display: block;
      filter: var(--logof);
      transition: filter .3s ease
    }

    .brand span {
      font-weight: 700;
      font-size: 16px;
      letter-spacing: .14em;
      white-space: nowrap
    }

    .brand:hover span {
      color: var(--dim)
    }

    /* links flow FROM the logo in reading direction; utilities anchor to the far edge */
    .navlinks {
      display: flex;
      align-items: center;
      gap: clamp(12px, 2vw, 28px);
      font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
      letter-spacing: .14em;
      margin-inline-start: clamp(16px, 3vw, 44px);
      position: relative
    }

    html[lang="fa"] .navlinks {
      font-family: 'Vazirmatn', sans-serif;
      letter-spacing: .02em;
      font-size: 12.5px
    }

    .navutil {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-inline-start: auto;
      flex: 0 0 auto
    }

    .navlinks a.n {
      color: var(--faint);
      padding: 6px 0;
      transition: color var(--t1) var(--ease);
      white-space: nowrap
    }

    .navlinks a.n:hover {
      color: var(--text)
    }

    .navlinks a.n[aria-current="page"] {
      color: var(--text)
    }

    .navind {
      position: absolute;
      bottom: -1px;
      height: 2px;
      background: var(--text);
      inset-inline-start: 0;
      width: 0;
      transition: inset-inline-start var(--t2) var(--ease), width var(--t2) var(--ease);
      pointer-events: none
    }

    .cta {
      color: var(--btnink) !important;
      background: var(--btnbg);
      padding: 10px 18px;
      transition: background .25s;
      white-space: nowrap;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
      letter-spacing: .14em
    }

    html[lang="fa"] .cta {
      font-family: 'Vazirmatn', sans-serif;
      letter-spacing: .02em;
      font-size: 12.5px
    }

    .cta:hover {
      background: var(--btnhov);
      color: var(--btnink) !important
    }

    /* language pill with sliding fill */
    .lang {
      display: inline-flex;
      border: 1px solid var(--line2);
      overflow: hidden;
      flex: 0 0 auto;
      position: relative
    }

    .lang .fill {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 50%;
      background: var(--btnbg);
      inset-inline-start: 0;
      transition: transform var(--t2) var(--ease);
      z-index: 0
    }

    .lang[data-active="en"] .fill {
      transform: translateX(0)
    }

    .lang[data-active="fa"] .fill {
      transform: translateX(100%)
    }

    html[dir="rtl"] .lang[data-active="fa"] .fill {
      transform: translateX(-100%)
    }

    .lang button {
      appearance: none;
      background: transparent;
      border: 0;
      cursor: pointer;
      color: var(--faint);
      font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
      letter-spacing: .12em;
      padding: 7px 11px;
      line-height: 1.4;
      transition: color var(--t1) var(--ease);
      min-width: 44px;
      position: relative;
      z-index: 1
    }

    .lang button:hover {
      color: var(--text)
    }

    .lang button[aria-pressed="true"] {
      color: var(--btnink)
    }

    .themebtn {
      display: none !important;
    }

    .themebtn:hover {
      border-color: var(--text);
      color: var(--text)
    }

    .themebtn svg {
      width: 15px;
      height: 15px
    }

    .menubtn {
      display: none;
      background: transparent;
      border: 1px solid var(--line2);
      color: var(--dim);
      cursor: pointer;
      padding: 8px 10px;
      line-height: 0
    }

    .menubtn svg {
      width: 16px;
      height: 16px
    }

    .drawer {
      display: none;
      border-top: 1px solid var(--line);
      background: var(--navbg)
    }

    .drawer.open {
      display: block
    }

    .drawer nav {
      display: flex;
      flex-direction: column;
      padding: 10px 0 16px
    }

    .drawer a {
      padding: 11px 0;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 12px;
      letter-spacing: .14em;
      color: var(--dim);
      border-bottom: 1px solid var(--line)
    }

    html[lang="fa"] .drawer a {
      font-family: 'Vazirmatn', sans-serif;
      letter-spacing: .02em;
      font-size: 14px
    }

    /* ===== 11 — page router / pagination ===== */
    .page {
      display: none;
      outline: none;
    }

    .page:focus,
    .page:focus-visible,
    [tabindex="-1"]:focus,
    [tabindex="-1"]:focus-visible {
      outline: none !important;
    }

    .page.active {
      display: block
    }

    @keyframes pageIn {
      from {
        opacity: 0;
        transform: translateY(14px)
      }

      to {
        opacity: 1;
        transform: none
      }
    }

    .page.active {
      animation: pageIn var(--t2) var(--ease) both
    }

    .rail {
      display: flex;
      gap: 6px;
      margin: 0 0 28px;
      padding-top: 26px
    }

    .rail i {
      height: 2px;
      flex: 1 1 0;
      background: var(--line2);
      transition: background var(--t2) var(--ease)
    }

    .rail i.on {
      background: var(--text)
    }

    .rail i.done {
      background: var(--line3)
    }

    .pager {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 14px;
      border-top: 1px solid var(--line);
      padding: 26px 0 clamp(48px, 8vh, 90px);
      font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
      letter-spacing: .14em
    }

    html[lang="fa"] .pager {
      font-family: 'Vazirmatn', sans-serif;
      letter-spacing: .02em;
      font-size: 13px
    }

    .pager a {
      color: var(--faint);
      display: inline-flex;
      align-items: center;
      gap: 9px;
      transition: color var(--t1)
    }

    .pager a:hover {
      color: var(--text)
    }

    .pager .k {
      color: var(--line3)
    }

    .pager .arw {
      display: inline-block
    }

    html[dir="rtl"] .pager .arw {
      transform: scaleX(-1)
    }

    /* ===== 01 — hero with axes ===== */
    .hero {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: clamp(32px, 5vw, 72px);
      padding: clamp(44px, 7vh, 96px) 0 0;
      border: 0
    }

    h1.hero-t {
      margin: 0;
      font-family: 'Space Grotesk', sans-serif;
      font-weight: 700;
      font-size: clamp(40px, 7vw, 88px);
      line-height: 1.02;
      letter-spacing: -.03em;
      text-transform: uppercase
    }

    html[lang="fa"] h1.hero-t {
      font-family: var(--font-fa-head) !important;
      text-transform: none;
      letter-spacing: 0 !important;
      font-size: clamp(38px, 5.8vw, 76px);
      font-weight: 800;
      line-height: 1.18;
    }

    .hero-t>span {
      display: block;
      white-space: nowrap
    }

    .hero-t .dim {
      color: var(--faint)
    }

    html[lang="fa"] .hero-t .dim {
      color: color-mix(in srgb, var(--dim) 82%, var(--bg));
      font-weight: 500
    }

    html[lang="fa"] .hero-t>span:not(.dim) {
      color: var(--text);
      font-weight: 800
    }

    .hero>div:first-child>.lbl {
      color: var(--dim);
      font-size: 12px;
      font-weight: 500;
      letter-spacing: .16em
    }

    .hero>div:first-child>.lbl+.lbl {
      color: var(--faint);
      font-size: 10px;
      font-weight: 400
    }

    .axes text {
      font-family: 'IBM Plex Mono', monospace;
      letter-spacing: .14em
    }

    html[lang="fa"] .axes text {
      font-family: var(--font-fa-head) !important;
      letter-spacing: 0 !important;
      direction: rtl;
      unicode-bidi: plaintext
    }

    .axes .trace {
      stroke-dasharray: 1 0;
    }

    @keyframes drawline {
      from {
        stroke-dashoffset: var(--len)
      }

      to {
        stroke-dashoffset: 0
      }
    }

    @keyframes flowdash {
      to {
        stroke-dashoffset: -200
      }
    }

    @keyframes pulse {
      0% {
        transform: scale(.6);
        opacity: .9
      }

      100% {
        transform: scale(2.1);
        opacity: 0
      }
    }

    @keyframes ride {
      to {
        offset-distance: 100%
      }
    }

    .axes .grid {
      stroke: var(--line);
      stroke-width: 1
    }

    .axes .ax {
      stroke: var(--line3);
      stroke-width: 1.2
    }

    .axes .curve {
      stroke: var(--text);
      stroke-width: 1.6;
      fill: none;
      stroke-dasharray: var(--len);
      stroke-dashoffset: var(--len);
      animation: drawline 2.2s var(--ease) .2s both
    }

    .axes .ghost {
      stroke: var(--line2);
      stroke-width: 1;
      fill: none;
      stroke-dasharray: 3 7;
      animation: flowdash 18s linear infinite
    }

    .axes .ring {
      animation: pulse 3.6s ease-out infinite;
      transform-box: fill-box;
      transform-origin: center
    }

    .axes .rider {
      offset-path: var(--path);
      offset-rotate: 0deg;
      animation: ride 7s linear infinite
    }

    .axes .maturity-band {
      fill: var(--line);
      opacity: .38;
      animation: band-live 4.8s ease-in-out infinite
    }

    .axes .signal {
      fill: var(--bg);
      stroke: var(--text);
      stroke-width: 1.4;
      transform-box: fill-box;
      transform-origin: center;
      animation: signal-live 2.8s ease-in-out infinite
    }

    .axes .signal.s2 {
      animation-delay: -.55s
    }

    .axes .signal.s3 {
      animation-delay: -1.1s
    }

    .axes .signal.s4 {
      animation-delay: -1.65s
    }

    .axes .signal.s5 {
      animation-delay: -2.2s
    }

    .axes .scanner {
      stroke: var(--text);
      stroke-width: 1;
      opacity: .7;
      stroke-dasharray: 3 4;
      animation: scan-maturity 6.4s var(--ease) infinite
    }

    .axes .scanner-head {
      fill: var(--text);
      animation: scan-head 6.4s var(--ease) infinite
    }

    .axes .micro-line {
      stroke: var(--line3);
      stroke-width: 1;
      stroke-dasharray: 2 5;
      animation: flowdash 12s linear infinite
    }

    @keyframes band-live {
      50% {
        opacity: .72
      }
    }

    @keyframes signal-live {

      0%,
      100% {
        transform: scale(.72);
        opacity: .45
      }

      50% {
        transform: scale(1.35);
        opacity: 1
      }
    }

    @keyframes scan-maturity {

      0%,
      8% {
        transform: translateX(0);
        opacity: 0
      }

      18% {
        opacity: .8
      }

      82% {
        opacity: .8
      }

      92%,
      100% {
        transform: translateX(330px);
        opacity: 0
      }
    }

    @keyframes scan-head {

      0%,
      8% {
        transform: translateX(0);
        opacity: 0
      }

      18% {
        opacity: 1
      }

      82% {
        opacity: 1
      }

      92%,
      100% {
        transform: translateX(330px);
        opacity: 0
      }
    }

    .btn-o {
      border: 1px solid var(--line3);
      padding: 11px 19px;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
      letter-spacing: .14em;
      color: var(--dim);
      transition: border-color .25s, color .25s;
      display: inline-block
    }

    .btn-o:hover {
      border-color: var(--text);
      color: var(--text)
    }

    .btn-s {
      background: var(--btnbg);
      color: var(--btnink) !important;
      padding: 12px 21px;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
      letter-spacing: .14em;
      transition: background .25s;
      display: inline-block
    }

    .btn-s:hover {
      background: var(--btnhov)
    }

    html[lang="fa"] .btn-s,
    html[lang="fa"] .btn-o {
      font-family: 'Vazirmatn', sans-serif;
      letter-spacing: .02em;
      font-size: 13px
    }

    /* ===== 07/08 — node tour ===== */
    .tour {
      border: 1px solid var(--line);
      background: var(--bg)
    }

    .tour-canvas {
      position: relative;
      width: 100%;
      background: var(--bg)
    }

    .tour-canvas svg {
      display: block;
      width: 100%;
      height: auto
    }

    .edge {
      stroke: var(--line2);
      stroke-width: 1.2;
      fill: none;
      stroke-dasharray: var(--len);
      stroke-dashoffset: var(--len);
      transition: stroke-dashoffset .7s var(--ease), stroke .4s var(--ease)
    }

    .edge.on {
      stroke-dashoffset: 0
    }

    .edge.past {
      stroke: var(--line3)
    }

    .nd {
      cursor: pointer
    }

    .nd .hit {
      fill: transparent
    }

    .nd .dot {
      fill: var(--bg);
      stroke: var(--line3);
      stroke-width: 1.4;
      transition: stroke .35s var(--ease), fill .35s var(--ease), r .35s var(--ease)
    }

    .nd .lab {
      fill: var(--faint);
      font-family: 'IBM Plex Mono', monospace;
      font-size: 9.5px;
      letter-spacing: .14em;
      transition: fill .35s var(--ease)
    }

    .nd:hover .dot {
      stroke: var(--text)
    }

    .nd:hover .lab {
      fill: var(--dim)
    }

    .nd.seen .dot {
      stroke: var(--line3);
      fill: var(--surf)
    }

    .nd.on .dot {
      stroke: var(--text);
      fill: var(--text)
    }

    .nd.on .lab {
      fill: var(--text)
    }

    .nd .halo {
      fill: none;
      stroke: var(--line3);
      opacity: 0;
      transform-box: fill-box;
      transform-origin: center
    }

    .nd.on .halo {
      animation: pulse 2.4s ease-out infinite;
      opacity: 1
    }

    .tour-detail {
      border-top: 1px solid var(--line);
      padding: clamp(24px, 3vw, 36px);
      min-height: 190px;
      display: flex;
      flex-wrap: wrap;
      gap: 24px 44px
    }

    .tour-detail .meta {
      flex: 0 0 130px
    }

    .tour-detail .body {
      flex: 1 1 380px;
      min-width: min(100%, 260px)
    }

    .node-num {
      font-family: 'Space Grotesk', sans-serif;
      font-weight: 700;
      font-size: clamp(34px, 4vw, 54px);
      line-height: 1;
      letter-spacing: -.02em;
      color: var(--text)
    }

    html[lang="fa"] .node-num {
      font-family: 'Vazirmatn', sans-serif
    }

    .node-title {
      margin: 0 0 12px;
      font-family: 'Space Grotesk', sans-serif;
      font-weight: 500;
      font-size: clamp(19px, 2.2vw, 26px);
      line-height: 1.25
    }

    html[lang="fa"] .node-title {
      font-family: 'Vazirmatn', sans-serif;
      line-height: 1.5
    }

    .node-desc {
      margin: 0;
      font-size: 15px;
      line-height: 1.75;
      color: var(--dim);
      max-width: 62ch
    }

    .fadeSwap {
      animation: blockIn var(--t2) var(--ease) both
    }

    .tour-bar {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 14px;
      border-top: 1px solid var(--line);
      padding: 14px clamp(18px, 3vw, 28px)
    }

    .tour-dots {
      display: flex;
      gap: 8px;
      flex: 1 1 auto
    }

    .tour-dots button {
      appearance: none;
      border: 0;
      background: var(--line2);
      width: 26px;
      height: 3px;
      padding: 0;
      cursor: pointer;
      transition: background var(--t1)
    }

    .tour-dots button[aria-current="true"] {
      background: var(--text)
    }

    .tour-dots button:hover {
      background: var(--dim)
    }

    .tctl {
      appearance: none;
      background: transparent;
      border: 1px solid var(--line2);
      color: var(--faint);
      cursor: pointer;
      padding: 6px 12px;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 10px;
      letter-spacing: .14em;
      transition: border-color var(--t1), color var(--t1)
    }

    .tctl:hover {
      border-color: var(--text);
      color: var(--text)
    }

    html[lang="fa"] .tctl {
      font-family: 'Vazirmatn', sans-serif;
      letter-spacing: .02em;
      font-size: 12px
    }

    .tour-list {
      display: none
    }

    .kv {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 16px
    }

    .kv span {
      border: 1px solid var(--line2);
      padding: 5px 10px;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 10px;
      letter-spacing: .12em;
      color: var(--faint)
    }

    html[lang="fa"] .kv span {
      font-family: 'Vazirmatn', sans-serif;
      letter-spacing: .02em;
      font-size: 12px
    }

    /* ===== 06 — team ===== */
    .team {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
      gap: 1px;
      background: var(--line);
      border: 1px solid var(--line)
    }

    .member {
      background: var(--bg);
      padding: 30px 28px 32px;
      display: flex;
      gap: 20px;
      transition: background .3s;
      position: relative
    }

    .member:hover {
      background: var(--surf)
    }

    .ava {
      width: 84px;
      height: 84px;
      border: 1px solid var(--line2);
      display: grid;
      place-items: center;
      overflow: hidden;
      background: var(--avabg);
      flex: 0 0 auto
    }

    .ava img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      filter: var(--imgf)
    }

    .ava span {
      font-family: 'Space Grotesk', sans-serif;
      font-weight: 500;
      font-size: 24px;
      letter-spacing: .04em;
      color: var(--faint)
    }

    .mbody {
      flex: 1 1 auto;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 9px
    }

    .member .nm {
      margin: 0;
      font-family: 'Space Grotesk', sans-serif;
      font-weight: 500;
      font-size: 19px
    }

    html[lang="fa"] .member .nm {
      font-family: 'Vazirmatn', sans-serif
    }

    .member .rl {
      margin: 0;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 10.5px;
      letter-spacing: .16em;
      color: var(--faint)
    }

    html[lang="fa"] .member .rl {
      font-family: 'Vazirmatn', sans-serif;
      letter-spacing: .02em;
      font-size: 12px
    }

    .bio {
      margin: 4px 0 0;
      font-size: 14px;
      line-height: 1.75;
      color: var(--dim)
    }

    .member .bio {
      font-size: 13px;
      line-height: 1.68
    }

    .tags i {
      font-style: normal;
      border: 1px solid var(--line);
      padding: 4px 9px;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 9.5px;
      letter-spacing: .12em;
      color: var(--faint)
    }

    html[lang="fa"] .tags i {
      font-family: 'Vazirmatn', sans-serif;
      letter-spacing: 0;
      font-size: 11.5px
    }

    .li-link {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 10.5px;
      letter-spacing: .14em;
      color: var(--faint);
      transition: color .25s;
      margin-top: auto;
      padding-top: 10px
    }

    .li-link:hover {
      color: var(--text)
    }

    .li-link svg {
      width: 14px;
      height: 14px;
      flex: 0 0 auto
    }

    /* ===== 02 — work: active study + case studies ===== */
    .active-card {
      border: 1px solid var(--line2);
      background: var(--surf);
      padding: clamp(26px, 3.4vw, 40px)
    }

    .chip {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border: 1px solid var(--line2);
      padding: 5px 11px;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 10px;
      letter-spacing: .16em;
      color: var(--dim)
    }

    html[lang="fa"] .chip {
      font-family: 'Vazirmatn', sans-serif;
      letter-spacing: .02em;
      font-size: 12px
    }

    .chip .blink {
      width: 6px;
      height: 6px;
      background: var(--text);
      border-radius: 50%;
      animation: bk 2s ease-in-out infinite
    }

    @keyframes bk {

      0%,
      100% {
        opacity: 1
      }

      50% {
        opacity: .25
      }
    }

    .prog {
      margin-top: 26px
    }

    .prog-track {
      display: flex;
      gap: 2px
    }

    .prog-track i {
      height: 4px;
      flex: 1 1 0;
      background: var(--line2)
    }

    .prog-track i.on {
      background: var(--text)
    }

    .prog-legend {
      display: flex;
      justify-content: space-between;
      gap: 8px;
      margin-top: 9px;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 9.5px;
      letter-spacing: .12em;
      color: var(--faint)
    }

    html[lang="fa"] .prog-legend {
      font-family: 'Vazirmatn', sans-serif;
      letter-spacing: 0;
      font-size: 11px
    }

    .cs {
      border-top: 1px solid var(--line)
    }

    .cs:last-of-type {
      border-bottom: 1px solid var(--line)
    }

    .cs-head {
      width: 100%;
      appearance: none;
      background: transparent;
      border: 0;
      cursor: pointer;
      color: inherit;
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: 10px 26px;
      padding: 24px 0;
      text-align: start;
      transition: opacity var(--t1)
    }

    .cs-head:hover {
      opacity: .72
    }

    .cs-head .yr {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 10.5px;
      letter-spacing: .14em;
      color: var(--faint);
      flex: 0 0 auto
    }

    .cs-head .sec {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 10.5px;
      letter-spacing: .14em;
      color: var(--faint);
      flex: 0 0 auto
    }

    html[lang="fa"] .cs-head .yr,
    html[lang="fa"] .cs-head .sec {
      font-family: var(--font-fa-head) !important;
      letter-spacing: 0 !important;
      font-size: 12px
    }

    .cs-head .hl {
      flex: 1 1 320px;
      font-size: 17.5px;
      line-height: 1.5
    }

    html[lang="fa"] .cs-head .hl {
      font-family: var(--font-fa-head) !important;
      font-size: 16.5px;
      line-height: 1.6 !important
    }

    .cs-head .pm {
      font-family: 'IBM Plex Mono', monospace;
      color: var(--faint);
      flex: 0 0 auto;
      transition: transform var(--t2) var(--ease)
    }

    .cs[data-open="1"] .cs-head .pm {
      transform: rotate(45deg)
    }

    .cs-body {
      max-height: 0;
      overflow: hidden;
      transition: max-height var(--t3) var(--ease)
    }

    .cs-inner {
      padding: 0 0 30px;
      display: grid;
      gap: 22px 44px;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr))
    }

    .cs-inner h4 {
      margin: 0 0 8px;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 10px;
      letter-spacing: .18em;
      color: var(--faint);
      font-weight: 400
    }

    html[lang="fa"] .cs-inner h4 {
      font-family: var(--font-fa-head) !important;
      letter-spacing: 0 !important;
      font-size: 12px
    }

    .cs-inner p {
      margin: 0;
      font-size: 14.5px;
      line-height: 1.75;
      color: var(--dim)
    }

    html[lang="fa"] .cs-inner p {
      font-size: 14px;
      line-height: 1.85 !important
    }

    .metrics {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      grid-column: 1/-1
    }

    .metrics b {
      font-weight: 400;
      border: 1px solid var(--line2);
      padding: 8px 13px;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
      letter-spacing: .12em;
      color: var(--text)
    }

    html[lang="fa"] .metrics b {
      font-family: var(--font-fa-head) !important;
      letter-spacing: 0 !important;
      font-size: 12.5px
    }

    /* ===== transformation ===== */
    .ba {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
      gap: 1px;
      background: var(--line);
      border: 1px solid var(--line)
    }

    .ba>div {
      background: var(--bg);
      padding: 32px 28px
    }

    .ba ul {
      margin: 16px 0 0;
      padding: 0;
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 12px
    }

    .ba li {
      font-size: 15px;
      color: var(--dim);
      display: flex;
      gap: 10px;
      align-items: baseline
    }

    html[lang="fa"] .ba li {
      font-size: 14px;
      line-height: 1.8 !important
    }

    .ba li::before {
      content: '';
      width: 6px;
      height: 1px;
      background: var(--faint);
      flex: 0 0 auto;
      transform: translateY(-4px)
    }

    .ba .after li {
      color: var(--text)
    }

    /* ===== insights ===== */
    .post {
      display: flex;
      flex-wrap: wrap;
      gap: 10px 28px;
      align-items: baseline;
      padding: 22px 0;
      border-bottom: 1px solid var(--line)
    }

    .post:first-child {
      border-top: 1px solid var(--line)
    }

    .post .meta {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 10.5px;
      letter-spacing: .14em;
      color: var(--faint);
      flex: 0 0 auto
    }

    html[lang="fa"] .post .meta {
      font-family: var(--font-fa-head) !important;
      letter-spacing: 0 !important;
      font-size: 12px
    }

    .post .ttl {
      font-size: 17px;
      line-height: 1.5;
      flex: 1 1 340px;
      transition: color .25s
    }

    html[lang="fa"] .post .ttl {
      font-family: var(--font-fa-head) !important;
      font-size: 16px;
      line-height: 1.6 !important
    }

    .post:hover .ttl {
      color: var(--dim)
    }

    /* ===== contact ===== */
    .field {
      display: flex;
      flex-direction: column;
      gap: 8px
    }

    .field label {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 10px;
      letter-spacing: .16em;
      color: var(--faint)
    }

    html[lang="fa"] .field label {
      font-family: 'Vazirmatn', sans-serif;
      letter-spacing: 0;
      font-size: 12px
    }

    .field input,
    .field textarea {
      background: transparent;
      border: 0;
      border-bottom: 1px solid var(--line2);
      color: var(--text);
      font-family: inherit;
      font-size: 15px;
      padding: 9px 0;
      outline: none;
      transition: border-color .25s;
      width: 100%
    }

    .field input:focus,
    .field textarea:focus {
      border-bottom-color: var(--text)
    }

    /* ===== 03 — Dual-Engine Products & Services ===== */
    .pe-container {
      width: 100%;
      max-width: 100%;
      overflow-x: hidden;
      box-sizing: border-box;
    }

    /* 1. The Dual-Engine Switcher */
    .pe-switcher-wrap {
      display: flex;
      margin: 28px 0 36px;
    }

    .pe-switcher {
      display: inline-flex;
      background: var(--surf);
      border: 1px solid rgba(255, 255, 255, 0.16);
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.06);
      border-radius: 999px;
      padding: 4px;
      gap: 4px;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }

    .pe-tab {
      appearance: none;
      background: transparent;
      border: 1px solid transparent;
      padding: 8px 20px;
      border-radius: 999px;
      cursor: pointer;
      display: inline-flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 2px;
      transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
      text-align: start;
    }

    html[dir="rtl"] .pe-tab,
    html[lang="fa"] .pe-tab {
      align-items: flex-start;
    }

    .pe-tab-tag {
      font-family: var(--font-mono);
      font-size: 9px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--faint);
      line-height: 1.2;
    }

    .pe-tab-title {
      font-family: var(--font-ui);
      font-weight: 600;
      font-size: 13.5px;
      color: var(--dim);
      line-height: 1.3;
    }

    html[lang="fa"] .pe-tab-title {
      font-family: var(--font-fa-head) !important;
      font-size: 14px;
      letter-spacing: 0 !important;
    }

    .pe-tab:hover {
      color: var(--text);
      background: rgba(255, 255, 255, 0.04);
    }

    .pe-tab.active {
      background: var(--text);
      color: var(--bg);
      border-color: var(--text);
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    }

    .pe-tab.active .pe-tab-tag {
      color: var(--bg);
      opacity: 0.75;
      font-weight: 600;
    }

    .pe-tab.active .pe-tab-title {
      color: var(--bg);
      font-weight: 700;
    }

    /* Views & Animation */
    .pe-view {
      animation: fadeSlideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    .pe-view-intro {
      margin-bottom: 28px;
    }

    .pe-intro-kicker {
      font-family: var(--font-mono);
      font-size: 10.5px;
      letter-spacing: 0.12em;
      color: var(--faint);
      text-transform: uppercase;
      margin-bottom: 6px;
      display: inline-block;
    }

    .pe-intro-title {
      margin: 0 0 8px;
      font-family: var(--font-ui);
      font-size: clamp(20px, 2.4vw, 28px);
      font-weight: 700;
      color: var(--text);
    }

    html[lang="fa"] .pe-intro-title {
      font-family: var(--font-fa-head) !important;
      font-weight: 800 !important;
    }

    .pe-intro-desc {
      margin: 0;
      font-size: 14px;
      line-height: 1.75;
      color: var(--dim);
      max-width: 820px;
    }

    html[lang="fa"] .pe-intro-desc {
      font-family: var(--font-fa-body) !important;
      font-size: 14.5px;
      line-height: 1.85 !important;
    }

    /* 2. Agent Fleet Spec-Cards */
    .agent-fleet-grid {
      display: flex;
      flex-direction: column;
      gap: 32px;
      margin-bottom: 48px;
    }

    .agent-spec-card {
      background: var(--surf);
      border: 1px solid var(--line2);
      border-radius: var(--radius);
      padding: clamp(22px, 3vw, 32px);
      display: grid;
      grid-template-columns: 1.15fr 1fr;
      gap: 28px;
      position: relative;
      transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    }

    .agent-spec-card:hover {
      border-color: rgba(255, 255, 255, 0.26);
      transform: translateY(-3px);
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.22);
    }

    .agent-spec-side {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .agent-spec-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }

    .agent-mono-tag {
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: 0.08em;
      color: var(--text);
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid var(--line2);
      border-radius: 6px;
      padding: 4px 10px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .agent-mono-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #27c93f;
      display: inline-block;
      box-shadow: 0 0 8px rgba(39, 201, 63, 0.6);
    }

    .agent-status-badge {
      font-family: var(--font-mono);
      font-size: 9.5px;
      letter-spacing: 0.1em;
      color: var(--dim);
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: var(--bg);
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 3px 9px;
    }

    .live-pulse {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: #27c93f;
      display: inline-block;
      animation: pulse 2s infinite;
    }

    .agent-header-info {
      margin-top: 2px;
    }

    .agent-title {
      margin: 0;
      font-family: var(--font-ui);
      font-size: clamp(22px, 2.2vw, 26px);
      font-weight: 700;
      color: var(--text);
      line-height: 1.25;
    }

    html[lang="fa"] .agent-title {
      font-family: var(--font-fa-head) !important;
      font-weight: 800 !important;
      font-size: clamp(21px, 2vw, 25px);
    }

    .agent-subtitle {
      margin: 4px 0 0;
      font-size: 12px;
      color: var(--dim);
      letter-spacing: 0.04em;
    }

    html[lang="fa"] .agent-subtitle {
      font-family: var(--font-fa-head) !important;
      font-size: 13px;
    }

    /* Core Mission Box */
    .agent-mission-box {
      background: rgba(255, 255, 255, 0.025);
      border: 1px solid var(--line2);
      border-inline-start: 3px solid var(--text);
      border-radius: 6px;
      padding: 12px 16px;
    }

    .mission-label-row {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 6px;
    }

    .mission-icon {
      font-size: 12px;
    }

    .mission-label {
      font-family: var(--font-mono);
      font-size: 9.5px;
      letter-spacing: 0.1em;
      color: var(--faint);
      text-transform: uppercase;
    }

    html[lang="fa"] .mission-label {
      font-family: var(--font-fa-head) !important;
      font-size: 11px;
    }

    .mission-statement {
      margin: 0;
      font-size: 13.5px;
      line-height: 1.7;
      color: var(--text);
      font-weight: 500;
    }

    html[lang="fa"] .mission-statement {
      font-family: var(--font-fa-body) !important;
      font-size: 14px;
      line-height: 1.8 !important;
    }

    /* Autonomy Spectrum */
    .autonomy-spectrum-wrap {
      background: var(--bg);
      border: 1px solid var(--line);
      border-radius: 6px;
      padding: 12px 14px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .spectrum-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .spectrum-title {
      font-family: var(--font-mono);
      font-size: 9.5px;
      letter-spacing: 0.08em;
      color: var(--faint);
      text-transform: uppercase;
    }

    html[lang="fa"] .spectrum-title {
      font-family: var(--font-fa-head) !important;
      font-size: 11px;
    }

    .spectrum-val-label {
      font-family: var(--font-mono);
      font-size: 10.5px;
      font-weight: 600;
      color: var(--text);
    }

    html[lang="fa"] .spectrum-val-label {
      font-family: var(--font-fa-head) !important;
      font-size: 11.5px;
    }

    .spectrum-meter {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 6px;
    }

    .spectrum-bar {
      height: 6px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid var(--line2);
      transition: all 0.3s ease;
    }

    .spectrum-bar.active {
      background: var(--text);
      border-color: var(--text);
      box-shadow: 0 0 8px rgba(255, 255, 255, 0.25);
    }

    .spectrum-desc {
      margin: 0;
      font-size: 12px;
      color: var(--dim);
      line-height: 1.5;
    }

    html[lang="fa"] .spectrum-desc {
      font-family: var(--font-fa-body) !important;
      font-size: 12.5px;
    }

    /* Integration Protocols */
    .agent-integrations-wrap {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .integrations-label {
      font-family: var(--font-mono);
      font-size: 9.5px;
      letter-spacing: 0.08em;
      color: var(--faint);
      text-transform: uppercase;
    }

    html[lang="fa"] .integrations-label {
      font-family: var(--font-fa-head) !important;
      font-size: 11px;
    }

    .integrations-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .proto-tag {
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: 0.04em;
      color: var(--dim);
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid var(--line2);
      padding: 3px 8px;
      border-radius: 4px;
    }

    .agent-card-actions {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-top: auto;
      padding-top: 14px;
      border-top: 1px solid var(--line);
      flex-wrap: wrap;
    }

    .agent-deploy-btn {
      padding: 10px 18px;
      font-size: 11px;
      font-weight: 600;
      cursor: pointer;
      border: 0;
    }

    html[lang="fa"] .agent-deploy-btn {
      font-family: var(--font-fa-head) !important;
      font-size: 13px;
      letter-spacing: 0 !important;
    }

    .btn-ghost-sim {
      background: transparent;
      border: 1px solid var(--line2);
      color: var(--dim);
      font-family: var(--font-mono);
      font-size: 10.5px;
      letter-spacing: 0.04em;
      padding: 9px 14px;
      border-radius: 6px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: all 0.2s ease;
    }

    html[lang="fa"] .btn-ghost-sim {
      font-family: var(--font-fa-head) !important;
      font-size: 12px;
      letter-spacing: 0 !important;
    }

    .btn-ghost-sim:hover {
      border-color: var(--text);
      color: var(--text);
      background: rgba(255, 255, 255, 0.04);
    }

    .sim-icon {
      font-size: 10px;
      color: #27c93f;
    }

    /* Agent Console Preview (Dark Terminal Window) */
    .agent-console-side {
      display: flex;
      flex-direction: column;
    }

    .console-terminal {
      background: #090a0d;
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 8px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      height: 100%;
      box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.06), 0 12px 36px rgba(0, 0, 0, 0.4);
      transition: border-color 0.25s ease;
    }

    .console-terminal.console-replaying {
      border-color: rgba(39, 201, 63, 0.5);
      animation: consoleReplayPulse 0.6s ease;
    }

    .console-titlebar {
      display: flex;
      align-items: center;
      gap: 10px;
      background: #111317;
      padding: 10px 14px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      font-family: var(--font-mono);
      font-size: 10.5px;
      color: var(--dim);
    }

    .console-mac-dots {
      display: flex;
      gap: 6px;
    }

    .c-dot {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      display: inline-block;
    }

    .c-dot.red { background: #ff5f56; }
    .c-dot.yellow { background: #ffbd2e; }
    .c-dot.green { background: #27c93f; }

    .console-title {
      font-family: var(--font-mono);
      font-size: 10px;
      letter-spacing: 0.04em;
      color: #8b949e;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      flex: 1;
      direction: ltr;
    }

    .console-badge {
      font-family: var(--font-mono);
      font-size: 9px;
      letter-spacing: 0.06em;
      color: #79c0ff;
      background: rgba(56, 139, 253, 0.1);
      border: 1px solid rgba(56, 139, 253, 0.25);
      padding: 2px 7px;
      border-radius: 4px;
      white-space: nowrap;
    }

    html[lang="fa"] .console-badge {
      font-family: var(--font-fa-head) !important;
      font-size: 10px;
    }

    .console-screen {
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 14px;
      font-family: var(--font-mono);
      font-size: 12px;
      line-height: 1.6;
      color: #c9d1d9;
      flex: 1;
      background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.02), transparent 70%);
    }

    .console-input-line {
      background: rgba(255, 255, 255, 0.035);
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 6px;
      padding: 8px 12px;
      display: flex;
      gap: 8px;
      align-items: flex-start;
      color: #e6edf3;
      font-size: 11.5px;
    }

    .console-prompt {
      color: #58a6ff;
      font-weight: 700;
      flex: 0 0 auto;
    }

    .console-input-text {
      flex: 1;
      line-height: 1.5;
    }

    .console-reasoning-flow {
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding-inline-start: 6px;
      border-inline-start: 2px dashed rgba(255, 255, 255, 0.12);
      margin-inline-start: 4px;
    }

    .reasoning-step-item {
      background: rgba(255, 255, 255, 0.015);
      border-radius: 4px;
      padding: 6px 10px;
      transition: background 0.2s ease;
    }

    .reasoning-step-item:hover {
      background: rgba(255, 255, 255, 0.03);
    }

    .reasoning-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 2px;
      gap: 8px;
    }

    .reasoning-badge {
      font-size: 9.5px;
      letter-spacing: 0.08em;
      color: #79c0ff;
    }

    .reasoning-time {
      font-size: 9.5px;
      color: var(--faint);
    }

    .reasoning-body {
      margin: 0;
      font-size: 11.5px;
      line-height: 1.55;
      color: #8b949e;
    }

    html[lang="fa"] .reasoning-body {
      font-family: var(--font-fa-body) !important;
      font-size: 12.5px;
      line-height: 1.65 !important;
    }

    .console-output-box {
      background: rgba(46, 160, 67, 0.08);
      border: 1px solid rgba(46, 160, 67, 0.35);
      border-radius: 6px;
      padding: 10px 12px;
      color: #7ee787;
      font-size: 11.5px;
      line-height: 1.55;
    }

    .output-header {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 9.5px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      margin-bottom: 4px;
      font-weight: 600;
      color: #3fb950;
    }

    html[lang="fa"] .output-header {
      font-family: var(--font-fa-head) !important;
      font-size: 10.5px;
    }

    .output-check {
      color: #3fb950;
      font-weight: 700;
      font-size: 13px;
    }

    .output-content {
      line-height: 1.55;
    }

    html[lang="fa"] .output-content {
      font-family: var(--font-fa-body) !important;
      font-size: 12.5px;
      line-height: 1.65 !important;
    }

    .console-telemetry-bar {
      margin-top: auto;
      padding-top: 10px;
      border-top: 1px solid rgba(255, 255, 255, 0.06);
      font-size: 9.5px;
      letter-spacing: 0.06em;
      color: var(--faint);
      display: flex;
      justify-content: space-between;
      direction: ltr;
    }

    /* 3. Services Layer: Engineering Pipeline */
    .pipeline-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
      gap: 20px;
      margin-bottom: 0;
    }

    .pipeline-card {
      background: var(--surf);
      border: 1px solid var(--line2);
      border-radius: var(--radius);
      padding: 24px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      position: relative;
      transition: all 0.25s ease;
      box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
    }

    .pipeline-card:hover {
      border-color: rgba(255, 255, 255, 0.26);
      transform: translateY(-2px);
      box-shadow: 0 16px 40px rgba(0, 0, 0, 0.16);
    }

    .pipeline-card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .pipeline-phase-num {
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 700;
      color: var(--text);
      letter-spacing: 0.08em;
    }

    .pipeline-guarantee-badge {
      font-family: var(--font-mono);
      font-size: 9px;
      letter-spacing: 0.06em;
      color: #79c0ff;
      background: rgba(56, 139, 253, 0.08);
      border: 1px solid rgba(56, 139, 253, 0.22);
      padding: 2px 8px;
      border-radius: 999px;
    }

    html[lang="fa"] .pipeline-guarantee-badge {
      font-family: var(--font-fa-head) !important;
      font-size: 10.5px;
    }

    .pipeline-card-title {
      font-family: var(--font-ui);
      font-size: 17.5px;
      font-weight: 700;
      margin: 0;
      color: var(--text);
      line-height: 1.35;
    }

    html[lang="fa"] .pipeline-card-title {
      font-family: var(--font-fa-head) !important;
      font-weight: 800 !important;
      font-size: 18px;
    }

    .pipeline-card-body {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .pipeline-section {
      background: rgba(255, 255, 255, 0.02);
      border: 1px solid var(--line);
      border-radius: 6px;
      padding: 10px 12px;
    }

    .pipeline-section.deliverable {
      border-inline-start: 2px solid var(--text);
      background: rgba(255, 255, 255, 0.04);
    }

    .pipe-subhead {
      font-family: var(--font-mono);
      font-size: 9.5px;
      letter-spacing: 0.08em;
      color: var(--faint);
      text-transform: uppercase;
      display: block;
      margin-bottom: 4px;
    }

    html[lang="fa"] .pipe-subhead {
      font-family: var(--font-fa-head) !important;
      font-size: 11px;
    }

    .pipe-text {
      margin: 0;
      font-size: 12.5px;
      line-height: 1.6;
      color: var(--dim);
    }

    html[lang="fa"] .pipe-text {
      font-family: var(--font-fa-body) !important;
      font-size: 13px;
      line-height: 1.7 !important;
    }

    .pipe-text.highlight {
      color: var(--text);
      font-weight: 500;
    }

    .pipeline-card-foot {
      margin-top: auto;
      padding-top: 12px;
      border-top: 1px solid var(--line);
    }

    .pipe-foot-tag {
      font-size: 9.5px;
      letter-spacing: 0.08em;
      color: var(--faint);
    }

    /* Specialized Engineering Tracks */
    .eng-services-wrap {
      margin-top: 40px;
    }

    .eng-services-header {
      margin-bottom: 24px;
    }

    .eng-services-title {
      font-family: var(--font-ui);
      font-size: 20px;
      font-weight: 700;
      color: var(--text);
      margin: 4px 0 0;
    }

    html[lang="fa"] .eng-services-title {
      font-family: var(--font-fa-head) !important;
      font-weight: 800 !important;
    }

    .eng-services-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 24px;
      margin-bottom: 48px;
    }

    @media (max-width: 860px) {
      .eng-services-grid {
        grid-template-columns: 1fr;
        gap: 20px;
      }
    }

    .eng-service-card {
      background: var(--surf);
      border: 1px solid var(--line2);
      border-radius: var(--radius);
      padding: clamp(20px, 2.5vw, 26px);
      display: flex;
      flex-direction: column;
      gap: 14px;
      position: relative;
      transition: all 0.25s ease;
      box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
    }

    .eng-service-card:hover {
      border-color: rgba(255, 255, 255, 0.24);
      transform: translateY(-2px);
      box-shadow: 0 16px 36px rgba(0, 0, 0, 0.16);
    }

    .eng-srv-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
      margin-bottom: 2px;
    }

    .eng-srv-type {
      font-family: var(--font-mono, 'Geist Mono', monospace);
      font-size: 10px;
      letter-spacing: 0.08em;
      color: var(--faint);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 3px;
      padding: 3px 8px;
      background: rgba(255, 255, 255, 0.02);
      text-transform: uppercase;
    }

    html[lang="fa"] .eng-srv-type {
      font-family: var(--font-mono, 'Geist Mono', monospace) !important;
      font-size: 10px;
      letter-spacing: 0.06em;
    }

    .eng-srv-badge {
      font-family: var(--font-mono, 'Geist Mono', monospace);
      font-size: 10px;
      letter-spacing: 0.06em;
      color: #38bdf8;
      border: 1px solid rgba(56, 189, 248, 0.18);
      border-radius: 3px;
      padding: 3px 8px;
      background: rgba(56, 189, 248, 0.04);
      text-transform: uppercase;
    }

    html[lang="fa"] .eng-srv-badge {
      font-family: var(--font-mono, 'Geist Mono', monospace) !important;
      font-size: 10px;
    }

    .eng-srv-title {
      font-family: var(--font-ui);
      font-size: 18px;
      font-weight: 700;
      margin: 0;
      color: var(--text);
    }

    html[lang="fa"] .eng-srv-title {
      font-family: var(--font-fa-head) !important;
      font-weight: 800 !important;
    }

    .eng-srv-tagline {
      font-family: var(--font-mono, 'Geist Mono', monospace);
      font-size: 11px;
      color: var(--dim);
      margin: 0;
      letter-spacing: 0.02em;
    }

    html[lang="fa"] .eng-srv-tagline {
      font-family: var(--font-fa-head) !important;
      font-size: 12px;
      letter-spacing: 0;
    }

    .eng-srv-desc {
      font-size: 13px;
      line-height: 1.7;
      color: var(--dim);
      margin: 0;
    }

    html[lang="fa"] .eng-srv-desc {
      font-family: var(--font-fa-body) !important;
      font-size: 13.5px;
    }

    /* Minimal Technical Spec Matrix (Hairline 1px rgba(255,255,255,0.06)) */
    .eng-srv-meta-grid {
      display: flex;
      flex-direction: column;
      margin: 6px 0 0;
      background: rgba(255, 255, 255, 0.015);
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 4px;
      overflow: hidden;
    }

    .eng-srv-meta-item {
      display: flex;
      flex-direction: column;
      gap: 4px;
      padding: 10px 14px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    .eng-srv-meta-item:last-child {
      border-bottom: none;
    }

    .srv-meta-label {
      font-family: var(--font-mono, 'Geist Mono', monospace);
      font-size: 9.5px;
      letter-spacing: 0.08em;
      color: var(--faint);
      text-transform: uppercase;
    }

    html[lang="fa"] .srv-meta-label {
      font-family: var(--font-fa-head) !important;
      font-size: 10px;
      letter-spacing: 0.02em;
    }

    .srv-meta-val {
      font-size: 12.5px;
      line-height: 1.6;
      color: var(--text);
      margin: 0;
    }

    html[lang="fa"] .srv-meta-val {
      font-family: var(--font-fa-body) !important;
      font-size: 12.5px;
    }

    .srv-meta-val.highlight {
      color: #e2e8f0;
      font-weight: 500;
    }

    .srv-meta-val.sla-tag {
      font-family: var(--font-mono, 'Geist Mono', monospace);
      font-size: 11px;
      letter-spacing: 0.04em;
      color: #38bdf8;
      background: rgba(56, 189, 248, 0.06);
      border: 1px solid rgba(56, 189, 248, 0.16);
      padding: 2px 7px;
      border-radius: 3px;
      display: inline-block;
      align-self: flex-start;
      margin-top: 2px;
    }

    .eng-srv-action {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: auto;
      padding-top: 14px;
      border-top: 1px solid rgba(255, 255, 255, 0.06);
      gap: 12px;
    }

    .eng-srv-action .btn-s {
      padding: 8px 14px;
      font-size: 10.5px;
    }

    html[lang="fa"] .eng-srv-action .btn-s {
      font-family: var(--font-fa-head) !important;
      font-size: 12px;
    }

    .eng-srv-timeline {
      font-family: var(--font-mono, 'Geist Mono', monospace);
      font-size: 10.5px;
      letter-spacing: 0.06em;
      color: var(--faint);
    }

    html[lang="fa"] .eng-srv-timeline {
      font-family: var(--font-fa-head) !important;
      font-size: 11px;
    }

    /* 4. The Hybrid Convergence (حلقه اتصال) */
    .hybrid-convergence-section {
      margin: 56px 0 60px;
    }

    .hc-card {
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0%, rgba(255, 255, 255, 0.01) 100%), var(--surf);
      border: 1px solid rgba(255, 255, 255, 0.16);
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.08);
      border-radius: var(--radius);
      position: relative;
      overflow: hidden;
      padding: clamp(28px, 4vw, 42px);
    }

    .hc-glow-line {
      position: absolute;
      top: 0;
      left: 10%;
      right: 10%;
      height: 1px;
      background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.8) 50%, transparent 100%);
    }

    .hc-body {
      position: relative;
      z-index: 1;
    }

    .hc-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      margin-bottom: 14px;
      flex-wrap: wrap;
    }

    .hc-tag {
      font-size: 10.5px;
      letter-spacing: 0.12em;
      color: var(--faint);
      text-transform: uppercase;
    }

    html[lang="fa"] .hc-tag {
      font-family: var(--font-fa-head) !important;
      font-size: 11.5px;
    }

    .hc-status-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 9.5px;
      color: var(--dim);
      border: 1px solid var(--line2);
      border-radius: 999px;
      padding: 3px 10px;
      background: var(--bg);
    }

    html[lang="fa"] .hc-status-pill {
      font-family: var(--font-fa-head) !important;
      font-size: 11px;
    }

    .hc-status-dot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: #27c93f;
      animation: pulse 2s infinite;
    }

    .hc-title {
      font-family: var(--font-ui);
      font-size: clamp(20px, 2.2vw, 26px);
      font-weight: 700;
      color: var(--text);
      margin: 0 0 16px;
    }

    html[lang="fa"] .hc-title {
      font-family: var(--font-fa-head) !important;
      font-weight: 800 !important;
      font-size: clamp(20px, 2.2vw, 26px);
    }

    .hc-quote {
      margin: 0 0 16px;
      font-size: clamp(16px, 1.8vw, 20px);
      font-weight: 600;
      line-height: 1.7;
      color: var(--text);
      border-inline-start: 3px solid var(--text);
      padding-inline-start: 16px;
      background: rgba(255, 255, 255, 0.02);
      padding-block: 10px;
      border-radius: 4px;
    }

    html[lang="fa"] .hc-quote {
      font-family: var(--font-fa-head) !important;
      font-weight: 700 !important;
      font-size: clamp(16px, 1.8vw, 21px);
    }

    .hc-quote-mark {
      opacity: 0.5;
      font-family: Georgia, serif;
    }

    .hc-subtext {
      font-size: 14px;
      line-height: 1.75;
      color: var(--dim);
      margin: 0 0 28px;
      max-width: 820px;
    }

    html[lang="fa"] .hc-subtext {
      font-family: var(--font-fa-body) !important;
      font-size: 14.5px;
      line-height: 1.85 !important;
    }

    /* Convergence Diagram */
    .hc-diagram {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
      background: rgba(0, 0, 0, 0.3);
      border: 1px solid var(--line2);
      border-radius: 8px;
      padding: 16px 20px;
    }

    .hc-diagram-node {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 10px 16px;
      border-radius: 6px;
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid var(--line);
    }

    .hc-diagram-node.highlight {
      background: rgba(255, 255, 255, 0.08);
      border-color: rgba(255, 255, 255, 0.3);
      box-shadow: 0 0 16px rgba(255, 255, 255, 0.08);
    }

    .hc-d-step {
      font-size: 11px;
      font-weight: 700;
      color: var(--text);
    }

    .hc-d-label {
      font-size: 13px;
      font-weight: 500;
      color: var(--text);
    }

    html[lang="fa"] .hc-d-label {
      font-family: var(--font-fa-head) !important;
      font-size: 13.5px;
    }

    /* 5. Dual High-Intent Action (کال‌تواکشن تفکیک‌شده) */
    .dual-cta-section {
      margin-top: 50px;
      margin-bottom: 24px;
    }

    .dual-cta-intro {
      margin-bottom: 20px;
    }

    .dual-cta-heading {
      font-family: var(--font-ui);
      font-size: clamp(20px, 2.2vw, 26px);
      font-weight: 700;
      color: var(--text);
      margin: 6px 0 0;
    }

    html[lang="fa"] .dual-cta-heading {
      font-family: var(--font-fa-head) !important;
      font-weight: 800 !important;
    }

    .dual-cta-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
      gap: 24px;
    }

    .dual-cta-card {
      background: var(--surf);
      border: 1px solid rgba(255, 255, 255, 0.16);
      border-radius: var(--radius);
      padding: clamp(24px, 3vw, 32px);
      display: flex;
      flex-direction: column;
      gap: 16px;
      position: relative;
      transition: all 0.25s ease;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    }

    .dual-cta-card:hover {
      border-color: rgba(255, 255, 255, 0.35);
      transform: translateY(-3px);
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
    }

    .dual-cta-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
    }

    .dual-cta-track-badge {
      font-size: 10px;
      letter-spacing: 0.1em;
      color: var(--text);
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid var(--line2);
      border-radius: 999px;
      padding: 3px 10px;
    }

    html[lang="fa"] .dual-cta-track-badge {
      font-family: var(--font-fa-head) !important;
      font-size: 11px;
    }

    .dual-cta-pulse-indicator {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #27c93f;
      box-shadow: 0 0 10px rgba(39, 201, 63, 0.8);
    }

    .dual-cta-card-title {
      font-family: var(--font-ui);
      font-size: clamp(16px, 1.6vw, 19px);
      font-weight: 700;
      line-height: 1.45;
      margin: 0;
      color: var(--text);
    }

    html[lang="fa"] .dual-cta-card-title {
      font-family: var(--font-fa-head) !important;
      font-weight: 800 !important;
      font-size: clamp(16px, 1.6vw, 19px);
    }

    .dual-cta-card-desc {
      font-size: 13.5px;
      line-height: 1.7;
      color: var(--dim);
      margin: 0;
    }

    html[lang="fa"] .dual-cta-card-desc {
      font-family: var(--font-fa-body) !important;
      font-size: 14px;
      line-height: 1.8 !important;
    }

    .dual-cta-footer {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-top: auto;
      padding-top: 14px;
      border-top: 1px solid var(--line);
    }

    .dual-cta-btn {
      width: 100%;
      text-align: center;
      padding: 12px 18px;
      font-size: 12.5px;
      font-weight: 600;
      cursor: pointer;
      border: 0;
    }

    html[lang="fa"] .dual-cta-btn {
      font-family: var(--font-fa-head) !important;
      font-size: 13.5px;
      letter-spacing: 0 !important;
    }

    .dual-cta-meta {
      font-size: 10.5px;
      color: var(--faint);
      text-align: center;
      letter-spacing: 0.04em;
    }

    html[lang="fa"] .dual-cta-meta {
      font-family: var(--font-fa-head) !important;
      font-size: 11.5px;
    }

    /* Keyframes & Media Queries */
    @keyframes fadeSlideUp {
      from {
        opacity: 0;
        transform: translateY(12px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes consoleReplayPulse {
      0% { opacity: 0.7; }
      50% { opacity: 0.95; }
      100% { opacity: 1; }
    }

    /* =========================================================
       03 — Products & Services Comprehensive Responsive System
       ========================================================= */

    /* Base safety rules for text wrap, shrink, and box sizing */
    .agent-spec-card,
    .agent-spec-side,
    .agent-console-side,
    .console-terminal,
    .pipeline-card,
    .eng-service-card,
    .dual-cta-card,
    .hc-card {
      min-width: 0;
      box-sizing: border-box;
    }

    .console-title {
      min-width: 0;
    }

    .console-input-text,
    .reasoning-body,
    .output-content,
    .mission-statement,
    .eng-srv-desc,
    .srv-meta-val,
    .hc-subtext,
    .dual-cta-card-desc,
    .pipe-text {
      overflow-wrap: anywhere;
      word-break: break-word;
    }

    /* 1. Large Tablets & Small Desktops (<= 980px) */
    @media (max-width: 980px) {
      .agent-spec-card {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: clamp(20px, 3vw, 26px);
      }

      .agent-console-side {
        width: 100%;
      }

      .hc-diagram {
        grid-template-columns: 1fr;
        gap: 10px;
      }

      .hc-diagram-node {
        justify-content: flex-start;
      }

      .dual-cta-grid {
        grid-template-columns: 1fr;
        gap: 20px;
      }
    }

    /* 2. Portrait Tablets & Phablets (<= 768px) */
    @media (max-width: 768px) {
      /* Dual-Engine Switcher */
      .pe-switcher-wrap {
        width: 100%;
        margin: 18px 0 28px;
      }

      .pe-switcher {
        display: flex;
        width: 100%;
        border-radius: 14px;
        padding: 4px;
        gap: 4px;
        box-sizing: border-box;
        background: rgba(22, 24, 29, 0.85);
      }

      .pe-tab {
        flex: 1 1 50%;
        min-width: 0;
        padding: 9px 10px;
        border-radius: 10px;
        align-items: center !important;
        text-align: center !important;
        justify-content: center;
        gap: 3px;
      }

      html[dir="rtl"] .pe-tab,
      html[lang="fa"] .pe-tab {
        align-items: center !important;
        text-align: center !important;
      }

      .pe-tab-tag {
        font-size: 9px;
        letter-spacing: 0.08em;
        text-align: center;
      }

      .pe-tab-title {
        font-size: 13px;
        line-height: 1.35;
        text-align: center;
        white-space: normal;
        word-break: break-word;
      }

      html[lang="fa"] .pe-tab-title {
        font-size: 13px;
      }

      /* Agent Spec Card */
      .agent-fleet-grid {
        gap: 24px;
        margin-bottom: 36px;
      }

      .agent-spec-card {
        padding: 20px 18px;
        border-radius: 14px;
        gap: 20px;
      }

      .agent-title {
        font-size: clamp(20px, 4.5vw, 24px);
      }

      html[lang="fa"] .agent-title {
        font-size: clamp(19px, 4.2vw, 23px);
      }

      .agent-card-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding-top: 14px;
      }

      .agent-deploy-btn {
        width: 100%;
        text-align: center;
        justify-content: center;
        padding: 12px 18px;
        font-size: 12.5px;
      }

      html[lang="fa"] .agent-deploy-btn {
        font-size: 13px;
      }

      .btn-ghost-sim {
        width: 100%;
        text-align: center;
        justify-content: center;
        padding: 10px 18px;
        font-size: 11.5px;
      }

      html[lang="fa"] .btn-ghost-sim {
        font-size: 12px;
      }

      /* Engineering Pipeline */
      .pipeline-grid {
        grid-template-columns: 1fr;
        gap: 16px;
      }

      .pipeline-card {
        padding: 20px 18px;
        border-radius: 12px;
      }

      .eng-services-wrap {
        margin-top: 32px;
      }

      .eng-services-grid {
        grid-template-columns: 1fr;
        gap: 18px;
        margin-bottom: 36px;
      }

      .eng-service-card {
        padding: 20px 18px;
        border-radius: 14px;
        gap: 14px;
      }

      .eng-srv-action {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding-top: 14px;
      }

      .eng-srv-action .btn-s {
        width: 100%;
        text-align: center;
        padding: 11px 16px;
        font-size: 12px;
      }

      html[lang="fa"] .eng-srv-action .btn-s {
        font-size: 12.5px;
      }

      .eng-srv-timeline {
        text-align: center;
        font-size: 11px;
      }

      /* Hybrid Convergence */
      .hybrid-convergence-section {
        margin: 40px 0 44px;
      }

      .hc-card {
        padding: 24px 20px;
        border-radius: 14px;
      }

      .hc-title {
        font-size: clamp(19px, 4.2vw, 23px);
        margin-bottom: 12px;
      }

      html[lang="fa"] .hc-title {
        font-size: clamp(19px, 4.2vw, 23px);
      }

      .hc-quote {
        padding-inline-start: 12px;
        padding-block: 8px;
        font-size: clamp(15px, 3.5vw, 18px);
        margin-bottom: 14px;
        line-height: 1.65;
      }

      html[lang="fa"] .hc-quote {
        font-size: clamp(15px, 3.5vw, 18px);
      }

      .hc-subtext {
        font-size: 13.5px;
        line-height: 1.7;
        margin-bottom: 20px;
      }

      .hc-diagram {
        padding: 12px 14px;
        gap: 8px;
      }

      .hc-diagram-node {
        padding: 9px 12px;
        justify-content: flex-start;
        gap: 10px;
      }

      /* Dual CTA */
      .dual-cta-section {
        margin-top: 36px;
        margin-bottom: 20px;
      }

      .dual-cta-card {
        padding: 22px 18px;
        border-radius: 14px;
        gap: 14px;
      }

      .dual-cta-btn {
        padding: 12px 16px;
        font-size: 13px;
      }

      html[lang="fa"] .dual-cta-btn {
        font-size: 13.5px;
      }
    }

    /* 3. Mobile Phones (<= 580px) */
    @media (max-width: 580px) {
      .pe-view-intro {
        margin-bottom: 20px;
      }

      .pe-intro-title {
        font-size: 21px;
      }

      html[lang="fa"] .pe-intro-title {
        font-size: 21px;
      }

      .pe-intro-desc {
        font-size: 13.5px;
        line-height: 1.75;
      }

      html[lang="fa"] .pe-intro-desc {
        font-size: 13.5px;
      }

      /* Switcher */
      .pe-switcher {
        padding: 3px;
        border-radius: 12px;
      }

      .pe-tab {
        padding: 7px 6px;
        border-radius: 9px;
      }

      .pe-tab-tag {
        font-size: 8px;
      }

      .pe-tab-title {
        font-size: 11.5px;
        line-height: 1.3;
      }

      html[lang="fa"] .pe-tab-title {
        font-size: 12px;
      }

      /* Agent Spec Card */
      .agent-spec-card {
        padding: 16px 14px;
        border-radius: 12px;
        gap: 16px;
      }

      .agent-spec-top {
        gap: 6px;
      }

      .agent-mono-tag {
        font-size: 9px;
        padding: 3px 8px;
      }

      .agent-status-badge {
        font-size: 8.5px;
        padding: 2px 7px;
      }

      .agent-header-info .agent-title {
        font-size: 19px;
      }

      html[lang="fa"] .agent-header-info .agent-title {
        font-size: 19px;
      }

      .agent-mission-box {
        padding: 10px 12px;
      }

      .mission-statement {
        font-size: 13px;
        line-height: 1.65;
      }

      html[lang="fa"] .mission-statement {
        font-size: 13px;
        line-height: 1.75;
      }

      .autonomy-spectrum-wrap {
        padding: 10px 12px;
      }

      .spectrum-desc {
        font-size: 11.5px;
      }

      .proto-tag {
        font-size: 9px;
        padding: 2px 6px;
      }

      /* Console Preview Terminal */
      .console-terminal {
        border-radius: 8px;
      }

      .console-titlebar {
        padding: 8px 10px;
        gap: 8px;
      }

      .console-mac-dots {
        gap: 4px;
      }

      .c-dot {
        width: 7px;
        height: 7px;
      }

      .console-title {
        font-size: 9.5px;
      }

      .console-badge {
        font-size: 8px;
        padding: 2px 5px;
      }

      .console-screen {
        padding: 12px 10px;
        gap: 10px;
        font-size: 11px;
      }

      .console-input-line {
        padding: 7px 10px;
        font-size: 11px;
      }

      .console-reasoning-flow {
        gap: 6px;
        padding-inline-start: 4px;
        margin-inline-start: 2px;
      }

      .reasoning-step-item {
        padding: 5px 8px;
      }

      .reasoning-badge {
        font-size: 8.5px;
      }

      .reasoning-time {
        font-size: 8.5px;
      }

      .reasoning-body {
        font-size: 11px;
        line-height: 1.5;
      }

      html[lang="fa"] .reasoning-body {
        font-size: 11.5px;
        line-height: 1.6;
      }

      .console-output-box {
        padding: 8px 10px;
        font-size: 11px;
      }

      .output-content {
        font-size: 11px;
      }

      html[lang="fa"] .output-content {
        font-size: 11.5px;
      }

      .console-telemetry-bar {
        flex-direction: column;
        gap: 4px;
        font-size: 8.5px;
        letter-spacing: 0.04em;
      }

      /* Engineering Card */
      .pipeline-card {
        padding: 16px 14px;
      }

      .pipeline-card-title {
        font-size: 16px;
      }

      html[lang="fa"] .pipeline-card-title {
        font-size: 16.5px;
      }

      .pipeline-section {
        padding: 8px 10px;
      }

      .pipe-text {
        font-size: 12px;
      }

      html[lang="fa"] .pipe-text {
        font-size: 12.5px;
      }

      .eng-service-card {
        padding: 16px 14px;
      }

      .eng-srv-title {
        font-size: 16.5px;
      }

      html[lang="fa"] .eng-srv-title {
        font-size: 17px;
      }

      .eng-srv-tagline {
        font-size: 10.5px;
      }

      html[lang="fa"] .eng-srv-tagline {
        font-size: 11px;
      }

      .eng-srv-desc {
        font-size: 12.5px;
      }

      html[lang="fa"] .eng-srv-desc {
        font-size: 13px;
      }

      .eng-srv-meta-item {
        padding: 8px 10px;
      }

      .srv-meta-val {
        font-size: 11.5px;
      }

      html[lang="fa"] .srv-meta-val {
        font-size: 12px;
      }

      /* Hybrid Convergence */
      .hc-card {
        padding: 18px 14px;
        border-radius: 12px;
      }

      .hc-quote {
        font-size: 14.5px;
      }

      html[lang="fa"] .hc-quote {
        font-size: 15px;
      }

      .hc-d-label {
        font-size: 12px;
      }

      html[lang="fa"] .hc-d-label {
        font-size: 12px;
      }

      /* Dual CTA */
      .dual-cta-card {
        padding: 18px 14px;
        border-radius: 12px;
      }

      .dual-cta-card-title {
        font-size: 16px;
      }

      html[lang="fa"] .dual-cta-card-title {
        font-size: 16px;
      }

      .dual-cta-card-desc {
        font-size: 12.5px;
      }

      html[lang="fa"] .dual-cta-card-desc {
        font-size: 13px;
      }
    }

    /* 4. Ultra-Compact Mobile (<= 380px) */
    @media (max-width: 380px) {
      .pe-tab {
        padding: 6px 4px;
      }

      .pe-tab-tag {
        display: none;
      }

      .pe-tab-title {
        font-size: 11px;
      }

      html[lang="fa"] .pe-tab-title {
        font-size: 11px;
      }

      .agent-spec-card {
        padding: 14px 10px;
      }

      .agent-mono-tag {
        font-size: 8.5px;
        padding: 2px 6px;
      }

      .agent-status-badge {
        font-size: 8px;
        padding: 2px 5px;
      }

      .console-mac-dots {
        display: none;
      }

      .console-screen {
        padding: 10px 8px;
      }

      .eng-service-card {
        padding: 14px 10px;
      }

      .hc-card {
        padding: 16px 10px;
      }

      .dual-cta-card {
        padding: 16px 10px;
      }
    }

    /* ===== footer ===== */
    footer {
      border-top: 1px solid var(--line2);
      background: var(--surf);
      padding-inline: clamp(18px, 4vw, 64px)
    }

    footer>.wrap {
      max-width: 1440px;
      padding-inline: 0
    }

    .fgrid {
      display: grid;
      grid-template-columns: minmax(220px, 1.35fr) minmax(160px, .7fr) minmax(220px, 1fr);
      gap: 40px clamp(40px, 6vw, 92px);
      padding: clamp(48px, 6vh, 76px) 0 46px
    }

    .fcol {
      display: flex;
      flex-direction: column;
      gap: 12px;
      font-size: 13px
    }

    .fcol a {
      color: var(--dim)
    }

    .fcol a:hover {
      color: var(--text)
    }

    .fbot {
      border-top: 1px solid var(--line);
      padding: 20px 0 32px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 12px;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 10px;
      letter-spacing: .16em;
      color: var(--faint)
    }

    html[lang="fa"] .fbot {
      letter-spacing: .02em;
      font-family: 'Vazirmatn', sans-serif;
      font-size: 11.5px
    }

    .sr {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      white-space: nowrap
    }

    @media (max-width:980px) {
      .navlinks {
        display: none
      }

      .menubtn {
        display: block
      }

      .navutil {
        margin-inline-start: auto
      }
    }

    @media (max-width:720px) {
      .member {
        flex-direction: column
      }

      .hero {
        padding-top: 40px
      }

      .tour-detail .meta {
        flex: 0 0 auto
      }
    }

    @media (prefers-reduced-motion:reduce) {
      * {
        animation: none !important;
        transition: none !important
      }

      html {
        scroll-behavior: auto
      }

      .edge {
        stroke-dashoffset: 0 !important
      }

      .axes .curve {
        stroke-dashoffset: 0 !important
      }

      .tour-canvas {
        display: none
      }

      .tour-list {
        display: block
      }
    }

    /* ===== r5 refinement: modern Persian, softer geometry, inline flow tours ===== */
    :root {
      --radius: 14px;
      --radius-sm: 9px
    }

    html[lang="fa"] body,
    html[lang="fa"] h1,
    html[lang="fa"] h2,
    html[lang="fa"] h3,
    html[lang="fa"] p,
    html[lang="fa"] a,
    html[lang="fa"] span,
    html[lang="fa"] li,
    html[lang="fa"] label,
    html[lang="fa"] button,
    html[lang="fa"] input,
    html[lang="fa"] textarea,
    html[lang="fa"] .lbl,
    html[lang="fa"] .mono,
    html[lang="fa"] .disp,
    html[lang="fa"] .sidx .w2,
    html[lang="fa"] h1.hero-t,
    html[lang="fa"] h2.sect,
    html[lang="fa"] .member .nm,
    html[lang="fa"] .member .rl {
      font-family: var(--font-fa-head) !important
    }

    html[lang="fa"] body {
      font-weight: 400
    }

    html[lang="fa"] h1,
    html[lang="fa"] h2,
    html[lang="fa"] h3 {
      font-weight: 700
    }

    .lang,
    .btn-s,
    .btn-o,
    .cta,
    .menubtn,
    .tctl,
    .chip,
    .active-card,
    .ba,
    .cs {
      border-radius: var(--radius-sm)
    }

    .lang {
      direction: ltr
    }

    html[dir="rtl"] .lang[data-active="fa"] .fill {
      transform: translateX(100%)
    }

    .ba {
      overflow: hidden
    }

    .active-card {
      box-shadow: 0 18px 60px rgba(0, 0, 0, .08)
    }

    .tour {
      border-radius: var(--radius);
      overflow: hidden;
      background: var(--surf);
      box-shadow: 0 24px 80px rgba(0, 0, 0, .10)
    }

    .flow {
      padding: clamp(20px, 3vw, 38px);
      display: grid;
      gap: 0
    }

    .flow-row {
      position: relative;
      display: grid;
      grid-template-columns: 86px minmax(150px, .48fr) minmax(260px, 1fr);
      gap: clamp(18px, 3vw, 46px);
      align-items: center;
      width: 100%;
      appearance: none;
      border: 0;
      background: transparent;
      color: var(--faint);
      padding: 22px 20px;
      text-align: start;
      cursor: pointer;
      border-radius: var(--radius-sm);
      transition: background var(--t2) var(--ease), color var(--t2) var(--ease), transform var(--t2) var(--ease)
    }

    .flow-row:hover {
      background: var(--line)
    }

    .flow-row.on {
      background: var(--bg);
      color: var(--text);
      transform: translateX(6px)
    }

    html[dir="rtl"] .flow-row.on {
      transform: translateX(-6px)
    }

    .flow-row:not(:last-child)::after {
      content: "";
      position: absolute;
      inset-inline-start: 62px;
      top: calc(50% + 28px);
      width: 1px;
      height: calc(50% + 22px);
      background: var(--line2)
    }

    .flow-row.past:not(:last-child)::after,
    .flow-row.on:not(:last-child)::after {
      background: var(--text)
    }

    .flow-num {
      width: 58px;
      height: 58px;
      border: 1px solid var(--line2);
      border-radius: 12px;
      display: grid;
      place-items: center;
      font-family: 'Space Grotesk', sans-serif;
      font-size: 20px;
      font-weight: 500;
      color: var(--faint);
      position: relative;
      background: var(--surf);
      transition: background var(--t2), color var(--t2), border-color var(--t2), font-weight var(--t2)
    }

    .flow-row.on .flow-num {
      background: var(--text);
      color: var(--bg);
      border-color: var(--text);
      font-weight: 700
    }

    .flow-row.on .flow-num::after {
      content: "";
      position: absolute;
      inset: -7px;
      border: 1px solid var(--line3);
      border-radius: 16px;
      animation: pulse 2.4s ease-out infinite
    }

    .flow-title {
      font-family: 'Space Grotesk', sans-serif;
      font-size: clamp(17px, 1.7vw, 22px);
      font-weight: 500;
      color: var(--dim);
      transition: color var(--t2), font-weight var(--t2)
    }

    .flow-row.on .flow-title {
      color: var(--text);
      font-weight: 700
    }

    .flow-desc {
      margin: 0 !important;
      font-size: 13.5px;
      line-height: 1.72;
      color: var(--faint);
      transition: color var(--t2)
    }

    .flow-row.on .flow-desc {
      color: var(--dim)
    }

    .flow-kv {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 10px
    }

    .flow-kv span {
      border: 1px solid var(--line2);
      border-radius: 999px;
      padding: 4px 9px;
      font-size: 9.5px;
      font-family: 'IBM Plex Mono', monospace;
      letter-spacing: .08em;
      color: var(--faint)
    }

    .flow-index {
      display: flex;
      gap: 8px;
      align-items: center;
      border-top: 1px solid var(--line);
      padding: 16px clamp(20px, 3vw, 38px);
      background: var(--bg)
    }

    .flow-index button {
      appearance: none;
      min-width: 48px;
      height: 34px;
      padding: 0 10px;
      border: 1px solid var(--line2);
      border-radius: 8px;
      background: transparent;
      color: var(--faint);
      font-family: 'IBM Plex Mono', monospace;
      font-size: 10px;
      letter-spacing: .1em;
      cursor: pointer;
      transition: background var(--t1), color var(--t1), font-weight var(--t1)
    }

    .flow-index button:hover {
      border-color: var(--text);
      color: var(--text)
    }

    .flow-index button[aria-current="true"] {
      background: var(--text);
      color: var(--bg);
      font-weight: 700;
      border-color: var(--text)
    }

    .flow-index .flow-status {
      margin-inline-start: auto;
      color: var(--faint);
      font-size: 10px;
      letter-spacing: .1em
    }

    html[lang="fa"] .flow-title {
      font-family: var(--font-fa-head) !important;
      font-weight: 600 !important;
    }

    html[lang="fa"] .flow-num,
    html[lang="fa"] .flow-kv span,
    html[lang="fa"] .flow-index button,
    html[lang="fa"] .flow-index .flow-status {
      font-family: var(--font-mono) !important;
      font-weight: 500 !important;
      letter-spacing: 0.08em !important;
    }

    /* ===== r6: horizontal zigzag + live activity icons ===== */
    .flow.zigzag {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      grid-template-rows: repeat(2, minmax(235px, auto));
      gap: 46px 38px;
      padding: clamp(32px, 4vw, 58px);
      position: relative;
      background: radial-gradient(circle at 12% 18%, var(--line), transparent 21%), radial-gradient(circle at 88% 82%, var(--line), transparent 24%)
    }

    .flow.zigzag .flow-row {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 13px;
      padding: 22px;
      border: 1px solid var(--line2);
      border-radius: 16px;
      background: var(--bg);
      min-width: 0;
      position: relative;
      overflow: visible;
      box-shadow: 0 18px 52px rgba(0, 0, 0, .08);
      transform: none
    }

    .flow.zigzag .flow-row:hover {
      border-color: var(--line3);
      transform: translateY(-4px)
    }

    .flow.zigzag .flow-row.on {
      border-color: var(--text);
      transform: translateY(-7px);
      box-shadow: 0 24px 72px rgba(0, 0, 0, .18)
    }

    html[dir="rtl"] .flow.zigzag .flow-row.on {
      transform: translateY(-7px)
    }

    .flow.zigzag .flow-row::after {
      content: "";
      position: absolute;
      background: var(--line2);
      z-index: 0;
      transition: background .4s, transform .65s var(--ease)
    }

    .flow.zigzag .flow-row.to-end::after {
      width: 39px;
      height: 1px;
      inset-inline-end: -39px;
      top: 50%;
      transform-origin: inline-start;
      transform: scaleX(.2)
    }

    .flow.zigzag .flow-row.to-start::after {
      width: 39px;
      height: 1px;
      inset-inline-start: -39px;
      top: 50%;
      transform-origin: inline-end;
      transform: scaleX(.2)
    }

    .flow.zigzag .flow-row.turn-down::after {
      width: 1px;
      height: 47px;
      inset-inline-end: 50%;
      bottom: -47px;
      transform-origin: top;
      transform: scaleY(.2)
    }

    .flow.zigzag .flow-row.past::after,
    .flow.zigzag .flow-row.on::after {
      background: var(--text);
      transform: scale(1)
    }

    .flow.zigzag .flow-num {
      width: auto;
      height: auto;
      border: 0;
      border-radius: 0;
      background: transparent;
      color: var(--faint);
      font-size: 12px;
      letter-spacing: .12em;
      display: block;
      position: absolute;
      top: 18px;
      inset-inline-end: 18px
    }

    .flow.zigzag .flow-row.on .flow-num {
      background: transparent;
      color: var(--text)
    }

    .flow.zigzag .flow-row.on .flow-num::after {
      display: none
    }

    .flow.zigzag .flow-title {
      font-size: 17px;
      line-height: 1.35;
      margin-top: 2px
    }

    .flow.zigzag .flow-desc {
      font-size: 12.5px;
      line-height: 1.72;
      text-align: start !important;
      color: var(--faint)
    }

    .flow.process {
      padding: clamp(24px, 3vw, 42px);
      gap: 12px;
      background: var(--surf)
    }

    .flow.process .process-row {
      grid-template-columns: 68px minmax(0, 1fr) 210px;
      gap: 24px;
      border: 1px solid transparent;
      border-radius: 14px;
      min-height: 185px;
      padding: 24px 26px;
      background: var(--bg);
      overflow: hidden;
      box-shadow: 0 15px 48px rgba(0, 0, 0, .06)
    }

    .flow.process .process-row::after {
      inset-inline-start: 58px;
      top: calc(50% + 35px);
      height: calc(50% + 14px)
    }

    .flow.process .process-row.on {
      border-color: var(--line3);
      transform: translateX(7px)
    }

    html[dir="rtl"] .flow.process .process-row.on {
      transform: translateX(-7px)
    }

    .flow-copy {
      align-self: center
    }

    .flow-visual {
      width: 118px;
      height: 96px;
      position: relative;
      display: block;
      align-self: center;
      border: 1px solid var(--line2);
      border-radius: 18px;
      background: linear-gradient(145deg, var(--surf), var(--bg));
      overflow: hidden;
      color: var(--faint);
      transition: color .4s, border-color .4s, transform .5s var(--ease)
    }

    .flow.zigzag .flow-visual {
      width: 82px;
      height: 72px;
      border-radius: 14px;
      align-self: flex-start
    }

    .flow-row.on .flow-visual {
      color: var(--text);
      border-color: var(--line3);
      transform: scale(1.04)
    }

    .flow-visual i,
    .flow-visual b {
      position: absolute;
      display: block;
      box-sizing: border-box
    }

    .flow-visual b {
      font-weight: 400
    }

    /* Capability 01: AI Engineering — Holographic Brain Mesh (پازل مغزی هولوگرافیک از نمای کامل بغل / Lateral Brain Profile) */
    .flow-visual[data-icon="ai"] {
      overflow: hidden;
      position: relative;
      perspective: 600px;
      transform-style: preserve-3d;
      background-image:
        radial-gradient(circle at 50% 50%, color-mix(in srgb, currentColor 15%, transparent) 0%, transparent 70%),
        linear-gradient(145deg, var(--surf), var(--bg));
    }

    /* 1. Central Lateral Brain Profile Receptacle (قاب نیم‌رخ کامل مغز از نمای بغل) */
    .flow-visual[data-icon="ai"] b {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 34px;
      height: 28px;
      margin: -14px 0 0 -17px;
      border-radius: 13px 17px 8px 7px;
      border: 1.5px solid color-mix(in srgb, currentColor 30%, transparent);
      box-sizing: border-box;
      pointer-events: none;
      z-index: 4;
      animation: holo-brain-frame-lock 4.8s ease-in-out infinite;
    }

    /* Stable Luminous Injected Orbital Ring (حلقه نوری پایدار دور ساختار مغز) */
    .flow-visual[data-icon="ai"] b::before {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: 66px;
      height: 66px;
      margin: -33px 0 0 -33px;
      border-radius: 50%;
      border: 1.5px solid color-mix(in srgb, currentColor 30%, transparent);
      pointer-events: none;
      z-index: 1;
      animation: holo-ring-stable-inject 4.8s ease-in-out infinite;
    }

    /* Lateral Sulci & Sylvian Fissure Seams (شیارهای اتصال آناتومیک نمای بغل — شیار جانبی سیلوین و شیار مرکزی) */
    .flow-visual[data-icon="ai"] b::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(currentColor, currentColor) center center / 1.5px 100% no-repeat,
        linear-gradient(currentColor, currentColor) center center / 100% 1.5px no-repeat;
      opacity: 0.25;
      pointer-events: none;
      animation: holo-neural-mesh-fusion 4.8s ease-in-out infinite;
    }

    /* 2. Four Exploded Lateral Brain Lobes (۴ لوب متقارن نمای بغل مغز با ابعاد یکدست ۱۷×۱۴) */
    .flow-visual[data-icon="ai"] i {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 17px;
      height: 14px;
      box-sizing: border-box;
      border: 1.5px solid currentColor;
      background-color: color-mix(in srgb, currentColor 32%, var(--surf));
      box-shadow: 0 0 8px color-mix(in srgb, currentColor 40%, transparent);
      z-index: 6;
    }

    /* Magnetic Gravitational Node Beacon (نودهای مداری با فاصله کاملاً یکسان و متقارن از گوشه قطعات) */
    .flow-visual[data-icon="ai"] i::before {
      content: "";
      position: absolute;
      width: 4.5px;
      height: 4.5px;
      border-radius: 50%;
      background: currentColor;
      box-shadow: 0 0 7px currentColor, 0 0 12px currentColor;
      pointer-events: none;
      z-index: 7;
    }

    /* Lobe 1: Frontal Lobe (قشر پیشانی — بالا راست) */
    .flow-visual[data-icon="ai"] i:nth-child(1) {
      border-radius: 3px 15px 2px 2px;
      background-image:
        radial-gradient(circle at 80% 30%, color-mix(in srgb, currentColor 55%, transparent) 0%, transparent 65%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 38 30' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' stroke-opacity='0.8'%3E%3Cpath d='M2 28 C2 14 10 2 24 2 C32 2 37 8 37 18 C37 24 32 28 22 28 Z' fill='%23ffffff' fill-opacity='0.12'/%3E%3Cpath d='M8 20 C12 12 20 8 28 10'/%3E%3Cpath d='M14 26 C18 16 26 14 33 18'/%3E%3Cpath d='M22 4 C28 6 32 12 30 20'/%3E%3C/svg%3E");
      background-size: cover;
      animation: holo-lobe-piece-1 4.8s cubic-bezier(0.25, 1, 0.3, 1) infinite;
    }

    .flow-visual[data-icon="ai"] i:nth-child(1)::before {
      right: -6px;
      top: -6px;
    }

    /* Lobe 2: Temporal Lobe (قشر گیجگاهی — پایین راست) */
    .flow-visual[data-icon="ai"] i:nth-child(2) {
      border-radius: 2px 3px 9px 3px;
      background-image:
        radial-gradient(circle at 60% 70%, color-mix(in srgb, currentColor 55%, transparent) 0%, transparent 65%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 38 24' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' stroke-opacity='0.8'%3E%3Cpath d='M2 2 C12 2 26 2 34 6 C37 9 37 16 30 20 C20 22 8 20 2 16 Z' fill='%23ffffff' fill-opacity='0.12'/%3E%3Cpath d='M4 8 C14 6 24 8 32 12'/%3E%3Cpath d='M6 14 C16 12 24 14 28 16'/%3E%3C/svg%3E");
      background-size: cover;
      animation: holo-lobe-piece-2 4.8s cubic-bezier(0.25, 1, 0.3, 1) infinite;
    }

    .flow-visual[data-icon="ai"] i:nth-child(2)::before {
      right: -6px;
      bottom: -6px;
    }

    /* Lobe 3: Cerebellum & Brainstem (مخچه و ساقه مغز — پایین چپ) */
    .flow-visual[data-icon="ai"] i:nth-child(3) {
      border-radius: 2px 2px 5px 10px;
      background-image:
        radial-gradient(circle at 30% 70%, color-mix(in srgb, currentColor 55%, transparent) 0%, transparent 65%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 30' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' stroke-opacity='0.8'%3E%3Cpath d='M30 2 C22 2 12 6 4 14 C0 20 2 26 12 28 C20 28 26 22 30 14 Z' fill='%23ffffff' fill-opacity='0.12'/%3E%3Cpath d='M6 12 C12 10 20 10 26 12'/%3E%3Cpath d='M4 17 C12 15 20 15 26 17'/%3E%3Cpath d='M8 22 C14 20 20 20 24 22'/%3E%3Cpath d='M24 24 L24 29' stroke-width='2.2'/%3E%3C/svg%3E");
      background-size: cover;
      animation: holo-lobe-piece-3 4.8s cubic-bezier(0.25, 1, 0.3, 1) infinite;
    }

    .flow-visual[data-icon="ai"] i:nth-child(3)::before {
      left: -6px;
      bottom: -6px;
    }

    /* Lobe 4: Parietal & Occipital Lobe (قشر آهیانه‌ای و پس‌سری — بالا چپ) */
    .flow-visual[data-icon="ai"] i:nth-child(4) {
      border-radius: 13px 3px 2px 2px;
      background-image:
        radial-gradient(circle at 30% 30%, color-mix(in srgb, currentColor 55%, transparent) 0%, transparent 65%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 30' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' stroke-opacity='0.8'%3E%3Cpath d='M30 28 C30 14 26 2 14 2 C6 2 2 8 2 18 C2 24 6 28 16 28 Z' fill='%23ffffff' fill-opacity='0.12'/%3E%3Cpath d='M24 6 C18 4 10 8 6 16'/%3E%3Cpath d='M26 16 C20 14 12 16 6 24'/%3E%3Cpath d='M16 4 C10 8 8 16 12 22'/%3E%3C/svg%3E");
      background-size: cover;
      animation: holo-lobe-piece-4 4.8s cubic-bezier(0.25, 1, 0.3, 1) infinite;
    }

    .flow-visual[data-icon="ai"] i:nth-child(4)::before {
      left: -6px;
      top: -6px;
    }

    /* =========================================================
     HOLOGRAPHIC BRAIN MESH KEYFRAMES
     ========================================================= */

    /* Central Brain Silhouette Frame Locking */
    @keyframes holo-brain-frame-lock {

      0%,
      30% {
        border-color: color-mix(in srgb, currentColor 30%, transparent);
        background: transparent;
        box-shadow: none;
        transform: scale(0.96);
      }

      44% {
        border-color: currentColor;
        background: color-mix(in srgb, currentColor 18%, transparent);
        box-shadow: 0 0 10px color-mix(in srgb, currentColor 45%, transparent);
        transform: scale(1.05);
      }

      50%,
      82% {
        border-color: currentColor;
        background: radial-gradient(ellipse at 50% 50%, color-mix(in srgb, currentColor 42%, transparent) 0%, transparent 80%);
        box-shadow: 0 0 16px currentColor, inset 0 0 8px currentColor;
        transform: scale(1);
      }

      90%,
      100% {
        border-color: color-mix(in srgb, currentColor 30%, transparent);
        background: transparent;
        box-shadow: none;
        transform: scale(0.96);
      }
    }

    /* Stable Orbital Ring Light Injection */
    @keyframes holo-ring-stable-inject {

      0%,
      30% {
        opacity: 0.35;
        border-color: color-mix(in srgb, currentColor 25%, transparent);
        box-shadow: none;
        transform: scale(0.95);
      }

      48% {
        opacity: 0.7;
        border-color: color-mix(in srgb, currentColor 60%, transparent);
        box-shadow: 0 0 8px color-mix(in srgb, currentColor 35%, transparent);
      }

      54%,
      82% {
        opacity: 1;
        border-color: currentColor;
        box-shadow: 0 0 14px currentColor, inset 0 0 8px currentColor;
        transform: scale(1);
      }

      90%,
      100% {
        opacity: 0.35;
        border-color: color-mix(in srgb, currentColor 25%, transparent);
        box-shadow: none;
        transform: scale(0.95);
      }
    }

    /* Internal Neural Mesh Fusion */
    @keyframes holo-neural-mesh-fusion {

      0%,
      30% {
        opacity: 0.25;
        filter: none;
      }

      50%,
      82% {
        opacity: 0.95;
        filter: drop-shadow(0 0 4px currentColor);
      }

      90%,
      100% {
        opacity: 0.25;
        filter: none;
      }
    }

    /* Lobe 1: Frontal Lobe (Exploded View -> Lateral Interlock at [0, -14px]) */
    @keyframes holo-lobe-piece-1 {
      0% {
        transform: translate3d(14px, -18px, 14px) rotate(12deg);
        opacity: 0.85;
      }

      15% {
        transform: translate3d(16px, -16px, 10px) rotate(8deg);
        opacity: 0.92;
      }

      30% {
        transform: translate3d(14px, -18px, 14px) rotate(12deg);
        opacity: 0.88;
      }

      /* Magnetic Draw & Lateral Anatomical Interlock */
      44%,
      82% {
        transform: translate3d(0px, -14px, 0px) rotate(0deg);
        background-color: color-mix(in srgb, currentColor 50%, var(--surf));
        box-shadow: 0 0 12px currentColor, inset 0 0 6px currentColor;
        opacity: 1;
      }

      /* Release to Exploded View */
      92%,
      100% {
        transform: translate3d(14px, -18px, 14px) rotate(12deg);
        background-color: color-mix(in srgb, currentColor 32%, var(--surf));
        box-shadow: 0 0 8px color-mix(in srgb, currentColor 40%, transparent);
        opacity: 0.85;
      }
    }

    /* Lobe 2: Temporal Lobe (Exploded View -> Lateral Interlock at [0, 0px]) */
    @keyframes holo-lobe-piece-2 {
      0% {
        transform: translate3d(14px, 18px, 14px) rotate(-12deg);
        opacity: 0.85;
      }

      15% {
        transform: translate3d(16px, 16px, 10px) rotate(-8deg);
        opacity: 0.92;
      }

      30% {
        transform: translate3d(14px, 18px, 14px) rotate(-12deg);
        opacity: 0.88;
      }

      /* Magnetic Draw & Lateral Anatomical Interlock */
      44%,
      82% {
        transform: translate3d(0px, 0px, 0px) rotate(0deg);
        background-color: color-mix(in srgb, currentColor 50%, var(--surf));
        box-shadow: 0 0 12px currentColor, inset 0 0 6px currentColor;
        opacity: 1;
      }

      /* Release to Exploded View */
      92%,
      100% {
        transform: translate3d(14px, 18px, 14px) rotate(-12deg);
        background-color: color-mix(in srgb, currentColor 32%, var(--surf));
        box-shadow: 0 0 8px color-mix(in srgb, currentColor 40%, transparent);
        opacity: 0.85;
      }
    }

    /* Lobe 3: Cerebellum & Brainstem (Exploded View -> Lateral Interlock at [-17px, 0px]) */
    @keyframes holo-lobe-piece-3 {
      0% {
        transform: translate3d(-18px, 18px, 14px) rotate(12deg);
        opacity: 0.85;
      }

      15% {
        transform: translate3d(-16px, 16px, 10px) rotate(8deg);
        opacity: 0.92;
      }

      30% {
        transform: translate3d(-18px, 18px, 14px) rotate(12deg);
        opacity: 0.88;
      }

      /* Magnetic Draw & Lateral Anatomical Interlock */
      44%,
      82% {
        transform: translate3d(-17px, 0px, 0px) rotate(0deg);
        background-color: color-mix(in srgb, currentColor 50%, var(--surf));
        box-shadow: 0 0 12px currentColor, inset 0 0 6px currentColor;
        opacity: 1;
      }

      /* Release to Exploded View */
      92%,
      100% {
        transform: translate3d(-18px, 18px, 14px) rotate(12deg);
        background-color: color-mix(in srgb, currentColor 32%, var(--surf));
        box-shadow: 0 0 8px color-mix(in srgb, currentColor 40%, transparent);
        opacity: 0.85;
      }
    }

    /* Lobe 4: Parietal & Occipital Lobe (Exploded View -> Lateral Interlock at [-17px, -14px]) */
    @keyframes holo-lobe-piece-4 {
      0% {
        transform: translate3d(-18px, -18px, 14px) rotate(-12deg);
        opacity: 0.85;
      }

      15% {
        transform: translate3d(-16px, -16px, 10px) rotate(-8deg);
        opacity: 0.92;
      }

      30% {
        transform: translate3d(-18px, -18px, 14px) rotate(-12deg);
        opacity: 0.88;
      }

      /* Magnetic Draw & Lateral Anatomical Interlock */
      44%,
      82% {
        transform: translate3d(-17px, -14px, 0px) rotate(0deg);
        background-color: color-mix(in srgb, currentColor 50%, var(--surf));
        box-shadow: 0 0 12px currentColor, inset 0 0 6px currentColor;
        opacity: 1;
      }

      /* Release to Exploded View */
      92%,
      100% {
        transform: translate3d(-18px, -18px, 14px) rotate(-12deg);
        background-color: color-mix(in srgb, currentColor 32%, var(--surf));
        box-shadow: 0 0 8px color-mix(in srgb, currentColor 40%, transparent);
        opacity: 0.85;
      }
    }

    /* Capability 02: Data Science */
    .flow-visual[data-icon="data"] i {
      bottom: 22%;
      width: 8px;
      border-radius: 2px 2px 0 0;
      background: currentColor;
      transform: translateX(-50%);
      transform-origin: 50% 100%;
      animation: bar-live 2.4s ease-in-out infinite
    }

    .flow-visual[data-icon="data"] i:nth-child(1) {
      left: 26%;
      height: 22px
    }

    .flow-visual[data-icon="data"] i:nth-child(2) {
      left: 42%;
      height: 38px;
      animation-delay: -.5s
    }

    .flow-visual[data-icon="data"] i:nth-child(3) {
      left: 58%;
      height: 28px;
      animation-delay: -1s
    }

    .flow-visual[data-icon="data"] i:nth-child(4) {
      left: 74%;
      height: 46px;
      animation-delay: -1.5s
    }

    .flow-visual[data-icon="data"] b {
      height: 1px;
      left: 14%;
      right: 14%;
      top: 24%;
      background: currentColor;
      opacity: .55;
      animation: scan-y 2.2s ease-in-out infinite
    }

    @keyframes bar-live {
      50% {
        transform: translateX(-50%) scaleY(.52);
        opacity: .45
      }
    }

    @keyframes scan-y {
      50% {
        transform: translateY(42px)
      }
    }

    /* Capability 05: Quantitative ML / یادگیری ماشین کمّی — Matrix Decryption & Signal Extraction (کدگشایی داده‌های خام به سیگنال آلفا) */
    .flow-visual[data-icon="quant"] {
      overflow: hidden;
      position: relative;
      background-image:
        radial-gradient(circle at 50% 50%, color-mix(in srgb, currentColor 12%, transparent) 0%, transparent 70%),
        linear-gradient(145deg, var(--surf), var(--bg));
    }

    /* 1. Chaotic Raw Market Data Matrix Noise Field (ماتریس نویزهای عددی و داده‌های تصادفی بازار مالی) */
    .flow-visual[data-icon="quant"]::before {
      content: "";
      position: absolute;
      inset: 6px;
      background-image:
        repeating-linear-gradient(0deg, color-mix(in srgb, currentColor 18%, transparent) 0px 2px, transparent 2px 6px, color-mix(in srgb, currentColor 22%, transparent) 6px 7px, transparent 7px 12px),
        repeating-linear-gradient(90deg, color-mix(in srgb, currentColor 14%, transparent) 0px 2px, transparent 2px 8px, color-mix(in srgb, currentColor 18%, transparent) 8px 10px, transparent 10px 16px);
      opacity: 0.8;
      pointer-events: none;
      z-index: 1;
      animation: matrix-noise-flicker 4.8s steps(4) infinite;
    }

    /* 2. Decrypted Quant Baseline & Threshold Guide (خط تراز پایه و آستانه استخراج سیگنال) */
    .flow-visual[data-icon="quant"]::after {
      content: "";
      position: absolute;
      left: 10px;
      right: 10px;
      bottom: 18px;
      height: 2px;
      border-radius: 1px;
      background: currentColor;
      opacity: 0.25;
      pointer-events: none;
      z-index: 2;
      animation: matrix-baseline-surge 4.8s ease-in-out infinite;
    }

    /* 3. Neo-Vision Bullet-Time Downward Scanner Line (خط اسکنر دید نئو با حرکت آهسته از بالا به پایین) */
    .flow-visual[data-icon="quant"] b {
      position: absolute;
      left: 8px;
      right: 8px;
      top: 10px;
      height: 2px;
      border-radius: 1px;
      background: currentColor;
      box-shadow: 0 0 10px currentColor, 0 0 20px currentColor;
      z-index: 6;
      animation: matrix-neovision-scanner 4.8s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
    }

    /* Decryption Wavefront Trailing Behind Scanner Line (موج پاکسازی و کدگشایی داده‌ها) */
    .flow-visual[data-icon="quant"] b::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 100%;
      height: 18px;
      background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, currentColor 40%, transparent) 100%);
      opacity: 0.7;
      filter: blur(1.5px);
      pointer-events: none;
    }

    /* Center Decryption Lens / Emitter (کانون لیزری اسکنر) */
    .flow-visual[data-icon="quant"] b::after {
      content: "";
      position: absolute;
      left: 50%;
      top: -3.5px;
      width: 9px;
      height: 9px;
      margin-left: -4.5px;
      border-radius: 50%;
      background: currentColor;
      box-shadow: 0 0 10px currentColor, 0 0 20px currentColor;
    }

    /* 4. Four Extracted Symmetrical Alpha Signal Columns (۴ ستون منظم و متقارن سیگنال آلفا) */
    .flow-visual[data-icon="quant"] i {
      position: absolute;
      bottom: 18px;
      width: 15px;
      border-radius: 3px 3px 0 0;
      background: linear-gradient(180deg, currentColor 0%, color-mix(in srgb, currentColor 70%, var(--surf)) 100%);
      transform: translateX(-50%);
      transform-origin: 50% 100%;
      z-index: 4;
    }

    /* Decryption Code Cascade Streams Entering Columns (غربالگری و استخراج کدهای موثر) */
    .flow-visual[data-icon="quant"] i::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 100%;
      height: 40px;
      background: repeating-linear-gradient(180deg,
          currentColor 0px 2px,
          transparent 2px 5px,
          currentColor 5px 8px,
          transparent 8px 12px);
      opacity: 0;
      pointer-events: none;
    }

    /* Column 1: Alpha Bin 1 (سیمتریک با ستون ۴) */
    .flow-visual[data-icon="quant"] i:nth-child(1) {
      left: 21%;
      animation: matrix-bar-extract-1 4.8s ease-in-out infinite;
    }

    .flow-visual[data-icon="quant"] i:nth-child(1)::before {
      animation: matrix-stream-filter-1 4.8s ease-in-out infinite;
    }

    /* Column 2: Peak Winning Alpha Signal (قله سیگنال آلفا) */
    .flow-visual[data-icon="quant"] i:nth-child(2) {
      left: 40%;
      animation: matrix-bar-extract-2 4.8s ease-in-out infinite;
    }

    .flow-visual[data-icon="quant"] i:nth-child(2)::before {
      animation: matrix-stream-filter-2 4.8s ease-in-out infinite;
    }

    /* Column 3: Alpha Bin 3 */
    .flow-visual[data-icon="quant"] i:nth-child(3) {
      left: 60%;
      animation: matrix-bar-extract-3 4.8s ease-in-out infinite;
    }

    .flow-visual[data-icon="quant"] i:nth-child(3)::before {
      animation: matrix-stream-filter-3 4.8s ease-in-out infinite;
    }

    /* Column 4: Alpha Bin 4 (سیمتریک با ستون ۱) */
    .flow-visual[data-icon="quant"] i:nth-child(4) {
      left: 79%;
      animation: matrix-bar-extract-4 4.8s ease-in-out infinite;
    }

    .flow-visual[data-icon="quant"] i:nth-child(4)::before {
      animation: matrix-stream-filter-4 4.8s ease-in-out infinite;
    }

    /* =========================================================
     MATRIX DECRYPTION & SIGNAL EXTRACTION KEYFRAMES
     ========================================================= */

    /* Raw Market Data Matrix Noise (سوسو زدن نویزهای ماتریسی بدون کوچک‌ترین تکان و لرزش فریم) */
    @keyframes matrix-noise-flicker {

      0%,
      100% {
        opacity: 0.75;
      }

      12% {
        opacity: 0.9;
      }

      24% {
        opacity: 0.7;
      }

      38% {
        opacity: 0.45;
      }

      55% {
        opacity: 0.15;
      }

      70%,
      88% {
        opacity: 0.05;
      }
    }

    /* Bullet-Time Neo-Vision Scanner Line Descent (حرکت آهسته اسکنر نئو از بالا به پایین) */
    @keyframes matrix-neovision-scanner {

      0%,
      6% {
        top: 10px;
        opacity: 0;
        transform: scaleX(0.1);
      }

      14% {
        top: 12px;
        opacity: 1;
        transform: scaleX(1);
        box-shadow: 0 0 14px currentColor, 0 0 28px currentColor;
      }

      28% {
        top: 26px;
        opacity: 1;
      }

      44% {
        top: 44px;
        opacity: 1;
      }

      60% {
        top: 62px;
        opacity: 1;
      }

      70%,
      82% {
        top: 76px;
        opacity: 1;
        box-shadow: 0 0 18px currentColor, 0 0 34px currentColor;
      }

      90% {
        top: 76px;
        opacity: 0.5;
        transform: scaleX(1);
      }

      96%,
      100% {
        top: 76px;
        opacity: 0;
        transform: scaleX(0.1);
      }
    }

    /* Baseline Neon Green Pulse Confirmation (تپش نوری سبز نئونی در امتداد خط پایه) */
    @keyframes matrix-baseline-surge {

      0%,
      65% {
        opacity: 0.25;
        box-shadow: none;
      }

      70%,
      84% {
        opacity: 1;
        box-shadow: 0 0 12px currentColor, 0 0 24px currentColor, inset 0 0 8px currentColor;
      }

      92%,
      100% {
        opacity: 0.25;
        box-shadow: none;
      }
    }

    /* Column 1 Extraction (استخراج ستون ۱ - ارتفاع ۲۸ پیکسل) */
    @keyframes matrix-bar-extract-1 {

      0%,
      30% {
        height: 0px;
        opacity: 0;
      }

      40% {
        height: 8px;
        opacity: 0.75;
      }

      58% {
        height: 28px;
        opacity: 1;
      }

      70%,
      88% {
        height: 28px;
        opacity: 1;
        box-shadow: 0 0 8px currentColor;
      }

      95%,
      100% {
        height: 0px;
        opacity: 0;
      }
    }

    /* Column 2 Extraction (استخراج قله سیگنال برنده ۲ - ارتفاع ۵۴ پیکسل) */
    @keyframes matrix-bar-extract-2 {

      0%,
      20% {
        height: 0px;
        opacity: 0;
      }

      30% {
        height: 14px;
        opacity: 0.8;
      }

      52% {
        height: 54px;
        opacity: 1;
      }

      70%,
      88% {
        height: 54px;
        opacity: 1;
        box-shadow: 0 0 14px currentColor, 0 0 26px currentColor;
      }

      95%,
      100% {
        height: 0px;
        opacity: 0;
      }
    }

    /* Column 3 Extraction (استخراج ستون ۳ - ارتفاع ۴۲ پیکسل) */
    @keyframes matrix-bar-extract-3 {

      0%,
      24% {
        height: 0px;
        opacity: 0;
      }

      34% {
        height: 10px;
        opacity: 0.75;
      }

      54% {
        height: 42px;
        opacity: 1;
      }

      70%,
      88% {
        height: 42px;
        opacity: 1;
        box-shadow: 0 0 9px currentColor;
      }

      95%,
      100% {
        height: 0px;
        opacity: 0;
      }
    }

    /* Column 4 Extraction (استخراج ستون ۴ - ارتفاع ۲۸ پیکسل متقارن) */
    @keyframes matrix-bar-extract-4 {

      0%,
      30% {
        height: 0px;
        opacity: 0;
      }

      40% {
        height: 8px;
        opacity: 0.75;
      }

      58% {
        height: 28px;
        opacity: 1;
      }

      70%,
      88% {
        height: 28px;
        opacity: 1;
        box-shadow: 0 0 8px currentColor;
      }

      95%,
      100% {
        height: 0px;
        opacity: 0;
      }
    }

    /* Decryption Streams Filtering Streams */
    @keyframes matrix-stream-filter-1 {

      0%,
      20% {
        transform: translateY(-20px);
        opacity: 0;
      }

      32% {
        transform: translateY(0px);
        opacity: 0.9;
      }

      46% {
        transform: translateY(16px) scaleY(0.4);
        opacity: 0.5;
      }

      56%,
      100% {
        transform: translateY(24px) scaleY(0);
        opacity: 0;
      }
    }

    @keyframes matrix-stream-filter-2 {

      0%,
      14% {
        transform: translateY(-20px);
        opacity: 0;
      }

      26% {
        transform: translateY(0px);
        opacity: 0.95;
      }

      42% {
        transform: translateY(16px) scaleY(0.4);
        opacity: 0.55;
      }

      52%,
      100% {
        transform: translateY(24px) scaleY(0);
        opacity: 0;
      }
    }

    @keyframes matrix-stream-filter-3 {

      0%,
      18% {
        transform: translateY(-20px);
        opacity: 0;
      }

      28% {
        transform: translateY(0px);
        opacity: 0.9;
      }

      44% {
        transform: translateY(16px) scaleY(0.4);
        opacity: 0.5;
      }

      54%,
      100% {
        transform: translateY(24px) scaleY(0);
        opacity: 0;
      }
    }

    @keyframes matrix-stream-filter-4 {

      0%,
      20% {
        transform: translateY(-20px);
        opacity: 0;
      }

      32% {
        transform: translateY(0px);
        opacity: 0.9;
      }

      46% {
        transform: translateY(16px) scaleY(0.4);
        opacity: 0.5;
      }

      56%,
      100% {
        transform: translateY(24px) scaleY(0);
        opacity: 0;
      }
    }


    /* Capability 03: Automation — Haute Horlogerie Mechanical Gear Train (مکانیزم چرخ‌دنده‌های هم‌اندازه با رینگ‌های دور) */
    .flow-visual[data-icon="automation"] {
      overflow: hidden;
      perspective: 520px;
      transform-style: preserve-3d;
    }

    /* 1. Outer Circular Casing Ring (رینگ دایره‌ای دور چرخ‌دنده‌ها بدون خطوط داخلی) */
    .flow-visual[data-icon="automation"]::before {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: 76px;
      height: 76px;
      margin: -38px 0 0 -38px;
      border-radius: 50%;
      border: 1.5px solid color-mix(in srgb, currentColor 55%, transparent);
      box-shadow:
        0 0 1px currentColor,
        inset 0 0 1px currentColor,
        inset 0 0 0 3px color-mix(in srgb, currentColor 10%, transparent);
      background: transparent;
      pointer-events: none;
      z-index: 1;
      animation: horlogerie-cam-parallax 12s ease-in-out infinite;
    }

    /* 2. Outer Concentric Track Ring (حلقه دایره‌ای بیرونی) */
    .flow-visual[data-icon="automation"]::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: 86px;
      height: 86px;
      margin: -43px 0 0 -43px;
      border-radius: 50%;
      border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
      box-shadow: 0 0 1px color-mix(in srgb, currentColor 15%, transparent);
      background: transparent;
      opacity: 0.8;
      pointer-events: none;
      z-index: 2;
      animation: horlogerie-cam-parallax 12s ease-in-out infinite;
    }

    /* 3. Central Master Spur Gear (چرخ‌دنده مکانیکی مرکزی ۱۶ دندانه) */
    .flow-visual[data-icon="automation"] b {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 34px;
      height: 34px;
      margin: -17px 0 0 -17px;
      border-radius: 50%;
      background:
        radial-gradient(circle, var(--bg) 0% 30%, currentColor 31% 46%, transparent 47% 68%, currentColor 69% 83%, transparent 84%),
        repeating-conic-gradient(from 0deg, currentColor 0deg 11.25deg, transparent 11.25deg 22.5deg);
      box-shadow:
        0 0 1px currentColor,
        0 4px 10px rgba(0, 0, 0, 0.5);
      z-index: 6;
      transform-style: preserve-3d;
      animation: horlogerie-cam-parallax 12s ease-in-out infinite, horlogerie-core-escapement 6s steps(36, end) infinite;
    }

    /* Center Axle Pin & Hub */
    .flow-visual[data-icon="automation"] b::before {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: 7px;
      height: 7px;
      margin: -3.5px 0 0 -3.5px;
      border-radius: 50%;
      background: currentColor;
      border: 1.5px solid var(--bg);
      box-shadow: 0 0 1px currentColor;
      z-index: 7;
    }

    /* Center Gear Circular Inner Collar (رینگ توپی داخلی بدون خطوط شعاعی) */
    .flow-visual[data-icon="automation"] b::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: 16px;
      height: 16px;
      margin: -8px 0 0 -8px;
      border-radius: 50%;
      border: 1.5px solid color-mix(in srgb, currentColor 60%, transparent);
      background: transparent;
      z-index: 5;
    }

    /* Planetary Gears 1, 2, 3: Identical Equal-Sized 10-Tooth Spur Gears (۳ چرخ‌دنده سیاره‌ای کاملاً هم‌اندازه) */
    .flow-visual[data-icon="automation"] i:nth-child(1),
    .flow-visual[data-icon="automation"] i:nth-child(2),
    .flow-visual[data-icon="automation"] i:nth-child(3) {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 20px;
      height: 20px;
      margin: -10px 0 0 -10px;
      border-radius: 50%;
      background:
        radial-gradient(circle, var(--bg) 0% 32%, currentColor 33% 48%, transparent 49% 68%, currentColor 69% 84%, transparent 85%),
        repeating-conic-gradient(from 0deg, currentColor 0deg 18deg, transparent 18deg 36deg);
      box-shadow: 0 0 1px currentColor, 0 2px 6px rgba(0, 0, 0, 0.4);
      z-index: 5;
    }

    /* Shared Equal Pin for all 3 Planetary Gears */
    .flow-visual[data-icon="automation"] i:nth-child(1)::before,
    .flow-visual[data-icon="automation"] i:nth-child(2)::before,
    .flow-visual[data-icon="automation"] i:nth-child(3)::before {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: 4px;
      height: 4px;
      margin: -2px 0 0 -2px;
      border-radius: 50%;
      background: currentColor;
      border: 1px solid var(--bg);
    }

    /* Shared Inner Collar Ring for all 3 Planetary Gears (حلقه تمیز داخلی بدون خطوط شعاعی) */
    .flow-visual[data-icon="automation"] i:nth-child(1)::after,
    .flow-visual[data-icon="automation"] i:nth-child(2)::after,
    .flow-visual[data-icon="automation"] i:nth-child(3)::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: 10px;
      height: 10px;
      margin: -5px 0 0 -5px;
      border-radius: 50%;
      border: 1px solid color-mix(in srgb, currentColor 60%, transparent);
      background: transparent;
    }

    /* Symmetric 120° Orbit Alignments */
    .flow-visual[data-icon="automation"] i:nth-child(1) {
      animation: horlogerie-cam-parallax 12s ease-in-out infinite, horlogerie-orbit-1 6s linear infinite;
    }

    .flow-visual[data-icon="automation"] i:nth-child(2) {
      animation: horlogerie-cam-parallax 12s ease-in-out infinite, horlogerie-orbit-2 6s linear infinite;
    }

    .flow-visual[data-icon="automation"] i:nth-child(3) {
      animation: horlogerie-cam-parallax 12s ease-in-out infinite, horlogerie-orbit-3 6s linear infinite;
    }

    /* Remove floating dot completely */
    .flow-visual[data-icon="automation"] i:nth-child(4) {
      display: none !important;
    }

    /* =========================================================
     MECHANICAL GEAR TRAIN KEYFRAMES
     ========================================================= */

    /* 3D Camera Parallax (چرخش زاویه‌دار و پرالاکس سه‌بعدی) */
    @keyframes horlogerie-cam-parallax {
      0% {
        transform: rotateX(12deg) rotateY(-14deg) rotateZ(0deg) scale(0.98);
      }

      25% {
        transform: rotateX(16deg) rotateY(12deg) rotateZ(1.5deg) scale(1.08);
      }

      50% {
        transform: rotateX(-10deg) rotateY(15deg) rotateZ(-1deg) scale(1.02);
      }

      75% {
        transform: rotateX(-14deg) rotateY(-12deg) rotateZ(-2deg) scale(1.11);
      }

      100% {
        transform: rotateX(12deg) rotateY(-14deg) rotateZ(0deg) scale(0.98);
      }
    }

    /* Central Master Gear Stepped 6 beats/sec Rhythm (چرخش ۶ گام در ثانیه چرخ مرکزی) */
    @keyframes horlogerie-core-escapement {
      0% {
        transform: translateZ(12px) rotate(0deg);
      }

      100% {
        transform: translateZ(12px) rotate(360deg);
      }
    }

    /* Outer Ring Gear Slow Rotation (چرخش آرام رینگ دندانه‌دار خارجی) */
    @keyframes horlogerie-ring-spin {
      0% {
        transform: rotate(0deg);
      }

      100% {
        transform: rotate(-360deg);
      }
    }

    /* Caliper Frame Rotation (چرخش قاب کالیپر) */
    @keyframes horlogerie-caliper-spin {
      0% {
        transform: rotate(0deg);
      }

      100% {
        transform: rotate(360deg);
      }
    }

    /* Planetary Gear 1 Orbit & Meshing (مدار چرخ‌دنده ۱ - فاز ۰ درجه) */
    @keyframes horlogerie-orbit-1 {
      0% {
        transform: rotate(0deg) translate(28px) rotate(0deg);
      }

      100% {
        transform: rotate(360deg) translate(28px) rotate(-720deg);
      }
    }

    /* Planetary Gear 2 Orbit & Meshing (مدار چرخ‌دنده ۲ - فاز ۱۲۰ درجه) */
    @keyframes horlogerie-orbit-2 {
      0% {
        transform: rotate(120deg) translate(28px) rotate(0deg);
      }

      100% {
        transform: rotate(480deg) translate(28px) rotate(-720deg);
      }
    }

    /* Planetary Gear 3 Orbit & Meshing (مدار چرخ‌دنده ۳ - فاز ۲۴۰ درجه) */
    @keyframes horlogerie-orbit-3 {
      0% {
        transform: rotate(240deg) translate(28px) rotate(0deg);
      }

      100% {
        transform: rotate(600deg) translate(28px) rotate(-720deg);
      }
    }


    /* Capability 04: Smart Systems / هوشمندسازی — Central Brain with Circular Orbiting Nodes (مغز هوشمند مرکزی با گردش دایره‌ای نودها) */
    .flow-visual[data-icon="system"] {
      overflow: hidden;
    }

    /* 1. Outer Circular Orbital Track (مدار دایره‌ای بیرونی) */
    .flow-visual[data-icon="system"]::before {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: 76px;
      height: 76px;
      margin: -38px 0 0 -38px;
      border-radius: 50%;
      border: 1px dashed color-mix(in srgb, currentColor 40%, transparent);
      box-shadow: 0 0 1px currentColor, inset 0 0 6px color-mix(in srgb, currentColor 8%, transparent);
      pointer-events: none;
      z-index: 1;
      animation: brain-ring-spin 24s linear infinite;
    }

    /* 2. Inner Circular Orbital Track (مدار دایره‌ای داخلی) */
    .flow-visual[data-icon="system"]::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: 54px;
      height: 54px;
      margin: -27px 0 0 -27px;
      border-radius: 50%;
      border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
      pointer-events: none;
      z-index: 1;
    }

    /* 3. Central Anatomical Side-View Brain (نماد مغز هوشمند با جزئیات کامل نیم‌رخ، شیارهای قشری عمیق، مخچه و ساقه) */
    .flow-visual[data-icon="system"] b {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 48px;
      height: 40px;
      margin: -20px 0 0 -24px;
      background-color: currentColor;
      -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 76 64' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M34 5 C23 5 15 9 10 17 C5 24 6 31 12 34 C8 38 7 44 12 48 C16 51 23 51 28 47 C29 42 27 36 20 35 C27 33 30 26 25 20 C21 15 27 10 34 10 C46 10 58 14 65 22 C72 30 70 39 64 45 C58 49 51 48 46 46 C45 51 48 56 53 58 C59 60 66 58 69 54 C72 50 70 46 66 43 C73 35 75 25 69 16 C61 6 48 5 34 5 Z'/%3E%3Cpath d='M17 19 C22 22 28 18 33 21'/%3E%3Cpath d='M13 27 C18 29 23 26 28 29'/%3E%3Cpath d='M16 41 C21 43 27 41 32 42'/%3E%3Cpath d='M38 8 C36 15 42 21 39 28 C36 32 31 33 27 33'/%3E%3Cpath d='M44 11 C49 16 45 22 51 28 C56 32 51 38 45 38'/%3E%3Cpath d='M56 20 C61 25 56 31 61 35'/%3E%3Cpath d='M27 38 C33 37 39 40 45 40 C49 40 51 36 47 32 C42 29 37 32 31 31'/%3E%3Cpath d='M22 45 C28 46 35 44 40 45'/%3E%3Cpath d='M47 48 C52 47 58 49 62 52 C64 55 62 59 57 60 C52 61 47 58 45 54 Z'/%3E%3Cpath d='M48 51 C52 50 57 52 60 55'/%3E%3Cpath d='M48 55 C52 55 56 56 59 57'/%3E%3Cpath d='M35 49 C36 53 37 58 36 62'/%3E%3Cpath d='M41 48 C42 52 42 57 41 61'/%3E%3C/svg%3E") center / contain no-repeat;
      mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 76 64' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M34 5 C23 5 15 9 10 17 C5 24 6 31 12 34 C8 38 7 44 12 48 C16 51 23 51 28 47 C29 42 27 36 20 35 C27 33 30 26 25 20 C21 15 27 10 34 10 C46 10 58 14 65 22 C72 30 70 39 64 45 C58 49 51 48 46 46 C45 51 48 56 53 58 C59 60 66 58 69 54 C72 50 70 46 66 43 C73 35 75 25 69 16 C61 6 48 5 34 5 Z'/%3E%3Cpath d='M17 19 C22 22 28 18 33 21'/%3E%3Cpath d='M13 27 C18 29 23 26 28 29'/%3E%3Cpath d='M16 41 C21 43 27 41 32 42'/%3E%3Cpath d='M38 8 C36 15 42 21 39 28 C36 32 31 33 27 33'/%3E%3Cpath d='M44 11 C49 16 45 22 51 28 C56 32 51 38 45 38'/%3E%3Cpath d='M56 20 C61 25 56 31 61 35'/%3E%3Cpath d='M27 38 C33 37 39 40 45 40 C49 40 51 36 47 32 C42 29 37 32 31 31'/%3E%3Cpath d='M22 45 C28 46 35 44 40 45'/%3E%3Cpath d='M47 48 C52 47 58 49 62 52 C64 55 62 59 57 60 C52 61 47 58 45 54 Z'/%3E%3Cpath d='M48 51 C52 50 57 52 60 55'/%3E%3Cpath d='M48 55 C52 55 56 56 59 57'/%3E%3Cpath d='M35 49 C36 53 37 58 36 62'/%3E%3Cpath d='M41 48 C42 52 42 57 41 61'/%3E%3C/svg%3E") center / contain no-repeat;
      z-index: 5;
      animation: brain-glow-breathing 3.6s ease-in-out infinite;
    }

    /* Brain Center Synaptic Spark Pulse (هاله نورانی مرکز مغز) */
    .flow-visual[data-icon="system"] b::before {
      display: none;
    }

    .flow-visual[data-icon="system"] b::after {
      display: none;
    }

    /* Circular Orbiting Dots (نقاط در حال گردش دایره‌ای دور مغز) */
    .flow-visual[data-icon="system"] i {
      position: absolute;
      left: 50%;
      top: 50%;
      border-radius: 50%;
      background: currentColor;
      z-index: 6;
    }

    /* Dot 1: Outer Circular Orbit (نقطه ۱ در مدار بیرونی - فاز ۰) */
    .flow-visual[data-icon="system"] i:nth-child(1) {
      width: 7.5px;
      height: 7.5px;
      margin: -3.75px 0 0 -3.75px;
      box-shadow: 0 0 8px currentColor;
      animation: brain-orbit-outer-1 4.2s linear infinite;
    }

    /* Dot 2: Outer Circular Orbit (نقطه ۲ در مدار بیرونی - فاز ۱۸۰ درجه) */
    .flow-visual[data-icon="system"] i:nth-child(2) {
      width: 7.5px;
      height: 7.5px;
      margin: -3.75px 0 0 -3.75px;
      box-shadow: 0 0 8px currentColor;
      animation: brain-orbit-outer-2 4.2s linear infinite;
    }

    /* Dot 3: Inner Circular Orbit (نقطه ۳ در مدار داخلی - فاز ۹۰ درجه) */
    .flow-visual[data-icon="system"] i:nth-child(3) {
      width: 6px;
      height: 6px;
      margin: -3px 0 0 -3px;
      box-shadow: 0 0 6px currentColor;
      animation: brain-orbit-inner-1 3.2s linear infinite reverse;
    }

    /* Dot 4: Inner Circular Orbit (نقطه ۴ در مدار داخلی - فاز ۲۷۰ درجه) */
    .flow-visual[data-icon="system"] i:nth-child(4) {
      width: 6px;
      height: 6px;
      margin: -3px 0 0 -3px;
      box-shadow: 0 0 6px currentColor;
      animation: brain-orbit-inner-2 3.2s linear infinite reverse;
    }

    /* =========================================================
     BRAIN & CIRCULAR ORBIT KEYFRAMES
     ========================================================= */

    /* Brain Glow Breathing Pulse (تپش تنفسی نورانی مغز) */
    @keyframes brain-glow-breathing {

      0%,
      100% {
        transform: scale(0.94);
        filter: drop-shadow(0 0 2px currentColor);
        opacity: 0.75;
      }

      50% {
        transform: scale(1.07);
        filter: drop-shadow(0 0 8px currentColor) drop-shadow(0 0 16px currentColor);
        opacity: 1;
      }
    }

    /* Outer Orbital Ring Slow Spin */
    @keyframes brain-ring-spin {
      0% {
        transform: rotate(0deg);
      }

      100% {
        transform: rotate(360deg);
      }
    }

    /* Dot 1 Circular Orbit (گردش دایره‌ای نقطه ۱) */
    @keyframes brain-orbit-outer-1 {
      0% {
        transform: rotate(0deg) translate(38px) rotate(0deg);
      }

      100% {
        transform: rotate(360deg) translate(38px) rotate(-360deg);
      }
    }

    /* Dot 2 Circular Orbit (گردش دایره‌ای نقطه ۲) */
    @keyframes brain-orbit-outer-2 {
      0% {
        transform: rotate(180deg) translate(38px) rotate(-180deg);
      }

      100% {
        transform: rotate(540deg) translate(38px) rotate(-540deg);
      }
    }

    /* Dot 3 Circular Orbit (گردش دایره‌ای نقطه ۳) */
    @keyframes brain-orbit-inner-1 {
      0% {
        transform: rotate(90deg) translate(27px) rotate(-90deg);
      }

      100% {
        transform: rotate(450deg) translate(27px) rotate(-450deg);
      }
    }

    /* Dot 4 Circular Orbit (گردش دایره‌ای نقطه ۴) */
    @keyframes brain-orbit-inner-2 {
      0% {
        transform: rotate(270deg) translate(27px) rotate(-270deg);
      }

      100% {
        transform: rotate(630deg) translate(27px) rotate(-630deg);
      }
    }

    /* ==========================================================================
     Capability 08: Infrastructure Modernization — Laser Restoration Sweep
     اسکن پولیش و بازیابی: عبور خط لیزری سفید و تیز روی ۳ لایه مات خاکستری قدیمی
     و تبدیل بلافاصله به نوارهای سفید براق با لبه‌های فوق‌العاده شارپ و درخشش ملایم پایانی
     ========================================================================== */
    .flow-visual[data-icon="infra"] {
      overflow: hidden;
      position: relative;
      background:
        radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.05) 0%, transparent 75%),
        linear-gradient(165deg, #12161c 0%, #090b0e 100%);
      border-color: rgba(255, 255, 255, 0.14);
      box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5);

      /* Default Theme Variables (Dark Pod / Unclicked State) */
      --infra-base-bg: #333840;
      --infra-base-border: #4a525d;
      --infra-base-grid: rgba(255, 255, 255, 0.04);
      --infra-base-shadow: rgba(0, 0, 0, 0.45);
      --infra-bar-bg:
        linear-gradient(180deg, #ffffff 0%, #f4f6f9 30%, #e2e8f0 70%, #ffffff 100%),
        linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.7) 50%, transparent 100%);
      --infra-bar-border: #ffffff;
      --infra-bar-inset: inset 0 1px 1px #ffffff, inset 0 -1px 1px rgba(210, 225, 245, 0.7);
      --infra-bar-shadow: 0 0 12px rgba(255, 255, 255, 0.5);
      --infra-bar-glow: 0 0 24px rgba(255, 255, 255, 0.95), 0 0 42px rgba(255, 255, 255, 0.5);
      --infra-laser: #ffffff;
      --infra-laser-aura: 0 0 3px #ffffff, 0 0 8px rgba(255, 255, 255, 0.95), 0 0 18px rgba(165, 243, 252, 0.9), 0 0 32px rgba(0, 229, 255, 0.5);
      --infra-spark: #ffffff;
      --infra-spark-aura: 0 0 6px #ffffff, 0 0 14px #ffffff, 0 0 22px #a5f3fc, 0 0 32px #00e5ff;
      --infra-rail: rgba(255, 255, 255, 0.18);
      --infra-end-glow-bg: radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.18) 42%, transparent 72%);
      --infra-end-glow-shadow: 0 0 24px rgba(255, 255, 255, 0.8), 0 0 45px rgba(255, 255, 255, 0.4), 0 0 65px rgba(180, 230, 255, 0.25);
    }

    .graph-orb .flow-visual[data-icon="infra"] {
      background:
        radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.06) 0%, transparent 75%),
        linear-gradient(165deg, #13171e 0%, #090b0e 100%) !important;
      border: 1px solid rgba(255, 255, 255, 0.16) !important;
      border-radius: 20px !important;
    }

    /* ACTIVE INVERTED STATE (When Node 08 is Clicked / Selected) */
    .graph-node.on .flow-visual[data-icon="infra"],
    .process-node.on .flow-visual[data-icon="infra"] {
      background: transparent !important;
      border-color: transparent !important;
      box-shadow: none !important;

      /* Invert variables to obsidian black & high-contrast sharp grey */
      --infra-base-bg: #d1d5db;
      --infra-base-border: #9ca3af;
      --infra-base-grid: rgba(0, 0, 0, 0.08);
      --infra-base-shadow: rgba(0, 0, 0, 0.15);
      --infra-bar-bg:
        linear-gradient(180deg, #0b0f17 0%, #1e2530 40%, #0d121c 100%),
        linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.8) 50%, transparent 100%);
      --infra-bar-border: #000000;
      --infra-bar-inset: inset 0 1px 1px rgba(255, 255, 255, 0.25), inset 0 -1px 1px rgba(0, 0, 0, 0.8);
      --infra-bar-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
      --infra-bar-glow: 0 0 16px rgba(0, 0, 0, 0.5);
      --infra-laser: #000000;
      --infra-laser-aura: 0 0 2px #000000, 0 0 6px rgba(0, 0, 0, 0.7), 0 0 12px rgba(15, 23, 42, 0.6);
      --infra-spark: #000000;
      --infra-spark-aura: 0 0 4px #000000, 0 0 8px rgba(0, 0, 0, 0.8);
      --infra-rail: rgba(0, 0, 0, 0.2);
      --infra-end-glow-bg: radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.12) 42%, transparent 72%);
      --infra-end-glow-shadow: 0 0 18px rgba(0, 0, 0, 0.35);
    }

    html[data-theme="light"] .flow-visual[data-icon="infra"] {
      --infra-base-bg: #d1d5db;
      --infra-base-border: #9ca3af;
      --infra-base-grid: rgba(0, 0, 0, 0.08);
      --infra-base-shadow: rgba(0, 0, 0, 0.15);
      --infra-bar-bg:
        linear-gradient(180deg, #0f172a 0%, #1e293b 40%, #0f172a 100%),
        linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.8) 50%, transparent 100%);
      --infra-bar-border: #0f172a;
      --infra-bar-inset: inset 0 1px 1px rgba(255, 255, 255, 0.3), inset 0 -1px 1px rgba(0, 0, 0, 0.8);
      --infra-bar-shadow: 0 0 8px rgba(15, 23, 42, 0.4);
      --infra-bar-glow: 0 0 18px rgba(15, 23, 42, 0.5);
      --infra-laser: #0f172a;
      --infra-laser-aura: 0 0 3px #0f172a, 0 0 8px rgba(15, 23, 42, 0.7);
      --infra-spark: #0f172a;
      --infra-spark-aura: 0 0 6px #0f172a;
      --infra-rail: rgba(0, 0, 0, 0.15);
      --infra-end-glow-bg: radial-gradient(ellipse at 50% 50%, rgba(15, 23, 42, 0.35) 0%, transparent 72%);
      --infra-end-glow-shadow: 0 0 16px rgba(15, 23, 42, 0.3);
    }

    /* 1. Scanner Optical Chamber & Telemetry Rails (ریل‌های راهنمای اسکنر و درخشش تجدید زیرساخت) */
    .flow-visual[data-icon="infra"] b {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 5;
    }

    /* Top & Bottom Micro-Telemetry Guide Tracks removed per user feedback */
    .flow-visual[data-icon="infra"] b::before {
      display: none !important;
    }

    /* End-of-Sweep Soft Glow Pulse (درخشش ملایم کوتاه در پایان کار) */
    .flow-visual[data-icon="infra"] b::after {
      content: "";
      position: absolute;
      left: 8%;
      right: 8%;
      top: 12px;
      bottom: 12px;
      border-radius: 8px;
      background: var(--infra-end-glow-bg);
      box-shadow: var(--infra-end-glow-shadow);
      opacity: 0;
      transform: scale(0.94);
      animation: laser-restore-end-glow 4.6s ease-out infinite;
      transition: background 0.4s, box-shadow 0.4s;
    }

    /* 2. Three Infrastructure Layers (۳ لایه زیرساخت: مات و قدیمی در حالت پایه) */
    .flow-visual[data-icon="infra"] i {
      position: absolute;
      display: block;
      box-sizing: border-box;
      pointer-events: none;
    }

    /* Base Layer Elements 1, 2, 3: Dull Matte Grey with Legacy Architecture Seams */
    .flow-visual[data-icon="infra"] i:nth-child(1),
    .flow-visual[data-icon="infra"] i:nth-child(2),
    .flow-visual[data-icon="infra"] i:nth-child(3) {
      left: 14%;
      right: 14%;
      height: 14px;
      background-color: var(--infra-base-bg);
      background-image:
        linear-gradient(90deg,
          transparent 24%, var(--infra-base-grid) 25%, transparent 26%,
          transparent 49%, var(--infra-base-grid) 50%, transparent 51%,
          transparent 74%, var(--infra-base-grid) 75%, transparent 76%);
      border: 1px solid var(--infra-base-border);
      border-radius: 3px;
      box-shadow: inset 0 1px 3px var(--infra-base-shadow);
      z-index: 3;
      transition: background 0.4s, border-color 0.4s;
    }

    /* Layer 1: Top Strata (لایه بالایی) */
    .flow-visual[data-icon="infra"] i:nth-child(1) {
      top: 18px;
    }

    /* Layer 2: Middle Strata (لایه میانی) */
    .flow-visual[data-icon="infra"] i:nth-child(2) {
      top: 41px;
    }

    /* Layer 3: Bottom Strata (لایه پایینی) */
    .flow-visual[data-icon="infra"] i:nth-child(3) {
      top: 64px;
    }

    /* Restored Polished White Surface (نوارهای سفید براق با لبه‌های فوق‌العاده شارپ) */
    .flow-visual[data-icon="infra"] i:nth-child(1)::before,
    .flow-visual[data-icon="infra"] i:nth-child(2)::before,
    .flow-visual[data-icon="infra"] i:nth-child(3)::before {
      content: "";
      position: absolute;
      inset: -1px;
      border-radius: 3px;
      background: var(--infra-bar-bg);
      border: 1.5px solid var(--infra-bar-border);
      box-shadow: var(--infra-bar-inset), var(--infra-bar-shadow);
      z-index: 4;
      clip-path: inset(0 100% 0 0);
      animation: laser-restore-sweep-reveal 4.6s cubic-bezier(0.35, 0.0, 0.25, 1) infinite;
      transition: border-color 0.4s;
    }

    /* Real-time Laser Cutting & Polishing Contact Plasma (برخورد تیز لیزر روی هر لایه) */
    .flow-visual[data-icon="infra"] i:nth-child(1)::after,
    .flow-visual[data-icon="infra"] i:nth-child(2)::after,
    .flow-visual[data-icon="infra"] i:nth-child(3)::after {
      content: "";
      position: absolute;
      top: -4px;
      bottom: -4px;
      width: 4px;
      margin-left: -2px;
      border-radius: 2px;
      background: var(--infra-spark);
      box-shadow: var(--infra-spark-aura);
      z-index: 6;
      pointer-events: none;
      opacity: 0;
      animation: laser-contact-spark-travel 4.6s cubic-bezier(0.35, 0.0, 0.25, 1) infinite;
      transition: background 0.4s, box-shadow 0.4s;
    }

    /* 3. Razor-Sharp White Laser Beam (خط لیزری سفید و بسیار تیز) */
    .flow-visual[data-icon="infra"] i:nth-child(4) {
      top: 8px;
      bottom: 8px;
      width: 2px;
      margin-left: -1px;
      background: var(--infra-laser);
      box-shadow: var(--infra-laser-aura);
      z-index: 8;
      pointer-events: none;
      opacity: 0;
      animation: laser-beam-sweep 4.6s cubic-bezier(0.35, 0.0, 0.25, 1) infinite;
      transition: background 0.4s, box-shadow 0.4s;
    }

    /* Laser Top Emitter Diode (دیود لیزری فرستنده در بالا) */
    .flow-visual[data-icon="infra"] i:nth-child(4)::before {
      content: "";
      position: absolute;
      left: 50%;
      top: -3px;
      width: 6px;
      height: 6px;
      margin-left: -3px;
      background: var(--infra-laser);
      transform: rotate(45deg);
      border-radius: 1px;
      box-shadow: var(--infra-spark-aura);
      transition: background 0.4s, box-shadow 0.4s;
    }

    /* Laser Bottom Collector Diode (دیود گیرنده در پایین) */
    .flow-visual[data-icon="infra"] i:nth-child(4)::after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: -3px;
      width: 6px;
      height: 6px;
      margin-left: -3px;
      background: var(--infra-laser);
      transform: rotate(45deg);
      border-radius: 1px;
      box-shadow: var(--infra-spark-aura);
      transition: background 0.4s, box-shadow 0.4s;
    }

    /* =========================================================
     LASER RESTORATION SWEEP KEYFRAMES
     ========================================================= */

    /* 1. Laser Beam Sweep across all 3 layers (حرکت خط لیزری از چپ به راست) */
    @keyframes laser-beam-sweep {

      0%,
      14% {
        left: 12%;
        opacity: 0;
        transform: scaleY(0.4);
      }

      15% {
        left: 14%;
        opacity: 0.8;
        transform: scaleY(0.85);
      }

      16% {
        left: 14%;
        opacity: 1;
        transform: scaleY(1);
      }

      60% {
        left: 86%;
        opacity: 1;
        transform: scaleY(1);
      }

      62% {
        left: 88%;
        opacity: 0.5;
        transform: scaleY(1.05);
      }

      64% {
        left: 90%;
        opacity: 0;
        transform: scaleY(0.2);
      }

      100% {
        left: 12%;
        opacity: 0;
      }
    }

    /* 2. Immediate Restoration into Glossy White Bars with Sharp Edges (تبدیل به نوارهای سفید براق) */
    @keyframes laser-restore-sweep-reveal {

      0%,
      15% {
        clip-path: inset(0 100% 0 0);
        opacity: 0;
      }

      16% {
        clip-path: inset(0 100% 0 0);
        opacity: 1;
      }

      60% {
        clip-path: inset(0 0% 0 0);
        opacity: 1;
        box-shadow: var(--infra-bar-inset), var(--infra-bar-shadow);
      }

      64% {
        clip-path: inset(0 0% 0 0);
        opacity: 1;
        box-shadow: var(--infra-bar-inset), var(--infra-bar-shadow), var(--infra-bar-glow);
      }

      72% {
        clip-path: inset(0 0% 0 0);
        opacity: 1;
        box-shadow: var(--infra-bar-inset), var(--infra-bar-shadow);
      }

      87% {
        clip-path: inset(0 0% 0 0);
        opacity: 1;
      }

      94% {
        clip-path: inset(0 0% 0 0);
        opacity: 0;
      }

      100% {
        clip-path: inset(0 100% 0 0);
        opacity: 0;
      }
    }

    /* 3. Laser Contact Spark on each Layer */
    @keyframes laser-contact-spark-travel {

      0%,
      15% {
        left: 0%;
        opacity: 0;
        transform: scaleY(0.4);
      }

      16% {
        left: 0%;
        opacity: 1;
        transform: scaleY(1);
      }

      60% {
        left: 100%;
        opacity: 1;
        transform: scaleY(1);
      }

      62% {
        left: 100%;
        opacity: 0;
        transform: scaleY(0.2);
      }

      100% {
        left: 100%;
        opacity: 0;
      }
    }

    /* 4. End-of-Sweep Soft Glow Pulse (درخشش ملایم کوتاه در پایان کار) */
    @keyframes laser-restore-end-glow {

      0%,
      59% {
        opacity: 0;
        transform: scale(0.94);
      }

      60% {
        opacity: 0.15;
        transform: scale(0.96);
      }

      63% {
        opacity: 0.85;
        transform: scale(1.03);
      }

      66% {
        opacity: 0.95;
        transform: scale(1.02);
      }

      72% {
        opacity: 0.35;
        transform: scale(1.0);
      }

      78% {
        opacity: 0;
        transform: scale(0.97);
      }

      100% {
        opacity: 0;
        transform: scale(0.94);
      }
    }

    /* Process Step 1: Assess (Radar) */
    .flow-visual[data-icon="assess"] b {
      width: 52px;
      height: 52px;
      border: 1.5px solid currentColor;
      border-radius: 50%;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      pointer-events: none
    }

    .flow-visual[data-icon="assess"] b::before {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: 25px;
      height: 1.5px;
      background: currentColor;
      transform-origin: 0% 50%;
      animation: radar-sweep 2.4s linear infinite
    }

    .flow-visual[data-icon="assess"] i {
      width: 5px;
      height: 5px;
      background: currentColor;
      border-radius: 50%;
      left: 50%;
      top: 50%;
      opacity: 0.15;
      animation: radar-dot-flash 2.4s linear infinite
    }

    .flow-visual[data-icon="assess"] i:nth-child(1) {
      --dx: 13px;
      --dy: 10px;
      animation-delay: 0.25s
    }

    .flow-visual[data-icon="assess"] i:nth-child(2) {
      --dx: -12px;
      --dy: 11px;
      animation-delay: 0.93s
    }

    .flow-visual[data-icon="assess"] i:nth-child(3) {
      --dx: -11px;
      --dy: -12px;
      animation-delay: 1.53s
    }

    .flow-visual[data-icon="assess"] i:nth-child(4) {
      --dx: 11px;
      --dy: -12px;
      animation-delay: 2.10s
    }

    @keyframes radar-sweep {
      from {
        transform: rotate(0deg)
      }

      to {
        transform: rotate(360deg)
      }
    }

    @keyframes radar-dot-flash {
      0% {
        opacity: 0.15;
        transform: translate(var(--dx), var(--dy)) scale(0.8)
      }

      4% {
        opacity: 1;
        transform: translate(var(--dx), var(--dy)) scale(1.6);
        box-shadow: 0 0 6px currentColor
      }

      18% {
        opacity: 0.75;
        transform: translate(var(--dx), var(--dy)) scale(1.1)
      }

      32%,
      100% {
        opacity: 0.15;
        transform: translate(var(--dx), var(--dy)) scale(0.8);
        box-shadow: none
      }
    }

    /* Process Step 2: Architecture (CAD Blueprint) */
    .flow-visual[data-icon="architect"] {
      background-color: var(--surf);
      background-image:
        linear-gradient(color-mix(in srgb, currentColor 8%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, currentColor 8%, transparent) 1px, transparent 1px),
        linear-gradient(145deg, var(--surf), var(--bg));
      background-size: 8px 8px, 8px 8px, 100% 100%;
    }

    .process-node.on .flow-visual[data-icon="architect"] {
      background-color: var(--text) !important;
      background-image:
        linear-gradient(color-mix(in srgb, var(--bg) 14%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--bg) 14%, transparent) 1px, transparent 1px) !important;
      background-size: 8px 8px, 8px 8px !important;
      color: var(--bg) !important;
      border-color: var(--text) !important;
    }

    .flow-visual[data-icon="architect"] b {
      display: block;
      left: 14%;
      right: 14%;
      top: 14%;
      bottom: 14%;
      border: 1px dashed color-mix(in srgb, currentColor 45%, transparent);
      border-radius: 2px;
      pointer-events: none;
    }

    .flow-visual[data-icon="architect"] b::before {
      content: "+";
      position: absolute;
      left: -4px;
      top: -6px;
      font-size: 8px;
      font-family: monospace;
      opacity: 0.75;
      line-height: 1;
    }

    .flow-visual[data-icon="architect"] b::after {
      content: "+";
      position: absolute;
      right: -4px;
      bottom: -6px;
      font-size: 8px;
      font-family: monospace;
      opacity: 0.75;
      line-height: 1;
    }

    .flow-visual[data-icon="architect"] i {
      left: 50%;
      transform: translateX(-50%);
      box-sizing: border-box;
    }

    .flow-visual[data-icon="architect"] i:nth-child(1) {
      top: 22%;
      width: 42%;
      height: 13%;
      border: 1px solid currentColor;
      border-radius: 2px;
      background: color-mix(in srgb, currentColor 10%, transparent);
      animation: bp-node-pulse 3s ease-in-out infinite;
    }

    .flow-visual[data-icon="architect"] i:nth-child(2) {
      top: 43%;
      width: 62%;
      height: 15%;
      border: 1.5px solid currentColor;
      border-radius: 2px;
      background: color-mix(in srgb, currentColor 16%, transparent);
      animation: bp-node-pulse 3s ease-in-out -1s infinite;
    }

    .flow-visual[data-icon="architect"] i:nth-child(3) {
      top: 66%;
      width: 50%;
      height: 13%;
      border: 1px solid currentColor;
      border-radius: 2px;
      background: color-mix(in srgb, currentColor 10%, transparent);
      animation: bp-node-pulse 3s ease-in-out -2s infinite;
    }

    .flow-visual[data-icon="architect"] i:nth-child(4) {
      left: 0;
      top: 10%;
      bottom: 10%;
      width: 1.5px;
      border: none;
      background: currentColor;
      box-shadow: 0 0 6px currentColor;
      opacity: 0.85;
      animation: bp-scan 3.2s var(--ease) infinite;
    }

    @keyframes bp-scan {

      0%,
      5% {
        left: 14%;
        opacity: 0;
      }

      15% {
        opacity: 1;
      }

      85% {
        opacity: 1;
      }

      95%,
      100% {
        left: 86%;
        opacity: 0;
      }
    }

    @keyframes bp-node-pulse {

      0%,
      100% {
        border-color: currentColor;
      }

      50% {
        border-color: currentColor;
        box-shadow: 0 0 5px color-mix(in srgb, currentColor 45%, transparent);
      }
    }

    /* Process Step 3: Build / Code (IDE Code Editor) */
    .flow-visual[data-icon="code"] b,
    .flow-visual[data-icon="build"] b {
      display: block;
      left: 12%;
      right: 12%;
      top: 12%;
      bottom: 12%;
      border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
      border-radius: 4px;
      background: color-mix(in srgb, currentColor 4%, transparent);
      pointer-events: none;
    }

    .flow-visual[data-icon="code"] b::before,
    .flow-visual[data-icon="build"] b::before {
      content: "";
      position: absolute;
      left: 5px;
      top: 4px;
      width: 3px;
      height: 3px;
      border-radius: 50%;
      background: currentColor;
      box-shadow: 5px 0 0 currentColor, 10px 0 0 currentColor;
      opacity: 0.6;
    }

    .flow-visual[data-icon="code"] b::after,
    .flow-visual[data-icon="build"] b::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: 11px;
      height: 1px;
      background: color-mix(in srgb, currentColor 18%, transparent);
    }

    .flow-visual[data-icon="code"] i,
    .flow-visual[data-icon="build"] i {
      height: 2.5px;
      background: currentColor;
      border-radius: 1.5px;
      transform-origin: left center;
    }

    .flow-visual[data-icon="code"] i:nth-child(1),
    .flow-visual[data-icon="build"] i:nth-child(1) {
      left: 20%;
      top: 32%;
      width: 44%;
      animation: code-type-1 3.2s var(--ease) infinite;
    }

    .flow-visual[data-icon="code"] i:nth-child(2),
    .flow-visual[data-icon="build"] i:nth-child(2) {
      left: 28%;
      top: 46%;
      width: 48%;
      animation: code-type-2 3.2s var(--ease) infinite;
    }

    .flow-visual[data-icon="code"] i:nth-child(3),
    .flow-visual[data-icon="build"] i:nth-child(3) {
      left: 36%;
      top: 60%;
      width: 34%;
      animation: code-type-3 3.2s var(--ease) infinite;
    }

    .flow-visual[data-icon="code"] i:nth-child(4),
    .flow-visual[data-icon="build"] i:nth-child(4) {
      left: 28%;
      top: 74%;
      width: 26%;
      animation: code-type-4 3.2s var(--ease) infinite;
    }

    .flow-visual[data-icon="code"] i:nth-child(4)::after,
    .flow-visual[data-icon="build"] i:nth-child(4)::after {
      content: "";
      position: absolute;
      right: -5px;
      top: -2px;
      width: 2px;
      height: 7px;
      background: currentColor;
      border-radius: 1px;
      animation: code-cursor .8s steps(1) infinite;
    }

    @keyframes code-type-1 {
      0% {
        transform: scaleX(0);
        opacity: 0;
      }

      12%,
      90% {
        transform: scaleX(1);
        opacity: 0.9;
      }

      98%,
      100% {
        opacity: 0;
        transform: scaleX(0);
      }
    }

    @keyframes code-type-2 {

      0%,
      14% {
        transform: scaleX(0);
        opacity: 0;
      }

      28%,
      90% {
        transform: scaleX(1);
        opacity: 1;
      }

      98%,
      100% {
        opacity: 0;
        transform: scaleX(0);
      }
    }

    @keyframes code-type-3 {

      0%,
      30% {
        transform: scaleX(0);
        opacity: 0;
      }

      44%,
      90% {
        transform: scaleX(1);
        opacity: 0.8;
      }

      98%,
      100% {
        opacity: 0;
        transform: scaleX(0);
      }
    }

    @keyframes code-type-4 {

      0%,
      46% {
        transform: scaleX(0);
        opacity: 0;
      }

      60%,
      90% {
        transform: scaleX(1);
        opacity: 0.95;
      }

      98%,
      100% {
        opacity: 0;
        transform: scaleX(0);
      }
    }

    @keyframes code-cursor {

      0%,
      49% {
        opacity: 1;
      }

      50%,
      100% {
        opacity: 0;
      }
    }

    /* Capability 07 & Process Step 4: Integrate / یکپارچه‌سازی (Prism Alignment & 3D Rubik Cube Convergence) */
    .flow-visual[data-icon="link"],
    .flow-visual[data-icon="integrate"] {
      background-color: var(--surf);
      overflow: hidden;
      perspective: 600px;
      perspective-origin: 50% 50%;
    }

    .process-node.on .flow-visual[data-icon="integrate"] {
      background-color: var(--text) !important;
      color: var(--bg) !important;
      border-color: var(--text) !important;
    }

    /* Central Glowing Prism Crystal Nucleus */
    .flow-visual[data-icon="link"] b,
    .flow-visual[data-icon="integrate"] b {
      display: block;
      width: 14px;
      height: 14px;
      left: 50%;
      top: 50%;
      margin-left: -7px;
      margin-top: -7px;
      border-radius: 50%;
      background: currentColor;
      pointer-events: none;
      z-index: 5;
      animation: prism-core-glow 3.6s ease-in-out infinite;
    }

    .flow-visual[data-icon="link"] b::before,
    .flow-visual[data-icon="integrate"] b::before {
      content: "";
      position: absolute;
      inset: -6px;
      border-radius: 50%;
      background: color-mix(in srgb, currentColor 35%, transparent);
      animation: prism-core-halo 3.6s ease-in-out infinite;
    }

    .flow-visual[data-icon="link"] b::after,
    .flow-visual[data-icon="integrate"] b::after {
      content: "";
      position: absolute;
      inset: -10px;
      border: 1px dashed color-mix(in srgb, currentColor 55%, transparent);
      border-radius: 50%;
      animation: spin-cw 8s linear infinite;
    }

    /* Isometric Facet 1: Top Face of the Cube */
    .flow-visual[data-icon="link"] i:nth-child(1),
    .flow-visual[data-icon="integrate"] i:nth-child(1) {
      left: 50%;
      top: 50%;
      margin-left: -15px;
      margin-top: -15px;
      width: 30px;
      height: 30px;
      border: 1.5px solid currentColor;
      background: color-mix(in srgb, currentColor 22%, transparent);
      box-sizing: border-box;
      z-index: 3;
      animation: prism-facet-top 3.6s cubic-bezier(0.34, 1.25, 0.64, 1) infinite;
    }

    .flow-visual[data-icon="link"] i:nth-child(1)::after,
    .flow-visual[data-icon="integrate"] i:nth-child(1)::after {
      content: "";
      position: absolute;
      inset: 4px;
      border: 1px dashed color-mix(in srgb, currentColor 45%, transparent);
      pointer-events: none;
    }

    /* Isometric Facet 2: Left Face of the Cube */
    .flow-visual[data-icon="link"] i:nth-child(2),
    .flow-visual[data-icon="integrate"] i:nth-child(2) {
      left: 50%;
      top: 50%;
      margin-left: -15px;
      margin-top: -15px;
      width: 30px;
      height: 30px;
      border: 1.5px solid currentColor;
      background: color-mix(in srgb, currentColor 16%, transparent);
      box-sizing: border-box;
      z-index: 2;
      animation: prism-facet-left 3.6s cubic-bezier(0.34, 1.25, 0.64, 1) infinite;
    }

    .flow-visual[data-icon="link"] i:nth-child(2)::after,
    .flow-visual[data-icon="integrate"] i:nth-child(2)::after {
      content: "";
      position: absolute;
      inset: 4px;
      border: 1px dashed color-mix(in srgb, currentColor 45%, transparent);
      pointer-events: none;
    }

    /* Isometric Facet 3: Right Face of the Cube */
    .flow-visual[data-icon="link"] i:nth-child(3),
    .flow-visual[data-icon="integrate"] i:nth-child(3) {
      left: 50%;
      top: 50%;
      margin-left: -15px;
      margin-top: -15px;
      width: 30px;
      height: 30px;
      border: 1.5px solid currentColor;
      background: color-mix(in srgb, currentColor 12%, transparent);
      box-sizing: border-box;
      z-index: 2;
      animation: prism-facet-right 3.6s cubic-bezier(0.34, 1.25, 0.64, 1) infinite;
    }

    .flow-visual[data-icon="link"] i:nth-child(3)::after,
    .flow-visual[data-icon="integrate"] i:nth-child(3)::after {
      content: "";
      position: absolute;
      inset: 4px;
      border: 1px dashed color-mix(in srgb, currentColor 45%, transparent);
      pointer-events: none;
    }

    /* Unified Luminous Flow Circuit Line */
    .flow-visual[data-icon="link"] i:nth-child(4),
    .flow-visual[data-icon="integrate"] i:nth-child(4) {
      left: 50%;
      top: 50%;
      margin-left: -3px;
      margin-top: -3px;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: currentColor;
      box-shadow: 0 0 12px currentColor;
      z-index: 6;
      animation: prism-flow-stream 3.6s ease-in-out infinite;
    }

    /* 3D Isometric Animation Keyframes with Breathing Glow */
    @keyframes prism-facet-top {

      0%,
      18% {
        transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 0, 48px) rotateZ(35deg);
        opacity: 0.35;
        border-radius: 6px;
        box-shadow: none;
      }

      38% {
        transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 0, 15px) rotateZ(0deg);
        opacity: 0.95;
        border-radius: 0px;
        box-shadow: 0 0 12px color-mix(in srgb, currentColor 45%, transparent);
      }

      /* Breathing Inhale 1 */
      48% {
        transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 0, 17px) rotateZ(0deg);
        opacity: 1;
        box-shadow: 0 0 18px color-mix(in srgb, currentColor 65%, transparent);
      }

      /* Breathing Exhale 1 */
      58% {
        transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 0, 15px) rotateZ(0deg);
        opacity: 0.9;
        box-shadow: 0 0 8px color-mix(in srgb, currentColor 30%, transparent);
      }

      /* Breathing Inhale 2 */
      68% {
        transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 0, 17.5px) rotateZ(0deg);
        opacity: 1;
        box-shadow: 0 0 20px color-mix(in srgb, currentColor 75%, transparent);
      }

      /* Breathing Exhale 2 */
      78%,
      82% {
        transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 0, 15px) rotateZ(0deg);
        opacity: 0.92;
        box-shadow: 0 0 10px color-mix(in srgb, currentColor 35%, transparent);
        border-radius: 0px;
      }

      92%,
      100% {
        transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 0, 48px) rotateZ(35deg);
        opacity: 0.35;
        border-radius: 6px;
        box-shadow: none;
      }
    }

    @keyframes prism-facet-left {

      0%,
      18% {
        transform: rotateX(60deg) rotateZ(45deg) rotateY(90deg) translate3d(0, 0, 48px) rotateX(-35deg);
        opacity: 0.35;
        border-radius: 6px;
        box-shadow: none;
      }

      38% {
        transform: rotateX(60deg) rotateZ(45deg) rotateY(90deg) translate3d(0, 0, 15px) rotateX(0deg);
        opacity: 0.95;
        border-radius: 0px;
        box-shadow: 0 0 10px color-mix(in srgb, currentColor 40%, transparent);
      }

      48% {
        transform: rotateX(60deg) rotateZ(45deg) rotateY(90deg) translate3d(0, 0, 17px) rotateX(0deg);
        opacity: 1;
        box-shadow: 0 0 16px color-mix(in srgb, currentColor 60%, transparent);
      }

      58% {
        transform: rotateX(60deg) rotateZ(45deg) rotateY(90deg) translate3d(0, 0, 15px) rotateX(0deg);
        opacity: 0.88;
        box-shadow: 0 0 6px color-mix(in srgb, currentColor 25%, transparent);
      }

      68% {
        transform: rotateX(60deg) rotateZ(45deg) rotateY(90deg) translate3d(0, 0, 17.5px) rotateX(0deg);
        opacity: 1;
        box-shadow: 0 0 18px color-mix(in srgb, currentColor 70%, transparent);
      }

      78%,
      82% {
        transform: rotateX(60deg) rotateZ(45deg) rotateY(90deg) translate3d(0, 0, 15px) rotateX(0deg);
        opacity: 0.9;
        box-shadow: 0 0 8px color-mix(in srgb, currentColor 30%, transparent);
        border-radius: 0px;
      }

      92%,
      100% {
        transform: rotateX(60deg) rotateZ(45deg) rotateY(90deg) translate3d(0, 0, 48px) rotateX(-35deg);
        opacity: 0.35;
        border-radius: 6px;
        box-shadow: none;
      }
    }

    @keyframes prism-facet-right {

      0%,
      18% {
        transform: rotateX(60deg) rotateZ(45deg) rotateX(-90deg) translate3d(0, 0, 48px) rotateY(35deg);
        opacity: 0.35;
        border-radius: 6px;
        box-shadow: none;
      }

      38% {
        transform: rotateX(60deg) rotateZ(45deg) rotateX(-90deg) translate3d(0, 0, 15px) rotateY(0deg);
        opacity: 0.95;
        border-radius: 0px;
        box-shadow: 0 0 10px color-mix(in srgb, currentColor 40%, transparent);
      }

      48% {
        transform: rotateX(60deg) rotateZ(45deg) rotateX(-90deg) translate3d(0, 0, 17px) rotateY(0deg);
        opacity: 1;
        box-shadow: 0 0 16px color-mix(in srgb, currentColor 60%, transparent);
      }

      58% {
        transform: rotateX(60deg) rotateZ(45deg) rotateX(-90deg) translate3d(0, 0, 15px) rotateY(0deg);
        opacity: 0.88;
        box-shadow: 0 0 6px color-mix(in srgb, currentColor 25%, transparent);
      }

      68% {
        transform: rotateX(60deg) rotateZ(45deg) rotateX(-90deg) translate3d(0, 0, 17.5px) rotateY(0deg);
        opacity: 1;
        box-shadow: 0 0 18px color-mix(in srgb, currentColor 70%, transparent);
      }

      78%,
      82% {
        transform: rotateX(60deg) rotateZ(45deg) rotateX(-90deg) translate3d(0, 0, 15px) rotateY(0deg);
        opacity: 0.9;
        box-shadow: 0 0 8px color-mix(in srgb, currentColor 30%, transparent);
        border-radius: 0px;
      }

      92%,
      100% {
        transform: rotateX(60deg) rotateZ(45deg) rotateX(-90deg) translate3d(0, 0, 48px) rotateY(35deg);
        opacity: 0.35;
        border-radius: 6px;
        box-shadow: none;
      }
    }

    @keyframes prism-core-glow {

      0%,
      22% {
        transform: scale(0.1);
        opacity: 0;
        box-shadow: none;
      }

      38% {
        transform: scale(1.3);
        opacity: 1;
        box-shadow: 0 0 16px currentColor;
      }

      /* Breathing Inhale 1 */
      48% {
        transform: scale(1.45);
        opacity: 1;
        box-shadow: 0 0 22px currentColor, 0 0 8px currentColor;
      }

      /* Breathing Exhale 1 */
      58% {
        transform: scale(1.1);
        opacity: 0.85;
        box-shadow: 0 0 10px currentColor;
      }

      /* Breathing Inhale 2 */
      68% {
        transform: scale(1.5);
        opacity: 1;
        box-shadow: 0 0 26px currentColor, 0 0 10px currentColor;
      }

      /* Breathing Exhale 2 */
      78%,
      82% {
        transform: scale(1.15);
        opacity: 0.9;
        box-shadow: 0 0 12px currentColor;
      }

      88%,
      100% {
        transform: scale(0.1);
        opacity: 0;
        box-shadow: none;
      }
    }

    @keyframes prism-core-halo {

      0%,
      28% {
        opacity: 0;
        transform: scale(0.4);
      }

      38% {
        opacity: 0.5;
        transform: scale(1.2);
      }

      48% {
        opacity: 0.8;
        transform: scale(1.5);
      }

      58% {
        opacity: 0.45;
        transform: scale(1.15);
      }

      68% {
        opacity: 0.85;
        transform: scale(1.6);
      }

      78%,
      82% {
        opacity: 0.5;
        transform: scale(1.2);
      }

      88%,
      100% {
        opacity: 0;
        transform: scale(0.4);
      }
    }

    @keyframes prism-flow-stream {

      0%,
      36% {
        opacity: 0;
        transform: translate3d(0, -26px, 15px) scale(0.5);
      }

      42% {
        opacity: 1;
        transform: translate3d(0, -13px, 15px) scale(1.2);
      }

      54% {
        opacity: 1;
        transform: translate3d(0, 0, 15px) scale(1.6);
        box-shadow: 0 0 14px currentColor;
      }

      68% {
        opacity: 1;
        transform: translate3d(-12px, 14px, 15px) scale(1.2);
      }

      78% {
        opacity: 0;
        transform: translate3d(0, 26px, 15px) scale(0.5);
      }

      79%,
      100% {
        opacity: 0;
      }
    }

    /* Process Step 5: Optimize (Equalizer Calibration - اکولایزر تعادل و تثبیت مونوکروم سیاه و سفید) */
    .flow-visual[data-icon="optimize"] {
      background-color: var(--surf);
      overflow: hidden;
    }

    .process-node.on .flow-visual[data-icon="optimize"] {
      background-color: var(--text) !important;
      color: var(--bg) !important;
      border-color: var(--text) !important;
    }

    /* Calibration Laser Beam & Baseline Circuit Line */
    .flow-visual[data-icon="optimize"] b {
      display: block;
      left: 14%;
      right: 14%;
      bottom: 20%;
      height: 2px;
      border-radius: 1px;
      background: currentColor;
      pointer-events: none;
      z-index: 5;
      animation: eq-laser-circuit 4.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    }

    /* Pure Adaptive Laser Spark on the beam */
    .flow-visual[data-icon="optimize"] b::before {
      content: "";
      position: absolute;
      top: -3px;
      left: 0;
      width: 6px;
      height: 8px;
      border-radius: 50%;
      background: currentColor;
      box-shadow: 0 0 8px currentColor, 0 0 14px currentColor;
      animation: eq-laser-spark 4.2s linear infinite;
    }

    /* Adaptive Lock Baseline Indicator */
    .flow-visual[data-icon="optimize"] b::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 1px;
      background: currentColor;
      box-shadow: 0 0 10px currentColor;
      opacity: 0;
      animation: eq-lock-flash 4.2s ease-in-out infinite;
    }

    /* 4 Equalizer Titanium Cylindrical Columns */
    .flow-visual[data-icon="optimize"] i {
      position: absolute;
      bottom: 20%;
      width: 10px;
      border-radius: 3px 3px 1px 1px;
      background: color-mix(in srgb, currentColor 18%, transparent);
      border: 1px solid color-mix(in srgb, currentColor 45%, transparent);
      box-sizing: border-box;
      transform-origin: 50% 100%;
      z-index: 2;
    }

    /* Luminous Crown Caps on Top of each Column */
    .flow-visual[data-icon="optimize"] i::after {
      content: "";
      position: absolute;
      left: -1px;
      right: -1px;
      top: -1px;
      height: 3px;
      border-radius: 3px 3px 0 0;
      background: currentColor;
      box-shadow: 0 0 4px currentColor;
      animation: eq-crown-glow 4.2s ease-in-out infinite;
    }

    .flow-visual[data-icon="optimize"] i:nth-child(1) {
      left: 20%;
      animation: eq-column-1 4.2s cubic-bezier(0.34, 1.4, 0.64, 1) infinite;
    }

    .flow-visual[data-icon="optimize"] i:nth-child(2) {
      left: 38%;
      animation: eq-column-2 4.2s cubic-bezier(0.34, 1.4, 0.64, 1) infinite;
    }

    .flow-visual[data-icon="optimize"] i:nth-child(3) {
      left: 56%;
      animation: eq-column-3 4.2s cubic-bezier(0.34, 1.4, 0.64, 1) infinite;
    }

    .flow-visual[data-icon="optimize"] i:nth-child(4) {
      left: 74%;
      animation: eq-column-4 4.2s cubic-bezier(0.34, 1.4, 0.64, 1) infinite;
    }

    .flow-visual[data-icon="optimize"] i:nth-child(1)::after {
      animation-delay: 0s;
    }

    .flow-visual[data-icon="optimize"] i:nth-child(2)::after {
      animation-delay: 0.08s;
    }

    .flow-visual[data-icon="optimize"] i:nth-child(3)::after {
      animation-delay: 0.16s;
    }

    .flow-visual[data-icon="optimize"] i:nth-child(4)::after {
      animation-delay: 0.24s;
    }

    /* Keyframe Animations for Equalizer Calibration (Adaptive Monochrome Theme) */
    @keyframes eq-laser-circuit {

      0%,
      20% {
        background: color-mix(in srgb, currentColor 20%, transparent);
        box-shadow: none;
      }

      24%,
      54% {
        background: currentColor;
        box-shadow: 0 0 10px currentColor, 0 0 4px currentColor;
      }

      58%,
      84% {
        background: currentColor;
        box-shadow: 0 0 12px currentColor, 0 0 4px currentColor;
      }

      92%,
      100% {
        background: color-mix(in srgb, currentColor 20%, transparent);
        box-shadow: none;
      }
    }

    @keyframes eq-laser-spark {

      0%,
      20% {
        left: 0%;
        opacity: 0;
        transform: scale(0.4);
      }

      24% {
        left: 0%;
        opacity: 1;
        transform: scale(1.3);
      }

      54% {
        left: 100%;
        opacity: 1;
        transform: scale(1.3);
      }

      58%,
      100% {
        left: 100%;
        opacity: 0;
        transform: scale(0.4);
      }
    }

    @keyframes eq-lock-flash {

      0%,
      54% {
        opacity: 0;
      }

      58%,
      84% {
        opacity: 1;
      }

      92%,
      100% {
        opacity: 0;
      }
    }

    @keyframes eq-crown-glow {

      0%,
      24% {
        background: color-mix(in srgb, currentColor 40%, transparent);
        box-shadow: 0 0 3px color-mix(in srgb, currentColor 30%, transparent);
      }

      28%,
      52% {
        background: currentColor;
        box-shadow: 0 0 10px currentColor;
      }

      56%,
      84% {
        background: currentColor;
        box-shadow: 0 0 12px currentColor, 0 0 4px currentColor;
      }

      92%,
      100% {
        background: color-mix(in srgb, currentColor 40%, transparent);
        box-shadow: 0 0 3px color-mix(in srgb, currentColor 30%, transparent);
      }
    }

    @keyframes eq-column-1 {
      0% {
        height: 38px;
        border-color: color-mix(in srgb, currentColor 35%, transparent);
        opacity: 0.5;
      }

      10% {
        height: 14px;
        border-color: color-mix(in srgb, currentColor 25%, transparent);
        opacity: 0.35;
      }

      20% {
        height: 32px;
        border-color: color-mix(in srgb, currentColor 35%, transparent);
        opacity: 0.55;
      }

      28% {
        height: 12px;
        border-color: currentColor;
        opacity: 1;
        transform: scaleY(1.4);
      }

      34% {
        height: 16px;
        border-color: currentColor;
        opacity: 0.95;
        transform: scaleY(0.9);
      }

      40%,
      54% {
        height: 14px;
        border-color: currentColor;
        opacity: 0.9;
        transform: scaleY(1);
      }

      58% {
        height: 14px;
        border-color: currentColor;
        background: color-mix(in srgb, currentColor 28%, transparent);
        box-shadow: 0 0 8px color-mix(in srgb, currentColor 40%, transparent);
        transform: scaleY(1.06);
      }

      68% {
        height: 14px;
        border-color: currentColor;
        background: color-mix(in srgb, currentColor 20%, transparent);
        box-shadow: 0 0 4px color-mix(in srgb, currentColor 20%, transparent);
        transform: scaleY(1);
      }

      78%,
      84% {
        height: 14px;
        border-color: currentColor;
        background: color-mix(in srgb, currentColor 28%, transparent);
        box-shadow: 0 0 8px color-mix(in srgb, currentColor 40%, transparent);
        transform: scaleY(1.06);
      }

      92%,
      100% {
        height: 38px;
        border-color: color-mix(in srgb, currentColor 35%, transparent);
        background: color-mix(in srgb, currentColor 18%, transparent);
        box-shadow: none;
        transform: scaleY(1);
      }
    }

    @keyframes eq-column-2 {
      0% {
        height: 12px;
        border-color: color-mix(in srgb, currentColor 25%, transparent);
        opacity: 0.35;
      }

      12% {
        height: 42px;
        border-color: color-mix(in srgb, currentColor 35%, transparent);
        opacity: 0.6;
      }

      22% {
        height: 18px;
        border-color: color-mix(in srgb, currentColor 25%, transparent);
        opacity: 0.4;
      }

      36% {
        height: 22px;
        border-color: currentColor;
        opacity: 1;
        transform: scaleY(1.4);
      }

      42% {
        height: 26px;
        border-color: currentColor;
        opacity: 0.95;
        transform: scaleY(0.9);
      }

      48%,
      54% {
        height: 24px;
        border-color: currentColor;
        opacity: 0.9;
        transform: scaleY(1);
      }

      58% {
        height: 24px;
        border-color: currentColor;
        background: color-mix(in srgb, currentColor 28%, transparent);
        box-shadow: 0 0 8px color-mix(in srgb, currentColor 40%, transparent);
        transform: scaleY(1.06);
      }

      68% {
        height: 24px;
        border-color: currentColor;
        background: color-mix(in srgb, currentColor 20%, transparent);
        box-shadow: 0 0 4px color-mix(in srgb, currentColor 20%, transparent);
        transform: scaleY(1);
      }

      78%,
      84% {
        height: 24px;
        border-color: currentColor;
        background: color-mix(in srgb, currentColor 28%, transparent);
        box-shadow: 0 0 8px color-mix(in srgb, currentColor 40%, transparent);
        transform: scaleY(1.06);
      }

      92%,
      100% {
        height: 12px;
        border-color: color-mix(in srgb, currentColor 25%, transparent);
        background: color-mix(in srgb, currentColor 18%, transparent);
        box-shadow: none;
        transform: scaleY(1);
      }
    }

    @keyframes eq-column-3 {
      0% {
        height: 46px;
        border-color: color-mix(in srgb, currentColor 35%, transparent);
        opacity: 0.65;
      }

      10% {
        height: 22px;
        border-color: color-mix(in srgb, currentColor 25%, transparent);
        opacity: 0.4;
      }

      22% {
        height: 40px;
        border-color: color-mix(in srgb, currentColor 35%, transparent);
        opacity: 0.55;
      }

      44% {
        height: 32px;
        border-color: currentColor;
        opacity: 1;
        transform: scaleY(1.4);
      }

      50% {
        height: 36px;
        border-color: currentColor;
        opacity: 0.95;
        transform: scaleY(0.9);
      }

      54% {
        height: 34px;
        border-color: currentColor;
        opacity: 0.9;
        transform: scaleY(1);
      }

      58% {
        height: 34px;
        border-color: currentColor;
        background: color-mix(in srgb, currentColor 28%, transparent);
        box-shadow: 0 0 8px color-mix(in srgb, currentColor 40%, transparent);
        transform: scaleY(1.06);
      }

      68% {
        height: 34px;
        border-color: currentColor;
        background: color-mix(in srgb, currentColor 20%, transparent);
        box-shadow: 0 0 4px color-mix(in srgb, currentColor 20%, transparent);
        transform: scaleY(1);
      }

      78%,
      84% {
        height: 34px;
        border-color: currentColor;
        background: color-mix(in srgb, currentColor 28%, transparent);
        box-shadow: 0 0 8px color-mix(in srgb, currentColor 40%, transparent);
        transform: scaleY(1.06);
      }

      92%,
      100% {
        height: 46px;
        border-color: color-mix(in srgb, currentColor 35%, transparent);
        background: color-mix(in srgb, currentColor 18%, transparent);
        box-shadow: none;
        transform: scaleY(1);
      }
    }

    @keyframes eq-column-4 {
      0% {
        height: 20px;
        border-color: color-mix(in srgb, currentColor 25%, transparent);
        opacity: 0.4;
      }

      12% {
        height: 36px;
        border-color: color-mix(in srgb, currentColor 35%, transparent);
        opacity: 0.55;
      }

      22% {
        height: 16px;
        border-color: color-mix(in srgb, currentColor 25%, transparent);
        opacity: 0.35;
      }

      52% {
        height: 42px;
        border-color: currentColor;
        opacity: 1;
        transform: scaleY(1.35);
      }

      56% {
        height: 46px;
        border-color: currentColor;
        opacity: 0.95;
        transform: scaleY(0.92);
      }

      57% {
        height: 44px;
        border-color: currentColor;
        opacity: 0.9;
        transform: scaleY(1);
      }

      58% {
        height: 44px;
        border-color: currentColor;
        background: color-mix(in srgb, currentColor 28%, transparent);
        box-shadow: 0 0 8px color-mix(in srgb, currentColor 40%, transparent);
        transform: scaleY(1.06);
      }

      68% {
        height: 44px;
        border-color: currentColor;
        background: color-mix(in srgb, currentColor 20%, transparent);
        box-shadow: 0 0 4px color-mix(in srgb, currentColor 20%, transparent);
        transform: scaleY(1);
      }

      78%,
      84% {
        height: 44px;
        border-color: currentColor;
        background: color-mix(in srgb, currentColor 28%, transparent);
        box-shadow: 0 0 8px color-mix(in srgb, currentColor 40%, transparent);
        transform: scaleY(1.06);
      }

      92%,
      100% {
        height: 20px;
        border-color: color-mix(in srgb, currentColor 25%, transparent);
        background: color-mix(in srgb, currentColor 18%, transparent);
        box-shadow: none;
        transform: scaleY(1);
      }
    }

    .team {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
      background: transparent;
      border: 0
    }

    .member {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      flex-direction: column;
      gap: 18px;
      overflow: hidden;
      box-shadow: 0 16px 52px rgba(0, 0, 0, .06)
    }

    .ava {
      width: 94px;
      height: 94px;
      border-radius: 12px
    }

    .member .nm {
      font-size: 18px
    }

    @media(max-width:1100px) {
      .team {
        grid-template-columns: repeat(2, minmax(0, 1fr))
      }
    }

    @media(max-width:980px) {
      .flow.zigzag {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: auto;
        gap: 30px
      }

      .flow.zigzag .flow-row {
        grid-column: auto !important;
        grid-row: auto !important
      }

      .flow.zigzag .flow-row::after {
        display: none
      }

      .flow.process .process-row {
        grid-template-columns: 58px minmax(0, 1fr) 160px
      }
    }

    @media(max-width:720px) {
      .team {
        grid-template-columns: 1fr
      }

      .flow.zigzag {
        grid-template-columns: 1fr;
        padding: 20px
      }

      .flow.zigzag .flow-row {
        min-height: 210px
      }

      .flow.process {
        padding: 16px
      }

      .flow.process .process-row {
        grid-template-columns: 52px 1fr;
        min-height: 300px;
        padding: 18px 14px
      }

      .flow.process .flow-visual {
        grid-column: 2;
        width: 100%;
        height: 105px
      }

      .flow.process .process-row::after {
        display: none
      }

      .flow-index {
        overflow-x: auto
      }

      .flow-index .flow-status {
        display: none
      }
    }

    /* ===== r7: free node graph + horizontal process route ===== */
    .tour {
      width: 100%;
      max-width: 100%;
      min-width: 0;
      overflow: hidden
    }

    #capsTour {
      border: none !important;
      box-shadow: none !important;
      background: transparent !important;
    }

    #capsTour .flow-index {
      border-top: none !important;
      background: transparent !important;
    }

    #sec-process {
      border-top: none !important;
    }

    .graph-shell {
      position: relative;
      width: 100%;
      max-width: 100%;
      min-width: 0;
      overflow-x: auto;
      overflow-y: hidden;
      background: var(--bg);
      overscroll-behavior-inline: contain;
      -webkit-overflow-scrolling: touch
    }

    .node-graph {
      position: relative;
      width: 100%;
      min-width: 0;
      height: 700px;
      isolation: isolate;
      background-color: var(--bg);
      /* 4. Film Grain: 2% monochrome analog noise overlay across background */
      background-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%20200%20200%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cfilter%20id%3D%27n%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.85%27%20numOctaves%3D%273%27%20stitchTiles%3D%27stitch%27/%3E%3C/filter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23n%29%27%20opacity%3D%270.02%27/%3E%3C/svg%3E");
      background-repeat: repeat;
    }

    /* 1 & 2. Dot Matrix Grid (دات‌گرید) with Radial Masking (ماسک شعاعی) */
    .node-graph::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      background-image: radial-gradient(circle, color-mix(in srgb, var(--text) 22%, transparent) 1px, transparent 1.2px);
      background-size: 32px 32px;
      -webkit-mask-image: radial-gradient(ellipse 65% 55% at 50% 45%, black 20%, rgba(0, 0, 0, 0.65) 50%, transparent 82%);
      mask-image: radial-gradient(ellipse 65% 55% at 50% 45%, black 20%, rgba(0, 0, 0, 0.65) 50%, transparent 82%);
    }

    .node-graph::before {
      content: "SYSTEM CAPABILITY GRAPH";
      position: absolute;
      left: 34px;
      top: 26px;
      color: var(--faint);
      font: 9px/1 'IBM Plex Mono', monospace;
      letter-spacing: .18em;
      opacity: .72
    }

    html[dir="rtl"] .node-graph::before,
    html[lang="fa"] .node-graph::before {
      content: "نقشهٔ قابلیت‌های سیستم";
      font-family: var(--font-fa-head) !important;
      font-size: 11px;
      font-weight: 600;
      left: auto;
      right: 34px;
    }

    .graph-lines {
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none
    }

    .graph-link {
      position: absolute;
      height: 1px;
      transform-origin: 0 50%;
      background: var(--line2);
      opacity: .48;
      transition: background .45s, opacity .45s, box-shadow .45s;
      will-change: transform, width
    }

    .graph-link.secondary {
      display: none !important;
    }

    .graph-link.main {
      height: 1.5px;
      background: var(--line3);
      opacity: .8
    }

    .graph-link.main::after {
      display: none !important;
    }

    .graph-link.main.past,
    .graph-link.main.on {
      background: var(--text);
      opacity: 1;
      box-shadow: 0 0 12px color-mix(in srgb, var(--text) 35%, transparent)
    }

    .graph-link.main.past::after,
    .graph-link.main.on::after {
      display: none !important;
    }

    .graph-link.main.on {
      animation: link-breathe 1.8s ease-in-out infinite
    }

    .graph-link.main::before {
      content: "";
      position: absolute;
      left: 0;
      top: 50%;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--text);
      box-shadow: 0 0 10px var(--text);
      transform: translateY(-50%);
      animation: graph-packet 3.2s linear infinite;
      animation-delay: var(--delay, 0s)
    }

    @keyframes link-breathe {
      50% {
        opacity: .42
      }
    }

    @keyframes graph-packet {
      0% {
        left: 0;
        opacity: 0
      }

      12% {
        opacity: 1
      }

      88% {
        opacity: 1
      }

      100% {
        left: calc(100% - 6px);
        opacity: 0
      }
    }

    .graph-node {
      position: absolute;
      left: calc(var(--x)*1%);
      top: calc(var(--y)*1%);
      z-index: 2;
      width: 178px;
      padding: 0;
      transform: translate(-50%, -50%);
      appearance: none;
      border: 0;
      background: transparent;
      color: var(--faint);
      text-align: center;
      cursor: pointer;
      transition: color .4s, transform .45s var(--ease);
      font: inherit;
      overflow: visible;
    }

    .graph-node:hover {
      color: var(--text);
      transform: translate(-50%, -50%) translateY(-4px)
    }

    .graph-node.on {
      z-index: 10;
    }

    /* Glow returned to previous state per user request */
    .graph-node.on::before {
      display: none !important;
    }

    .graph-orb {
      width: 104px;
      height: 104px;
      margin: 0 auto 11px;
      display: grid;
      place-items: center;
      position: relative;
      z-index: 1;
      border: 1px solid var(--line2);
      border-radius: 28px;
      background: color-mix(in srgb, var(--bg) 88%, transparent);
      color: var(--text);
      box-shadow: 0 18px 48px rgba(0, 0, 0, .12);
      backdrop-filter: blur(8px);
      transition: border-color .4s, background .4s, color .4s, box-shadow .4s, transform .45s var(--ease)
    }

    .graph-orb::before {
      content: "";
      position: absolute;
      inset: -7px;
      border: 1px solid transparent;
      border-radius: 34px;
      transition: border-color .4s
    }

    .graph-node.on .graph-orb {
      border-color: var(--text);
      background: var(--text);
      color: var(--bg);
      transform: scale(1.08);
      box-shadow: 0 0 0 8px var(--line), 0 24px 60px rgba(0, 0, 0, .22);
    }

    .graph-node.on .graph-orb::before {
      border-color: var(--line3);
      animation: pulse 2.2s ease-out infinite
    }

    html[data-theme="light"] .graph-node.on .graph-orb {
      box-shadow: 0 0 0 8px var(--line), 0 16px 40px rgba(0, 0, 0, .12);
    }

    .graph-node.past .graph-orb {
      border-color: var(--dim);
      color: var(--dim)
    }

    .graph-orb .flow-visual {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 118px;
      height: 96px;
      border: 0;
      border-radius: 22px;
      background: transparent;
      transform: translate(-50%, -50%) scale(.8) !important;
      transform-origin: center;
      overflow: visible
    }

    .graph-node.on .graph-orb .flow-visual {
      transform: translate(-50%, -50%) scale(.84) !important
    }

    .graph-num {
      position: absolute;
      right: -9px;
      top: -9px;
      min-width: 27px;
      height: 27px;
      padding: 0 6px;
      border: 1px solid var(--line2);
      border-radius: 999px;
      background: var(--bg);
      display: grid;
      place-items: center;
      color: var(--faint);
      font: 700 9px/1 'IBM Plex Mono', monospace;
      letter-spacing: .08em;
      transition: all .4s
    }

    .graph-node.on .graph-num {
      background: var(--text);
      border-color: var(--text);
      color: var(--bg)
    }

    .graph-title {
      display: inline-block;
      color: var(--dim);
      font: 700 14px/1.35 'Space Grotesk', sans-serif;
      letter-spacing: .01em;
      transition: color .4s, font-weight .4s;
      background: var(--bg);
      padding: 3px 10px;
      border-radius: 8px;
      box-shadow: 0 0 12px 6px var(--bg);
      position: relative;
      z-index: 3;
      white-space: nowrap;
    }

    .graph-node.on .graph-title {
      color: var(--text);
      font-weight: 700
    }

    @media (min-width: 721px) {
      .graph-node {
        width: 104px;
        height: 104px;
      }

      .graph-node .graph-orb {
        margin: 0 auto;
      }

      .graph-node.top-node .graph-title {
        position: absolute;
        bottom: calc(100% + 14px);
        left: 50%;
        transform: translateX(-50%);
      }

      .graph-node.bottom-node .graph-title {
        position: absolute;
        top: calc(100% + 14px);
        left: 50%;
        transform: translateX(-50%);
      }
    }

    /* 5. Modern Glassmorphism Detail Card Container */
    .graph-detail {
      position: absolute;
      z-index: 1;
      left: 50%;
      bottom: 50px;
      width: min(640px, 72%);
      min-height: 118px;
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      padding: 24px 34px;
      color: var(--dim);
      border-radius: 20px;
      border: 1px solid rgba(255, 255, 255, 0.08);
      background: rgba(255, 255, 255, 0.02);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08);
      transition: all .4s var(--ease);
    }

    html[data-theme="light"] .graph-detail {
      border: 1px solid rgba(0, 0, 0, 0.08);
      background: rgba(0, 0, 0, 0.02);
      box-shadow: 0 14px 36px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    }

    .graph-detail::before,
    .graph-detail::after {
      display: none !important;
    }

    .graph-detail .detail-kicker {
      margin-bottom: 8px;
      color: var(--faint);
      font: 700 9.5px/1 'IBM Plex Mono', monospace;
      letter-spacing: .18em;
    }

    .graph-detail strong {
      color: var(--text);
      font: 700 clamp(19px, 2.2vw, 27px)/1.25 'Space Grotesk', sans-serif;
      margin-bottom: 2px;
    }

    .graph-detail p {
      width: 100%;
      max-width: 540px;
      margin: 8px auto 0 !important;
      color: color-mix(in srgb, var(--text) 82%, var(--faint));
      font-size: 13.5px;
      line-height: 1.85;
      text-align: center !important;
      text-align-last: center !important;
      text-justify: none;
      hyphens: auto;
    }

    html[dir="rtl"] .graph-detail p {
      text-align: center !important;
      text-align-last: center !important;
    }

    .graph-direction {
      position: absolute;
      z-index: 3;
      left: 50%;
      bottom: 18px;
      transform: translateX(-50%);
      display: flex;
      align-items: center;
      gap: 9px;
      color: var(--faint);
      font: 9px/1 'IBM Plex Mono', monospace;
      letter-spacing: .12em;
      white-space: nowrap
    }

    .graph-direction i {
      display: block;
      width: 76px;
      height: 1px;
      background: var(--line3);
      position: relative
    }

    .graph-direction i::after {
      content: "";
      position: absolute;
      right: 0;
      top: 50%;
      width: 6px;
      height: 6px;
      border-top: 1px solid var(--text);
      border-right: 1px solid var(--text);
      transform: translateY(-50%) rotate(45deg)
    }

    html[dir="rtl"] .graph-direction {
      direction: rtl !important;
    }

    html[dir="rtl"] .graph-direction i::after {
      right: auto;
      left: 0;
      border-right: none;
      border-top: 1px solid var(--text);
      border-left: 1px solid var(--text);
      transform: translateY(-50%) rotate(-45deg);
    }

    html[lang="fa"] .graph-title {
      font-family: var(--font-fa-head) !important;
      font-weight: 600 !important;
      font-size: 14px;
      line-height: 1.4 !important;
      letter-spacing: 0 !important;
      color: var(--zinc-400);
    }

    html[lang="fa"] .graph-node.on .graph-title,
    html[lang="fa"] .graph-node:hover .graph-title {
      color: var(--heading-white) !important;
    }

    html[lang="fa"] .graph-num,
    html[lang="fa"] .graph-direction,
    html[lang="fa"] .graph-direction * {
      font-family: var(--font-mono) !important;
      font-weight: 500 !important;
      letter-spacing: 0.08em !important;
      text-transform: uppercase !important;
      color: var(--zinc-500) !important;
    }

    html[lang="fa"] .graph-detail * {
      font-family: var(--font-fa-body) !important;
    }

    .process-shell {
      width: 100%;
      max-width: 100%;
      min-width: 0;
      overflow-x: auto;
      overflow-y: hidden;
      background: var(--surf);
      overscroll-behavior-inline: contain;
      -webkit-overflow-scrolling: touch
    }

    .process-tour {
      width: 100%;
      min-width: 0;
      padding: clamp(34px, 4vw, 58px)
    }

    .process-track {
      display: grid;
      grid-template-columns: repeat(4, minmax(122px, 1fr) 58px) minmax(122px, 1fr);
      align-items: start;
    }

    .process-node {
      appearance: none;
      border: 0;
      background: transparent;
      color: var(--faint);
      padding: 0;
      cursor: pointer;
      text-align: center;
      font: inherit;
      transition: color .4s, transform .45s var(--ease)
    }

    .process-node:hover {
      color: var(--text);
      transform: translateY(-4px)
    }

    .process-node .flow-visual {
      width: 92px;
      height: 76px;
      margin: 0 auto 14px;
      border-radius: 24px;
      color: inherit
    }

    .process-node.on .flow-visual {
      color: var(--bg);
      background: var(--text);
      border-color: var(--text);
      transform: scale(1.06)
    }

    .process-node .process-num {
      display: block;
      margin-bottom: 7px;
      color: inherit;
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .process-node .process-title {
      display: block;
      color: var(--dim);
      font-family: var(--font-ui);
      font-size: 15px;
      font-weight: 600;
      line-height: 1.35;
      white-space: nowrap;
    }

    .process-node.on .process-num,
    .process-node.on .process-title {
      color: var(--text);
      font-weight: 700
    }

    .process-arrow {
      height: 1.5px;
      background: var(--line2);
      position: relative;
      margin: 38px 8px 0;
      align-self: start;
      transition: background .45s, box-shadow .45s
    }

    .process-arrow::after {
      content: "";
      position: absolute;
      right: 0;
      top: 50%;
      width: 7px;
      height: 7px;
      border-top: 1.5px solid var(--dim);
      border-right: 1.5px solid var(--dim);
      transform: translateY(-50%) rotate(45deg);
      transition: border-color .45s
    }

    .process-arrow.past,
    .process-arrow.on {
      background: var(--text);
      box-shadow: 0 0 12px color-mix(in srgb, var(--text) 30%, transparent)
    }

    .process-arrow.past::after,
    .process-arrow.on::after {
      border-color: var(--text)
    }

    .process-arrow.on::before {
      content: "";
      position: absolute;
      left: 0;
      top: -2px;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--text);
      animation: arrow-packet 1.4s linear infinite
    }

    @keyframes arrow-packet {
      to {
        left: calc(100% - 5px)
      }
    }

    .process-stage {
      margin-top: 46px;
      min-height: 220px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) 210px;
      gap: 42px;
      align-items: center;
      padding: 34px 40px;
      border: 1px solid var(--line2);
      border-radius: 22px;
      background: var(--bg);
      box-shadow: 0 22px 65px rgba(0, 0, 0, .09)
    }

    .process-stage .stage-kicker {
      display: block;
      margin-bottom: 10px;
      color: var(--faint);
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .process-stage h3 {
      margin: 0;
      color: var(--heading-white);
      font-family: var(--font-ui);
      font-size: clamp(22px, 2.6vw, 32px);
      font-weight: 700;
      line-height: 1.15;
      letter-spacing: -0.02em;
    }

    .process-stage p {
      max-width: 760px;
      margin: 11px 0 0 !important;
      color: var(--dim);
      font-size: 14.5px;
      line-height: 1.75;
    }

    .process-stage .flow-kv {
      margin-top: 16px
    }

    .process-stage .stage-visual {
      width: 170px;
      height: 138px;
      justify-self: end;
      border-radius: 32px;
      color: var(--text)
    }

    /* =========================================================
     STAGE VISUAL SCALING (Large Screen Stage Showcase)
     ========================================================= */
    /* 1. Assess (Radar) Stage Scaling */
    .stage-visual[data-icon="assess"] b {
      width: 82px;
      height: 82px;
      border-width: 2px;
    }

    .stage-visual[data-icon="assess"] b::before {
      width: 40px;
      height: 2px;
    }

    .stage-visual[data-icon="assess"] i {
      width: 7px;
      height: 7px;
    }

    .stage-visual[data-icon="assess"] i:nth-child(1) {
      --dx: 22px;
      --dy: 16px;
    }

    .stage-visual[data-icon="assess"] i:nth-child(2) {
      --dx: -20px;
      --dy: 18px;
    }

    .stage-visual[data-icon="assess"] i:nth-child(3) {
      --dx: -18px;
      --dy: -20px;
    }

    .stage-visual[data-icon="assess"] i:nth-child(4) {
      --dx: 18px;
      --dy: -20px;
    }

    /* 2. Architect (Blueprint) Stage Scaling */
    .stage-visual[data-icon="architect"] b {
      left: 10%;
      right: 10%;
      top: 10%;
      bottom: 10%;
      border-width: 1.5px;
      width: auto;
      height: auto;
    }

    .stage-visual[data-icon="architect"] b::before {
      font-size: 11px;
      left: -6px;
      top: -8px;
    }

    .stage-visual[data-icon="architect"] b::after {
      font-size: 11px;
      right: -6px;
      bottom: -8px;
    }

    .stage-visual[data-icon="architect"] i:nth-child(1) {
      top: 22%;
      width: 46%;
      height: 16%;
      border-width: 1.5px;
      border-radius: 3px;
    }

    .stage-visual[data-icon="architect"] i:nth-child(2) {
      top: 44%;
      width: 68%;
      height: 18%;
      border-width: 1.5px;
      border-radius: 3px;
    }

    .stage-visual[data-icon="architect"] i:nth-child(3) {
      top: 66%;
      width: 56%;
      height: 16%;
      border-width: 1.5px;
      border-radius: 3px;
    }

    .stage-visual[data-icon="architect"] i:nth-child(4) {
      top: 8%;
      bottom: 8%;
      width: 2px;
    }

    /* 3. Build & Code (IDE Window) Stage Scaling */
    .stage-visual[data-icon="build"] b,
    .stage-visual[data-icon="code"] b {
      left: 10%;
      right: 10%;
      top: 10%;
      bottom: 10%;
      border-width: 1.5px;
      border-radius: 6px;
      width: auto;
      height: auto;
    }

    .stage-visual[data-icon="build"] b::before,
    .stage-visual[data-icon="code"] b::before {
      left: 8px;
      top: 6px;
      width: 4.5px;
      height: 4.5px;
      box-shadow: 7px 0 0 currentColor, 14px 0 0 currentColor;
      height: 4.5px;
    }

    .stage-visual[data-icon="build"] b::after,
    .stage-visual[data-icon="code"] b::after {
      top: 15px;
      height: 1px;
    }

    .stage-visual[data-icon="build"] i,
    .stage-visual[data-icon="code"] i {
      height: 3px;
      border-radius: 1.5px;
    }

    .stage-visual[data-icon="build"] i:nth-child(1),
    .stage-visual[data-icon="code"] i:nth-child(1) {
      left: 18%;
      top: 30%;
      width: 44%;
    }

    .stage-visual[data-icon="build"] i:nth-child(2),
    .stage-visual[data-icon="code"] i:nth-child(2) {
      left: 26%;
      top: 46%;
      width: 50%;
    }

    .stage-visual[data-icon="build"] i:nth-child(3),
    .stage-visual[data-icon="code"] i:nth-child(3) {
      left: 34%;
      top: 62%;
      width: 34%;
    }

    .stage-visual[data-icon="build"] i:nth-child(4),
    .stage-visual[data-icon="code"] i:nth-child(4) {
      left: 26%;
      top: 78%;
      width: 26%;
    }

    .stage-visual[data-icon="build"] i:nth-child(4)::after,
    .stage-visual[data-icon="code"] i:nth-child(4)::after {
      width: 2.5px;
      height: 9px;
      right: -6px;
      top: -3px;
    }

    /* 4. Integrate / Link (3D Prism Cube) Stage Scaling */
    .stage-visual[data-icon="link"],
    .stage-visual[data-icon="integrate"] {
      perspective: 800px;
    }

    .stage-visual[data-icon="link"] b,
    .stage-visual[data-icon="integrate"] b {
      width: 22px;
      height: 22px;
      margin-left: -11px;
      margin-top: -11px;
    }

    .stage-visual[data-icon="link"] b::before,
    .stage-visual[data-icon="integrate"] b::before {
      inset: -9px;
    }

    .stage-visual[data-icon="link"] b::after,
    .stage-visual[data-icon="integrate"] b::after {
      inset: -15px;
    }

    .stage-visual[data-icon="link"] i:nth-child(1),
    .stage-visual[data-icon="link"] i:nth-child(2),
    .stage-visual[data-icon="link"] i:nth-child(3),
    .stage-visual[data-icon="integrate"] i:nth-child(1),
    .stage-visual[data-icon="integrate"] i:nth-child(2),
    .stage-visual[data-icon="integrate"] i:nth-child(3) {
      width: 48px;
      height: 48px;
      margin-left: -24px;
      margin-top: -24px;
      border-width: 2px;
    }

    .stage-visual[data-icon="link"] i:nth-child(4),
    .stage-visual[data-icon="integrate"] i:nth-child(4) {
      width: 9px;
      height: 9px;
      margin-left: -4.5px;
      margin-top: -4.5px;
    }

    @keyframes prism-facet-top-stage {

      0%,
      18% {
        transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 0, 72px) rotateZ(35deg);
        opacity: 0.35;
        border-radius: 8px;
        box-shadow: none;
      }

      38% {
        transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 0, 24px) rotateZ(0deg);
        opacity: 0.95;
        border-radius: 0px;
        box-shadow: 0 0 16px color-mix(in srgb, currentColor 45%, transparent);
      }

      48% {
        transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 0, 27px) rotateZ(0deg);
        opacity: 1;
        box-shadow: 0 0 24px color-mix(in srgb, currentColor 65%, transparent);
      }

      58% {
        transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 0, 24px) rotateZ(0deg);
        opacity: 0.9;
        box-shadow: 0 0 10px color-mix(in srgb, currentColor 30%, transparent);
      }

      68% {
        transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 0, 28px) rotateZ(0deg);
        opacity: 1;
        box-shadow: 0 0 28px color-mix(in srgb, currentColor 75%, transparent);
      }

      78%,
      82% {
        transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 0, 24px) rotateZ(0deg);
        opacity: 0.92;
        box-shadow: 0 0 14px color-mix(in srgb, currentColor 35%, transparent);
        border-radius: 0px;
      }

      92%,
      100% {
        transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 0, 72px) rotateZ(35deg);
        opacity: 0.35;
        border-radius: 8px;
        box-shadow: none;
      }
    }

    @keyframes prism-facet-left-stage {

      0%,
      18% {
        transform: rotateX(60deg) rotateZ(45deg) rotateY(90deg) translate3d(0, 0, 72px) rotateX(-35deg);
        opacity: 0.35;
        border-radius: 8px;
        box-shadow: none;
      }

      38% {
        transform: rotateX(60deg) rotateZ(45deg) rotateY(90deg) translate3d(0, 0, 24px) rotateX(0deg);
        opacity: 0.95;
        border-radius: 0px;
        box-shadow: 0 0 14px color-mix(in srgb, currentColor 40%, transparent);
      }

      48% {
        transform: rotateX(60deg) rotateZ(45deg) rotateY(90deg) translate3d(0, 0, 27px) rotateX(0deg);
        opacity: 1;
        box-shadow: 0 0 22px color-mix(in srgb, currentColor 60%, transparent);
      }

      58% {
        transform: rotateX(60deg) rotateZ(45deg) rotateY(90deg) translate3d(0, 0, 24px) rotateX(0deg);
        opacity: 0.88;
        box-shadow: 0 0 8px color-mix(in srgb, currentColor 25%, transparent);
      }

      68% {
        transform: rotateX(60deg) rotateZ(45deg) rotateY(90deg) translate3d(0, 0, 28px) rotateX(0deg);
        opacity: 1;
        box-shadow: 0 0 26px color-mix(in srgb, currentColor 70%, transparent);
      }

      78%,
      82% {
        transform: rotateX(60deg) rotateZ(45deg) rotateY(90deg) translate3d(0, 0, 24px) rotateX(0deg);
        opacity: 0.9;
        box-shadow: 0 0 12px color-mix(in srgb, currentColor 30%, transparent);
        border-radius: 0px;
      }

      92%,
      100% {
        transform: rotateX(60deg) rotateZ(45deg) rotateY(90deg) translate3d(0, 0, 72px) rotateX(-35deg);
        opacity: 0.35;
        border-radius: 8px;
        box-shadow: none;
      }
    }

    @keyframes prism-facet-right-stage {

      0%,
      18% {
        transform: rotateX(60deg) rotateZ(45deg) rotateX(-90deg) translate3d(0, 0, 72px) rotateY(35deg);
        opacity: 0.35;
        border-radius: 8px;
        box-shadow: none;
      }

      38% {
        transform: rotateX(60deg) rotateZ(45deg) rotateX(-90deg) translate3d(0, 0, 24px) rotateY(0deg);
        opacity: 0.95;
        border-radius: 0px;
        box-shadow: 0 0 14px color-mix(in srgb, currentColor 40%, transparent);
      }

      48% {
        transform: rotateX(60deg) rotateZ(45deg) rotateX(-90deg) translate3d(0, 0, 27px) rotateY(0deg);
        opacity: 1;
        box-shadow: 0 0 22px color-mix(in srgb, currentColor 60%, transparent);
      }

      58% {
        transform: rotateX(60deg) rotateZ(45deg) rotateX(-90deg) translate3d(0, 0, 24px) rotateY(0deg);
        opacity: 0.88;
        box-shadow: 0 0 8px color-mix(in srgb, currentColor 25%, transparent);
      }

      68% {
        transform: rotateX(60deg) rotateZ(45deg) rotateX(-90deg) translate3d(0, 0, 28px) rotateY(0deg);
        opacity: 1;
        box-shadow: 0 0 26px color-mix(in srgb, currentColor 70%, transparent);
      }

      78%,
      82% {
        transform: rotateX(60deg) rotateZ(45deg) rotateX(-90deg) translate3d(0, 0, 24px) rotateY(0deg);
        opacity: 0.9;
        box-shadow: 0 0 12px color-mix(in srgb, currentColor 30%, transparent);
        border-radius: 0px;
      }

      92%,
      100% {
        transform: rotateX(60deg) rotateZ(45deg) rotateX(-90deg) translate3d(0, 0, 72px) rotateY(35deg);
        opacity: 0.35;
        border-radius: 8px;
        box-shadow: none;
      }
    }

    .stage-visual[data-icon="link"] i:nth-child(1),
    .stage-visual[data-icon="integrate"] i:nth-child(1) {
      animation-name: prism-facet-top-stage;
    }

    .stage-visual[data-icon="link"] i:nth-child(2),
    .stage-visual[data-icon="integrate"] i:nth-child(2) {
      animation-name: prism-facet-left-stage;
    }

    .stage-visual[data-icon="link"] i:nth-child(3),
    .stage-visual[data-icon="integrate"] i:nth-child(3) {
      animation-name: prism-facet-right-stage;
    }

    /* 5. Optimize (Equalizer Calibration) Stage Scaling (Adaptive Monochrome) */
    .stage-visual[data-icon="optimize"] b {
      height: 3px;
      left: 12%;
      right: 12%;
      bottom: 18%;
    }

    .stage-visual[data-icon="optimize"] b::before {
      top: -4px;
      width: 8px;
      height: 11px;
      background: currentColor;
      box-shadow: 0 0 10px currentColor, 0 0 16px currentColor;
    }

    .stage-visual[data-icon="optimize"] b::after {
      background: currentColor;
      box-shadow: 0 0 14px currentColor;
    }

    .stage-visual[data-icon="optimize"] i {
      width: 18px;
      bottom: 18%;
      border-radius: 5px 5px 2px 2px;
      background: color-mix(in srgb, currentColor 18%, transparent);
      border: 1.5px solid color-mix(in srgb, currentColor 45%, transparent);
    }

    .stage-visual[data-icon="optimize"] i::after {
      height: 4px;
      border-radius: 5px 5px 0 0;
    }

    .stage-visual[data-icon="optimize"] i:nth-child(1) {
      left: 18%;
      animation-name: eq-column-1-stage;
    }

    .stage-visual[data-icon="optimize"] i:nth-child(2) {
      left: 38%;
      animation-name: eq-column-2-stage;
    }

    .stage-visual[data-icon="optimize"] i:nth-child(3) {
      left: 58%;
      animation-name: eq-column-3-stage;
    }

    .stage-visual[data-icon="optimize"] i:nth-child(4) {
      left: 78%;
      animation-name: eq-column-4-stage;
    }

    @keyframes eq-column-1-stage {
      0% {
        height: 60px;
        border-color: color-mix(in srgb, currentColor 35%, transparent);
        opacity: 0.5;
      }

      10% {
        height: 22px;
        border-color: color-mix(in srgb, currentColor 25%, transparent);
        opacity: 0.35;
      }

      20% {
        height: 50px;
        border-color: color-mix(in srgb, currentColor 35%, transparent);
        opacity: 0.55;
      }

      28% {
        height: 20px;
        border-color: currentColor;
        opacity: 1;
        transform: scaleY(1.4);
      }

      34% {
        height: 26px;
        border-color: currentColor;
        opacity: 0.95;
        transform: scaleY(0.9);
      }

      40%,
      54% {
        height: 24px;
        border-color: currentColor;
        opacity: 0.9;
        transform: scaleY(1);
      }

      58% {
        height: 24px;
        border-color: currentColor;
        background: color-mix(in srgb, currentColor 28%, transparent);
        box-shadow: 0 0 12px color-mix(in srgb, currentColor 45%, transparent);
        transform: scaleY(1.06);
      }

      68% {
        height: 24px;
        border-color: currentColor;
        background: color-mix(in srgb, currentColor 20%, transparent);
        box-shadow: 0 0 6px color-mix(in srgb, currentColor 25%, transparent);
        transform: scaleY(1);
      }

      78%,
      84% {
        height: 24px;
        border-color: currentColor;
        background: color-mix(in srgb, currentColor 28%, transparent);
        box-shadow: 0 0 12px color-mix(in srgb, currentColor 45%, transparent);
        transform: scaleY(1.06);
      }

      92%,
      100% {
        height: 60px;
        border-color: color-mix(in srgb, currentColor 35%, transparent);
        background: color-mix(in srgb, currentColor 18%, transparent);
        box-shadow: none;
        transform: scaleY(1);
      }
    }

    @keyframes eq-column-2-stage {
      0% {
        height: 20px;
        border-color: color-mix(in srgb, currentColor 25%, transparent);
        opacity: 0.35;
      }

      12% {
        height: 68px;
        border-color: color-mix(in srgb, currentColor 35%, transparent);
        opacity: 0.6;
      }

      22% {
        height: 28px;
        border-color: color-mix(in srgb, currentColor 25%, transparent);
        opacity: 0.4;
      }

      36% {
        height: 38px;
        border-color: currentColor;
        opacity: 1;
        transform: scaleY(1.4);
      }

      42% {
        height: 46px;
        border-color: currentColor;
        opacity: 0.95;
        transform: scaleY(0.9);
      }

      48%,
      54% {
        height: 42px;
        border-color: currentColor;
        opacity: 0.9;
        transform: scaleY(1);
      }

      58% {
        height: 42px;
        border-color: currentColor;
        background: color-mix(in srgb, currentColor 28%, transparent);
        box-shadow: 0 0 12px color-mix(in srgb, currentColor 45%, transparent);
        transform: scaleY(1.06);
      }

      68% {
        height: 42px;
        border-color: currentColor;
        background: color-mix(in srgb, currentColor 20%, transparent);
        box-shadow: 0 0 6px color-mix(in srgb, currentColor 25%, transparent);
        transform: scaleY(1);
      }

      78%,
      84% {
        height: 42px;
        border-color: currentColor;
        background: color-mix(in srgb, currentColor 28%, transparent);
        box-shadow: 0 0 12px color-mix(in srgb, currentColor 45%, transparent);
        transform: scaleY(1.06);
      }

      92%,
      100% {
        height: 20px;
        border-color: color-mix(in srgb, currentColor 25%, transparent);
        background: color-mix(in srgb, currentColor 18%, transparent);
        box-shadow: none;
        transform: scaleY(1);
      }
    }

    @keyframes eq-column-3-stage {
      0% {
        height: 74px;
        border-color: color-mix(in srgb, currentColor 35%, transparent);
        opacity: 0.65;
      }

      10% {
        height: 34px;
        border-color: color-mix(in srgb, currentColor 25%, transparent);
        opacity: 0.4;
      }

      22% {
        height: 64px;
        border-color: color-mix(in srgb, currentColor 35%, transparent);
        opacity: 0.55;
      }

      44% {
        height: 56px;
        border-color: currentColor;
        opacity: 1;
        transform: scaleY(1.4);
      }

      50% {
        height: 64px;
        border-color: currentColor;
        opacity: 0.95;
        transform: scaleY(0.9);
      }

      54% {
        height: 60px;
        border-color: currentColor;
        opacity: 0.9;
        transform: scaleY(1);
      }

      58% {
        height: 60px;
        border-color: currentColor;
        background: color-mix(in srgb, currentColor 28%, transparent);
        box-shadow: 0 0 12px color-mix(in srgb, currentColor 45%, transparent);
        transform: scaleY(1.06);
      }

      68% {
        height: 60px;
        border-color: currentColor;
        background: color-mix(in srgb, currentColor 20%, transparent);
        box-shadow: 0 0 6px color-mix(in srgb, currentColor 25%, transparent);
        transform: scaleY(1);
      }

      78%,
      84% {
        height: 60px;
        border-color: currentColor;
        background: color-mix(in srgb, currentColor 28%, transparent);
        box-shadow: 0 0 12px color-mix(in srgb, currentColor 45%, transparent);
        transform: scaleY(1.06);
      }

      92%,
      100% {
        height: 74px;
        border-color: color-mix(in srgb, currentColor 35%, transparent);
        background: color-mix(in srgb, currentColor 18%, transparent);
        box-shadow: none;
        transform: scaleY(1);
      }
    }

    @keyframes eq-column-4-stage {
      0% {
        height: 30px;
        border-color: color-mix(in srgb, currentColor 25%, transparent);
        opacity: 0.4;
      }

      12% {
        height: 60px;
        border-color: color-mix(in srgb, currentColor 35%, transparent);
        opacity: 0.55;
      }

      22% {
        height: 26px;
        border-color: color-mix(in srgb, currentColor 25%, transparent);
        opacity: 0.35;
      }

      52% {
        height: 74px;
        border-color: currentColor;
        opacity: 1;
        transform: scaleY(1.35);
      }

      56% {
        height: 82px;
        border-color: currentColor;
        opacity: 0.95;
        transform: scaleY(0.92);
      }

      57% {
        height: 78px;
        border-color: currentColor;
        opacity: 0.9;
        transform: scaleY(1);
      }

      58% {
        height: 78px;
        border-color: currentColor;
        background: color-mix(in srgb, currentColor 28%, transparent);
        box-shadow: 0 0 12px color-mix(in srgb, currentColor 45%, transparent);
        transform: scaleY(1.06);
      }

      68% {
        height: 78px;
        border-color: currentColor;
        background: color-mix(in srgb, currentColor 20%, transparent);
        box-shadow: 0 0 6px color-mix(in srgb, currentColor 25%, transparent);
        transform: scaleY(1);
      }

      78%,
      84% {
        height: 78px;
        border-color: currentColor;
        background: color-mix(in srgb, currentColor 28%, transparent);
        box-shadow: 0 0 12px color-mix(in srgb, currentColor 45%, transparent);
        transform: scaleY(1.06);
      }

      92%,
      100% {
        height: 30px;
        border-color: color-mix(in srgb, currentColor 25%, transparent);
        background: color-mix(in srgb, currentColor 18%, transparent);
        box-shadow: none;
        transform: scaleY(1);
      }
    }

    /* Capabilities Icons Stage Scaling */
    /* Capabilities Icons Stage Scaling — Holographic Brain Mesh */
    .stage-visual[data-icon="ai"] b {
      width: 54px;
      height: 44px;
      margin: -22px 0 0 -27px;
      border-radius: 20px 27px 13px 11px;
      border-width: 2px;
    }

    .stage-visual[data-icon="ai"] b::before {
      width: 104px;
      height: 104px;
      margin: -52px 0 0 -52px;
      border-width: 2px;
    }

    .stage-visual[data-icon="ai"] i {
      width: 27px;
      height: 22px;
      border-width: 2px;
    }

    .stage-visual[data-icon="ai"] i::before {
      width: 6px;
      height: 6px;
    }

    .stage-visual[data-icon="ai"] i:nth-child(1) {
      border-radius: 5px 24px 3px 3px;
      animation-name: holo-lobe-piece-1-stage;
    }

    .stage-visual[data-icon="ai"] i:nth-child(1)::before {
      right: -8px;
      top: -8px;
    }

    .stage-visual[data-icon="ai"] i:nth-child(2) {
      border-radius: 3px 5px 14px 5px;
      animation-name: holo-lobe-piece-2-stage;
    }

    .stage-visual[data-icon="ai"] i:nth-child(2)::before {
      right: -8px;
      bottom: -8px;
    }

    .stage-visual[data-icon="ai"] i:nth-child(3) {
      border-radius: 3px 3px 8px 16px;
      animation-name: holo-lobe-piece-3-stage;
    }

    .stage-visual[data-icon="ai"] i:nth-child(3)::before {
      left: -8px;
      bottom: -8px;
    }

    .stage-visual[data-icon="ai"] i:nth-child(4) {
      border-radius: 21px 5px 3px 3px;
      animation-name: holo-lobe-piece-4-stage;
    }

    .stage-visual[data-icon="ai"] i:nth-child(4)::before {
      left: -8px;
      top: -8px;
    }

    @keyframes holo-lobe-piece-1-stage {
      0% {
        transform: translate3d(22px, -28px, 16px) rotate(12deg);
        opacity: 0.85;
      }

      15% {
        transform: translate3d(25px, -25px, 14px) rotate(8deg);
        opacity: 0.92;
      }

      30% {
        transform: translate3d(22px, -28px, 16px) rotate(12deg);
        opacity: 0.88;
      }

      44%,
      82% {
        transform: translate3d(0px, -22px, 0px) rotate(0deg);
        background-color: color-mix(in srgb, currentColor 50%, var(--surf));
        box-shadow: 0 0 16px currentColor, inset 0 0 8px currentColor;
        opacity: 1;
      }

      92%,
      100% {
        transform: translate3d(22px, -28px, 16px) rotate(12deg);
        background-color: color-mix(in srgb, currentColor 32%, var(--surf));
        box-shadow: 0 0 8px color-mix(in srgb, currentColor 40%, transparent);
        opacity: 0.85;
      }
    }

    @keyframes holo-lobe-piece-2-stage {
      0% {
        transform: translate3d(22px, 28px, 16px) rotate(-12deg);
        opacity: 0.85;
      }

      15% {
        transform: translate3d(25px, 25px, 14px) rotate(-8deg);
        opacity: 0.92;
      }

      30% {
        transform: translate3d(22px, 28px, 16px) rotate(-12deg);
        opacity: 0.88;
      }

      44%,
      82% {
        transform: translate3d(0px, 0px, 0px) rotate(0deg);
        background-color: color-mix(in srgb, currentColor 50%, var(--surf));
        box-shadow: 0 0 16px currentColor, inset 0 0 8px currentColor;
        opacity: 1;
      }

      92%,
      100% {
        transform: translate3d(22px, 28px, 16px) rotate(-12deg);
        background-color: color-mix(in srgb, currentColor 32%, var(--surf));
        box-shadow: 0 0 8px color-mix(in srgb, currentColor 40%, transparent);
        opacity: 0.85;
      }
    }

    @keyframes holo-lobe-piece-3-stage {
      0% {
        transform: translate3d(-27px, 28px, 16px) rotate(12deg);
        opacity: 0.85;
      }

      15% {
        transform: translate3d(-25px, 25px, 14px) rotate(8deg);
        opacity: 0.92;
      }

      30% {
        transform: translate3d(-27px, 28px, 16px) rotate(12deg);
        opacity: 0.88;
      }

      44%,
      82% {
        transform: translate3d(-27px, 0px, 0px) rotate(0deg);
        background-color: color-mix(in srgb, currentColor 50%, var(--surf));
        box-shadow: 0 0 16px currentColor, inset 0 0 8px currentColor;
        opacity: 1;
      }

      92%,
      100% {
        transform: translate3d(-27px, 28px, 16px) rotate(12deg);
        background-color: color-mix(in srgb, currentColor 32%, var(--surf));
        box-shadow: 0 0 8px color-mix(in srgb, currentColor 40%, transparent);
        opacity: 0.85;
      }
    }

    @keyframes holo-lobe-piece-4-stage {
      0% {
        transform: translate3d(-27px, -28px, 16px) rotate(-12deg);
        opacity: 0.85;
      }

      15% {
        transform: translate3d(-25px, -25px, 14px) rotate(-8deg);
        opacity: 0.92;
      }

      30% {
        transform: translate3d(-27px, -28px, 16px) rotate(-12deg);
        opacity: 0.88;
      }

      44%,
      82% {
        transform: translate3d(-27px, -22px, 0px) rotate(0deg);
        background-color: color-mix(in srgb, currentColor 50%, var(--surf));
        box-shadow: 0 0 16px currentColor, inset 0 0 8px currentColor;
        opacity: 1;
      }

      92%,
      100% {
        transform: translate3d(-27px, -28px, 16px) rotate(-12deg);
        background-color: color-mix(in srgb, currentColor 32%, var(--surf));
        box-shadow: 0 0 8px color-mix(in srgb, currentColor 40%, transparent);
        opacity: 0.85;
      }
    }

    .stage-visual[data-icon="data"] i {
      width: 13px;
    }

    /* Quantitative ML Stage Scaling — Matrix Decryption & Signal Extraction */
    .stage-visual[data-icon="quant"] b {
      left: 12px;
      right: 12px;
      height: 3px;
      animation-name: matrix-neovision-scanner-stage;
    }

    .stage-visual[data-icon="quant"] i {
      width: 22px;
      bottom: 26px;
      border-radius: 4px 4px 0 0;
    }

    .stage-visual[data-icon="quant"] i::before {
      height: 60px;
    }

    .stage-visual[data-icon="quant"] i:nth-child(1) {
      animation-name: matrix-bar-extract-1-stage;
    }

    .stage-visual[data-icon="quant"] i:nth-child(2) {
      animation-name: matrix-bar-extract-2-stage;
    }

    .stage-visual[data-icon="quant"] i:nth-child(3) {
      animation-name: matrix-bar-extract-3-stage;
    }

    .stage-visual[data-icon="quant"] i:nth-child(4) {
      animation-name: matrix-bar-extract-4-stage;
    }

    @keyframes matrix-neovision-scanner-stage {

      0%,
      6% {
        top: 12px;
        opacity: 0;
        transform: scaleX(0.1);
      }

      14% {
        top: 16px;
        opacity: 1;
        transform: scaleX(1);
        box-shadow: 0 0 16px currentColor, 0 0 32px currentColor;
      }

      28% {
        top: 38px;
        opacity: 1;
      }

      44% {
        top: 68px;
        opacity: 1;
      }

      60% {
        top: 96px;
        opacity: 1;
      }

      70%,
      82% {
        top: 118px;
        opacity: 1;
        box-shadow: 0 0 20px currentColor, 0 0 40px currentColor;
      }

      90% {
        top: 118px;
        opacity: 0.5;
        transform: scaleX(1);
      }

      96%,
      100% {
        top: 118px;
        opacity: 0;
        transform: scaleX(0.1);
      }
    }

    @keyframes matrix-bar-extract-1-stage {

      0%,
      30% {
        height: 0px;
        opacity: 0;
      }

      40% {
        height: 12px;
        opacity: 0.75;
      }

      58% {
        height: 44px;
        opacity: 1;
      }

      70%,
      88% {
        height: 44px;
        opacity: 1;
        box-shadow: 0 0 10px currentColor;
      }

      95%,
      100% {
        height: 0px;
        opacity: 0;
      }
    }

    @keyframes matrix-bar-extract-2-stage {

      0%,
      20% {
        height: 0px;
        opacity: 0;
      }

      30% {
        height: 22px;
        opacity: 0.8;
      }

      52% {
        height: 84px;
        opacity: 1;
      }

      70%,
      88% {
        height: 84px;
        opacity: 1;
        box-shadow: 0 0 16px currentColor, 0 0 32px currentColor;
      }

      95%,
      100% {
        height: 0px;
        opacity: 0;
      }
    }

    @keyframes matrix-bar-extract-3-stage {

      0%,
      24% {
        height: 0px;
        opacity: 0;
      }

      34% {
        height: 16px;
        opacity: 0.75;
      }

      54% {
        height: 64px;
        opacity: 1;
      }

      70%,
      88% {
        height: 64px;
        opacity: 1;
        box-shadow: 0 0 12px currentColor;
      }

      95%,
      100% {
        height: 0px;
        opacity: 0;
      }
    }

    @keyframes matrix-bar-extract-4-stage {

      0%,
      30% {
        height: 0px;
        opacity: 0;
      }

      40% {
        height: 12px;
        opacity: 0.75;
      }

      58% {
        height: 44px;
        opacity: 1;
      }

      70%,
      88% {
        height: 44px;
        opacity: 1;
        box-shadow: 0 0 10px currentColor;
      }

      95%,
      100% {
        height: 0px;
        opacity: 0;
      }
    }

    /* Automation Stage Scaling — Haute Horlogerie Mechanical Gear Train */
    .stage-visual[data-icon="automation"]::before {
      width: 116px;
      height: 116px;
      margin: -58px 0 0 -58px;
      border-width: 2px;
    }

    .stage-visual[data-icon="automation"]::after {
      width: 128px;
      height: 128px;
      margin: -64px 0 0 -64px;
    }

    .stage-visual[data-icon="automation"] b {
      width: 48px;
      height: 48px;
      margin: -24px 0 0 -24px;
    }

    .stage-visual[data-icon="automation"] b::before {
      width: 10px;
      height: 10px;
      margin: -5px 0 0 -5px;
    }

    .stage-visual[data-icon="automation"] b::after {
      width: 22px;
      height: 22px;
      margin: -11px 0 0 -11px;
      border-radius: 50%;
      border: 2px solid color-mix(in srgb, currentColor 60%, transparent);
      background: transparent;
    }

    .stage-visual[data-icon="automation"] i:nth-child(1),
    .stage-visual[data-icon="automation"] i:nth-child(2),
    .stage-visual[data-icon="automation"] i:nth-child(3) {
      width: 28px;
      height: 28px;
      margin: -14px 0 0 -14px;
    }

    .stage-visual[data-icon="automation"] i:nth-child(1)::before,
    .stage-visual[data-icon="automation"] i:nth-child(2)::before,
    .stage-visual[data-icon="automation"] i:nth-child(3)::before {
      width: 6px;
      height: 6px;
      margin: -3px 0 0 -3px;
    }

    .stage-visual[data-icon="automation"] i:nth-child(1)::after,
    .stage-visual[data-icon="automation"] i:nth-child(2)::after,
    .stage-visual[data-icon="automation"] i:nth-child(3)::after {
      width: 14px;
      height: 14px;
      margin: -7px 0 0 -7px;
      border-radius: 50%;
      border: 1.5px solid color-mix(in srgb, currentColor 60%, transparent);
      background: transparent;
    }

    .stage-visual[data-icon="automation"] i:nth-child(1) {
      animation-name: horlogerie-cam-parallax, horlogerie-orbit-1-stage;
    }

    .stage-visual[data-icon="automation"] i:nth-child(2) {
      animation-name: horlogerie-cam-parallax, horlogerie-orbit-2-stage;
    }

    .stage-visual[data-icon="automation"] i:nth-child(3) {
      animation-name: horlogerie-cam-parallax, horlogerie-orbit-3-stage;
    }

    .stage-visual[data-icon="automation"] i:nth-child(4) {
      display: none !important;
    }

    /* Planetary Satellites Stage Orbit Keyframes (شعاع ۴۰ پیکسل یکسان برای هر ۳ چرخ‌دنده) */
    @keyframes horlogerie-orbit-1-stage {
      0% {
        transform: rotate(0deg) translate(40px) rotate(0deg);
      }

      100% {
        transform: rotate(360deg) translate(40px) rotate(-720deg);
      }
    }

    @keyframes horlogerie-orbit-2-stage {
      0% {
        transform: rotate(120deg) translate(40px) rotate(0deg);
      }

      100% {
        transform: rotate(480deg) translate(40px) rotate(-720deg);
      }
    }

    @keyframes horlogerie-orbit-3-stage {
      0% {
        transform: rotate(240deg) translate(40px) rotate(0deg);
      }

      100% {
        transform: rotate(600deg) translate(40px) rotate(-720deg);
      }
    }

    .stage-visual[data-icon="system"]::before {
      width: 112px;
      height: 112px;
      margin: -56px 0 0 -56px;
    }

    .stage-visual[data-icon="system"]::after {
      width: 80px;
      height: 80px;
      margin: -40px 0 0 -40px;
    }

    .stage-visual[data-icon="system"] b {
      width: 68px;
      height: 58px;
      margin: -29px 0 0 -34px;
    }

    .stage-visual[data-icon="system"] i:nth-child(1) {
      width: 11px;
      height: 11px;
      margin: -5.5px 0 0 -5.5px;
      animation-name: brain-orbit-outer-1-stage;
    }

    .stage-visual[data-icon="system"] i:nth-child(2) {
      width: 11px;
      height: 11px;
      margin: -5.5px 0 0 -5.5px;
      animation-name: brain-orbit-outer-2-stage;
    }

    .stage-visual[data-icon="system"] i:nth-child(3) {
      width: 9px;
      height: 9px;
      margin: -4.5px 0 0 -4.5px;
      animation-name: brain-orbit-inner-1-stage;
    }

    .stage-visual[data-icon="system"] i:nth-child(4) {
      width: 9px;
      height: 9px;
      margin: -4.5px 0 0 -4.5px;
      animation-name: brain-orbit-inner-2-stage;
    }

    @keyframes brain-orbit-outer-1-stage {
      0% {
        transform: rotate(0deg) translate(56px) rotate(0deg);
      }

      100% {
        transform: rotate(360deg) translate(56px) rotate(-360deg);
      }
    }

    @keyframes brain-orbit-outer-2-stage {
      0% {
        transform: rotate(180deg) translate(56px) rotate(-180deg);
      }

      100% {
        transform: rotate(540deg) translate(56px) rotate(-540deg);
      }
    }

    @keyframes brain-orbit-inner-1-stage {
      0% {
        transform: rotate(90deg) translate(40px) rotate(-90deg);
      }

      100% {
        transform: rotate(450deg) translate(40px) rotate(-450deg);
      }
    }

    @keyframes brain-orbit-inner-2-stage {
      0% {
        transform: rotate(270deg) translate(40px) rotate(-270deg);
      }

      100% {
        transform: rotate(630deg) translate(40px) rotate(-630deg);
      }
    }

    /* Capabilities Icons Stage Scaling — Laser Restoration Sweep */
    .stage-visual[data-icon="infra"] i {
      height: 18px;
    }

    .stage-visual[data-icon="infra"] i:nth-child(1) {
      top: 24px;
    }

    .stage-visual[data-icon="infra"] i:nth-child(2) {
      top: 52px;
    }

    .stage-visual[data-icon="infra"] i:nth-child(3) {
      top: 80px;
    }

    .stage-visual[data-icon="infra"] i:nth-child(4) {
      width: 2.5px;
    }

    /* ===== Process Tour Typography (هماهنگی کامل با فونت‌های سایت و فونت فارسی پیدا) ===== */
    html[lang="fa"] .process-node .process-title {
      font-family: var(--font-fa-head) !important;
      font-weight: 600 !important;
      font-size: 14.5px !important;
      line-height: 1.4 !important;
      letter-spacing: 0 !important;
      color: var(--zinc-400) !important;
    }

    html[lang="fa"] .process-node.on .process-title,
    html[lang="fa"] .process-node:hover .process-title {
      color: var(--heading-white) !important;
      font-weight: 700 !important;
    }

    html[lang="fa"] .process-node .process-num {
      font-family: var(--font-mono) !important;
      font-weight: 600 !important;
      font-size: 11px !important;
      letter-spacing: 0.08em !important;
      text-transform: uppercase !important;
      color: var(--zinc-500) !important;
    }

    html[lang="fa"] .process-node.on .process-num {
      color: var(--heading-white) !important;
    }

    html[lang="fa"] .process-stage h3 {
      font-family: var(--font-fa-head) !important;
      font-weight: 800 !important;
      font-size: clamp(22px, 2.6vw, 32px) !important;
      line-height: 1.25 !important;
      letter-spacing: 0 !important;
      color: var(--heading-white) !important;
    }

    html[lang="fa"] .process-stage p {
      font-family: var(--font-fa-body) !important;
      font-weight: 400 !important;
      font-size: 14.5px !important;
      line-height: 1.75 !important;
      letter-spacing: 0 !important;
      color: var(--zinc-300) !important;
    }

    html[lang="fa"] .process-stage .stage-kicker {
      font-family: var(--font-mono) !important;
      font-weight: 500 !important;
      font-size: 11px !important;
      letter-spacing: 0.08em !important;
      text-transform: uppercase !important;
      color: var(--zinc-500) !important;
    }

    html[lang="fa"] .process-stage .flow-kv span {
      font-family: var(--font-mono) !important;
      font-weight: 500 !important;
      font-size: 11px !important;
      letter-spacing: 0.06em !important;
      color: var(--zinc-400) !important;
    }

    html[dir="rtl"] .process-track {
      direction: rtl
    }

    html[dir="rtl"] .process-arrow::after {
      right: auto;
      left: 0;
      border-right: 0;
      border-top: 1.5px solid var(--dim);
      border-left: 1.5px solid var(--dim);
      width: 7px;
      height: 7px;
      transform: translateY(-50%) rotate(-45deg)
    }

    html[dir="rtl"] .process-arrow.on::before {
      animation-name: arrow-packet-rtl;
      left: auto;
      right: 0
    }

    @keyframes arrow-packet-rtl {
      to {
        right: calc(100% - 5px)
      }
    }

    @media(max-width:720px) {
      .wrap {
        width: 100%;
        max-width: 100%;
        padding-inline: 16px
      }

      .hero>div {
        min-width: 0 !important;
        width: 100%;
        max-width: 100%
      }

      .node-graph {
        width: 100%;
        min-width: 0;
        height: 600px;
      }

      .graph-shell {
        scroll-snap-type: x proximity
      }

      .process-tour {
        padding: 32px 28px
      }

      .process-stage {
        grid-template-columns: minmax(0, 1fr) 180px;
        padding: 28px
      }

      .field input,
      .field textarea {
        font-size: 16px
      }
    }

    @media(prefers-reduced-motion:reduce) {

      .graph-link.main.on,
      .process-arrow.on::before {
        animation: none !important
      }
    }

    .process-node .flow-visual,
    .process-stage .stage-visual {
      display: block;
      position: relative
    }

    /* ===== r18: phone-first layout — independent mobile experience ===== */
    @media(max-width:720px) {
      html {
        overflow-x: hidden
      }

      body {
        overflow-x: hidden
      }

      .wrap {
        padding-inline: 18px
      }

      header {
        backdrop-filter: blur(16px)
      }

      .navbar {
        height: 60px;
        gap: 8px;
        padding-inline: 18px !important
      }

      .brand {
        gap: 7px
      }

      .brand img {
        width: 24px;
        height: 24px
      }

      .brand span {
        font-size: 13px;
        letter-spacing: .11em
      }

      .navutil {
        gap: 7px
      }

      .lang button {
        min-width: 35px;
        padding: 6px 7px;
        font-size: 10px
      }

      .themebtn {
        width: 30px;
        height: 30px
      }

      .cta {
        display: none
      }

      .menubtn {
        display: grid;
        place-items: center;
        width: 34px;
        height: 34px;
        padding: 0
      }

      .drawer .wrap {
        padding-inline: 18px
      }

      .drawer nav {
        padding-bottom: 10px
      }

      .drawer a {
        padding: 14px 0;
        font-size: 12px
      }

      .rail {
        margin: 0 0 20px;
        padding-top: 18px;
        gap: 4px
      }

      .rail i {
        height: 2px
      }

      section {
        padding: 46px 0
      }

      .sidx {
        gap: 8px;
        margin-bottom: 12px;
        padding-bottom: 8px;
      }

      .sidx .n {
        font-size: 14px !important;
      }

      .sidx .w2 {
        font-size: 12px !important;
        line-height: 1.2;
      }

      .sidx .bar {
        display: none;
      }

      h2.sect {
        font-size: 22px !important;
        line-height: 1.4 !important;
        margin-bottom: 14px;
      }

      .lead {
        font-size: 14.5px;
        line-height: 1.8;
        margin-bottom: 24px
      }

      .hero {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 34px;
        padding: 30px 0 0
      }

      .hero>div:first-child {
        order: 0
      }

      .hero>div:last-child {
        order: 1
      }

      h1.hero-t {
        font-size: clamp(33px, 10.2vw, 54px);
        line-height: 1.08;
        letter-spacing: -.035em
      }

      .hero-t>span {
        white-space: nowrap
      }

      .hero>div:first-child>.lbl {
        font-size: 11px;
        letter-spacing: .08em
      }

      .hero>div:first-child>.lbl+.lbl {
        font-size: 9px;
        letter-spacing: .04em
      }

      .hero>div:first-child>p[style] {
        font-size: 15px !important;
        line-height: 1.75 !important;
        margin: 19px 0 24px !important
      }

      .hero .btn-s,
      .hero .btn-o {
        display: block;
        width: 100%;
        text-align: center;
        padding: 14px 16px;
        font-size: 10px
      }

      .hero>div:first-child>div[style*="margin-top"] {
        margin-top: 30px !important;
        padding-top: 17px !important
      }

      .hero .axes {
        display: block;
        width: calc(100% + 6px) !important;
        margin-inline: -3px
      }

      .ba {
        grid-template-columns: 1fr;
        gap: 1px
      }

      .ba>div {
        padding: 23px 20px
      }

      .ba li {
        font-size: 14px
      }

      /* Capability graph becomes a deliberate vertical journey. */
      .tour {
        border-radius: 16px
      }

      .graph-shell {
        overflow: hidden;
        background: var(--bg)
      }

      /* The graph's lower third is reserved exclusively for the active-node copy. */
      .node-graph {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 860px !important;
      }

      .node-graph::before {
        left: 18px;
        top: 18px;
        font-size: 8px;
      }

      .graph-node {
        width: min(130px, 42vw) !important;
        height: auto !important;
      }

      .graph-orb {
        width: 72px !important;
        height: 72px !important;
        border-radius: 23px !important;
        margin: 0 auto 6px !important;
      }

      .graph-orb .flow-visual {
        transform: translate(-50%, -50%) scale(.55) !important;
      }

      .graph-node.on .graph-orb .flow-visual {
        transform: translate(-50%, -50%) scale(.59) !important;
      }

      .graph-node.top-node .graph-title,
      .graph-node.bottom-node .graph-title,
      .graph-title {
        position: static !important;
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;
        display: block !important;
        margin: 4px auto 0 !important;
        font-size: 11px !important;
        line-height: 1.35 !important;
        max-width: 120px !important;
        white-space: normal !important;
        padding: 2px 6px !important;
        box-shadow: none !important;
        background: transparent !important;
        min-height: 0 !important;
      }

      .graph-num {
        right: -6px !important;
        top: -6px !important;
        min-width: 23px !important;
        height: 23px !important;
        padding: 0 5px !important;
        font-size: 8px !important;
      }

      .graph-detail {
        position: absolute !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        top: auto !important;
        bottom: 20px !important;
        width: calc(100% - 36px) !important;
        max-width: 580px !important;
        min-height: 160px !important;
        padding: 18px 20px 16px !important;
        box-sizing: border-box !important;
        border-radius: 18px !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        background: rgba(255, 255, 255, 0.025) !important;
        backdrop-filter: blur(16px) !important;
        -webkit-backdrop-filter: blur(16px) !important;
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35) !important;
      }

      .graph-detail strong {
        font-size: 20px !important;
      }

      .graph-detail p {
        max-width: 100% !important;
        font-size: 12.5px !important;
        line-height: 1.75 !important;
        text-align: center !important;
        text-align-last: center !important;
      }

      .graph-direction {
        display: none !important;
      }

      .graph-link.main::before {
        width: 5px;
        height: 5px
      }

      .graph-link.main::after {
        display: none !important;
      }

      .flow-index {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        justify-content: center !important;
        gap: 6px !important;
        padding: 12px 14px !important;
        box-sizing: border-box !important;
      }

      .flow-index::-webkit-scrollbar {
        display: none !important;
      }

      .flow-index button {
        flex-shrink: 0 !important;
        min-width: 32px !important;
        height: 30px !important;
        padding: 0 6px !important;
        font-size: 9.5px !important;
      }

      /* Build flow becomes compact touch steps; no off-screen canvas. */
      .process-shell {
        overflow: hidden !important;
        width: 100% !important;
        min-width: 0 !important;
      }

      .process-tour {
        min-width: 0 !important;
        width: 100% !important;
        padding: 26px 18px !important;
        box-sizing: border-box !important;
      }

      .process-track {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0 !important;
        max-width: 320px !important;
        margin: 0 auto !important;
        width: 100% !important;
        align-items: center !important;
        justify-content: center !important;
      }

      .process-node {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        width: 100% !important;
        max-width: 220px !important;
        margin: 0 auto !important;
        padding: 14px 16px 12px !important;
        min-height: 104px !important;
        border-radius: 20px !important;
        transition: all .3s ease !important;
        box-sizing: border-box !important;
      }

      .process-node-info {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        min-width: 0 !important;
      }

      html[dir="rtl"] .process-node-info {
        align-items: center !important;
        text-align: center !important;
      }

      .process-node.on {
        background: rgba(255, 255, 255, 0.04) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25) !important;
      }

      .process-node .flow-visual {
        flex-shrink: 0 !important;
        width: 60px !important;
        height: 60px !important;
        margin: 0 auto 8px !important;
        border-radius: 18px !important;
      }

      .process-node .process-num {
        margin: 0 0 3px !important;
        font-size: 11px !important;
        line-height: 1 !important;
        color: var(--faint) !important;
        font-family: var(--font-mono) !important;
      }

      .process-node.on .process-num {
        color: var(--text) !important;
        font-weight: 700 !important;
      }

      .process-node .process-title {
        font-size: 15.5px !important;
        white-space: normal !important;
        line-height: 1.3 !important;
        font-family: var(--font-fa-head) !important;
        font-weight: 600 !important;
      }

      .process-arrow {
        display: block !important;
        width: 2px !important;
        height: 20px !important;
        margin: 2px auto !important;
        background: var(--line2) !important;
        position: relative !important;
        left: 0 !important;
        right: 0 !important;
      }

      html[dir="rtl"] .process-arrow {
        margin: 2px auto !important;
      }

      .process-arrow::after {
        content: "" !important;
        position: absolute !important;
        bottom: 0 !important;
        left: 50% !important;
        right: auto !important;
        top: auto !important;
        width: 6px !important;
        height: 6px !important;
        border-bottom: 2px solid var(--line2) !important;
        border-right: 2px solid var(--line2) !important;
        border-top: none !important;
        border-left: none !important;
        transform: translateX(-50%) rotate(45deg) !important;
      }

      .process-arrow.past,
      .process-arrow.on {
        background: var(--text) !important;
      }

      .process-arrow.past::after,
      .process-arrow.on::after {
        border-color: var(--text) !important;
      }

      .process-arrow.on::before {
        top: 0 !important;
        left: -2px !important;
        animation: arrow-packet-mobile 1.4s linear infinite !important;
      }

      @keyframes arrow-packet-mobile {
        to {
          top: calc(100% - 5px)
        }
      }

      .process-stage {
        margin-top: 25px;
        min-height: 0;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 18px;
        padding: 22px 20px;
        border-radius: 16px
      }

      .process-stage h3 {
        font-size: 24px !important;
      }

      .process-stage p {
        font-size: 13px;
        line-height: 1.75
      }

      .process-stage .stage-visual {
        align-self: center;
        width: 110px !important;
        height: 92px !important;
        border-radius: 24px !important;
        order: -1
      }

      .process-stage .flow-kv {
        gap: 5px
      }

      .flow-kv span {
        font-size: 8.5px;
        padding: 4px 7px
      }

      html[dir="rtl"] .node-graph::before,
      html[lang="fa"] .node-graph::before {
        left: auto;
        right: 18px;
      }

      .active-card {
        padding: 23px 20px
      }

      .cs-head {
        display: grid;
        grid-template-columns: auto 1fr auto;
        gap: 9px;
        padding: 19px 0
      }

      .cs-head .sec {
        display: none
      }

      .cs-head .hl {
        grid-column: 1/-1;
        font-size: 16px
      }

      .cs-inner {
        grid-template-columns: 1fr;
        gap: 18px;
        padding-bottom: 22px
      }

      .metrics b {
        font-size: 10px;
        padding: 7px 9px
      }

      .team {
        grid-template-columns: 1fr;
        gap: 10px;
        background: transparent;
        border: 0
      }

      .member {
        min-height: 0;
        padding: 24px 22px;
        align-items: center;
        text-align: center;
        gap: 14px;
        border-radius: 16px
      }

      .ava {
        width: 86px;
        height: 86px
      }

      .mbody {
        align-items: center;
        gap: 8px
      }

      .member .nm {
        font-size: 20px
      }

      .member .rl {
        font-size: 10px
      }

      .member .bio {
        max-width: 32ch;
        font-size: 13px;
        line-height: 1.78
      }

      .li-link {
        margin-top: 4px;
        padding-top: 8px
      }

      .post {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 7px 12px;
        padding: 18px 0
      }

      .post .ttl {
        grid-column: 1/-1;
        font-size: 16px
      }

      .post .meta {
        font-size: 9px
      }

      #p-contact section[style] {
        display: flex !important;
        flex-direction: column;
        gap: 34px !important
      }

      .field input,
      .field textarea {
        font-size: 16px;
        padding: 11px 0
      }

      .field textarea {
        min-height: 105px
      }

      .fgrid {
        gap: 28px;
        padding: 38px 0 26px
      }

      .fcol {
        gap: 10px
      }

      .fbot {
        padding: 18px 0 25px;
        font-size: 9px
      }

      .pager {
        padding-top: 21px;
        padding-bottom: 46px;
        font-size: 9px
      }

      .pager a {
        max-width: 47%;
        gap: 5px
      }

      .pager a:last-child {
        text-align: end;
        justify-content: flex-end
      }

      /* r20: home title and footer get their own intentional phone rhythm. */
      html[lang="fa"] .hero {
        gap: 30px;
        padding-top: 38px
      }

      html[lang="fa"] h1.hero-t {
        font-size: clamp(35px, 10.8vw, 52px);
        line-height: 1.22;
        letter-spacing: -.04em
      }

      html[lang="fa"] .hero-t>span {
        white-space: nowrap
      }

      html[lang="fa"] .hero-t .dim {
        color: var(--faint)
      }

      html[lang="fa"] .hero-t>span:not(.dim) {
        color: var(--text);
        font-weight: 800
      }

      html[lang="fa"] .hero>div:first-child>p[style] {
        font-size: 15px !important;
        line-height: 2 !important;
        margin-top: 17px !important
      }

      html[lang="fa"] .hero>div:first-child>div[style*="margin-top"] {
        margin-top: 26px !important;
        padding-top: 20px !important
      }

      footer {
        margin-top: 0;
        padding-inline: 22px
      }

      footer>.wrap {
        padding-inline: 0
      }

      .fgrid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 34px;
        padding: 42px 0 32px
      }

      .fcol {
        gap: 12px;
        min-width: 0
      }

      .fcol:first-child {
        padding-bottom: 30px;
        border-bottom: 1px solid var(--line)
      }

      .fcol:first-child p {
        margin-top: 2px;
        line-height: 1.65
      }

      #footNav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 18px;
        row-gap: 13px
      }

      .fcol a {
        overflow-wrap: anywhere;
        line-height: 1.5
      }

      .fbot {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 17px 0 calc(26px + env(safe-area-inset-bottom));
        line-height: 1.6
      }

      html[dir="rtl"] .fbot {
        align-items: flex-end
      }
    }