/* ============================================================
   PingX V37 - Visual Polish
   Design preserved. Colour refinement + subtle professional motion.
   ============================================================ */

:root{
  --px-v37-blue:#1264d6;
  --px-v37-cyan:#19c5e8;
  --px-v37-navy:#0b3c78;
  --px-v37-ink:#173b5b;
}

/* PingX logo: preserve the exact artwork; only improve colour presence. */
.header .pingx-header-logo,
.pingx-footer-logo-img{
  filter:saturate(1.16) contrast(1.035) !important;
  transition:filter .3s ease,transform .3s ease;
}
.header .logo:hover .pingx-header-logo{
  filter:saturate(1.22) contrast(1.045) !important;
}

/* Clean active navigation indicator. */
.navmenu > ul > li > a{
  position:relative;
}
@media (min-width:1200px){
  .navmenu > ul > li > a:before{
    content:"";
    position:absolute;
    left:10px;
    right:10px;
    bottom:3px;
    height:2px;
    border-radius:99px;
    background:linear-gradient(90deg,var(--px-v37-blue),var(--px-v37-cyan));
    transform:scaleX(0);
    transform-origin:center;
    transition:transform .28s ease;
  }
  .navmenu > ul > li > a:hover:before,
  .navmenu > ul > li > a.active:before{
    transform:scaleX(1);
  }
}

/* Professional button sheen - restrained, not flashy. */
.hero .btn-get-started,
.call-to-action .cta-btn,
.pingx-header-cta,
.pingx-menu-cta{
  position:relative;
  overflow:hidden;
}
.hero .btn-get-started:after,
.call-to-action .cta-btn:after,
.pingx-header-cta:after,
.pingx-menu-cta:after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:38%;
  left:-55%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.22),transparent);
  transform:skewX(-18deg);
  pointer-events:none;
}
.hero .btn-get-started:hover:after,
.call-to-action .cta-btn:hover:after,
.pingx-header-cta:hover:after,
.pingx-menu-cta:hover:after{
  animation:pxV37ButtonSweep .7s ease forwards;
}
@keyframes pxV37ButtonSweep{to{left:125%}}

/* Hero: very subtle network atmosphere without changing layout. */
.hero:after{
  content:"";
  position:absolute;
  width:280px;
  height:280px;
  right:4%;
  top:18%;
  border-radius:50%;
  border:1px solid rgba(25,197,232,.10);
  box-shadow:0 0 0 26px rgba(18,100,214,.025),0 0 0 54px rgba(25,197,232,.018);
  pointer-events:none;
  animation:pxV37Orbit 9s linear infinite;
}
@keyframes pxV37Orbit{to{transform:rotate(360deg)}}

/* Services / project cards: crisp lift + top signal line. */
.pingx-service-card,
.pingx-project-card,
.technology-plan{
  transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease !important;
}
.pingx-service-card:hover,
.pingx-project-card:hover,
.technology-plan:hover{
  transform:translateY(-5px);
}

/* Section headings get a small animated data-line accent. */
.section-title h2,
.px-home-company .section-title h2{
  position:relative;
}
.section-title h2:after{
  content:"";
  display:block;
  width:48px;
  height:3px;
  margin-top:9px;
  border-radius:99px;
  background:linear-gradient(90deg,var(--px-v37-blue),var(--px-v37-cyan));
  transform-origin:left center;
  animation:pxV37TitleLine 3.2s ease-in-out infinite;
}
@keyframes pxV37TitleLine{0%,100%{transform:scaleX(.65);opacity:.65}50%{transform:scaleX(1);opacity:1}}

/* Client logos: keep original colours; no grayscale. */
.px-client-marquee-card img,
.pingx-clients .client-logo-card img{
  filter:none !important;
  opacity:1 !important;
}
.px-client-marquee-card:hover img,
.pingx-clients .client-logo-card:hover img{
  transform:scale(1.035);
}

/* Client cards get a subtle focus ring and colour edge. */
.px-client-marquee-card:focus-within{
  outline:2px solid rgba(25,197,232,.28);
  outline-offset:2px;
}

/* Social/contact icons: lively colour on hover without changing icon design. */
.pingx-social-links a{
  transition:transform .25s ease,box-shadow .25s ease,filter .25s ease !important;
}
.pingx-social-links a:hover{
  transform:translateY(-3px) scale(1.04);
  filter:saturate(1.15);
}

/* Back-to-top and floating contact remain lightweight. */
#preloader,
.scroll-top,
.pingx-floating-contact{
  will-change:transform,opacity;
}

@media (max-width:991px){
  .hero:after{width:210px;height:210px;right:-80px;top:12%;}
}

@media (max-width:575px){
  .hero:after{width:150px;height:150px;right:-65px;top:10%;}
  .section-title h2:after{margin-top:7px;}
}

@media (prefers-reduced-motion:reduce){
  .header .pingx-header-logo,
  .pingx-footer-logo-img,
  .hero:after,
  .section-title h2:after,
  .hero .btn-get-started:after,
  .call-to-action .cta-btn:after,
  .pingx-header-cta:after,
  .pingx-menu-cta:after{
    animation:none !important;
    transition:none !important;
  }
}

