/* ==========================================================================
   REUSABLE COMPONENT: INDUSTRY CHALLENGES TO INCEPBIO DELIVERS
   ========================================================================== */
.io-comparison-section { padding: 30px 0 60px; background: var(--white, #ffffff); font-family: 'Plus Jakarta Sans', sans-serif !important; }
.io-comparison-section .io-shell { max-width: 1360px; margin: 0 auto; padding: 0 32px; width: 100%; }
.io-comparison-section .io-section-head { text-align: center; margin-bottom: 70px; padding: 60px 40px; background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(135deg, #00C6B5 0%, #011C38 100%) border-box; border-radius: 32px; border: 4px solid transparent; box-shadow: 0 20px 60px rgba(1, 28, 56, 0.1); position: relative; max-width: 900px; margin-left: auto; margin-right: auto; overflow: hidden; }
.io-comparison-section .io-section-head .io-tag { display: inline-block; padding: 8px 24px; background: linear-gradient(135deg, #00C6B5 0%, #007A6E 100%); color: #ffffff; font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: 2px; border-radius: 50px; margin-bottom: 20px; position: relative; z-index: 1; box-shadow: 0 8px 20px rgba(0,198,181,0.3); border: none; }
.io-comparison-section .io-section-head h2 { font-family: 'Plus Jakarta Sans', sans-serif !important; font-size: 42px; font-weight: 800; color: var(--navy, #011C38); line-height: 1.2; position: relative; z-index: 1; margin-bottom: 0; }
.io-comparison-section .io-section-head p { font-family: 'Plus Jakarta Sans', sans-serif !important; max-width: 750px; margin: 24px auto 0; color: #4a5568; font-size: 18px; line-height: 1.6; position: relative; z-index: 1; }
.io-comparison-section .io-text-gradient { background: linear-gradient(135deg, #00C6B5 0%, #007A6E 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

.ibc-tc-rows { position: relative; display: flex; flex-direction: column; gap: 16px; margin: 0 auto; max-width: 1000px; }
.ibc-tc-rows::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); border-left: 2px dashed rgba(0,0,0,0.1); z-index: 0; }
.ibc-tc-row { display: flex; align-items: stretch; justify-content: space-between; position: relative; z-index: 1; transition: transform 0.3s ease; }
.ibc-tc-row:hover { transform: scale(1.02); }
.ibc-tc-card { flex: 0 0 45%; background: #fff; border-radius: 12px; padding: 24px 28px; display: flex; align-items: center; gap: 18px; box-shadow: 0 10px 30px rgba(0,0,0,0.06); border: 1px solid rgba(0,0,0,0.08); transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); }
.ibc-tc-row:hover .ibc-tc-card { box-shadow: 0 15px 40px rgba(0,0,0,0.1); transform: translateY(-3px); }

.ibc-tc-card-challenge { background: #FFF8F2; border: 1px solid rgba(194, 122, 61, 0.2); }
.ibc-tc-card-challenge .ibc-tc-icon { background: linear-gradient(135deg, #883B00 0%, #E8833A 100%); color: #fff; width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; box-shadow: 0 4px 10px rgba(136, 59, 0, 0.3); }
.ibc-tc-card-challenge h4 { font-family: 'Plus Jakarta Sans', sans-serif !important; color: #111; font-size: 1.05rem; font-weight: 700; margin: 0; line-height: 1.4; }
.ibc-tc-card-challenge .ibc-label { font-size: 0.75rem; font-weight: 700; letter-spacing: 1px; color: #C27A3D; margin-bottom: 6px; display: block; }

.ibc-tc-card-solution { background: #F0FBF9; border: 1px solid rgba(0, 207, 187, 0.2); }
.ibc-tc-card-solution .ibc-tc-icon { background: linear-gradient(135deg, #004D88 0%, #009C8D 100%); color: #fff; width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; box-shadow: 0 4px 10px rgba(0, 77, 136, 0.3); }
.ibc-tc-card-solution h4 { font-family: 'Plus Jakarta Sans', sans-serif !important; color: #007A6E; font-size: 1.05rem; font-weight: 700; margin: 0; line-height: 1.4; }
.ibc-tc-card-solution .ibc-label { font-size: 0.75rem; font-weight: 700; letter-spacing: 1px; color: #009C8D; margin-bottom: 6px; display: block; }

.ibc-tc-arrow-circle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 32px; height: 32px; background: #fff; color: #009C8D; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 15.5px; line-height: 1.65; font-weight: 500; box-shadow: 0 2px 8px rgba(0, 156, 141, 0.2); z-index: 2; border: 1px solid #009C8D; }

@media (max-width: 991px) {
  .io-comparison-section .io-section-head { padding: 40px 24px; border-radius: 20px; margin-bottom: 50px; }
  .io-comparison-section .io-section-head h2 { font-size: 32px; }
  .io-comparison-section .io-section-head p { font-size: 16px; margin-top: 16px; }
}
@media (max-width: 768px) {
  .io-comparison-section { padding: 40px 0; }
  .ibc-tc-row { flex-direction: column; gap: 20px; margin-bottom: 30px; padding-bottom: 20px; border-bottom: 1px dashed rgba(0,0,0,0.1); }
  .ibc-tc-rows::before { display: none; }
  .ibc-tc-card { flex: 1 1 auto; padding: 20px; }
  .ibc-tc-arrow-circle { position: relative; top: auto; left: auto; transform: rotate(90deg); margin: -25px auto; z-index: 3; }
}

/* Fix global gradient text override making card h4 invisible */
.ibc-tc-card-challenge h4 {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: #111 !important;
  color: #111 !important;
}

.ibc-tc-card-solution h4 {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: #007A6E !important;
  color: #007A6E !important;
}