/* --- Slider container & list --- */
/* Override Splide default hidden state since we don't mount Splide JS */
#splide-ai.splide {
  visibility: visible !important;
}


#splide-ai {
  width: 100%;
  padding-bottom: 2rem;
}

#splide-ai .splide__track {
  overflow: hidden;
}

#splide-ai .splide__list {
  display: flex;
  gap: 20px;
  will-change: transform;
}

/* Slide width + animation */
#splide-ai .splide__slide {
  width: 345px;              /* base width */
  flex: 0 0 345px;
  display: flex;
  height: auto;
  transition:
    width 320ms ease-out,
    flex-basis 320ms ease-out;
}

/* The "active" slide – we set .is-active via JS */
#splide-ai .splide__slide.is-active {
  width: 515px;
  flex-basis: 515px;
}

/* --- Card styles (same as before) --- */
.ai-scanner-card,
.ai-agents-card {
  width: 100%;
  border: 1px solid #333333;
  border-radius: 15px;
  background: linear-gradient(
    180deg,
    #0B111A 0%,
    #0D131C 35.27%,
    #151E2B 60.21%,
    #1E2B3E 85.52%,
    #27364C 100%
  );
  z-index: 0;
  position: relative;
}

.ai-scanner-card h1,
.ai-scanner-card p,
.ai-agents-card h1,
.ai-agents-card p {
  color: white;
}

/* gradient overlays */
.ai-scanner-card::before,
.ai-agents-card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
  z-index: -1;
  border-radius: 15px;
}

.ai-scanner-card::before {
  background: linear-gradient(180deg, #653FD5 -35.87%, #26135E 117.81%);
}

.ai-agents-card::before {
  background: linear-gradient(180deg, #2965E7 -35.87%, #182653 117.81%);
}

/* image states */
.ai-scanner-img1 {
  opacity: 1;
  
}

.ai-scanner-img2 {
  position: absolute;
  opacity: 0;
  width: 100%;
  bottom: 32px;
  
}

.ai-agent-img2 {
  opacity: 0;
  bottom: 0px;
  width: 100%;
  
}

.ai-scanner-img1,
.ai-scanner-img2,
.ai-agent-img2 {
  transition:
    opacity 500ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity;
}

/* --- ACTIVE slide effects (replacing :hover) --- */
#splide-ai .splide__slide.is-active .ai-scanner-img1 {
  opacity: 0;
  
}

#splide-ai .splide__slide.is-active .ai-scanner-img2,
#splide-ai .splide__slide.is-active .ai-agent-img2 {
  opacity: 1;
  
}

#splide-ai .splide__slide.is-active .ai-scanner-card::before {
  opacity: 1;
}

#splide-ai .splide__slide.is-active .ai-agents-card::before {
  opacity: 1;
}

.ai-solution-btn{
background: #6d3cff;
    border-radius: 50px;
    color: #fff;
    font-size: 1rem;
    
    text-decoration: none;
    transition: all .2s ease;
}
.ai-solution-btn:hover {
    background: var(--btn-hover-bg);
  color: #fff;
}
/* =========================
   MOBILE GRID ONLY
   (scoped so desktop doesn't break)
========================= */

.ai-suite-mobile-grid .ai-mg-title{
  color:#fff;
  font-family:"Open Sans", sans-serif;
  font-size:28px;
  line-height:1.2;
}

.ai-suite-mobile-grid .ai-mg-subtitle{
  color:#fff;
  font-family:"Open Sans", sans-serif;
  font-size:16px;
  opacity:0.9;
  margin: 0 auto;
  max-width: 320px;
}

/* Card base */
.ai-suite-mobile-grid .ai-mg-card{
  position: relative;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  
  );
  
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 210px; /* keeps all cards consistent */
}

/* Optional colored glow overlay */
.ai-suite-mobile-grid .ai-mg-card::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:0.55;
  pointer-events:none;
}

.ai-suite-mobile-grid .ai-mg-purple::before{
  border-radius: 7.032px;
border: 0.469px solid #595959;
background: linear-gradient(180deg, #112239 0%, #062043 35.27%, #0A2851 60.21%, #0A274F 85.52%, #0A274F 100%);
}

.ai-suite-mobile-grid .ai-mg-blue::before{
 border-radius: 7.032px;
border: 0.469px solid #595959;
background: linear-gradient(180deg, #112239 0%, #062043 35.27%, #0A2851 60.21%, #0A274F 85.52%, #0A274F 100%);
}

/* keep content above overlay */
.ai-suite-mobile-grid .ai-mg-card > *{
  position: relative;
  z-index: 1;
}

.ai-suite-mobile-grid .ai-mg-head{
  text-align: center;
  padding: 4px 6px 8px;
}

.ai-suite-mobile-grid .ai-mg-card-title{
  color:#fff;
  font-family:"Open Sans", sans-serif;
  font-size:16px;
  font-weight:700;
  margin:0 0 6px;
}

.ai-suite-mobile-grid .ai-mg-card-text{
  color:#fff;
  font-family:"Open Sans", sans-serif;
  font-size:11px;
  line-height:1.25;
  opacity:0.9;
  margin:0;
}

/* image area */
.ai-suite-mobile-grid .ai-mg-img{
  margin-top: auto;
  display:flex;
  justify-content:end;
  align-items:flex-end;
  padding-top: 8px;
  height: 140px;
}

.ai-suite-mobile-grid .ai-mg-img img{
  max-height: 150px;
  width: auto;
  display:block;
}

/* tighter on very small phones */
@media (max-width: 360px){
  .ai-suite-mobile-grid .ai-mg-card{ min-height: 250px; }
  .ai-suite-mobile-grid .ai-mg-img img{ max-height: 150px; }
}
.splide__slide{
	cursor:pointer;
}