PageSourceSearch

https://www.jaaar.com/docs/automation/

html jaaar.com collected 2026-10-02 12:10:52 UTC 63,151 bytes, 981 lines download raw bytes

1<!DOCTYPE html>
2<html lang="fa" dir="rtl">
3<head>
4  <meta charset="UTF-8" />
5  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6  <title>اتوماسیون نشریات جار — تحویل خودکار روزنامه‌ها هر روز ساعت ۶ صبح روی شبکهٔ سازمان</title>
7  <meta name="description" content="سرویس اتوماسیون نشریات جار هر روز صبح، روزنامه‌ها و نشریات را به‌صورت خودکار روی شبکهٔ داخلی سازمان شما قرار می‌دهد؛ بدون دانلود دستی، بدون سرور اختصاصی و بدون نیاز کارمندان به اینترنت." />
8  <meta name="theme-color" content="#0c0c0f" />
9
10  <meta property="og:title" content="اتوماسیون نشریات جار" />
11  <meta property="og:description" content="نشریات هر روز ساعت ۶ صبح روی شبکهٔ سازمانتان — بدون اینکه کسی دانلودشان کند." />
12  <meta property="og:type" content="website" />
13
14  <link rel="icon" type="image/png" href="assets/Jaaar-App-Logo.png" />
15
16  <!-- No-JS guard: mark that JS is active. Anything that HIDES content until JS
17       runs must be gated behind `.js` so the page stays fully readable when
18       scripts are blocked (common on locked-down government browsers). -->
19  
19<script>document.documentElement.classList.add('js');</script>
19
20
21  <!-- Brand font: Vazirmatn (per blueprint — closest open match to the Jaaar site face) -->
22  <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />
23  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/rastikerdar/[email protected]/Vazirmatn-font-face.css" />
24
25  <style>
26    /* =========================================================
27       DESIGN TOKENS  (discipline from docs/DESIGN-replicate.md,
28       values are Jaaar's: dark mode + brand red #E8232A + Vazirmatn)
29       ========================================================= */
30    :root {
31      --bg-deep:     #0c0c0f;
32      --bg-surface:  #15151a;
33      --bg-elevated: #1e1e25;
34      --bg-inset:    #101014;
35
36      --brand-red:     #E8232A;
37      --brand-red-dim: #b81d23;
38      --brand-glow:    #ff4d54;
39
40      --text:        #f4f4f5;
41      --text-muted:  #a1a1aa;
42      --text-faint:  #71717a;
43
44      --border:        #27272e;
45      --border-strong: #3a3a44;
46
47      --focus-ring: rgba(232, 35, 42, 0.55);
48      --success:    #2fb56b;
49
50      --r-sm:   8px;  --r-md: 14px;  --r-lg: 20px;  --r-full: 9999px;
51
52      --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
53      --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
54      --s-section: 96px;
55
56      --maxw: 1200px;
57      --header-h: 80px;
58
59      --shadow-soft: 0 18px 50px rgba(0,0,0,0.45);
60      --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
61    }
62
63    /* ===================== RESET / BASE ===================== */
64    *, *::before, *::after { box-sizing: border-box; }
65    html { scroll-behavior: smooth; }
66    body {
67      margin: 0;
68      font-family: "Vazirmatn", system-ui, "Segoe UI", Tahoma, sans-serif;
69      background: var(--bg-deep);
70      color: var(--text);
71      line-height: 1.8;
72      font-size: 16px;
73      -webkit-font-smoothing: antialiased;
74      text-rendering: optimizeLegibility;
75      overflow-x: hidden;
76    }
77    h1, h2, h3, h4 { margin: 0; line-height: 1.35; font-weight: 800; letter-spacing: -0.01em; }
78    p { margin: 0; }
79    a { color: inherit; text-decoration: none; }
80    img { max-width: 100%; display: block; }
81    button { font-family: inherit; cursor: pointer; }
82
83    a:focus-visible, button:focus-visible, input:focus-visible,
84    textarea:focus-visible, summary:focus-visible {
85      outline: 3px solid var(--focus-ring);
86      outline-offset: 2px;
87      border-radius: var(--r-sm);
88    }
89
90    .container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--s-5); }
91    .section { padding-block: var(--s-section); }
92
93    .eyebrow {
94      display: inline-flex; align-items: center; gap: var(--s-2);
95      font-size: 0.8rem; font-weight: 700; color: var(--brand-red);
96      letter-spacing: 0.02em; margin-bottom: var(--s-4);
97    }
98    .eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--brand-red); border-radius: var(--r-full); }
99
100    .section-title { font-size: clamp(1.5rem, 1rem + 2vw, 2.25rem); max-width: 24ch; }
101    .section-lead { color: var(--text-muted); font-size: 1.05rem; max-width: 62ch; margin-top: var(--s-4); }
102
103    /* ===================== BUTTONS ===================== */
104    .btn {
105      display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
106      border: 1px solid transparent; border-radius: var(--r-full);
107      padding: 13px 26px; font-weight: 700; font-size: 0.98rem; line-height: 1;
108      transition: transform 0.15s var(--ease), background 0.2s var(--ease), box-shadow 0.2s var(--ease);
109      white-space: nowrap;
110    }
111    .btn:hover { transform: translateY(-2px); }
112    .btn:active { transform: translateY(0); }
113    .btn-primary { background: var(--brand-red); color: #fff; box-shadow: 0 8px 24px rgba(232,35,42,0.28); }
114    .btn-primary:hover { background: var(--brand-red-dim); box-shadow: 0 10px 30px rgba(232,35,42,0.4); }
115    .btn-ghost { background: transparent; color: var(--text); border-color: var(--border-strong); }
116    .btn-ghost:hover { background: var(--bg-elevated); }
117    .btn-sm { padding: 9px 18px; font-size: 0.875rem; }
118    .btn-lg { padding: 16px 34px; font-size: 1.05rem; }
119
120    /* ===================== HEADER ===================== */
121    .site-header {
122      position: sticky; top: 0; z-index: 50; height: var(--header-h);
123      display: flex; align-items: center;
124      border-bottom: 1px solid transparent;
125      transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
126    }
127    .site-header.scrolled { background: rgba(12,12,15,0.78); backdrop-filter: blur(14px); border-bottom-color: var(--border); }
128    .header-inner {
129      width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--s-5);
130      display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
131    }
132    .brand-logo { height: 48px; width: auto; }   /* enlarged to match jaaar.com header weight */
133    .nav-links { display: flex; align-items: center; gap: var(--s-6); }
134    .nav-links a { color: var(--text-muted); font-size: 0.92rem; font-weight: 500; transition: color 0.2s var(--ease); }
135    .nav-links a:hover { color: var(--text); }
136    .header-cta { display: flex; align-items: center; gap: var(--s-3); }
137    .nav-toggle { display: none; background: none; border: 0; color: var(--text); padding: 6px; }
138
139    /* ===================== HERO ===================== */
140    .hero { position: relative; overflow: hidden; padding-top: var(--s-7); }
141    .hero::before {
142      content: ""; position: absolute; inset: 0; pointer-events: none;
143      background:
144        radial-gradient(60% 55% at 78% 28%, rgba(232,35,42,0.18), transparent 60%),
145        radial-gradient(40% 40% at 20% 0%, rgba(232,35,42,0.07), transparent 70%);
146    }
147    .hero::after {
148      content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.4;
149      background-image:
150        linear-gradient(var(--border) 1px, transparent 1px),
151        linear-gradient(90deg, var(--border) 1px, transparent 1px);
152      background-size: 64px 64px;
153      mask-image: radial-gradient(70% 60% at 70% 30%, #000 0%, transparent 75%);
154    }
155    .hero-grid {
156      position: relative; display: grid; grid-template-columns: 1.05fr 0.95fr;
157      align-items: center; gap: var(--s-7); padding-block: var(--s-7) var(--s-8);
158    }
159    .hero-copy { max-width: 38rem; }
160    .hero-clock-badge {
161      display: inline-flex; align-items: center; gap: var(--s-2);
162      background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-full);
163      padding: 6px 14px 6px 6px; font-size: 0.82rem; font-weight: 600; color: var(--text-muted);
164      margin-bottom: var(--s-5);
165    }
166    .hero-clock-badge strong { color: var(--text); font-weight: 700; }
167    .hero-clock-badge .clock-chip {
168      display: inline-flex; width: 26px;
168 height: 26px; align-items: center; justify-content: center;
169      background: var(--brand-red); border-radius: var(--r-full);
170    }
171    .hero h1 { font-size: clamp(2rem, 1.2rem + 3.4vw, 3.4rem); line-height: 1.28; font-weight: 800; }
172    .hero h1 .accent { color: var(--brand-red); }
173    .hero-sub { color: var(--text-muted); font-size: clamp(1rem, 0.95rem + 0.3vw, 1.18rem); margin-top: var(--s-5); max-width: 36rem; }
174    .hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
175    .hero-meta { display: flex; flex-wrap: wrap; gap: var(--s-5); margin-top: var(--s-6); color: var(--text-faint); font-size: 0.85rem; }
176    .hero-meta span { display: inline-flex; align-items: center; gap: var(--s-2); }
177    .hero-meta svg { color: var(--success); }
178
179    .hero-visual { position: relative; }
180    .hero-visual .glow {
181      position: absolute; inset: 8% 6% 14% 6%;
182      background: radial-gradient(closest-side, rgba(232,35,42,0.4), transparent 72%);
183      filter: blur(38px); z-index: 0;
184    }
185    .hero-visual img { position: relative; z-index: 1; filter: drop-shadow(0 30px 50px rgba(0,0,0,0.55)); }
186    .hero-mini-clock {
187      position: absolute; z-index: 2; top: -6px; left: 8%;
188      width: 84px; height: 84px; background: var(--bg-elevated); border: 1px solid var(--border);
189      border-radius: var(--r-full); display: grid; place-items: center; box-shadow: var(--shadow-soft);
190    }
191
192    /* ===================== SOCIAL PROOF BAR ===================== */
193    .proof { border-block: 1px solid var(--border); background: var(--bg-surface); padding-block: var(--s-5); }
194    .proof-inner { display: flex; align-items: center; justify-content: center; gap: var(--s-4); flex-wrap: wrap; text-align: center; }
195    .proof p { color: var(--text-muted); font-size: 0.98rem; }
196    .proof strong { color: var(--text); }
197    /* TODO[jaaar]: replace placeholders with real organization logos */
198    .proof-logos { display: flex; gap: var(--s-5); align-items: center; opacity: 0.55; }
199    .proof-logo-ph { width: 92px; height: 30px; border: 1px dashed var(--border-strong); border-radius: var(--r-sm); }
200
201    /* ===================== PROBLEM ===================== */
202    .problem-grid { display: grid; grid-template-columns: 1fr 0.85fr; gap: var(--s-7); align-items: center; }
203    .problem-points { margin-top: var(--s-5); display: grid; gap: var(--s-3); }
204    .problem-point { display: flex; gap: var(--s-3); align-items: flex-start; color: var(--text-muted); }
205    .problem-point .x {
206      flex: none; width: 22px; height: 22px; margin-top: 4px; border-radius: var(--r-full);
207      background: rgba(232,35,42,0.12); color: var(--brand-red); display: grid; place-items: center;
208      font-size: 13px; font-weight: 800;
209    }
210    .before-card { background: var(--bg-inset); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s-5); }
211    .before-card .win-bar { display: flex; gap: 6px; margin-bottom: var(--s-4); }
212    .before-card .win-bar i { width: 10px; height: 10px; border-radius: var(--r-full); background: var(--border-strong); display: inline-block; }
213    .file-row {
214      display: flex; align-items: center; gap: var(--s-3); padding: 10px 12px;
215      border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--bg-surface);
216      color: var(--text-muted); font-size: 0.85rem; margin-bottom: var(--s-2);
217    }
218    .file-row .pdf { flex: none; font-size: 0.6rem; font-weight: 800; background: var(--brand-red); color: #fff; padding: 3px 5px; border-radius: 4px; }
219    .file-row.dim { opacity: 0.5; }
220
221    /* ===================== HOW IT WORKS / DIAGRAM ===================== */
222    .how { background: var(--bg-surface); }
223    .how-head { text-align: center; max-width: 46rem; margin-inline: auto; }
224    .how-head .section-lead { margin-inline: auto; }
225    .diagram-wrap {
226      margin-top: var(--s-7); background: var(--bg-inset); border: 1px solid var(--border);
227      border-radius: var(--r-lg); padding: var(--s-6) var(--s-5); overflow: hidden;
228    }
229    .flow-diagram { width: 100%; height: auto; display: block; }
230    .flow-diagram.flow-v { display: none; }
231
232    /* All diagram colors set via CSS classes (NOT via var() in SVG presentation
233       attributes, which browsers do not reliably resolve). */
234    .flow-node-label { fill: var(--text); font-weight: 700; font-size: 15px; }
235    .flow-node-label.hot { fill: var(--brand-red); }
236    .flow-node-sub   { fill: var(--text-faint); font-size: 12px; }
237    .flow-icon  { fill: none; stroke: var(--text); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
238    .flow-node-box { fill: var(--bg-elevated); stroke: var(--border-strong); stroke-width: 1.5; }
239    .flow-node-box.hot { stroke: var(--brand-red); }
240    .flow-line  { stroke: var(--border-strong); stroke-width: 2; fill: none; }
241    .flow-arrow { fill: var(--brand-red); }
242    .flow-clock { fill: none; stroke: var(--brand-red); stroke-width: 2.4; stroke-linecap: round; }
243
244    /* Flowing dash along the connectors (right -> left) */
245    .flow-dash {
246      stroke: var(--brand-red); stroke-width: 2.6; fill: none;
247      stroke-dasharray: 6 12; stroke-linecap: round;
248      animation: flow-move 2.6s linear infinite;   /* gentle, unhurried flow */
249    }
250    @keyframes flow-move { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -36; } }
251
252    /* Pulsing clock in the "automatic" node */
253    .clock-pulse { transform-box: fill-box; transform-origin: center; animation: clock-pulse 3s ease-in-out infinite; }
254    @keyframes clock-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.6; } }
255
256    .steps { margin-top: var(--s-7); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
257    .step { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s-5); }
258    .step-num {
259      width: 38px; height: 38px; border-radius: var(--r-full); background: rgba(232,35,42,0.12);
260      color: var(--brand-red); display: grid; place-items: center; font-weight: 800; font-size: 1.05rem; margin-bottom: var(--s-4);
261    }
262    .step h3 { font-size: 1.1rem; margin-bottom: var(--s-2); }
263    .step p { color: var(--text-muted); font-size: 0.95rem; }
264
265    /* ===================== BENEFITS ===================== */
266    .benefits-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-5); flex-wrap: wrap; }
267    .app-logo-deco { width: 64px; height: 64px; opacity: 0.95; flex: none; }
268    .benefit-cards { margin-top: var(--s-7); display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
269    .benefit { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s-6); transition: border-color 0.25s var(--ease), transform 0.25s var(--ease); }
270    .benefit:hover { border-color: var(--border-strong); transform: translateY(-3px); }
271    .benefit-icon { width: 50px; height: 50px; border-radius: var(--r-md); background: var(--bg-elevated); border: 1px solid var(--border); display: grid; place-items: center; color: var(--brand-red); margin-bottom: var(--s-5); }
272    .benefit h3 { font-size: 1.15rem; margin-bottom: var(--s-3); }
273    .benefit p { color: var(--text-muted); font-size: 0.96rem; }
274
275    /* ===================== IT OBJECTION ===================== */
276    .it-box {
277      background: linear-gradient(180deg, rgba(232,35,42,0.06), transparent 60%), var(--bg-inset);
278      border: 1px solid var(--border-strong); border-radius: var(--r-lg); padding: var(--s-7);
279      display: grid; grid-template-columns: auto 1fr; gap: var(--s-6); align-items: start;
280    }
281    .it-box .it-icon { width: 64px; height: 64px; flex: none; border-radius: var(--r-md); background: var(--bg-elevated); border: 1px solid var(--border); display: grid; place-items: center; color: var(--brand-red); }
282    .it-list { margin-top: var(--s-5); display: grid; gap: var(--s-3); }
283    .it-item { display: flex; gap: var(--s-3); align-items: flex-start; color: var(--text-muted); font-size: 0.97rem; }
284    .it-item .chk { flex: none; color: var(--success); margin-top: 3px; }
285
286    /* ===================== FAQ (native <details> — works without JS) ===================== */
287    .faq { background: var(--bg-surface); }
288    .faq-list { margin-top: var(--s-6); max-width: 820px; margin-inline: auto; }
289    .faq-item { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-deep); margin-bottom: var(--s-3); overflow: hidden; }
290    .faq-q {
291      list-style: none; cursor: pointer;
292      display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
293      color: var(--text); padding: var(--s-5); font-size: 1.02rem; font-weight: 700;
294    }
295    .faq-q::-webkit-details-marker { display: none; }
296    .faq-q .chevron { flex: none; transition: transform 0.3s var(--ease); color: var(--text-muted); }
297    .faq-item[open] .faq-q .chevron { transform: rotate(180deg); }
298    .faq-a-inner { padding: 0 var(--s-5) var(--s-5); color: var(--text-muted); font-size: 0.97rem; }
299
300    /* ===================== FINAL CTA ===================== */
301    .final-cta-inner {
302      position: relative; background: linear-gradient(135deg, var(--brand-red), var(--brand-red-dim));
303      border-radius: var(--r-lg); padding: var(--s-8) var(--s-6); text-align: center; overflow: hidden;
304    }
305    .final-cta-inner::before { content: ""; position: absolute; inset: 0; background: radial-gradient(50% 80% at 50% -10%, rgba(255,255,255,0.22), transparent 60%); }
306    .final-cta-inner > * { position: relative; }
307    .final-cta h2 { color: #fff; font-size: clamp(1.5rem, 1rem + 2.4vw, 2.4rem); max-width: 26ch; margin-inline: auto; }
308    .final-cta p { color: rgba(255,255,255,0.9); margin-top: var(--s-4); font-size: 1.05rem; max-width: 52ch; margin-inline: auto; }
309    .final-cta .btn-white { background: #fff; color: var(--brand-red-dim); margin-top: var(--s-6); box-shadow: 0 14px 40px rgba(0,0,0,0.3); }
310    .final-cta .btn-white:hover { background: #f4f4f5; }
311    .final-cta .secondary-link { display: inline-block; margin-top: var(--s-5); color: #fff; font-size: 0.95rem; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; opacity: 0.9; }
312    .final-cta .secondary-link:hover { opacity: 1; }
313
314    /* ===================== FOOTER (minimal) ===================== */
315    .site-footer { background: #000; border-top: 1px solid var(--border); padding-block: var(--s-7) var(--s-6); }
316    .footer-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-6); flex-wrap: wrap; }
317    .footer-brand img { height: 40px; margin-bottom: var(--s-4); }
318    .footer-brand p { color: var(--text-faint); font-size: 0.9rem; max-width: 34ch; }
319    .footer-right { display: flex; flex-direction: column; align-items: flex-end; gap: var(--s-4); }
320    .footer-links { display: flex; gap: var(--s-5); }
321    .footer-links a { color: var(--text-muted); font-size: 0.92rem; font-weight: 500; transition: color 0.2s var(--ease); }
322    .footer-links a:hover { color: var(--text); }
323    .footer-socials { display: flex; gap: var(--s-3); }
324    .footer-socials a { width: 38px; height: 38px; border: 1px solid var(--border); border-radius: var(--r-full); display: grid; place-items: center; color: var(--text-muted); transition: color 0.2s var(--ease), border-color 0.2s var(--ease); }
325    .footer-socials a:hover { color: var(--text); border-color: var(--border-strong); }
326    .footer-bottom { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--border); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s-3); color: var(--text-faint); font-size: 0.85rem; }
327
328    /* ===================== MODAL ===================== */
329    .modal-backdrop {
330      position: fixed; inset: 0; z-index: 100; background: rgba(5,5,7,0.72); backdrop-filter: blur(6px);
331      display: flex; align-items: center; justify-content: center; padding: var(--s-4);
332      opacity: 0; visibility: hidden; transition: opacity 0.25s var(--ease), visibility 0.25s var(--ease);
333    }
334    .modal-backdrop.open { opacity: 1; visibility: visible; }
335    .modal {
336      width: 100%; max-width: 560px; max-height: 92vh; overflow-y: auto;
337      background: var(--bg-surface); border: 1px solid var(--border-strong); border-radius: var(--r-lg);
338      padding: var(--s-7); box-shadow: var(--shadow-soft); transform: scale(0.94) translateY(10px);
339      transition: transform 0.28s var(--ease);
340    }
341    .modal-backdrop.open .modal { transform: scale(1) translateY(0); }
342    .modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-5); }
343    .modal-head h2 { font-size: 1.4rem; }
344    .modal-head p { color: var(--text-muted); font-size: 0.92rem; margin-top: var(--s-2); }
345    .modal-close { flex: none; width: 40px; height: 40px; border-radius: var(--r-full); background: var(--bg-elevated); border: 1px solid var(--border); color: var(--text-muted); display: grid; place-items: center; }
346    .modal-close:hover { color: var(--text); }
347
348    /* ----- Contact-channel list ----- */
349    .contact-list { display: grid; gap: var(--s-3); margin-top: var(--s-2); }
350    .contact-option {
351      display: flex; align-items: center; gap: var(--s-4);
352      background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-md);
353      padding: var(--s-4); color: var(--text); width: 100%; text-align: right;
354      transition: border-color 0.2s var(--ease), background 0.2s var(--ease), transform 0.15s var(--ease);
355    }
356    .contact-option:hover { border-color: var(--border-strong); background: #23232b; transform: translateY(-2px); }
357    /* Per-option accent comes from inline --chip / --chip-bg custom properties */
358    .contact-chip {
359      flex: none; width: 48px; height: 48px; border-radius: var(--r-full);
360      display: grid; place-items: center;
361      color: var(--chip, var(--text)); background: var(--chip-bg, var(--bg-surface));
362    }
363    .contact-chip svg, .contact-chip img { width: 24px; height: 24px; display: block; }
364    .contact-text { flex: 1 1 auto; min-width: 0; }
365    .contact-text .t { display: block; font-weight: 700; font-size: 1rem; }
366    .contact-text .s { display: block; color: var(--text-muted); font-size: 0.85rem; margin-top: 2px; }
367    .contact-option .chev { flex: none; color: var(--text-faint); transition: transform 0.2s var(--ease); }
368    .contact-option:hover .chev { transform: translateX(-3px); }
369
370    /* ===================== REVEAL ON SCROLL =====================
371       Gated behind `.js`: without JS the .reveal rule below never applies,
372       so all content is visible by default. */
373    .js .reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
374    .js .reveal.in { opacity: 1; transform: none; }
375
376    /* ===================== RESPONSIVE ===================== */
377    @media (max-width: 980px) {
378      .hero-grid { grid-template-columns: 1fr; gap: var(--s-6); }
379      .hero-visual { max-width: 560px; margin-inline: auto; }
380      .problem-grid { grid-template-columns: 1fr; }
381    }
382    @media (max-width: 760px) {
383      :root { --s-section: 64px; --header-h: 68px; }
384      .brand-logo { height: 38px; }
385      .nav-links { display: none; }
386      .nav-toggle { display: grid; place-items: center; }
387      .nav-links.mobile-open {
388        display: flex; flex-direction: column; align-items: flex-start;
389        position: absolute; top: var(--header-h); inset-inline: 0;
390        background: var(--bg-surface); border-bottom: 1px solid var(--border); padding: var(--s-5); gap: var(--s-4);
391      }
392      .steps { grid-template-columns: 1fr; }
393      .benefit-cards { grid-template-columns: 1fr; }
394      .it-box { grid-template-columns: 1fr; gap: var(--s-5); padding: var(--s-6); }
395      .footer-top { flex-direction: column; }
396      .footer-right { align-items: flex-start; }
397      .modal { padding: var(--s-6); }
398      .header-cta .btn-text-hide { display: none; }
399      /* swap to vertical diagram on mobile */
400      .flow-diagram.flow-h { display: none; }
401      .flow-diagram.flow-v { display: block; max-width: 320px; margin-inline: auto; }
402    }
403
404    /* ===================== REDUCED MOTION ===================== */
405    @media (prefers-reduced-motion: reduce) {
406      *, *::before, *::after {
407        animation-duration: 0.001ms !important;
408        animation-iteration-count: 1 !important;
409        transition-duration: 0.001ms !important;
410        scroll-behavior: auto !important;
411      }
412      .js .reveal { opacity: 1; transform: none; }
413
414      /* The global reset above (`* { animation-duration: .001ms !important }`) is
415         what was silently killing the diagram flow on reduced-motion machines.
416         Per design choice ("gentle motion always"), exempt the flow diagram and
417         keep it animating — just slower/softer than the default — so it still
418         reads as an active pipeline. Higher specificity + !important overrides
419         the `*` reset. */
420      .flow-dash {
421        stroke-dasharray: 6 12 !important;
422        animation: flow-move 3.6s linear infinite !important;
423        animation-duration: 3.6s !important;
424        animation-iteration-count: infinite !important;
425      }
426      .clock-pulse {
427        animation: clock-pulse 4s ease-in-out infinite !important;
428        animation-duration: 4s !important;
429        animation-iteration-count: infinite !important;
430      }
431    }
432  </style>
433</head>
434<body>
435
436  <!-- ============================ HEADER ============================ -->
437  <header class="site-header" id="siteHeader">
438    <div class="header-inner">
439      <a href="#" aria-label="جار — صفحهٔ اصلی">
440        <img class="brand-logo" src="assets/Jaaar_Logo_Domain.png" alt="لوگوی جار" />
441      </a>
442
443      <nav class="nav-links" id="navLinks" aria-label="ناوبری اصلی">
444        <a href="#how">روش کار</a>
445        <a href="#benefits">مزایا</a>
446        <a href="#faq">سوالات متداول</a>
447      </nav>
448
449      <div class="header-cta">
450        <button class="btn btn-primary btn-sm" data-open-modal>
451          <span class="btn-text-hide">سرویس آزمایشی</span> رایگان
452        </button>
453        <button class="nav-toggle" id="navToggle" aria-label="باز کردن منو" aria-expanded="false">
454          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M4 6h16M4 12h16M4 18h16"/></svg>
455        </button>
456      </div>
457    </div>
458  </header>
459
460  <!-- ============================ HERO ============================ -->
461  <section class="hero">
462    <div class="container">
463      <div class="hero-grid">
464        <div class="hero-copy">
465          <span class="hero-clock-badge">
466            <span class="clock-chip" aria-hidden="true">
467              <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>
468            </span>
469            هر روز رأس ساعت <strong>۶:۰۰ صبح</strong>، خودکار و بی‌وقفه
470          </span>
471
472          <h1>
473            نشریات هر روز ساعت <span class="accent">۶ صبح</span> روی شبکهٔ سازمانتان —
474            بدون اینکه کسی دانلودشان کند
475          </h1>
476
477          <p class="hero-sub">
478            اتوماسیون نشریات جار هر روز صبح فایل‌های PDF را خودکار دریافت می‌کند و در شبکهٔ داخلی سازمانتان قرار می‌دهد.
479            کارمندان از شبکهٔ داخلی می‌خوانند — حتی بدون اینترنت.
480          </p>
481
482          <div class="hero-actions">
483            <button class="btn btn-primary btn-lg" data-open-modal>سرویس آزمایشی رایگان را شروع کنید</button>
484            <a class="btn btn-ghost btn-lg" href="#how">روش کار را ببینید</a>
485          </div>
486
487          <div class="hero-meta">
488            <span><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg> بدون نیاز به اینترنت برای کارمندان</span>
489            <span><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg> روی یک کامپیوتر معمولی در شبکه</span>
490            <span><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg> بدون سرور اختصاصی</span>
491          </div>
492        </div>
493
494        <div class="hero-visual">
495          <div class="glow" aria-hidden="true"></div>
496          <!-- 6AM motif: mini clock fixed at 6:00 (minute up, hour down) -->
497          <div class="hero-mini-clock" aria-hidden="true">
498            <svg width="52" height="52" viewBox="0 0 52 52">
499              <circle cx="26" cy="26" r="22" fill="none" stroke="#27272e" stroke-width="3"/>
500              <circle cx="26" cy="26" r="2.4" fill="#E8232A"/>
501              <line x1="26" y1="26" x2="26" y2="12" stroke="#f4f4f5" stroke-width="3" stroke-linecap="round"/>
502              <line x1="26" y1="26" x2="26" y2="37" stroke="#E8232A" stroke-width="3" stroke-linecap="round"/>
503              <text x="26" y="49" text-anchor="middle" fill="#a1a1aa" font-size="7" font-family="Vazirmatn">Û¶:Û°Û°</text>
504            </svg>
505          </div>
506          <img src="assets/jaaar-devices.png"
507               alt="نمایش سرویس اتوماسیون نشریات جار روی کامپیوتر، تبلت و موبایل با صفحه‌ای پر از روزنامه‌های روز" />
508        </div>
509      </div>
510    </div>
511  </section>
512
513  <!-- ====================== SOCIAL PROOF BAR ====================== -->
514  <section class="proof">
515    <div class="container proof-inner">
516      <p><strong>ده‌ها سازمان دولتی و خصوصی در ایران</strong>، توزیع روزانهٔ نشریاتشان را به اتوماسیون جار سپرده‌اند.</p>
517      <!-- TODO[jaaar]: replace placeholders with real organization logos -->
518      <div class="proof-logos" aria-hidden="true">
519        <span class="proof-logo-ph"></span><span class="proof-logo-ph"></span>
520        <span class="proof-logo-ph"></span><span class="proof-logo-ph"></span>
521      </div>
522    </div>
523  </section>
524
525  <!-- ============================ PROBLEM ============================ -->
526  <section class="section" id="problem">
527    <div class="container">
528      <div class="problem-grid">
529        <div class="reveal">
530          <span class="eyebrow">مسئله</span>
531          <h2 class="section-title">هر روز صبح، یک نفر در سازمان شما این کار را انجام می‌دهد</h2>
532          <p class="section-lead">
533            وارد سایت جار می‌شود. روزنامه‌ها را یکی‌یکی دانلود می‌کند. فایل‌ها را در یک پوشه روی شبکهٔ داخلی می‌گذارد.
534            برای بعضی مدیران، یک نسخهٔ چاپی هم جداگانه تهیه می‌شود.
535          </p>
536          <div class="problem-points">
537            <div class="problem-point"><span class="x" aria-hidden="true">✕</span><span>این کار هر روز وقت می‌برد؛ وقتی که می‌توانست صرف کار اصلی آن نیرو شود.</span></div>
538            <div class="problem-point"><span class="x" aria-hidden="true">✕</span><span>اگر آن نفر نباشد یا کار را فراموش کند، کارمندان دسترسی ندارند.</span></div>
539            <div class="problem-point"><span class="x" aria-hidden="true">✕</span><span>در سازمان‌هایی که کامپیوترها به اینترنت وصل نیستند، این تنها راه دسترسی کارمندان به مطبوعات است.</span></div>
540          </div>
541        </div>
542
543        <!-- "Before" illustration — messy PDF network folder, pure SVG/HTML -->
544        <div class="before-card reveal" aria-hidden="true">
545          <div class="win-bar"><i></i><i></i><i></i></div>
546          <div class="file-row"><span class="pdf">PDF</span> روزنامه_همشهری_نهایی(۲).pdf</div>
547          <div class="file-row"><span class="pdf">PDF</span> دنیای-اقتصاد ۱۴۰۳ کپی.pdf</div>
548          <div class="file-row dim"><span class="pdf">PDF</span> jam-e-jam_final_FINAL.pdf</div>
549          <div class="file-row dim"><span class="pdf">PDF</span> Untitled-روزنامه.pdf</div>
550          <div class="file-row"><span class="pdf">PDF</span> ایران_صبح_۶-۰۰.pdf</div>
551        </div>
552      </div>
553    </div>
554  </section>
555
556  <!-- ====================== HOW IT WORKS / DIAGRAM ====================== -->
557  <section class="section how" id="how">
558    <div class="container">
559      <div class="how-head reveal">
560        <span class="eyebrow">روش کار</span>
561        <h2 class="section-title" style="margin-inline:auto;">از امروز تا فردا صبح، سه قدم بیشتر فاصله ندارید</h2>
562        <p class="section-lead">
563          هر روز صبح، سامانهٔ اتوماسیون جار تمام نشریات درخواستی را خودکار دریافت می‌کند و در شبکهٔ داخلی سازمان قرار می‌دهد —
564          بدون دخالت انسانی و بدون تأخیر. برای اجرا یک کامپیوتر معمولی در شبکهٔ سازمان کافی است؛ نیازی به سرور اختصاصی نیست.
565        </p>
566      </div>
567
568      <!-- ===== Animated SVG flow diagram (rebuilt from scratch — diagram.png NOT embedded) =====
569           Logic: سرور جار → دریافت خودکار ۶ صبح → کامپیوتر شبکه → کارمندان
570           Horizontal RTL (right→left) on desktop; a separate vertical SVG shows on mobile. -->
571      <div class="diagram-wrap reveal">
572        <!-- DESKTOP / horizontal -->
573        <svg class="flow-diagram flow-h" viewBox="0 0 1000 240" role="img"
574             aria-label="نمودار جریان: سرور جار، نشریات را رأس ساعت ۶ صبح به‌صورت خودکار به یک کامپیوتر در شبکهٔ سازمان منتقل می‌کند و کارمندان آن را بدون اینترنت می‌خوانند.">
575          <line class="flow-line" x1="740" y1="110" x2="640" y2="110"/>
576          <line class="flow-line" x1="500" y1="110" x2="400" y2="
576110"/>
577          <line class="flow-line" x1="260" y1="110" x2="160" y2="110"/>
578          <path class="flow-dash" d="M740 110 H640"/>
579          <path class="flow-dash" d="M500 110 H400"/>
580          <path class="flow-dash" d="M260 110 H160"/>
581          <g class="flow-arrow">
582            <path d="M640 110 l10 -6 v12 z"/>
583            <path d="M400 110 l10 -6 v12 z"/>
584            <path d="M160 110 l10 -6 v12 z"/>
585          </g>
586
587          <!-- NODE 1 — سرور جار (right) -->
588          <g transform="translate(800,60)">
589            <rect class="flow-node-box" x="0" y="0" width="120" height="100" rx="16"/>
590            <g class="flow-icon" transform="translate(43,22)">
591              <rect x="0" y="0" width="34" height="10" rx="2"/>
592              <rect x="0" y="16" width="34" height="10" rx="2"/>
593            </g>
594            <text class="flow-node-label" x="60" y="74" text-anchor="middle">سرور جار</text>
595            <text class="flow-node-sub" x="60" y="92" text-anchor="middle">منبع نشریات</text>
596          </g>
597
598          <!-- NODE 2 — دریافت خودکار ۶ صبح (hot, clock at 6:00) -->
599          <g transform="translate(560,60)">
600            <rect class="flow-node-box hot" x="0" y="0" width="120" height="100" rx="16"/>
601            <g class="clock-pulse" transform="translate(60,38)">
602              <circle class="flow-clock" cx="0" cy="0" r="17"/>
603              <line class="flow-clock" x1="0" y1="0" x2="0" y2="-10"/>
604              <line class="flow-clock" x1="0" y1="0" x2="0" y2="9"/>
605            </g>
606            <text class="flow-node-label hot" x="60" y="74" text-anchor="middle">دریافت خودکار</text>
607            <text class="flow-node-sub" x="60" y="92" text-anchor="middle">رأس ساعت ۶:۰۰ صبح</text>
608          </g>
609
610          <!-- NODE 3 — کامپیوتر شبکه -->
611          <g transform="translate(320,60)">
612            <rect class="flow-node-box" x="0" y="0" width="120" height="100" rx="16"/>
613            <g class="flow-icon" transform="translate(43,20)">
614              <rect x="0" y="0" width="34" height="22" rx="3"/>
615              <path d="M17 22 v6 M9 28 h16"/>
616            </g>
617            <text class="flow-node-label" x="60" y="74" text-anchor="middle">کامپیوتر شبکه</text>
618            <text class="flow-node-sub" x="60" y="92" text-anchor="middle">شبکهٔ داخلی شما</text>
619          </g>
620
621          <!-- NODE 4 — کارمندان (left) -->
622          <g transform="translate(80,60)">
623            <rect class="flow-node-box" x="0" y="0" width="120" height="100" rx="16"/>
624            <g class="flow-icon" transform="translate(46,20)">
625              <circle cx="14" cy="8" r="6"/>
626              <path d="M3 26 a11 9 0 0 1 22 0"/>
627            </g>
628            <text class="flow-node-label" x="60" y="74" text-anchor="middle">کارمندان</text>
629            <text class="flow-node-sub" x="60" y="92" text-anchor="middle">بدون اینترنت</text>
630          </g>
631        </svg>
632
633        <!-- MOBILE / vertical (same logic, top→bottom) -->
634        <svg class="flow-diagram flow-v" viewBox="0 0 240 760" role="img"
635             aria-label="نمودار جریان عمودی: سرور جار، دریافت خودکار ساعت ۶ صبح، کامپیوتر شبکه، کارمندان.">
636          <line class="flow-line" x1="120" y1="150" x2="120" y2="210"/>
637          <line class="flow-line" x1="120" y1="350" x2="120" y2="410"/>
638          <line class="flow-line" x1="120" y1="550" x2="120" y2="610"/>
639          <path class="flow-dash" d="M120 150 V210"/>
640          <path class="flow-dash" d="M120 350 V410"/>
641          <path class="flow-dash" d="M120 550 V610"/>
642          <g class="flow-arrow">
643            <path d="M120 210 l-6 -10 h12 z"/>
644            <path d="M120 410 l-6 -10 h12 z"/>
645            <path d="M120 610 l-6 -10 h12 z"/>
646          </g>
647
648          <g transform="translate(60,20)">
649            <rect class="flow-node-box" x="0" y="0" width="120" height="120" rx="16"/>
650            <text class="flow-node-label" x="60" y="70" text-anchor="middle">سرور جار</text>
651            <text class="flow-node-sub" x="60" y="92" text-anchor="middle">منبع نشریات</text>
652          </g>
653          <g transform="translate(60,220)">
654            <rect class="flow-node-box hot" x="0" y="0" width="120" height="120" rx="16"/>
655            <g class="clock-pulse" transform="translate(60,40)">
656              <circle class="flow-clock" cx="0" cy="0" r="16"/>
657              <line class="flow-clock" x1="0" y1="0" x2="0" y2="-9"/>
658              <line class="flow-clock" x1="0" y1="0" x2="0" y2="8"/>
659            </g>
660            <text class="flow-node-label hot" x="60" y="86" text-anchor="middle">دریافت خودکار</text>
661            <text class="flow-node-sub" x="60" y="105" text-anchor="middle">ساعت ۶:۰۰ صبح</text>
662          </g>
663          <g transform="translate(60,420)">
664            <rect class="flow-node-box" x="0" y="0" width="120" height="120" rx="16"/>
665            <text class="flow-node-label" x="60" y="70" text-anchor="middle">کامپیوتر شبکه</text>
666            <text class="flow-node-sub" x="60" y="92" text-anchor="middle">شبکهٔ داخلی شما</text>
667          </g>
668          <g transform="translate(60,620)">
669            <rect class="flow-node-box" x="0" y="0" width="120" height="120" rx="16"/>
670            <text class="flow-node-label" x="60" y="70" text-anchor="middle">کارمندان</text>
671            <text class="flow-node-sub" x="60" y="92" text-anchor="middle">بدون اینترنت</text>
672          </g>
673        </svg>
674      </div>
675
676      <!-- three steps (official copy) -->
677      <div class="steps">
678        <div class="step reveal">
679          <div class="step-num">Û±</div>
680          <h3>نشریاتتان را انتخاب کنید</h3>
681          <p>
681از بیش از ۳۸۹ عنوان — روزنامه‌های عمومی، اقتصادی، ورزشی، فرهنگی، استانی و مجلات تخصصی — همان‌هایی را که سازمانتان نیاز دارد مشخص کنید.</p>
682        </div>
683        <div class="step reveal">
684          <div class="step-num">Û²</div>
685          <h3>روی شبکهٔ داخلی راه‌اندازی کنید</h3>
686          <p>سرویس روی یک کامپیوتر معمولی در شبکهٔ سازمان نصب می‌شود — با افزونهٔ آمادهٔ وردپرس یا راه‌اندازی مستقیم. نیازی به سرور اختصاصی نیست و تیم پشتیبانی جار همراه شماست.</p>
687        </div>
688        <div class="step reveal">
689          <div class="step-num">Û³</div>
690          <h3>از فردا صبح همه‌چیز خودکار است</h3>
691          <p>هر روز رأس ساعت ۶ صبح، تمام فایل‌ها در شبکهٔ داخلی آماده‌اند. کارمندان وارد می‌شوند، جستجو می‌کنند، می‌خوانند.</p>
692        </div>
693      </div>
694    </div>
695  </section>
696
697  <!-- ============================ BENEFITS ============================ -->
698  <section class="section" id="benefits">
699    <div class="container">
700      <div class="benefits-head reveal">
701        <div>
702          <span class="eyebrow">مزایا</span>
703          <h2 class="section-title">سه اتفاق می‌افتد که با دانلود دستی امکان‌پذیر نیست</h2>
704        </div>
705        <img class="app-logo-deco" src="assets/Jaaar-App-Logo.png" alt="" aria-hidden="true" loading="lazy" />
706      </div>
707
708      <div class="benefit-cards">
709        <div class="benefit reveal">
710          <div class="benefit-icon" aria-hidden="true">
711            <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>
712          </div>
713          <h3>وقت یک نیروی سازمانی آزاد می‌شود</h3>
714          <p>آن نفری که هر روز صبح دانلود می‌کرد، از فردا این کار را ندارد. آن وقت صرف کار اصلی‌اش می‌شود.</p>
715        </div>
716        <div class="benefit reveal">
717          <div class="benefit-icon" aria-hidden="true">
718            <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="14" rx="2"/><path d="M8 21h8M12 18v3"/></svg>
719          </div>
720          <h3>کارمندان بدون اینترنت هم دسترسی دارند</h3>
721          <p>نشریات در شبکهٔ داخلی هستند. هر کارمندی از هر ایستگاه کاری، در هر لحظه از روز می‌تواند بخواند — حتی اگر کامپیوترش اصلاً به اینترنت وصل نباشد.</p>
722        </div>
723        <div class="benefit reveal">
724          <div class="benefit-icon" aria-hidden="true">
725            <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M9 21V9"/></svg>
726          </div>
727          <h3>یک رابط کاربری شکیل به‌جای پوشهٔ PDF</h3>
728          <p>به‌جای لیست فایل در یک پوشهٔ شبکه، کارمندان یک محیط آراسته می‌بینند: جستجو در متن مقالات، آرشیو روزهای گذشته و دسترسی سریع به هر نشریه.</p>
729        </div>
730      </div>
731    </div>
732  </section>
733
734  <!-- ====================== IT OBJECTION HANDLING ====================== -->
735  <section class="section" id="it">
736    <div class="container">
737      <div class="it-box reveal">
738        <div class="it-icon" aria-hidden="true">
739          <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2 4 5v6c0 5 3.5 8 8 11 4.5-3 8-6 8-11V5z"/><path d="M9 12l2 2 4-4"/></svg>
740        </div>
741        <div>
742          <span class="eyebrow">ویژهٔ تیم IT</span>
743          <h2 class="section-title">برای تیم IT: راه‌اندازی که پیچیده نیست</h2>
744          <p class="section-lead">
745            روابط عمومی این سرویس را می‌خواهد؛ IT باید آن را راه بیندازد. می‌دانیم این ترکیب گاهی کارها را سخت می‌کند —
746            به همین دلیل راه‌اندازی را تا حد ممکن ساده نگه داشته‌ایم.
747          </p>
748          <div class="it-list">
749            <div class="it-item"><span class="chk" aria-hidden="true"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg></span><span>سرویس روی یک کامپیوتر معمولی در شبکه اجرا می‌شود؛ نیازی به سرور جدید نیست.</span></div>
750            <div class="it-item"><span class="chk" aria-hidden="true"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg></span><span>
750یک افزونهٔ آماده برای وردپرس دارد؛ نصب سریع و بدون توسعهٔ نرم‌افزار.</span></div>
751            <div class="it-item"><span class="chk" aria-hidden="true"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg></span><span>مستندات فنی کامل است و تیم پشتیبانی جار در مرحلهٔ نصب همراه است.</span></div>
752            <div class="it-item"><span class="chk" aria-hidden="true"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg></span><span>قابل اجرا در شبکهٔ بسته و محیط‌های با محدودیت دسترسی اینترنت.</span></div>
753          </div>
754        </div>
755      </div>
756    </div>
757  </section>
758
759  <!-- ============================ FAQ ============================ -->
760  <section class="section faq" id="faq">
761    <div class="container">
762      <div style="text-align:center;" class="reveal">
763        <span class="eyebrow">سوالات متداول</span>
764        <h2 class="section-title" style="margin-inline:auto;">پاسخ پرسش‌های رایج</h2>
765      </div>
766
767      <!-- Native <details>: open/close works without JavaScript -->
768      <div class="faq-list">
769        <details class="faq-item">
770          <summary class="faq-q">آیا برای راه‌اندازی به متخصص IT نیاز داریم؟
771            <span class="chevron" aria-hidden="true"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg></span>
772          </summary>
773          <div class="faq-a-inner">برای نصب از طریق افزونهٔ وردپرس، نه. برای راه‌اندازی روی کامپیوتر شبکه، همکاری IT داخلی کافی است. تیم جار در طول نصب در دسترس است.</div>
774        </details>
775
776        <details class="faq-item">
777          <summary class="faq-q">آیا به سرور اختصاصی یا زیرساخت خاصی نیاز داریم؟
778            <span class="chevron" aria-hidden="true"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg></span>
779          </summary>
780          <div class="faq-a-inner">نه. سرویس روی یک کامپیوتر معمولی در شبکهٔ سازمان اجرا می‌شود. نیازی به سرور پرقدرت یا تجهیزات خاص نیست.</div>
781        </details>
782
783        <details class="faq-item">
784          <summary class="faq-q">اگر کامپیوترهای ما به اینترنت وصل نباشند چطور؟
785            <span class="chevron" aria-hidden="true"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg></span>
786          </summary>
787          <div class="faq-a-inner">اتوماسیون جار دقیقاً برای همین طراحی شده. فایل‌ها از طریق یک نقطهٔ اتصال دریافت و در شبکهٔ داخلی قرار می‌گیرند. پس از آن، تمام کارمندان از شبکهٔ داخلی دسترسی دارند — بدون نیاز به اینترنت.</div>
788        </details>
789
790        <details class="faq-item">
791          <summary class="faq-q">هزینهٔ اتوماسیون از اشتراک فعلی ما جداست؟
792            <span class="chevron" aria-hidden="true"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg></span>
793          </summary>
794          <div class="faq-a-inner">بله، اتوماسیون یک سرویس جداگانه است. برای اطلاع از قیمت‌گذاری، سرویس آزمایشی را شروع کنید یا با تیم فروش تماس بگÛ
794ŒØ±ÛŒØ¯.</div>
795        </details>
796
797        <details class="faq-item">
798          <summary class="faq-q">چه نشریاتی را می‌توانیم دریافت کنیم؟
799            <span class="chevron" aria-hidden="true"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg></span>
800          </summary>
801          <div class="faq-a-inner">بیش از ۳۸۹ عنوان: ۵۵ روزنامهٔ عمومی، ۱۵ روزنامهٔ اقتصادی، ۸ نشریهٔ ورزشی، ۵ روزنامهٔ انگلیسی‌زبان، ۳ نشریهٔ فرهنگی و هنری، ۱۵ روزنامهٔ استانی و ۲۴۷ مجله.</div>
802        </details>
803      </div>
804    </div>
805  </section>
806
807  <!-- ============================ FINAL CTA ============================ -->
808  <section class="section final-cta">
809    <div class="container">
810      <div class="final-cta-inner reveal">
811        <h2>اگر سازمانتان الان از جار استفاده می‌کند، یک قدم مانده</h2>
812        <p>کاری که الان هر روز دستی انجام می‌شود، می‌تواند از فردا خودکار باشد. سرویس آزمایشی رایگان را شروع کنید — بدون پیش‌پرداخت، بدون تعهد.</p>
813        <div>
814          <button class="btn btn-lg btn-white" data-open-modal>سرویس آزمایشی رایگان را شروع کنید</button>
815        </div>
816        <a class="secondary-link" href="#" data-open-modal>سوال دارید؟ با تیم ما صحبت کنید</a>
817      </div>
818    </div>
819  </section>
820
821  <!-- ====================== FOOTER (minimal) ====================== -->
822  <footer class="site-footer">
823    <div class="container">
824      <div class="footer-top">
825        <div class="footer-brand">
826          <img src="assets/Jaaar_Logo_Domain.png" alt="لوگوی جار" loading="lazy" />
827          <p>اتوماسیون نشریات جار — تحویل خودکار روزنامه‌ها و مجلات روی شبکهٔ داخلی سازمان شما، هر روز رأس ساعت ۶ صبح.</p>
828        </div>
829      </div>
830
831      <div class="footer-bottom">
832        <span>© ۱۴۰۵ جار — همهٔ حقوق محفوظ است.</span>
833        <span>jaaar.com</span>
834      </div>
835    </div>
836  </footer>
837
838  <!-- ============================ CONTACT LIGHTBOX ============================ -->
839  <div class="modal-backdrop" id="modalBackdrop" role="dialog" aria-modal="true" aria-labelledby="modalTitle" hidden>
840    <div class="modal" role="document">
841      <div class="modal-head">
842        <div>
843          <h2 id="modalTitle">درخواست سرویس آزمایشی رایگان</h2>
844          <p>از هر راهی که راحت‌ترید با ما در تماس باشید — سریع پاسخ می‌دهیم.</p>
845        </div>
846        <button class="modal-close" data-close-modal aria-label="بستن">
847          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M18 6 6 18M6 6l12 12"/></svg>
848        </button>
849      </div>
850
851      <div class="contact-list">
852
853        <!-- 1) Telegram — opens chat with admin (no pre-filled text for usernames) -->
854        <a class="contact-option" href="https://t.me/jaaar_admin" target="_blank" rel="noopener"
855           style="--chip:#2AABEE; --chip-bg:rgba(42,171,238,0.14)">
856          <span class="contact-chip" aria-hidden="true">
857            <svg viewBox="0 0 24 24" fill="currentColor"><path d="M21.9 4.3 18.7 19c-.2 1-.9 1.3-1.8.8l-4.9-3.6-2.4 2.3c-.3.3-.5.5-1 .5l.3-4.9 8.9-8c.4-.3-.1-.5-.6-.2L6.4 13 1.7 11.5c-1-.3-1-1 .2-1.5L20.6 3c.8-.3 1.6.2 1.3 1.3z"/></svg>
858          </span>
859          <span class="contact-text"><span class="t">تلگرام</span><span class="s">ارسال پیام در تلگرام</span></span>
860          <span class="chev" aria-hidden="true"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"/></svg></span>
861        </a>
862
863        <!-- 2) WhatsApp — wa.me with URL-encoded pre-filled message -->
864        <a class="contact-option" href="https://wa.me/989036381172?text=%D8%B3%D9%84%D8%A7%D9%85%D8%8C%20%D8%AF%D8%B1%D8%AE%D9%88%D8%A7%D8%B3%D8%AA%20%D8%B3%D8%B1%D9%88%DB%8C%D8%B3%20%D8%A2%D8%B2%D9%85%D8%A7%DB%8C%D8%B4%DB%8C%20%D8%A7%D8%AA%D9%88%D9%85%D8%A7%D8%B3%DB%8C%D9%88%D9%86%20%D9%86%D8%B4%D8%B1%DB%8C%D8%A7%D8%AA%20%D8%AC%D8%A7%D8%B1%20%D8%B1%D8%A7%20%D8%AF%D8%A7%D8%B1%D9%85."
865           target="_blank" rel="noopener"
866           style="--chip:#25D366; --chip-bg:rgba(37,211,102,0.14)">
867          <span class="contact-chip" aria-hidden="true">
868            <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.25-1.38a9.9 9.9 0 0 0 4.79 1.22h.01c5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.14-2.9-7.01A9.82 9.82 0 0 0 12.04 2zm5.8 14.04c-.25.68-1.2 1.26-1.97 1.42-.52.11-1.2.2-3.5-.75-2.94-1.22-4.84-4.2-4.99-4.4-.14-.2-1.2-1.6-1.2-3.05 0-1.45.76-2.16 1.03-2.46.27-.3.59-.37.79-.37h.56c.18 0 .42-.07.66.5.24.59.82 2.04.89 2.19.07.15.12.32.02.52-.1.2-.15.32-.3.49-.15.17-.31.39-.45.52-.15.15-.3.31-.13.6.17.3.76 1.25 1.63 2.02 1.12 1 2.07 1.31 2.37 1.46.3.15.47.12.64-.07.17-.2.74-.86.94-1.16.2-.3.39-.25.66-.15.27.1 1.72.81 2.01.96.3.15.5.22.57.34.07.12.07.71-.18 1.4z"/></svg>
869          </span>
870          <span class="contact-text"><span class="t">واتساپ</span><span class="s">ارسال پیام در واتساپ</span></span>
871          <span class="chev" aria-hidden="true"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"/></svg></span>
872        </a>
873
874        <!-- 3) Bale — TODO[jaaar]: replace generic message icon + accent with the official Bale logo/color from assets/ -->
875        <a class="contact-option" href="https://web.bale.ai/chat?uid=955388938" target="_blank" rel="noopener"
876           style="--chip:#1AA5B0; --chip-bg:rgba(26,165,176,0.14)">
877          <span class="contact-chip" aria-hidden="true">
878            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 11.5a8.5 8.5 0 0 1-12.2 7.7L3 21l1.8-5.8A8.5 8.5 0 1 1 21 11.5z"/></svg>
879          </span>
880          <span class="contact-text"><span class="t">بله</span><span class="s">ارسال پیام در بله</span></span>
881          <span class="chev" aria-hidden="true"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"/></svg></span>
882        </a>
883
884        <!-- 4) Email / contact form -->
885        <a class="contact-option" href="https://www.jaaar.com/kiosk/contacts" target="_blank" rel="noopener"
886           style="--chip:#E8232A; --chip-bg:rgba(232,35,42,0.14)">
887          <span class="contact-chip" aria-hidden="true">
888            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg>
889          </span>
890          <span class="contact-text"><span class="t">ایمیل و فرم تماس</span><span class="s">تکمیل فرم در صفحه تماس</span></span>
891          <span class="chev" aria-hidden="true"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"/></svg></span>
892        </a>
893
894        <!-- 5) Phone call — tel: (no new tab) -->
895        <a class="contact-option" href="tel:02191001955"
896           style="--chip:#a1a1aa; --chip-bg:rgba(161,161,170,0.14)">
897          <span class="contact-chip" aria-hidden="true">
898            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.8 19.8 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
899          </span>
900          <span class="contact-text"><span class="t">تماس تلفنی</span><span class="s">تماس مستقیم با ما</span></span>
901          <span class="chev" aria-hidden="true"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"/></svg></span>
902        </a>
903
904      </div>
905    </div>
906  </div>
907
908  
908<script>
909    /* ---------- Header scroll state ---------- */
910    const header = document.getElementById('siteHeader');
911    const onScroll = () => header.classList.toggle('scrolled', window.scrollY > 8);
912    window.addEventListener('scroll', onScroll, { passive: true });
913    onScroll();
914
915    /* ---------- Mobile nav ---------- */
916    const navToggle = document.getElementById('navToggle');
917    const navLinks = document.getElementById('navLinks');
918    navToggle.addEventListener('click', () => {
919      const open = navLinks.classList.toggle('mobile-open');
920      navToggle.setAttribute('aria-expanded', String(open));
921    });
922    navLinks.querySelectorAll('a').forEach(a =>
923      a.addEventListener('click', () => {
924        navLinks.classList.remove('mobile-open');
925        navToggle.setAttribute('aria-expanded', 'false');
926      })
927    );
928
929    /* ---------- Reveal on scroll (enhancement; content is visible without JS) ---------- */
930    const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
931    if (reduceMotion) {
932      document.querySelectorAll('.reveal').forEach(el => el.classList.add('in'));
933    } else {
934      const io = new IntersectionObserver((entries) => {
935        entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } });
936      }, { threshold: 0.12 });
937      document.querySelectorAll('.reveal').forEach(el => io.observe(el));
938    }
939
940    /* ---------- Contact lightbox (channel picker) ---------- */
941    const backdrop = document.getElementById('modalBackdrop');
942    let lastFocused = null;
943
944    function openModal(e) {
945      if (e) e.preventDefault();
946      lastFocused = document.activeElement;
947      backdrop.hidden = false;
948      requestAnimationFrame(() => backdrop.classList.add('open'));
949      document.body.style.overflow = 'hidden';
950      const first = backdrop.querySelector('a, button');
951      if (first) setTimeout(() => first.focus(), 50);
952    }
953    function closeModal() {
954      backdrop.classList.remove('open');
955      document.body.style.overflow = '';
956      setTimeout(() => { backdrop.hidden = true; }, 260);
957      if (lastFocused) lastFocused.focus();
958    }
959
960    document.querySelectorAll('[data-open-modal]').forEach(b => b.addEventListener('click', openModal));
961    document.querySelectorAll('[data-close-modal]').forEach(b => b.addEventListener('click', closeModal));
962    backdrop.addEventListener('click', (e) => { if (e.target === backdrop) closeModal(); });
963    document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && !backdrop.hidden) closeModal(); });
964
965    // Close the lightbox after a channel is chosen (link opens in its own tab / dialer).
966    backdrop.querySelectorAll('.contact-option').forEach(a =>
967      a.addEventListener('click', () => setTimeout(closeModal, 80))
968    );
969
970    // Focus trap.
971    backdrop.addEventListener('keydown', (e) => {
972      if (e.key !== 'Tab') return;
973      const list = Array.from(backdrop.querySelectorAll('a[href], button')).filter(el => el.offsetParent !== null);
974      if (!list.length) return;
975      const first = list[0], last = list[list.length - 1];
976      if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus(); }
977      else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); }
978    });
979  </script>
979
980</body>
981</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.