/* iManage сайт — 3D настолен компютър (imac.js): бяла рамка на екрана, долна лента в цвета на марката,
   тяло от 6 слоя (дебелина ~12 px), стойка. Наклон: --ry / --rx за всеки екран + --my / --mx от мишката. */
.imac { --chin: #b9cbe6; --metal: #d9e3f0; position: relative; perspective: 2200px; padding-bottom: 9%; }
.imac__body {
    position: relative; transform-style: preserve-3d;
    transform: rotateY(calc(var(--ry, 0deg) + var(--my, 0deg))) rotateX(calc(var(--rx, 0deg) + var(--mx, 0deg)));
    transition: transform .5s var(--ease);
}
.imac__layer {   /* гърбът и ръбът — тънки алуминиеви слоеве */
    position: absolute; inset: 0; border-radius: 18px;
    background: linear-gradient(100deg, #eef3f9, var(--metal) 30%, #a9b8cc 55%, var(--metal) 80%, #f3f6fa);
    transform: translateZ(calc(var(--k) * -2px));
}
.imac__layer:nth-child(6) { background: #9fb1c9; box-shadow: 0 50px 90px -30px rgba(12, 35, 64, .5); }
.imac__front { position: relative; transform: translateZ(1px); border-radius: 18px; overflow: hidden; background: #f7f8fa; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9), 0 1px 0 rgba(12, 35, 64, .06); }
.imac__screen { padding: 2.2% 2.2% 1.6%; background: #f7f8fa; }
.imac__screen .browser { margin: 0; border-radius: 4px; border: 0; box-shadow: 0 0 0 1px rgba(12, 35, 64, .18); }
/* екранът е 16:9; по-висока снимка (напр. таблото) се плъзга бавно отгоре надолу */
.imac .browser__body:has(> img), .imac .browser__body:has(> .gal__pane) { aspect-ratio: 16 / 9; overflow: hidden; }
.imac .browser__body > img, .imac .gal__pane > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; }
.imac .gal__pane { height: 100%; margin: 0; }
@media (prefers-reduced-motion: no-preference) {
    .imac .browser__body > img, .imac .gal__pane > img { animation: imac-scroll 16s ease-in-out 1.5s infinite alternate; }
}
@keyframes imac-scroll { 0%, 12% { object-position: 50% 0%; } 88%, 100% { object-position: 50% 100%; } }
.imac__chin { height: 0; padding-top: 6.8%; background: linear-gradient(180deg, color-mix(in srgb, var(--chin) 86%, #fff), var(--chin)); }
.imac__glare { position: absolute; inset: 0; pointer-events: none; transform: translateZ(1px); background: linear-gradient(115deg, rgba(255, 255, 255, .28) 0%, rgba(255, 255, 255, .06) 24%, transparent 40%); }

/* стойката — отзад и малко под екрана */
.imac__stand { position: absolute; left: 50%; bottom: 0; width: 24%; height: 12%; transform: translateX(-50%); pointer-events: none; }
.imac__neck { position: absolute; left: 12%; right: 12%; top: 0; bottom: 14%; border-radius: 0 0 6px 6px; background: linear-gradient(90deg, #a9b8cc, var(--metal) 40%, #eef3f9 60%, #a9b8cc); clip-path: polygon(6% 0, 94% 0, 100% 100%, 0 100%); }
.imac__foot { position: absolute; left: 0; right: 0; bottom: 0; height: 16%; border-radius: 4px 4px 10px 10px; background: linear-gradient(180deg, #f3f6fa, #b9c6d8); box-shadow: 0 14px 22px -8px rgba(12, 35, 64, .4); }

.section--deep .imac { --chin: #5b84c4; --metal: #c6d3e6; }
.imac:has(.browser[hidden]) { display: none; }   /* „Вижте как работи“ — при записа на телефона */

/* наклоните по места */
.how .imac { --ry: -9deg; --rx: 3deg; }
.section--deep .imac { --rx: 7deg; }
.gal .imac { --ry: 8deg; --rx: 3deg; }
.imac:hover { --ry: 0deg; --rx: 0deg; }
@media (max-width: 760px) { .imac { --ry: 0deg !important; --rx: 2deg !important; } }
@media (prefers-reduced-motion: reduce) { .imac__body { transition: none; } }