/* =========================================================
   PingX MASTER CREATIVE UI V8 — all pages + premium navigation
   ========================================================= */
:root{--px8:#16a9e8;--px8b:#5b5ce2;--px8nav:#071a34;--px8ink:#102b49;--px8muted:#6c7f93;--px8line:rgba(20,70,110,.12);--px8shadow:0 18px 55px rgba(5,28,55,.12)}
html{scroll-behavior:smooth}body{overflow-x:hidden}.header{backdrop-filter:saturate(150%) blur(16px);-webkit-backdrop-filter:saturate(150%) blur(16px);border-bottom:1px solid rgba(255,255,255,.12);transition:.35s ease!important}.header.scrolled,.scrolled .header{background:rgba(7,26,52,.92)!important;box-shadow:0 10px 35px rgba(0,0,0,.12)}
.header .container-xl{min-height:66px}.header .pingx-header-logo{width:190px;height:62px;filter:drop-shadow(0 7px 18px rgba(0,0,0,.12));transition:.3s ease}.header .logo:hover .pingx-header-logo{transform:translateY(-1px) scale(1.015)}
/* Desktop nav */
@media(min-width:1200px){.pingx-nav>ul{gap:4px!important}.pingx-nav>ul>li>a{position:relative!important;padding:12px 14px!important;border-radius:12px!important;font-weight:650!important;letter-spacing:.1px}.pingx-nav>ul>li>a:after{content:"";position:absolute;left:14px;right:14px;bottom:5px;height:2px;border-radius:5px;background:linear-gradient(90deg,var(--px8),#68dfff);transform:scaleX(0);transform-origin:center;transition:.25s ease}.pingx-nav>ul>li:hover>a:after,.pingx-nav>ul>li>a.active:after{transform:scaleX(1)}.pingx-nav>ul>li:hover>a{background:rgba(255,255,255,.08)}.pingx-menu-drop>ul.pingx-mega-menu{width:580px!important;display:grid!important;grid-template-columns:1fr 1fr;gap:5px!important;padding:14px!important;left:50%!important;transform:translateX(-50%);top:calc(100% + 14px)!important;border:1px solid rgba(23,151,212,.18)!important;border-radius:20px!important;background:rgba(255,255,255,.97)!important;backdrop-filter:blur(18px);box-shadow:0 30px 80px rgba(5,35,65,.2)!important}.pingx-menu-drop:hover>ul.pingx-mega-menu{top:calc(100% + 5px)!important}.pingx-mega-menu li{min-width:0!important}.pingx-mega-menu li a{display:flex!important;align-items:center!important;gap:12px!important;padding:13px!important;border-radius:13px!important;color:var(--px8ink)!important;white-space:normal!important}.pingx-mega-menu li a:hover{background:linear-gradient(135deg,#f0fbff,#f7f7ff)!important;transform:translateY(-2px)}.px-menu-icon{flex:0 0 40px;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,#e8f9ff,#eeeaff);color:var(--px8)!important;font-size:18px}.pingx-mega-menu strong{display:block;font-size:13px;line-height:1.2}.pingx-mega-menu small{display:block;font-size:10px;color:#7a8da0;margin-top:4px}.pingx-nav>ul>li:nth-last-child(1)>a{margin-left:7px!important;padding:11px 17px!important;background:linear-gradient(135deg,#13a9e8,#5c5bdd)!important;color:#fff!important;border-radius:13px!important;box-shadow:0 10px 25px rgba(31,152,220,.22)}.pingx-nav>ul>li:nth-last-child(1)>a:after{display:none}.pingx-nav>ul>li:nth-last-child(1)>a:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(31,152,220,.32)}.pingx-mobile-menu-footer{display:none}}
/* Mobile / tablet navigation */
@media(max-width:1199px){.header{padding:8px 0!important;background:rgba(7,26,52,.94)!important}.header .container-xl{min-height:60px}.header .pingx-header-logo{width:164px;height:56px}.mobile-nav-toggle{display:grid!important;place-items:center;width:46px;height:46px;border-radius:14px!important;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff!important;font-size:25px!important;margin:0!important;box-shadow:0 8px 24px rgba(0,0,0,.15);position:relative;z-index:10001}.navmenu{position:static!important}.navmenu>ul{position:fixed!important;inset:0!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;padding:96px 22px 24px!important;margin:0!important;border-radius:0!important;background:linear-gradient(180deg,#071a34 0%,#0a2a4d 58%,#071a34 100%)!important;box-shadow:none!important;opacity:0;visibility:hidden;transform:translateY(-10px);transition:.28s ease!important;z-index:9999!important;overflow:auto!important}.mobile-nav-active .navmenu>ul{opacity:1;visibility:visible;transform:none}.navmenu>ul>li{border-bottom:1px solid rgba(255,255,255,.09)}.navmenu>ul>li>a{padding:16px 5px!important;color:#fff!important;font-size:17px!important;font-weight:700!important}.navmenu>ul>li>a:hover{color:#63ddff!important}.navmenu>ul>li>a i{color:#77dfff!important}.navmenu>ul>li>a:after{display:none}.navmenu .pingx-mega-menu{position:static!important;display:none!important;width:auto!important;transform:none!important;padding:5px 0 10px 10px!important;background:transparent!important;box-shadow:none!important;border:0!important}.navmenu .pingx-menu-drop.active>.pingx-mega-menu,.navmenu .pingx-menu-drop>.pingx-mega-menu.dropdown-active{display:block!important}.pingx-mega-menu li a{display:flex!important;gap:10px!important;padding:10px 6px!important;color:#dceeff!important}.px-menu-icon{width:34px;height:34px;flex-basis:34px;border-radius:10px;background:rgba(67,211,255,.1);color:#63ddff!important}.pingx-mega-menu strong{font-size:12px}.pingx-mega-menu small{font-size:9px;color:#9eb6cc}.pingx-mobile-menu-footer{display:block!important;margin-top:auto;padding:18px 0 0}.pingx-menu-cta{display:flex;align-items:center;gap:11px;padding:14px 15px;border-radius:15px;background:linear-gradient(135deg,#15aae9,#5e5be2);color:#fff!important;box-shadow:0 15px 40px rgba(0,0,0,.25);text-decoration:none}.pingx-menu-cta>i:first-child{font-size:20px}.pingx-menu-cta span{flex:1}.pingx-menu-cta strong{display:block;font-size:13px}.pingx-menu-cta small{display:block;font-size:10px;color:#dff7ff;margin-top:3px}.pingx-menu-cta>i:last-child{font-size:16px}.mobile-nav-active:after{content:"";position:fixed;inset:0;background:radial-gradient(circle at 85% 10%,rgba(57,214,255,.16),transparent 25%);z-index:9998;pointer-events:none}.mobile-nav-active .mobile-nav-toggle{background:#fff;color:#071a34!important}}
/* universal page polish */
.pingx-inner-hero{position:relative!important;overflow:hidden!important;background:radial-gradient(circle at 85% 20%,rgba(45,205,255,.14),transparent 24%),radial-gradient(circle at 10% 80%,rgba(91,92,226,.09),transparent 25%),linear-gradient(135deg,#071a34 0%,#0b2f55 60%,#071a34 100%)!important}.pingx-inner-hero:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(90,214,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(90,214,255,.05) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(to bottom,#000,transparent 90%);pointer-events:none}.pingx-inner-hero .container{position:relative;z-index:2}.pingx-inner-hero h1{letter-spacing:-1.8px;text-shadow:0 8px 30px rgba(0,0,0,.2)}.pingx-inner-hero .hero-line{height:3px!important;width:75px!important;background:linear-gradient(90deg,#3ddcff,#6c5ee6)!important;border-radius:9px!important;box-shadow:0 0 20px rgba(53,211,255,.4)}
.section-title h2{letter-spacing:-.7px}.section-title h2:after{content:"";display:block;width:52px;height:3px;margin:13px auto 0;border-radius:5px;background:linear-gradient(90deg,var(--px8),var(--px8b))}.services .pingx-service-card,.pingx-project-card,.technology-plan,.pingx-contact-info,.pingx-contact-form{transition:.3s ease!important}.services .pingx-service-card:hover,.pingx-project-card:hover,.technology-plan:hover{transform:translateY(-8px);box-shadow:var(--px8shadow)!important;border-color:rgba(22,169,232,.3)!important}.pingx-project-card{overflow:hidden!important}.pingx-project-image img{transition:.55s ease!important}.pingx-project-card:hover .pingx-project-image img{transform:scale(1.055)}.pingx-project-link{position:relative}.pingx-project-link i{transition:.25s ease}.pingx-project-link:hover i{transform:translateX(5px)}
/* universal reveal accents */
[data-aos]{will-change:transform,opacity}.technology-plan,.pingx-service-card,.pingx-project-card{position:relative;overflow:hidden}.technology-plan:before,.pingx-service-card:before,.pingx-project-card:before{content:"";position:absolute;left:0;top:0;width:0;height:3px;background:linear-gradient(90deg,var(--px8),var(--px8b));transition:.35s ease;z-index:3}.technology-plan:hover:before,.pingx-service-card:hover:before,.pingx-project-card:hover:before{width:100%}
/* floating quick actions */
.px-quick{position:fixed;right:20px;bottom:20px;z-index:997;display:flex;flex-direction:column;gap:9px}.px-quick a{width:45px;height:45px;display:grid;place-items:center;border-radius:14px;background:#fff;color:#0a3155;text-decoration:none;box-shadow:0 12px 35px rgba(7,35,62,.16);border:1px solid rgba(20,70,110,.1);transition:.25s ease}.px-quick a:hover{transform:translateY(-4px);color:#12a8e8;box-shadow:0 17px 40px rgba(7,35,62,.2)}.px-quick .px-top{opacity:0;pointer-events:none;transform:translateY(8px)}.px-quick .px-top.show{opacity:1;pointer-events:auto;transform:none}.px-quick .px-chat{background:linear-gradient(135deg,#14aae9,#5e5be2);color:#fff;border:0}
@media(max-width:575px){.px-quick{right:12px;bottom:14px}.px-quick a{width:42px;height:42px;border-radius:12px}.pingx-inner-hero{padding-top:118px!important;padding-bottom:58px!important}.section-title h2{font-size:27px}.pingx-service-card,.pingx-project-card,.technology-plan{border-radius:18px!important}.pingx-project-content{padding:20px!important}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.header,.pingx-mega-menu,.navmenu>ul,.technology-plan,.pingx-project-card,.pingx-service-card{transition:none!important}.pingx-project-image img{transition:none!important}}


/* =========================================================
   PingX V11 — crisp scroll header + creative motion layer
   ========================================================= */
body.scrolled .header{
  --nav-color:#12304f!important;
  --heading-color:#12304f!important;
  background:rgba(255,255,255,.98)!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  border-bottom:1px solid rgba(22,91,139,.10)!important;
  box-shadow:0 10px 34px rgba(8,36,66,.12)!important;
}
body.scrolled .header .pingx-header-logo{
  background:transparent!important;
  padding:0!important;
  border-radius:0!important;
  filter:drop-shadow(0 5px 14px rgba(0,60,110,.14))!important;
}
body.scrolled .header .logo{padding:0!important}
body.scrolled .pingx-nav>ul>li>a{color:#12304f!important}
body.scrolled .pingx-nav>ul>li>a:hover{color:#087fb9!important;background:rgba(22,169,232,.08)!important}
body.scrolled .pingx-nav>ul>li>a.active{color:#087fb9!important}
body.scrolled .pingx-nav>ul>li:nth-last-child(1)>a{color:#fff!important}
body.scrolled .pingx-nav{filter:none!important;opacity:1!important}
body.scrolled .pingx-nav>ul{filter:none!important;opacity:1!important}
body.scrolled .pingx-nav>ul>li{filter:none!important}

/* Keep desktop navigation sharp at every scroll position. */
@media(min-width:1200px){
  .header,.header .container-xl,.header .navmenu,.header .navmenu>ul,.header .navmenu>ul>li,.header .navmenu>ul>li>a{
    filter:none!important;opacity:1;
  }
}

/* Subtle animated visual language across content sections. */
.main>.section:not(.dark-background){
  position:relative;
  background-image:radial-gradient(circle at 92% 14%,rgba(33,196,246,.045),transparent 24%),radial-gradient(circle at 7% 86%,rgba(91,92,226,.035),transparent 25%);
}
.main>.section:not(.dark-background)::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.28;
  background-image:linear-gradient(rgba(20,120,180,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(20,120,180,.018) 1px,transparent 1px);
  background-size:44px 44px;mask-image:linear-gradient(to bottom,transparent,#000 16%,#000 84%,transparent);
}
.main>.section>*{position:relative;z-index:1}
.section-title h2:after{animation:pxTitlePulse 2.8s ease-in-out infinite}
@keyframes pxTitlePulse{0%,100%{width:48px;box-shadow:0 0 0 rgba(22,169,232,0)}50%{width:78px;box-shadow:0 0 18px rgba(22,169,232,.25)}}

/* Creative cards: soft scanning highlight without changing layout. */
.pingx-service-card::after,.pingx-project-card::after,.technology-plan::after,.pingx-contact-info::after,.pingx-contact-form::after{
  content:"";position:absolute;top:-40%;left:-20%;width:42%;height:180%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.20),transparent);
  transform:translateX(-180%) rotate(12deg);pointer-events:none;transition:transform .9s ease;
}
.pingx-service-card:hover::after,.pingx-project-card:hover::after,.technology-plan:hover::after,.pingx-contact-info:hover::after,.pingx-contact-form:hover::after{transform:translateX(420%) rotate(12deg)}

/* Floating expert message button. */
.px-quick .px-chat{position:relative;overflow:visible}
.px-quick .px-chat::before{content:"";position:absolute;inset:-5px;border-radius:18px;border:1px solid rgba(22,169,232,.30);animation:pxChatPulse 2.2s ease-out infinite}
@keyframes pxChatPulse{0%{transform:scale(.92);opacity:.75}70%,100%{transform:scale(1.35);opacity:0}}

/* =========================================================
   Animated client / trusted-network visuals
   ========================================================= */
.pingx-clients{overflow:hidden}
.pingx-clients .swiper-wrapper{align-items:stretch}
.pingx-clients .client-logo-card{
  min-height:132px!important;position:relative!important;overflow:hidden!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  border:1px solid rgba(22,169,232,.13)!important;
  background:linear-gradient(145deg,#fff,#f4fbff)!important;
}
.px-client-visual{position:relative;width:100%;height:100%;min-height:132px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;overflow:hidden}
.px-client-visual::before{content:"";position:absolute;width:86px;height:86px;border:1px solid rgba(22,169,232,.20);border-radius:50%;animation:pxClientOrbit 7s linear infinite}
.px-client-visual::after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:#22bff1;box-shadow:0 0 0 5px rgba(34,191,241,.10),0 0 22px rgba(34,191,241,.8);transform-origin:50px 50px;animation:pxClientDot 3.4s linear infinite}
.px-client-core{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;background:linear-gradient(135deg,#e8faff,#eceaff);border:1px solid rgba(22,169,232,.20);color:#0d78aa;font-size:17px;font-weight:900;box-shadow:0 10px 28px rgba(18,102,151,.10);animation:pxClientFloat 3s ease-in-out infinite}
.px-client-name{position:relative;z-index:2;max-width:86%;font-size:11px!important;line-height:1.25!important;font-weight:800!important;color:#23486b!important;letter-spacing:.1px}
.px-client-meta{position:relative;z-index:2;font-size:8px;text-transform:uppercase;letter-spacing:1.2px;color:#7a95aa;font-weight:800}
.px-client-scan{position:absolute;left:12%;right:12%;top:18%;height:1px;background:linear-gradient(90deg,transparent,#48cfff,transparent);box-shadow:0 0 12px rgba(72,207,255,.35);animation:pxClientScan 2.8s ease-in-out infinite}
@keyframes pxClientOrbit{to{transform:rotate(360deg)}}
@keyframes pxClientDot{from{transform:rotate(0deg) translateX(42px) rotate(0deg)}to{transform:rotate(360deg) translateX(42px) rotate(-360deg)}}
@keyframes pxClientFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes pxClientScan{0%,100%{transform:translateY(0);opacity:.15}50%{transform:translateY(68px);opacity:.85}}
.pingx-clients .client-logo-card:hover{transform:translateY(-7px)!important;border-color:rgba(22,169,232,.32)!important;box-shadow:0 18px 42px rgba(8,67,110,.13)!important}
.pingx-clients .swiper-slide:nth-child(2n) .px-client-core{animation-delay:-.7s}
.pingx-clients .swiper-slide:nth-child(3n) .px-client-core{animation-delay:-1.3s}
.pingx-clients .swiper-slide:nth-child(4n) .px-client-core{animation-delay:-1.9s}

@media(max-width:575px){
  .pingx-clients .client-logo-card,.px-client-visual{min-height:118px!important}
  .px-client-core{width:40px;height:40px;border-radius:13px;font-size:15px}
  .px-client-name{font-size:10px!important}
}
@media(prefers-reduced-motion:reduce){
  .section-title h2:after,.px-client-visual::before,.px-client-visual::after,.px-client-core,.px-client-scan,.px-quick .px-chat::before{animation:none!important}
}


/* Projects: cinematic hero */
.px-project-hero-wrap{position:relative;margin-top:28px;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(260px,.75fr);gap:18px;align-items:stretch}
.px-project-hero-card{position:relative;overflow:hidden;padding:26px;border:1px solid rgba(93,220,255,.18);border-radius:24px;background:linear-gradient(135deg,rgba(255,255,255,.10),rgba(255,255,255,.035));box-shadow:0 22px 70px rgba(0,0,0,.16);backdrop-filter:blur(14px)}
.px-project-hero-card:before{content:"";position:absolute;width:260px;height:260px;right:-100px;top:-120px;border-radius:50%;background:radial-gradient(circle,rgba(54,219,255,.25),transparent 70%);pointer-events:none}
.px-project-kicker{display:inline-flex;align-items:center;gap:8px;color:#7ce7ff;font-size:11px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase}
.px-project-kicker i{font-size:15px}
.px-project-hero-card h2{margin:9px 0 8px;color:#fff;font-size:clamp(25px,3vw,40px);line-height:1.08;letter-spacing:-1.2px}
.px-project-hero-card p{max-width:720px;margin:0;color:#c8d9e8;line-height:1.7;font-size:14px}
.px-project-hero-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:17px}.px-project-hero-pills span{padding:7px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.055);color:#e8f8ff;font-size:11px;font-weight:700}
.px-project-metrics{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.px-project-metric{display:flex;flex-direction:column;justify-content:center;min-height:112px;padding:18px;border-radius:20px;background:#fff;border:1px solid #e7eef5;box-shadow:0 12px 35px rgba(8,39,69,.08);position:relative;overflow:hidden}.px-project-metric:after{content:"";position:absolute;right:-20px;bottom:-30px;width:90px;height:90px;border-radius:50%;background:rgba(22,169,232,.07)}.px-project-metric strong{font-size:25px;color:#0e3157;letter-spacing:-.5px}.px-project-metric span{font-size:11px;color:#718399;font-weight:700;text-transform:uppercase;letter-spacing:.6px;margin-top:4px}
.px-project-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:10px 0 28px}.px-project-filters{display:flex;flex-wrap:wrap;gap:8px}.px-project-filter{border:1px solid #dce8f1;background:#fff;color:#5f7184;padding:9px 14px;border-radius:999px;font-size:12px;font-weight:800;cursor:pointer;transition:.25s}.px-project-filter:hover,.px-project-filter.active{border-color:#28afe8;background:linear-gradient(135deg,#eafaff,#f0efff);color:#0e5b8c;box-shadow:0 8px 24px rgba(20,145,205,.10)}.px-project-toolbar-note{font-size:12px;color:#7a8998}.pingx-project-card{height:100%;display:flex;flex-direction:column}.pingx-project-card .pingx-project-content{display:flex;flex-direction:column;flex:1}.pingx-project-link{margin-top:auto;padding-top:16px}.px-project-card-top{position:absolute;left:14px;right:14px;top:14px;z-index:5;display:flex;justify-content:space-between;align-items:center;pointer-events:none}.px-project-live{display:inline-flex;align-items:center;gap:6px;padding:6px 9px;border-radius:999px;background:rgba(7,26,52,.76);color:#dffaff;font-size:10px;font-weight:800;backdrop-filter:blur(8px)}.px-project-live:before{content:"";width:6px;height:6px;border-radius:50%;background:#43e1a1;box-shadow:0 0 0 4px rgba(67,225,161,.14)}.px-project-number{width:31px;height:31px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.92);color:#174b82;font-size:11px;font-weight:900;box-shadow:0 7px 18px rgba(0,0,0,.12)}.px-project-card-hidden{display:none!important}
@media(max-width:991px){.px-project-hero-wrap{grid-template-columns:1fr}.px-project-metrics{grid-template-columns:repeat(4,1fr)}}
@media(max-width:575px){body.scrolled .header .pingx-header-logo{padding:5px 8px;border-radius:11px}.px-project-hero-card{padding:21px;border-radius:19px}.px-project-metrics{grid-template-columns:repeat(2,1fr)}.px-project-metric{min-height:92px;padding:14px}.px-project-metric strong{font-size:21px}.px-project-toolbar{margin-bottom:20px}.px-project-filters{gap:6px}.px-project-filter{padding:8px 11px;font-size:11px}}


/* =========================================================
   PingX V13 polish: crisp header, company-first home, motion services
   ========================================================= */
body.scrolled .header,
.header.scrolled{
  background:#ffffff!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  box-shadow:0 12px 32px rgba(11,45,79,.10)!important;
  border-bottom:1px solid rgba(24,95,145,.10)!important;
}
body.scrolled .header .pingx-nav>ul>li>a,
.header.scrolled .pingx-nav>ul>li>a{color:#173451!important}
body.scrolled .header .pingx-nav>ul>li>a:hover,
body.scrolled .header .pingx-nav>ul>li>a.active{color:#0f92d1!important;background:#eef8fd!important}
body.scrolled .header .pingx-nav>ul>li:nth-last-child(1)>a{color:#fff!important}
body.scrolled .header .pingx-header-logo{filter:none!important}

/* Restore the earlier stronger One Ecosystem visual */
.pingx-infra-visual{position:relative;overflow:hidden;background:linear-gradient(180deg,#f7fbff 0%,#fff 100%)}
.pingx-infra-visual:before{content:"";position:absolute;width:520px;height:520px;right:-160px;top:-160px;border-radius:50%;background:radial-gradient(circle,rgba(42,201,255,.16),transparent 68%);pointer-events:none;animation:pxEcoGlow 6s ease-in-out infinite}
.pingx-network-board{position:relative;height:460px;overflow:hidden;border-radius:30px;background:radial-gradient(circle at 50% 50%,rgba(31,168,232,.17),transparent 24%),linear-gradient(135deg,#071a36,#0b2c55 60%,#071a36)!important;box-shadow:0 30px 70px rgba(4,22,49,.22);border:1px solid rgba(104,210,255,.18)}
.pingx-network-board .px-grid-lines{opacity:1}
.pingx-network-board:after{content:"";position:absolute;inset:-30%;background:conic-gradient(from 0deg,transparent,rgba(56,218,255,.08),transparent 25%,rgba(116,94,255,.08),transparent 50%);animation:pxEcoSpin 12s linear infinite;pointer-events:none}
.px-node{z-index:4!important}
.px-line{animation-duration:2.8s!important}
.px-pulse{animation-duration:1.9s!important}
@keyframes pxEcoSpin{to{transform:rotate(360deg)}}
@keyframes pxEcoGlow{0%,100%{transform:scale(1);opacity:.75}50%{transform:scale(1.12);opacity:1}}

/* Home company section */
.px-company-home-card{padding:30px;border:1px solid #dceaf3;border-radius:26px;background:linear-gradient(145deg,#fff,#f6fbff);box-shadow:0 20px 55px rgba(17,70,105,.08);position:relative;overflow:hidden}
.px-company-home-card:after{content:"";position:absolute;width:170px;height:170px;right:-70px;top:-70px;border-radius:50%;background:radial-gradient(circle,rgba(39,196,245,.18),transparent 68%)}
.px-company-home-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:#eaf8ff;color:#087cb6;font-size:11px;font-weight:800;letter-spacing:.5px}
.px-company-home-card h3{margin:17px 0 10px;font-size:28px;color:#163d68;line-height:1.18}.px-company-home-card p{color:#657487;line-height:1.8;margin-bottom:18px}.px-company-home-points{display:grid;grid-template-columns:1fr 1fr;gap:10px}.px-company-home-points span{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:750;color:#34536e}.px-company-home-points i{color:#1bb2ed}
.px-company-home-visual{min-height:350px;border-radius:28px;position:relative;overflow:hidden;background:radial-gradient(circle at 50% 50%,rgba(44,208,255,.17),transparent 24%),linear-gradient(145deg,#071a36,#0b2e58);box-shadow:0 28px 70px rgba(5,34,65,.18);display:grid;place-items:center}
.px-company-core{position:relative;z-index:4;width:165px;height:145px;border-radius:28px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(145deg,rgba(26,184,238,.28),rgba(94,85,224,.25));border:1px solid rgba(123,227,255,.55);box-shadow:0 0 55px rgba(46,211,255,.20);color:#fff;text-align:center}.px-company-core i{font-size:32px;color:#65e4ff;margin-bottom:7px}.px-company-core strong{font-size:18px}.px-company-core small{font-size:10px;color:#c6e5f2;margin-top:4px}
.px-orbit{position:absolute;border:1px solid rgba(98,220,255,.24);border-radius:50%;animation:pxOrbitSpin 9s linear infinite}.px-orbit.o1{width:245px;height:245px}.px-orbit.o2{width:315px;height:315px;animation-direction:reverse;animation-duration:13s;border-color:rgba(135,117,255,.22)}.px-orbit-dot{position:absolute;width:9px;height:9px;border-radius:50%;background:#54e3ff;box-shadow:0 0 20px #54e3ff;animation:pxDotFloat 3s ease-in-out infinite}.px-orbit-dot.d1{top:21%;left:28%}.px-orbit-dot.d2{right:20%;top:38%;animation-delay:-1s}.px-orbit-dot.d3{bottom:18%;left:45%;animation-delay:-2s;background:#a18cff;box-shadow:0 0 20px #a18cff}@keyframes pxOrbitSpin{to{transform:rotate(360deg)}}@keyframes pxDotFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-7px) scale(1.25)}}

/* Service cards: animated category visuals */
.services .pingx-service-card{min-height:315px;background:linear-gradient(145deg,#fff,#f5fbff)!important;border:1px solid #dbeaf3!important;box-shadow:0 15px 40px rgba(17,68,102,.06)!important}
.services .pingx-service-card:after{content:"";position:absolute;width:130px;height:130px;right:-45px;top:-45px;border-radius:50%;background:radial-gradient(circle,rgba(40,196,245,.18),transparent 68%);animation:pxServiceGlow 4.5s ease-in-out infinite;pointer-events:none}
.services .pingx-service-card .service-icon-wrap{position:relative;z-index:2}.services .pingx-service-card .icon{position:relative;overflow:visible;transition:.35s ease}.services .pingx-service-card .icon:before{content:"";position:absolute;inset:-8px;border:1px solid rgba(41,190,241,.22);border-radius:18px;animation:pxServiceOrbit 4s linear infinite}.services .pingx-service-card:hover .icon{transform:translateY(-4px) rotate(-2deg) scale(1.05)}
.services .pingx-service-card:nth-child(2) .icon:before{border-color:rgba(113,92,240,.25);animation-duration:5s}.services .pingx-service-card:nth-child(3) .icon:before{border-color:rgba(40,198,239,.25);animation-duration:4.5s}.services .pingx-service-card:nth-child(4) .icon:before{border-color:rgba(244,86,103,.25);animation-duration:5.5s}
@keyframes pxServiceOrbit{to{transform:rotate(360deg)}}@keyframes pxServiceGlow{0%,100%{transform:scale(.9);opacity:.6}50%{transform:scale(1.2);opacity:1}}

/* Clients: logo-like brand marks, connected motion */
.px-brand-mark{background:#fff!important;position:relative;overflow:hidden;font-family:Arial,sans-serif!important;letter-spacing:-.8px}.px-brand-mark:after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 35%,rgba(255,255,255,.75),transparent 65%);transform:translateX(-130%);animation:pxBrandShine 3.2s ease-in-out infinite}.px-brand-mark span{position:relative;z-index:2}.px-brand-sr .px-brand-mark{color:#1c6b4b;border-color:rgba(28,107,75,.2)}.px-brand-cs .px-brand-mark{color:#9b1d31}.px-brand-pw .px-brand-mark{color:#ff6a00}.px-brand-sx .px-brand-mark{color:#0a6fb8}.px-brand-mp .px-brand-mark{color:#1f6fba}.px-brand-lr .px-brand-mark{color:#b51e2e}.px-brand-bl .px-brand-mark{color:#ff4f18}.px-brand-kv .px-brand-mark{color:#145ca8}.px-brand-mc .px-brand-mark{color:#1b4e8c}@keyframes pxBrandShine{0%,55%{transform:translateX(-130%)}75%,100%{transform:translateX(130%)}}

/* CTA readability */
.px-cta-readable{background:linear-gradient(135deg,rgba(6,27,54,.94),rgba(13,63,112,.92))!important}.px-cta-readable h3,.px-cta-readable h2{color:#fff!important}.px-cta-readable p{color:#d9edf9!important}.px-cta-readable .cta-btn{background:#fff!important;color:#0c4b78!important;border-color:#fff!important;box-shadow:0 12px 30px rgba(0,0,0,.18)!important}.px-cta-readable .cta-btn:hover{background:#5fe3ff!important;color:#062d4b!important}

@media(max-width:767px){.px-company-home-points{grid-template-columns:1fr}.px-company-home-card{padding:23px}.px-company-home-visual{min-height:300px}.pingx-network-board{height:390px;border-radius:22px}.px-company-home-card h3{font-size:24px}}
@media(prefers-reduced-motion:reduce){.pingx-network-board:after,.px-orbit,.px-orbit-dot,.services .pingx-service-card:after,.services .pingx-service-card .icon:before,.px-brand-mark:after{animation:none!important}}


/* V14: experienced team / newly registered company highlight */
.px-experience-highlight{display:flex;align-items:center;gap:18px;margin:28px 0 10px;padding:20px 22px;border:1px solid rgba(24,95,145,.12);border-radius:18px;background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(245,249,253,.96));box-shadow:0 14px 35px rgba(12,54,91,.08);position:relative;overflow:hidden}
.px-experience-highlight:before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent,rgba(225,42,42,.07),transparent);transform:translateX(-100%);animation:pxExpShine 5s ease-in-out infinite}
.px-exp-icon{width:52px;height:52px;min-width:52px;border-radius:15px;display:grid;place-items:center;background:linear-gradient(135deg,#e22b32,#173f68);color:#fff;font-size:23px;box-shadow:0 8px 22px rgba(31,67,105,.18);position:relative;z-index:1}
.px-experience-highlight strong,.px-experience-highlight p{position:relative;z-index:1}
.px-experience-highlight strong{display:block;font-size:17px;color:#163957;margin-bottom:5px}
.px-experience-highlight p{margin:0;color:#5c6d7d;line-height:1.65;font-size:14px}
@keyframes pxExpShine{0%,65%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
@media(max-width:575px){.px-experience-highlight{align-items:flex-start;padding:17px}.px-exp-icon{width:46px;height:46px;min-width:46px;font-size:20px}}

/* =========================================================
   V15 SIMPLE LIGHT HERO + CSS NETWORK VISUAL
   ========================================================= */
.px-light-hero{position:relative!important;min-height:555px;padding:92px 0 58px!important;overflow:hidden!important;background:linear-gradient(180deg,#ffffff 0%,#f7fbff 72%,#eef7ff 100%)!important;color:#173451!important}
.px-light-hero:before{content:"";position:absolute;width:520px;height:520px;right:-180px;top:-170px;border-radius:50%;background:radial-gradient(circle,rgba(33,142,232,.12),transparent 68%);pointer-events:none}
.px-light-hero:after{content:"";position:absolute;left:-10%;right:-10%;bottom:-1px;height:130px;background:linear-gradient(180deg,transparent,rgba(28,130,224,.035));pointer-events:none}
.px-hero-simple-grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:42px;min-height:455px}
.px-hero-copy{max-width:690px}
.px-hero-copy h1{margin:18px 0 15px;max-width:690px;letter-spacing:-1.7px;line-height:1.08;color:#173451;font-size:clamp(42px,4.4vw,64px)}
.px-hero-copy h1 strong{color:#1677e8}
.px-hero-copy p{max-width:650px;font-size:17px;line-height:1.75;color:#61748a;margin-bottom:25px}
.px-hero-badge{display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(23,119,232,.18);padding:8px 13px;border-radius:30px;color:#275fa4;background:rgba(255,255,255,.88);font-size:11px;letter-spacing:1.1px;font-weight:700;box-shadow:0 8px 25px rgba(35,119,205,.06)}
.px-hero-badge i{font-size:7px;color:#1677e8}
.px-hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.px-hero-secondary{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border:1px solid rgba(23,119,232,.35);border-radius:30px;color:#173451;text-decoration:none;font-weight:600;background:#fff;transition:.3s;box-shadow:0 8px 22px rgba(35,119,205,.07)}
.px-hero-secondary:hover{background:#1677e8;color:#fff;border-color:#1677e8;transform:translateY(-2px)}

/* simple animated infrastructure visual — no hero image */
.px-hero-simple-visual{position:relative;width:min(100%,560px);height:440px;margin:auto;border-radius:34px;background:radial-gradient(circle at 50% 48%,rgba(35,143,232,.13),transparent 32%),linear-gradient(145deg,rgba(255,255,255,.94),rgba(239,248,255,.78));border:1px solid rgba(28,125,214,.12);box-shadow:0 24px 60px rgba(33,105,165,.10);overflow:hidden}
.px-network-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(35,126,210,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(35,126,210,.055) 1px,transparent 1px);background-size:30px 30px;mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent)}
.px-network-orbit{position:absolute;left:50%;top:50%;border:1px solid rgba(22,133,232,.20);border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 35px rgba(23,128,225,.07);animation:pxNetworkSpin 13s linear infinite}
.px-network-orbit-a{width:275px;height:275px}
.px-network-orbit-b{width:385px;height:145px;transform:translate(-50%,-50%) rotate(28deg);border-color:rgba(19,190,215,.20);animation-duration:10s}
.px-network-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:128px;height:128px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;color:#fff;background:linear-gradient(145deg,#126de5,#13bdd6);box-shadow:0 0 0 12px rgba(25,124,226,.07),0 0 45px rgba(25,124,226,.24);animation:pxCorePulse 3s ease-in-out infinite}
.px-network-core i{font-size:31px}.px-network-core span{font-size:12px;font-weight:800;line-height:1.15}.px-network-core small{font-size:9px;font-weight:600;opacity:.85}
.px-network-node{position:absolute;display:flex;align-items:center;gap:7px;padding:9px 13px;border-radius:14px;background:rgba(255,255,255,.92);border:1px solid rgba(26,123,215,.13);box-shadow:0 10px 28px rgba(40,105,160,.10);color:#21415f;font-size:11px;white-space:nowrap;animation:pxNodeFloat 4s ease-in-out infinite}
.px-network-node i{font-size:17px;color:#1677e8}.px-network-node b{font-weight:750}
.px-node-1{top:42px;left:50%;transform:translateX(-50%);animation-delay:-.4s}.px-node-2{left:24px;top:145px;animation-delay:-1.1s}.px-node-3{left:54px;bottom:65px;animation-delay:-1.8s}.px-node-4{right:25px;top:132px;animation-delay:-2.5s}.px-node-5{right:48px;bottom:62px;animation-delay:-3.1s}
.px-data-line{position:absolute;height:1px;background:linear-gradient(90deg,transparent,#1aaedc,transparent);transform-origin:left center;opacity:.7;animation:pxLinePulse 2.8s ease-in-out infinite}
.px-line-1{width:150px;left:110px;top:185px;transform:rotate(-20deg)}.px-line-2{width:155px;right:105px;top:190px;transform:rotate(18deg);animation-delay:-1s}.px-line-3{width:145px;left:118px;bottom:130px;transform:rotate(18deg);animation-delay:-1.8s}
.px-data-dot{position:absolute;width:7px;height:7px;border-radius:50%;background:#17bfe0;box-shadow:0 0 14px rgba(23,191,224,.8);animation:pxDataMove 3.5s ease-in-out infinite}.px-data-dot-1{left:180px;top:170px}.px-data-dot-2{right:170px;top:175px;animation-delay:-1.2s}.px-data-dot-3{left:205px;bottom:116px;animation-delay:-2.2s}
@keyframes pxNetworkSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes pxCorePulse{0%,100%{transform:translate(-50%,-50%) scale(.96);box-shadow:0 0 0 12px rgba(25,124,226,.07),0 0 35px rgba(25,124,226,.20)}50%{transform:translate(-50%,-50%) scale(1.04);box-shadow:0 0 0 17px rgba(25,124,226,.06),0 0 55px rgba(25,124,226,.30)}}
@keyframes pxNodeFloat{0%,100%{translate:0 0}50%{translate:0 -5px}}
@keyframes pxLinePulse{0%,100%{opacity:.3}50%{opacity:1}}
@keyframes pxDataMove{0%,100%{transform:scale(.7);opacity:.4}50%{transform:scale(1.5);opacity:1}}

/* animated visual treatment for BUILT FOR PERFORMANCE */
.px-performance-section{position:relative;overflow:hidden;background:linear-gradient(180deg,#fff 0%,#f5faff 100%)}
.px-performance-section:before{content:"";position:absolute;width:560px;height:560px;right:-180px;top:30px;border:1px solid rgba(31,139,230,.12);border-radius:50%;box-shadow:0 0 0 35px rgba(31,139,230,.025),0 0 0 80px rgba(31,139,230,.018);animation:pxPerfOrbit 14s linear infinite;pointer-events:none}
.px-performance-section:after{content:"";position:absolute;left:-10%;right:-10%;top:54%;height:1px;background:linear-gradient(90deg,transparent,rgba(25,137,226,.20),transparent);animation:pxPerfScan 5s ease-in-out infinite;pointer-events:none}
.px-performance-section .section-title{position:relative;z-index:2}.px-performance-section .section-title:after{content:"";display:block;width:110px;height:4px;margin:18px auto 0;border-radius:10px;background:linear-gradient(90deg,#1e66e8,#13c9dc,#7b61ff);box-shadow:0 0 18px rgba(30,102,232,.22);animation:pxPerfBar 3s ease-in-out infinite}
.px-performance-section .pingx-capability-card{position:relative;overflow:hidden;z-index:1}.px-performance-section .pingx-capability-card:before{content:"";position:absolute;inset:-80px;background:conic-gradient(from 0deg,transparent 0 72%,rgba(30,143,232,.10) 78%,transparent 86%);animation:pxCardSpin 7s linear infinite;pointer-events:none}.px-performance-section .pingx-capability-card:after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:#18bce5;box-shadow:0 0 16px #18bce5;top:18px;right:20px;animation:pxPulseDot 2.2s ease-in-out infinite}
@keyframes pxPerfOrbit{to{transform:rotate(360deg)}}@keyframes pxPerfScan{0%,100%{opacity:.2;transform:translateY(-35px)}50%{opacity:1;transform:translateY(35px)}}@keyframes pxPerfBar{0%,100%{width:80px;opacity:.65}50%{width:160px;opacity:1}}@keyframes pxCardSpin{to{transform:rotate(360deg)}}@keyframes pxPulseDot{0%,100%{transform:scale(.75);opacity:.55}50%{transform:scale(1.35);opacity:1}}

@media(max-width:991px){.px-light-hero{padding:110px 0 55px!important}.px-hero-simple-grid{grid-template-columns:1fr;gap:25px;min-height:auto}.px-hero-copy{max-width:760px}.px-hero-simple-visual{height:390px;width:min(100%,620px)}}
@media(max-width:575px){.px-light-hero{padding:92px 0 45px!important}.px-hero-copy h1{font-size:38px;letter-spacing:-1px}.px-hero-copy p{font-size:15px;line-height:1.7}.px-hero-simple-visual{height:350px;border-radius:25px}.px-network-orbit-a{width:215px;height:215px}.px-network-orbit-b{width:300px;height:115px}.px-network-core{width:98px;height:98px}.px-network-core i{font-size:25px}.px-network-node{padding:7px 9px;font-size:9px;border-radius:11px}.px-network-node i{font-size:14px}.px-node-1{top:26px}.px-node-2{left:10px;top:105px}.px-node-3{left:16px;bottom:42px}.px-node-4{right:10px;top:100px}.px-node-5{right:16px;bottom:42px}.px-line-1,.px-line-2,.px-line-3{width:90px}}

@media(prefers-reduced-motion:reduce){.px-network-orbit,.px-network-core,.px-network-node,.px-data-line,.px-data-dot,.px-performance-section:before,.px-performance-section:after,.px-performance-section .section-title:after,.px-performance-section .pingx-capability-card:before,.px-performance-section .pingx-capability-card:after{animation:none!important}.px-mobile-orbit *{animation:none!important}}

/* V16 CLIENTS — continuous animated marquee, screenshot-inspired */
.px-marquee-heading{margin-bottom:22px!important;text-align:left!important}
.px-marquee-heading .clients-label{display:inline-flex!important;align-items:center;gap:7px!important;font-size:10px!important;letter-spacing:1.1px!important;color:#1785d0!important;font-weight:800!important}
.px-marquee-heading .clients-label:before{content:"";width:7px;height:7px;border-radius:50%;background:#18a9e8;box-shadow:0 0 0 5px rgba(24,169,232,.10),0 0 16px rgba(24,169,232,.32);animation:pxClientLabelPulse 2s ease-in-out infinite}
.px-marquee-heading h2{margin:5px 0 3px!important;font-size:30px!important;color:#173b5b!important}
.px-marquee-heading p{margin:0!important;max-width:720px!important;color:#70849a!important;font-size:13px!important}
.px-client-marquee{position:relative;overflow:hidden;width:100%;padding:8px 0 14px;mask-image:linear-gradient(90deg,transparent 0,#000 3%,#000 97%,transparent 100%);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 3%,#000 97%,transparent 100%)}
.px-client-marquee-track{display:flex;width:max-content;animation:pxClientsScroll 42s linear infinite;will-change:transform}
.px-client-marquee:hover .px-client-marquee-track{animation-play-state:paused}
.px-client-marquee-set{display:flex;align-items:stretch;gap:14px;padding-right:14px}
.px-client-marquee-card{position:relative;width:158px;min-width:158px;height:112px;padding:12px 9px 10px;border:1px solid rgba(31,116,174,.10);border-radius:17px;background:linear-gradient(145deg,#fff,#f8fbfe);box-shadow:0 10px 26px rgba(18,77,122,.08);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;overflow:hidden;transition:.35s ease}
.px-client-marquee-card:before{content:"";position:absolute;inset:-40% -20%;background:linear-gradient(110deg,transparent 38%,rgba(46,193,241,.11) 50%,transparent 62%);transform:translateX(-80%) rotate(8deg);animation:pxClientCardShine 5s ease-in-out infinite}
.px-client-marquee-card:after{content:"";position:absolute;left:12%;right:12%;bottom:0;height:2px;border-radius:4px;background:linear-gradient(90deg,transparent,#1aaee5,transparent);transform:scaleX(.35);opacity:.45;animation:pxClientLine 2.8s ease-in-out infinite}
.px-client-marquee-card:hover{transform:translateY(-6px);box-shadow:0 18px 38px rgba(20,91,142,.15);border-color:rgba(22,160,221,.25)}
.px-logo-circle,.px-logo-word,.px-logo-tree,.px-logo-square,.px-logo-sun,.px-logo-cross{position:relative;z-index:2;display:grid;place-items:center;height:49px;min-width:49px;border:1px solid rgba(25,109,175,.13);background:#fff;box-shadow:0 5px 16px rgba(24,88,133,.07);font-weight:900}
.px-logo-circle{width:49px;border-radius:50%;font-size:16px;letter-spacing:-.5px}
.px-logo-word{padding:0 8px;border-radius:10px;font-size:11px;letter-spacing:-.3px;white-space:nowrap}
.px-logo-tree,.px-logo-sun,.px-logo-cross{width:49px;border-radius:14px;font-size:22px}
.px-logo-square{width:49px;border-radius:9px;font-size:12px;background:#fff04b!important;color:#111!important;border-color:#f3df32}
.px-logo-cross{font-size:18px}
.px-client-marquee-card strong{position:relative;z-index:2;text-align:center;font-size:10px;line-height:1.2;color:#294b67;font-weight:800;max-width:145px}
.px-brand-mc{color:#1d5c98}.px-brand-mp{color:#246db1}.px-brand-lr{color:#9d202b}.px-brand-sr{color:#27714d}.px-brand-kv{color:#c27a1b}.px-brand-cs{color:#9d2842}.px-brand-pw{color:#111}.px-brand-sp{color:#4f86b6}.px-brand-ai{color:#1c74a8}.px-brand-chc{color:#1b9d67}.px-brand-sx{color:#0d70b2}
@keyframes pxClientsScroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes pxClientCardShine{0%,55%{transform:translateX(-90%) rotate(8deg)}78%,100%{transform:translateX(120%) rotate(8deg)}}
@keyframes pxClientLine{0%,100%{transform:scaleX(.25);opacity:.25}50%{transform:scaleX(1);opacity:.9}}
@keyframes pxClientLabelPulse{0%,100%{transform:scale(.8);opacity:.6}50%{transform:scale(1.15);opacity:1}}
@media(max-width:767px){.px-marquee-heading h2{font-size:26px!important}.px-marquee-heading p{font-size:12px!important}.px-client-marquee-card{width:145px;min-width:145px;height:104px}.px-client-marquee-set{gap:11px;padding-right:11px}.px-client-marquee-track{animation-duration:34s}.px-logo-circle,.px-logo-word,.px-logo-tree,.px-logo-square,.px-logo-sun,.px-logo-cross{height:43px;min-width:43px}.px-logo-circle,.px-logo-tree,.px-logo-sun,.px-logo-cross{width:43px}.px-client-marquee-card strong{font-size:9.5px}}
@media(prefers-reduced-motion:reduce){.px-client-marquee-track,.px-client-marquee-card:before,.px-client-marquee-card:after,.px-marquee-heading .clients-label:before{animation:none!important}}


/* V20 — simple One Ecosystem visual: clean and static */
.pingx-infra-visual .pingx-network-board{
  position:relative!important;
  height:460px!important;
  overflow:hidden!important;
  border-radius:30px!important;
  background:linear-gradient(135deg,#071a36 0%,#0b2c55 58%,#071a36 100%)!important;
  border:1px solid rgba(104,210,255,.18)!important;
  box-shadow:0 22px 50px rgba(4,24,52,.16)!important;
}
.pingx-infra-visual .pingx-network-board:before,
.pingx-infra-visual .pingx-network-board:after{display:none!important;animation:none!important}
.pingx-infra-visual .px-grid-lines{opacity:.16!important}
.pingx-infra-visual .px-node{
  z-index:4!important;
  background:#0a2b50!important;
  border:1px solid rgba(92,213,255,.22)!important;
  color:#eaf9ff!important;
  box-shadow:0 8px 20px rgba(0,0,0,.14)!important;
  backdrop-filter:none!important;
}
.pingx-infra-visual .px-node i{color:#39d5ff!important}
.pingx-infra-visual .px-node-center{
  background:#1768c7!important;
  border-color:rgba(111,229,255,.55)!important;
  box-shadow:0 10px 25px rgba(20,130,220,.25)!important;
  animation:none!important;
}
.pingx-infra-visual .px-node-center i{color:#fff!important}
.pingx-infra-visual .px-node-center strong,
.pingx-infra-visual .px-node-center small{color:#fff!important}
.pingx-infra-visual .px-line{
  z-index:2!important;
  background:rgba(54,220,255,.52)!important;
  box-shadow:none!important;
  height:2px!important;
  animation:none!important;
}
.pingx-infra-visual .px-pulse{
  z-index:5!important;
  width:7px!important;
  height:7px!important;
  background:#35dcff!important;
  box-shadow:none!important;
  animation:none!important;
}
@media(max-width:767px){.pingx-infra-visual .pingx-network-board{height:390px!important;border-radius:22px!important}}


/* V21 — clean fiber-optic visual: continuous flow, no blinking/pulsing */
.pingx-infra-visual .pingx-network-board{isolation:isolate}
.pingx-infra-visual .px-fiber,
.pingx-infra-visual .px-fiber-core{position:absolute;display:block;pointer-events:none;z-index:3}
.pingx-infra-visual .px-fiber{
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg,rgba(35,211,255,.08) 0%,rgba(35,211,255,.95) 28%,rgba(117,104,255,.9) 50%,rgba(35,211,255,.95) 72%,rgba(35,211,255,.08) 100%);
  background-size:220% 100%;
  box-shadow:0 0 8px rgba(34,203,255,.35),0 0 18px rgba(86,116,255,.16);
  animation:pxFiberFlow 3.8s linear infinite;
  transform-origin:left center;
}
.pingx-infra-visual .px-fiber-a{width:235px;left:118px;top:170px;transform:rotate(-18deg)}
.pingx-infra-visual .px-fiber-b{width:245px;left:122px;top:278px;transform:rotate(18deg);animation-delay:-1.2s}
.pingx-infra-visual .px-fiber-c{width:235px;left:365px;top:170px;transform:rotate(18deg);animation-delay:-2.1s}
.pingx-infra-visual .px-fiber-d{width:245px;left:360px;top:278px;transform:rotate(-18deg);animation-delay:-2.9s}
.pingx-infra-visual .px-fiber-core{
  width:170px;height:170px;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;
  border:1px solid rgba(50,215,255,.12);
  box-shadow:0 0 0 16px rgba(50,215,255,.025),0 0 38px rgba(50,160,255,.10);
  z-index:2;
}
.pingx-infra-visual .px-fiber-core:before,
.pingx-infra-visual .px-fiber-core:after{content:"";position:absolute;left:50%;top:50%;width:210px;height:1px;transform:translate(-50%,-50%);background:linear-gradient(90deg,transparent,rgba(56,218,255,.28),transparent)}
.pingx-infra-visual .px-fiber-core:after{transform:translate(-50%,-50%) rotate(90deg)}
.pingx-infra-visual .px-pulse{display:none!important}
@keyframes pxFiberFlow{0%{background-position:110% 0;opacity:.48}50%{opacity:.95}100%{background-position:-110% 0;opacity:.48}}
@media(max-width:767px){
  .pingx-infra-visual .px-fiber-a{width:145px;left:78px;top:145px}
  .pingx-infra-visual .px-fiber-b{width:150px;left:78px;top:245px}
  .pingx-infra-visual .px-fiber-c{width:145px;left:205px;top:145px}
  .pingx-infra-visual .px-fiber-d{width:150px;left:205px;top:245px}
  .pingx-infra-visual .px-fiber-core{width:130px;height:130px}
}
@media(prefers-reduced-motion:reduce){.pingx-infra-visual .px-fiber{animation:none!important;background-position:50% 0!important}}

/* V22 — static service nodes + fiber-optic connection layout */
.pingx-infra-visual .px-node,
.pingx-infra-visual .px-node-center,
.pingx-infra-visual .px-node-a,
.pingx-infra-visual .px-node-b,
.pingx-infra-visual .px-node-c,
.pingx-infra-visual .px-node-d{
  animation:none!important;
  transition:none!important;
  filter:none!important;
  opacity:1!important;
}
.pingx-infra-visual .px-node:before,
.pingx-infra-visual .px-node:after,
.pingx-infra-visual .px-node-center:before,
.pingx-infra-visual .px-node-center:after{
  animation:none!important;
  display:none!important;
}
/* Hide the old straight connection lines; fiber strands provide the connections. */
.pingx-infra-visual .px-line{display:none!important;animation:none!important}
.pingx-infra-visual .px-fiber{
  height:2px!important;
  background:linear-gradient(90deg,
    rgba(25,190,255,.05) 0%,
    rgba(25,190,255,.78) 18%,
    rgba(70,222,255,1) 42%,
    rgba(108,91,255,.9) 58%,
    rgba(25,190,255,.72) 82%,
    rgba(25,190,255,.04) 100%)!important;
  background-size:180% 100%!important;
  box-shadow:0 0 5px rgba(25,190,255,.42),0 0 12px rgba(83,117,255,.13)!important;
  animation:pxFiberStream 4.8s linear infinite!important;
}
.pingx-infra-visual .px-fiber-a{width:260px!important;left:118px!important;top:172px!important;transform:rotate(-18deg)!important}
.pingx-infra-visual .px-fiber-b{width:265px!important;left:118px!important;top:282px!important;transform:rotate(18deg)!important;animation-delay:-1.4s!important}
.pingx-infra-visual .px-fiber-c{width:260px!important;left:355px!important;top:172px!important;transform:rotate(18deg)!important;animation-delay:-2.5s!important}
.pingx-infra-visual .px-fiber-d{width:265px!important;left:355px!important;top:282px!important;transform:rotate(-18deg)!important;animation-delay:-3.4s!important}
.pingx-infra-visual .px-fiber-core{
  width:185px!important;height:185px!important;
  border:1px solid rgba(43,205,255,.10)!important;
  box-shadow:0 0 0 12px rgba(43,205,255,.018),0 0 28px rgba(50,160,255,.08)!important;
  animation:none!important;
}
.pingx-infra-visual .px-fiber-core:before,
.pingx-infra-visual .px-fiber-core:after{opacity:.55!important;animation:none!important}
@keyframes pxFiberStream{
  0%{background-position:120% 0;opacity:.55}
  50%{opacity:.9}
  100%{background-position:-120% 0;opacity:.55}
}
@media(max-width:767px){
  .pingx-infra-visual .px-fiber-a{width:150px!important;left:78px!important;top:145px!important}
  .pingx-infra-visual .px-fiber-b{width:155px!important;left:78px!important;top:245px!important}
  .pingx-infra-visual .px-fiber-c{width:150px!important;left:202px!important;top:145px!important}
  .pingx-infra-visual .px-fiber-d{width:155px!important;left:202px!important;top:245px!important}
  .pingx-infra-visual .px-fiber-core{width:130px!important;height:130px!important}
}
@media(prefers-reduced-motion:reduce){.pingx-infra-visual .px-fiber{animation:none!important;background-position:50% 0!important}}

/* V23 — premium fiber topology: no flashing, no pulsing, subtle continuous motion */
.pingx-infra-visual .pingx-network-board{overflow:hidden;isolation:isolate}
.pingx-infra-visual .pingx-network-board:before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(circle at 50% 50%,rgba(41,190,255,.10),transparent 31%),
    linear-gradient(135deg,rgba(255,255,255,.018),transparent 42%,rgba(28,181,255,.035));
  animation:none!important;
}
.pingx-infra-visual .px-grid-lines{opacity:.10!important;background-size:34px 34px!important}

/* Static nodes — clean hardware topology */
.pingx-infra-visual .px-node,
.pingx-infra-visual .px-node-center{animation:none!important;transition:transform .25s ease,box-shadow .25s ease!important}
.pingx-infra-visual .px-node:not(.px-node-center):hover{transform:translateY(-3px)!important;box-shadow:0 12px 26px rgba(0,0,0,.18),0 0 0 1px rgba(70,215,255,.18)!important}

/* Four braided fiber trunks */
.pingx-infra-visual .px-fiber{
  height:4px!important;border-radius:999px!important;
  background:linear-gradient(90deg,
    transparent 0%,
    rgba(37,193,255,.16) 8%,
    rgba(49,211,255,.95) 30%,
    rgba(118,102,255,.92) 50%,
    rgba(49,211,255,.95) 70%,
    rgba(37,193,255,.16) 92%,
    transparent 100%)!important;
  background-size:220% 100%!important;
  box-shadow:0 0 4px rgba(45,205,255,.42),0 0 12px rgba(67,127,255,.14)!important;
  animation:pxFiberTravel 6s linear infinite!important;
  opacity:.82!important;
}
.pingx-infra-visual .px-fiber:after{
  content:"";position:absolute;left:0;top:-3px;width:100%;height:10px;border-radius:999px;
  background:linear-gradient(90deg,transparent,rgba(67,224,255,.14),transparent);
  filter:blur(3px);pointer-events:none;
}
.pingx-infra-visual .px-fiber-a{animation-delay:-.8s!important}
.pingx-infra-visual .px-fiber-b{animation-delay:-2.4s!important}
.pingx-infra-visual .px-fiber-c{animation-delay:-3.7s!important}
.pingx-infra-visual .px-fiber-d{animation-delay:-5.1s!important}

/* Premium central fiber hub — rotating rings, no flashing */
.pingx-infra-visual .px-fiber-core{
  width:210px!important;height:210px!important;border:1px solid rgba(55,214,255,.12)!important;
  box-shadow:0 0 0 18px rgba(50,180,255,.018),0 0 50px rgba(43,158,255,.09)!important;
  animation:pxHubRotate 22s linear infinite!important;
}
.pingx-infra-visual .px-fiber-core:before,
.pingx-infra-visual .px-fiber-core:after{
  content:"";position:absolute;left:50%;top:50%;border-radius:50%;pointer-events:none;
}
.pingx-infra-visual .px-fiber-core:before{
  width:245px;height:82px;transform:translate(-50%,-50%) rotate(18deg);
  border:1px solid rgba(44,210,255,.18);
  box-shadow:0 0 18px rgba(45,193,255,.05);
}
.pingx-infra-visual .px-fiber-core:after{
  width:82px;height:245px;transform:translate(-50%,-50%) rotate(18deg);
  border:1px solid rgba(113,103,255,.14);
}

/* Tiny fixed connector points instead of blinking dots */
.pingx-infra-visual .px-pulse{display:none!important}

@keyframes pxFiberTravel{
  from{background-position:120% 0}
  to{background-position:-120% 0}
}
@keyframes pxHubRotate{to{transform:translate(-50%,-50%) rotate(360deg)}}

@media(max-width:767px){
  .pingx-infra-visual .px-fiber-core{width:145px!important;height:145px!important}
  .pingx-infra-visual .px-fiber-core:before{width:170px;height:58px}
  .pingx-infra-visual .px-fiber-core:after{width:58px;height:170px}
  .pingx-infra-visual .px-fiber{height:3px!important}
}
@media(prefers-reduced-motion:reduce){
  .pingx-infra-visual .px-fiber,
  .pingx-infra-visual .px-fiber-core{animation:none!important;background-position:50% 0!important}
}

/* V26 — premium non-flashing interaction layer */
:root{--px26-blue:#1677e8;--px26-cyan:#16bde8;--px26-purple:#6c63e8;--px26-ink:#173451}

/* Soft section atmosphere: depth without flashing */
.pingx-capabilities,.pingx-process,.pingx-services,.px-home-company,.why-choose-pingx,.pricing,.portfolio{position:relative;isolation:isolate}
.pingx-capabilities:before,.pingx-process:before,.pingx-services:before,.px-home-company:before,.why-choose-pingx:before,.pricing:before,.portfolio:before{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(circle at 8% 18%,rgba(22,189,232,.055),transparent 28%),radial-gradient(circle at 92% 78%,rgba(108,99,232,.045),transparent 28%)}

/* Capability cards: moving top rail + icon depth */
.pingx-capability{position:relative;overflow:hidden;transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease}
.pingx-capability:before{content:"";position:absolute;left:10%;right:10%;top:0;height:2px;border-radius:4px;background:linear-gradient(90deg,transparent,var(--px26-cyan),var(--px26-purple),transparent);transform:scaleX(.35);transform-origin:center;transition:transform .45s ease}
.pingx-capability:after{content:"";position:absolute;inset:auto -30% -55% auto;width:170px;height:170px;border-radius:50%;background:radial-gradient(circle,rgba(22,189,232,.10),transparent 68%);transition:transform .5s ease}
.pingx-capability:hover{transform:translateY(-8px);box-shadow:0 22px 48px rgba(19,77,120,.11)}
.pingx-capability:hover:before{transform:scaleX(1)}
.pingx-capability:hover:after{transform:translate(-35px,-35px)}
.pingx-capability>i{transition:transform .4s ease}
.pingx-capability:hover>i{transform:translateY(-3px) scale(1.08)}

/* How we work: a clean fiber route connecting the steps */
.pingx-process-track{position:relative}
.pingx-process-track:before{content:"";position:absolute;left:10%;right:10%;top:42px;height:2px;border-radius:99px;background:linear-gradient(90deg,transparent,#b9dff3 10%,#16bde8 50%,#b9dff3 90%,transparent);box-shadow:0 0 12px rgba(22,189,232,.12)}
.pingx-process-track:after{content:"";position:absolute;top:40px;left:10%;width:70px;height:6px;border-radius:99px;background:linear-gradient(90deg,transparent,#58dcff,transparent);filter:blur(.2px);animation:px26Route 5s linear infinite;pointer-events:none}
.pingx-step{position:relative;z-index:2;transition:transform .35s ease,box-shadow .35s ease}
.pingx-step:before{content:"";position:absolute;top:34px;left:50%;width:16px;height:16px;transform:translateX(-50%);border-radius:50%;background:#fff;border:3px solid #20bde9;box-shadow:0 0 0 5px rgba(32,189,233,.08);transition:transform .35s ease,box-shadow .35s ease}
.pingx-step:hover{transform:translateY(-7px)}
.pingx-step:hover:before{transform:translateX(-50%) scale(1.18);box-shadow:0 0 0 8px rgba(32,189,233,.08),0 0 20px rgba(32,189,233,.18)}
@keyframes px26Route{from{transform:translateX(0)}to{transform:translateX(calc(100vw - 20%))}}

/* Service cards: category-specific micro visual, no flashing */
.pingx-services .pingx-service-card{transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease!important}
.pingx-services .pingx-service-card:before{height:2px!important;background:linear-gradient(90deg,#16bde8,#6c63e8,#16bde8)!important;transform:scaleX(.2);transform-origin:left;transition:transform .45s ease!important;width:auto!important}
.pingx-services .pingx-service-card:hover:before{transform:scaleX(1)}
.pingx-services .pingx-service-card .service-icon-wrap{transition:transform .35s ease}
.pingx-services .pingx-service-card:hover .service-icon-wrap{transform:translateY(-5px)}
.pingx-services .pingx-service-card .service-line{position:relative;overflow:hidden}
.pingx-services .pingx-service-card .service-line:after{content:"";position:absolute;top:0;left:-35%;width:35%;height:100%;background:linear-gradient(90deg,transparent,rgba(22,189,232,.8),transparent);animation:px26ServiceFlow 3.8s linear infinite}
@keyframes px26ServiceFlow{to{transform:translateX(390%)}}

/* About company visual: gentle orbit, not a flashing effect */
.px-company-home-card{position:relative;overflow:hidden;transition:transform .4s ease,box-shadow .4s ease}
.px-company-home-card:after{content:"";position:absolute;width:230px;height:230px;right:-120px;bottom:-130px;border-radius:50%;border:1px solid rgba(22,189,232,.12);box-shadow:0 0 0 18px rgba(22,189,232,.025),0 0 0 38px rgba(108,99,232,.018);pointer-events:none}
.px-company-home-card:hover{transform:translateY(-5px);box-shadow:0 24px 55px rgba(18,78,121,.10)}
.px-company-home-points span{transition:transform .25s ease,color .25s ease}
.px-company-home-points span:hover{transform:translateX(5px);color:#1677e8}

/* Performance cards: subtle animated data rail */
.px-performance-section .pingx-capability-card{transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease}
.px-performance-section .pingx-capability-card:hover{transform:translateY(-7px);box-shadow:0 24px 55px rgba(16,77,119,.12)}
.px-performance-section .pingx-capability-card .capability-icon{transition:transform .4s ease,box-shadow .4s ease}
.px-performance-section .pingx-capability-card:hover .capability-icon{transform:translateY(-4px) rotate(-2deg);box-shadow:0 14px 30px rgba(22,119,232,.14)}
.px-performance-section .capability-number{position:relative}
.px-performance-section .capability-number:after{content:"";display:block;width:36px;height:2px;margin-top:5px;border-radius:2px;background:linear-gradient(90deg,#16bde8,#6c63e8);transition:width .35s ease}
.px-performance-section .pingx-capability-card:hover .capability-number:after{width:70px}

/* Projects: hover reveals a clean scanning edge */
.pingx-project-card{position:relative}
.pingx-project-card:before{content:"";position:absolute;left:0;top:0;width:3px;height:0;background:linear-gradient(180deg,#16bde8,#6c63e8);transition:height .45s ease;z-index:5}
.pingx-project-card:hover:before{height:100%}
.pingx-project-visual{transition:transform .45s ease,filter .45s ease}
.pingx-project-card:hover .pingx-project-visual{transform:scale(1.015);filter:saturate(1.06)}

/* Solutions: plan cards gain a restrained infrastructure sweep */
.technology-plan{overflow:hidden}
.technology-plan:after{content:"";position:absolute;left:-30%;top:0;width:25%;height:100%;background:linear-gradient(90deg,transparent,rgba(22,189,232,.08),transparent);transform:skewX(-18deg);animation:px26PlanSweep 6s ease-in-out infinite;pointer-events:none}
.technology-plan:hover{transform:translateY(-8px)!important}
@keyframes px26PlanSweep{0%,55%{transform:translateX(0) skewX(-18deg)}100%{transform:translateX(560%) skewX(-18deg)}}

/* Why choose cards */
.why-card{position:relative;overflow:hidden;transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease}
.why-card:after{content:"";position:absolute;right:-50px;bottom:-55px;width:140px;height:140px;border-radius:50%;border:1px solid rgba(22,189,232,.12);transition:transform .45s ease}
.why-card:hover{transform:translateY(-7px);box-shadow:0 22px 48px rgba(19,77,120,.10)}
.why-card:hover:after{transform:translate(-18px,-18px)}
.why-icon{transition:transform .35s ease}
.why-card:hover .why-icon{transform:translateY(-4px) scale(1.05)}

/* Contact cards: soft route indicator */
.pingx-contact-item{position:relative;overflow:hidden;transition:transform .3s ease,box-shadow .3s ease}
.pingx-contact-item:after{content:"";position:absolute;left:0;bottom:0;width:55px;height:2px;background:linear-gradient(90deg,#16bde8,#6c63e8);transition:width .35s ease}
.pingx-contact-item:hover{transform:translateX(5px);box-shadow:0 16px 35px rgba(18,78,121,.08)}
.pingx-contact-item:hover:after{width:120px}

/* Footer: keep it calm; only a tiny static-tech texture */
.pingx-footer{position:relative;overflow:hidden}
.pingx-footer:before{content:"";position:absolute;right:-120px;bottom:-170px;width:360px;height:360px;border:1px solid rgba(22,119,232,.07);border-radius:50%;box-shadow:0 0 0 24px rgba(22,119,232,.018),0 0 0 52px rgba(22,119,232,.012);pointer-events:none}

@media(max-width:767px){
  .pingx-process-track:before{left:8%;right:8%;top:36px}
  .pingx-process-track:after{top:34px;width:55px}
  .pingx-step:before{top:28px;width:13px;height:13px;border-width:2px}
  .pingx-capability:hover,.pingx-step:hover,.why-card:hover,.pingx-contact-item:hover{transform:none}
}
@media(prefers-reduced-motion:reduce){
  .pingx-process-track:after,.pingx-services .pingx-service-card .service-line:after,.technology-plan:after{animation:none!important}
  .pingx-capability,.pingx-step,.pingx-services .pingx-service-card,.px-company-home-card,.px-performance-section .pingx-capability-card,.pingx-project-card,.technology-plan,.why-card,.pingx-contact-item{transition:none!important}
}

/* V26 Performance Dashboard */
.px-performance-dashboard{position:relative;max-width:1120px;margin:10px auto 0;padding:22px;border:1px solid rgba(27,112,185,.14);border-radius:24px;background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(241,249,255,.92));box-shadow:0 22px 60px rgba(15,71,110,.10);overflow:hidden}
.px-performance-dashboard:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,rgba(24,155,229,.045) 50%,transparent 100%);transform:translateX(-100%);animation:pxDashboardSweep 7s ease-in-out infinite;pointer-events:none}
.px-dashboard-head{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;padding:2px 4px 16px;color:#174d78;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.px-dashboard-head>div{display:flex;align-items:center;gap:9px}.px-dashboard-head>span{font-size:10px;color:#7b91a6;letter-spacing:.12em}
.px-live-dot{width:7px;height:7px;border-radius:50%;background:#18aee6;box-shadow:0 0 0 5px rgba(24,174,230,.10)}
.px-metric-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.px-metric-card{position:relative;padding:18px 18px 15px;border:1px solid rgba(35,126,192,.13);border-radius:18px;background:rgba(255,255,255,.88);overflow:hidden;transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease}
.px-metric-card:hover{transform:translateY(-5px);border-color:rgba(25,142,225,.28);box-shadow:0 18px 38px rgba(21,91,137,.12)}
.px-metric-top{display:flex;align-items:center;gap:9px;color:#688097;font-size:12px;font-weight:700}.px-metric-top i{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;color:#178de0;background:#eef8ff;font-size:14px}
.px-metric-value{display:flex;align-items:baseline;margin:14px 0 10px;color:#14375c;font-size:38px;line-height:1;font-weight:800;letter-spacing:-.04em}.px-metric-value small{margin-left:3px;color:#218ee1;font-size:19px;font-weight:800}
.px-progress{height:6px;border-radius:20px;background:#eaf2f8;overflow:hidden}.px-progress span{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#2c79e8,#19b9dc);transition:width 1.5s cubic-bezier(.2,.7,.2,1)}.px-progress span.is-running{width:var(--target)}
.px-metric-foot{display:flex;justify-content:space-between;gap:8px;margin-top:10px;color:#8a9cad;font-size:10px}.px-metric-foot b{color:#376281;font-weight:700}
@keyframes pxDashboardSweep{0%,55%{transform:translateX(-100%)}75%,100%{transform:translateX(100%)}}
@media(max-width:991px){.px-metric-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:575px){.px-performance-dashboard{padding:15px;border-radius:18px}.px-dashboard-head{padding-bottom:12px}.px-metric-grid{grid-template-columns:1fr;gap:10px}.px-metric-card{padding:15px}.px-metric-value{font-size:32px;margin:10px 0}.px-dashboard-head>span{display:none}}
@media(prefers-reduced-motion:reduce){.px-performance-dashboard:before{animation:none}.px-progress span{transition:none}}

/* V28 project-card hover stability fix */
.pingx-project-card{
  position:relative!important;
  background:#fff!important;
  overflow:hidden!important;
  isolation:isolate!important;
}
.pingx-project-card::after{
  display:none!important;
}
.pingx-project-card .pingx-project-visual{
  position:relative!important;
  z-index:1!important;
  flex:0 0 245px!important;
}
.pingx-project-card .pingx-project-content{
  position:relative!important;
  z-index:4!important;
  display:flex!important;
  flex-direction:column!important;
  flex:1 1 auto!important;
  background:#fff!important;
  opacity:1!important;
  visibility:visible!important;
  transform:none!important;
}
.pingx-project-card:hover{
  transform:translateY(-7px)!important;
  background:#fff!important;
}
.pingx-project-card:hover .pingx-project-content{
  opacity:1!important;
  visibility:visible!important;
  transform:none!important;
}
.pingx-project-card:hover .pingx-project-visual{
  filter:saturate(1.08) brightness(1.02)!important;
}
/* Keep the visual animation inside its own area */
.pingx-project-visual > *{max-width:100%;}

/* V29: Project hover hard-fix — never hide/cover project visual content */
.pingx-project-card,
.pingx-project-card:hover{
  position:relative!important;
  overflow:hidden!important;
  isolation:isolate!important;
  background:#fff!important;
}
.pingx-project-card::before,
.pingx-project-card::after{
  display:none!important;
  content:none!important;
}
.pingx-project-card:hover{
  transform:translateY(-7px)!important;
  box-shadow:0 18px 45px rgba(11,32,62,.12)!important;
}
.pingx-project-card .pingx-project-visual,
.pingx-project-card:hover .pingx-project-visual{
  position:relative!important;
  z-index:2!important;
  opacity:1!important;
  visibility:visible!important;
  transform:none!important;
  filter:none!important;
  mix-blend-mode:normal!important;
}
.pingx-project-card .pingx-project-visual > *{
  opacity:1;
  visibility:visible;
}
.pingx-project-card .pingx-project-content,
.pingx-project-card:hover .pingx-project-content{
  position:relative!important;
  z-index:20!important;
  opacity:1!important;
  visibility:visible!important;
  transform:none!important;
  background:#fff!important;
}
.pingx-project-card .px-project-card-top{
  z-index:30!important;
}
/* Keep category visual animations running, but never let hover alter the visual layer. */
@media (hover:hover){
  .pingx-project-card:hover .pingx-project-visual *{transform-origin:center center;}
}


/* =========================================================
   PINGX NAV V34 — SINGLE MOBILE NAV CONTROLLER
   Final override: prevents legacy CSS/duplicate JS conflicts.
   ========================================================= */
@media (max-width:1199px){
  .header .mobile-nav-toggle{
    display:flex!important;align-items:center;justify-content:center;
    width:44px!important;height:44px!important;margin:0 4px 0 10px!important;
    padding:0!important;border:0!important;border-radius:12px!important;
    color:#fff!important;background:rgba(255,255,255,.10)!important;
    font-size:28px!important;line-height:1!important;cursor:pointer;
    position:relative!important;z-index:10005!important;
    -webkit-tap-highlight-color:transparent;
  }
  .header .mobile-nav-toggle:focus-visible{outline:2px solid #54d8ff;outline-offset:3px}
  body.mobile-nav-active{overflow:hidden!important}
  body.mobile-nav-active .header .mobile-nav-toggle{
    position:fixed!important;top:14px!important;right:14px!important;
    width:44px!important;height:44px!important;margin:0!important;
    background:#fff!important;color:#102a43!important;
    box-shadow:0 8px 28px rgba(0,0,0,.18)!important;
  }
  body.mobile-nav-active .header .navmenu{
    position:fixed!important;inset:0!important;width:100%!important;height:100dvh!important;
    padding:0!important;margin:0!important;background:rgba(5,20,40,.58)!important;
    backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
    z-index:10000!important;overflow:hidden!important;
  }
  /* Hidden until body gets the active class. */
  .header .navmenu>ul{
    display:flex!important;position:absolute!important;visibility:hidden!important;opacity:0!important;
    top:76px!important;left:12px!important;right:12px!important;width:auto!important;
    max-height:calc(100dvh - 92px)!important;flex-direction:column!important;align-items:stretch!important;
    gap:2px!important;margin:0!important;padding:12px!important;overflow-y:auto!important;
    overscroll-behavior:contain!important;list-style:none!important;
    background:#fff!important;border:1px solid rgba(16,42,67,.08)!important;border-radius:18px!important;
    box-shadow:0 24px 70px rgba(5,20,40,.25)!important;
    transform:translateY(-8px)!important;transition:opacity .22s ease,transform .22s ease,visibility .22s ease!important;
    z-index:10001!important;
  }
  body.mobile-nav-active .header .navmenu>ul{
    visibility:visible!important;opacity:1!important;transform:none!important;
  }
  body.mobile-nav-active .header .navmenu>ul>li{width:100%!important;border-bottom:1px solid rgba(16,42,67,.07)!important}
  body.mobile-nav-active .header .navmenu>ul>li:last-child{border-bottom:0!important}
  body.mobile-nav-active .header .navmenu>ul>li>a{
    width:100%!important;min-height:48px!important;padding:12px 14px!important;
    display:flex!important;align-items:center!important;gap:8px!important;
    color:#102a43!important;background:transparent!important;border-radius:11px!important;
    font-size:16px!important;font-weight:650!important;
  }
  body.mobile-nav-active .header .navmenu>ul>li>a:hover,
  body.mobile-nav-active .header .navmenu>ul>li>a:focus-visible,
  body.mobile-nav-active .header .navmenu>ul>li>a.active{
    color:#e63737!important;background:rgba(230,55,55,.07)!important;outline:none!important;
  }
  body.mobile-nav-active .header .navmenu>ul>li.dropdown>a .toggle-dropdown{
    margin-left:auto!important;display:grid!important;place-items:center!important;
    width:34px!important;height:34px!important;border-radius:9px!important;
    color:#1689e8!important;background:rgba(22,137,232,.08)!important;
    cursor:pointer!important;flex:0 0 34px!important;
  }
  body.mobile-nav-active .header .navmenu>ul>li.dropdown.active>a .toggle-dropdown{transform:rotate(180deg)!important}
  body.mobile-nav-active .header .navmenu .pingx-mega-menu{
    position:static!important;display:none!important;width:auto!important;max-height:none!important;
    grid-template-columns:1fr!important;transform:none!important;padding:4px 4px 10px 10px!important;
    margin:0!important;background:transparent!important;box-shadow:none!important;border:0!important;
  }
  body.mobile-nav-active .header .navmenu .pingx-menu-drop.active>.pingx-mega-menu,
  body.mobile-nav-active .header .navmenu .pingx-menu-drop>.pingx-mega-menu.dropdown-active{
    display:grid!important;
  }
  body.mobile-nav-active .header .navmenu .pingx-mega-menu li{border:0!important}
  body.mobile-nav-active .header .navmenu .pingx-mega-menu li a{
    display:flex!important;align-items:center!important;gap:10px!important;padding:9px 7px!important;
    color:#314b63!important;border-radius:10px!important;white-space:normal!important;
  }
  body.mobile-nav-active .header .navmenu .pingx-mega-menu li a:hover{background:#f2f9fd!important}
  body.mobile-nav-active .header .navmenu .px-menu-icon{width:34px!important;height:34px!important;flex:0 0 34px!important}
  body.mobile-nav-active .header .navmenu .pingx-mega-menu strong{font-size:12px!important}
  body.mobile-nav-active .header .navmenu .pingx-mega-menu small{font-size:9px!important;color:#7a8da0!important}
  .pingx-mobile-menu-footer{display:none!important}
  body.mobile-nav-active .header .pingx-mobile-menu-footer{
    display:block!important;position:absolute!important;left:12px!important;right:12px!important;
    bottom:14px!important;z-index:10002!important;padding:0!important;
  }
  body.mobile-nav-active .header .pingx-menu-cta{
    display:flex!important;align-items:center!important;gap:11px!important;
    min-height:54px!important;padding:12px 14px!important;border-radius:15px!important;
    background:linear-gradient(135deg,#13a9e8,#5c5bdd)!important;color:#fff!important;
    box-shadow:0 15px 40px rgba(0,0,0,.22)!important;text-decoration:none!important;
  }
  body.mobile-nav-active .header .pingx-menu-cta span{flex:1!important}
  body.mobile-nav-active .header .pingx-menu-cta strong{display:block!important;font-size:13px!important}
  body.mobile-nav-active .header .pingx-menu-cta small{display:block!important;font-size:10px!important;color:#e7f8ff!important;margin-top:2px!important}
  body.mobile-nav-active .header .pingx-menu-cta>i:last-child{font-size:16px!important}
  @supports not (height:100dvh){body.mobile-nav-active .header .navmenu{height:100vh!important}.header .navmenu>ul{max-height:calc(100vh - 92px)!important}}
}
@media (max-width:575px){
  .header .mobile-nav-toggle{width:42px!important;height:42px!important;font-size:27px!important;margin-left:6px!important}
  body.mobile-nav-active .header .mobile-nav-toggle{top:11px!important;right:11px!important;width:42px!important;height:42px!important}
  .header .navmenu>ul{top:64px!important;left:10px!important;right:10px!important;max-height:calc(100dvh - 144px)!important;padding:9px!important;border-radius:16px!important}
  body.mobile-nav-active .header .pingx-mobile-menu-footer{left:10px!important;right:10px!important;bottom:10px!important}
}

/* Real client logos */
.px-logo-image{position:relative;z-index:2;width:72px;height:49px;border:1px solid rgba(25,109,175,.13);border-radius:12px;background:#fff;box-shadow:0 5px 16px rgba(24,88,133,.07);display:flex;align-items:center;justify-content:center;overflow:hidden;padding:4px}
.px-logo-image img{display:block;width:100%;height:100%;object-fit:contain;max-width:100%;max-height:100%;}
.px-logo-image.px-logo-wide{width:106px;}
@media(max-width:767px){.px-logo-image{height:43px;width:66px}.px-logo-image.px-logo-wide{width:92px}}