/* v27 water pages: lightweight 3D feel. Pure CSS, no libraries. Motion only when the user allows it. */
.w3d-stage{perspective:1200px}
.w3d-card{position:relative;border-radius:20px;overflow:hidden;background:#0a1028;box-shadow:0 2px 0 rgba(255,255,255,.06) inset,0 18px 40px rgba(0,0,0,.45),0 4px 12px rgba(10,90,122,.25);transform-style:preserve-3d;transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s}
.w3d-card img{display:block;width:100%;height:auto;transform:translateZ(0)}
.w3d-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,.14),rgba(255,255,255,0) 40%);mix-blend-mode:screen}
.w3d-hero{transform:rotateY(-8deg) rotateX(4deg)}
.w3d-cap{font-size:13px;color:#9FB0DA;margin:10px 4px 0}
.sol-card{transition:transform .35s ease,box-shadow .35s ease}
.w3d-wrap{container-type:inline-size}
@container (max-width:520px){.w3d-card{border-radius:14px}}
@media (prefers-reduced-motion:no-preference){
  .w3d-card:hover,.w3d-card:focus-within{transform:rotateY(-3deg) rotateX(3deg) translateY(-6px);box-shadow:0 30px 60px rgba(0,0,0,.5),0 8px 20px rgba(10,90,122,.35)}
  .w3d-hero:hover{transform:rotateY(-2deg) rotateX(1deg) translateY(-6px)}
  .w3d-grid .sol-card:hover{transform:translateY(-6px);box-shadow:0 22px 44px rgba(0,0,0,.4)}
  @supports (animation-timeline:view()){
    .w3d-reveal{animation:w3dIn linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
    @keyframes w3dIn{from{opacity:0;transform:translateY(28px) rotateX(8deg)}to{opacity:1;transform:none}}
  }
}
@media (prefers-reduced-motion:reduce){.w3d-hero{transform:none}.w3d-card,.sol-card{transition:none}}
@view-transition{navigation:auto}
@media (max-width:991.98px){.w3d-hero{transform:none;margin-top:24px}}