:root {
     --gap: 28px;
     --bg: #fff;
     --text: #0f172a;
     --muted: #64748b;
     --link: #2563eb;
     --overlay: rgba(0, 0, 0, .85);
 }

 .cases {
    padding: 70px 0 135px 0;
}


 .page-title {
     font-size: 44px;
     line-height: 1.05;
     margin: 0 0 28px;
     font-weight: 800;
 }

 .cases_inner {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: var(--gap);
 }

 @media (max-width: 860px) {}

 .case-card {
     display: block;
     text-decoration: none;
     color: inherit;
 }

 .case-thumb {
     width: 100%;
     aspect-ratio: 16 / 9;
     background: #0b0b0b;
     border-radius: 0;
     overflow: hidden;
     position: relative;
 }

 .case-thumb img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
     transform: scale(1.02);
     transition: transform .35s ease, filter .35s ease;
     filter: saturate(1.0);
 }

 .case-card:hover .case-thumb img {
     transform: scale(1.06);
     filter: saturate(1.08);
 }

 .case-meta {
     margin-top: 12px;
     display: flex;
     flex-direction: column;
     gap: 4px;
 }

 .case-tag {
     font-size: 13px;
     color: var(--muted);
     text-transform: lowercase;
 }

 .case-title {
     font-size: 18px;
     font-weight: 700;
     color: var(--link);
     line-height: 1.25;
 }

 .cases-modal {
     position: fixed;
     inset: 0;
     background: var(--overlay);
     z-index: 9999;
     display: none;
     align-items: center;
     justify-content: center;
     padding: 24px;
 }

 .cases-modal.is-open {
     display: flex;
 }

 .cases-modal__close {
     position: fixed;
     top: 18px;
     right: 18px;
     width: 44px;
     height: 44px;
     border: 0;
     border-radius: 999px;
     background: rgba(255, 255, 255, .12);
     color: #fff;
     cursor: pointer;
     display: grid;
     place-items: center;
     font-size: 22px;
     line-height: 0;
     transition: background .2s ease;
 }

 .cases-modal__close:hover {
     background: rgba(255, 255, 255, .18);
 }

 .cases-slider {
     width: min(1200px, 100%);
     height: min(78vh, 820px);
     position: relative;
 }


 .cases-slider .swiper-slide {
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .cases-slider img {
     max-width: 80%;
     max-height: 100%;
     object-fit: contain;
     display: block;
     user-select: none;
     -webkit-user-drag: none;
 }

 .cases-slider .swiper-button-prev,
 .cases-slider .swiper-button-next {
     color: #fff;
     width: 56px;
     height: 56px;
     border-radius: 999px;
     background: rgba(255, 255, 255, .10);
     backdrop-filter: blur(6px);
     transition: background .2s ease;
 }

 .cases-slider .swiper-button-prev:hover,
 .cases-slider .swiper-button-next:hover {
     background: rgba(255, 255, 255, .16);
 }

 .cases-slider .swiper-button-prev:after,
 .cases-slider .swiper-button-next:after {
     font-size: 18px;
     font-weight: 800;
 }

 .cases-slider .swiper-pagination-bullet {
     background: rgba(255, 255, 255, .55);
 }

 .cases-slider .swiper-pagination-bullet-active {
     background: #fff;
 }

 .no-scroll {
     overflow: hidden;
 }


 .zoom-wrap {
     width: 100%;
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     overflow: hidden;
 }

 .zoom-img {
     max-width: 100%;
     max-height: 100%;
     object-fit: contain;
     display: block;
     cursor: zoom-in;
     transform: translate3d(0, 0, 0) scale(1);
     transform-origin: 50% 50%;
     will-change: transform;
     pointer-events: auto;
 }

 .zoom-wrap {
     pointer-events: none;
 }

 .zoom-wrap .zoom-img {
     pointer-events: auto;
 }

 @media (max-width: 860px) {

     .cases_inner {
         grid-template-columns: 1fr;
     }

     .page-title {
         font-size: 34px;
     }

     .cases-slider {
         height: 78vh;
     }


     .cases-slider .swiper-button-prev,
     .cases-slider .swiper-button-next {
         width: 40px;
         height: 40px;
     }

     .cases-slider .swiper-button-prev:after,
     .cases-slider .swiper-button-next:after {
         font-size: 12px;
     }
 }