/* ── Screenshot carousel ── */

.screens-section {
  padding: var(--sp-section) var(--sp-side);
  background: var(--gradient-soft);
}

/* Outer carousel wrapper — relative so arrows can sit inside it */
.sc-carousel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  outline: none;
}

/* Strict one-slide viewport */
.sc-viewport {
  width: 300px;
  overflow: hidden;
}
@media (max-width: 520px) { .sc-viewport { width: 240px; } }

/* Sliding track */
.sc-track {
  display: flex;
  transition: transform 0.42s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

/* Each slide exactly matches viewport width */
.sc-slide {
  flex: 0 0 300px;
  display: flex;
  justify-content: center;
}
@media (max-width: 520px) { .sc-slide { flex: 0 0 240px; } }

.sc-img {
  width: 280px;
  height: auto;
  display: block;
  box-shadow: 0 16px 48px rgba(61,37,80,0.11), 0 4px 14px rgba(124,92,191,0.08);
}
@media (max-width: 520px) { .sc-img { width: 220px; } }

/* Arrow buttons — sit left/right of the viewport */
.sc-btn {
  position: absolute;
  top: 42%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1.5px solid rgba(155,126,189,0.28);
  background: rgba(255,255,255,0.90);
  backdrop-filter: blur(10px);
  color: var(--c-primary);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(61,37,80,0.09);
  transition: background 0.18s, border-color 0.18s, transform 0.18s;
  z-index: 5;
}
.sc-btn:hover {
  background: #fff;
  border-color: var(--c-primary);
  transform: translateY(-50%) scale(1.1);
}
.sc-btn--prev { left: calc(50% - 150px - 56px); }
.sc-btn--next { right: calc(50% - 150px - 56px); }
@media (max-width: 520px) {
  .sc-btn--prev { left: calc(50% - 120px - 50px); }
  .sc-btn--next { right: calc(50% - 120px - 50px); }
}
@media (max-width: 400px) {
  .sc-btn { display: none; }
}

/* Caption */
.sc-caption {
  margin: 26px 0 0;
  font-size: var(--t-sm);
  color: var(--c-text-2);
  font-weight: var(--w-light);
  text-align: center;
  min-height: 1.4em;
  transition: opacity 0.2s ease;
}

/* Dots */
.sc-dots {
  display: flex;
  gap: 9px;
  margin-top: 18px;
}
.sc-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  border: none; padding: 0;
  background: rgba(155,126,189,0.22);
  cursor: pointer;
  transition: background 0.22s, width 0.22s, border-radius 0.22s;
}
.sc-dot--on {
  background: var(--c-primary);
  width: 24px;
  border-radius: 4px;
}

/* Hero mobile preview carousel */
.sc-carousel--hero {
  width: 100%;
  margin-top: 14px;
}
.sc-carousel--hero .sc-viewport {
  width: min(200px, 56vw);
  margin: 0 auto;
}
.sc-carousel--hero .sc-slide {
  flex: 0 0 min(200px, 56vw);
}
.sc-carousel--hero .sc-img {
  width: 100%;
  border-radius: 18px;
  box-shadow: 0 8px 18px rgba(61,37,80,0.12);
}
.sc-carousel--hero .sc-btn {
  width: 36px;
  height: 36px;
  top: 38%;
}
.sc-carousel--hero .sc-btn--prev { left: 0; }
.sc-carousel--hero .sc-btn--next { right: 0; }
.sc-carousel--hero .sc-caption {
  margin-top: 16px;
  font-size: 12px;
  padding: 0 8px;
}
.sc-carousel--hero .sc-dots {
  margin-top: 12px;
}