/* četiri vrste stranica: prave stranice u karticama umjesto crteža; medij preko cijele širine kartice */
.types .type { display: block; }
.types .type > div:last-child { max-width: 560px; }
.type-media { position: relative; overflow: hidden; margin-bottom: 22px; border: 1px solid #d0d3d5; background: #e7e9eb; aspect-ratio: 16 / 10; display: block; }
.type-num { position: absolute; left: 14px; bottom: 6px; z-index: 3; font: 600 72px/1 Barlow, 'Arial Narrow', sans-serif; color: rgba(32, 34, 36, 0.62); pointer-events: none; }
.type-media .phones { position: absolute; inset: 0; display: flex; justify-content: center; align-items: flex-start; gap: 6%; padding: 6% 8% 0; }
.type-media .frame { display: block; position: relative; overflow: hidden; width: 34%; aspect-ratio: 390 / 780; border: 4px solid #0b0e0c; border-radius: 18px; background: #fff; box-shadow: 0 30px 50px -28px rgba(0, 0, 0, 0.7); }
.type-media .frame:nth-child(2) { margin-top: 10%; }
.type-media .frame img { display: block; width: 100%; height: auto; will-change: transform; }
@supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .type-media .frame img { animation: vr-frame linear both; animation-timeline: view(); animation-range: entry 80% exit 20%; } } }
@keyframes vr-frame { from { transform: translateY(0); } to { transform: translateY(-67.5%); } }
@supports not (animation-timeline: view()) { @media (hover: hover) and (prefers-reduced-motion: no-preference) { .type-media .frame img { transition: transform 9s linear; } .type-media:hover .frame img { transform: translateY(-67.5%); } } }
.type-video a, .type-3d a { position: absolute; inset: 0; display: block; }
.type-clip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.type-3d { background: #020617; }
.type-3d .lovable-hero-bg { position: absolute; inset: 0; overflow: hidden; }
.type-3d .lovable-hero-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.1; }
.type-3d .lovable-hero-gradient { position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(2, 6, 23, 0.45), rgba(2, 6, 23, 0.6)); }
.type-3d .hero3d-canvas { filter: brightness(0.62) saturate(0.85); }
.type-3d .type-num, .type-video .type-num { color: rgba(244, 245, 246, 0.6); }