{"id":63,"date":"2026-06-21T08:23:30","date_gmt":"2026-06-21T08:23:30","guid":{"rendered":"https:\/\/website.digi-yaar.ir\/?page_id=63"},"modified":"2026-06-21T08:32:00","modified_gmt":"2026-06-21T08:32:00","slug":"home","status":"publish","type":"page","link":"https:\/\/website.digi-yaar.ir\/index.php\/home\/","title":{"rendered":""},"content":{"rendered":"\n<meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>\u062f\u06cc\u062c\u06cc\u200c\u06cc\u0627\u0631 &#8211; \u067e\u0644\u062a\u0641\u0631\u0645 \u0627\u0631\u062a\u0628\u0627\u0637 \u0647\u0648\u0634\u0645\u0646\u062f \u0628\u0627 \u0645\u0634\u062a\u0631\u06cc\u0627\u0646<\/title>\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin=\"\">\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Vazirmatn:wght@300;400;500;600;700;800&amp;display=swap\" rel=\"stylesheet\">\n    <style>\n        \/* ============================================\n           DESIGN SYSTEM \u2014 from Figma PDF extraction\n           Brand: #0077E0\n           Green: #2CAF20 | Orange: #F59B00 | Red: #F52100\n           Neutral text: #2A3B4B | BG: #F5F7FA\n           Radius: 4\/8\/12\/16\/24px  Spacing: 0\/2\/4\/6\/8\/12\/16\/24\/32\/40\/48\/56\/64px\n           ============================================ *\/\n\n        :root {\n            --brand-50:  #F0F8FF;\n            --brand-100: #DBEEFF;\n            --brand-200: #B3DBFF;\n            --brand-300: #80C3FF;\n            --brand-400: #3DA5FF;\n            --brand-500: #0077E0;\n            --brand-600: #006DCC;\n            --brand-700: #005CAD;\n            --brand-800: #004C8F;\n            --brand-900: #00396B;\n            --brand-950: #00294D;\n\n            --green-500: #2CAF20;\n            --orange-500: #F59B00;\n            --red-500: #F52100;\n\n            --neutral-50:  #F5F7FA;\n            --neutral-100: #E8EDF2;\n            --neutral-200: #CED9E4;\n            --neutral-300: #B0C2D3;\n            --neutral-400: #8CA6BF;\n            --neutral-500: #5B80A4;\n            --neutral-600: #527394;\n            --neutral-700: #476380;\n            --neutral-800: #3A5269;\n            --neutral-900: #2A3B4B;\n            --neutral-950: #1D2934;\n\n            --gray-white: #FFFFFF;\n            --gray-50:  #F5F5F5;\n            --gray-100: #EDEDED;\n            --gray-200: #D9D9D9;\n            --gray-400: #A3A3A3;\n            --gray-500: #808080;\n\n            --bg:           var(--brand-50);\n            --bg-alt:       var(--gray-white);\n            --surface:      var(--gray-white);\n            --text:         var(--neutral-900);\n            --text-muted:   var(--gray-500);\n            --text-light:   var(--neutral-400);\n            --border:       var(--gray-200);\n            --brand:        var(--brand-500);\n            --brand-hover:  var(--brand-600);\n\n            --space-1: 4px;\n            --space-2: 8px;\n            --space-3: 12px;\n            --space-4: 16px;\n            --space-6: 24px;\n            --space-8: 32px;\n            --space-10: 40px;\n            --space-12: 48px;\n            --space-16: 64px;\n            --space-20: 80px;\n            --space-24: 96px;\n\n            --radius-md:   8px;\n            --radius-lg:   12px;\n            --radius-xl:   16px;\n            --radius-2xl:  24px;\n\n            --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);\n            --shadow-md: 0 4px 15px rgba(0,0,0,0.08);\n            --shadow-lg: 0 10px 30px rgba(0,0,0,0.12);\n            --shadow-brand: 0 10px 30px rgba(0,119,224,0.25);\n\n            --ease: 250ms ease;\n        }\n\n        *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }\n\n        html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }\n\nhtml {\n    margin-top: 0px !important;\n}\n\n        body {\n            font-family: 'Vazirmatn', system-ui, sans-serif;\n            font-size: 16px;\n            line-height: 1.75;\n            color: var(--text);\n            background: var(--bg-alt);\n        }\n\n        a { text-decoration: none; color: inherit; transition: color var(--ease); }\n        img { max-width: 100%; display: block; }\n\n        .container {\n            max-width: 1180px;\n            margin: 0 auto;\n            padding: 0 var(--space-6);\n        }\n\n        \/* Typography *\/\n        .t-1 { font-size: clamp(32px, 5vw, 52px); font-weight: 800; line-height: 1.22; }\n        .t-2 { font-size: clamp(24px, 3.5vw, 38px); font-weight: 700; line-height: 1.35; }\n        .t-3 { font-size: 22px; font-weight: 600; line-height: 1.4; }\n        .t-body { font-size: 16px; line-height: 1.75; }\n        .t-sm  { font-size: 14px; line-height: 1.6; }\n        .t-xs  { font-size: 12px; line-height: 1.5; }\n        .gradient {\n            background: linear-gradient(135deg, var(--brand-500), var(--brand-400));\n            -webkit-background-clip: text;\n            -webkit-text-fill-color: transparent;\n            background-clip: text;\n        }\n\n        \/* Buttons *\/\n        .btn {\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            padding: var(--space-3) var(--space-6);\n            font-family: inherit;\n            font-size: 15px;\n            font-weight: 600;\n            border: 2px solid transparent;\n            border-radius: var(--radius-md);\n            cursor: pointer;\n            transition: all var(--ease);\n            white-space: nowrap;\n        }\n        .btn-lg { padding: var(--space-4) var(--space-8); font-size: 16px; border-radius: var(--radius-lg); }\n\n        .btn-brand {\n            background: var(--brand);\n            color: #fff;\n            border-color: var(--brand);\n        }\n        .btn-brand:hover {\n            background: var(--brand-hover);\n            border-color: var(--brand-hover);\n            transform: translateY(-2px);\n            box-shadow: var(--shadow-brand);\n        }\n\n        .btn-outline {\n            background: transparent;\n            color: var(--brand);\n            border-color: var(--border);\n        }\n        .btn-outline:hover {\n            background: var(--brand-50);\n            border-color: var(--brand);\n            transform: translateY(-2px);\n        }\n\n        \/* ============================================\n           HEADER\n        ============================================ *\/\n        header {\n            background: rgba(255, 255, 255, 0.96);\n            backdrop-filter: blur(16px);\n            border-bottom: 1px solid var(--border);\n            position: sticky;\n            top: 0;\n            z-index: 100;\n            transition: box-shadow var(--ease);\n        }\n        header.is-scrolled { box-shadow: var(--shadow-sm); }\n\n        .nav-inner {\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            height: 64px;\n        }\n\n        .logo {\n            display: flex;\n            align-items: center;\n            gap: var(--space-2);\n            font-size: 20px;\n            font-weight: 700;\n            color: var(--brand);\n            user-select: none;\n        }\n        .logo-icon {\n            width: 36px;\n            height: 36px;\n            background: linear-gradient(135deg, var(--brand-500), var(--brand-700));\n            border-radius: var(--radius-md);\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            color: #fff;\n            font-size: 16px;\n            font-weight: 800;\n        }\n\n        .nav-menu {\n            display: flex;\n            align-items: center;\n            gap: var(--space-10);\n            list-style: none;\n        }\n        .nav-menu a {\n            font-size: 15px;\n            font-weight: 500;\n            color: var(--text-muted);\n            position: relative;\n            padding-bottom: 2px;\n        }\n        .nav-menu a:hover { color: var(--brand); }\n        .nav-menu a::after {\n            content: '';\n            position: absolute;\n            bottom: 0;\n            right: 0;\n            width: 0;\n            height: 2px;\n            background: var(--brand);\n            border-radius: 1px;\n            transition: width var(--ease);\n        }\n        .nav-menu a:hover::after { width: 100%; }\n\n        .nav-actions { display: flex; align-items: center; gap: var(--space-3); }\n\n        .nav-toggle {\n            display: none;\n            flex-direction: column;\n            gap: 5px;\n            background: none;\n            border: none;\n            cursor: pointer;\n            padding: 4px;\n        }\n        .nav-toggle span {\n            width: 22px;\n            height: 2px;\n            background: var(--text);\n            border-radius: 1px;\n            transition: var(--ease);\n        }\n\n        @media (max-width: 860px) {\n            .nav-menu { display: none; }\n            .nav-toggle { display: flex; }\n        }\n\n        \/* ============================================\n           HERO\n        ============================================ *\/\n        .hero {\n            padding: var(--space-20) 0 var(--space-24);\n            background: linear-gradient(175deg, var(--brand-50) 0%, var(--bg-alt) 50%, var(--brand-50) 100%);\n            position: relative;\n            overflow: hidden;\n        }\n        .hero::before {\n            content: '';\n            position: absolute;\n            top: -40%;\n            left: -20%;\n            width: 55%;\n            height: 110%;\n            background: radial-gradient(ellipse, rgba(0,119,224,0.07) 0%, transparent 70%);\n        }\n        .hero .container {\n            display: flex;\n            align-items: center;\n            gap: var(--space-16);\n            position: relative;\n        }\n        .hero-text { flex: 1; }\n        .hero-visual { flex: 0 0 auto; }\n\n        .hero-badge {\n            display: inline-flex;\n            align-items: center;\n            gap: var(--space-2);\n            background: rgba(0,119,224,0.06);\n            border: 1px solid var(--brand-200);\n            color: var(--brand);\n            padding: 6px 14px;\n            border-radius: 999px;\n            font-size: 13px;\n            font-weight: 600;\n            margin-bottom: var(--space-6);\n        }\n        .hero-badge-dot {\n            width: 7px;\n            height: 7px;\n            background: var(--brand);\n            border-radius: 50%;\n            animation: pulse 2s infinite;\n        }\n\n        .hero h1 { margin-bottom: var(--space-5); }\n        .hero p {\n            font-size: 17px;\n            color: var(--text-muted);\n            max-width: 510px;\n            margin-bottom: var(--space-8);\n        }\n\n        .hero-buttons { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-10); }\n\n        .hero-metrics { display: flex; gap: var(--space-12); }\n        .metric-val { font-size: 28px; font-weight: 700; line-height: 1.2; }\n        .metric-label { font-size: 13px; color: var(--text-light); }\n\n        \/* App mockup *\/\n        .mockup {\n            width: 100%;\n            max-width: 520px;\n            background: var(--bg-alt);\n            border-radius: var(--radius-xl);\n            border: 1px solid var(--border);\n            box-shadow: var(--shadow-lg), 0 0 0 1px rgba(0,0,0,0.02);\n            overflow: hidden;\n        }\n        .mockup-bar {\n            display: flex;\n            align-items: center;\n            gap: 6px;\n            padding: var(--space-3) var(--space-4);\n            background: var(--gray-50);\n            border-bottom: 1px solid var(--border);\n        }\n        .mockup-dot {\n            width: 10px;\n            height: 10px;\n            border-radius: 50%;\n        }\n        .mockup-dot.r { background: var(--red-500); }\n        .mockup-dot.y { background: var(--orange-500); }\n        .mockup-dot.g { background: var(--green-500); }\n\n        .mockup-content {\n            padding: var(--space-6);\n            min-height: 300px;\n            display: flex;\n            flex-direction: column;\n        }\n\n        .chat-bubble {\n            padding: var(--space-3) var(--space-4);\n            border-radius: var(--radius-lg);\n            font-size: 14px;\n            max-width: 80%;\n            line-height: 1.6;\n        }\n        .chat-bubble.bot {\n            background: var(--brand-50);\n            color: var(--brand-700);\n            align-self: flex-start;\n            border-bottom-right: 0;\n        }\n        .chat-bubble.user {\n            background: var(--brand);\n            color: #fff;\n            align-self: flex-end;\n            border-bottom-left: 0;\n        }\n        .chat-gap { flex: 1; display: flex; flex-direction: column; gap: var(--space-3); }\n        \/* \u2014\u2014\u2014 Typewriter in chat bubbles \u2014\u2014\u2014 *\/\n        .chat-bubble .tw-cursor {\n            display:inline-block; width:2px; height:1em;\n            background:currentColor; margin-right:2px;\n            vertical-align:text-bottom;\n            animation:tw-blink .6s infinite;\n        }\n        @keyframes tw-blink {\n            0%,100%{opacity:1}\n            50%{opacity:0}\n        }\n        .chat-bubble.typing-done .tw-cursor { display:none; }\n\n\n        .chat-input {\n            display: flex;\n            align-items: center;\n            gap: var(--space-2);\n            background: var(--gray-50);\n            border: 1px solid var(--border);\n            border-radius: var(--radius-lg);\n            padding: var(--space-2) var(--space-3);\n            margin-top: auto;\n        }\n        .chat-input span { flex: 1; font-size: 13px; color: var(--text-light); }\n        .chat-send-btn {\n            width: 32px;\n            height: 32px;\n            background: var(--brand);\n            border-radius: var(--radius-md);\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            color: #fff;\n            font-size: 14px;\n        }\n\n        \/* ============================================\n           COMPANIES BAR\n        ============================================ *\/\n        .companies { padding: var(--space-12) 0; border-bottom: 1px solid var(--border); }\n        .companies-label { text-align: center; font-size: 14px; color: var(--text-light); margin-bottom: var(--space-5); }\n        .companies-list {\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            gap: var(--space-10);\n            flex-wrap: wrap;\n        }\n        .company-item {\n            font-size: 18px;\n            font-weight: 600;\n            color: var(--neutral-300);\n            user-select: none;\n            transition: color var(--ease);\n        }\n        .company-item:hover { color: var(--neutral-500); }\n\n        \/* ============================================\n           SECTIONS\n        ============================================ *\/\n        .section { padding: var(--space-24) 0; }\n        .section--alt { background: var(--bg-alt-soft, #f7f9fc); }\n\n        .section-header { text-align: center; max-width: 620px; margin: 0 auto var(--space-14); }\n        .section-header p { font-size: 17px; color: var(--text-muted); margin-top: var(--space-3); }\n\n        .tag {\n            display: inline-block;\n            background: rgba(0,119,224,0.06);\n            color: var(--brand);\n            padding: 5px 14px;\n            border-radius: 999px;\n            font-size: 13px;\n            font-weight: 600;\n            margin-bottom: var(--space-4);\n        }\n\n        \/* ============================================\n           FEATURES\n        ============================================ *\/\n        .features-grid {\n            display: grid;\n            grid-template-columns: repeat(3, 1fr);\n            gap: var(--space-6);\n        }\n        @media (max-width: 960px) { .features-grid { grid-template-columns: repeat(2, 1fr); } }\n        @media (max-width: 640px) { .features-grid { grid-template-columns: 1fr; } }\n\n        .feature {\n            background: var(--surface);\n            border: 1px solid var(--border);\n            border-radius: var(--radius-xl);\n            padding: var(--space-8);\n            transition: all var(--ease);\n            height: 100%;\n        }\n        .feature:hover {\n            transform: translateY(-4px);\n            box-shadow: var(--shadow-lg);\n            border-color: var(--brand-200);\n        }\n\n        .feature-icon {\n            width: 48px;\n            height: 48px;\n            border-radius: var(--radius-lg);\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            font-size: 22px;\n            margin-bottom: var(--space-5);\n        }\n        .feature-icon--brand { background: var(--brand-100); }\n        .feature-icon--green { background: #EBFBE9; }\n        .feature-icon--orange { background: #FFF8EB; }\n        .feature-icon--purple { background: #F0EBFF; }\n\n        .feature h3 { font-size: 18px; margin-bottom: var(--space-3); }\n        .feature p { font-size: 14px; color: var(--text-muted); line-height: 1.75; }\n\n        \/* ============================================\n           HOW IT WORKS\n        ============================================ *\/\n        .steps { display: flex; gap: 0; justify-content: space-between; position: relative; }\n        .step { flex: 1; text-align: center; padding: 0 var(--space-4); position: relative; }\n\n        .step-num {\n            width: 56px;\n            height: 56px;\n            border-radius: var(--radius-xl);\n            background: linear-gradient(135deg, var(--brand-500), var(--brand-600));\n            color: #fff;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            font-size: 22px;\n            font-weight: 700;\n            margin: 0 auto var(--space-5);\n            position: relative;\n        }\n        .step-num::after {\n            content: '';\n            position: absolute;\n            inset: -3px;\n            border-radius: var(--radius-xl);\n            background: linear-gradient(135deg, var(--brand-500), var(--brand-400));\n            opacity: 0.12;\n        }\n\n        .step h3 { font-size: 18px; margin-bottom: var(--space-3); }\n        .step p { font-size: 14px; color: var(--text-muted); max-width: 200px; margin: 0 auto; line-height: 1.75; }\n\n        \/* line between steps *\/\n        .step-line {\n            display: none;\n            position: absolute;\n            top: 28px;\n            left: calc(12.5% + 28px);\n            width: calc(75% - 56px);\n            height: 2px;\n            background: linear-gradient(90deg, var(--brand-200), var(--brand-100), var(--brand-200));\n        }\n\n        @media (min-width: 769px) { .step-line { display: block; } }\n        @media (max-width: 960px) { .steps { flex-direction: column; gap: var(--space-8); } .step-line { display: none !important; } }\n\n        \/* ============================================\n           STATS\n        ============================================ *\/\n        .stats {\n            background: linear-gradient(135deg, var(--neutral-950), var(--neutral-900));\n            color: #fff;\n            position: relative;\n            overflow: hidden;\n        }\n        .stats::before {\n            content: '';\n            position: absolute;\n            top: 0; left: 0;\n            width: 100%;\n            height: 100%;\n            background: radial-gradient(ellipse at 30% 50%, rgba(0,119,224,0.15), transparent 60%);\n        }\n        .stats .container { position: relative; z-index: 1; }\n        .stats .tag { background: rgba(255,255,255,0.08); }\n        .stats .t-2 { color: #fff; }\n        .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); margin-top: var(--space-14); }\n        @media (max-width: 768px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }\n\n        .stat {\n            text-align: center;\n            padding: var(--space-6);\n            border-radius: var(--radius-xl);\n            background: rgba(255,255,255,0.04);\n            border: 1px solid rgba(255,255,255,0.06);\n        }\n        .stat-val { font-size: 44px; font-weight: 700; margin-bottom: var(--space-2); }\n        .stat-val .grad {\n            background: linear-gradient(135deg, var(--brand-400), var(--brand-300));\n            -webkit-background-clip: text;\n            -webkit-text-fill-color: transparent;\n            background-clip: text;\n        }\n        .stat-lbl { font-size: 15px; color: var(--neutral-400); }\n\n        \/* ============================================\n           PRICING\n        ============================================ *\/\n        .pricing-grid {\n            display: grid;\n            grid-template-columns: repeat(3, 1fr);\n            gap: var(--space-6);\n            align-items: start;\n        }\n        @media (max-width: 960px) { .pricing-grid { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; } }\n\n        .price-card {\n            background: var(--surface);\n            border: 1px solid var(--border);\n            border-radius: var(--radius-2xl);\n            padding: var(--space-8);\n            transition: all var(--ease);\n            position: relative;\n        }\n        .price-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }\n\n        .price-card--featured {\n            border: 2px solid var(--brand);\n            padding-top: var(--space-10);\n        }\n        .price-badge {\n            position: absolute;\n            top: 0;\n            right: var(--space-8);\n            transform: translateY(-50%);\n            background: linear-gradient(135deg, var(--brand-500), var(--brand-600));\n            color: #fff;\n            padding: var(--space-1) var(--space-3);\n            border-radius: 999px;\n            font-size: 13px;\n            font-weight: 600;\n        }\n\n        .price-name { font-size: 20px; font-weight: 600; margin-bottom: var(--space-1); }\n        .price-desc { font-size: 14px; color: var(--text-muted); margin-bottom: var(--space-6); }\n\n        .price-row { display: flex; align-items: baseline; gap: var(--space-2); margin-bottom: var(--space-2); }\n        .price-amount { font-size: 38px; font-weight: 700; color: var(--brand); }\n        .price-sub { font-size: 16px; color: var(--text-muted); }\n        .price-period { font-size: 13px; color: var(--text-light); margin-bottom: var(--space-6); }\n\n        .price-div { height: 1px; background: var(--border); margin-bottom: var(--space-6); }\n\n        .price-feat { margin-bottom: var(--space-8); }\n        .price-feat li {\n            display: flex;\n            align-items: center;\n            gap: var(--space-3);\n            padding: var(--space-2) 0;\n            font-size: 14px;\n        }\n        .check {\n            width: 20px;\n            height: 20px;\n            border-radius: 50%;\n            background: #EBFBE9;\n            color: var(--green-500);\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            font-size: 11px;\n            flex-shrink: 0;\n        }\n\n        .price-card .btn { width: 100%; }\n\n        \/* ============================================\n           USE CASES\n        ============================================ *\/\n        .usecases-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }\n        @media (max-width: 960px) { .usecases-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; } }\n\n        .usecase {\n            background: var(--surface);\n            border: 1px solid var(--border);\n            border-radius: var(--radius-xl);\n            padding: var(--space-8);\n            transition: all var(--ease);\n            position: relative;\n            overflow: hidden;\n            height: 100%;\n        }\n        .usecase::after {\n            content: '';\n            position: absolute;\n            bottom: 0; right: 0;\n            width: 100%;\n            height: 3px;\n            background: linear-gradient(90deg, var(--brand-500), var(--brand-400), var(--brand-300));\n            opacity: 0;\n            transition: opacity var(--ease);\n        }\n        .usecase:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }\n        .usecase:hover::after { opacity: 1; }\n\n        .usecase-icon {\n            width: 52px;\n            height: 52px;\n            border-radius: var(--radius-lg);\n            background: linear-gradient(135deg, var(--brand-50), var(--brand-100));\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            font-size: 24px;\n            margin-bottom: var(--space-5);\n        }\n        .usecase h3 { font-size: 18px; margin-bottom: var(--space-3); }\n        .usecase p { font-size: 14px; color: var(--text-muted); line-height: 1.75; }\n\n        \/* ============================================\n           TESTIMONIALS\n        ============================================ *\/\n        .testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }\n        @media (max-width: 960px) { .testimonials-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; } }\n\n        .testimonial {\n            background: var(--surface);\n            border: 1px solid var(--border);\n            border-radius: var(--radius-xl);\n            padding: var(--space-8);\n            transition: all var(--ease);\n        }\n        .testimonial:hover { box-shadow: var(--shadow-md); }\n\n        .testimonial-q {\n            font-size: 14px;\n            color: var(--text-muted);\n            line-height: 1.85;\n            margin-bottom: var(--space-6);\n            font-style: italic;\n        }\n        .testimonial-author { display: flex; align-items: center; gap: var(--space-3); }\n        .testimonial-avatar {\n            width: 40px;\n            height: 40px;\n            border-radius: 50%;\n            background: var(--brand-100);\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            font-size: 16px;\n            font-weight: 700;\n            color: var(--brand-600);\n            flex-shrink: 0;\n        }\n        .testimonial-name { font-size: 14px; font-weight: 600; }\n        .testimonial-role { font-size: 12px; color: var(--text-light); }\n\n        \/* ============================================\n           CTA\n        ============================================ *\/\n        .cta {\n            padding: var(--space-24) 0;\n            background: linear-gradient(135deg, var(--brand-500) 0%, var(--brand-700) 100%);\n            color: #fff;\n            position: relative;\n            overflow: hidden;\n        }\n        .cta::before {\n            content: '';\n            position: absolute;\n            top: -20%;\n            right: -10%;\n            width: 45%;\n            height: 130%;\n            background: radial-gradient(ellipse, rgba(255,255,255,0.06), transparent 70%);\n        }\n        .cta-inner {\n            text-align: center;\n            max-width: 600px;\n            margin: 0 auto;\n            position: relative;\n            z-index: 1;\n        }\n        .cta h2 { margin-bottom: var(--space-4); }\n        .cta p { font-size: 17px; opacity: 0.9; margin-bottom: var(--space-8); }\n        .cta .btn { background: #fff; color: var(--brand-500); border-color: #fff; }\n        .cta .btn:hover { background: var(--neutral-50); box-shadow: 0 10px 30px rgba(0,0,0,0.2); }\n\n        \/* ============================================\n           FOOTER\n        ============================================ *\/\n        footer { background: var(--neutral-950); color: var(--neutral-400); }\n        .footer-grid {\n            display: grid;\n            grid-template-columns: 1.5fr 1fr 1fr 1fr;\n            gap: var(--space-8);\n            margin-bottom: var(--space-10);\n        }\n        .footer-brand h3 { color: #fff; margin-bottom: var(--space-3); font-size: 18px; }\n        .footer-brand p { font-size: 14px; line-height: 1.75; color: var(--neutral-400); }\n        .footer-enamad { margin-top: var(--space-4); display: inline-block; }\n        .footer-links h4 { color: #fff; margin-bottom: var(--space-4); font-size: 14px; }\n        .footer-links li { margin-bottom: var(--space-2); }\n        .footer-links a { font-size: 14px; color: var(--neutral-400); }\n        .footer-links a:hover { color: var(--brand-400); }\n        .footer-bottom {\n            border-top: 1px solid rgba(255,255,255,0.07);\n            padding: var(--space-6) 0;\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n        }\n        .footer-bottom a { color: var(--brand-400); }\n        .footer-bottom a:hover { text-decoration: underline; }\n        .footer-bottom p { font-size: 13px; color: var(--neutral-600); }\n\n        @media (max-width: 768px) {\n            .footer-grid { grid-template-columns: 1fr 1fr; }\n            .footer-bottom { flex-direction: column; gap: var(--space-3); text-align: center; }\n        }\n\n        \/* ============================================\n           ANIMATIONS\n        ============================================ *\/\n        @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }\n\n\n        \/* \u2014\u2014\u2014 BOUNCING CURSOR INDICATOR \u2014\u2014\u2014 *\/\n        .bouncing-cursor {\n            display: flex; flex-direction: column; align-items: center;\n            margin-bottom: var(--space-4); height: 44px;\n        }\n        .bc-dot-row { display: flex; gap: 6px; margin-bottom: 6px; }\n        .bc-dot {\n            width: 8px; height: 8px; border-radius: 50%;\n            background: var(--brand);\n            animation: bc-bounce 1.4s infinite ease-in-out both;\n        }\n        .bc-dot:nth-child(1) { animation-delay: 0s; }\n        .bc-dot:nth-child(2) { animation-delay: 0.16s; }\n        .bc-dot:nth-child(3) { animation-delay: 0.32s; }\n        @keyframes bc-bounce {\n            0%, 80%, 100% { transform: scale(0.6); opacity: 0.3; }\n            40% { transform: scale(1); opacity: 1; }\n        }\n        .bc-arrow {\n            font-size: 28px; line-height: 1; color: var(--brand);\n            animation: bc-float 0.7s ease-in-out infinite;\n        }\n        @keyframes bc-float {\n            0%, 100% { transform: translateY(0); opacity: 1; }\n            50% { transform: translateY(-5px); opacity: 0.4; }\n        }\n        \/* \u2014\u2014\u2014 TYPEWRITER \u2014\u2014\u2014 *\/\n        .tw-cursor {\n            display: inline-block; width: 3px; height: 1.1em;\n            background: var(--brand); margin-left: 3px;\n            vertical-align: text-bottom;\n            animation: tw-blink 0.6s step-end infinite;\n        }\n        @keyframes tw-blink {\n            0%, 100% { opacity: 1; }\n            50% { opacity: 0; }\n        }\n\n        .reveal {\n            opacity: 0;\n            transform: translateY(24px);\n            transition: opacity 0.7s ease, transform 0.7s ease;\n        }\n        .reveal.show { opacity: 1; transform: translateY(0); }\n    <\/style>\n\n\n\n<!-- ==============================\n     HEADER\n============================== -->\n<header id=\"header\">\n    <div class=\"container\">\n        <div class=\"nav-inner\">\n            <div class=\"logo\" href=\"#\">\n                <div class=\"logo-icon\">D<\/div>\n                \u062f\u06cc\u062c\u06cc\u200c\u06cc\u0627\u0631\n            <\/div>\n\n            <ul class=\"nav-menu\">\n                <li><a href=\"#features\">\u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627<\/a><\/li>\n                <li><a href=\"#how\">\u0646\u062d\u0648\u0647 \u06a9\u0627\u0631<\/a><\/li>\n                <li><a href=\"#pricing\">\u0642\u06cc\u0645\u062a\u200c\u0647\u0627<\/a><\/li>\n                <li><a href=\"#testimonials\">\u0646\u0638\u0631\u0627\u062a<\/a><\/li>\n                <li><a href=\"\/about.html\">\u062f\u0631\u0628\u0627\u0631\u0647 \u0645\u0627<\/a><\/li>\n            <\/ul>\n\n            <div class=\"nav-actions\">\n                <a href=\"https:\/\/panel.digi-yaar.ir\/login\" class=\"btn btn-brand\">\u0634\u0631\u0648\u0639 \u0631\u0627\u06cc\u06af\u0627\u0646<\/a>\n            <\/div>\n\n            <button class=\"nav-toggle\" aria-label=\"\u0645\u0646\u0648\">\n                <span><\/span><span><\/span><span><\/span>\n            <\/button>\n        <\/div>\n    <\/div>\n<\/header>\n\n<!-- ==============================\n     HERO\n============================== -->\n<section class=\"hero\">\n    <div class=\"container\">\n        <div class=\"hero-text\">\n            <div class=\"hero-badge\">\n                <span class=\"hero-badge-dot\"><\/span>\n                \u067e\u0644\u062a\u0641\u0631\u0645 \u0627\u0631\u062a\u0628\u0627\u0637 \u0647\u0648\u0634\u0645\u0646\u062f\n            <\/div>\n            <div class=\"bouncing-cursor\">\n                    <div class=\"bc-dot-row\">\n                        <span class=\"bc-dot\"><\/span>\n                        <span class=\"bc-dot\"><\/span>\n                        <span class=\"bc-dot\"><\/span>\n                    <\/div>\n                    <span class=\"bc-arrow\">\u2304<\/span>\n                <\/div>\n                <h1 class=\"t-1\">\n                    \u0627\u0631\u062a\u0628\u0627\u0637 \u0647\u0648\u0634\u0645\u0646\u062f \u0628\u0627 \u0645\u0634\u062a\u0631\u06cc\u0627\u0646\u060c\n                    <span class=\"gradient\">\u062f\u0631 \u06cc\u06a9 \u067e\u0644\u062a\u0641\u0631\u0645<\/span>\n                <\/h1>\n            <p>\n                \u067e\u06cc\u0627\u0645\u200c\u0631\u0633\u0627\u0646\u06cc \u0627\u0646\u0628\u0648\u0647\u060c \u0686\u062a\u200c\u0628\u0627\u062a \u0647\u0648\u0634\u0645\u0646\u062f\u060c \u0648 \u0627\u062a\u0635\u0627\u0644 \u0622\u0633\u0627\u0646 \u0628\u0647 \u0633\u0627\u06cc\u062a \u2014 \u0647\u0645\u0647 \u0627\u0645\u06a9\u0627\u0646\u0627\u062a \u0628\u0627\u0632\u0627\u0631\u06cc\u0627\u0628\u06cc \u0648 \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0645\u0634\u062a\u0631\u06cc\u0627\u0646\u060c \u06cc\u06a9\u062c\u0627.\n            <\/p>\n            <div class=\"hero-buttons\">\n                <a href=\"https:\/\/panel.digi-yaar.ir\/login\" class=\"btn btn-brand btn-lg\">\u0634\u0631\u0648\u0639 \u0631\u0627\u06cc\u06af\u0627\u0646<\/a>\n                <a href=\"#features\" class=\"btn btn-outline btn-lg\">\u0645\u0634\u0627\u0647\u062f\u0647 \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627<\/a>\n            <\/div>\n            <div class=\"hero-metrics\">\n                <div>\n                    <div class=\"metric-val\">+\u06f1M<\/div>\n                    <div class=\"metric-label\">\u067e\u06cc\u0627\u0645 \u0627\u0631\u0633\u0627\u0644 \u0634\u062f\u0647<\/div>\n                <\/div>\n                <div>\n                    <div class=\"metric-val\">+\u06f5,\u06f0\u06f0\u06f0<\/div>\n                    <div class=\"metric-label\">\u06a9\u0627\u0631\u0628\u0631 \u0641\u0639\u0627\u0644<\/div>\n                <\/div>\n                <div>\n                    <div class=\"metric-val\">\u06f9\u06f9.\u06f9\u066a<\/div>\n                    <div class=\"metric-label\">\u0622\u067e\u062a\u0627\u06cc\u0645 \u0633\u0631\u0648\u06cc\u0633<\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <div class=\"hero-visual\">\n            <div class=\"mockup\">\n                <div class=\"mockup-bar\">\n                    <div class=\"mockup-dot r\"><\/div>\n                    <div class=\"mockup-dot y\"><\/div>\n                    <div class=\"mockup-dot g\"><\/div>\n                <\/div>\n                <div class=\"mockup-content\">\n                    <div class=\"chat-gap\">\n                        <div class=\"chat-bubble bot typewriter-target\" data-delay=\"0\">\u0633\u0644\u0627\u0645! \ud83d\udc4b \u0628\u0647 \u062f\u06cc\u062c\u06cc\u200c\u06cc\u0627\u0631 \u062e\u0648\u0634 \u0622\u0645\u062f\u06cc\u062f. \u0686\u0637\u0648\u0631 \u0645\u06cc\u062a\u0648\u0646\u0645 \u06a9\u0645\u06a9\u062a\u0648\u0646 \u06a9\u0646\u0645\u061f<\/div>\n                        <div class=\"chat-bubble user typewriter-target\" data-delay=\"3000\">\u0645\u06cc\u200c\u062e\u0648\u0627\u0645 \u067e\u06cc\u0627\u0645 \u0627\u0646\u0628\u0648\u0647 \u0628\u0641\u0631\u0633\u062a\u0645<\/div>\n                        <div class=\"chat-bubble bot typewriter-target\" data-delay=\"6000\">\u062d\u062a\u0645\u0627\u064b! \u0628\u0631\u0627\u06cc \u0634\u0631\u0648\u0639 \u0644\u0637\u0641\u0627\u064b \u0644\u06cc\u0633\u062a \u0645\u062e\u0627\u0637\u0628\u06cc\u0646\u062a\u0648\u0646 \u0631\u0627 \u0622\u067e\u0644\u0648\u062f \u06a9\u0646\u06cc\u062f \u06cc\u0627 \u0628\u0627\u062a\u200c\u062a\u0627\u0646 \u0631\u0627 \u0627\u0632 \u067e\u0646\u0644 \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u062f. \u2705<\/div>\n                    <\/div>\n                    <div class=\"chat-input\">\n                        <span>\u067e\u06cc\u0627\u0645 \u062e\u0648\u062f \u0631\u0627 \u0628\u0646\u0648\u06cc\u0633\u06cc\u062f&#8230;<\/span>\n                        <div class=\"chat-send-btn\">\u27a4<\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/section>\n\n<!-- ==============================\n     COMPANIES BAR\n============================== -->\n<section class=\"companies\">\n    <div class=\"container\">\n        <p class=\"companies-label\">\u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0627\u0632 \u067e\u06cc\u0627\u0645\u200c\u0631\u0633\u0627\u0646\u200c\u0647\u0627\u06cc \u0645\u062d\u0628\u0648\u0628<\/p>\n        <div class=\"companies-list\">\n            <span class=\"company-item\">\u062a\u0644\u06af\u0631\u0627\u0645<\/span>\n            <span class=\"company-item\">\u0648\u0627\u062a\u0633\u0627\u067e<\/span>\n            <span class=\"company-item\">\u0631\u0648\u0628\u06cc\u06a9\u0627<\/span>\n            <span class=\"company-item\">\u0627\u06cc\u062a\u0627<\/span>\n            <span class=\"company-item\">\u0628\u0644\u0647<\/span>\n            <span class=\"company-item\">\u067e\u06cc\u0627\u0645\u06a9<\/span>\n        <\/div>\n    <\/div>\n<\/section>\n\n<!-- ==============================\n     FEATURES\n============================== -->\n<section id=\"features\" class=\"section\">\n    <div class=\"container\">\n        <div class=\"section-header\">\n            <span class=\"tag\">\u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627<\/span>\n            <h2 class=\"t-2\">\u0686\u0631\u0627 \u062f\u06cc\u062c\u06cc\u200c\u06cc\u0627\u0631 \u0631\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u06cc\u062f\u061f<\/h2>\n            <p>\u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc \u062d\u0631\u0641\u0647\u200c\u0627\u06cc \u0628\u0631\u0627\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u0627\u0631\u062a\u0628\u0627\u0637 \u0628\u0627 \u0645\u0634\u062a\u0631\u06cc\u0627\u0646\u060c \u0633\u0627\u062f\u0647 \u0648 \u06a9\u0627\u0631\u0628\u0631\u062f\u06cc<\/p>\n        <\/div>\n\n        <div class=\"features-grid\">\n            <div class=\"feature reveal\">\n                <div class=\"feature-icon feature-icon--brand\">\ud83d\udcf1<\/div>\n                <h3>\u062b\u0628\u062a\u200c\u0646\u0627\u0645 \u0633\u0631\u06cc\u0639 \u0628\u0627 \u0645\u0648\u0628\u0627\u06cc\u0644<\/h3>\n                <p>\u0628\u062f\u0648\u0646 \u0627\u06cc\u0645\u06cc\u0644 \u06cc\u0627 \u0631\u0645\u0632 \u067e\u06cc\u0686\u06cc\u062f\u0647\u060c \u0641\u0642\u0637 \u0628\u0627 \u0634\u0645\u0627\u0631\u0647 \u0645\u0648\u0628\u0627\u06cc\u0644. \u062b\u0628\u062a\u200c\u0646\u0627\u0645 \u06f1 \u062f\u0642\u06cc\u0642\u0647\u200c\u0627\u06cc \u0628\u062f\u0648\u0646 \u062f\u0631\u062f\u0633\u0631.<\/p>\n            <\/div>\n\n            <div class=\"feature reveal\">\n                <div class=\"feature-icon feature-icon--green\">\ud83e\udd16<\/div>\n                <h3>\u0633\u0627\u062e\u062a \u062e\u0648\u062f\u06a9\u0627\u0631 \u0628\u0627\u062a\u200c\u0647\u0627<\/h3>\n                <p>\u0628\u0627\u062a\u200c\u0647\u0627\u06cc \u062a\u0644\u06af\u0631\u0627\u0645\u060c \u0648\u0627\u062a\u0633\u0627\u067e\u060c \u0631\u0648\u0628\u06cc\u06a9\u0627\u060c \u0627\u06cc\u062a\u0627 \u0648 \u0628\u0644\u0647 \u0628\u0647 \u0635\u0648\u0631\u062a \u062e\u0648\u062f\u06a9\u0627\u0631 \u0633\u0627\u062e\u062a\u0647 \u0648 \u0641\u0639\u0627\u0644 \u0645\u06cc\u200c\u0634\u0648\u0646\u062f.<\/p>\n            <\/div>\n\n            <div class=\"feature reveal\">\n                <div class=\"feature-icon feature-icon--orange\">\ud83d\udce8<\/div>\n                <h3>\u0627\u0631\u0633\u0627\u0644 \u067e\u06cc\u0627\u0645 \u0627\u0646\u0628\u0648\u0647<\/h3>\n                <p>\u067e\u06cc\u0627\u0645\u200c\u0647\u0627 \u0631\u0627 \u0628\u0647 \u0647\u0632\u0627\u0631\u0627\u0646 \u0645\u062e\u0627\u0637\u0628 \u0627\u0632 \u0637\u0631\u06cc\u0642 \u067e\u06cc\u0627\u0645\u200c\u0631\u0633\u0627\u0646\u200c\u0647\u0627\u060c SMS \u0648 \u0627\u06cc\u0645\u06cc\u0644 \u0627\u0631\u0633\u0627\u0644 \u06a9\u0646\u06cc\u062f.<\/p>\n            <\/div>\n\n            <div class=\"feature reveal\">\n                <div class=\"feature-icon\" style=\"background:var(--neutral-100);\">\ud83d\udcac<\/div>\n                <h3>\u0686\u062a\u200c\u0628\u0627\u062a \u0647\u0648\u0634\u0645\u0646\u062f<\/h3>\n                <p>FAQ \u062e\u0648\u062f\u06a9\u0627\u0631 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f\u060c \u062a\u06cc\u06a9\u062a \u062b\u0628\u062a \u06a9\u0646\u06cc\u062f \u0648 \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u06f2\u06f4\/\u06f7 \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u06cc\u062f.<\/p>\n            <\/div>\n\n            <div class=\"feature reveal\">\n                <div class=\"feature-icon feature-icon--brand\">\ud83d\udd17<\/div>\n                <h3>\u0627\u062a\u0635\u0627\u0644 \u0628\u0647 \u0633\u0627\u06cc\u062a<\/h3>\n                <p>\u0628\u0627 API \u06cc\u0627 \u0627\u0641\u0632\u0648\u0646\u0647 \u0648\u0631\u062f\u067e\u0631\u0633\u060c \u0646\u0648\u062a\u06cc\u0641\u06cc\u06a9\u06cc\u0634\u0646 \u062e\u0648\u062f\u06a9\u0627\u0631 \u0628\u0631\u0627\u06cc \u0645\u0634\u062a\u0631\u06cc\u0627\u0646 \u0627\u0631\u0633\u0627\u0644 \u06a9\u0646\u06cc\u062f.<\/p>\n            <\/div>\n\n            <div class=\"feature reveal\">\n                <div class=\"feature-icon feature-icon--green\">\ud83d\udcca<\/div>\n                <h3>\u06af\u0632\u0627\u0631\u0634\u200c\u06af\u06cc\u0631\u06cc \u067e\u06cc\u0634\u0631\u0641\u062a\u0647<\/h3>\n                <p>\u0622\u0645\u0627\u0631 \u0627\u0631\u0633\u0627\u0644\u060c \u0646\u0631\u062e \u062e\u0648\u0627\u0646\u062f\u0647 \u0634\u062f\u0646\u060c \u0648 \u0639\u0645\u0644\u06a9\u0631\u062f \u0628\u0627\u062a\u200c\u0647\u0627 \u0631\u0627 \u062f\u0631 \u062f\u0627\u0634\u0628\u0648\u0631\u062f \u0628\u0628\u06cc\u0646\u06cc\u062f.<\/p>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/section>\n\n<!-- ==============================\n     HOW IT WORKS\n============================== -->\n<section id=\"how\" class=\"section\">\n    <div class=\"container\">\n        <div class=\"section-header\">\n            <span class=\"tag\">\u0645\u0631\u0627\u062d\u0644 \u0634\u0631\u0648\u0639<\/span>\n            <h2 class=\"t-2\">\u062f\u0631 \u06f4 \u0642\u062f\u0645 \u0633\u0627\u062f\u0647 \u0634\u0631\u0648\u0639 \u06a9\u0646\u06cc\u062f<\/h2>\n            <p>\u0627\u0632 \u062b\u0628\u062a\u200c\u0646\u0627\u0645 \u062a\u0627 \u0627\u0648\u0644\u06cc\u0646 \u067e\u06cc\u0627\u0645\u060c \u0641\u0642\u0637 \u0686\u0646\u062f \u062f\u0642\u06cc\u0642\u0647 \u0637\u0648\u0644 \u0645\u06cc\u200c\u06a9\u0634\u062f<\/p>\n        <\/div>\n\n        <div class=\"steps\">\n            <div class=\"step-line\"><\/div>\n\n            <div class=\"step reveal\">\n                <div class=\"step-num\">\u06f1<\/div>\n                <h3>\u062b\u0628\u062a\u200c\u0646\u0627\u0645 \u0628\u0627 \u0645\u0648\u0628\u0627\u06cc\u0644<\/h3>\n                <p>\u0634\u0645\u0627\u0631\u0647 \u062e\u0648\u062f \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f \u0648 \u06a9\u062f \u062a\u0623\u06cc\u06cc\u062f \u0631\u0627 \u062f\u0631\u06cc\u0627\u0641\u062a \u06a9\u0646\u06cc\u062f.<\/p>\n            <\/div>\n\n            <div class=\"step reveal\">\n                <div class=\"step-num\">\u06f2<\/div>\n                <h3>\u0633\u0627\u062e\u062a \u062e\u0648\u062f\u06a9\u0627\u0631 \u0628\u0627\u062a\u200c\u0647\u0627<\/h3>\n                <p>\u0628\u0627\u062a\u200c\u0647\u0627\u06cc \u0634\u0645\u0627 \u0631\u0648\u06cc \u067e\u06cc\u0627\u0645\u200c\u0631\u0633\u0627\u0646\u200c\u0647\u0627\u06cc \u0645\u062e\u062a\u0644\u0641 \u0622\u0645\u0627\u062f\u0647 \u0645\u06cc\u200c\u0634\u0648\u0646\u062f.<\/p>\n            <\/div>\n\n            <div class=\"step reveal\">\n                <div class=\"step-num\">\u06f3<\/div>\n                <h3>\u0627\u0631\u0633\u0627\u0644 \u06cc\u0627 \u0686\u062a\u200c\u0628\u0627\u062a<\/h3>\n                <p>\u067e\u06cc\u0627\u0645 \u0627\u0646\u0628\u0648\u0647 \u0628\u0641\u0631\u0633\u062a\u06cc\u062f \u06cc\u0627 FAQ \u062e\u0648\u062f\u06a9\u0627\u0631 \u062a\u0639\u0631\u06cc\u0641 \u06a9\u0646\u06cc\u062f.<\/p>\n            <\/div>\n\n            <div class=\"step reveal\">\n                <div class=\"step-num\">\u06f4<\/div>\n                <h3>\u0627\u062a\u0635\u0627\u0644 \u0628\u0647 \u0633\u0627\u06cc\u062a<\/h3>\n                <p>\u0628\u0627 API \u06cc\u0627 \u0627\u0641\u0632\u0648\u0646\u0647 \u0648\u0631\u062f\u067e\u0631\u0633 \u067e\u06cc\u0627\u0645 \u062e\u0648\u062f\u06a9\u0627\u0631 \u0627\u0631\u0633\u0627\u0644 \u06a9\u0646\u06cc\u062f.<\/p>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/section>\n\n<!-- ==============================\n     STATS\n============================== -->\n<section class=\"section stats\">\n    <div class=\"container\">\n        <div class=\"section-header\">\n            <span class=\"tag\">\u0622\u0645\u0627\u0631 \u0648 \u0639\u0645\u0644\u06a9\u0631\u062f<\/span>\n            <h2 class=\"t-2\">\u0627\u0639\u062a\u0645\u0627\u062f \u0628\u06cc\u0634 \u0627\u0632 \u06f1,\u06f0\u06f0\u06f0 \u06a9\u0633\u0628\u200c\u0648\u06a9\u0627\u0631<\/h2>\n        <\/div>\n\n        <div class=\"stats-grid\">\n            <div class=\"stat reveal\">\n                <div class=\"stat-val\"><span class=\"grad\">+\u06f1M<\/span><\/div>\n                <div class=\"stat-lbl\">\u067e\u06cc\u0627\u0645 \u0627\u0631\u0633\u0627\u0644\u200c\u0634\u062f\u0647<\/div>\n            <\/div>\n            <div class=\"stat reveal\">\n                <div class=\"stat-val\"><span class=\"grad\">+\u06f5,\u06f0\u06f0\u06f0<\/span><\/div>\n                <div class=\"stat-lbl\">\u06a9\u0627\u0631\u0628\u0631 \u0641\u0639\u0627\u0644<\/div>\n            <\/div>\n            <div class=\"stat reveal\">\n                <div class=\"stat-val\"><span class=\"grad\">\u06f9\u06f9.\u06f9\u066a<\/span><\/div>\n                <div class=\"stat-lbl\">\u0622\u067e\u062a\u0627\u06cc\u0645 \u0633\u0631\u0648\u06cc\u0633<\/div>\n            <\/div>\n            <div class=\"stat reveal\">\n                <div class=\"stat-val\"><span class=\"grad\">\u06f2\u06f4\/\u06f7<\/span><\/div>\n                <div class=\"stat-lbl\">\u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0622\u0646\u0644\u0627\u06cc\u0646<\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/section>\n\n<!-- ==============================\n     TESTIMONIALS\n============================== -->\n<section id=\"testimonials\" class=\"section\">\n    <div class=\"container\">\n        <div class=\"section-header\">\n            <span class=\"tag\">\u0646\u0638\u0631\u0627\u062a \u0645\u0634\u062a\u0631\u06cc\u0627\u0646<\/span>\n            <h2 class=\"t-2\">\u0645\u0634\u062a\u0631\u06cc\u0627\u0646 \u0645\u0627 \u0686\u0647 \u0645\u06cc\u200c\u06af\u0648\u06cc\u0646\u062f\u061f<\/h2>\n        <\/div>\n\n        <div class=\"testimonials-grid\">\n            <div class=\"testimonial reveal\">\n                <p class=\"testimonial-q\">\u00ab\u062f\u06cc\u062c\u06cc\u200c\u06cc\u0627\u0631 \u0646\u062d\u0648\u0647 \u0627\u0631\u062a\u0628\u0627\u0637 \u0645\u0627 \u0628\u0627 \u0645\u0634\u062a\u0631\u06cc\u0627\u0646 \u0631\u0627 \u0645\u062a\u062d\u0648\u0644 \u06a9\u0631\u062f. \u0627\u0631\u0633\u0627\u0644 \u067e\u06cc\u0627\u0645 \u0627\u0646\u0628\u0648\u0647 \u0648 \u0645\u062f\u06cc\u0631\u06cc\u062a \u062a\u06cc\u06a9\u062a\u200c\u0647\u0627 \u062e\u06cc\u0644\u06cc \u0633\u0627\u062f\u0647 \u0634\u062f\u0647.\u00bb<\/p>\n                <div class=\"testimonial-author\">\n                    <div class=\"testimonial-avatar\">\u0645<\/div>\n                    <div>\n                        <div class=\"testimonial-name\">\u0645\u062d\u0645\u062f \u0631\u0636\u0627\u06cc\u06cc<\/div>\n                        <div class=\"testimonial-role\">\u0645\u062f\u06cc\u0631 \u0641\u0631\u0648\u0634\u06af\u0627\u0647 \u0622\u0646\u0644\u0627\u06cc\u0646<\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"testimonial reveal\">\n                <p class=\"testimonial-q\">\u00ab\u0686\u062a\u200c\u0628\u0627\u062a \u062e\u0648\u062f\u06a9\u0627\u0631 \u062f\u06cc\u062c\u06cc\u200c\u06cc\u0627\u0631 \u0628\u0627\u0639\u062b \u0634\u062f\u0647 \u06f6\u06f0\u066a \u062a\u0645\u0627\u0633\u200c\u0647\u0627\u06cc \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0645\u0627 \u062e\u0648\u062f\u06a9\u0627\u0631 \u067e\u0627\u0633\u062e \u062f\u0627\u062f\u0647 \u0628\u0634\u0647. \u0641\u0648\u0642\u200c\u0627\u0644\u0639\u0627\u062f\u0647\u200c\u0633\u062a.\u00bb<\/p>\n                <div class=\"testimonial-author\">\n                    <div class=\"testimonial-avatar\">\u0633<\/div>\n                    <div>\n                        <div class=\"testimonial-name\">\u0633\u0627\u0631\u0627 \u0627\u062d\u0645\u062f\u06cc<\/div>\n                        <div class=\"testimonial-role\">\u0645\u062f\u06cc\u0631 \u062a\u06cc\u0645 \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc<\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"testimonial reveal\">\n                <p class=\"testimonial-q\">\u00ab\u0627\u062a\u0635\u0627\u0644 \u0648\u0631\u062f\u067e\u0631\u0633 \u0628\u0647 \u062f\u06cc\u062c\u06cc\u200c\u06cc\u0627\u0631 \u062e\u06cc\u0644\u06cc \u0622\u0633\u0648\u0646 \u0628\u0648\u062f. \u062d\u0627\u0644\u0627 \u062e\u0648\u062f\u06a9\u0627\u0631 \u0628\u0631\u0627\u06cc \u0647\u0631 \u0633\u0641\u0627\u0631\u0634 \u067e\u06cc\u0627\u0645 \u062a\u0623\u06cc\u06cc\u062f \u0627\u0631\u0633\u0627\u0644 \u0645\u06cc\u200c\u0634\u0647.\u00bb<\/p>\n                <div class=\"testimonial-author\">\n                    <div class=\"testimonial-avatar\">\u0639<\/div>\n                    <div>\n                        <div class=\"testimonial-name\">\u0639\u0644\u06cc \u0645\u062d\u0645\u062f\u06cc<\/div>\n                        <div class=\"testimonial-role\">\u0628\u0627\u0632\u0627\u0631\u06cc\u0627\u0628 \u062f\u06cc\u062c\u06cc\u062a\u0627\u0644<\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/section>\n\n<!-- ==============================\n     PRICING\n============================== -->\n<section id=\"pricing\" class=\"section\">\n    <div class=\"container\">\n        <div class=\"section-header\">\n            <span class=\"tag\">\u062a\u0639\u0631\u0641\u0647\u200c\u0647\u0627<\/span>\n            <h2 class=\"t-2\">\u067e\u0644\u0646 \u0645\u0646\u0627\u0633\u0628 \u062e\u0648\u062f \u0631\u0627 \u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u06cc\u062f<\/h2>\n            <p>\u0628\u0627 \u0647\u0631 \u0628\u0648\u062f\u062c\u0647\u200c\u0627\u06cc \u0645\u06cc\u200c\u062a\u0648\u0646\u06cc\u062f \u0634\u0631\u0648\u0639 \u06a9\u0646\u06cc\u062f<\/p>\n        <\/div>\n\n        <div class=\"pricing-grid\">\n            <!-- Free -->\n            <div class=\"price-card reveal\">\n                <div class=\"price-name\">\u0631\u0627\u06cc\u06af\u0627\u0646<\/div>\n                <div class=\"price-desc\">\u0628\u0631\u0627\u06cc \u0634\u0631\u0648\u0639 \u0648 \u0622\u0634\u0646\u0627\u06cc\u06cc<\/div>\n                <div class=\"price-row\"><span class=\"price-amount\">\u06f0<\/span><span class=\"price-sub\">\u062a\u0648\u0645\u0627\u0646<\/span><\/div>\n                <div class=\"price-period\">\u0628\u0631\u0627\u06cc \u0647\u0645\u06cc\u0634\u0647 \u0631\u0627\u06cc\u06af\u0627\u0646<\/div>\n                <div class=\"price-div\"><\/div>\n                <ul class=\"price-feat\">\n                    <li><span class=\"check\">\u2713<\/span> \u06f1\u06f0\u06f0 \u067e\u06cc\u0627\u0645 \u062f\u0631 \u0645\u0627\u0647<\/li>\n                    <li><span class=\"check\">\u2713<\/span> \u06f1 \u0628\u0627\u062a \u0641\u0639\u0627\u0644<\/li>\n                    <li><span class=\"check\">\u2713<\/span> \u062f\u0627\u0634\u0628\u0648\u0631\u062f \u067e\u0627\u06cc\u0647<\/li>\n                    <li><span class=\"check\">\u2713<\/span> \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0627\u06cc\u0645\u06cc\u0644\u06cc<\/li>\n                <\/ul>\n                <a href=\"https:\/\/panel.digi-yaar.ir\/login\" class=\"btn btn-outline\">\u0634\u0631\u0648\u0639 \u0631\u0627\u06cc\u06af\u0627\u0646<\/a>\n            <\/div>\n\n            <!-- Pro -->\n            <div class=\"price-card price-card--featured reveal\">\n                <div class=\"price-badge\">\u0645\u062d\u0628\u0648\u0628\u200c\u062a\u0631\u06cc\u0646<\/div>\n                <div class=\"price-name\">\u062d\u0631\u0641\u0647\u200c\u0627\u06cc<\/div>\n                <div class=\"price-desc\">\u0628\u0631\u0627\u06cc \u06a9\u0633\u0628\u200c\u0648\u06a9\u0627\u0631 \u062f\u0631 \u062d\u0627\u0644 \u0631\u0634\u062f<\/div>\n                <div class=\"price-row\"><span class=\"price-amount\">\u06f5\u06f0\u06f0<\/span><span class=\"price-sub\">\u0647\u0632\u0627\u0631 \u062a\u0648\u0645\u0627\u0646<\/span><\/div>\n                <div class=\"price-period\">\u062f\u0631 \u0645\u0627\u0647<\/div>\n                <div class=\"price-div\"><\/div>\n                <ul class=\"price-feat\">\n                    <li><span class=\"check\">\u2713<\/span> \u06f1\u06f0,\u06f0\u06f0\u06f0 \u067e\u06cc\u0627\u0645 \u062f\u0631 \u0645\u0627\u0647<\/li>\n                    <li><span class=\"check\">\u2713<\/span> \u06f5 \u0628\u0627\u062a \u0641\u0639\u0627\u0644<\/li>\n                    <li><span class=\"check\">\u2713<\/span> \u0627\u062a\u0635\u0627\u0644 API<\/li>\n                    <li><span class=\"check\">\u2713<\/span> \u0627\u0641\u0632\u0648\u0646\u0647 \u0648\u0631\u062f\u067e\u0631\u0633<\/li>\n                    <li><span class=\"check\">\u2713<\/span> \u06af\u0632\u0627\u0631\u0634\u200c\u0647\u0627\u06cc \u067e\u06cc\u0634\u0631\u0641\u062a\u0647<\/li>\n                    <li><span class=\"check\">\u2713<\/span> \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0627\u0648\u0644\u0648\u06cc\u062a\u200c\u062f\u0627\u0631<\/li>\n                <\/ul>\n                <a href=\"https:\/\/panel.digi-yaar.ir\/login\" class=\"btn btn-brand btn-lg\">\u062e\u0631\u06cc\u062f \u067e\u0644\u0646<\/a>\n            <\/div>\n\n            <!-- Enterprise -->\n            <div class=\"price-card reveal\">\n                <div class=\"price-name\">\u0633\u0627\u0632\u0645\u0627\u0646\u06cc<\/div>\n                <div class=\"price-desc\">\u0633\u0641\u0627\u0631\u0634\u06cc\u200c\u0633\u0627\u0632\u06cc \u06a9\u0627\u0645\u0644<\/div>\n                <div class=\"price-row\"><span class=\"price-amount\">\u062a\u0648\u0627\u0641\u0642\u06cc<\/span><\/div>\n                <div class=\"price-period\">\u0628\u0631 \u0627\u0633\u0627\u0633 \u0646\u06cc\u0627\u0632 \u0634\u0645\u0627<\/div>\n                <div class=\"price-div\"><\/div>\n                <ul class=\"price-feat\">\n                    <li><span class=\"check\">\u2713<\/span> \u067e\u06cc\u0627\u0645 \u0646\u0627\u0645\u062d\u062f\u0648\u062f<\/li>\n                    <li><span class=\"check\">\u2713<\/span> \u0628\u0627\u062a \u0646\u0627\u0645\u062d\u062f\u0648\u062f<\/li>\n                    <li><span class=\"check\">\u2713<\/span> \u0648\u0628\u200c\u0647\u0648\u06a9 \u0633\u0641\u0627\u0631\u0634\u06cc<\/li>\n                    <li><span class=\"check\">\u2713<\/span> \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0627\u062e\u062a\u0635\u0627\u0635\u06cc \u06f2\u06f4\/\u06f7<\/li>\n                    <li><span class=\"check\">\u2713<\/span> SLA \u062a\u0636\u0645\u06cc\u0646\u06cc<\/li>\n                <\/ul>\n                <a href=\"#contact\" class=\"btn btn-outline\">\u062a\u0645\u0627\u0633 \u0628\u0627 \u0641\u0631\u0648\u0634<\/a>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/section>\n\n<!-- ==============================\n     USE CASES\n============================== -->\n<section id=\"usecases\" class=\"section\">\n    <div class=\"container\">\n        <div class=\"section-header\">\n            <span class=\"tag\">\u06a9\u0627\u0631\u0628\u0631\u062f\u0647\u0627<\/span>\n            <h2 class=\"t-2\">\u062f\u06cc\u062c\u06cc\u200c\u06cc\u0627\u0631 \u0628\u0631\u0627\u06cc \u0686\u0647 \u06a9\u0633\u0627\u0646\u06cc \u0645\u0646\u0627\u0633\u0628 \u0627\u0633\u062a\u061f<\/h2>\n        <\/div>\n\n        <div class=\"usecases-grid\">\n            <div class=\"usecase reveal\">\n                <div class=\"usecase-icon\">\ud83d\uded2<\/div>\n                <h3>\u0641\u0631\u0648\u0634\u06af\u0627\u0647\u200c\u0647\u0627\u06cc \u0622\u0646\u0644\u0627\u06cc\u0646<\/h3>\n                <p>\u0627\u0631\u0633\u0627\u0644 \u062e\u0648\u062f\u06a9\u0627\u0631 \u067e\u06cc\u0627\u0645 \u062a\u0623\u06cc\u06cc\u062f \u062e\u0631\u06cc\u062f\u060c \u06a9\u062f \u067e\u06cc\u06af\u06cc\u0631\u06cc \u0648 \u06cc\u0627\u062f\u0622\u0648\u0631\u06cc \u0633\u0641\u0627\u0631\u0634. \u0627\u0641\u0632\u0627\u06cc\u0634 \u0646\u0631\u062e \u0628\u0627\u0632\u06af\u0634\u062a \u062e\u0631\u06cc\u062f.<\/p>\n            <\/div>\n\n            <div class=\"usecase reveal\">\n                <div class=\"usecase-icon\">\ud83c\udfa7<\/div>\n                <h3>\u062a\u06cc\u0645\u200c\u0647\u0627\u06cc \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc<\/h3>\n                <p>\u062f\u0631\u06cc\u0627\u0641\u062a \u062a\u06cc\u06a9\u062a \u0627\u0632 \u0628\u0627\u062a\u060c \u067e\u0627\u0633\u062e\u200c\u06af\u0648\u06cc\u06cc \u0627\u0632 \u062f\u0627\u062e\u0644 \u067e\u0646\u0644\u060c FAQ \u062e\u0648\u062f\u06a9\u0627\u0631. \u06a9\u0627\u0647\u0634 \u06f6\u06f0\u066a \u062d\u062c\u0645 \u062a\u0645\u0627\u0633\u200c\u0647\u0627.<\/p>\n            <\/div>\n\n            <div class=\"usecase reveal\">\n                <div class=\"usecase-icon\">\ud83d\udcca<\/div>\n                <h3>\u0628\u0627\u0632\u0627\u0631\u06cc\u0627\u0628\u0627\u0646 \u0648 \u0622\u0698\u0627\u0646\u0633\u200c\u0647\u0627<\/h3>\n                <p>\u0627\u0631\u0633\u0627\u0644 \u06a9\u0645\u067e\u06cc\u0646 \u0627\u0646\u0628\u0648\u0647\u060c \u0645\u062f\u06cc\u0631\u06cc\u062a \u0686\u0646\u062f \u0645\u0634\u062a\u0631\u06cc\u060c \u0627\u062a\u0635\u0627\u0644 \u0628\u0647 CRM. \u0645\u062f\u06cc\u0631\u06cc\u062a \u0647\u0645\u0647 \u0645\u0634\u062a\u0631\u06cc\u0627\u0646 \u062f\u0631 \u06cc\u06a9 \u062c\u0627.<\/p>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/section>\n\n<!-- ==============================\n     CTA\n============================== -->\n<section class=\"cta\">\n    <div class=\"container\">\n        <div class=\"cta-inner reveal\">\n            <h2 class=\"t-2\">\u0647\u0645\u06cc\u0646 \u062d\u0627\u0644\u0627 \u0634\u0631\u0648\u0639 \u06a9\u0646\u06cc\u062f \u2014 \u0631\u0627\u06cc\u06af\u0627\u0646!<\/h2>\n            <p>\u0646\u06cc\u0627\u0632\u06cc \u0628\u0647 \u06a9\u0627\u0631\u062a \u0627\u0639\u062a\u0628\u0627\u0631\u06cc \u0646\u06cc\u0633\u062a. \u062f\u0631 \u06a9\u0645\u062a\u0631 \u0627\u0632 \u06f2 \u062f\u0642\u06cc\u0642\u0647 \u0622\u0645\u0627\u062f\u0647 \u0628\u0627\u0634\u06cc\u062f.<\/p>\n            <a href=\"https:\/\/panel.digi-yaar.ir\/login\" class=\"btn btn-lg\">\u062b\u0628\u062a\u200c\u0646\u0627\u0645 \u0628\u0627 \u0634\u0645\u0627\u0631\u0647 \u0645\u0648\u0628\u0627\u06cc\u0644<\/a>\n        <\/div>\n    <\/div>\n<\/section>\n\n<!-- ==============================\n     FOOTER\n============================== -->\n<footer>\n    <div class=\"container\">\n        <div class=\"footer-grid\">\n            <!-- 1. Thisiad \/ Brand (first in RTL = rightmost) -->\n            <div class=\"footer-brand\">\n                <h3>\u062f\u06cc\u062c\u06cc\u200c\u06cc\u0627\u0631<\/h3>\n                <p>\u067e\u0644\u062a\u0641\u0631\u0645 \u0627\u0631\u062a\u0628\u0627\u0637 \u0647\u0648\u0634\u0645\u0646\u062f \u0628\u0627 \u0645\u0634\u062a\u0631\u06cc\u0627\u0646. \u067e\u06cc\u0627\u0645\u200c\u0631\u0633\u0627\u0646\u06cc \u0627\u0646\u0628\u0648\u0647\u060c \u0686\u062a\u200c\u0628\u0627\u062a \u0648 \u0627\u062a\u0635\u0627\u0644 \u0628\u0647 \u0633\u0627\u06cc\u062a.<\/p>\n                <div class=\"footer-enamad\">\n                    <a href=\"https:\/\/trustseal.enamad.ir\/?id=740614&amp;Code=831vnSotXICeeiWeg26VbZL5D6K1NP8M\" rel=\"noopener\" target=\"_blank\">\n                        <img decoding=\"async\" src=\"https:\/\/trustseal.enamad.ir\/logo.aspx?id=740614&amp;Code=831vnSotXICeeiWeg26VbZL5D6K1NP8M\" alt=\"\u0646\u0645\u0627\u062f \u0627\u0639\u062a\u0645\u0627\u062f \u0627\u0644\u06a9\u062a\u0631\u0648\u0646\u06cc\u06a9\u06cc \u0627\u06cc\u0646\u0645\u0627\u062f\" style=\"max-width:100px;border-radius:8px;cursor:pointer;\">\n                    <\/a>\n                <\/div>\n            <\/div>\n\n            <!-- 2. Useful links -->\n            <div class=\"footer-links\">\n                <h4>\u0644\u06cc\u0646\u06a9\u200c\u0647\u0627\u06cc \u0645\u0641\u06cc\u062f<\/h4>\n                <ul>\n                    <li><a href=\"\/about.html\">\u062f\u0631\u0628\u0627\u0631\u0647 \u0645\u0627<\/a><\/li>\n                    <li><a href=\"#docs\">\u0645\u0633\u062a\u0646\u062f\u0627\u062a<\/a><\/li>\n                    <li><a href=\"#api\">API<\/a><\/li>\n                    <li><a href=\"#blog\">\u0628\u0644\u0627\u06af<\/a><\/li>\n                <\/ul>\n            <\/div>\n\n            <!-- 3. Services -->\n            <div class=\"footer-links\">\n                <h4>\u062e\u062f\u0645\u0627\u062a<\/h4>\n                <ul>\n                    <li><a href=\"#sms\">\u067e\u06cc\u0627\u0645\u200c\u0631\u0633\u0627\u0646\u06cc \u0627\u0646\u0628\u0648\u0647<\/a><\/li>\n                    <li><a href=\"#chatbot\">\u0686\u062a\u200c\u0628\u0627\u062a<\/a><\/li>\n                    <li><a href=\"#wp\">\u0627\u0641\u0632\u0648\u0646\u0647 \u0648\u0631\u062f\u067e\u0631\u0633<\/a><\/li>\n                    <li><a href=\"#webhook\">\u0648\u0628\u200c\u0647\u0648\u06a9<\/a><\/li>\n                <\/ul>\n            <\/div>\n\n            <!-- 4. Contact -->\n            <div class=\"footer-links\">\n                <h4>\u062a\u0645\u0627\u0633 \u0628\u0627 \u0645\u0627<\/h4>\n                <ul>\n                    <li><a href=\"mailto:info@digi-yaar.ir\">\ud83d\udce7 info@digi-yaar.ir<\/a><\/li>\n                    <li>\ud83d\udcde \u06f0\u06f2\u06f1-\u06f8\u06f6\u06f0\u06f8\u06f7\u06f2\u06f0\u06f5<\/li>\n                <\/ul>\n                <p class=\"t-sm\" style=\"margin-top:12px;\">\u062a\u0647\u0631\u0627\u0646\u060c \u062c\u0631\u062f\u0646\u060c \u06cc\u0632\u062f\u0627\u0646\u200c\u067e\u0646\u0627\u0647\u060c \u0633\u0627\u062e\u062a\u0645\u0627\u0646 R&amp;I<\/p>\n            <\/div>\n        <\/div>\n\n        <div class=\"footer-bottom\">\n            <p>\u00a9 \u06f2\u06f0\u06f2\u06f6 \u062f\u06cc\u062c\u06cc\u200c\u06cc\u0627\u0631. \u062a\u0645\u0627\u0645\u06cc \u062d\u0642\u0648\u0642 \u0645\u062d\u0641\u0648\u0638 \u0627\u0633\u062a.<\/p>\n            <p>\n                <a href=\"#privacy\">\u062d\u0631\u06cc\u0645 \u062e\u0635\u0648\u0635\u06cc<\/a> \u00b7\n                <a href=\"#terms\">\u0634\u0631\u0627\u06cc\u0637 \u0627\u0633\u062a\u0641\u0627\u062f\u0647<\/a>\n            <\/p>\n        <\/div>\n    <\/div>\n<\/footer>\n\n<!-- ==============================\n     JS\n============================== -->\n<script>\n    \/\/ Header scroll effect\n    const header = document.getElementById('header');\n    window.addEventListener('scroll', () => {\n        header.classList.toggle('is-scrolled', window.scrollY > 20);\n    });\n\n    \/\/ Scroll reveal\n    const ro = new IntersectionObserver((entries) => {\n        entries.forEach(e => {\n            if (e.isIntersecting) {\n                e.target.classList.add('show');\n                ro.unobserve(e.target);\n            }\n        });\n    }, { threshold: 0.15, rootMargin: '0px 0px -40px 0px' });\n\n    document.querySelectorAll('.reveal').forEach(el => ro.observe(el));\n\n    \/\/ Smooth scroll for anchor links\n    document.querySelectorAll('a[href^=\"#\"]').forEach(a => {\n        a.addEventListener('click', e => {\n            const target = document.querySelector(a.getAttribute('href'));\n            if (target) {\n                e.preventDefault();\n                target.scrollIntoView({ behavior: 'smooth', block: 'start' });\n            }\n        });\n    });\n\n    \/\/ \u2014\u2014\u2014 TYPEWRITER \u2014\u2014\u2014\n    (function() {\n        var h1 = document.querySelector('.hero > .container .t-1');\n        if (!h1) return;\n        var textNode = h1.childNodes[0]; \/\/ first text node: \"\u0627\u0631\u062a\u0628\u0627\u0637 \u0647\u0648\u0634\u0645\u0646\u062f \u0628\u0627 \u0645\u0634\u062a\u0631\u06cc\u0627\u0646\u060c\"\n        if (!textNode || textNode.nodeType !== 3) return;\n\n        var full = '\u0627\u0631\u062a\u0628\u0627\u0637 \u0647\u0648\u0634\u0645\u0646\u062f \u0628\u0627 \u0645\u0634\u062a\u0631\u06cc\u0627\u0646\u060c';\n        var chars = full.split('');\n        var idx = 1;\n        textNode.textContent = chars[0];\n\n        \/\/ Get gradient span reference (it's already in innerHTML)\n        var gradSpan = h1.querySelector('.gradient');\n\n        \/\/ Phase 1: type first text\n        function typeFirst() {\n            if (idx < chars.length) {\n                textNode.textContent += chars[idx];\n                idx++;\n                setTimeout(typeFirst, 35);\n            } else {\n                \/\/ Phase 2: type gradient span\n                if (gradSpan) {\n                    var full2 = '\u062f\u0631 \u06cc\u06a9 \u067e\u0644\u062a\u0641\u0631\u0645';\n                    var chars2 = full2.split('');\n                    var idx2 = 1;\n                    gradSpan.textContent = chars2[0];\n                    function typeSecond() {\n                        if (idx2 < chars2.length) {\n                            gradSpan.textContent += chars2[idx2];\n                            idx2++;\n                            setTimeout(typeSecond, 35);\n                        }\n                    }\n                    setTimeout(typeSecond, 200);\n                }\n            }\n        }\n        setTimeout(typeFirst, 600);\n\n        \/* Typewriter on chat bubbles *\/\n        (function initChatTypewriter() {\n            var targets = document.querySelectorAll('.typewriter-target');\n            if (!targets.length) return;\n            targets.forEach(function (el) {\n                var fullText = el.textContent;\n                el.textContent = '';\n                var cursor = document.createElement('span');\n                cursor.className = 'tw-cursor';\n                el.appendChild(cursor);\n                var delay = parseInt(el.getAttribute('data-delay') || '0', 10);\n                var i = 0;\n                function tick() {\n                    if (i < fullText.length) {\n                        el.insertBefore(document.createTextNode(fullText[i]), cursor);\n                        i++;\n                        setTimeout(tick, 30);\n                    } else {\n                        el.classList.add('typing-done');\n                    }\n                }\n                setTimeout(tick, delay);\n            });\n        })();\n\n    })();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>\u062f\u06cc\u062c\u06cc\u200c\u06cc\u0627\u0631 &#8211; \u067e\u0644\u062a\u0641\u0631\u0645 \u0627\u0631\u062a\u0628\u0627\u0637 \u0647\u0648\u0634\u0645\u0646\u062f \u0628\u0627 \u0645\u0634\u062a\u0631\u06cc\u0627\u0646 D \u062f\u06cc\u062c\u06cc\u200c\u06cc\u0627\u0631 \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627 \u0646\u062d\u0648\u0647 \u06a9\u0627\u0631 \u0642\u06cc\u0645\u062a\u200c\u0647\u0627 \u0646\u0638\u0631\u0627\u062a \u062f\u0631\u0628\u0627\u0631\u0647 \u0645\u0627 \u0634\u0631\u0648\u0639 \u0631\u0627\u06cc\u06af\u0627\u0646 \u067e\u0644\u062a\u0641\u0631\u0645 \u0627\u0631\u062a\u0628\u0627\u0637 \u0647\u0648\u0634\u0645\u0646\u062f \u2304 \u0627\u0631\u062a\u0628\u0627\u0637 \u0647\u0648\u0634\u0645\u0646\u062f \u0628\u0627 \u0645\u0634\u062a\u0631\u06cc\u0627\u0646\u060c \u062f\u0631 \u06cc\u06a9 \u067e\u0644\u062a\u0641\u0631\u0645 \u067e\u06cc\u0627\u0645\u200c\u0631\u0633\u0627\u0646\u06cc \u0627\u0646\u0628\u0648\u0647\u060c \u0686\u062a\u200c\u0628\u0627\u062a \u0647\u0648\u0634\u0645\u0646\u062f\u060c \u0648 \u0627\u062a\u0635\u0627\u0644 \u0622\u0633\u0627\u0646 \u0628\u0647 \u0633\u0627\u06cc\u062a \u2014 \u0647\u0645\u0647 \u0627\u0645\u06a9\u0627\u0646\u0627\u062a \u0628\u0627\u0632\u0627\u0631\u06cc\u0627\u0628\u06cc \u0648 \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0645\u0634\u062a\u0631\u06cc\u0627\u0646\u060c \u06cc\u06a9\u062c\u0627. \u0634\u0631\u0648\u0639 \u0631\u0627\u06cc\u06af\u0627\u0646 \u0645\u0634\u0627\u0647\u062f\u0647 \u0648\u06cc\u0698\u06af\u06cc\u200c\u0647\u0627 +\u06f1M \u067e\u06cc\u0627\u0645 \u0627\u0631\u0633\u0627\u0644 \u0634\u062f\u0647 +\u06f5,\u06f0\u06f0\u06f0 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-63","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/website.digi-yaar.ir\/index.php\/wp-json\/wp\/v2\/pages\/63","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/website.digi-yaar.ir\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/website.digi-yaar.ir\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/website.digi-yaar.ir\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/website.digi-yaar.ir\/index.php\/wp-json\/wp\/v2\/comments?post=63"}],"version-history":[{"count":4,"href":"https:\/\/website.digi-yaar.ir\/index.php\/wp-json\/wp\/v2\/pages\/63\/revisions"}],"predecessor-version":[{"id":70,"href":"https:\/\/website.digi-yaar.ir\/index.php\/wp-json\/wp\/v2\/pages\/63\/revisions\/70"}],"wp:attachment":[{"href":"https:\/\/website.digi-yaar.ir\/index.php\/wp-json\/wp\/v2\/media?parent=63"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}