:root {
  --icon-bg: var(--accent);
  --icon-color: var(--primary);
  --icon-border: var(--accent);
  --icon-hover-bg: var(--primary);
  --icon-hover-color: var(--white);
  --card-hover-bg: #eef5ff;
}

.info-card .icon-circle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--icon-color);
  border: 2px solid var(--icon-border);
  background: var(--icon-bg);
  margin-bottom: 1rem;
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

/* .info-card:hover {
  border-color: var(--primary);
} */

:root {
  --teal: #1ab69d;
  --pink: #ee4a62;
  --purple: #8e56ff;
  --text-dark: #1f2430;
  --text-gray: #7a7f8a;
  --card-radius: 14px;
}

/* ---- The floating white card ---- */
.feature-card {
  max-width: 1140px;
  margin-top: 2rem;
  margin-bottom: 2rem;
  background: #fff;
  border-radius: var(--card-radius);
  box-shadow: 0 20px 50px rgba(20, 20, 40, 0.12);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  overflow: hidden;
  position: relative;
  /* padding: 0 20px; */
}

.icon-box {
  padding: 48px 34px;
  text-align: left;
  transition: background 0.3s ease;
  border-radius: var(--card-radius);
}

/* middle box has permanent tint, like your screenshot */
/* .icon-box.tinted {
  background: #fdf1f3;
}
*/
.icon-circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  font-size: 26px;
  background: transparent;
  border: 2px solid currentColor;
  transition: background 0.35s ease, color 0.35s ease, transform 0.35s ease;
}

.icon-box.teal   .icon-circle { color: var(--teal); }
.icon-box.pink   .icon-circle { color: var(--pink); }
.icon-box.purple .icon-circle { color: var(--purple); }

.icon-box h4 {
  margin: 0 0 12px 0;
  font-size: 20px;
  font-weight: 600;
  color: var(--text-dark);
}

.icon-box p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--text-gray);
}

/* ---- Hover effects — only on devices that actually support hover (mouse/trackpad) ---- */
@media (hover: hover) and (pointer: fine) {
  .info-card:hover {
    background: var(--card-hover-bg);
  }

  .info-card:hover .icon-circle {
    background: var(--icon-hover-bg);
    color: var(--icon-hover-color);
    transform: scale(1.08) rotate(-6deg);
  }

  .icon-box.teal:hover   .icon-circle { background: var(--teal);  color: #fff; transform: scale(1.08) rotate(-6deg); }
  .icon-box.pink:hover   .icon-circle { background: var(--pink);  color: #fff; transform: scale(1.08) rotate(-6deg); }
  .icon-box.purple:hover .icon-circle { background: var(--purple); color: #fff; transform: scale(1.08) rotate(-6deg); }

  .icon-box:hover {
    background: #f7f8fa;
  }
  .pink:hover {
    background: #f8e5e8;
  }
  .teal:hover {
    background: #e3f7f3;
  }
  .purple:hover {
    background: #efe8ff;
  }
}

/* ---- Instant tap feedback for touch devices (no hover delay) ---- */
.info-card:hover {
  background: var(--card-hover-bg);
}
.info-card:hover .icon-circle {
  background: var(--icon-hover-bg);
  color: var(--icon-hover-color);
  transform: scale(1.08) rotate(-6deg);
}

.icon-box:hover {
  background: #f7f8fa;
}
.icon-box.teal:hover   .icon-circle { background: var(--teal);  color: #fff; transform: scale(1.08) rotate(-6deg); }
.icon-box.pink:hover   .icon-circle { background: var(--pink);  color: #fff; transform: scale(1.08) rotate(-6deg); }
.icon-box.purple:hover .icon-circle { background: var(--purple); color: #fff; transform: scale(1.08) rotate(-6deg); }
.icon-box.pink:hover { background: #f8e5e8; }
.icon-box.teal:hover { background: #e3f7f3; }
.icon-box.purple:hover { background: #efe8ff; }

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .feature-card {
    grid-template-columns: 1fr;
    margin-top: 2rem;
    margin-bottom: 2rem;
  }
  .icon-box { padding: 36px 24px; text-align: center; }
  .icon-circle { margin-left: auto; margin-right: auto; }
}

@media (max-width: 480px) {
}