/* Portfolio section — reutilitzable */
.pf-section{padding:100px 0;background:#f8f8fa}
.pf-header{text-align:center;margin-bottom:64px}
.pf-header p{color:#52525b;font-size:17px;max-width:480px;margin:12px auto 0}

.carousel-wrap{position:relative;margin-bottom:80px;overflow:hidden}
.carousel-track{display:flex;gap:0;transition:transform 0.6s cubic-bezier(0.25,1,0.5,1)}
.carousel-slide{min-width:50%;flex-shrink:0;padding:0 12px}
.project-card{background:#fff;border-radius:20px;padding:20px 16px 14px;border:1px solid #e4e4e7;transition:box-shadow 0.4s,transform 0.4s;display:block;text-decoration:none;color:inherit}
.project-card:hover{box-shadow:0 12px 40px rgba(0,0,0,0.08);transform:translateY(-4px)}
.carousel-arrows{display:flex;justify-content:center;gap:12px;margin-top:20px}
.carousel-arrows button{width:44px;height:44px;border-radius:50%;border:1px solid #e4e4e7;background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.3s;font-size:18px;color:#52525b}
.carousel-arrows button:hover{border-color:#4967E9;color:#4967E9}
.carousel-arrows button:disabled{opacity:0.25;cursor:default}
.carousel-dots{display:flex;justify-content:center;gap:6px;margin-top:12px}
.carousel-dot{width:8px;height:8px;border-radius:50%;background:#e4e4e7;border:none;cursor:pointer;transition:all 0.3s}
.carousel-dot.active{background:#4967E9;width:24px;border-radius:4px}

.mk-scene{position:relative;width:100%;aspect-ratio:16/10}
.mk-sc{position:absolute;border-radius:8px;overflow:hidden;box-shadow:0 4px 16px rgba(0,0,0,0.06);z-index:1;transition:all 0.55s cubic-bezier(0.25,1,0.5,1);cursor:pointer;filter:grayscale(100%) opacity(0.4)}
.mk-sc img{width:100%;height:100%;object-fit:cover;display:block}
.mk-s1{width:46%;aspect-ratio:16/9;top:0;left:0}
.mk-s2{width:46%;aspect-ratio:16/9;top:0;right:0;left:auto}
.mk-s3{width:46%;aspect-ratio:16/9;bottom:0;left:0;top:auto}
.mk-s4{width:46%;aspect-ratio:16/9;bottom:0;right:0;left:auto;top:auto}
.mk-laptop{position:absolute;z-index:10;left:50%;top:50%;transform:translate(-50%,-50%);width:58%;pointer-events:none}
.mk-laptop img{width:100%;height:auto;display:block;filter:drop-shadow(0 8px 24px rgba(0,0,0,0.12))}
.mk-scene:hover .mk-sc,.mk-scene.active .mk-sc{filter:grayscale(0%) opacity(1)}
.mk-scene:hover .mk-s1,.mk-scene.active .mk-s1{width:50%;top:-3%;left:-3%;box-shadow:0 8px 28px rgba(0,0,0,0.1)}
.mk-scene:hover .mk-s2,.mk-scene.active .mk-s2{width:50%;top:-3%;right:-3%;box-shadow:0 8px 28px rgba(0,0,0,0.1)}
.mk-scene:hover .mk-s3,.mk-scene.active .mk-s3{width:50%;bottom:-3%;left:-3%;box-shadow:0 8px 28px rgba(0,0,0,0.1)}
.mk-scene:hover .mk-s4,.mk-scene.active .mk-s4{width:50%;bottom:-3%;right:-3%;box-shadow:0 8px 28px rgba(0,0,0,0.1)}
.mk-sc:hover{z-index:25!important;transform:scale(1.06);box-shadow:0 16px 48px rgba(0,0,0,0.18)!important;filter:grayscale(0%) opacity(1)!important}

.bb-slider{position:relative;margin-bottom:40px;padding:0 8px}
.bb-viewport{overflow:hidden;border-radius:16px}
.bb-track{display:flex;gap:24px;transition:transform .55s cubic-bezier(.25,1,.5,1)}
.bb-track .bb-wrap{flex:0 0 calc(50% - 12px);min-width:0}
.bb-controls{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:28px}
.bb-arrow{width:50px;height:50px;border-radius:50%;background:#fff;border:1px solid #e4e4e7;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.06);font-size:18px;color:#1c1c22;transition:all .3s;display:flex;align-items:center;justify-content:center}
.bb-arrow:hover:not(:disabled){border-color:#4967E9;color:#fff;background:#4967E9;transform:translateY(-2px);box-shadow:0 8px 22px rgba(58,92,247,.22)}
.bb-arrow:disabled{opacity:.3;cursor:default}
.bb-arrow.pulse{animation:btnPulseLila 1.8s ease-in-out infinite;box-shadow:0 6px 22px rgba(139,92,246,.35)}
.bb-count{font-size:12px;color:#8a8a96;font-weight:500;min-width:54px;text-align:center;letter-spacing:.02em}
.bb-count b{color:#4967E9;font-weight:600}
.bb-row-head{text-align:center;margin-bottom:24px}
.bb-row-head p{color:#8a8a96;font-size:14px;margin-top:4px}
.bb-wrap{background:#fff;border-radius:16px;padding:20px;border:1px solid #e4e4e7;box-shadow:0 2px 12px rgba(0,0,0,0.02)}
.bb-head{text-align:center;margin-bottom:12px}
.bb-head p{color:#8a8a96;font-size:11px;margin-top:2px}
.bb-head .label{font-size:10px;margin-bottom:4px}
.flipbook{position:relative;width:100%;aspect-ratio:16/9;perspective:1600px;overflow:hidden;border-radius:6px;background:#f1f1f3}
.flipbook-pages{position:relative;width:100%;height:100%;transform-style:preserve-3d}
.fp{position:absolute;width:100%;height:100%;transform-origin:left center;transform-style:preserve-3d;transition:transform 0.9s cubic-bezier(0.645,0.045,0.355,1);cursor:pointer}
.fp.flipped{transform:rotateY(-180deg)}
.fp-front,.fp-back{position:absolute;width:100%;height:100%;backface-visibility:hidden;overflow:hidden}
.fp-front{z-index:2}.fp-back{transform:rotateY(180deg)}
.fp-front img,.fp-back img{width:100%;height:100%;object-fit:cover;display:block;background:#fff}
.fp-current{position:absolute;width:100%;height:100%;overflow:hidden;z-index:0}
.fp-current img{width:100%;height:100%;object-fit:cover;display:block;background:#fff}
.bb-progress{width:100%;height:2px;background:#f1f1f3;border-radius:2px;margin-top:6px;overflow:hidden}
.bb-progress-bar{height:100%;background:#4967E9;border-radius:2px;transition:width 0.5s}
.bb-nav{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:8px}
.bb-nav button{font-family:inherit;font-size:11px;font-weight:600;padding:6px 16px;border-radius:100px;border:1px solid #e4e4e7;background:#fff;color:#1c1c22;cursor:pointer;transition:all 0.3s}
.bb-nav button:hover{border-color:#4967E9;color:#4967E9}
.bb-nav button:disabled{opacity:0.25;cursor:default}
.bb-indicator{font-size:11px;color:#8a8a96;font-weight:500;min-width:50px;text-align:center}
@keyframes btnPulse{0%,100%{box-shadow:0 0 0 0 rgba(73,103,233,0)}50%{box-shadow:0 0 0 6px rgba(73,103,233,0.2)}}
@keyframes btnPulseLila{0%,100%{box-shadow:0 0 0 0 rgba(139,92,246,0);transform:scale(1)}50%{box-shadow:0 0 0 10px rgba(139,92,246,0);transform:scale(1.06);border-color:#8B5CF6;color:#8B5CF6}}
.bb-nav button.pulse{animation:btnPulseLila 1.8s ease-in-out infinite;border-color:#8B5CF6!important;color:#8B5CF6}
.carousel-arrows button#carNext:not(:disabled){animation:btnPulseLila 1.8s ease-in-out infinite}

.pf-marquee{overflow:hidden;position:relative;width:100vw;margin-left:calc(-50vw + 50%)}
.pf-marquee::before,.pf-marquee::after{content:'';position:absolute;top:0;bottom:0;width:100px;z-index:2;pointer-events:none}
.pf-marquee::before{left:0;background:linear-gradient(to right,#f8f8fa,transparent)}
.pf-marquee::after{right:0;background:linear-gradient(to left,#f8f8fa,transparent)}
.pf-marquee .mq-track{display:flex;gap:20px;width:max-content;animation:mqScroll 60s linear infinite}
.pf-marquee .mq-item{flex-shrink:0;width:340px;height:192px;border-radius:12px;overflow:hidden;border:1px solid #e4e4e7;filter:grayscale(80%) opacity(0.5);transition:filter 0.4s,transform 0.3s,box-shadow 0.3s}
.pf-marquee .mq-item:hover{filter:grayscale(0%) opacity(1);transform:scale(1.03);box-shadow:0 8px 24px rgba(0,0,0,0.1)}
.pf-marquee .mq-item img{width:100%;height:100%;object-fit:cover;display:block}
@keyframes mqScroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

@media(max-width:768px){
  .carousel-slide{min-width:100%}
  .bb-track .bb-wrap{flex:0 0 100%}
  .bb-arrow{width:42px;height:42px;font-size:16px}
  .bb-wrap{padding:16px}
}