<!--
  RESAAGAR HOMEPAGE REDESIGN
  Paste this complete file into ONE Elementor HTML widget.
  The existing WordPress header and footer are intentionally not duplicated.
-->

<meta charset="UTF-8">

<style>
@font-face {
  font-family: "ResaagarVazir";
  src: url("https://resaagar.ir/wp-content/uploads/2025/08/Vazirmatn-FD-Medium.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
}

@font-face {
  font-family: "ResaagarVazir";
  src: url("https://resaagar.ir/wp-content/uploads/2025/08/Vazirmatn-FD-Bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
}

#resaagar-home {
  --rs-ink: #06123f;
  --rs-navy: #001a6e;
  --rs-blue: #1557ff;
  --rs-blue-2: #68a4ff;
  --rs-lime: #dfffb0;
  --rs-coral: #ff605e;
  --rs-paper: #f2f6fb;
  --rs-white: #ffffff;
  --rs-night: #030713;
  --rs-night-2: #07112a;
  --rs-muted: #a9b4d0;
  --rs-border: rgba(255, 255, 255, 0.13);
  --rs-radius: 30px;
  --rs-ease: cubic-bezier(.16, 1, .3, 1);
  --rs-mx: 50%;
  --rs-my: 22%;
  position: relative;
  isolation: isolate;
  width: 100%;
  overflow: clip;
  direction: rtl;
  color: var(--rs-white);
  background: var(--rs-night);
  font-family: "ResaagarVazir", Vazirmatn, Tahoma, sans-serif;
  font-size: 16px;
  line-height: 1.75;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

#resaagar-home,
#resaagar-home *,
#resaagar-home *::before,
#resaagar-home *::after {
  box-sizing: border-box;
}

#resaagar-home a {
  color: inherit;
  text-decoration: none;
}

#resaagar-home img {
  display: block;
  max-width: 100%;
}

#resaagar-home button,
#resaagar-home input {
  font: inherit;
}

#resaagar-home button,
#resaagar-home summary,
#resaagar-home a {
  -webkit-tap-highlight-color: transparent;
}

#resaagar-home ::selection {
  color: var(--rs-night);
  background: var(--rs-lime);
}

#resaagar-home .rs-container {
  width: min(1240px, calc(100% - 48px));
  margin-inline: auto;
}

#resaagar-home .rs-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

#resaagar-home .rs-scroll-progress {
  position: fixed;
  z-index: 9999;
  top: 0;
  right: 0;
  width: 0;
  height: 3px;
  pointer-events: none;
  background: linear-gradient(90deg, var(--rs-lime), var(--rs-blue-2), var(--rs-coral));
  box-shadow: 0 0 24px rgba(104, 164, 255, .75);
}

#resaagar-home .rs-loader {
  position: fixed;
  z-index: 10000;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--rs-white);
  background:
    radial-gradient(650px circle at 50% 50%, rgba(21,87,255,.28), transparent 62%),
    var(--rs-night);
  transition: transform 1.05s var(--rs-ease), visibility 1.05s;
  animation: rs-loader-safety 0s 4s forwards;
}

#resaagar-home .rs-loader::before {
  position: absolute;
  inset: 0;
  opacity: .2;
  background-image:
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 70px 70px;
  content: "";
}

#resaagar-home .rs-loader--done {
  visibility: hidden;
  transform: translateY(-105%);
}

#resaagar-home .rs-loader__inner {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: min(560px, calc(100% - 40px));
  text-align: center;
}

#resaagar-home .rs-loader__logo {
  width: 72px;
  height: 72px;
  padding: 8px;
  border-radius: 22px;
  background: var(--rs-lime);
  box-shadow: 0 0 70px rgba(223,255,176,.32);
  animation: rs-loader-logo 1s var(--rs-ease) infinite alternate;
}

#resaagar-home .rs-loader__word {
  margin-top: 20px;
  font-size: clamp(30px, 6vw, 58px);
  font-weight: 900;
  letter-spacing: -.04em;
}

#resaagar-home .rs-loader__meta {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 16px;
  margin-top: 30px;
  color: #8f9ab5;
  direction: ltr;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .16em;
}

#resaagar-home .rs-loader__bar {
  position: relative;
  flex: 1;
  height: 2px;
  overflow: hidden;
  background: rgba(255,255,255,.13);
}

#resaagar-home .rs-loader__bar i {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--rs-blue), var(--rs-lime));
  transform: scaleX(0);
  transform-origin: left;
}

#resaagar-home .rs-motion-toggle {
  position: fixed;
  z-index: 9998;
  bottom: 20px;
  left: 20px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 15px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  color: var(--rs-white);
  background: rgba(3,7,19,.72);
  box-shadow: 0 14px 40px rgba(0,0,0,.25);
  backdrop-filter: blur(15px);
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
}

#resaagar-home .rs-motion-toggle i {
  position: relative;
  width: 28px;
  height: 16px;
  border-radius: 999px;
  background: var(--rs-lime);
}

#resaagar-home .rs-motion-toggle i::after {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--rs-night);
  content: "";
  transition: transform .3s var(--rs-ease);
}

#resaagar-home[data-motion="reduced"] .rs-motion-toggle i {
  background: #68728b;
}

#resaagar-home[data-motion="reduced"] .rs-motion-toggle i::after {
  transform: translateX(-12px);
}

#resaagar-home .rs-cursor {
  position: fixed;
  z-index: 9997;
  top: 0;
  left: 0;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 1px solid rgba(223,255,176,.7);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: difference;
  transition: width .3s var(--rs-ease), height .3s var(--rs-ease), margin .3s var(--rs-ease), opacity .25s ease, background-color .3s ease;
}

#resaagar-home .rs-cursor.rs-cursor--active {
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  background: rgba(255,255,255,.14);
}

#resaagar-home .rs-particles {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: .72;
}

#resaagar-home .rs-hero__ghost {
  position: absolute;
  z-index: 1;
  bottom: 95px;
  left: -3vw;
  color: rgba(255,255,255,.025);
  font-family: Arial, sans-serif;
  font-size: clamp(120px, 21vw, 330px);
  font-weight: 900;
  line-height: .7;
  letter-spacing: -.08em;
  white-space: nowrap;
  pointer-events: none;
  -webkit-text-stroke: 1px rgba(255,255,255,.07);
}

#resaagar-home .rs-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 20px;
  color: var(--rs-blue-2);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .09em;
}

#resaagar-home .rs-kicker::before {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 7px color-mix(in srgb, currentColor 14%, transparent);
  content: "";
}

#resaagar-home .rs-section-title {
  max-width: 950px;
  margin: 0;
  font-size: clamp(44px, 7vw, 102px);
  font-weight: 900;
  line-height: .98;
  letter-spacing: -.055em;
}

#resaagar-home .rs-section-copy {
  max-width: 620px;
  margin: 24px 0 0;
  color: #b7c0d7;
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.9;
}

#resaagar-home .rs-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  padding: 0 27px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 999px;
  font-weight: 800;
  line-height: 1;
  transition: transform .45s var(--rs-ease), border-color .35s ease, background-color .35s ease, color .35s ease;
}

#resaagar-home .rs-btn > span {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

#resaagar-home .rs-btn > span::after {
  content: "↙";
  font-size: 20px;
  transition: transform .35s var(--rs-ease);
}

#resaagar-home .rs-btn::before {
  position: absolute;
  inset: auto 0 0;
  height: 0;
  border-radius: 50% 50% 0 0;
  background: var(--rs-white);
  content: "";
  transition: height .5s var(--rs-ease), border-radius .5s var(--rs-ease);
}

#resaagar-home .rs-btn:hover > span::after {
  transform: translate(-4px, 4px);
}

#resaagar-home .rs-btn:hover::before {
  height: 160%;
  border-radius: 0;
}

#resaagar-home .rs-btn--primary {
  color: var(--rs-night);
  background: var(--rs-lime);
  box-shadow: 0 18px 55px rgba(184, 255, 77, .16);
}

#resaagar-home .rs-btn--primary:hover {
  color: var(--rs-night);
}

#resaagar-home .rs-btn--ghost {
  color: var(--rs-white);
  border-color: var(--rs-border);
  background: rgba(255, 255, 255, .045);
  backdrop-filter: blur(12px);
}

#resaagar-home .rs-btn--ghost:hover {
  color: var(--rs-night);
  border-color: var(--rs-white);
}

#resaagar-home .rs-hero {
  position: relative;
  display: grid;
  align-items: center;
  min-height: min(900px, 100svh);
  padding: clamp(80px, 8vw, 125px) 0 80px;
  overflow: hidden;
  background:
    radial-gradient(700px circle at var(--rs-mx) var(--rs-my), rgba(34, 102, 255, .25), transparent 46%),
    radial-gradient(900px circle at 6% 3%, rgba(223, 255, 176, .11), transparent 42%),
    linear-gradient(135deg, #030713 0%, #07112a 56%, #030713 100%);
}

#resaagar-home .rs-hero::before {
  position: absolute;
  inset: 0;
  opacity: .22;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 82%);
  mask-image: linear-gradient(to bottom, #000, transparent 82%);
  content: "";
}

