/* PRODVERA additive responsive + performance layer. Existing page styles/content remain untouched. */
html{max-width:100%;overflow-x:clip;scrollbar-gutter:stable}
body{max-width:100%;overflow-x:clip}
*,*::before,*::after{box-sizing:border-box}
img,video{max-width:100%;height:auto}
svg{max-width:100%}
iframe{max-width:100%}
button,a,input,select,textarea{font:inherit}
main,section,header,footer,article,div{min-width:0}
pre,code{max-width:100%;overflow:auto}

/* Medium screens: prevent fixed desktop compositions from squeezing. */
@media (max-width:1100px){
  .container,.wrap,.max-w-6xl{max-width:100%;}
  .navlinks{flex-wrap:wrap}
  .grid{min-width:0}
}

/* Phones + small tablets. */
@media (max-width:767px){
  html{scroll-padding-top:12px}
  body{font-size:14px}
  .container,.wrap,.max-w-6xl{width:calc(100% - 28px);max-width:none;margin-inline:auto}
  h1,h2,h3,h4{overflow-wrap:anywhere}
  p,li,a,button{overflow-wrap:anywhere}
  .navin{min-height:58px;height:auto}
  .navlinks{gap:10px;max-width:70vw;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  .navlinks::-webkit-scrollbar{display:none}
  .buttons{flex-direction:column}
  .buttons a,.buttons button{width:100%;min-height:44px}
  table{display:block;max-width:100%;overflow-x:auto}
  input,select,textarea{max-width:100%;font-size:16px}
  [style*="grid-template-columns"]{min-width:0}
}

/* Very small phones. */
@media (max-width:390px){
  .container,.wrap,.max-w-6xl{width:calc(100% - 22px)}
  .hero{padding-top:48px}
}

/* Respect user motion preference everywhere. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important}
}

/* Mobile performance: keep visible animations/design unchanged, but do not
   keep hidden radial-menu bubbles animating behind the closed menu. */
@media (max-width:767px){
  #pvRadialMenu:not(.pv-open) .pv-radial-bubble,
  #pvRadialMenu:not(.pv-open) .pv-radial-bubble svg,
  #pvRadialMenu:not(.pv-open) .pv-radial-orbit,
  #pvRadialMenu:not(.pv-open) .pv-radial-glow{
    animation-play-state:paused!important;
    will-change:auto!important;
  }
  /* Avoid permanently reserving GPU layers for pointer-only effects on touch devices. */
  .tilt,.spot-card,.magnet{will-change:auto!important}
}

/* Social Security — richer 3D depth, but capped to GPU-friendly transforms. */
#socialSecurityView .pv-ss-command-card,
#socialSecurityView .pv-ss-platform-board,
#socialSecurityView .pv-ss-service-card,
#socialSecurityView .pv-ss-detail-card,
#socialSecurityView .pv-ss-risk-board,
#socialSecurityView .pv-ss-cta-card{transform-style:preserve-3d}
#socialSecurityView .pv-ss-command-card{will-change:transform}

#socialSecurityView .pv-ss-command-card::after{
  content:"";position:absolute;inset:1px;border-radius:30px;pointer-events:none;z-index:0;
  background:linear-gradient(135deg,rgba(255,255,255,.05),transparent 20%,transparent 70%,rgba(102,145,255,.045));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055);
}
#socialSecurityView .pv-ss-command-top,
#socialSecurityView .pv-ss-command-core,
#socialSecurityView .pv-ss-command-bottom{z-index:1}

#socialSecurityView .pv-ss-ring-wrap::after{
  content:"";position:absolute;left:50%;top:50%;width:46%;height:46%;transform:translate(-50%,-50%) translateZ(-24px);
  border-radius:50%;background:radial-gradient(circle,rgba(80,135,255,.18),transparent 70%);
  filter:blur(10px);pointer-events:none;
}
#socialSecurityView .pv-ss-platform-card,
#socialSecurityView .pv-ss-service-card,
#socialSecurityView .pv-ss-detail-card,
#socialSecurityView .pv-ss-risk-node{backface-visibility:hidden}

#socialSecurityView .pv-ss-platform-card:hover,
#socialSecurityView .pv-ss-service-card:hover,
#socialSecurityView .pv-ss-detail-card:hover{transform:translateY(-8px) translateZ(10px)}
#socialSecurityView .pv-ss-platform-card:hover .pv-ss-platform-icon,
#socialSecurityView .pv-ss-service-card:hover .pv-ss-icon,
#socialSecurityView .pv-ss-detail-card:hover .pv-ss-detail-icon{filter:saturate(1.08);transform:perspective(420px) rotateX(-10deg) rotateY(14deg) translateZ(13px) scale(1.06)}

#socialSecurityView .pvss-why-v73-visual,
#socialSecurityView .pvss-case-visual,
#socialSecurityView .pv-ss-risk-board,
#socialSecurityView .pv-ss-cta-card{box-shadow:0 32px 90px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.06),0 0 48px rgba(86,128,255,.055)}

#socialSecurityView .pvss-why-v73-core,
#socialSecurityView .pvss-why-core,
#socialSecurityView .pv-ss-risk-core{transform-style:preserve-3d}
#socialSecurityView .pvss-why-v73-core{box-shadow:0 30px 75px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.13),inset 0 -18px 28px rgba(0,0,0,.16),0 0 45px rgba(95,143,255,.11)}

@media (max-width:767px){
  #socialSecurityView .pv-ss-command-card{will-change:auto}
  #socialSecurityView .pv-ss-platform-card,
  #socialSecurityView .pv-ss-service-card,
  #socialSecurityView .pv-ss-detail-card,
  #socialSecurityView .pv-ss-risk-node{will-change:auto}
  #socialSecurityView .pv-ss-platform-card:hover,
  #socialSecurityView .pv-ss-service-card:hover,
  #socialSecurityView .pv-ss-detail-card:hover{transform:translateY(-4px)}
  #socialSecurityView .pv-ss-ring-wrap::after{filter:blur(7px);opacity:.7}
}

