.customer-stories { text-align: center; overflow: hidden; }
.story-carousel { outline-offset: -4px; position: relative; }
.story-stage { position: relative; height: 620px; max-width: 1100px; margin: 0 auto; touch-action: pan-y; isolation: isolate; }
.story-slide {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 310px;
  height: 570px;
  padding: 0;
  border: 0;
  border-radius: 20px;
  overflow: hidden;
  background: #080808;
  cursor: pointer;
  transition: transform .4s ease, opacity .4s ease, filter .4s ease, visibility .4s ease;
  transform: translate(-50%, -50%) scale(.5);
  box-shadow: 0 14px 38px #24103620;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  z-index: 0;
}
.story-slide img { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; }

.story-slide[data-position="0"] {
  z-index: 4;
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  filter: none;
}
.story-slide[data-position="-1"] {
  z-index: 2;
  transform: translate(calc(-50% - 280px), -50%) scale(.73);
  opacity: .55;
  filter: brightness(.7);
  pointer-events: auto;
  visibility: visible;
}
.story-slide[data-position="1"] {
  z-index: 2;
  transform: translate(calc(-50% + 280px), -50%) scale(.73);
  opacity: .55;
  filter: brightness(.7);
  pointer-events: auto;
  visibility: visible;
}
.story-slide[data-position="-2"] {
  z-index: 1;
  transform: translate(calc(-50% - 470px), -50%) scale(.58);
  opacity: .25;
  filter: brightness(.6);
  pointer-events: auto;
  visibility: visible;
}
.story-slide[data-position="2"] {
  z-index: 1;
  transform: translate(calc(-50% + 470px), -50%) scale(.58);
  opacity: .25;
  filter: brightness(.6);
  pointer-events: auto;
  visibility: visible;
}

.story-controls { display: flex; gap: 24px; align-items: center; justify-content: center; margin-top: 8px; }
.story-controls button {
  width: 46px;
  height: 46px;
  border: 1px solid #d9c8ea;
  border-radius: 50%;
  background: #f8f3fc;
  color: #6d3ca9;
  font-size: 30px;
  cursor: pointer;
  position: absolute;
  top: 310px;
  transform: translateY(-50%);
  z-index: 6;
  display: grid;
  place-items: center;
  line-height: 1;
  box-shadow: 0 3px 14px #2e184e18;
}
.story-controls [data-story-prev] { left: calc(50% - 216px); }
.story-controls [data-story-next] { right: calc(50% - 216px); }
.story-controls span { font-size: 14px; color: #735d86; font-variant-numeric: tabular-nums; }
.story-hint { font-size: 14px; color: #796d82; margin: 16px 0 0; }
.story-lightbox { max-width: 95vw; max-height: 94dvh; border: 0; border-radius: 18px; padding: 48px 8px 8px; background: #17141c; overflow: auto; }
.story-lightbox::backdrop { background: #100b1de8; }
.story-lightbox img { display: block; max-width: 100%; max-height: 80dvh; object-fit: contain; margin: auto; }
.story-close { position: absolute; right: 12px; top: 8px; padding: 8px 16px; color: white; background: #ffffff1a; border: 1px solid #ffffff55; border-radius: 20px; font-size: 14px; cursor: pointer; }
.story-slide:focus-visible, .story-controls button:focus-visible { outline: 3px solid #8751bf; outline-offset: 4px; }

@media(max-width: 600px) {
  .story-stage { height: 550px; margin: 0 -20px; }
  .story-slide { width: min(72vw, 290px); height: 510px; }
  .story-slide[data-position="-1"] { transform: translate(calc(-50% - 205px), -50%) scale(.72); }
  .story-slide[data-position="1"] { transform: translate(calc(-50% + 205px), -50%) scale(.72); }
  .story-slide[data-position="-2"], .story-slide[data-position="2"] { opacity: 0; pointer-events: none; visibility: hidden; }
  .story-controls button { top: 275px; width: 44px; height: 44px; }
  .story-controls [data-story-prev] { left: 0; }
  .story-controls [data-story-next] { right: 0; }
  .customer-stories h2 { margin-bottom: 12px; }
}
@media(prefers-reduced-motion: reduce) { .story-slide { transition: none; } }