#resaagar-home .rs-hero::after {
  position: absolute;
  bottom: -160px;
  left: 50%;
  width: 120%;
  height: 300px;
  border-radius: 50%;
  background: var(--rs-paper);
  transform: translateX(-50%);
  content: "";
}

#resaagar-home .rs-hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(370px, .88fr);
  align-items: center;
  gap: clamp(30px, 5vw, 90px);
}

#resaagar-home .rs-brand-chip {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
  margin-bottom: 26px;
  padding: 8px 13px 8px 17px;
  border: 1px solid var(--rs-border);
  border-radius: 999px;
  color: #d9e2f8;
  background: rgba(255, 255, 255, .045);
  backdrop-filter: blur(12px);
  font-size: 13px;
  font-weight: 700;
}

#resaagar-home .rs-brand-chip img {
  width: 32px;
  height: 32px;
  padding: 4px;
  border-radius: 10px;
  background: var(--rs-lime);
  object-fit: contain;
}

#resaagar-home .rs-brand-chip i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4cff87;
  box-shadow: 0 0 18px #4cff87;
}

#resaagar-home .rs-hero h1 {
  margin: 0;
  color: var(--rs-white);
  font-size: clamp(58px, 7.7vw, 126px);
  font-weight: 900;
  line-height: .88;
  letter-spacing: -.065em;
}

#resaagar-home .rs-hero h1 .rs-line {
  display: block;
}

#resaagar-home .rs-hero h1 .rs-line--outline {
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, .75);
  text-stroke: 1.5px rgba(255, 255, 255, .75);
}

#resaagar-home .rs-hero h1 .rs-line--lime {
  color: var(--rs-lime);
}

#resaagar-home .rs-hero__lead {
  max-width: 670px;
  margin: 30px 0 0;
  color: #b9c3db;
  font-size: clamp(17px, 1.25vw, 20px);
  line-height: 1.95;
}

#resaagar-home .rs-hero__lead strong {
  color: var(--rs-white);
}

#resaagar-home .rs-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

#resaagar-home .rs-hero__proof {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 36px;
  color: #8f9ab5;
  font-size: 13px;
}

#resaagar-home .rs-hero__proof strong {
  display: block;
  color: var(--rs-white);
  font-size: 23px;
  line-height: 1.2;
}

#resaagar-home .rs-hero__proof span + span {
  padding-right: 24px;
  border-right: 1px solid var(--rs-border);
}

#resaagar-home .rs-orbit-wrap {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
}

#resaagar-home .rs-orbit-glow {
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  opacity: .9;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.9) 0 1%, transparent 2%),
    conic-gradient(from 30deg, #1557ff, #dfffb0, #ff605e, #6c4cff, #1557ff);
  filter: blur(42px) saturate(1.35);
  animation: rs-breathe 5s ease-in-out infinite alternate;
}

#resaagar-home .rs-orbit {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 78%;
  aspect-ratio: 1;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 42%, rgba(255,255,255,.13), transparent 48%),
    rgba(2, 7, 20, .55);
  box-shadow: inset 0 0 80px rgba(52, 105, 255, .15), 0 40px 100px rgba(0,0,0,.45);
  backdrop-filter: blur(13px);
}

#resaagar-home .rs-orbit::before,
#resaagar-home .rs-orbit::after {
  position: absolute;
  inset: -12%;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 50%;
  content: "";
}

#resaagar-home .rs-orbit::before {
  transform: rotateX(66deg) rotateZ(18deg);
}

#resaagar-home .rs-orbit::after {
  transform: rotateY(66deg) rotateZ(-22deg);
}

#resaagar-home .rs-orbit__image {
  position: relative;
  z-index: 3;
  width: 92%;
  aspect-ratio: 1;
  object-fit: contain;
  filter: saturate(1.1) drop-shadow(0 28px 42px rgba(0, 0, 0, .4));
  animation: rs-float 5.5s ease-in-out infinite;
}

#resaagar-home .rs-orbit__label {
  position: absolute;
  z-index: 5;
  display: grid;
  place-items: center;
  min-width: 86px;
  height: 42px;
  padding: 0 16px;
  border: 1px solid var(--rs-border);
  border-radius: 999px;
  color: #e8eeff;
  background: rgba(5, 12, 34, .75);
  backdrop-filter: blur(14px);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .15em;
  box-shadow: 0 15px 38px rgba(0,0,0,.2);
}

#resaagar-home .rs-orbit__label--a { top: 9%; left: 4%; }
#resaagar-home .rs-orbit__label--b { right: -1%; bottom: 23%; }
#resaagar-home .rs-orbit__label--c { bottom: 6%; left: 15%; }

#resaagar-home .rs-scroll-cue {
  position: absolute;
  z-index: 4;
  bottom: 116px;
  left: 50%;
  display: grid;
  place-items: center;
  width: 36px;
  height: 58px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 999px;
  transform: translateX(-50%);
}

#resaagar-home .rs-scroll-cue::before {
  width: 5px;
  height: 10px;
  border-radius: 10px;
  background: var(--rs-lime);
  animation: rs-scroll-cue 1.8s ease-in-out infinite;
  content: "";
}

#resaagar-home .rs-ticker {
  position: relative;
  z-index: 5;
  overflow: hidden;
  color: var(--rs-night);
  background: var(--rs-lime);
  transform: rotate(-1.2deg) scale(1.02);
}

#resaagar-home .rs-ticker__track {
  display: flex;
  width: max-content;
  direction: ltr;
  animation: rs-ticker 24s linear infinite;
}

#resaagar-home .rs-ticker__group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 28px;
  padding: 18px 14px;
  direction: rtl;
  font-size: clamp(15px, 1.5vw, 20px);
  font-weight: 900;
  white-space: nowrap;
}

#resaagar-home .rs-ticker__group i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rs-blue);
}

#resaagar-home .rs-manifesto {
  position: relative;
  z-index: 3;
  padding: clamp(130px, 15vw, 230px) 0 clamp(100px, 12vw, 185px);
  color: var(--rs-ink);
  background: var(--rs-paper);
}

#resaagar-home .rs-manifesto__eyebrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(42px, 6vw, 80px);
  color: #55617d;
  font-size: 13px;
  font-weight: 800;
}

#resaagar-home .rs-manifesto__eyebrow::after {
  width: min(52vw, 700px);
  height: 1px;
  background: rgba(6, 18, 63, .17);
  content: "";
}

#resaagar-home .rs-manifesto__title {
  max-width: 1120px;
  margin: 0;
  font-size: clamp(48px, 8.1vw, 125px);
  font-weight: 900;
  line-height: 1.03;
  letter-spacing: -.06em;
}

#resaagar-home .rs-manifesto__title .rs-blue {
  color: var(--rs-blue);
}

#resaagar-home .rs-manifesto__title .rs-hollow {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--rs-ink);
  text-stroke: 1.5px var(--rs-ink);
}

#resaagar-home .rs-manifesto__bottom {
  display: grid;
  grid-template-columns: .7fr 1.3fr;
  gap: 50px;
  align-items: end;
  margin-top: 60px;
}

#resaagar-home .rs-manifesto__number {
  display: flex;
  align-items: end;
  gap: 13px;
  color: var(--rs-blue);
  font-size: clamp(82px, 12vw, 180px);
  font-weight: 900;
  line-height: .75;
  letter-spacing: -.08em;
}

#resaagar-home .rs-manifesto__number small {
  margin-bottom: 10px;
  color: var(--rs-ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0;
}

#resaagar-home .rs-manifesto__copy {
  max-width: 680px;
  margin: 0;
  color: #46516d;
  font-size: clamp(18px, 1.5vw, 23px);
  line-height: 1.95;
}

#resaagar-home .rs-services {
  position: relative;
  padding: clamp(100px, 12vw, 190px) 0;
  background:
    radial-gradient(700px circle at 8% 12%, rgba(21, 87, 255, .2), transparent 58%),
    var(--rs-night);
}

#resaagar-home .rs-services__head {
  display: grid;
  grid-template-columns: 1fr .55fr;
  align-items: end;
  gap: 50px;
  margin-bottom: clamp(50px, 7vw, 90px);
}

#resaagar-home .rs-services__head .rs-section-copy {
  justify-self: end;
}

#resaagar-home .rs-services__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

#resaagar-home .rs-service-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: clamp(18px, 3vw, 34px);
  min-height: 235px;
  padding: clamp(26px, 3.4vw, 44px);
  overflow: hidden;
  border: 1px solid var(--rs-border);
  border-radius: var(--rs-radius);
  background: rgba(255,255,255,.04);
  transition: transform .65s var(--rs-ease), background-color .45s ease, border-color .45s ease;
}

#resaagar-home .rs-service-card::before {
  position: absolute;
  inset: -1px;
  opacity: 0;
  background: radial-gradient(450px circle at var(--card-x, 50%) var(--card-y, 50%), rgba(104, 164, 255, .23), transparent 48%);
  content: "";
  transition: opacity .4s ease;
}

#resaagar-home .rs-service-card:hover {
  z-index: 2;
  border-color: rgba(104, 164, 255, .45);
  background: rgba(255,255,255,.065);
  transform: translateY(-7px);
}

#resaagar-home .rs-service-card:hover::before {
  opacity: 1;
}

#resaagar-home .rs-service-card__no,
#resaagar-home .rs-service-card__content,
#resaagar-home .rs-service-card__arrow {
  position: relative;
  z-index: 2;
}

