/* Floating service preview gallery inspired by the supplied reference. */
.motion-gallery{position:relative;padding:27px 0 0;background:radial-gradient(ellipse at 50% 90%,#4f11164d,transparent 55%),repeating-linear-gradient(90deg,#210a0e 0,#2c0c12 34px,#16070a 70px,#26090e 108px);border-top:1px solid #ffffff14;overflow:hidden}
.gallery-heading{width:min(calc(100% - 48px),var(--max));margin:0 auto;display:flex;align-items:center;justify-content:space-between;color:#d9c7c7}.gallery-kicker{font:800 11px var(--display);letter-spacing:.2em;text-transform:uppercase;color:#ffb0a4}.gallery-heading p{font-size:11px;color:#c39da1;margin:0}
.gallery-window{overflow:hidden;mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%)}.gallery-track{display:flex;align-items:center;gap:22px;width:max-content;padding:24px max(24px,calc((100vw - var(--max))/2)) 31px;animation:gallery-scroll 46s linear infinite;will-change:transform}.motion-gallery:hover .gallery-track{animation-play-state:paused}
.motion-card{width:190px;flex:0 0 190px;color:#17202a;transform:rotate(-4deg);animation:gallery-float 5.8s ease-in-out infinite;animation-delay:calc(var(--card-index,0)*-.62s);transition:transform .34s cubic-bezier(.2,.8,.2,1),filter .3s;filter:drop-shadow(0 15px 16px #0009);will-change:transform;position:relative}.motion-card:nth-child(6n+2){transform:rotate(5deg)}.motion-card:nth-child(6n+3){transform:rotate(-7deg)}.motion-card:nth-child(6n+4){transform:rotate(2deg) scale(1.04)}.motion-card:nth-child(6n+5){transform:rotate(7deg)}.motion-card:nth-child(6n){transform:rotate(-3deg)}.motion-card:hover,.motion-card:focus-within{z-index:3;animation-play-state:paused;transform:translate3d(var(--mx,0px),calc(-18px + var(--my,0px)),0) rotate(0deg) scale(1.09);filter:drop-shadow(0 25px 24px #000c)}
.browser-card{height:230px;background:#eef0ed;border:5px solid #d7d8d4;border-radius:13px;overflow:hidden;box-shadow:inset 0 0 0 1px #fff}.browser-top{height:20px;display:flex;align-items:center;gap:4px;padding:0 7px;background:#d7d8d4}.browser-top span{width:6px;height:6px;border-radius:50%;background:#fd625d}.browser-top span:nth-child(2){background:#ffbd44}.browser-top span:nth-child(3){background:#00ca4e}.browser-top i{height:8px;border-radius:8px;background:#fafafa;flex:1;margin-left:4px}.browser-top b{width:19px;height:7px;border-radius:5px;background:#a6abb0}
.browser-content{height:calc(100% - 20px);padding:17px 13px 12px;background:linear-gradient(145deg,#f3f6f1,#d9e9e2);position:relative;overflow:hidden}.motion-card:nth-child(6n+2) .browser-content{background:linear-gradient(145deg,#e8f9fb,#b8edf0)}.motion-card:nth-child(6n+3) .browser-content{background:linear-gradient(145deg,#1a231f,#435b43);color:#f4f6eb}.motion-card:nth-child(6n+4) .browser-content{background:linear-gradient(145deg,#e8efff,#bfd1f4)}.motion-card:nth-child(6n+5) .browser-content{background:linear-gradient(145deg,#fff4d8,#eed7a0)}.motion-card:nth-child(6n) .browser-content{background:linear-gradient(145deg,#edf7e8,#b6d7ad)}.browser-content small{font:700 6px var(--font);color:#526b59;letter-spacing:.12em;text-transform:uppercase;display:block;margin-bottom:10px}.motion-card:nth-child(6n+3) .browser-content small{color:#d0e6a7}.browser-content strong{font:800 17px/1.05 var(--display);letter-spacing:-.05em;display:block;max-width:145px}.browser-line{height:4px;width:94px;margin-top:9px;border-radius:5px;background:#8eaa9b;opacity:.6}.browser-line.short{width:61px;margin-top:5px}.browser-preview{display:flex;align-items:end;gap:6px;margin-top:14px;height:56px}.browser-preview span{display:block;flex:1;height:95%;border-radius:5px 5px 0 0;background:linear-gradient(0deg,#5d9277,#bad9b5)}.browser-preview span:nth-child(2){height:65%;background:linear-gradient(0deg,#536dad,#9bbdf3)}.browser-preview span:nth-child(3){height:82%;background:linear-gradient(0deg,#db9c6b,#f3d39f)}.browser-button{position:absolute;bottom:12px;left:13px;height:13px;width:58px;border-radius:20px;background:#c9f36b}
.motion-caption{display:flex;justify-content:space-between;align-items:center;padding:10px 2px 0;color:#fff;font:600 11px var(--display);text-shadow:0 2px 8px #000}.motion-caption span{color:#ffb0a4;font-size:10px}.gallery-ribbon{height:30px;background:#d92313;overflow:hidden;transform:skewY(-1deg) translateY(4px);color:#fff}.gallery-ribbon>div{height:100%;width:max-content;display:flex;align-items:center;gap:32px;animation:ribbon-scroll 30s linear infinite;padding-left:20px}.gallery-ribbon span{font:800 10px var(--display);letter-spacing:.15em;text-transform:uppercase;white-space:nowrap}.gallery-ribbon i{font-style:normal;color:#ffd682;margin-left:13px}
.service-card{transition:transform .38s cubic-bezier(.2,.8,.2,1),border-color .28s,background .28s,box-shadow .28s}.service-card:hover{transform:translateY(-13px) rotate(-.8deg) scale(1.025);box-shadow:0 22px 35px #0005}.service-icon{transition:transform .35s cubic-bezier(.2,.8,.2,1),background .25s,color .25s}.service-card:hover .service-icon{transform:translateY(-3px) rotate(-9deg) scale(1.1);background:#c9f36b20;color:#d9ff8d}
@keyframes gallery-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}@keyframes gallery-float{0%,100%{translate:0 0}50%{translate:0 -8px}}@keyframes ribbon-scroll{to{transform:translateX(-50%)}}
@media(max-width:760px){.gallery-heading{width:calc(100% - 36px)}.gallery-track{gap:15px;padding:20px 28px 27px}.motion-card{width:160px;flex-basis:160px}.browser-card{height:202px}.browser-content{padding:14px 11px 10px}.browser-content strong{font-size:15px}.browser-preview{height:48px}.gallery-ribbon{height:27px}}
@media(prefers-reduced-motion:reduce){.gallery-track,.gallery-ribbon>div,.motion-card{animation:none!important;translate:none!important}.motion-card:hover{transform:translateY(-5px) scale(1.02)}}