.insight-carousel { min-width: 0; }

.insight-track { position: relative; min-height: 540px; }

.insight-slide {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto minmax(210px, 1fr) auto auto auto;
  align-content: stretch;
  min-height: 540px;
  padding: 26px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 30px;
  color: #fff;
  box-shadow: 0 28px 55px rgba(0,0,0,.22);
  opacity: 0;
  transform: translateX(24px) scale(.98);
  pointer-events: none;
  transition: opacity .35s ease, transform .35s ease;
}

.insight-slide.active { opacity: 1; transform: none; pointer-events: auto; }
.insight-blue { background: linear-gradient(145deg, #5d5be8, #2587ed); }
.insight-green { background: linear-gradient(145deg, #078d78, #20b998); }
.insight-coral { background: linear-gradient(145deg, #ff883d, #ec4371); }
.insight-teal { background: linear-gradient(145deg, #17386d, #00a5c2); }

.insight-progress { display: flex; gap: 6px; }
.insight-progress i { height: 4px; flex: 1; border-radius: 99px; background: rgba(255,255,255,.35); }
.insight-slide[data-insight="0"] .insight-progress i:nth-child(-n+1),
.insight-slide[data-insight="1"] .insight-progress i:nth-child(-n+2),
.insight-slide[data-insight="2"] .insight-progress i:nth-child(-n+3),
.insight-slide[data-insight="3"] .insight-progress i:nth-child(-n+4) { background: #fff; }

.insight-slide > img {
  width: min(78%, 290px);
  height: 250px;
  align-self: center;
  justify-self: center;
  object-fit: contain;
  filter: drop-shadow(0 22px 24px rgba(20,32,64,.24));
}

.insight-green > img { filter: hue-rotate(80deg) drop-shadow(0 22px 24px rgba(20,32,64,.24)); }
.insight-coral > img { transform: rotate(-5deg); }
.insight-teal > img { filter: hue-rotate(225deg) drop-shadow(0 22px 24px rgba(20,32,64,.24)); }

.insight-meta { display: flex; align-items: center; gap: 9px; margin-bottom: 17px; }
.insight-meta b, .insight-meta span { padding: 6px 10px; border-radius: 99px; font-size: 9px; font-weight: 800; }
.insight-meta b { color: #12304a; background: #caff5a; }
.insight-meta span { background: rgba(255,255,255,.14); }
.insight-slide h3 { margin: 0; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.12; letter-spacing: -.035em; }
.insight-slide p { margin: 13px 0 0; color: rgba(255,255,255,.82); font-size: 12px; line-height: 1.55; }

.insight-controls { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 18px; }
.insight-controls > button { width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.35); border-radius: 12px; color: #08214a; background: #fff; cursor: pointer; }
.insight-dots { display: flex; gap: 7px; }
.insight-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 99px; background: rgba(255,255,255,.38); cursor: pointer; transition: .2s; }
.insight-dots button.active { width: 24px; background: #fff; }

@media (max-width: 980px) {
  .insight-carousel { width: min(520px, 100%); margin: 0 auto; }
}

@media (max-width: 520px) {
  .insight-track, .insight-slide { min-height: 510px; }
  .insight-slide { padding: 22px; grid-template-rows: auto minmax(190px, 1fr) auto auto auto; }
  .insight-slide > img { height: 215px; }
  .insight-slide h3 { font-size: 25px; }
}