#resaagar-home .rs-service-card__no {
  color: var(--rs-blue-2);
  font-size: 13px;
  font-weight: 800;
}

#resaagar-home .rs-service-card h3 {
  margin: 0 0 7px;
  color: var(--rs-white);
  font-size: clamp(26px, 2.5vw, 39px);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -.035em;
}

#resaagar-home .rs-service-card__en {
  display: block;
  margin-bottom: 22px;
  color: #7583a8;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
}

#resaagar-home .rs-service-card p {
  max-width: 470px;
  margin: 0;
  color: #a9b4d0;
  line-height: 1.85;
}

#resaagar-home .rs-service-card__arrow {
  display: grid;
  place-items: center;
  width: 47px;
  height: 47px;
  border: 1px solid var(--rs-border);
  border-radius: 50%;
  color: var(--rs-lime);
  font-size: 21px;
  transition: transform .45s var(--rs-ease), color .35s ease, background-color .35s ease;
}

#resaagar-home .rs-service-card:hover .rs-service-card__arrow {
  color: var(--rs-night);
  background: var(--rs-lime);
  transform: rotate(-45deg);
}

#resaagar-home .rs-signal {
  position: relative;
  padding: clamp(110px, 13vw, 205px) 0;
  overflow: hidden;
  color: var(--rs-ink);
  background: var(--rs-lime);
}

#resaagar-home .rs-signal::before {
  position: absolute;
  inset: -25%;
  opacity: .14;
  background: repeating-radial-gradient(circle at 18% 60%, transparent 0 38px, var(--rs-blue) 39px 41px);
  content: "";
  transform: rotate(-8deg);
}

#resaagar-home .rs-signal__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  align-items: center;
  gap: clamp(50px, 8vw, 120px);
}

#resaagar-home .rs-signal .rs-kicker {
  color: var(--rs-blue);
}

#resaagar-home .rs-signal__title {
  max-width: 820px;
  margin: 0;
  font-size: clamp(54px, 8vw, 120px);
  font-weight: 900;
  line-height: .98;
  letter-spacing: -.06em;
}

#resaagar-home .rs-signal__title em {
  display: block;
  color: var(--rs-blue);
  font-style: normal;
}

#resaagar-home .rs-signal__copy {
  max-width: 640px;
  margin: 28px 0 0;
  color: #273451;
  font-size: 19px;
  line-height: 1.95;
}

#resaagar-home .rs-wave {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(7px, 1vw, 13px);
  min-height: 390px;
  border: 1px solid rgba(6, 18, 63, .17);
  border-radius: 50%;
  background: rgba(255,255,255,.17);
  box-shadow: inset 0 0 90px rgba(255,255,255,.28);
}

#resaagar-home .rs-wave::before,
#resaagar-home .rs-wave::after {
  position: absolute;
  border: 1px solid rgba(6,18,63,.15);
  border-radius: 50%;
  content: "";
}

#resaagar-home .rs-wave::before { inset: 8%; }
#resaagar-home .rs-wave::after { inset: 17%; }

#resaagar-home .rs-wave span {
  position: relative;
  z-index: 2;
  width: clamp(7px, 1vw, 12px);
  height: var(--h);
  border-radius: 999px;
  background: var(--rs-blue);
  box-shadow: 0 0 24px rgba(21,87,255,.3);
  transform-origin: center;
  animation: rs-wave 1.5s ease-in-out infinite alternate;
  animation-delay: var(--d);
}

#resaagar-home .rs-process {
  padding: clamp(100px, 12vw, 190px) 0;
  background: var(--rs-paper);
  color: var(--rs-ink);
}

#resaagar-home .rs-process__head {
  display: grid;
  grid-template-columns: 1fr .58fr;
  align-items: end;
  gap: 40px;
  margin-bottom: 80px;
}

#resaagar-home .rs-process .rs-kicker {
  color: var(--rs-blue);
}

#resaagar-home .rs-process .rs-section-copy {
  color: #58637d;
}

#resaagar-home .rs-process__steps {
  position: relative;
}

#resaagar-home .rs-process__line {
  position: absolute;
  top: 0;
  right: 0;
  width: 2px;
  height: 100%;
  background: rgba(6,18,63,.12);
}

#resaagar-home .rs-process__line span {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(var(--rs-blue), var(--rs-coral));
  transform: scaleY(0);
  transform-origin: top;
}

#resaagar-home .rs-process-step {
  display: grid;
  grid-template-columns: 120px .7fr 1fr;
  gap: clamp(20px, 5vw, 70px);
  align-items: start;
  padding: 45px 40px 45px 0;
  border-bottom: 1px solid rgba(6,18,63,.13);
}

#resaagar-home .rs-process-step:first-of-type {
  border-top: 1px solid rgba(6,18,63,.13);
}

#resaagar-home .rs-process-step__no {
  color: var(--rs-blue);
  font-size: 14px;
  font-weight: 900;
}

#resaagar-home .rs-process-step h3 {
  margin: 0;
  font-size: clamp(28px, 3vw, 46px);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -.035em;
}

#resaagar-home .rs-process-step p {
  margin: 0;
  color: #5b6680;
  font-size: 17px;
  line-height: 1.9;
}

#resaagar-home .rs-map-feature {
  padding: 30px 0 clamp(100px, 12vw, 185px);
  color: var(--rs-ink);
  background: var(--rs-paper);
}

#resaagar-home .rs-map-feature__card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr .85fr;
  align-items: center;
  gap: clamp(38px, 7vw, 100px);
  min-height: 520px;
  padding: clamp(36px, 7vw, 90px);
  overflow: hidden;
  border-radius: clamp(30px, 5vw, 58px);
  color: var(--rs-white);
  background:
    radial-gradient(420px circle at 82% 35%, rgba(104,164,255,.35), transparent 60%),
    linear-gradient(135deg, #06123f, #001a6e 70%, #1557ff);
  box-shadow: 0 40px 100px rgba(0,26,110,.18);
}

#resaagar-home .rs-map-feature__card::before {
  position: absolute;
  inset: 0;
  opacity: .18;
  background-image:
    linear-gradient(rgba(255,255,255,.15) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.15) 1px, transparent 1px);
  background-size: 50px 50px;
  -webkit-mask-image: radial-gradient(circle at 80% 40%, #000, transparent 70%);
  mask-image: radial-gradient(circle at 80% 40%, #000, transparent 70%);
  content: "";
}

#resaagar-home .rs-map-feature__content,
#resaagar-home .rs-map-feature__visual {
  position: relative;
  z-index: 2;
}

#resaagar-home .rs-map-feature__content h2 {
  margin: 0;
  font-size: clamp(43px, 5vw, 75px);
  font-weight: 900;
  line-height: 1.06;
  letter-spacing: -.05em;
}

#resaagar-home .rs-map-feature__content p {
  max-width: 590px;
  margin: 24px 0 30px;
  color: #c9d5f5;
  font-size: 18px;
  line-height: 1.9;
}

#resaagar-home .rs-map-feature__visual {
  display: grid;
  place-items: center;
  min-height: 340px;
}

#resaagar-home .rs-map-radar {
  position: relative;
  display: grid;
  place-items: center;
  width: min(370px, 85vw);
  aspect-ratio: 1;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(21,87,255,.55), rgba(2,8,28,.15) 64%);
}

#resaagar-home .rs-map-radar::before,
#resaagar-home .rs-map-radar::after {
  position: absolute;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%;
  content: "";
}

#resaagar-home .rs-map-radar::before { inset: 17%; }
#resaagar-home .rs-map-radar::after { inset: 34%; }

#resaagar-home .rs-map-radar__sweep {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 68%, rgba(223,255,176,.38) 84%, transparent 100%);
  animation: rs-spin 5s linear infinite;
}

#resaagar-home .rs-map-pin {
  position: relative;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  border-radius: 50% 50% 50% 10%;
  color: var(--rs-night);
  background: var(--rs-lime);
  box-shadow: 0 22px 65px rgba(223,255,176,.38);
  transform: rotate(-45deg);
}

#resaagar-home .rs-map-pin img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  transform: rotate(45deg);
}

#resaagar-home .rs-map-label {
  position: absolute;
  z-index: 4;
  padding: 9px 14px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  color: #dce6ff;
  background: rgba(3,7,19,.55);
  backdrop-filter: blur(12px);
  font-size: 11px;
  font-weight: 800;
}

#resaagar-home .rs-map-label--google { top: 13%; right: 3%; }
#resaagar-home .rs-map-label--neshan { bottom: 17%; right: 5%; }
#resaagar-home .rs-map-label--balad { top: 19%; left: 1%; }
#resaagar-home .rs-map-label--snapp { bottom: 12%; left: 10%; }

#resaagar-home .rs-journal {
  padding: clamp(100px, 12vw, 190px) 0;
  background: var(--rs-night);
}

#resaagar-home .rs-journal__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 60px;
}

#resaagar-home .rs-text-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(255,255,255,.28);
  color: #dce4f7;
  font-size: 14px;
  font-weight: 800;
}

#resaagar-home .rs-journal__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

#resaagar-home .rs-article-card {
  position: relative;
  min-height: 455px;
  overflow: hidden;
  border: 1px solid var(--rs-border);
  border-radius: var(--rs-radius);
  background: #09132c;
}

