{"id":10,"date":"2026-05-30T11:26:36","date_gmt":"2026-05-30T11:26:36","guid":{"rendered":"https:\/\/yari.me\/?page_id=10"},"modified":"2026-05-30T11:28:42","modified_gmt":"2026-05-30T11:28:42","slug":"home","status":"publish","type":"page","link":"https:\/\/yari.me\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"10\" class=\"elementor elementor-10\">\n\t\t\t\t<div class=\"elementor-element elementor-element-72d555a e-con e-atomic-element e-div-block-base \" data-id=\"72d555a\" data-element_type=\"e-div-block\" data-e-type=\"e-div-block\" data-interaction-id=\"72d555a\">\n    \t\t<div class=\"elementor-element elementor-element-de6b72c elementor-widget elementor-widget-html\" data-id=\"de6b72c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"fa\" dir=\"rtl\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>\u0645\u062d\u0645\u062f\u0631\u0636\u0627 \u0642\u062f\u0645\u06cc\u0627\u0631\u06cc \u2014 \u067e\u0631\u0648\u062f\u0627\u06a9\u062a \u062f\u06cc\u0632\u0627\u06cc\u0646\u0631<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Vazirmatn:wght@300;400;500;700;900&display=swap\" rel=\"stylesheet\">\n<style>\n*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}\n:root{\n  --bg:#060608;--s1:#0d0d12;--s2:#12121a;\n  --acc:#b8ff3c;--acc2:#7cffb2;--acc3:#ff6b6b;\n  --t1:#f2f2f8;--t2:#9090a8;--t3:#505065;\n  --border:rgba(255,255,255,0.06);\n}\nhtml{scroll-behavior:smooth}\nbody{background:var(--bg);color:var(--t1);font-family:'Vazirmatn',sans-serif;direction:rtl;overflow-x:hidden}\n\n\/* \u2550\u2550 CURSOR GLOW \u2550\u2550 *\/\n.cursor-glow{\n  position:fixed;width:400px;height:400px;border-radius:50%;\n  background:radial-gradient(circle,rgba(184,255,60,0.04),transparent 70%);\n  pointer-events:none;z-index:0;transform:translate(-50%,-50%);\n  transition:left 0.4s ease,top 0.4s ease;\n}\n\n\/* \u2550\u2550 NAV \u2550\u2550 *\/\nnav{\n  position:fixed;top:0;right:0;left:0;z-index:200;\n  padding:1rem 2.5rem;\n  display:flex;justify-content:space-between;align-items:center;\n  background:rgba(6,6,8,0.7);backdrop-filter:blur(24px);\n  border-bottom:1px solid var(--border);\n}\n.logo{font-weight:900;font-size:1.1rem;letter-spacing:-0.5px}\n.logo span{color:var(--acc)}\n.nav-cta{\n  background:var(--acc);color:#060608;\n  padding:8px 20px;border-radius:50px;\n  font-family:'Vazirmatn',sans-serif;font-weight:700;font-size:0.85rem;\n  text-decoration:none;border:none;cursor:pointer;\n  transition:transform 0.2s,box-shadow 0.2s;\n}\n.nav-cta:hover{transform:scale(1.04);box-shadow:0 0 20px rgba(184,255,60,0.35)}\n\n\/* \u2550\u2550 HERO \u2550\u2550 *\/\n.hero{\n  min-height:100vh;display:flex;align-items:center;\n  padding:6rem 2.5rem 4rem;position:relative;overflow:hidden;\n}\n.hero-noise{\n  position:absolute;inset:0;z-index:0;opacity:0.025;\n  background-image:url(\"data:image\/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'\/%3E%3C\/svg%3E\");\n  background-size:200px;\n}\n.hero-orb{\n  position:absolute;right:-10%;top:5%;\n  width:55vw;height:55vw;max-width:700px;max-height:700px;\n  border-radius:50%;\n  background:radial-gradient(circle at 40% 40%,rgba(184,255,60,0.12),rgba(124,255,178,0.06) 40%,transparent 70%);\n  animation:orbFloat 8s ease-in-out infinite;\n}\n@keyframes orbFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-30px) scale(1.03)}}\n\n.hero-content{position:relative;z-index:1;max-width:680px}\n.hero-tag{\n  display:inline-flex;align-items:center;gap:8px;\n  border:1px solid rgba(184,255,60,0.3);\n  padding:5px 14px;border-radius:50px;\n  font-size:0.78rem;color:var(--acc);margin-bottom:2rem;\n  opacity:0;animation:fadeUp 0.8s 0.2s forwards;\n}\n.live-dot{width:7px;height:7px;border-radius:50%;background:var(--acc);animation:livePulse 2s infinite}\n@keyframes livePulse{0%,100%{box-shadow:0 0 0 0 rgba(184,255,60,0.5)}50%{box-shadow:0 0 0 6px rgba(184,255,60,0)}}\n\n.hero h1{\n  font-size:clamp(2.6rem,6.5vw,5rem);font-weight:900;line-height:1.05;\n  margin-bottom:1.5rem;\n  opacity:0;animation:fadeUp 0.9s 0.35s forwards;\n}\n.h1-line2{color:var(--acc)}\n.hero-sub{\n  font-size:1rem;color:var(--t2);max-width:480px;margin-bottom:2.5rem;line-height:1.9;\n  opacity:0;animation:fadeUp 0.9s 0.5s forwards;\n}\n.hero-btns{\n  display:flex;gap:1rem;flex-wrap:wrap;\n  opacity:0;animation:fadeUp 0.9s 0.65s forwards;\n}\n.btn-p{\n  background:var(--acc);color:#060608;padding:13px 26px;border-radius:8px;\n  font-family:'Vazirmatn',sans-serif;font-weight:700;font-size:0.9rem;\n  text-decoration:none;border:none;cursor:pointer;\n  transition:transform 0.25s,box-shadow 0.25s;\n  display:inline-block;\n}\n.btn-p:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(184,255,60,0.3)}\n.btn-o{\n  background:transparent;color:var(--t1);padding:13px 26px;border-radius:8px;\n  font-family:'Vazirmatn',sans-serif;font-weight:500;font-size:0.9rem;\n  text-decoration:none;border:1px solid var(--border);cursor:pointer;\n  transition:border-color 0.25s,background 0.25s;\n  display:inline-block;\n}\n.btn-o:hover{border-color:rgba(255,255,255,0.18);background:rgba(255,255,255,0.04)}\n\n.scroll-hint{\n  position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);\n  display:flex;flex-direction:column;align-items:center;gap:6px;\n  color:var(--t3);font-size:0.72rem;\n  opacity:0;animation:fadeUp 1s 1.2s forwards;\n}\n.scroll-mouse{\n  width:22px;height:34px;border:1.5px solid var(--t3);border-radius:11px;\n  display:flex;justify-content:center;padding-top:6px;\n}\n.scroll-wheel{\n  width:3px;height:7px;background:var(--t3);border-radius:2px;\n  animation:scrollWheel 2s ease-in-out infinite;\n}\n@keyframes scrollWheel{0%,100%{transform:translateY(0);opacity:1}70%{transform:translateY(10px);opacity:0}}\n\n\/* \u2550\u2550 STORY SECTION \u2550\u2550 *\/\n.story-section{position:relative;padding:0}\n.story-sticky{\n  position:sticky;top:0;height:100vh;\n  display:flex;align-items:center;justify-content:center;\n  overflow:hidden;\n}\n.story-scroll-track{height:500vh}\n.story-canvas{\n  width:100%;max-width:900px;padding:2rem;\n  position:relative;min-height:80vh;\n}\n\n.stage{\n  position:absolute;inset:0;\n  display:flex;flex-direction:column;align-items:center;justify-content:center;\n  padding:2rem;opacity:0;pointer-events:none;\n  transition:opacity 0s;\n}\n.stage.active{opacity:1;pointer-events:auto}\n\n.stage-icon{font-size:5rem;margin-bottom:1.5rem;animation:iconFloat 3s ease-in-out infinite}\n@keyframes iconFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}\n\n.stage-num{font-size:0.75rem;letter-spacing:3px;color:var(--acc);margin-bottom:0.75rem;text-transform:uppercase}\n.stage h2{font-size:clamp(1.8rem,4vw,3rem);font-weight:900;text-align:center;margin-bottom:1rem;line-height:1.1}\n.stage p{font-size:1rem;color:var(--t2);text-align:center;max-width:520px;line-height:1.9;margin-bottom:2rem}\n\n.morph-bg{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}\n.stage-visual{width:100%;max-width:500px;margin-top:1rem}\n\n\/* Problem bubble *\/\n.problem-bubble{\n  background:rgba(255,107,107,0.08);border:1px solid rgba(255,107,107,0.2);\n  border-radius:20px;padding:1.5rem 2rem;text-align:center;\n  animation:bubbleIn 0.6s ease;\n}\n@keyframes bubbleIn{from{transform:scale(0.8);opacity:0}to{transform:scale(1);opacity:1}}\n.problem-bubble .q{font-size:2rem;margin-bottom:0.5rem}\n.problem-bubble p{color:#ff9999;font-size:0.9rem}\n\n\/* Research grid *\/\n.research-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}\n.r-dot{\n  aspect-ratio:1;border-radius:12px;\n  background:rgba(184,255,60,0.08);border:1px solid rgba(184,255,60,0.15);\n  display:flex;align-items:center;justify-content:center;font-size:1.4rem;\n  animation:dotPop 0.4s ease both;\n}\n.r-dot:nth-child(1){animation-delay:0s}.r-dot:nth-child(2){animation-delay:0.07s}\n.r-dot:nth-child(3){animation-delay:0.14s}.r-dot:nth-child(4){animation-delay:0.21s}\n.r-dot:nth-child(5){animation-delay:0.28s}.r-dot:nth-child(6){animation-delay:0.35s}\n.r-dot:nth-child(7){animation-delay:0.42s}.r-dot:nth-child(8){animation-delay:0.49s}\n@keyframes dotPop{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}\n\n\/* Wireframe *\/\n.wireframe{border:1px solid rgba(184,255,60,0.2);border-radius:16px;padding:1.5rem;background:rgba(184,255,60,0.03)}\n.wf-row{display:flex;gap:8px;margin-bottom:8px;align-items:center}\n.wf-block{height:24px;border-radius:6px;background:rgba(184,255,60,0.12);border:1px solid rgba(184,255,60,0.15)}\n.wf-title{width:40%;animation:wfSlide 0.5s 0s both}\n.wf-sub{width:25%;height:16px;animation:wfSlide 0.5s 0.1s both}\n.wf-img{width:100%;height:80px;animation:wfSlide 0.5s 0.2s both}\n.wf-txt1{width:80%;height:12px;animation:wfSlide 0.5s 0.3s both}\n.wf-txt2{width:60%;height:12px;animation:wfSlide 0.5s 0.4s both}\n.wf-btn{width:30%;background:rgba(184,255,60,0.3)!important;animation:wfSlide 0.5s 0.5s both}\n@keyframes wfSlide{from{transform:translateX(20px);opacity:0}to{transform:none;opacity:1}}\n\n\/* UI Preview *\/\n.ui-preview{border-radius:20px;overflow:hidden;border:1px solid rgba(255,255,255,0.08);background:var(--s1)}\n.ui-header{background:var(--acc);padding:1rem 1.5rem;display:flex;align-items:center;gap:12px}\n.ui-logo-dot{width:32px;height:32px;border-radius:8px;background:rgba(0,0,0,0.2)}\n.ui-h-title{font-weight:700;color:#060608;font-size:0.9rem}\n.ui-body{padding:1.5rem;display:grid;grid-template-columns:1fr 1fr;gap:12px}\n.ui-card{background:var(--s2);border-radius:12px;padding:1rem;border:1px solid var(--border);animation:cardIn 0.4s ease both}\n.ui-card:nth-child(1){animation-delay:0.1s}.ui-card:nth-child(2){animation-delay:0.2s}\n.ui-card:nth-child(3){animation-delay:0.3s}.ui-card:nth-child(4){animation-delay:0.4s}\n@keyframes cardIn{from{transform:scale(0.9) translateY(10px);opacity:0}to{transform:none;opacity:1}}\n.ui-card-icon{font-size:1.5rem;margin-bottom:6px}\n.ui-card-label{font-size:0.75rem;color:var(--t2)}\n.ui-card-val{font-size:1.1rem;font-weight:700;color:var(--acc)}\n\n\/* Test users *\/\n.users-row{display:flex;justify-content:center;gap:1.5rem;flex-wrap:wrap}\n.user-bubble{display:flex;flex-direction:column;align-items:center;gap:8px;animation:userIn 0.5s ease both}\n.user-bubble:nth-child(1){animation-delay:0s}.user-bubble:nth-child(2){animation-delay:0.15s}.user-bubble:nth-child(3){animation-delay:0.3s}\n@keyframes userIn{from{transform:translateY(30px);opacity:0}to{transform:none;opacity:1}}\n.user-avatar{width:56px;height:56px;border-radius:50%;background:var(--s2);border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:1.6rem}\n.user-rating{display:flex;gap:2px}\n.star{font-size:0.9rem;animation:starIn 0.3s ease both}\n.star:nth-child(1){animation-delay:0.4s}.star:nth-child(2){animation-delay:0.5s}.star:nth-child(3){animation-delay:0.6s}.star:nth-child(4){animation-delay:0.7s}.star:nth-child(5){animation-delay:0.8s}\n@keyframes starIn{from{transform:scale(0) rotate(-30deg)}to{transform:none}}\n.user-feedback{font-size:0.7rem;color:var(--t2);text-align:center;max-width:80px}\n\n\/* Launch *\/\n.launch-ring{width:180px;height:180px;border-radius:50%;margin:0 auto;border:2px solid rgba(184,255,60,0.2);display:flex;align-items:center;justify-content:center;position:relative;animation:ringPulse 2s ease-in-out infinite}\n@keyframes ringPulse{0%,100%{box-shadow:0 0 0 0 rgba(184,255,60,0.1)}50%{box-shadow:0 0 0 30px rgba(184,255,60,0)}}\n.launch-inner{width:130px;height:130px;border-radius:50%;background:rgba(184,255,60,0.1);border:1px solid rgba(184,255,60,0.3);display:flex;align-items:center;justify-content:center;font-size:3.5rem;animation:launchBounce 0.6s ease both}\n@keyframes launchBounce{0%{transform:scale(0)}70%{transform:scale(1.1)}100%{transform:scale(1)}}\n.launch-particles{position:absolute;inset:-20px}\n.particle{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--acc);animation:particleFly 1.5s ease-out infinite}\n.particle:nth-child(1){top:0;left:50%;--dx:0px;--dy:-40px;animation-delay:0s}\n.particle:nth-child(2){top:25%;right:0;--dx:40px;--dy:-20px;animation-delay:0.2s}\n.particle:nth-child(3){bottom:0;left:50%;--dx:0px;--dy:40px;animation-delay:0.4s}\n.particle:nth-child(4){top:25%;left:0;--dx:-40px;--dy:-20px;animation-delay:0.6s}\n.particle:nth-child(5){top:50%;right:0;--dx:40px;--dy:0px;animation-delay:0.8s}\n.particle:nth-child(6){top:50%;left:0;--dx:-40px;--dy:0px;animation-delay:1s}\n@keyframes particleFly{0%{transform:translate(0,0) scale(1);opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(0);opacity:0}}\n\n\/* Progress dots *\/\n.story-progress{position:fixed;left:1.5rem;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:10px;z-index:300}\n.prog-dot{width:6px;height:6px;border-radius:50%;background:var(--t3);transition:all 0.4s ease;cursor:pointer}\n.prog-dot.active{background:var(--acc);height:24px;border-radius:3px}\n\n.stage-0 .stage-num{color:#ff9999}\n.stage-1 .stage-num{color:var(--acc)}\n.stage-2 .stage-num{color:#7cffb2}\n.stage-3 .stage-num{color:var(--acc)}\n.stage-4 .stage-num{color:#a78bfa}\n.stage-5 .stage-num{color:var(--acc)}\n\n\/* \u2550\u2550 SERVICES \u2550\u2550 *\/\n.services{padding:7rem 2.5rem;background:var(--s1)}\n.sec-label{font-size:0.75rem;letter-spacing:3px;color:var(--acc);margin-bottom:1rem}\n.sec-title{font-size:clamp(1.8rem,3.5vw,2.8rem);font-weight:900;margin-bottom:0.75rem}\n.sec-sub{color:var(--t2);max-width:450px;margin-bottom:3rem;font-size:0.95rem;line-height:1.8}\n.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:var(--border);border:1px solid var(--border);border-radius:20px;overflow:hidden}\n.svc-card{background:var(--s1);padding:2.2rem;opacity:0;transform:translateY(30px);transition:opacity 0.6s ease,transform 0.6s ease,background 0.3s}\n.svc-card.visible{opacity:1;transform:none}\n.svc-card:hover{background:var(--s2)}\n.svc-card:hover .svc-icon{transform:scale(1.15) rotate(-5deg)}\n.svc-icon{font-size:2rem;margin-bottom:1.2rem;display:inline-block;transition:transform 0.3s}\n.svc-card h3{font-size:1rem;font-weight:700;margin-bottom:0.6rem}\n.svc-card p{color:var(--t2);font-size:0.85rem;line-height:1.8}\n\n\/* \u2550\u2550 STATS \u2550\u2550 *\/\n.stats{padding:4rem 2.5rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:2rem;text-align:center;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}\n.stat-n{font-size:3rem;font-weight:900;color:var(--acc);line-height:1}\n.stat-l{font-size:0.85rem;color:var(--t2);margin-top:4px}\n\n\/* \u2550\u2550 CONTACT \u2550\u2550 *\/\n.contact{padding:7rem 2.5rem;text-align:center}\n.contact-box{max-width:560px;margin:0 auto;background:var(--s1);border:1px solid var(--border);border-radius:24px;padding:4rem 3rem;position:relative;overflow:hidden}\n.contact-glow{position:absolute;top:-60px;right:-60px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(184,255,60,0.12),transparent 70%);pointer-events:none}\n.contact-box h2{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:900;margin-bottom:0.75rem}\n.contact-box p{color:var(--t2);margin-bottom:2rem;font-size:0.95rem;line-height:1.8}\n.contact-links{display:flex;justify-content:center;gap:0.75rem;flex-wrap:wrap}\n.clink{display:inline-flex;align-items:center;gap:6px;padding:9px 18px;border-radius:50px;border:1px solid var(--border);color:var(--t2);text-decoration:none;font-size:0.85rem;transition:all 0.25s}\n.clink:hover{border-color:var(--acc);color:var(--acc);background:rgba(184,255,60,0.06)}\n\nfooter{padding:2rem 2.5rem;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}\nfooter p{color:var(--t3);font-size:0.82rem}\n\n@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}\n@keyframes morphEl{0%{rx:45%;ry:40%}100%{rx:55%;ry:30%}}\n@keyframes morphEl2{0%{rx:50%;ry:35%}100%{rx:35%;ry:48%}}\n@keyframes morphPoly{0%{points:20% 10% 80% 30% 70% 90% 10% 70%}100%{points:30% 5% 85% 20% 65% 95% 5% 75%}}\n<\/style>\n<\/head>\n<body>\n\n<div class=\"cursor-glow\" id=\"cursorGlow\"><\/div>\n\n<nav>\n  <div class=\"logo\">MR<span>.<\/span>Q<\/div>\n  <a href=\"#contact\" class=\"nav-cta\">\u0634\u0631\u0648\u0639 \u0647\u0645\u06a9\u0627\u0631\u06cc<\/a>\n<\/nav>\n\n<!-- HERO -->\n<section class=\"hero\" id=\"home\">\n  <div class=\"hero-noise\"><\/div>\n  <div class=\"hero-orb\"><\/div>\n  <div class=\"hero-content\">\n    <div class=\"hero-tag\"><span class=\"live-dot\"><\/span>\u0622\u0645\u0627\u062f\u0647 \u067e\u0631\u0648\u0698\u0647 \u062c\u062f\u06cc\u062f<\/div>\n    <h1>\u0645\u062d\u0645\u062f\u0631\u0636\u0627<br><span class=\"h1-line2\">\u0642\u062f\u0645\u06cc\u0627\u0631\u06cc<\/span><\/h1>\n    <p class=\"hero-sub\">\u067e\u0631\u0648\u062f\u0627\u06a9\u062a \u062f\u06cc\u0632\u0627\u06cc\u0646\u0631 \u2014 \u0637\u0631\u0627\u062d\u06cc \u062a\u062c\u0631\u0628\u0647\u200c\u0647\u0627\u06cc\u06cc \u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0639\u0627\u0634\u0642\u0634\u0627\u0646 \u0645\u06cc\u200c\u0634\u0648\u0646\u062f.<br>\u0627\u0632 \u0627\u06cc\u062f\u0647 \u062a\u0627 \u0645\u062d\u0635\u0648\u0644 \u0646\u0647\u0627\u06cc\u06cc\u060c \u0628\u0627 \u062f\u0642\u062a \u0648 \u0627\u0633\u062a\u0631\u0627\u062a\u0698\u06cc.<\/p>\n    <div class=\"hero-btns\">\n      <a href=\"#story\" class=\"btn-p\">\u067e\u0631\u0648\u062f\u0627\u06a9\u062a \u062f\u06cc\u0632\u0627\u06cc\u0646 \u0686\u06cc\u0647\u061f<\/a>\n      <a href=\"#services\" class=\"btn-o\">\u062e\u062f\u0645\u0627\u062a \u0645\u0646<\/a>\n    <\/div>\n  <\/div>\n  <div class=\"scroll-hint\">\n    <div class=\"scroll-mouse\"><div class=\"scroll-wheel\"><\/div><\/div>\n    \u0627\u0633\u06a9\u0631\u0648\u0644 \u06a9\u0646\n  <\/div>\n<\/section>\n\n<!-- STORY: WHAT IS PRODUCT DESIGN -->\n<div class=\"story-section\" id=\"story\">\n  <div class=\"story-scroll-track\">\n    <div class=\"story-sticky\">\n      <div class=\"story-progress\" id=\"storyProgress\"><\/div>\n      <div class=\"story-canvas\" id=\"storyCanvas\">\n\n        <!-- Stage 0: Problem -->\n        <div class=\"stage stage-0 active\" id=\"stage-0\">\n          <div class=\"morph-bg\">\n            <svg width=\"100%\" height=\"100%\" style=\"position:absolute;inset:0\">\n              <defs><radialGradient id=\"g0\" cx=\"50%\" cy=\"50%\"><stop offset=\"0%\" stop-color=\"#ff6b6b\" stop-opacity=\"0.08\"\/><stop offset=\"100%\" stop-color=\"#ff6b6b\" stop-opacity=\"0\"\/><\/radialGradient><\/defs>\n              <ellipse cx=\"50%\" cy=\"50%\" rx=\"45%\" ry=\"40%\" fill=\"url(#g0)\" style=\"animation:morphEl 4s ease-in-out infinite alternate\"\/>\n            <\/svg>\n          <\/div>\n          <div class=\"stage-num\">\u0645\u0631\u062d\u0644\u0647 \u06f0\u06f1<\/div>\n          <h2>\u06cc\u0647 \u0645\u0634\u06a9\u0644 \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u0647<\/h2>\n          <p>\u0647\u0631 \u0645\u062d\u0635\u0648\u0644 \u062f\u06cc\u062c\u06cc\u062a\u0627\u0644 \u0627\u0632 \u06cc\u0647 \u062f\u0631\u062f \u0648\u0627\u0642\u0639\u06cc \u0634\u0631\u0648\u0639 \u0645\u06cc\u0634\u0647. \u06a9\u0627\u0631\u0628\u0631 \u06cc\u0647 \u0686\u06cc\u0632\u06cc \u0645\u06cc\u200c\u062e\u0648\u0627\u062f \u0648\u0644\u06cc \u0646\u0645\u06cc\u062a\u0648\u0646\u0647 \u0628\u0647 \u0631\u0627\u062d\u062a\u06cc \u0628\u0647\u0634 \u0628\u0631\u0633\u0647.<\/p>\n          <div class=\"stage-visual\">\n            <div class=\"problem-bubble\">\n              <div class=\"q\">\ud83d\ude24<\/div>\n              <p>\u0686\u0631\u0627 \u0627\u06cc\u0646 \u0642\u062f\u0631 \u067e\u06cc\u0686\u06cc\u062f\u0647\u200c\u0633\u062a\u061f<br>\u0645\u0646 \u0641\u0642\u0637 \u0645\u06cc\u062e\u0648\u0627\u0645 \u06cc\u0647 \u06a9\u0627\u0631 \u0633\u0627\u062f\u0647 \u0627\u0646\u062c\u0627\u0645 \u0628\u062f\u0645!<\/p>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <!-- Stage 1: Research -->\n        <div class=\"stage stage-1\" id=\"stage-1\">\n          <div class=\"morph-bg\">\n            <svg width=\"100%\" height=\"100%\" style=\"position:absolute;inset:0\">\n              <defs><radialGradient id=\"g1\" cx=\"30%\" cy=\"60%\"><stop offset=\"0%\" stop-color=\"#b8ff3c\" stop-opacity=\"0.07\"\/><stop offset=\"100%\" stop-color=\"#b8ff3c\" stop-opacity=\"0\"\/><\/radialGradient><\/defs>\n              <ellipse cx=\"50%\" cy=\"50%\" rx=\"50%\" ry=\"35%\" fill=\"url(#g1)\" style=\"animation:morphEl2 5s ease-in-out infinite alternate\"\/>\n            <\/svg>\n          <\/div>\n          <div class=\"stage-num\">\u0645\u0631\u062d\u0644\u0647 \u06f0\u06f2<\/div>\n          <h2>\u062a\u062d\u0642\u06cc\u0642 \u0648 \u06a9\u0634\u0641 \u06a9\u0627\u0631\u0628\u0631<\/h2>\n          <p>\u067e\u0631\u0648\u062f\u0627\u06a9\u062a \u062f\u06cc\u0632\u0627\u06cc\u0646\u0631 \u0628\u0627 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0635\u062d\u0628\u062a \u0645\u06cc\u06a9\u0646\u0647\u060c \u0631\u0641\u062a\u0627\u0631\u0634\u0648\u0646 \u0631\u0648 \u0622\u0646\u0627\u0644\u06cc\u0632 \u0645\u06cc\u06a9\u0646\u0647 \u0648 \u062f\u0631\u062f\u0634\u0648\u0646 \u0631\u0648 \u0627\u0632 \u0646\u0632\u062f\u06cc\u06a9 \u0645\u06cc\u200c\u0628\u06cc\u0646\u0647.<\/p>\n          <div class=\"stage-visual\">\n            <div class=\"research-grid\" id=\"rGrid\"><\/div>\n          <\/div>\n        <\/div>\n\n        <!-- Stage 2: Wireframe -->\n        <div class=\"stage stage-2\" id=\"stage-2\">\n          <div class=\"morph-bg\">\n            <svg width=\"100%\" height=\"100%\" style=\"position:absolute;inset:0\">\n              <defs><radialGradient id=\"g2\" cx=\"70%\" cy=\"40%\"><stop offset=\"0%\" stop-color=\"#7cffb2\" stop-opacity=\"0.07\"\/><stop offset=\"100%\" stop-color=\"#7cffb2\" stop-opacity=\"0\"\/><\/radialGradient><\/defs>\n              <polygon points=\"20%,10% 80%,30% 70%,90% 10%,70%\" fill=\"url(#g2)\" opacity=\"0.8\" style=\"animation:morphPoly 6s ease-in-out infinite alternate\"\/>\n            <\/svg>\n          <\/div>\n          <div class=\"stage-num\">\u0645\u0631\u062d\u0644\u0647 \u06f0\u06f3<\/div>\n          <h2>\u0627\u06cc\u062f\u0647 \u2192 \u0633\u0627\u062e\u062a\u0627\u0631<\/h2>\n          <p>\u0642\u0628\u0644 \u0627\u0632 \u0647\u0631 \u0637\u0631\u0627\u062d\u06cc \u0631\u0646\u06af\u06cc\u060c \u0633\u0627\u062e\u062a\u0627\u0631 \u0648 \u0686\u06cc\u062f\u0645\u0627\u0646 \u0635\u0641\u062d\u0627\u062a \u062a\u0639\u0631\u06cc\u0641 \u0645\u06cc\u0634\u0647. \u0627\u06cc\u0646 wireframe \u0647\u0645\u0647 \u0631\u0648 \u0647\u0645\u200c\u0631\u0627\u0633\u062a\u0627 \u0645\u06cc\u06a9\u0646\u0647.<\/p>\n          <div class=\"stage-visual\">\n            <div class=\"wireframe\">\n              <div class=\"wf-row\"><div class=\"wf-block wf-title\"><\/div><\/div>\n              <div class=\"wf-row\"><div class=\"wf-block wf-sub\"><\/div><\/div>\n              <div class=\"wf-row\"><div class=\"wf-block wf-img\"><\/div><\/div>\n              <div class=\"wf-row\"><div class=\"wf-block wf-txt1\"><\/div><\/div>\n              <div class=\"wf-row\"><div class=\"wf-block wf-txt2\"><\/div><\/div>\n              <div class=\"wf-row\"><div class=\"wf-block wf-btn\"><\/div><\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <!-- Stage 3: UI Design -->\n        <div class=\"stage stage-3\" id=\"stage-3\">\n          <div class=\"stage-num\">\u0645\u0631\u062d\u0644\u0647 \u06f0\u06f4<\/div>\n          <h2>\u0637\u0631\u0627\u062d\u06cc \u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0632\u06cc\u0628\u0627<\/h2>\n          <p>\u062d\u0627\u0644\u0627 \u0631\u0646\u06af\u060c \u062a\u0627\u06cc\u067e\u0648\u06af\u0631\u0627\u0641\u06cc \u0648 \u0628\u0635\u0631\u06cc\u200c\u0647\u0627 \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc\u0634\u0646 \u062a\u0627 \u06cc\u0647 \u062a\u062c\u0631\u0628\u0647 \u0642\u0627\u0628\u0644 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0648 \u0644\u0630\u062a\u0628\u062e\u0634 \u0628\u0633\u0627\u0632\u06cc\u0645.<\/p>\n          <div class=\"stage-visual\">\n            <div class=\"ui-preview\">\n              <div class=\"ui-header\">\n                <div class=\"ui-logo-dot\"><\/div>\n                <div class=\"ui-h-title\">\u062f\u0627\u0634\u0628\u0648\u0631\u062f \u0645\u062d\u0635\u0648\u0644<\/div>\n              <\/div>\n              <div class=\"ui-body\">\n                <div class=\"ui-card\"><div class=\"ui-card-icon\">\ud83d\udc65<\/div><div class=\"ui-card-label\">\u06a9\u0627\u0631\u0628\u0631\u0627\u0646<\/div><div class=\"ui-card-val\">\u06f2,\u06f4\u06f8\u06f0<\/div><\/div>\n                <div class=\"ui-card\"><div class=\"ui-card-icon\">\ud83d\udcc8<\/div><div class=\"ui-card-label\">\u0631\u0634\u062f<\/div><div class=\"ui-card-val\">+\u06f3\u06f4\u066a<\/div><\/div>\n                <div class=\"ui-card\"><div class=\"ui-card-icon\">\u2b50<\/div><div class=\"ui-card-label\">\u0627\u0645\u062a\u06cc\u0627\u0632<\/div><div class=\"ui-card-val\">\u06f4.\u06f9<\/div><\/div>\n                <div class=\"ui-card\"><div class=\"ui-card-icon\">\ud83d\ude80<\/div><div class=\"ui-card-label\">\u0627\u0646\u062a\u0634\u0627\u0631<\/div><div class=\"ui-card-val\">v\u06f3.\u06f0<\/div><\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <!-- Stage 4: Testing -->\n        <div class=\"stage stage-4\" id=\"stage-4\">\n          <div class=\"stage-num\">\u0645\u0631\u062d\u0644\u0647 \u06f0\u06f5<\/div>\n          <h2>\u062a\u0633\u062a \u0628\u0627 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0648\u0627\u0642\u0639\u06cc<\/h2>\n          <p>\u0628\u0647\u062a\u0631\u06cc\u0646 \u0637\u0631\u0627\u062d\u06cc \u0647\u0645 \u0628\u062f\u0648\u0646 \u062a\u0633\u062a \u0628\u0627 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0648\u0627\u0642\u0639\u06cc \u0646\u0627\u0642\u0635\u0647. \u0628\u0627\u0632\u062e\u0648\u0631\u062f \u06af\u0631\u0641\u062a\u06cc\u0645\u060c \u0627\u0635\u0644\u0627\u062d \u06a9\u0631\u062f\u06cc\u0645\u060c \u0628\u0647\u062a\u0631 \u0634\u062f\u06cc\u0645.<\/p>\n          <div class=\"stage-visual\">\n            <div class=\"users-row\">\n              <div class=\"user-bubble\">\n                <div class=\"user-avatar\">\ud83d\udc69<\/div>\n                <div class=\"user-rating\"><span class=\"star\">\u2b50<\/span><span class=\"star\">\u2b50<\/span><span class=\"star\">\u2b50<\/span><span class=\"star\">\u2b50<\/span><span class=\"star\">\u2b50<\/span><\/div>\n                <div class=\"user-feedback\">\u062e\u06cc\u0644\u06cc \u0633\u0627\u062f\u0647 \u0648 \u0631\u0627\u062d\u062a\u0647!<\/div>\n              <\/div>\n              <div class=\"user-bubble\">\n                <div class=\"user-avatar\">\ud83d\udc68<\/div>\n                <div class=\"user-rating\"><span class=\"star\">\u2b50<\/span><span class=\"star\">\u2b50<\/span><span class=\"star\">\u2b50<\/span><span class=\"star\">\u2b50<\/span><span class=\"star\">\u2b50<\/span><\/div>\n                <div class=\"user-feedback\">\u062f\u0642\u06cc\u0642\u0627\u064b \u0647\u0645\u0648\u0646 \u0686\u06cc\u0632\u06cc \u06a9\u0647 \u0645\u06cc\u062e\u0648\u0627\u0633\u062a\u0645<\/div>\n              <\/div>\n              <div class=\"user-bubble\">\n                <div class=\"user-avatar\">\ud83e\uddd1<\/div>\n                <div class=\"user-rating\"><span class=\"star\">\u2b50<\/span><span class=\"star\">\u2b50<\/span><span class=\"star\">\u2b50<\/span><span class=\"star\">\u2b50<\/span><span class=\"star\">\u2b50<\/span><\/div>\n                <div class=\"user-feedback\">\u0633\u0631\u06cc\u0639 \u0648 \u0628\u062f\u0648\u0646 \u0627\u0634\u062a\u0628\u0627\u0647<\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n\n        <!-- Stage 5: Launch -->\n        <div class=\"stage stage-5\" id=\"stage-5\">\n          <div class=\"stage-num\">\u0646\u062a\u06cc\u062c\u0647 \u0646\u0647\u0627\u06cc\u06cc<\/div>\n          <h2>\u0645\u062d\u0635\u0648\u0644\u06cc \u06a9\u0647 <span style=\"color:var(--acc)\">\u06a9\u0627\u0631 \u0645\u06cc\u06a9\u0646\u0647<\/span><\/h2>\n          <p>\u067e\u0631\u0648\u062f\u0627\u06a9\u062a \u062f\u06cc\u0632\u0627\u06cc\u0646 = \u062d\u0644 \u0645\u0634\u06a9\u0644 \u06a9\u0627\u0631\u0628\u0631 + \u0627\u0647\u062f\u0627\u0641 \u06a9\u0633\u0628\u200c\u0648\u06a9\u0627\u0631 + \u0632\u06cc\u0628\u0627\u06cc\u06cc \u0628\u0635\u0631\u06cc. \u0647\u0645\u0632\u0645\u0627\u0646.<\/p>\n          <div class=\"stage-visual\" style=\"display:flex;flex-direction:column;align-items:center;gap:1.5rem\">\n            <div class=\"launch-ring\">\n              <div class=\"launch-inner\">\ud83d\ude80<\/div>\n              <div class=\"launch-particles\">\n                <div class=\"particle\"><\/div><div class=\"particle\"><\/div>\n                <div class=\"particle\"><\/div><div class=\"particle\"><\/div>\n                <div class=\"particle\"><\/div><div class=\"particle\"><\/div>\n              <\/div>\n            <\/div>\n            <p style=\"color:var(--acc);font-weight:700;font-size:0.9rem;text-align:center\">\u0645\u062d\u0635\u0648\u0644 \u0645\u0646\u062a\u0634\u0631 \u0634\u062f \u2014 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u062e\u0648\u0634\u062d\u0627\u0644\u0646 \u2713<\/p>\n          <\/div>\n        <\/div>\n\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>\n\n<!-- SERVICES -->\n<section class=\"services\" id=\"services\">\n  <div class=\"sec-label\">\u062e\u062f\u0645\u0627\u062a<\/div>\n  <h2 class=\"sec-title\">\u0686\u0637\u0648\u0631 \u06a9\u0645\u06a9 \u0645\u06cc\u06a9\u0646\u0645\u061f<\/h2>\n  <p class=\"sec-sub\">\u0637\u0631\u0627\u062d\u06cc \u0645\u062d\u0635\u0648\u0644 \u062f\u06cc\u062c\u06cc\u062a\u0627\u0644 \u0627\u0632 \u062a\u062d\u0642\u06cc\u0642 \u062a\u0627 \u062a\u062d\u0648\u06cc\u0644 \u2014 \u0628\u0627 \u0631\u0648\u06cc\u06a9\u0631\u062f \u0627\u0633\u062a\u0631\u0627\u062a\u0698\u06cc\u06a9 \u0648 \u06a9\u0627\u0631\u0628\u0631\u0645\u062d\u0648\u0631<\/p>\n  <div class=\"svc-grid\">\n    <div class=\"svc-card\"><div class=\"svc-icon\">\ud83c\udfaf<\/div><h3>UX Research<\/h3><p>\u062a\u062d\u0644\u06cc\u0644 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646\u060c \u0645\u0635\u0627\u062d\u0628\u0647 \u0639\u0645\u06cc\u0642 \u0648 user testing \u0628\u0631\u0627\u06cc \u062a\u0635\u0645\u06cc\u0645\u200c\u0647\u0627\u06cc \u0645\u0628\u062a\u0646\u06cc \u0628\u0631 \u062f\u0627\u062f\u0647<\/p><\/div>\n    <div class=\"svc-card\"><div class=\"svc-icon\">\ud83d\udd8c\ufe0f<\/div><h3>UI Design<\/h3><p>\u0631\u0627\u0628\u0637 \u06a9\u0627\u0631\u0628\u0631\u06cc \u0632\u06cc\u0628\u0627\u060c \u0645\u0646\u0633\u062c\u0645 \u0648 \u0642\u0627\u0628\u0644 \u062a\u0648\u0633\u0639\u0647 \u0628\u0627 \u0633\u06cc\u0633\u062a\u0645 \u0637\u0631\u0627\u062d\u06cc \u06a9\u0627\u0645\u0644<\/p><\/div>\n    <div class=\"svc-card\"><div class=\"svc-icon\">\u26a1<\/div><h3>Prototyping<\/h3><p>\u0646\u0645\u0648\u0646\u0647\u200c\u0647\u0627\u06cc \u062a\u0639\u0627\u0645\u0644\u06cc \u0628\u0631\u0627\u06cc \u0622\u0632\u0645\u0627\u06cc\u0634 \u0627\u06cc\u062f\u0647\u200c\u0647\u0627 \u067e\u06cc\u0634 \u0627\u0632 \u062a\u0648\u0633\u0639\u0647<\/p><\/div>\n    <div class=\"svc-card\"><div class=\"svc-icon\">\ud83d\udcf1<\/div><h3>Mobile Design<\/h3><p>\u0637\u0631\u0627\u062d\u06cc native \u0628\u0631\u0627\u06cc iOS \u0648 Android \u0628\u0627 \u062a\u0648\u062c\u0647 \u0628\u0647 Human Interface Guidelines<\/p><\/div>\n    <div class=\"svc-card\"><div class=\"svc-icon\">\ud83d\udd04<\/div><h3>Design System<\/h3><p>\u0633\u0627\u062e\u062a \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u06cc\u06a9\u067e\u0627\u0631\u0686\u0647 \u0628\u0631\u0627\u06cc \u062a\u0645\u0627\u0645 \u067e\u0644\u062a\u0641\u0631\u0645\u200c\u0647\u0627<\/p><\/div>\n    <div class=\"svc-card\"><div class=\"svc-icon\">\ud83d\udcca<\/div><h3>Product Strategy<\/h3><p>\u0645\u0634\u0627\u0648\u0631\u0647 \u0627\u0633\u062a\u0631\u0627\u062a\u0698\u06cc\u060c \u062a\u062d\u0644\u06cc\u0644 \u0631\u0642\u0628\u0627 \u0648 \u062a\u0639\u0631\u06cc\u0641 roadmap \u0645\u062d\u0635\u0648\u0644<\/p><\/div>\n  <\/div>\n<\/section>\n\n<!-- STATS -->\n<div class=\"stats\">\n  <div><div class=\"stat-n\" data-target=\"50\">\u06f0<\/div><div class=\"stat-l\">\u067e\u0631\u0648\u0698\u0647 \u0645\u0648\u0641\u0642<\/div><\/div>\n  <div><div class=\"stat-n\" data-target=\"5\">\u06f0<\/div><div class=\"stat-l\">\u0633\u0627\u0644 \u062a\u062c\u0631\u0628\u0647<\/div><\/div>\n  <div><div class=\"stat-n\" data-target=\"100\">\u06f0<\/div><div class=\"stat-l\">\u062f\u0631\u0635\u062f \u0631\u0636\u0627\u06cc\u062a<\/div><\/div>\n  <div><div class=\"stat-n\" data-target=\"12\">\u06f0<\/div><div class=\"stat-l\">\u06a9\u0644\u0627\u06cc\u0646\u062a \u0641\u0639\u0627\u0644<\/div><\/div>\n<\/div>\n\n<!-- CONTACT -->\n<section class=\"contact\" id=\"contact\">\n  <div class=\"contact-box\">\n    <div class=\"contact-glow\"><\/div>\n    <h2>\u0628\u06cc\u0627 \u06cc\u0647 \u0645\u062d\u0635\u0648\u0644<br><span style=\"color:var(--acc)\">\u0639\u0627\u0644\u06cc \u0628\u0633\u0627\u0632\u06cc\u0645<\/span><\/h2>\n    <p>\u0622\u0645\u0627\u062f\u0647 \u0634\u0646\u06cc\u062f\u0646 \u0627\u06cc\u062f\u0647\u200c\u0627\u062a \u0647\u0633\u062a\u0645. \u06cc\u0647 \u067e\u06cc\u0627\u0645 \u0628\u0641\u0631\u0633\u062a\u060c \u0628\u0627 \u0647\u0645 \u0634\u0631\u0648\u0639 \u0645\u06cc\u06a9\u0646\u06cc\u0645.<\/p>\n    <div class=\"contact-links\">\n      <a href=\"mailto:mr@example.com\" class=\"clink\">\u2709 \u0627\u06cc\u0645\u06cc\u0644<\/a>\n      <a href=\"#\" class=\"clink\">\ud83d\udcbc \u0644\u06cc\u0646\u06a9\u062f\u06cc\u0646<\/a>\n      <a href=\"#\" class=\"clink\">\ud83d\udcf8 \u0627\u06cc\u0646\u0633\u062a\u0627\u06af\u0631\u0627\u0645<\/a>\n      <a href=\"#\" class=\"clink\">\ud83d\udc26 \u062a\u0648\u06cc\u06cc\u062a\u0631<\/a>\n    <\/div>\n  <\/div>\n<\/section>\n\n<footer>\n  <p>\u00a9 \u06f1\u06f4\u06f0\u06f4 \u0645\u062d\u0645\u062f\u0631\u0636\u0627 \u0642\u062f\u0645\u06cc\u0627\u0631\u06cc<\/p>\n  <p>\u067e\u0631\u0648\u062f\u0627\u06a9\u062a \u062f\u06cc\u0632\u0627\u06cc\u0646\u0631<\/p>\n<\/footer>\n\n<script>\n\/\/ Cursor glow\nconst cg = document.getElementById('cursorGlow');\ndocument.addEventListener('mousemove', e => {\n  cg.style.left = e.clientX + 'px';\n  cg.style.top = e.clientY + 'px';\n});\n\n\/\/ Story scroll\nconst stages = document.querySelectorAll('.stage');\nconst track = document.querySelector('.story-scroll-track');\nconst N = stages.length;\nlet cur = -1;\n\n\/\/ Build progress dots\nconst prog = document.getElementById('storyProgress');\nfor (let i = 0; i < N; i++) {\n  const d = document.createElement('div');\n  d.className = 'prog-dot' + (i === 0 ? ' active' : '');\n  d.onclick = () => {\n    const rect = track.getBoundingClientRect();\n    const trackTop = window.scrollY + rect.top;\n    const trackH = track.offsetHeight - window.innerHeight;\n    window.scrollTo({ top: trackTop + (i \/ (N - 1)) * trackH, behavior: 'smooth' });\n  };\n  prog.appendChild(d);\n}\nconst progDots = prog.querySelectorAll('.prog-dot');\n\n\/\/ Research grid\nconst rIcons = ['\ud83d\udc64','\ud83d\udccb','\ud83c\udf99\ufe0f','\ud83d\udcca','\ud83d\uddfa\ufe0f','\ud83d\udca1','\ud83d\udd0d','\ud83d\udcdd'];\nconst rg = document.getElementById('rGrid');\nrIcons.forEach(ic => {\n  const d = document.createElement('div');\n  d.className = 'r-dot';\n  d.textContent = ic;\n  rg.appendChild(d);\n});\n\nfunction showStage(n) {\n  if (n === cur) return;\n  cur = n;\n  stages.forEach((s, i) => s.classList.toggle('active', i === n));\n  progDots.forEach((d, i) => d.classList.toggle('active', i === n));\n}\n\nfunction onScroll() {\n  const rect = track.getBoundingClientRect();\n  const trackTop = -rect.top;\n  const trackH = track.offsetHeight - window.innerHeight;\n  if (trackTop < 0 || trackTop > trackH + window.innerHeight) return;\n  const progress = Math.max(0, Math.min(1, trackTop \/ trackH));\n  const stageIdx = Math.min(N - 1, Math.floor(progress * N));\n  showStage(stageIdx);\n}\nwindow.addEventListener('scroll', onScroll, { passive: true });\nshowStage(0);\n\n\/\/ Service cards reveal\nconst svcCards = document.querySelectorAll('.svc-card');\nconst svcObs = new IntersectionObserver(entries => {\n  entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('visible'); });\n}, { threshold: 0.1 });\nsvcCards.forEach((c, i) => { c.style.transitionDelay = i * 0.08 + 's'; svcObs.observe(c); });\n\n\/\/ Stats counter\nfunction toFarsi(n) { return n.toString().replace(\/\\d\/g, d => '\u06f0\u06f1\u06f2\u06f3\u06f4\u06f5\u06f6\u06f7\u06f8\u06f9'[d]); }\nconst statEls = document.querySelectorAll('.stat-n[data-target]');\nconst statObs = new IntersectionObserver(entries => {\n  entries.forEach(e => {\n    if (e.isIntersecting) {\n      const el = e.target;\n      const target = +el.dataset.target;\n      let s = 0;\n      const step = Math.ceil(target \/ 40);\n      const t = setInterval(() => {\n        s = Math.min(s + step, target);\n        el.textContent = (s === target && target === 100) ? '\u06f1\u06f0\u06f0\u066a' : '+' + toFarsi(s);\n        if (s >= target) clearInterval(t);\n      }, 35);\n      statObs.unobserve(el);\n    }\n  });\n}, { threshold: 0.5 });\nstatEls.forEach(el => statObs.observe(el));\n<\/script>\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u0645\u062d\u0645\u062f\u0631\u0636\u0627 \u0642\u062f\u0645\u06cc\u0627\u0631\u06cc \u2014 \u067e\u0631\u0648\u062f\u0627\u06a9\u062a \u062f\u06cc\u0632\u0627\u06cc\u0646\u0631 MR.Q \u0634\u0631\u0648\u0639 \u0647\u0645\u06a9\u0627\u0631\u06cc \u0622\u0645\u0627\u062f\u0647 \u067e\u0631\u0648\u0698\u0647 \u062c\u062f\u06cc\u062f \u0645\u062d\u0645\u062f\u0631\u0636\u0627\u0642\u062f\u0645\u06cc\u0627\u0631\u06cc \u067e\u0631\u0648\u062f\u0627\u06a9\u062a \u062f\u06cc\u0632\u0627\u06cc\u0646\u0631 \u2014 \u0637\u0631\u0627\u062d\u06cc \u062a\u062c\u0631\u0628\u0647\u200c\u0647\u0627\u06cc\u06cc \u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0639\u0627\u0634\u0642\u0634\u0627\u0646 \u0645\u06cc\u200c\u0634\u0648\u0646\u062f.\u0627\u0632 \u0627\u06cc\u062f\u0647 \u062a\u0627 \u0645\u062d\u0635\u0648\u0644 \u0646\u0647\u0627\u06cc\u06cc\u060c \u0628\u0627 \u062f\u0642\u062a \u0648 \u0627\u0633\u062a\u0631\u0627\u062a\u0698\u06cc. \u067e\u0631\u0648\u062f\u0627\u06a9\u062a \u062f\u06cc\u0632\u0627\u06cc\u0646 \u0686\u06cc\u0647\u061f \u062e\u062f\u0645\u0627\u062a \u0645\u0646 \u0627\u0633\u06a9\u0631\u0648\u0644 \u06a9\u0646 \u0645\u0631\u062d\u0644\u0647 \u06f0\u06f1 \u06cc\u0647 \u0645\u0634\u06a9\u0644 \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u0647 \u0647\u0631 \u0645\u062d\u0635\u0648\u0644 \u062f\u06cc\u062c\u06cc\u062a\u0627\u0644 \u0627\u0632 \u06cc\u0647 \u062f\u0631\u062f \u0648\u0627\u0642\u0639\u06cc \u0634\u0631\u0648\u0639 \u0645\u06cc\u0634\u0647. \u06a9\u0627\u0631\u0628\u0631 \u06cc\u0647 \u0686\u06cc\u0632\u06cc \u0645\u06cc\u200c\u062e\u0648\u0627\u062f [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-10","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.7 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Home - Mohammadreza<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/yari.me\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Home - Mohammadreza\" \/>\n<meta property=\"og:description\" content=\"\u0645\u062d\u0645\u062f\u0631\u0636\u0627 \u0642\u062f\u0645\u06cc\u0627\u0631\u06cc \u2014 \u067e\u0631\u0648\u062f\u0627\u06a9\u062a \u062f\u06cc\u0632\u0627\u06cc\u0646\u0631 MR.Q \u0634\u0631\u0648\u0639 \u0647\u0645\u06a9\u0627\u0631\u06cc \u0622\u0645\u0627\u062f\u0647 \u067e\u0631\u0648\u0698\u0647 \u062c\u062f\u06cc\u062f \u0645\u062d\u0645\u062f\u0631\u0636\u0627\u0642\u062f\u0645\u06cc\u0627\u0631\u06cc \u067e\u0631\u0648\u062f\u0627\u06a9\u062a \u062f\u06cc\u0632\u0627\u06cc\u0646\u0631 \u2014 \u0637\u0631\u0627\u062d\u06cc \u062a\u062c\u0631\u0628\u0647\u200c\u0647\u0627\u06cc\u06cc \u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0639\u0627\u0634\u0642\u0634\u0627\u0646 \u0645\u06cc\u200c\u0634\u0648\u0646\u062f.\u0627\u0632 \u0627\u06cc\u062f\u0647 \u062a\u0627 \u0645\u062d\u0635\u0648\u0644 \u0646\u0647\u0627\u06cc\u06cc\u060c \u0628\u0627 \u062f\u0642\u062a \u0648 \u0627\u0633\u062a\u0631\u0627\u062a\u0698\u06cc. \u067e\u0631\u0648\u062f\u0627\u06a9\u062a \u062f\u06cc\u0632\u0627\u06cc\u0646 \u0686\u06cc\u0647\u061f \u062e\u062f\u0645\u0627\u062a \u0645\u0646 \u0627\u0633\u06a9\u0631\u0648\u0644 \u06a9\u0646 \u0645\u0631\u062d\u0644\u0647 \u06f0\u06f1 \u06cc\u0647 \u0645\u0634\u06a9\u0644 \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u0647 \u0647\u0631 \u0645\u062d\u0635\u0648\u0644 \u062f\u06cc\u062c\u06cc\u062a\u0627\u0644 \u0627\u0632 \u06cc\u0647 \u062f\u0631\u062f \u0648\u0627\u0642\u0639\u06cc \u0634\u0631\u0648\u0639 \u0645\u06cc\u0634\u0647. \u06a9\u0627\u0631\u0628\u0631 \u06cc\u0647 \u0686\u06cc\u0632\u06cc \u0645\u06cc\u200c\u062e\u0648\u0627\u062f [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/yari.me\/\" \/>\n<meta property=\"og:site_name\" content=\"Mohammadreza\" \/>\n<meta property=\"article:modified_time\" content=\"2026-05-30T11:28:42+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"15 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/yari.me\\\/\",\"url\":\"https:\\\/\\\/yari.me\\\/\",\"name\":\"Home - Mohammadreza\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/yari.me\\\/#website\"},\"datePublished\":\"2026-05-30T11:26:36+00:00\",\"dateModified\":\"2026-05-30T11:28:42+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/yari.me\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/yari.me\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/yari.me\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/yari.me\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Home\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/yari.me\\\/#website\",\"url\":\"https:\\\/\\\/yari.me\\\/\",\"name\":\"Mohammadreza\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/yari.me\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Home - Mohammadreza","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/yari.me\/","og_locale":"en_US","og_type":"article","og_title":"Home - Mohammadreza","og_description":"\u0645\u062d\u0645\u062f\u0631\u0636\u0627 \u0642\u062f\u0645\u06cc\u0627\u0631\u06cc \u2014 \u067e\u0631\u0648\u062f\u0627\u06a9\u062a \u062f\u06cc\u0632\u0627\u06cc\u0646\u0631 MR.Q \u0634\u0631\u0648\u0639 \u0647\u0645\u06a9\u0627\u0631\u06cc \u0622\u0645\u0627\u062f\u0647 \u067e\u0631\u0648\u0698\u0647 \u062c\u062f\u06cc\u062f \u0645\u062d\u0645\u062f\u0631\u0636\u0627\u0642\u062f\u0645\u06cc\u0627\u0631\u06cc \u067e\u0631\u0648\u062f\u0627\u06a9\u062a \u062f\u06cc\u0632\u0627\u06cc\u0646\u0631 \u2014 \u0637\u0631\u0627\u062d\u06cc \u062a\u062c\u0631\u0628\u0647\u200c\u0647\u0627\u06cc\u06cc \u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0639\u0627\u0634\u0642\u0634\u0627\u0646 \u0645\u06cc\u200c\u0634\u0648\u0646\u062f.\u0627\u0632 \u0627\u06cc\u062f\u0647 \u062a\u0627 \u0645\u062d\u0635\u0648\u0644 \u0646\u0647\u0627\u06cc\u06cc\u060c \u0628\u0627 \u062f\u0642\u062a \u0648 \u0627\u0633\u062a\u0631\u0627\u062a\u0698\u06cc. \u067e\u0631\u0648\u062f\u0627\u06a9\u062a \u062f\u06cc\u0632\u0627\u06cc\u0646 \u0686\u06cc\u0647\u061f \u062e\u062f\u0645\u0627\u062a \u0645\u0646 \u0627\u0633\u06a9\u0631\u0648\u0644 \u06a9\u0646 \u0645\u0631\u062d\u0644\u0647 \u06f0\u06f1 \u06cc\u0647 \u0645\u0634\u06a9\u0644 \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u0647 \u0647\u0631 \u0645\u062d\u0635\u0648\u0644 \u062f\u06cc\u062c\u06cc\u062a\u0627\u0644 \u0627\u0632 \u06cc\u0647 \u062f\u0631\u062f \u0648\u0627\u0642\u0639\u06cc \u0634\u0631\u0648\u0639 \u0645\u06cc\u0634\u0647. \u06a9\u0627\u0631\u0628\u0631 \u06cc\u0647 \u0686\u06cc\u0632\u06cc \u0645\u06cc\u200c\u062e\u0648\u0627\u062f [&hellip;]","og_url":"https:\/\/yari.me\/","og_site_name":"Mohammadreza","article_modified_time":"2026-05-30T11:28:42+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"15 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/yari.me\/","url":"https:\/\/yari.me\/","name":"Home - Mohammadreza","isPartOf":{"@id":"https:\/\/yari.me\/#website"},"datePublished":"2026-05-30T11:26:36+00:00","dateModified":"2026-05-30T11:28:42+00:00","breadcrumb":{"@id":"https:\/\/yari.me\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/yari.me\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/yari.me\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/yari.me\/"},{"@type":"ListItem","position":2,"name":"Home"}]},{"@type":"WebSite","@id":"https:\/\/yari.me\/#website","url":"https:\/\/yari.me\/","name":"Mohammadreza","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/yari.me\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/yari.me\/index.php?rest_route=\/wp\/v2\/pages\/10","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/yari.me\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/yari.me\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/yari.me\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/yari.me\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=10"}],"version-history":[{"count":4,"href":"https:\/\/yari.me\/index.php?rest_route=\/wp\/v2\/pages\/10\/revisions"}],"predecessor-version":[{"id":16,"href":"https:\/\/yari.me\/index.php?rest_route=\/wp\/v2\/pages\/10\/revisions\/16"}],"wp:attachment":[{"href":"https:\/\/yari.me\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=10"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}