.coverflow { position: relative; height: 340px; margin-top: clamp(30px, 5vh, 56px); }

.cf-track {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; perspective: 1400px;
  user-select: none; touch-action: pan-y; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}
.cf-card {
  position: absolute; width: 230px; height: 290px; border-radius: 20px;
  padding: 26px 22px; display: flex; flex-direction: column; gap: 14px;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  background: linear-gradient(160deg, rgba(37, 147, 255, 0.16), rgba(128, 72, 244, 0.10));
  border: 1px solid var(--border); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.45s ease, filter 0.45s ease;
  will-change: transform, opacity; cursor: pointer;
}
.cf-icon {
  width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center;
  background: linear-gradient(140deg, var(--blue), var(--purple)); box-shadow: 0 6px 20px rgba(37, 147, 255, 0.4);
}
.cf-icon iconify-icon { font-size: 28px; color: #fff; }
.cf-card h3 { font-family: "Sora", sans-serif; font-weight: 600; font-size: 18px; color: #eaf0ff; }
.cf-card p { font-size: 13px; line-height: 1.5; color: var(--muted); }
.cf-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 20;
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: rgba(10, 14, 30, 0.6); border: 1px solid var(--border); color: #cfe0ff;
  backdrop-filter: blur(6px); transition: background 0.15s ease, transform 0.15s ease;
}
.cf-nav:hover { background: rgba(37, 147, 255, 0.25); transform: translateY(-50%) scale(1.06); }
.cf-prev { left: clamp(8px, 3vw, 40px); }
.cf-next { right: clamp(8px, 3vw, 40px); }
.cf-nav iconify-icon { font-size: 22px; }
.cf-dots { display: flex; gap: 7px; justify-content: center; flex-wrap: wrap; margin-top: 28px; max-width: 560px; margin-left: auto; margin-right: auto; }
.cf-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(123, 150, 230, 0.3); cursor: pointer; transition: all 0.2s; }
.cf-dot.active { background: var(--blue); width: 20px; border-radius: 4px; }

@media (max-width: 560px) { .coverflow { height: 320px; } .cf-card { width: 200px; height: 264px; } }