/* =========================================================
   PingX Responsive Premium Layer — Mobile + Desktop
   Safe override layer: keeps existing design/effects intact.
   ========================================================= */
html { scroll-behavior:smooth; }
body { overflow-x:hidden; }
img, svg, video { max-width:100%; }

/* Header: clean desktop alignment */
.header { transition:background .3s ease, box-shadow .3s ease, padding .3s ease; }
.header .container-xl { min-height:74px; }
.pingx-header-logo { display:block; width:auto; height:48px; max-width:220px; object-fit:contain; }
.header.scrolled { box-shadow:0 8px 30px rgba(10,30,60,.10); }

/* Desktop nav */
@media (min-width:1200px) {
  .header .navmenu > ul { gap:4px; }
  .header .navmenu > ul > li > a { padding:10px 14px; border-radius:10px; transition:.25s ease; }
  .header .navmenu > ul > li > a:hover,
  .header .navmenu > ul > li > a.active { background:rgba(61,169,223,.08); }
  .header .mobile-nav-toggle { display:none !important; }
}

/* Tablet + mobile header */
@media (max-width:1199px) {
  .header .container-xl { min-height:66px; padding-left:18px; padding-right:18px; }
  .pingx-header-logo { height:43px; max-width:190px; }
  .header .mobile-nav-toggle {
    display:flex !important; align-items:center; justify-content:center;
    width:44px; height:44px; margin-left:12px; border-radius:12px;
    color:#0b1730 !important; background:#fff; border:1px solid rgba(11,23,48,.10);
    box-shadow:0 5px 18px rgba(11,23,48,.10); font-size:25px; line-height:1;
    cursor:pointer; z-index:10001; transition:.2s ease;
  }
  .header .mobile-nav-toggle:active { transform:scale(.95); }

  /* closed state */
  .header .navmenu > ul { display:none !important; }

  /* open state: premium sheet */
  body.mobile-nav-active .header .navmenu {
    position:fixed !important; inset:0 !important; width:100% !important; height:100dvh !important;
    background:rgba(6,18,38,.56) !important; backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);
    z-index:9998; overflow:hidden !important;
  }
  body.mobile-nav-active .header .navmenu > ul {
    display:flex !important; position:absolute !important;
    top:76px !important; left:14px !important; right:14px !important;
    width:auto !important; max-height:calc(100dvh - 92px) !important;
    flex-direction:column !important; align-items:stretch !important; gap:3px !important;
    margin:0 !important; padding:12px !important; list-style:none !important;
    overflow-y:auto !important; overscroll-behavior:contain;
    background:rgba(255,255,255,.98) !important; border:1px solid rgba(11,23,48,.08);
    border-radius:20px !important; box-shadow:0 25px 70px rgba(0,0,0,.25) !important;
  }
  body.mobile-nav-active .header .navmenu > ul > li > a {
    display:flex !important; align-items:center; min-height:50px;
    padding:13px 15px !important; border-radius:12px !important;
    color:#13233b !important; font-size:15px !important; font-weight:600 !important;
    text-decoration:none; transition:.2s ease;
  }
  body.mobile-nav-active .header .navmenu > ul > li > a:hover,
  body.mobile-nav-active .header .navmenu > ul > li > a.active {
    color:#e63737 !important; background:#fff3f3 !important;
  }
  body.mobile-nav-active .header .mobile-nav-toggle {
    position:fixed !important; top:12px !important; right:14px !important;
    width:46px; height:46px; color:#13233b !important; background:#fff !important;
    border-radius:13px; box-shadow:0 8px 24px rgba(0,0,0,.18); z-index:10001 !important;
  }
}

/* Phones */
@media (max-width:767px) {
  .header .container-xl { min-height:62px; padding-left:14px; padding-right:14px; }
  .pingx-header-logo { height:38px; max-width:170px; }
  .header .mobile-nav-toggle { width:42px; height:42px; font-size:23px; border-radius:11px; }

  section, .section { padding:48px 0; scroll-margin-top:70px; }
  .section-title { padding-bottom:38px; }
  .section-title h2 { font-size:26px; line-height:1.25; margin-bottom:12px; }
  .section-title p { font-size:14px; line-height:1.7; }

  /* Hero: prevent cramped two-column layouts */
  .hero { min-height:auto; padding:105px 0 55px !important; }
  .hero h1 { font-size:32px !important; line-height:1.18 !important; }
  .hero p { font-size:15px !important; line-height:1.65 !important; }
  .hero .btn-get-started, .hero .btn-watch-video { margin-top:8px; }

  /* Generic CTA/button wrapping */
  .pingx-page-cta-card { flex-direction:column; align-items:flex-start; padding:28px 22px; gap:20px; }
  .pingx-page-cta-card .btn, .hero .btn-get-started { max-width:100%; }
  .pingx-page-cta-card h3 { font-size:24px; line-height:1.25; }

  /* Cards/images never force horizontal scroll */
  .container, .container-fluid { max-width:100%; }
  .row > * { min-width:0; }
  .card, .service-item, .steps-item, .client-logo-card { max-width:100%; }

  /* Contact/newsletter */
  .pingx-newsletter-card { padding:34px 16px !important; border-radius:16px; }
  .newsletter-content h2 { font-size:25px !important; line-height:1.25; }
  .newsletter-input { border-radius:14px !important; }
  .newsletter-input input { font-size:14px; }
  .newsletter-input button { min-height:46px; }

  /* Footer spacing */
  .pingx-footer-top { padding-top:42px; }
  .pingx-footer-bottom { margin-top:30px; padding:20px 0; }
}

@media (max-width:380px) {
  .pingx-header-logo { height:35px; max-width:150px; }
  .header .mobile-nav-toggle { width:40px; height:40px; }
  .hero h1 { font-size:28px !important; }
  .hero p { font-size:14px !important; }
  body.mobile-nav-active .header .navmenu > ul { left:10px !important; right:10px !important; }
}

/* Accessibility + reduced motion */
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; animation-duration:.01ms !important; transition-duration:.01ms !important; }
}