.ix-b { background: var(--cream); padding: 96px 0 120px; }
.ix-b__head { max-width: 680px; margin-bottom: 56px; }
.ix-b__head h2 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(32px, 4.4vw, 56px); margin: 0 0 14px; }
.ix-b__head p { color: var(--ink-muted); }
.ix-b__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 700px)  { .ix-b__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .ix-b__grid { grid-template-columns: repeat(4, 1fr); } }
.ix-b__card {
  display: flex;
  flex-direction: column;
  padding: 24px;
  background: var(--white);
  border-radius: var(--radius-md);
  color: var(--navy);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: var(--shadow-soft);
}
.ix-b__card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.ix-b__preview {
  aspect-ratio: 2/1;
  background: var(--cream);
  border-radius: var(--radius-sm);
  margin-bottom: 16px;
  overflow: hidden;
  position: relative;
}
.ix-b__preview svg { width: 100%; height: 100%; }
.ix-b__card h3 { font-family: var(--font-serif); font-weight: 400; font-size: 20px; margin: 0 0 6px; }
.ix-b__card p { color: var(--ink-muted); font-size: 14px; margin: 0 0 12px; flex: 1; }
.ix-b__try { color: var(--teal); font-weight: 600; font-size: 13px; }

/* per-tool preview animations */
.ix-b__wave {
  stroke-dasharray: 200;
  stroke-dashoffset: 0;
  animation: ixBWaveDraw 3s linear infinite;
}
@keyframes ixBWaveDraw {
  0%   { d: path("M0 40 Q 20 20 40 40 T 80 40 T 120 40 T 160 40"); }
  50%  { d: path("M0 40 Q 20 60 40 40 T 80 40 T 120 40 T 160 40"); }
  100% { d: path("M0 40 Q 20 20 40 40 T 80 40 T 120 40 T 160 40"); }
}
.ix-b__blob { animation: ixBBlob 2.2s ease-in-out infinite alternate; }
@keyframes ixBBlob { 0% { transform: translateX(-20px); opacity: 0.4; } 100% { transform: translateX(20px); opacity: 0.9; } }
.ix-b__swatch {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, var(--pink), var(--teal), #ffd54a, var(--teal-dark));
  background-size: 400% 400%;
  animation: ixBGradient 6s ease infinite;
}
@keyframes ixBGradient { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.ix-b__progress { position: absolute; left: 14px; right: 14px; bottom: 14px; height: 8px; background: var(--line); border-radius: 4px; overflow: hidden; }
.ix-b__progress span { display: block; height: 100%; width: 45%; background: var(--teal); animation: ixBFill 2.5s ease-in-out infinite alternate; }
@keyframes ixBFill { 0% { width: 15%; } 100% { width: 85%; } }