.transformations { background: #f4f8f5; }
.transformation-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.transformation-card { position: relative; aspect-ratio: 1 / 1; overflow: hidden; border: 0; border-radius: 16px; padding: 0; background: #dce8df; cursor: zoom-in; box-shadow: 0 8px 24px rgba(15, 23, 42, .08); }
.transformation-card::after { content: "View result"; position: absolute; inset: auto 12px 12px; padding: 7px 10px; border-radius: 99px; color: #fff; background: rgba(23, 35, 60, .78); font-size: .78rem; font-weight: 700; opacity: 0; transform: translateY(5px); transition: .2s; }
.transformation-card:hover::after, .transformation-card:focus-visible::after { opacity: 1; transform: translateY(0); }
.transformation-card:focus-visible { outline: 3px solid #273c98; outline-offset: 3px; }
.transformation-card img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .3s ease; }
.transformation-card:hover img { transform: scale(1.05); }
.transformation-modal { width: min(92vw, 850px); max-width: none; padding: 0; border: 0; background: transparent; overflow: visible; }
.transformation-modal::backdrop { background: rgba(8, 15, 31, .85); backdrop-filter: blur(4px); }
.transformation-modal-content { position: relative; display: grid; place-items: center; min-height: min(80vh, 720px); }
.modal-image { max-width: 100%; max-height: min(78vh, 720px); border-radius: 12px; box-shadow: 0 22px 65px rgba(0, 0, 0, .42); }
.modal-close, .modal-nav { position: absolute; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; color: #fff; background: rgba(23, 35, 60, .86); font-size: 1rem; cursor: pointer; }
.modal-close { top: 12px; right: 12px; }
.modal-prev { left: 12px; top: 50%; transform: translateY(-50%); }
.modal-next { right: 12px; top: 50%; transform: translateY(-50%); }
.modal-count { position: absolute; bottom: -2px; margin: 0; padding: 6px 12px; border-radius: 99px; color: #fff; background: rgba(23, 35, 60, .86); font-weight: 700; font-size: .85rem; }
.modal-close:hover, .modal-nav:hover { background: #47b847; }
@media (max-width: 850px) { .transformation-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .transformation-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .modal-nav { width: 40px; height: 40px; } }