.project-delivery { grid-template-columns: 1.25fr .75fr; }
.project-delivery .project-info { background: #111722; color: var(--paper); }
.delivery-previews { position: relative; display: block; padding: 0; overflow: hidden; isolation: isolate; background: #17447f; background-image: linear-gradient(90deg,rgba(8,11,16,.18) 1px,transparent 1px),radial-gradient(circle at 55% 40%,rgba(126,175,240,.5),transparent 38%),linear-gradient(135deg,#245a9e,#123c70); background-size: 13% 100%,auto,auto; }
.delivery-previews::before { content: "CONCEITO / MOBILE DELIVERY"; position: absolute; left: 25px; top: 23px; z-index: 5; color: rgba(236,244,255,.86); font: 10px 'DM Mono'; letter-spacing: .08em; }
.delivery-previews::after { content: ""; position: absolute; z-index: -1; width: 560px; height: 560px; left: 50%; top: 48%; border: 1px solid rgba(205,228,255,.3); border-radius: 50%; box-shadow: 0 0 0 72px rgba(205,228,255,.06),0 0 0 144px rgba(205,228,255,.035); transform: translate(-50%,-50%); animation: delivery-orbit 16s linear infinite; }
.app-preview { position: absolute; z-index: 2; width: clamp(120px,15vw,190px); height: clamp(220px,27vw,335px); overflow: hidden; border: 1px solid rgba(205,228,255,.74); border-radius: 25px; background: #080b10; box-shadow: 13px 18px 0 rgba(5,18,37,.23),0 18px 35px rgba(5,18,37,.4); transition: transform .55s cubic-bezier(.2,.8,.2,1), box-shadow .55s; animation: device-float 6s ease-in-out infinite; }
.app-preview img { display: block; position: absolute; left: 50%; top: 50%; height: 108%; width: auto; transform: translate(-50%,-50%); }
.app-preview:nth-of-type(1) { left: 9%; top: 19%; transform: rotate(-13deg); animation-delay: -1.5s; }.app-preview:nth-of-type(2) { left: 39%; top: 12%; transform: rotate(2deg); z-index: 3; animation-delay: -3s; }.app-preview:nth-of-type(3) { right: 8%; top: 23%; transform: rotate(13deg); animation-delay: -4.5s; }
.development-card { position: absolute; z-index: 4; right: 8%; bottom: 8%; display: grid; place-content: center; gap: 8px; width: 137px; aspect-ratio: 1; padding: 18px; color: #eef5ff; border: 1px solid #eef5ff; background: #080b10; box-shadow: 11px 12px 0 rgba(5,18,37,.32); transform: rotate(-8deg); animation: status-float 5.5s ease-in-out infinite; }
.development-card svg { width: 30px; height: 30px; stroke: #76a9ef; stroke-width: 1.7; fill: none; }.development-card b { font: 600 12px/.95 'DM Mono'; letter-spacing: -.04em; }.development-card small { color: #8bb6f0; font: 9px 'DM Mono'; }
.delivery-brand-mark { position: absolute; z-index: 5; bottom: 17px; left: 22px; right: auto; width: 55px; opacity: .88; }
.delivery-previews:hover .app-preview:nth-of-type(1) { transform: rotate(-18deg) translate(-10px,-10px); }.delivery-previews:hover .app-preview:nth-of-type(2) { transform: rotate(0) translateY(-19px) scale(1.045); box-shadow: 18px 28px 48px rgba(5,18,37,.55); }.delivery-previews:hover .app-preview:nth-of-type(3) { transform: rotate(18deg) translate(10px,-8px); }.delivery-previews:hover .development-card { transform: rotate(0deg) scale(1.06); }
@keyframes device-float { 50% { margin-top: -12px; } }@keyframes status-float { 50% { margin-bottom: 11px; } }@keyframes delivery-orbit { to { transform: translate(-50%,-50%) rotate(360deg); } }
@media (max-width:720px) { .project-delivery { grid-template-columns: 1fr; }.project-delivery .project-info { order: 2; }.delivery-previews { height: 490px; }.app-preview { width: 29vw; height: 51vw; border-radius: 15px; }.app-preview:nth-of-type(1) { left: 7%; top: 23%; }.app-preview:nth-of-type(2) { left: 36%; top: 14%; }.app-preview:nth-of-type(3) { right: 6%; top: 25%; }.development-card { width: 104px; right: 8%; bottom: 7%; }.delivery-previews::after { width: 370px; height: 370px; }.delivery-brand-mark { width: 45px; left: 15px; } }