#resaagar-home .rs-article-card__media {
  position: absolute;
  inset: 0;
}

#resaagar-home .rs-article-card__media::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(3,7,19,.98) 3%, rgba(3,7,19,.55) 52%, rgba(3,7,19,.08));
  content: "";
}

#resaagar-home .rs-article-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--rs-ease), filter .6s ease;
}

#resaagar-home .rs-article-card:hover .rs-article-card__media img {
  filter: saturate(1.2);
  transform: scale(1.065);
}

#resaagar-home .rs-article-card__content {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 0;
  left: 0;
  padding: clamp(25px, 4vw, 42px);
}

#resaagar-home .rs-article-card__tag {
  display: inline-flex;
  margin-bottom: 14px;
  padding: 6px 11px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  color: var(--rs-lime);
  background: rgba(3,7,19,.4);
  font-size: 11px;
  font-weight: 800;
}

#resaagar-home .rs-article-card h3 {
  max-width: 600px;
  margin: 0;
  color: var(--rs-white);
  font-size: clamp(24px, 2.5vw, 37px);
  font-weight: 900;
  line-height: 1.45;
  letter-spacing: -.03em;
}

#resaagar-home .rs-article-card__arrow {
  position: absolute;
  top: 28px;
  left: 28px;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  color: var(--rs-night);
  background: var(--rs-lime);
  font-size: 21px;
  transition: transform .5s var(--rs-ease);
}

#resaagar-home .rs-article-card:hover .rs-article-card__arrow {
  transform: rotate(-45deg) scale(1.08);
}

#resaagar-home .rs-faq {
  padding: clamp(100px, 12vw, 180px) 0;
  color: var(--rs-ink);
  background: var(--rs-paper);
}

#resaagar-home .rs-faq__grid {
  display: grid;
  grid-template-columns: .75fr 1.25fr;
  gap: clamp(45px, 8vw, 115px);
  align-items: start;
}

#resaagar-home .rs-faq .rs-kicker {
  color: var(--rs-blue);
}

#resaagar-home .rs-faq__intro {
  position: sticky;
  top: 40px;
}

#resaagar-home .rs-faq__intro h2 {
  margin: 0;
  font-size: clamp(49px, 6vw, 90px);
  font-weight: 900;
  line-height: 1.03;
  letter-spacing: -.055em;
}

#resaagar-home .rs-faq__intro p {
  max-width: 430px;
  margin: 24px 0 0;
  color: #59637c;
  font-size: 17px;
}

#resaagar-home .rs-faq details {
  border-top: 1px solid rgba(6,18,63,.15);
}

#resaagar-home .rs-faq details:last-child {
  border-bottom: 1px solid rgba(6,18,63,.15);
}

#resaagar-home .rs-faq summary {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 30px 0;
  cursor: pointer;
  list-style: none;
  font-size: clamp(19px, 2vw, 27px);
  font-weight: 900;
}

#resaagar-home .rs-faq summary::-webkit-details-marker {
  display: none;
}

#resaagar-home .rs-faq summary::after {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 37px;
  height: 37px;
  border: 1px solid rgba(6,18,63,.2);
  border-radius: 50%;
  color: var(--rs-blue);
  content: "+";
  transition: transform .4s var(--rs-ease), color .3s ease, background-color .3s ease;
}

#resaagar-home .rs-faq details[open] summary::after {
  color: var(--rs-white);
  background: var(--rs-blue);
  transform: rotate(45deg);
}

#resaagar-home .rs-faq details p {
  max-width: 720px;
  margin: -5px 0 30px;
  color: #59637c;
  font-size: 17px;
  line-height: 1.95;
}

#resaagar-home .rs-final {
  position: relative;
  display: grid;
  min-height: min(800px, 88svh);
  place-items: center;
  padding: 100px 0;
  overflow: hidden;
  text-align: center;
  background:
    radial-gradient(650px circle at 50% 47%, rgba(21,87,255,.4), transparent 60%),
    var(--rs-night);
}

#resaagar-home .rs-final::before,
#resaagar-home .rs-final::after {
  position: absolute;
  left: 50%;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 50%;
  content: "";
  transform: translateX(-50%);
}

#resaagar-home .rs-final::before {
  width: 78vw;
  aspect-ratio: 1;
}

#resaagar-home .rs-final::after {
  width: 55vw;
  aspect-ratio: 1;
}

#resaagar-home .rs-final__inner {
  position: relative;
  z-index: 2;
}

#resaagar-home .rs-final__mini {
  margin: 0 0 22px;
  color: var(--rs-lime);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
}

#resaagar-home .rs-final h2 {
  max-width: 1000px;
  margin: 0 auto;
  font-size: clamp(58px, 10vw, 150px);
  font-weight: 900;
  line-height: .94;
  letter-spacing: -.065em;
}

#resaagar-home .rs-final h2 span {
  display: block;
  color: var(--rs-lime);
}

#resaagar-home .rs-final p {
  max-width: 580px;
  margin: 28px auto 35px;
  color: #b9c3db;
  font-size: 18px;
}

#resaagar-home .rs-final__actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}

#resaagar-home .rs-final__phone {
  display: inline-flex;
  justify-content: center;
  margin-top: 35px;
  color: #7885a6;
  direction: ltr;
  font-size: 14px;
  font-weight: 800;
}

#resaagar-home .rs-credit {
  position: absolute;
  z-index: 3;
  right: 24px;
  bottom: 20px;
  left: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: #5e6a88;
  font-size: 11px;
}

#resaagar-home .rs-credit img {
  width: 34px;
  height: 34px;
  padding: 4px;
  border-radius: 10px;
  background: var(--rs-lime);
}

#resaagar-home.rs-js .rs-reveal {
  opacity: 0;
  filter: blur(10px);
  clip-path: inset(0 0 20% 0);
  transform: translateY(82px) scale(.975) rotate(.45deg);
  transition: opacity 1.05s var(--rs-ease), transform 1.05s var(--rs-ease), filter 1.05s var(--rs-ease), clip-path 1.05s var(--rs-ease);
}

#resaagar-home.rs-js .rs-reveal.rs-in {
  opacity: 1;
  filter: blur(0);
  clip-path: inset(0 0 0 0);
  transform: none;
}

@keyframes rs-float {
  0%, 100% { transform: translate3d(0, -7px, 0) rotate(-2deg); }
  50% { transform: translate3d(0, 11px, 0) rotate(2deg); }
}

@keyframes rs-breathe {
  from { transform: scale(.88) rotate(-9deg); opacity: .64; }
  to { transform: scale(1.08) rotate(11deg); opacity: 1; }
}

@keyframes rs-spin { to { transform: rotate(360deg); } }

@keyframes rs-scroll-cue {
  0% { opacity: 0; transform: translateY(-10px); }
  35% { opacity: 1; }
  100% { opacity: 0; transform: translateY(12px); }
}

@keyframes rs-ticker { to { transform: translateX(-50%); } }

@keyframes rs-wave {
  from { transform: scaleY(.45); opacity: .55; }
  to { transform: scaleY(1); opacity: 1; }
}

@keyframes rs-loader-logo {
  from { transform: translateY(0) rotate(-3deg) scale(.94); }
  to { transform: translateY(-8px) rotate(3deg) scale(1.04); }
}

@keyframes rs-loader-safety {
  to { visibility: hidden; pointer-events: none; }
}

#resaagar-home[data-motion="reduced"] .rs-loader {
  display: none;
}

#resaagar-home[data-motion="reduced"] *,
#resaagar-home[data-motion="reduced"] *::before,
#resaagar-home[data-motion="reduced"] *::after {
  scroll-behavior: auto !important;
  animation-duration: .01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .01ms !important;
}

#resaagar-home[data-motion="reduced"] .rs-reveal {
  opacity: 1 !important;
  filter: none !important;
  clip-path: none !important;
  transform: none !important;
}

@media (max-width: 1024px) {
  #resaagar-home .rs-hero {
    min-height: auto;
    padding-top: 100px;
  }

  #resaagar-home .rs-hero__inner,
  #resaagar-home .rs-signal__grid,
  #resaagar-home .rs-map-feature__card {
    grid-template-columns: 1fr;
  }

  #resaagar-home .rs-orbit-wrap {
    width: min(650px, 92vw);
    margin: -20px auto 55px;
  }

  #resaagar-home .rs-scroll-cue {
    display: none;
  }

  #resaagar-home .rs-services__head,
  #resaagar-home .rs-process__head {
    grid-template-columns: 1fr;
  }

  #resaagar-home .rs-services__head .rs-section-copy {
    justify-self: start;
  }

  #resaagar-home .rs-wave {
    width: min(500px, 100%);
    margin-inline: auto;
  }

  #resaagar-home .rs-map-feature__visual {
    min-height: 400px;
  }
}