/* ============================================================
   PingX V38 - Premium Interaction Layer
   Adds restrained tech motion without changing the layout/design.
   ============================================================ */
:root{
  --px-v38-blue:#1264d6;
  --px-v38-cyan:#19c5e8;
  --px-v38-navy:#0b3c78;
}

/* Thin reading/progress line */
.px-scroll-progress{
  position:fixed;left:0;top:0;width:100%;height:3px;z-index:99999;
  pointer-events:none;background:rgba(18,100,214,.08);transform-origin:left center;
}
.px-scroll-progress span{
  display:block;width:100%;height:100%;transform:scaleX(0);transform-origin:left center;
  background:linear-gradient(90deg,var(--px-v38-blue),var(--px-v38-cyan));
  box-shadow:0 0 10px rgba(25,197,232,.32);
}

/* Hero network atmosphere: small, slow-moving data points */
.hero:before{
  content:"";position:absolute;right:8%;top:18%;width:190px;height:190px;border-radius:50%;
  background:
    radial-gradient(circle at 18% 30%,rgba(25,197,232,.65) 0 2px,transparent 3px),
    radial-gradient(circle at 72% 22%,rgba(18,100,214,.50) 0 2px,transparent 3px),
    radial-gradient(circle at 58% 78%,rgba(25,197,232,.52) 0 2px,transparent 3px),
    radial-gradient(circle at 85% 65%,rgba(18,100,214,.42) 0 2px,transparent 3px),
    radial-gradient(circle at 30% 82%,rgba(25,197,232,.40) 0 2px,transparent 3px);
  opacity:.55;pointer-events:none;animation:pxV38Float 7s ease-in-out infinite;
}
@keyframes pxV38Float{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(-8px,8px,0)}}

/* Hero image/card gets a very gentle floating motion */
.hero .px-hero-visual,.hero .hero-img,.hero .hero-img img{will-change:transform}
.hero .px-hero-visual{animation:pxV38HeroFloat 6s ease-in-out infinite}
@keyframes pxV38HeroFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

/* Service/project/capability cards: premium micro-interaction */
.pingx-service-card,.pingx-project-card,.pingx-capability,.pingx-step,.technology-plan,.why-card{
  position:relative;isolation:isolate;
}
.pingx-service-card:after,.pingx-project-card:after,.pingx-capability:after,.pingx-step:after{
  content:"";position:absolute;left:12%;right:12%;top:0;height:2px;border-radius:99px;
  background:linear-gradient(90deg,transparent,var(--px-v38-cyan),var(--px-v38-blue),transparent);
  transform:scaleX(.15);opacity:.35;transform-origin:center;transition:transform .45s ease,opacity .45s ease;pointer-events:none;
}
.pingx-service-card:hover:after,.pingx-project-card:hover:after,.pingx-capability:hover:after,.pingx-step:hover:after{
  transform:scaleX(1);opacity:.9;
}
.pingx-service-card i,.pingx-service-card .icon,.pingx-capability>i,.pingx-step>i{
  transition:transform .38s cubic-bezier(.2,.7,.2,1),filter .38s ease;
}
.pingx-service-card:hover i,.pingx-service-card:hover .icon,.pingx-capability:hover>i,.pingx-step:hover>i{
  transform:translateY(-3px) scale(1.07);filter:saturate(1.18);
}

/* Process route: moving signal dot */
.pingx-process-track:after{
  box-shadow:0 0 16px rgba(25,197,232,.38),0 0 28px rgba(18,100,214,.14);
}

/* Infrastructure board: extra data pulse, without changing nodes */
.pingx-network-board .px-pulse{filter:drop-shadow(0 0 7px rgba(25,197,232,.45));}
.pingx-network-board .px-node{transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease;}
.pingx-network-board .px-node:hover{transform:translateY(-4px) scale(1.035);box-shadow:0 15px 32px rgba(0,0,0,.18);border-color:rgba(91,218,255,.5);}

/* Performance metrics: live status shimmer */
.px-live-dot{box-shadow:0 0 0 0 rgba(31,198,122,.45);animation:pxV38Live 2s ease-out infinite;}
@keyframes pxV38Live{70%{box-shadow:0 0 0 8px rgba(31,198,122,0)}100%{box-shadow:0 0 0 0 rgba(31,198,122,0)}}

/* Client carousel: make cards feel interactive but keep original logos untouched */
.px-client-marquee-card{backface-visibility:hidden;}
.px-client-marquee-card img{transition:transform .38s cubic-bezier(.2,.7,.2,1),filter .38s ease;}
.px-client-marquee-card:hover img{transform:scale(1.06);filter:saturate(1.06) contrast(1.02)!important;}

/* CTA arrow motion */
.pingx-expert-btn i,.pingx-hero-actions a i,.read-more i{transition:transform .28s ease;}
.pingx-expert-btn:hover i,.pingx-hero-actions a:hover i,.read-more:hover i{transform:translateX(4px) translateY(-2px);}

