/*
 * Enterprise services and logo scroller
 */

/* Logo scroller */
@keyframes scroll-logos { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.logo-scroller{width:100%;background:#f7f7f7;padding:24px 0;border-bottom:1px solid #e9ecef;margin-bottom:40px}
.logo-scroller-content{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:24px;padding:0 20px;box-sizing:border-box}
.trusted-by{font-size:.9rem;font-weight:500;color:#777;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap}
.logo-track-container{overflow:hidden;flex-grow:1;-webkit-mask-image:linear-gradient(to right,transparent,black 15%,black 85%,transparent);mask-image:linear-gradient(to right,transparent,black 15%,black 85%,transparent)}
.logo-track{display:flex;align-items:center;width:fit-content;animation:scroll-logos 40s linear infinite}
.logo-track:hover{animation-play-state:paused}
.logo-item{flex-shrink:0;padding:0 40px;height:40px;display:grid;place-items:center}
.logo-item img{max-height:40px;width:auto;opacity:.6;filter:grayscale(100%);transition:all .3s ease}
.logo-item img:hover{opacity:1;filter:grayscale(0%)}

/* Services section */
.services-section{width:100%;max-width:1200px;margin:0 auto 40px auto;padding:0 20px;box-sizing:border-box}
.services-section .services-container{display:flex;background:#fff;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.07);overflow:hidden;position:relative}

/* Left panel */
.services-section .services-info{
  flex-basis:35%;padding:48px;color:#fff;
  background-image:linear-gradient(135deg,rgba(0,10,40,.95),rgba(40,0,60,.9)),url('https://images.unsplash.com/photo-1542706353-838006b5b597?auto=format&fit=crop&w=1200&q=80');
  background-size:cover;background-position:center center;background-blend-mode:multiply;
  display:flex;flex-direction:column;justify-content:center;position:relative;z-index:2;overflow:hidden;
}
.services-section #tech-canvas{position:absolute;top:0;left:0;width:100%;height:100%;display:block;z-index:1}
.services-section .services-info>*{position:relative;z-index:2}
.services-section .services-info h2{font-size:clamp(1.6rem,6vw,2.25rem);font-weight:600;line-height:1.25;margin-bottom:16px}
.services-section .services-info p{font-size:.95rem;font-weight:300;line-height:1.7;opacity:.9;margin-bottom:24px}
.services-section .services-info .btn{
  display:inline-block;background:rgba(255,255,255,.08);color:#fff;padding:12px 24px;border-radius:8px;
  text-decoration:none;font-weight:500;text-align:center;border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(5px);transition:all .3s ease;width:fit-content
}
.services-section .services-info .btn:hover{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.5);transform:translateY(-2px)}

/* Right slider panel */
.services-section .services-slider{
  flex-basis:65%;padding:48px;overflow:hidden;position:relative;z-index:1;
  background-image:linear-gradient(to right,rgba(255,255,255,.95),rgba(255,255,255,.95)),url('https://images.unsplash.com/photo-1542706353-838006b5b597?auto=format&fit=crop&w=1200&q=80');
  background-size:cover;background-position:center center;
}
.services-section .slider-viewport{width:100%;overflow:hidden}
.services-section .slider-track{display:flex;transition:transform .6s cubic-bezier(.45,0,.2,1)}
.services-section .slider-track.no-transition{transition:none}

/* Cards */
.services-section .service-card{
  flex:0 0 calc(33.333% - 20px);margin:0 10px;background-color:#333;background-size:cover;background-position:center;
  border-radius:12px;border:1px solid #e9ecef;box-shadow:0 4px 12px rgba(0,0,0,.04);position:relative;overflow:hidden;height:300px;transition:all .4s ease
}
.services-section .service-card::after{content:"";position:absolute;inset:0;background-size:cover;background-position:center;background-image:inherit;transition:transform .4s ease;z-index:1}
.services-section .service-card:hover::after{transform:scale(1.05)}
.services-section .service-card::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.7) 100%);z-index:2;transition:all .4s ease}
.services-section .service-card:hover::before{background:linear-gradient(180deg,rgba(0,0,0,.3) 0%,rgba(0,0,0,.8) 100%)}

/* Default visible title that fades out on hover for desktop */
.services-section .service-card-title-default{position:absolute;bottom:0;left:0;right:0;padding:24px;color:#fff;z-index:3;opacity:1;transform:translateY(0);transition:all .4s ease}
.services-section .service-card-title-default h3{font-size:1.1rem;font-weight:600;margin:0;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.services-section .service-card:hover .service-card-title-default{opacity:0;transform:translateY(10px)}

/* Content block shown on hover desktop */
.services-section .card-content{position:absolute;bottom:0;left:0;right:0;padding:24px;color:#fff;z-index:3;opacity:0;transform:translateY(20px);transition:all .4s ease}
.services-section .service-card:hover .card-content{opacity:1;transform:translateY(0)}
.services-section .card-content .icon{width:48px;height:48px;margin-bottom:16px;display:grid;place-items:center;border-radius:8px;background:rgba(255,255,255,.15);backdrop-filter:blur(5px);color:#fff;border:1px solid rgba(255,255,255,.3)}
.services-section .card-content .icon svg{width:24px;height:24px}
.services-section .card-content h3{font-size:1.1rem;font-weight:600;margin-bottom:8px}
.services-section .card-content p{font-size:.88rem;line-height:1.6;color:#e0e0e0}

/* Nav */
.services-section .slider-navigation{display:flex;justify-content:flex-end;align-items:center;margin-top:24px;padding:0 10px;gap:12px}
.services-section .nav-arrow{width:40px;height:40px;border-radius:50%;background:#fff;border:1px solid #e0e0e0;box-shadow:0 2px 5px rgba(0,0,0,.05);cursor:pointer;display:grid;place-items:center;color:#555;transition:all .3s ease}
.services-section .nav-arrow:hover{background:#f8f8f8;color:#000;transform:scale(1.05)}
.services-section .nav-arrow svg{width:18px;height:18px}

/* Tablet stacking */
@media (max-width: 992px){
  .services-section .services-container{flex-direction:column}
  .services-section .services-info,
  .services-section .services-slider{flex-basis:100%}
  .services-section .services-slider{padding:48px 24px}
}

/* Mobile: one card per view, always dark overlay, show content by default */
@media (max-width: 768px){
  .services-section .slider-viewport{overflow:hidden}
  .services-section .service-card{flex:0 0 100%;margin:0;height:300px}
  .services-section .service-card::before{background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,.88) 100%) !important;transition:none !important}
  .services-section .service-card::after{transition:none !important;transform:none !important}
  .services-section .service-card-title-default{display:none}
  .services-section .card-content{opacity:1 !important;transform:none !important;padding:18px 18px 20px}
  .services-section .slider-navigation{justify-content:center}
}