@media (max-width: 780px) {
  #resaagar-home .rs-container {
    width: min(100% - 28px, 1240px);
  }

  #resaagar-home .rs-hero {
    padding-top: 78px;
  }

  #resaagar-home .rs-hero h1 {
    font-size: clamp(52px, 17vw, 86px);
    line-height: .93;
  }

  #resaagar-home .rs-hero__actions .rs-btn {
    width: 100%;
  }

  #resaagar-home .rs-hero__proof {
    align-items: flex-start;
    gap: 15px;
  }

  #resaagar-home .rs-hero__proof span + span {
    padding-right: 15px;
  }

  #resaagar-home .rs-orbit-wrap {
    width: 115%;
    margin-right: -7.5%;
  }

  #resaagar-home .rs-orbit__label {
    min-width: 72px;
    height: 36px;
    font-size: 9px;
  }

  #resaagar-home .rs-manifesto__bottom,
  #resaagar-home .rs-faq__grid {
    grid-template-columns: 1fr;
  }

  #resaagar-home .rs-manifesto__number {
    margin-bottom: 25px;
  }

  #resaagar-home .rs-services__grid,
  #resaagar-home .rs-journal__grid {
    grid-template-columns: 1fr;
  }

  #resaagar-home .rs-service-card {
    grid-template-columns: auto 1fr;
    min-height: 0;
  }

  #resaagar-home .rs-service-card__arrow {
    grid-column: 2;
    margin-top: 8px;
  }

  #resaagar-home .rs-process-step {
    grid-template-columns: 50px 1fr;
    gap: 17px;
    padding: 32px 25px 32px 0;
  }

  #resaagar-home .rs-process-step p {
    grid-column: 2;
  }

  #resaagar-home .rs-map-feature__card {
    padding: 36px 22px;
  }

  #resaagar-home .rs-map-feature__visual {
    min-height: 320px;
  }

  #resaagar-home .rs-map-radar {
    width: min(290px, 80vw);
  }

  #resaagar-home .rs-article-card {
    min-height: 390px;
  }

  #resaagar-home .rs-faq__intro {
    position: static;
  }

  #resaagar-home .rs-final::before { width: 150vw; }
  #resaagar-home .rs-final::after { width: 110vw; }

  #resaagar-home .rs-credit {
    justify-content: center;
  }

  #resaagar-home .rs-credit span:last-child {
    display: none;
  }

  #resaagar-home .rs-motion-toggle {
    bottom: 12px;
    left: 12px;
    min-height: 40px;
    padding-inline: 12px;
  }

  #resaagar-home .rs-cursor {
    display: none;
  }
}

@media (max-width: 480px) {
  #resaagar-home .rs-brand-chip {
    font-size: 11px;
  }

  #resaagar-home .rs-hero__proof {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  #resaagar-home .rs-section-title {
    font-size: clamp(41px, 13vw, 62px);
  }

  #resaagar-home .rs-manifesto__title {
    font-size: clamp(43px, 13.5vw, 65px);
  }

  #resaagar-home .rs-wave {
    min-height: 310px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #resaagar-home:not([data-motion="full"]) *,
  #resaagar-home:not([data-motion="full"]) *::before,
  #resaagar-home:not([data-motion="full"]) *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  #resaagar-home:not([data-motion="full"]) .rs-reveal {
    opacity: 1 !important;
    filter: none !important;
    clip-path: none !important;
    transform: none !important;
  }
}
</style>