/* Social icons: brand colours stay intact */
.pingx-social-links a:hover{box-shadow:0 8px 20px rgba(18,100,214,.14);}

/* Keep all effects comfortable on touch devices */
@media (hover:none){
  .pingx-network-board .px-node:hover,.pingx-service-card:hover,.pingx-project-card:hover,.pingx-capability:hover,.pingx-step:hover{transform:none;}
}

@media (max-width:767px){
  .hero:before{right:-35px;top:12%;width:145px;height:145px;opacity:.38;}
  .hero .px-hero-visual{animation-duration:7.5s;}
  .px-scroll-progress{height:2px;}
}

@media (prefers-reduced-motion:reduce){
  .hero:before,.hero .px-hero-visual,.px-live-dot{animation:none!important;}
  .pingx-service-card,.pingx-project-card,.pingx-capability,.pingx-step,.pingx-network-board .px-node,
  .pingx-service-card i,.pingx-service-card .icon,.pingx-capability>i,.pingx-step>i,
  .px-client-marquee-card img,.pingx-expert-btn i,.pingx-hero-actions a i,.read-more i{transition:none!important;}
}


/* ============================================================
   PingX V38 - MOBILE HERO CENTER FIX
   Keeps desktop layout unchanged and centers the complete hero
   content/visual on small screens without horizontal overflow.
   ============================================================ */
@media (max-width: 767px){
  .px-light-hero{
    width:100%;
    overflow:hidden !important;
  }

  .px-light-hero .container.px-hero-simple-grid{
    width:100%;
    max-width:100%;
    margin-left:auto;
    margin-right:auto;
    padding-left:16px;
    padding-right:16px;
    display:grid;
    grid-template-columns:1fr;
    justify-items:center;
    align-items:center;
    text-align:center;
    gap:26px;
  }

  .px-light-hero .px-hero-copy{
    width:100%;
    max-width:680px;
    margin-left:auto;
    margin-right:auto;
    display:flex;
    flex-direction:column;
    align-items:center;
  }

  .px-light-hero .px-hero-badge{
    margin-left:auto;
    margin-right:auto;
    justify-content:center;
  }

  .px-light-hero .px-hero-copy h1{
    width:100%;
    max-width:680px;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
  }

  .px-light-hero .px-hero-copy p{
    width:100%;
    max-width:620px;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
  }

  .px-light-hero .px-hero-actions{
    width:100%;
    justify-content:center;
    align-items:center;
    margin-left:auto;
    margin-right:auto;
  }

  .px-light-hero .px-hero-simple-visual{
    width:100%;
    max-width:560px;
    margin-left:auto;
    margin-right:auto;
    justify-self:center;
  }
}

@media (max-width:575px){
  .px-light-hero .container.px-hero-simple-grid{
    padding-left:14px;
    padding-right:14px;
    gap:22px;
  }

  .px-light-hero .px-hero-copy h1{
    font-size:36px;
    line-height:1.08;
    letter-spacing:-0.8px;
  }

  .px-light-hero .px-hero-copy p{
    font-size:15px;
    line-height:1.65;
  }

  .px-light-hero .px-hero-simple-visual{
    width:100%;
    max-width:520px;
    height:350px;
  }

  .px-light-hero .px-hero-actions .btn-get-started,
  .px-light-hero .px-hero-actions .px-light-secondary{
    margin-left:auto;
    margin-right:auto;
  }
}


/* ============================================================
   PingX V38 - MOBILE HAMBURGER VISIBILITY FIX
   ============================================================ */
@media (max-width:1199px){
  .header .mobile-nav-toggle{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex:0 0 44px !important;
    width:44px !important;
    height:44px !important;
    padding:0 !important;
    margin-left:10px !important;
    margin-right:0 !important;
    position:relative !important;
    z-index:10002 !important;
    visibility:visible !important;
    opacity:1 !important;
    overflow:visible !important;
    color:#172b4d !important;
    background:#ffffff !important;
    border:1px solid rgba(23,43,77,.12) !important;
    border-radius:12px !important;
    box-shadow:0 5px 18px rgba(11,23,48,.12) !important;
    font-size:26px !important;
    line-height:1 !important;
    cursor:pointer !important;
    appearance:none !important;
    -webkit-appearance:none !important;
  }
  .header .mobile-nav-toggle::before{
    display:block !important;
    font-family:"bootstrap-icons" !important;
    font-style:normal !important;
    font-weight:normal !important;
    line-height:1 !important;
  }
  .header .mobile-nav-toggle.bi-list::before{content:"\\f479" !important;}
  .header .mobile-nav-toggle.bi-x::before{content:"\\f62a" !important;}
}
@media (max-width:575px){
  .header .mobile-nav-toggle{
    flex-basis:42px !important;
    width:42px !important;
    height:42px !important;
    font-size:25px !important;
    margin-left:8px !important;
  }
}