/* ===== Shared components: horizontal sliders, project cards, gallery grid + lightbox, CTA band ===== */
/* ===== Horizontal sliders (auto right->left + drag/arrows) ===== */
.projects{padding-bottom:84px}
.slider-wrap{position:relative}
.h-slider{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;padding:14px 0 26px;cursor:grab;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);overscroll-behavior-x:contain}
.h-slider::-webkit-scrollbar{display:none}
.h-slider.dragging{cursor:grabbing;user-select:none}
.h-slider.dragging *{pointer-events:none}
.h-track{display:flex;gap:26px;width:max-content;padding:0 13px}
.sl-btn{position:absolute;top:calc(50% - 8px);transform:translateY(-50%);z-index:5;width:46px;height:46px;border-radius:50%;border:0;background:#fff;color:var(--blue);font-size:1.7rem;line-height:1;cursor:pointer;box-shadow:0 8px 22px rgba(11,31,77,.25);transition:.25s}
.sl-btn:hover{background:var(--grad);color:#fff;transform:translateY(-50%) scale(1.12)}
.sl-btn.prev{left:max(10px,calc((100vw - 1240px)/2 - 10px))}
.sl-btn.next{right:max(10px,calc((100vw - 1240px)/2 - 10px))}

/* ===== Gallery ===== */
.gal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.g-item{position:relative;overflow:hidden;border-radius:var(--radius);aspect-ratio:4/3;cursor:zoom-in;background:#dfe9ff;box-shadow:0 8px 22px rgba(11,31,77,.12);outline:0;transition:transform .4s,box-shadow .4s}
.g-item img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.g-item:hover,.g-item:focus-visible{transform:translateY(-6px);box-shadow:0 22px 44px rgba(10,108,255,.28)}
.g-item:hover img{transform:scale(1.1)}
.g-item figcaption{position:absolute;left:0;right:0;bottom:0;padding:34px 14px 12px;color:#fff;font-weight:700;font-size:.9rem;background:linear-gradient(180deg,transparent,rgba(6,20,55,.85));transform:translateY(100%);transition:transform .35s}
.g-item:hover figcaption,.g-item:focus-visible figcaption{transform:none}
.g-zoom{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.9);color:var(--blue);display:grid;place-items:center;font-size:1rem;opacity:0;transform:scale(.7);transition:.3s}
.g-item:hover .g-zoom{opacity:1;transform:none}
.lightbox{position:fixed;inset:0;z-index:300;background:rgba(4,10,32,.92);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;padding:30px}
.lightbox.open{opacity:1;visibility:visible}
.lightbox img{max-width:min(1100px,92vw);max-height:80vh;border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.6);transform:scale(.95);transition:transform .3s}
.lightbox.open img{transform:none}
.lb-close,.lb-nav{position:absolute;border:0;background:rgba(255,255,255,.16);color:#fff;border-radius:50%;cursor:pointer;transition:.25s;backdrop-filter:blur(6px)}
.lb-close:hover,.lb-nav:hover{background:#fff;color:var(--blue)}
.lb-close{top:20px;right:20px;width:44px;height:44px;font-size:1.1rem}
.lb-nav{top:50%;transform:translateY(-50%);width:50px;height:50px;font-size:2rem;line-height:1}
.lb-prev{left:20px}.lb-next{right:20px}
.lb-cap{position:absolute;bottom:22px;left:0;right:0;text-align:center;color:#dbe6ff;font-weight:600}

.project-card{width:320px;flex:0 0 320px;white-space:normal;background:#fff;border-radius:var(--radius);overflow:hidden;border:1px solid #e3ebfb;box-shadow:0 10px 26px rgba(11,31,77,.1);transition:transform .4s,box-shadow .4s}
.project-card:hover{transform:translateY(-10px) rotateX(4deg) scale(1.03);box-shadow:0 28px 52px rgba(10,108,255,.28)}
.p-img{overflow:hidden;aspect-ratio:16/10;background:#dfe9ff}
.p-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.project-card:hover .p-img img{transform:scale(1.12)}
.p-body{padding:18px 20px 20px}
.p-body small{color:var(--purple);font-weight:700;font-size:.74rem;letter-spacing:.05em;text-transform:uppercase}
.p-body h3{font-size:1.05rem;color:var(--navy);margin:4px 0 10px}
.p-link{font-weight:700;font-size:.88rem;color:var(--blue);transition:.25s}
.p-link:hover{color:var(--purple);letter-spacing:.03em}

/* ===== CTA ===== */
.cta{background:var(--grad-dark);color:#fff;padding:54px 0}
.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.cta h2{font-size:clamp(1.4rem,2.6vw,2rem);margin-bottom:6px}
.cta p{color:#cfdcff}
.cta-btns{display:flex;gap:14px;flex-wrap:wrap}


@media (max-width:900px){
  .gal-grid{grid-template-columns:repeat(2,1fr)}
  .sl-btn{display:none}
}
@media (max-width:640px){
  .gal-grid{gap:12px}
  .project-card{width:270px;flex-basis:270px}
  .cta-inner{text-align:center;justify-content:center}
  .cta-btns{justify-content:center}
}