/* OpenNeo AI — Global Consumer Insight Engine product page (marketing-light voice) */

/* Living hover lift on real cards on this page */
.card {
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 40px rgba(0, 153, 153, 0.12), 0 4px 8px rgba(0, 0, 0, 0.04);
}

/* Ambient, living glow on the capability-matrix band */
.cap-matrix { position: relative; overflow: hidden; }
.cap-matrix::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 45% 40% at 85% 10%, rgba(0, 153, 153, 0.1) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 10% 90%, rgba(0, 107, 107, 0.07) 0%, transparent 60%);
  pointer-events: none;
}
.cap-matrix > .container { position: relative; z-index: 1; }

/* Capability matrix: 2x2 equal quadrants (no size voids); ScanAgent
   is distinguished by colour, not by being stretched. */
.csm-grid--capabilities { grid-template-columns: repeat(2, 1fr); }
.csm-grid--capabilities > .card { min-height: 200px; }
.csm-grid--capabilities > .card:nth-child(1) {
  color: #ffffff;
  background: linear-gradient(150deg, #063e3e 0%, var(--color-primary-text) 60%, var(--color-primary-dark) 100%);
  border-color: transparent;
  box-shadow: 0 18px 48px rgba(6, 62, 62, 0.26);
}
.csm-grid--capabilities > .card:nth-child(1):hover {
  box-shadow: 0 24px 56px rgba(6, 62, 62, 0.34);
}
.csm-grid--capabilities > .card:nth-child(1) .card-title { color: #ffffff; }
.csm-grid--capabilities > .card:nth-child(1) .card-text { color: rgba(255, 255, 255, 0.84); }
.csm-grid--capabilities > .card:nth-child(1) .card-icon {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.22);
  color: #ffffff;
  box-shadow: none;
}

/* Service modes: 3 equal cards (no tall void); first card tinted. */
.csm-grid--services > .card:nth-child(1) {
  background: var(--color-primary-subtle);
  border-color: rgba(0, 153, 153, 0.16);
}

/* Responsive collapse (override inline grid-template-columns where present) */
@media (max-width: 1024px) {
  .csm-grid--services { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 768px) {
  .csm-grid--capabilities,
  .csm-grid--services { grid-template-columns: 1fr !important; }
}