/* page-head illustrations */
.phead .wrap.ph-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);column-gap:56px;align-items:center}
.ha{width:100%;max-width:520px;justify-self:end}
.ha svg{display:block;width:100%;height:auto;overflow:visible}
.ha text{font-family:Vazirmatn,Tahoma,sans-serif;font-weight:700;font-size:15px;direction:ltr;unicode-bidi:plaintext}
.ha text:not([fill]){fill:#1D2225}
.ha .ha-big{font-size:19px;font-weight:800}
.ha *{transform-box:fill-box}
.ha-card{filter:drop-shadow(0 12px 22px rgba(29,34,37,.12))}
.ha-bob{animation:haBob 4.5s ease-in-out infinite;animation-delay:var(--d,0s)}
.ha-pulse{animation:haPulse 1.6s ease-in-out infinite;transform-origin:center}
.ha-led{animation:haBlink 1.8s steps(2) infinite;animation-delay:var(--d,0s)}
.ha-spin{animation:haSpin 14s linear infinite;transform-origin:center}
.ha-spin-slow{animation:haSpin 40s linear infinite;transform-origin:center;transform-box:view-box}
.ha-flow{animation:haDash 1.2s linear infinite}
/* threats */
.ha-sweep{animation:haSpin 4s linear infinite;transform-origin:0 0;transform-box:view-box}
.ha-threats .ha-sweep{transform-origin:260px 222px}
.ha-blip{opacity:0;animation:haBlip 4s ease-out infinite;animation-delay:var(--d,0s)}
.ha-ring{fill:none;stroke-width:2.5;transform-origin:center;animation:haRing 4s ease-out infinite;animation-delay:var(--d,0s)}
.ha-blip .ha-ring{animation-delay:inherit}
/* layers */
.ha-ly path{fill:#fff;stroke:#C8D2CD;stroke-width:2.5;animation:haLit 3.2s ease-in-out infinite;animation-delay:calc(var(--i)*.32s + .2s)}
.ha-ly{animation:haBob 4s ease-in-out infinite;animation-delay:calc(var(--i)*-.5s)}
.ha-drop{animation:haDrop 3.2s cubic-bezier(.5,0,.6,1) infinite}
.ha-drop.bad{animation-name:haDropBad;animation-delay:-1.6s}
.ha-pop{animation:haPop 3.2s ease-out infinite;transform-origin:center}
/* guides */
.ha-check rect:first-child{fill:#fff;stroke:#C8D2CD;stroke-width:2.5;animation:haBoxOn 5s infinite;animation-delay:calc(var(--i)*.7s)}
.ha-check path{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24;animation:haTick 5s infinite;animation-delay:calc(var(--i)*.7s)}
.ha-orbit{animation:haOrbit 6s ease-in-out infinite}
/* contact */
.ha-wave{opacity:0;animation:haWave 2.4s ease-out infinite;animation-delay:var(--d,0s);transform-origin:center}
.ha-ring-phone{animation:haShake 2.4s ease-in-out infinite;transform-origin:center}
.ha-bub{opacity:0;animation:haBub 6s ease-out infinite;animation-delay:calc(var(--i)*1s);transform-origin:right center}
.ha-dot{animation:haDot 1s ease-in-out infinite;animation-delay:var(--d,0s)}
.ha-fly{animation:haBob 3.6s ease-in-out infinite}
/* compare */
.ha-cmp-bad-a{animation:haCmpBadA 4.8s ease-in-out infinite}
.ha-cmp-good-a{animation:haCmpGoodA 4.8s ease-in-out infinite;animation-delay:-2.4s}
.ha-cmp-bad-b{animation:haCmpBadB 4.8s ease-in-out infinite}
.ha-tint{opacity:0;animation:haTint 4.8s ease-in-out infinite}

@keyframes haBob{50%{transform:translateY(-10px)}}
@keyframes haPulse{50%{transform:scale(1.35);opacity:.6}}
@keyframes haBlink{50%{opacity:.2}}
@keyframes haSpin{to{transform:rotate(360deg)}}
@keyframes haDash{to{stroke-dashoffset:-26}}
@keyframes haBlip{0%,8%{opacity:0}12%,70%{opacity:1}100%{opacity:0}}
@keyframes haRing{0%,10%{transform:scale(1);opacity:1}60%,100%{transform:scale(3.6);opacity:0}}
@keyframes haLit{0%,100%{fill:#fff;stroke:#C8D2CD}12%,30%{fill:#E3F6EC;stroke:#00B36B}}
@keyframes haDrop{0%{transform:translateY(20px);opacity:0}8%{opacity:1}80%{transform:translateY(330px);opacity:1}92%,100%{transform:translateY(340px);opacity:0}}
@keyframes haDropBad{0%{transform:translate(0,20px);opacity:0}8%{opacity:1}35%{transform:translate(0,190px)}55%{transform:translate(150px,212px);opacity:1}70%,100%{transform:translate(150px,212px);opacity:0}}
@keyframes haPop{0%,70%{transform:scale(1)}80%{transform:scale(1.5)}90%,100%{transform:scale(1)}}
@keyframes haBoxOn{0%,10%{fill:#fff;stroke:#C8D2CD}18%,85%{fill:#00B36B;stroke:#00B36B}100%{fill:#fff;stroke:#C8D2CD}}
@keyframes haTick{0%,12%{stroke-dashoffset:24}22%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:24}}
@keyframes haOrbit{0%,100%{transform:translate(0,0)}25%{transform:translate(-40px,-60px)}50%{transform:translate(-80px,-130px)}75%{transform:translate(-30px,-70px)}}
@keyframes haWave{0%{transform:scale(1);opacity:.8}100%{transform:scale(2.2);opacity:0}}
@keyframes haShake{0%,40%,100%{transform:rotate(0)}5%,15%,25%{transform:rotate(-9deg)}10%,20%,30%{transform:rotate(9deg)}}
@keyframes haBub{0%{opacity:0;transform:scale(.6)}8%,80%{opacity:1;transform:scale(1)}90%,100%{opacity:0;transform:scale(1)}}
@keyframes haDot{50%{transform:translateY(-5px);fill:#00B36B}}
@keyframes haCmpBadA{0%{transform:translateY(0);opacity:0}10%{opacity:1}40%{transform:translateY(170px)}55%{transform:translate(42px,186px)}70%,100%{transform:translate(42px,186px);opacity:0}}
@keyframes haCmpGoodA{0%{transform:translateY(0);opacity:0}10%{opacity:1}60%{transform:translateY(300px);opacity:1}75%,100%{transform:translateY(310px);opacity:0}}
@keyframes haCmpBadB{0%{transform:translateY(0);opacity:0}10%{opacity:1}55%{transform:translateY(200px);opacity:1}65%,100%{transform:translateY(205px);opacity:0}}
@keyframes haTint{0%,50%{opacity:0}60%,90%{opacity:1}100%{opacity:0}}

@media(max-width:960px){.phead .wrap.ph-grid{grid-template-columns:1fr}.ha{justify-self:center;max-width:400px;margin-top:36px}}
@media(max-width:560px){.ha{max-width:320px}}
@media(prefers-reduced-motion:reduce){.ha *{animation:none!important}.ha-blip,.ha-bub,.ha-tint{opacity:1}}