/* ---------- 3D slider: what we create ---------- */
.showcase { padding: 80px 0 40px; overflow: hidden; }
.showcase .sec-head { text-align: left; }

.stage3d {
  position: relative; height: 430px; perspective: 1400px;
  margin-top: 10px; user-select: none; touch-action: pan-y;
}
.slides { position: absolute; inset: 0; transform-style: preserve-3d; }

.slide {
  position: absolute; top: 20px; left: 50%;
  width: min(330px, 74vw); margin-left: calc(min(330px, 74vw) / -2);
  border-radius: 24px; background: var(--card, #fffdf8);
  border: 1px solid rgba(11,16,32,.08);
  box-shadow: 0 30px 60px -28px rgba(11,16,32,.45);
  overflow: hidden; cursor: pointer;
  transition: transform .75s cubic-bezier(.2,.7,.2,1), opacity .75s ease, filter .75s ease;
  will-change: transform, opacity;
}
.slide-art {
  height: 230px; display: grid; place-items: center; position: relative;
  background: linear-gradient(135deg, var(--teal, #0fb9a4), var(--blue, #2f6bff));
}
.slide-art svg { width: 78%; height: auto; filter: drop-shadow(0 14px 18px rgba(0,0,0,.25)); }
.slide-art.warm { background: linear-gradient(135deg, #ffb457, #ff5d8f); }
.slide-art.violet { background: linear-gradient(135deg, #7b5cff, #2f6bff); }
.slide-art.ink { background: linear-gradient(135deg, #0b1020, #2b3a67); }
.slide-art.green { background: linear-gradient(135deg, #25d366, #0fb9a4); }
.slide-art.sun { background: linear-gradient(135deg, #ffd166, #ff8a3d); }

.slide-txt { padding: 18px 20px 22px; }
.slide-txt h3 { margin: 0 0 6px; font-size: 1.15rem; color: var(--ink, #0b1020); }
.slide-txt p { margin: 0; color: #4a5366; font-size: .95rem; line-height: 1.5; }

.slider-ctrl { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 18px; }
.slider-ctrl button.arrow {
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(11,16,32,.18);
  background: #fff; font-size: 22px; cursor: pointer; color: var(--ink, #0b1020);
}
.slider-ctrl button.arrow:hover { border-color: var(--teal, #0fb9a4); }
.dots { display: flex; gap: 8px; }
.dots button {
  width: 10px; height: 10px; border-radius: 999px; border: 0; padding: 0; cursor: pointer;
  background: rgba(11,16,32,.2); transition: width .3s ease, background .3s ease;
}
.dots button[aria-current="true"] { width: 28px; background: var(--teal, #0fb9a4); }

@media (max-width: 640px) {
  .stage3d { height: 400px; }
  .slide-art { height: 190px; }
}
@media (prefers-reduced-motion: reduce) {
  .slide { transition: none; }
}