<main id="resaagar-home" data-motion="full" aria-label="صفحه اصلی آژانس دیجیتال مارکتینگ رساگر">
  <div class="rs-scroll-progress" aria-hidden="true"></div>

  <div class="rs-loader" aria-hidden="true">
    <div class="rs-loader__inner">
      <img class="rs-loader__logo" src="https://resaagar.ir/wp-content/uploads/2024/12/logo512.png" alt="" width="72" height="72">
      <strong class="rs-loader__word">صدای برندت را بالا ببر.</strong>
      <div class="rs-loader__meta"><span>RESAAGAR</span><span class="rs-loader__bar"><i></i></span><strong class="rs-loader__counter">۰</strong></div>
    </div>
  </div>

  <button class="rs-motion-toggle" type="button" aria-pressed="true" aria-label="تغییر شدت انیمیشن‌ها"><i aria-hidden="true"></i><span>حرکت کامل</span></button>
  <div class="rs-cursor" aria-hidden="true"></div>

  <section class="rs-hero" aria-labelledby="rs-hero-title">
    <canvas class="rs-particles" aria-hidden="true"></canvas>
    <div class="rs-hero__ghost" aria-hidden="true">RESAAGAR</div>
    <div class="rs-container rs-hero__inner">
      <div class="rs-hero__content">
        <div class="rs-brand-chip">
          <img src="https://resaagar.ir/wp-content/uploads/2024/12/logo512.png" alt="لوگو رساگر" width="32" height="32">
          <span>آژانس دیجیتال مارکتینگ رساگر</span>
          <i aria-hidden="true"></i>
        </div>

        <h1 id="rs-hero-title">
          <span class="rs-line">دیده شو.</span>
          <span class="rs-line rs-line--outline">شنیده شو.</span>
          <span class="rs-line rs-line--lime">انتخاب شو.</span>
        </h1>

        <p class="rs-hero__lead">
          ما در رساگر، <strong>طراحی سایت، سئو، برندینگ و محتوا</strong> را به یک سیستم رشد متصل تبدیل می‌کنیم؛ سیستمی که فقط زیبا نیست، نتیجه می‌سازد.
        </p>

        <div class="rs-hero__actions">
          <a class="rs-btn rs-btn--primary rs-magnetic" href="https://resaagar.ir/contact/">
            <span>شروع یک همکاری جدی</span>
          </a>
          <a class="rs-btn rs-btn--ghost rs-magnetic" href="tel:02182808707">
            <span>مشاوره رایگان</span>
          </a>
        </div>

        <div class="rs-hero__proof" aria-label="اطلاعات کلیدی رساگر">
          <span><strong>۸۰+</strong> تجربه همکاری</span>
          <span><strong>۳۶۰°</strong> نگاه یکپارچه</span>
          <span><strong>داده</strong> قبل از تصمیم</span>
        </div>
      </div>

      <div class="rs-orbit-wrap" aria-hidden="true">
        <div class="rs-orbit-glow"></div>
        <div class="rs-orbit">
          <img class="rs-orbit__image" src="https://resaagar.ir/wp-content/uploads/2025/08/dm-img3-optimized.webp" alt="" width="700" height="700">
        </div>
        <span class="rs-orbit__label rs-orbit__label--a">WEB / UX</span>
        <span class="rs-orbit__label rs-orbit__label--b">SEO / DATA</span>
        <span class="rs-orbit__label rs-orbit__label--c">BRAND / VOICE</span>
      </div>
    </div>

    <div class="rs-scroll-cue" aria-hidden="true"></div>
  </section>

  <div class="rs-ticker" aria-hidden="true">
    <div class="rs-ticker__track">
      <div class="rs-ticker__group">
        <span>طراحی سایت</span><i></i><span>سئو تکنیکال</span><i></i><span>برندسازی</span><i></i><span>تولید محتوا</span><i></i><span>سوشال مدیا</span><i></i><span>بازاریابی محلی</span><i></i>
      </div>
      <div class="rs-ticker__group">
        <span>طراحی سایت</span><i></i><span>سئو تکنیکال</span><i></i><span>برندسازی</span><i></i><span>تولید محتوا</span><i></i><span>سوشال مدیا</span><i></i><span>بازاریابی محلی</span><i></i>
      </div>
    </div>
  </div>

  <section class="rs-manifesto" aria-labelledby="rs-manifesto-title">
    <div class="rs-container">
      <div class="rs-manifesto__eyebrow rs-reveal">
        <span>ما فقط اجرا نمی‌کنیم؛ مسئله را حل می‌کنیم.</span>
      </div>

      <h2 class="rs-manifesto__title rs-reveal" id="rs-manifesto-title">
        یک برند معمولی، تبلیغ می‌کند.
        <span class="rs-blue">یک برند قدرتمند،</span>
        <span class="rs-hollow">اثر می‌گذارد.</span>
      </h2>

      <div class="rs-manifesto__bottom">
        <div class="rs-manifesto__number rs-reveal">
          ۸۰+
          <small>پروژه‌ای که به ما<br>یاد داده‌اند دقیق‌تر ببینیم.</small>
        </div>
        <p class="rs-manifesto__copy rs-reveal">
          رساگر نقطه اتصال تحلیل بازار، رفتار کاربر، طراحی و اجرای دقیق است. قبل از هر کمپین یا طراحی، مسئله کسب‌وکار را می‌فهمیم؛ بعد مسیری می‌سازیم که مخاطب را از اولین برخورد تا اقدام نهایی هدایت کند.
        </p>
      </div>
    </div>
  </section>

  <section class="rs-services" id="rs-services" aria-labelledby="rs-services-title">
    <div class="rs-container">
      <div class="rs-services__head">
        <div>
          <p class="rs-kicker rs-reveal">تخصص‌های رساگر</p>
          <h2 class="rs-section-title rs-reveal" id="rs-services-title">شش تخصص.<br>یک مسیر رشد.</h2>
        </div>
        <p class="rs-section-copy rs-reveal">هر خدمت جداگانه قابل اجراست؛ قدرت واقعی زمانی شکل می‌گیرد که همه آن‌ها با یک استراتژی مشترک کار کنند.</p>
      </div>

      <div class="rs-services__grid">
        <a class="rs-service-card rs-tilt rs-reveal" href="https://resaagar.ir/contact/">
          <span class="rs-service-card__no">۰۱</span>
          <span class="rs-service-card__content">
            <h3>طراحی و توسعه وب</h3>
            <span class="rs-service-card__en">WEB DESIGN & DEVELOPMENT</span>
            <p>وب‌سایت سریع، متمایز و کاربرمحور با ساختاری که اعتماد می‌سازد و بازدیدکننده را به مشتری تبدیل می‌کند.</p>
          </span>
          <span class="rs-service-card__arrow" aria-hidden="true">↙</span>
        </a>

        <a class="rs-service-card rs-tilt rs-reveal" href="https://resaagar.ir/contact/">
          <span class="rs-service-card__no">۰۲</span>
          <span class="rs-service-card__content">
            <h3>سئو و رشد ارگانیک</h3>
            <span class="rs-service-card__en">SEARCH ENGINE OPTIMIZATION</span>
            <p>از معماری فنی و تحقیق کلمه کلیدی تا محتوای هدفمند و پایش داده؛ دیده‌شدن اتفاقی نیست.</p>
          </span>
          <span class="rs-service-card__arrow" aria-hidden="true">↙</span>
        </a>

        <a class="rs-service-card rs-tilt rs-reveal" href="https://resaagar.ir/contact/">
          <span class="rs-service-card__no">۰۳</span>
          <span class="rs-service-card__content">
            <h3>برندسازی و هویت</h3>
            <span class="rs-service-card__en">BRANDING & IDENTITY</span>
            <p>هویت بصری، لحن و تجربه‌ای منسجم که برند شما را در ذهن مخاطب قابل تشخیص و ماندگار می‌کند.</p>
          </span>
          <span class="rs-service-card__arrow" aria-hidden="true">↙</span>
        </a>

        <a class="rs-service-card rs-tilt rs-reveal" href="https://resaagar.ir/map/">
          <span class="rs-service-card__no">۰۴</span>
          <span class="rs-service-card__content">
            <h3>بازاریابی محلی</h3>
            <span class="rs-service-card__en">LOCAL MARKETING</span>
            <p>حضور دقیق کسب‌وکار در نقشه‌های آنلاین و طراحی مسیر دسترسی برای مشتریانی که همین حالا نزدیک شما هستند.</p>
          </span>
          <span class="rs-service-card__arrow" aria-hidden="true">↙</span>
        </a>

        <a class="rs-service-card rs-tilt rs-reveal" href="https://resaagar.ir/contact/">
          <span class="rs-service-card__no">۰۵</span>
          <span class="rs-service-card__content">
            <h3>محتوا و روایت برند</h3>
            <span class="rs-service-card__en">CONTENT MARKETING</span>
            <p>محتوایی که صرفاً صفحه را پُر نمی‌کند؛ سؤال مخاطب را پاسخ می‌دهد و اعتماد او را قدم‌به‌قدم می‌سازد.</p>
          </span>
          <span class="rs-service-card__arrow" aria-hidden="true">↙</span>
        </a>

        <a class="rs-service-card rs-tilt rs-reveal" href="https://resaagar.ir/contact/">
          <span class="rs-service-card__no">۰۶</span>
          <span class="rs-service-card__content">
            <h3>شبکه‌های اجتماعی</h3>
            <span class="rs-service-card__en">SOCIAL MEDIA MARKETING</span>
            <p>استراتژی، تقویم و محتوای تعاملی برای تبدیل حضور روزمره برند به جامعه، سرنخ و فروش.</p>
          </span>
          <span class="rs-service-card__arrow" aria-hidden="true">↙</span>
        </a>
      </div>
    </div>
  </section>

  <section class="rs-signal" aria-labelledby="rs-signal-title">
    <div class="rs-container rs-signal__grid">
      <div>
        <p class="rs-kicker rs-reveal">فلسفه رساگر</p>
        <h2 class="rs-signal__title rs-reveal" id="rs-signal-title">بیشتر نتیجه،<em>صدای رساتر.</em></h2>
        <p class="rs-signal__copy rs-reveal">حرکت، رنگ و تکنولوژی زمانی ارزش دارند که پیام را شفاف‌تر کنند. ما هر تصمیم طراحی را به یک هدف تجاری متصل می‌کنیم: توجه، اعتماد یا اقدام.</p>
      </div>

      <div class="rs-wave rs-reveal" aria-hidden="true">
        <span style="--h:70px;--d:-.1s"></span>
        <span style="--h:130px;--d:-.4s"></span>
        <span style="--h:210px;--d:-.7s"></span>
        <span style="--h:300px;--d:-1s"></span>
        <span style="--h:220px;--d:-.65s"></span>
        <span style="--h:150px;--d:-.35s"></span>
        <span style="--h:82px;--d:-.05s"></span>
      </div>
    </div>
  </section>

  <section class="rs-process" aria-labelledby="rs-process-title">
    <div class="rs-container">
      <div class="rs-process__head">
        <div>
          <p class="rs-kicker rs-reveal">از مسئله تا نتیجه</p>
          <h2 class="rs-section-title rs-reveal" id="rs-process-title">فرایند شفاف.<br>تصمیم دقیق.</h2>
        </div>
        <p class="rs-section-copy rs-reveal">همکاری خوب از یک قرارداد شروع نمی‌شود؛ از درک درست مسئله شروع می‌شود.</p>
      </div>

      <div class="rs-process__steps">
        <div class="rs-process__line" aria-hidden="true"><span></span></div>

        <article class="rs-process-step rs-reveal">
          <span class="rs-process-step__no">۰۱ / کشف</span>
          <h3>شناخت کسب‌وکار</h3>
          <p>هدف، مخاطب، رقبا و موانع رشد را بررسی می‌کنیم تا مسئله واقعی پشت درخواست شما مشخص شود.</p>
        </article>

        <article class="rs-process-step rs-reveal">
          <span class="rs-process-step__no">۰۲ / جهت</span>
          <h3>طراحی استراتژی</h3>
          <p>پیام، مسیر کاربر، کانال‌ها و شاخص‌های موفقیت را به یک نقشه اجرایی روشن تبدیل می‌کنیم.</p>
        </article>

        <article class="rs-process-step rs-reveal">
          <span class="rs-process-step__no">۰۳ / ساخت</span>
          <h3>اجرای یکپارچه</h3>
          <p>تخصص‌های طراحی، سئو، محتوا و برند با یک زبان مشترک و بدون پراکندگی کنار هم اجرا می‌شوند.</p>
        </article>

        <article class="rs-process-step rs-reveal">
          <span class="rs-process-step__no">۰۴ / رشد</span>
          <h3>تحلیل و بهینه‌سازی</h3>
          <p>نتیجه را اندازه می‌گیریم، اصطکاک‌ها را پیدا می‌کنیم و نسخه بعدی را بر اساس داده بهتر می‌سازیم.</p>
        </article>
      </div>
    </div>
  </section>

  <section class="rs-map-feature" aria-labelledby="rs-map-title">
    <div class="rs-container">
      <div class="rs-map-feature__card rs-reveal">
        <div class="rs-map-feature__content">
          <p class="rs-kicker">سرویس ویژه کسب‌وکارهای محلی</p>
          <h2 id="rs-map-title">روی نقشه باش.<br>در مسیر مشتری بمان.</h2>
          <p>ثبت کسب‌وکار در گوگل، نشان، بلد، اسنپ و OpenStreetMap با فرایند روشن، پشتیبانی و ضمانت بازگشت وجه در موارد اعلام‌شده.</p>
          <a class="rs-btn rs-btn--primary rs-magnetic" href="https://resaagar.ir/map/"><span>مشاهده تعرفه و ثبت سفارش</span></a>
        </div>

        <div class="rs-map-feature__visual" aria-hidden="true">
          <div class="rs-map-radar">
            <div class="rs-map-radar__sweep"></div>
            <div class="rs-map-pin">
              <img src="https://resaagar.ir/wp-content/uploads/2024/12/logo512.png" alt="" width="48" height="48">
            </div>
            <span class="rs-map-label rs-map-label--google">GOOGLE MAPS</span>
            <span class="rs-map-label rs-map-label--neshan">NESHAN</span>
            <span class="rs-map-label rs-map-label--balad">BALAD</span>
            <span class="rs-map-label rs-map-label--snapp">SNAPP</span>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="rs-journal" aria-labelledby="rs-journal-title">
    <div class="rs-container">
      <div class="rs-journal__head">
        <div>
          <p class="rs-kicker rs-reveal">از ژورنال رساگر</p>
          <h2 class="rs-section-title rs-reveal" id="rs-journal-title">دانش، قبل از تبلیغ.</h2>
        </div>
        <a class="rs-text-link" href="https://resaagar.ir/content-strategy/">شروع مطالعه <span aria-hidden="true">↙</span></a>
      </div>

      <div class="rs-journal__grid">
        <a class="rs-article-card rs-reveal" href="https://resaagar.ir/mistakes-corporate-website-design/">
          <span class="rs-article-card__media"><img src="https://resaagar.ir/wp-content/uploads/2025/08/Copilot_20250809_123752-optimized-768x512.webp" alt="اشتباهات رایج طراحی سایت شرکتی" loading="lazy"></span>
          <span class="rs-article-card__arrow" aria-hidden="true">↙</span>
          <span class="rs-article-card__content"><span class="rs-article-card__tag">طراحی سایت</span><h3>۵ اشتباه رایج در طراحی سایت شرکتی که نرخ تبدیل را نابود می‌کند</h3></span>
        </a>

        <a class="rs-article-card rs-reveal" href="https://resaagar.ir/seo-for-beginners/">
          <span class="rs-article-card__media"><img src="https://resaagar.ir/wp-content/uploads/2025/03/Copilot_20250721_011103-768x512.png" alt="راهنمای سئو برای مبتدیان" loading="lazy"></span>
          <span class="rs-article-card__arrow" aria-hidden="true">↙</span>
          <span class="rs-article-card__content"><span class="rs-article-card__tag">سئو</span><h3>راهنمای سئو برای مبتدیان؛ شروع اصولی از صفر</h3></span>
        </a>

        <a class="rs-article-card rs-reveal" href="https://resaagar.ir/role-of-social/">
          <span class="rs-article-card__media"><img src="https://resaagar.ir/wp-content/uploads/2025/03/Copilot_20250721_015513-768x512.png" alt="نقش شبکه‌های اجتماعی در برندسازی" loading="lazy"></span>
          <span class="rs-article-card__arrow" aria-hidden="true">↙</span>
          <span class="rs-article-card__content"><span class="rs-article-card__tag">شبکه‌های اجتماعی</span><h3>۶ نقش شبکه‌های اجتماعی در برندسازی و افزایش فروش</h3></span>
        </a>

        <a class="rs-article-card rs-reveal" href="https://resaagar.ir/content-strategy/">
          <span class="rs-article-card__media"><img src="https://resaagar.ir/wp-content/uploads/2025/03/Copilot_20250721_010639-768x512.png" alt="استراتژی محتوا برای کسب‌وکارهای کوچک" loading="lazy"></span>
          <span class="rs-article-card__arrow" aria-hidden="true">↙</span>
          <span class="rs-article-card__content"><span class="rs-article-card__tag">استراتژی محتوا</span><h3>چگونه استراتژی محتوا به رشد کسب‌وکارهای کوچک کمک می‌کند؟</h3></span>
        </a>
      </div>
    </div>
  </section>

  <section class="rs-faq" aria-labelledby="rs-faq-title">
    <div class="rs-container rs-faq__grid">
      <div class="rs-faq__intro">
        <p class="rs-kicker rs-reveal">سؤال‌های درست</p>
        <h2 class="rs-reveal" id="rs-faq-title">قبل از<br>شروع.</h2>
        <p class="rs-reveal">اگر سؤال دیگری دارید، مستقیم با تیم رساگر صحبت کنید. گفت‌وگوی اولیه برای شناخت مسئله شماست.</p>
      </div>

      <div class="rs-faq__items rs-reveal">
        <details>
          <summary>رساگر دقیقاً چه خدماتی ارائه می‌دهد؟</summary>
          <p>طراحی و توسعه وب، سئو، برندسازی، بازاریابی محلی، تولید محتوا و مدیریت شبکه‌های اجتماعی. بسته پیشنهادی بر اساس مسئله و هدف واقعی کسب‌وکار شما تنظیم می‌شود.</p>
        </details>
        <details>
          <summary>آیا خدمات برای کسب‌وکارهای کوچک هم مناسب است؟</summary>
          <p>بله. دامنه کار، اولویت‌ها و بودجه بر اساس مرحله رشد کسب‌وکار تنظیم می‌شود تا از اقدامات پراکنده و هزینه‌های غیرضروری جلوگیری شود.</p>
        </details>
        <details>
          <summary>فرایند شروع همکاری چگونه است؟</summary>
          <p>پس از تماس اولیه، نیازها، مخاطب، رقبا و هدف بررسی می‌شوند. سپس مسیر پیشنهادی، دامنه کار، زمان‌بندی و هزینه به‌صورت شفاف ارائه خواهد شد.</p>
        </details>
        <details>
          <summary>هزینه خدمات چگونه محاسبه می‌شود؟</summary>
          <p>قیمت به نوع خدمت، حجم پروژه، پیچیدگی اجرا و زمان‌بندی بستگی دارد. قبل از شروع، شرح خدمات و هزینه دقیق مشخص می‌شود.</p>
        </details>
        <details>
          <summary>آیا مشاوره اولیه رایگان است؟</summary>
          <p>بله؛ تماس اولیه برای شناخت وضعیت و مشخص‌کردن مسیر مناسب انجام می‌شود و الزامی برای شروع قرارداد ایجاد نمی‌کند.</p>
        </details>
      </div>
    </div>
  </section>

  <section class="rs-final" aria-labelledby="rs-final-title">
    <div class="rs-container rs-final__inner">
      <p class="rs-final__mini rs-reveal">READY TO MAKE SOME NOISE?</p>
      <h2 class="rs-reveal" id="rs-final-title">وقتشه برندت<span>رساتر بشه.</span></h2>
      <p class="rs-reveal">اگر دنبال یک اجرای معمولی نیستید، از همین‌جا گفت‌وگو را شروع کنیم.</p>
      <div class="rs-final__actions rs-reveal">
        <a class="rs-btn rs-btn--primary rs-magnetic" href="https://resaagar.ir/contact/"><span>درخواست مشاوره</span></a>
        <a class="rs-btn rs-btn--ghost rs-magnetic" href="https://wa.me/989106065625"><span>پیام در واتساپ</span></a>
      </div>
      <a class="rs-final__phone" href="tel:02182808707">021 8280 8707</a>
    </div>

    <div class="rs-credit">
      <span>رساگر؛ نقطه اتصال برند شما با آینده دیجیتال</span>
      <img src="https://resaagar.ir/wp-content/uploads/2024/12/logo512.png" alt="" width="34" height="34">
      <span>RESAAGAR DIGITAL AGENCY</span>
    </div>
  </section>
