/* ===== 5 pillars of a strong brand (animated) ===== */
.pl-sec{padding-top:40px}
.pl-wrap{--o:92px;position:relative;display:grid;grid-template-columns:minmax(300px,420px) 1fr;gap:20px 40px;align-items:center;padding:30px 0}
.pl-hub{position:relative;width:min(100%,400px);aspect-ratio:1;border-radius:50%;margin-left:-6%;justify-self:start;display:grid;place-items:center;background:radial-gradient(circle at 30% 25%,#fff,#eef4fb 70%);box-shadow:0 40px 70px -30px rgba(20,60,110,.35),inset 0 0 0 1px rgba(30,100,200,.06)}
.pl-spin{position:absolute;inset:-14px;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 55%,var(--blue) 55% 70%,transparent 70% 85%,#0b1e3f 85% 92%,transparent 92%);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 7px),#000 calc(100% - 6px));mask:radial-gradient(farthest-side,transparent calc(100% - 7px),#000 calc(100% - 6px));animation:plSpin 9s linear infinite}
.pl-hub-in{text-align:center;padding:0 12%}
.pl-hub h2{font:800 clamp(30px,3.4vw,44px)/1.12 Inter,Arial,sans-serif;letter-spacing:-.02em;margin:0;color:#0b1e3f}
.pl-hub h2 span{display:block;color:#1f63e6}
.pl-bar{display:block;width:90px;height:3px;margin:20px auto 16px;border-radius:3px;background:#1f63e6;transform-origin:center;transform:scaleX(0);transition:transform 1s .6s cubic-bezier(.2,.8,.2,1)}
.pl-hub p{margin:0;font-size:17px;color:#5b6673}
.pl-list{position:relative;list-style:none;margin:0;padding:0}
.pl-list:before{content:"";position:absolute;left:30px;top:0;bottom:0;width:calc(var(--o) + 10px);border:2px solid #b9c7d8;border-left:0;border-radius:0 100% 100% 0/0 50% 50% 0;clip-path:inset(0 0 100% 0);transition:clip-path 1.6s .2s cubic-bezier(.5,0,.2,1)}
.pl-list li{position:relative;display:grid;grid-template-columns:62px 44px 1fr;align-items:center;gap:16px;height:98px;opacity:0;transform:translateX(-30px)}
.pl-list li:nth-child(1),.pl-list li:nth-child(5){margin-left:calc(var(--o)*.6)}
.pl-list li:nth-child(2),.pl-list li:nth-child(4){margin-left:calc(var(--o)*.92)}
.pl-list li:nth-child(3){margin-left:var(--o)}
.pl-n{position:relative;width:62px;height:62px;border-radius:50%;display:grid;place-items:center;background:#fff;box-shadow:0 14px 26px -8px rgba(20,60,110,.35),inset 0 -3px 6px rgba(20,60,110,.06);transition:transform .45s cubic-bezier(.2,1.4,.3,1)}
.pl-n:after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid #1f63e6;opacity:0;animation:plRing 3s ease-out infinite;animation-delay:calc(var(--i)*.5s)}
.pl-n em{font:800 20px Inter,Arial,sans-serif;font-style:normal;color:#1f4fd8}
.pl-ic svg{width:44px;height:44px;fill:none;stroke:#1f63e6;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .5s cubic-bezier(.2,1.4,.3,1)}
.pl-list b{display:block;font:700 19px/1.2 Inter,Arial,sans-serif;color:#0b1e3f;margin-bottom:4px}
.pl-list small{display:block;font-size:14px;line-height:1.5;color:#5b6673;max-width:280px}
.pl-list li:hover .pl-n{transform:scale(1.14) rotate(-6deg)}.pl-list li:hover .pl-ic svg{transform:translateY(-4px) rotate(-8deg) scale(1.1)}
.pl-wrap.show .pl-bar{transform:scaleX(1)}
.pl-wrap.show .pl-list:before{clip-path:inset(0)}
.pl-wrap.show .pl-list li{animation:plIn .8s cubic-bezier(.2,.9,.3,1.2) forwards;animation-delay:calc(var(--i)*.28s + .5s)}
@keyframes plIn{to{opacity:1;transform:none}}
@keyframes plSpin{to{transform:rotate(360deg)}}
@keyframes plRing{0%{transform:scale(.95);opacity:.7}100%{transform:scale(1.5);opacity:0}}
@media(max-width:900px){.pl-wrap{grid-template-columns:1fr;--o:34px}.pl-hub{margin:0 auto;width:min(100%,340px)}.pl-list:before{left:30px}}
@media(max-width:520px){.pl-wrap{--o:0px}.pl-list:before{display:none}.pl-list li{grid-template-columns:54px 1fr;height:auto;padding:12px 0}.pl-ic{display:none}.pl-n{width:54px;height:54px}}
@media(prefers-reduced-motion:reduce){.pl-spin,.pl-n:after{animation:none!important}.pl-list li{opacity:1;transform:none;animation:none!important}.pl-list:before{clip-path:none;transition:none}.pl-bar{transform:none}}