.ai { position: relative; overflow: hidden; }
.ai::before {
  content: ''; position: absolute; right: -10%; top: -20%; width: 60%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 152, 0, 0.12), transparent 65%); pointer-events: none;
}
.ai::after {
  content: ''; position: absolute; left: -12%; bottom: -30%; width: 55%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(32, 33, 88, 0.08), transparent 65%); pointer-events: none;
}
.ai .container { position: relative; z-index: 1; }

/* ---------- Marquee rows ---------- */
.ai-marquee {
  --card-w: 340px; --speed: 60s;
  position: relative; z-index: 1; display: grid; margin-top: -0.5rem;
  /* soft fade at both edges so cards glide in and out */
  -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ai-row { overflow: hidden; padding-block: 12px 22px; /* room for hover lift, scale and shadow */ }
.ai-track { display: flex; width: max-content; }
.ai-card {
  flex: none; width: var(--card-w); margin-right: var(--gap);
  padding: 1.2rem 1.3rem 1.25rem; gap: 0.35rem;
}
.ai-card.card { transition-property: transform, box-shadow, border-color, scale; }
.ai-card.card:hover { scale: 1.03; }
.ai-card .ai-ic {
  width: 46px; height: 46px; border-radius: 13px; display: flex; align-items: center; justify-content: center; color: #fff;
  background: linear-gradient(135deg, var(--navy), #33348a); box-shadow: 0 12px 22px -12px rgba(32, 33, 88, 0.8);
}
.ai-card.alt .ai-ic { background: linear-gradient(135deg, var(--orange-600), var(--orange)); box-shadow: 0 12px 22px -12px rgba(230, 137, 0, 0.8); }
.ai-card .ai-ic .i { width: 1.25rem; height: 1.25rem; }
.ai-card h3 { font-size: 1.1rem; margin-top: 0.55rem; }
.ai-note { display: flex; align-items: center; justify-content: center; gap: 0.6rem; margin-top: 1.8rem; color: var(--muted); font-size: 0.98rem; text-align: center; }
.ai-note .i { color: var(--orange-600); }

@media (prefers-reduced-motion: no-preference) {
  .ai-track { animation: ai-marquee var(--speed) linear infinite; will-change: transform; }
  .ai-row.rev .ai-track { animation-direction: reverse; }
  /* pause a row while it's being read */
  .ai-row:hover .ai-track { animation-play-state: paused; }
  .ai-card .ai-ic { animation: ai-bob 6s ease-in-out infinite; animation-delay: calc(var(--k, 0) * -0.7s); }
}
@keyframes ai-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes ai-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* Reduced motion: no drift — each row becomes a swipeable strip of the original cards. */
@media (prefers-reduced-motion: reduce) {
  .ai-marquee { -webkit-mask: none; mask: none; padding-inline: var(--pad-x); }
  .ai-row { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
  .ai-card { scroll-snap-align: start; }
  .ai-card[aria-hidden] { display: none; }
}

@media (max-width: 1024px) { .ai-marquee { --card-w: 300px; --speed: 52s; } }
@media (max-width: 760px) {
  .ai-marquee { --card-w: 260px; --speed: 44s; -webkit-mask: none; mask: none; }
  .ai-card { gap: 0.3rem; }
}

/* ---------- Hover ---------- */
.ai-card .ai-ic { position: relative; transition: scale 0.5s cubic-bezier(0.3, 1.6, 0.4, 1), rotate 0.5s cubic-bezier(0.3, 1.6, 0.4, 1); }
.ai-card:hover .ai-ic { scale: 1.12; rotate: -8deg; }
.ai-card .ai-ic::after {
  content: ''; position: absolute; inset: -5px; border-radius: 16px; border: 1.5px dashed rgba(255, 152, 0, 0.7);
  opacity: 0; scale: 0.8; transition: opacity 0.3s ease, scale 0.4s ease;
}
.ai-card:hover .ai-ic::after { opacity: 1; scale: 1; }
@media (prefers-reduced-motion: no-preference) {
  .ai-card:hover .ai-ic::after { animation: spin-slow 6s linear infinite; }
}
@keyframes spin-slow { to { rotate: 360deg; } }