/* Dark Blue Gradient Background - EXACT same as Hero section */
.kima-accelerate-section {
  background: linear-gradient(135deg, #0a1929 0%, #0f2035 50%, #0a1929 100%);
  position: relative;
  overflow: hidden;
}

/* Subtle pattern overlay */
.kima-accelerate-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    linear-gradient(to bottom, transparent 0%, transparent 20%, rgba(255,255,255,0.02) 20%, rgba(255,255,255,0.02) 80%, transparent 80%),
    repeating-linear-gradient(90deg, rgba(0, 97, 255, 0.03) 0px, transparent 2px, transparent 100px);
  opacity: 0.6;
  pointer-events: none;
  z-index: 0;
}

.kima-accelerate-section .container {
  position: relative;
  z-index: 1;
}

/* Section heading styles - matching pillars section */
.kima-accelerate-section .sec-heading .sec-title {
  color: #ffffff;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

.kima-accelerate-section .sec-heading .desc p {
  color: rgba(255, 255, 255, 0.9);
}

/* Grid Layout for ELM Operating System Items - Proper Breakpoints */
.elm-operating-grid {
  display: grid;
  gap: 15px;
  margin-top: 25px;
  /* Default: 2 columns layout - cleaner look */
  grid-template-columns: repeat(2, 1fr);
}

/* Default layout: Item 3 (middle one) spans 2 columns to fill the row */
.elm-operating-grid .elm-operating-item:nth-child(3) {
  grid-column: 1 / -1;
  max-width: 50%;
  margin: 0 auto;
}

/* Alternative 3+2 layout for elm-mini-program page */
.elm-operating-grid.layout-3-2 {
  /* 6 columns layout to allow 3 items (2 cols each) in first row, 2 items (3 cols each) in second row */
  grid-template-columns: repeat(6, 1fr);
}

/* 3+2 layout: First 3 items take 2 columns each */
.elm-operating-grid.layout-3-2 .elm-operating-item:nth-child(1),
.elm-operating-grid.layout-3-2 .elm-operating-item:nth-child(2),
.elm-operating-grid.layout-3-2 .elm-operating-item:nth-child(3) {
  grid-column: span 2;
  max-width: 100%;
  margin: 0;
}

/* 3+2 layout: Items 4 and 5 (second row) - each takes 3 columns to fill the row */
.elm-operating-grid.layout-3-2 .elm-operating-item:nth-child(4),
.elm-operating-grid.layout-3-2 .elm-operating-item:nth-child(5) {
  grid-column: span 3;
}

.elm-operating-item {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 8px;
  padding: 14px 18px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 
    0 8px 20px rgba(0, 0, 0, 0.2),
    0 2px 8px rgba(0, 97, 255, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.elm-operating-item:hover {
  transform: translateY(-4px);
  box-shadow: 
    0 12px 30px rgba(0, 0, 0, 0.25),
    0 4px 16px rgba(0, 97, 255, 0.3),
    0 0 25px rgba(0, 212, 255, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 1);
  border-color: rgba(89, 158, 255, 0.5);
}

.elm-operating-icon {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #0075ff, #599eff);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 3px 8px rgba(0, 97, 255, 0.25);
}

.elm-operating-item:hover .elm-operating-icon {
  transform: scale(1.1);
  box-shadow: 0 5px 16px rgba(0, 97, 255, 0.4), 0 0 20px rgba(0, 212, 255, 0.3);
}

.elm-operating-icon i {
  font-size: 20px;
  color: #ffffff;
  transition: all 0.3s ease;
}

.elm-operating-item:hover .elm-operating-icon i {
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
}

.elm-operating-item h4 {
  font-size: 1.05rem;
  color: #051229;
  margin-bottom: 8px;
  font-weight: 600;
  line-height: 1.3;
  transition: color 0.3s ease;
}

.elm-operating-item:hover h4 {
  color: #0075ff;
}

.elm-operating-item p {
  font-size: 0.875rem;
  color: #364052;
  line-height: 1.4;
  margin: 0;
}

/* Responsive breakpoints - proper grid control */

/* Medium Tablets (991px) */
@media (max-width: 991px) {
  .elm-operating-grid,
  .elm-operating-grid.layout-3-2 {
    gap: 12px;
    /* Switch to 2 columns on medium tablets */
    grid-template-columns: repeat(2, 1fr);
  }
  
  /* Reset grid positioning for medium screens - default layout */
  .elm-operating-grid .elm-operating-item:nth-child(3) {
    max-width: 55%;
  }
  
  /* Reset grid positioning for medium screens - 3+2 layout */
  .elm-operating-grid.layout-3-2 .elm-operating-item:nth-child(1),
  .elm-operating-grid.layout-3-2 .elm-operating-item:nth-child(2),
  .elm-operating-grid.layout-3-2 .elm-operating-item:nth-child(3),
  .elm-operating-grid.layout-3-2 .elm-operating-item:nth-child(4),
  .elm-operating-grid.layout-3-2 .elm-operating-item:nth-child(5) {
    grid-column: span 1;
  }
  
  .elm-operating-item {
    padding: 14px 16px;
  }
}

/* Small Tablets (768px) */
@media (max-width: 768px) {
  .kima-accelerate-section .sec-heading-wrap {
    margin-bottom: 30px;
  }
  
  .elm-operating-grid,
  .elm-operating-grid.layout-3-2 {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  /* Reset centering for single column - default layout */
  .elm-operating-grid .elm-operating-item:nth-child(3) {
    max-width: 100%;
    grid-column: auto;
  }
  
  /* Reset for single column - 3+2 layout */
  .elm-operating-grid.layout-3-2 .elm-operating-item:nth-child(1),
  .elm-operating-grid.layout-3-2 .elm-operating-item:nth-child(2),
  .elm-operating-grid.layout-3-2 .elm-operating-item:nth-child(3),
  .elm-operating-grid.layout-3-2 .elm-operating-item:nth-child(4),
  .elm-operating-grid.layout-3-2 .elm-operating-item:nth-child(5) {
    grid-column: auto;
  }
  
  .elm-operating-item {
    padding: 12px 16px;
  }
}

/* Mobile (575px and below) */
@media (max-width: 575px) {
  .kima-accelerate-section .sec-description {
    font-size: 0.9rem;
  }
  
  .elm-operating-grid {
    gap: 10px;
    margin-top: 20px;
  }
  
  .elm-operating-item {
    padding: 12px 14px;
  }
  
  .elm-operating-item h4 {
    font-size: 1rem;
  }
  
  .elm-operating-item p {
    font-size: 0.85rem;
  }
}