@media (prefers-reduced-motion:reduce){
  #socialSecurityView .pv-ss-command-card,
  #socialSecurityView .pv-ss-platform-card,
  #socialSecurityView .pv-ss-service-card,
  #socialSecurityView .pv-ss-detail-card{transition:none!important;transform:none!important}
  #socialSecurityView .pv-ss-ring-wrap::after{filter:none}
}


/* PRODVERA visibility-aware animation budget v2 */
.pv-anim-offscreen,
.pv-anim-offscreen::before,
.pv-anim-offscreen::after,
.pv-offscreen,
.pv-offscreen *,
.pv-offscreen::before,
.pv-offscreen::after,
.pv-offscreen *::before,
.pv-offscreen *::after,
#preloader.done,
#preloader.done *,
#preloader.done::before,
#preloader.done::after,
#preloader.done *::before,
#preloader.done *::after,
body:not(.founder-mode) #founder,
body:not(.founder-mode) #founder *,
body:not(.founder-mode) #founder::before,
body:not(.founder-mode) #founder::after,
.case-detail:not(.case-detail-active),
.case-detail:not(.case-detail-active) *,
.case-detail:not(.case-detail-active)::before,
.case-detail:not(.case-detail-active)::after,
body:not(.pv-ss-route-open):not(.pv-social-page) #socialSecurityView,
body:not(.pv-ss-route-open):not(.pv-social-page) #socialSecurityView *,
body:not(.pv-ss-route-open):not(.pv-social-page) #socialSecurityView::before,
body:not(.pv-ss-route-open):not(.pv-social-page) #socialSecurityView::after,
#pvRadialMenu:not(.pv-open),
#pvRadialMenu:not(.pv-open) *,
#pvRadialMenu:not(.pv-open)::before,
#pvRadialMenu:not(.pv-open)::after,
#pvMorePanel:not(.pv-open),
#pvMorePanel:not(.pv-open) *,
#pvMorePanel:not(.pv-open)::before,
#pvMorePanel:not(.pv-open)::after{
  animation-play-state:paused!important;
  will-change:auto!important;
}

/* V93 mobile runtime budget: preserve the appearance, but keep touch devices
   from compositing animations that are not visible or useful while scrolling. */
@media (max-width:767px){
  .pv-offscreen,
  .pv-offscreen *,
  .pv-offscreen::before,
  .pv-offscreen::after,
  .pv-offscreen *::before,
  .pv-offscreen *::after{
    animation-play-state:paused!important;
    will-change:auto!important;
  }
  /* The hero already has static ambient gradients on phone; freezing the large
     moving blobs removes three permanent compositor animations without changing
     the hero's visual composition. */
  #home > .blob{animation-play-state:paused!important;will-change:auto!important}
  /* Hover-only 3D layers have no value on touch and should not reserve GPU memory. */
  .tilt,.spot-card,.magnet,
  #socialSecurityView .pv-ss-command-card,
  #socialSecurityView .pv-ss-platform-card,
  #socialSecurityView .pv-ss-service-card,
  #socialSecurityView .pv-ss-detail-card{
    will-change:auto!important;
  }
}

/* V79 interaction/performance polish: no visual changes. */
a,button,[role="button"],input[type="button"],input[type="submit"],input[type="reset"]{touch-action:manipulation}
@media (max-width:767px){
  /* Prevent touch-only controls from reserving persistent compositor layers. */
  .pf-wheel-wrap,.cs-line-wrap,#pvSsFlowPremium .pv-ss-flow-step{will-change:auto!important}
}

/* V93 marquee paint budget on phones. Two repeated tracks are retained for a
   seamless loop, but surplus repeated cards are not painted on narrow screens. */
@media (max-width:767px){
  .pv-logo-marquee-icons .pv-logo-track .pv-logo-item:nth-child(n+9){display:none!important}
  .pv-logo-marquee-words .pv-logo-track .pv-logo-item:nth-child(n+5){display:none!important}
  .pv-logo-item img{filter:none!important}
}

/* V93 mobile first-paint + fixed-UI budget. Keeps the same premium composition,
   but avoids painting/rendering below-fold content and perpetual fixed-layer loops. */
@media (max-width:767px){
  /* Apply the existing content-visibility strategy at CSS parse time instead of
     waiting for DOMContentLoaded JS. Anchors and document flow are preserved. */
  #mainView > section:not(#home):not(#contact){
    content-visibility:auto;
    contain-intrinsic-size:auto 720px;
  }

  /* The dock keeps its gradients, border and shadows; only the costly live
     backdrop sample is removed on phones. */
  #pvMobileDock .pv-dock-shell{
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
  }

  /* Keep the command orb premium but static while idle. Opening the command
     menu can still animate via the more-specific .pv-command-open rules. */
  #pvMobileLogo:not(.pv-command-open)::after,
  #pvMobileDock > a.pv-nav-active:not(#pvMobileLogo)::after,
  #pvMobileDock > button.pv-nav-active::after,
  #pvMobileDock .pv-dock-shell::before{
    animation:none!important;
    will-change:auto!important;
  }

  /* Two expanding WhatsApp rings are visually decorative; retain a subtle
     static ring instead of running two infinite animations over a fixed FAB. */
  #quickConnect .qc-fab-ping{
    animation:none!important;
    opacity:.24!important;
    will-change:auto!important;
  }
  #quickConnect .qc-fab-ping.ping-2{display:none!important}
}