</main>

<!-- Native browser animation: no external JavaScript library or WordPress plugin is required. -->
<script>
(function () {
  "use strict";

  var root = document.getElementById("resaagar-home");
  if (!root || root.dataset.rsInit === "1") return;
  root.dataset.rsInit = "1";

  var storedMotion = null;
  try { storedMotion = window.localStorage.getItem("resaagar-motion"); } catch (error) {}
  var reducedMotion = storedMotion === "reduced";
  root.dataset.motion = reducedMotion ? "reduced" : "full";
  var finePointer = window.matchMedia("(pointer: fine)").matches;
  var progress = root.querySelector(".rs-scroll-progress");
  var hero = root.querySelector(".rs-hero");
  var heroContent = root.querySelector(".rs-hero__content");
  var heroGhost = root.querySelector(".rs-hero__ghost");
  var orbit = root.querySelector(".rs-orbit");
  var processSteps = root.querySelector(".rs-process__steps");
  var processLine = root.querySelector(".rs-process__line span");
  var mapCard = root.querySelector(".rs-map-feature__card");
  var mapRadar = root.querySelector(".rs-map-radar");
  var loader = root.querySelector(".rs-loader");
  var loaderCounter = root.querySelector(".rs-loader__counter");
  var loaderBar = root.querySelector(".rs-loader__bar i");
  var motionToggle = root.querySelector(".rs-motion-toggle");
  var motionLabel = motionToggle.querySelector("span");
  var cursor = root.querySelector(".rs-cursor");
  var rafId = 0;

  function clamp(value, min, max) {
    return Math.min(max, Math.max(min, value));
  }

  function updateMotion() {
    var rect = root.getBoundingClientRect();
    var travel = Math.max(1, root.offsetHeight - window.innerHeight);
    var passed = Math.min(travel, Math.max(0, -rect.top));
    progress.style.width = (passed / travel * 100) + "%";

    if (!reducedMotion) {
      var heroRect = hero.getBoundingClientRect();
      var heroProgress = clamp(-heroRect.top / Math.max(1, heroRect.height), 0, 1);
      orbit.style.transform = "translate3d(0," + (heroProgress * 115) + "px,0) rotate(" + (heroProgress * 25) + "deg) scale(" + (1 - heroProgress * .08) + ")";
      heroContent.style.transform = "translate3d(0," + (heroProgress * 88) + "px,0)";
      heroContent.style.opacity = String(1 - heroProgress * .58);
      heroGhost.style.transform = "translate3d(" + (heroProgress * 190) + "px,0,0)";

      var processRect = processSteps.getBoundingClientRect();
      var processProgress = clamp((window.innerHeight * .74 - processRect.top) / Math.max(1, processRect.height), 0, 1);
      processLine.style.transform = "scaleY(" + processProgress + ")";

      var mapRect = mapCard.getBoundingClientRect();
      var mapProgress = clamp((window.innerHeight - mapRect.top) / Math.max(1, window.innerHeight + mapRect.height), 0, 1);
      mapRadar.style.transform = "translate3d(0," + ((.5 - mapProgress) * 34) + "px,0) rotate(" + ((mapProgress - .5) * 5) + "deg)";
    }

    rafId = 0;
  }

  window.addEventListener("scroll", function () {
    if (!rafId) rafId = requestAnimationFrame(updateMotion);
  }, { passive: true });
  window.addEventListener("resize", function () {
    if (!rafId) rafId = requestAnimationFrame(updateMotion);
  }, { passive: true });
  updateMotion();

  motionToggle.setAttribute("aria-pressed", reducedMotion ? "false" : "true");
  motionLabel.textContent = reducedMotion ? "حرکت کم" : "حرکت کامل";
  motionToggle.addEventListener("click", function () {
    var next = reducedMotion ? "full" : "reduced";
    try { window.localStorage.setItem("resaagar-motion", next); } catch (error) {}
    window.location.reload();
  });

  if (finePointer && !reducedMotion) {
    var cursorX = -100;
    var cursorY = -100;
    var cursorRaf = 0;
    root.addEventListener("pointerenter", function () { cursor.style.opacity = "1"; });
    root.addEventListener("pointerleave", function () { cursor.style.opacity = "0"; });
    root.addEventListener("pointermove", function (event) {
      var rect = root.getBoundingClientRect();
      root.style.setProperty("--rs-mx", (event.clientX - rect.left) + "px");
      root.style.setProperty("--rs-my", (event.clientY - rect.top) + "px");
      cursorX = event.clientX;
      cursorY = event.clientY;
      if (!cursorRaf) {
        cursorRaf = requestAnimationFrame(function () {
          cursor.style.transform = "translate3d(" + cursorX + "px," + cursorY + "px,0)";
          cursorRaf = 0;
        });
      }
    }, { passive: true });

    root.querySelectorAll("a, button, summary").forEach(function (target) {
      target.addEventListener("pointerenter", function () { cursor.classList.add("rs-cursor--active"); });
      target.addEventListener("pointerleave", function () { cursor.classList.remove("rs-cursor--active"); });
    });

    root.querySelectorAll(".rs-magnetic").forEach(function (button) {
      button.addEventListener("pointermove", function (event) {
        var rect = button.getBoundingClientRect();
        var x = (event.clientX - rect.left - rect.width / 2) * .18;
        var y = (event.clientY - rect.top - rect.height / 2) * .18;
        button.style.transform = "translate3d(" + x + "px," + y + "px,0)";
      });
      button.addEventListener("pointerleave", function () {
        button.style.transform = "";
      });
    });

    root.querySelectorAll(".rs-tilt").forEach(function (card) {
      card.addEventListener("pointermove", function (event) {
        var rect = card.getBoundingClientRect();
        var x = event.clientX - rect.left;
        var y = event.clientY - rect.top;
        var rotateY = ((x / rect.width) - .5) * 4;
        var rotateX = ((y / rect.height) - .5) * -4;
        card.style.setProperty("--card-x", x + "px");
        card.style.setProperty("--card-y", y + "px");
        card.style.transform = "perspective(900px) rotateX(" + rotateX + "deg) rotateY(" + rotateY + "deg) translateY(-5px)";
      });
      card.addEventListener("pointerleave", function () {
        card.style.transform = "";
      });
    });
  }

  if (reducedMotion) {
    root.querySelectorAll(".rs-reveal").forEach(function (element) {
      element.style.opacity = "1";
      element.style.transform = "none";
    });
    return;
  }

  root.classList.add("rs-js");

  var previousOverflow = document.documentElement.style.overflow;
  document.documentElement.style.overflow = "hidden";
  var loadStarted = performance.now();
  function finishLoader() {
    if (loader.classList.contains("rs-loader--done")) return;
    loaderCounter.textContent = "۱۰۰";
    loaderBar.style.transform = "scaleX(1)";
    loader.classList.add("rs-loader--done");
    document.documentElement.style.overflow = previousOverflow;
  }

  function updateLoader(now) {
    var value = clamp((now - loadStarted) / 1250, 0, 1);
    loaderCounter.textContent = Math.round(value * 100).toLocaleString("fa-IR");
    loaderBar.style.transform = "scaleX(" + value + ")";
    if (value < 1) requestAnimationFrame(updateLoader);
    else window.setTimeout(finishLoader, 180);
  }
  requestAnimationFrame(updateLoader);
  window.setTimeout(finishLoader, 2600);

  (function initParticles() {
    var canvas = root.querySelector(".rs-particles");
    var context = canvas && canvas.getContext ? canvas.getContext("2d") : null;
    if (!context) return;
    var particles = [];
    var pointer = { x: -1000, y: -1000 };
    var width = 0;
    var height = 0;
    var dpr = 1;

    function resizeCanvas() {
      var rect = hero.getBoundingClientRect();
      width = Math.max(1, rect.width);
      height = Math.max(1, rect.height);
      dpr = Math.min(window.devicePixelRatio || 1, 1.5);
      canvas.width = Math.round(width * dpr);
      canvas.height = Math.round(height * dpr);
      canvas.style.width = width + "px";
      canvas.style.height = height + "px";
      context.setTransform(dpr, 0, 0, dpr, 0, 0);
      var total = width < 700 ? 22 : 48;
      particles = Array.from({ length: total }, function () {
        return {
          x: Math.random() * width,
          y: Math.random() * height,
          vx: (Math.random() - .5) * .32,
          vy: (Math.random() - .5) * .32,
          r: Math.random() * 1.8 + .7
        };
      });
    }

    hero.addEventListener("pointermove", function (event) {
      var rect = hero.getBoundingClientRect();
      pointer.x = event.clientX - rect.left;
      pointer.y = event.clientY - rect.top;
    }, { passive: true });
    hero.addEventListener("pointerleave", function () { pointer.x = pointer.y = -1000; });

    function drawParticles() {
      context.clearRect(0, 0, width, height);
      particles.forEach(function (particle, index) {
        var dxPointer = pointer.x - particle.x;
        var dyPointer = pointer.y - particle.y;
        var pointerDistance = Math.hypot(dxPointer, dyPointer);
        if (pointerDistance < 170 && pointerDistance > 1) {
          particle.vx += dxPointer / pointerDistance * .008;
          particle.vy += dyPointer / pointerDistance * .008;
        }
        particle.vx *= .995;
        particle.vy *= .995;
        particle.x += particle.vx;
        particle.y += particle.vy;
        if (particle.x < -10) particle.x = width + 10;
        if (particle.x > width + 10) particle.x = -10;
        if (particle.y < -10) particle.y = height + 10;
        if (particle.y > height + 10) particle.y = -10;

        context.beginPath();
        context.arc(particle.x, particle.y, particle.r, 0, Math.PI * 2);
        context.fillStyle = index % 4 === 0 ? "rgba(223,255,176,.88)" : "rgba(104,164,255,.6)";
        context.fill();

        for (var next = index + 1; next < particles.length; next++) {
          var other = particles[next];
          var distance = Math.hypot(other.x - particle.x, other.y - particle.y);
          if (distance < 125) {
            context.beginPath();
            context.moveTo(particle.x, particle.y);
            context.lineTo(other.x, other.y);
            context.strokeStyle = "rgba(104,164,255," + ((1 - distance / 125) * .18) + ")";
            context.lineWidth = .7;
            context.stroke();
          }
        }
      });
      if (!document.hidden) requestAnimationFrame(drawParticles);
    }

    resizeCanvas();
    window.addEventListener("resize", resizeCanvas, { passive: true });
    document.addEventListener("visibilitychange", function () {
      if (!document.hidden) requestAnimationFrame(drawParticles);
    });
    requestAnimationFrame(drawParticles);
  })();

  function entrance(element, delay, translate, scale) {
    if (!element || typeof element.animate !== "function") return;
    element.animate([
      { opacity: 0, transform: "translate3d(0," + translate + "px,0) scale(" + scale + ")" },
      { opacity: 1, transform: "translate3d(0,0,0) scale(1)" }
    ], {
      duration: 950,
      delay: delay,
      easing: "cubic-bezier(.16,1,.3,1)",
      fill: "both"
    });
  }

  var introDelay = 1320;
  entrance(root.querySelector(".rs-brand-chip"), introDelay, 24, 1);
  root.querySelectorAll(".rs-hero h1 .rs-line").forEach(function (line, index) {
    entrance(line, introDelay + 100 + index * 120, 92, .95);
  });
  entrance(root.querySelector(".rs-hero__lead"), introDelay + 520, 38, 1);
  entrance(root.querySelector(".rs-hero__actions"), introDelay + 640, 32, 1);
  entrance(root.querySelector(".rs-hero__proof"), introDelay + 750, 28, 1);
  entrance(root.querySelector(".rs-orbit-wrap"), introDelay + 120, 45, .62);

  if ("IntersectionObserver" in window) {
    var observer = new IntersectionObserver(function (entries) {
      entries.forEach(function (entry) {
        if (!entry.isIntersecting) return;
        entry.target.classList.add("rs-in");
        observer.unobserve(entry.target);
      });
    }, { rootMargin: "0px 0px -10% 0px", threshold: .08 });

    root.querySelectorAll(".rs-reveal").forEach(function (element, index) {
      if (element.classList.contains("rs-service-card") || element.classList.contains("rs-article-card") || element.classList.contains("rs-process-step")) {
        element.style.transitionDelay = ((index % 2) * 120) + "ms";
      }
      observer.observe(element);
    });
  } else {
    root.querySelectorAll(".rs-reveal").forEach(function (element) {
      element.classList.add("rs-in");
    });
  }

  window.addEventListener("load", updateMotion, { once: true });
})();
</script>