/* ============================================================
   Mobile Screen Showcase v5 – exact match
   Big black phone center | flat white cards side | dots below
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&display=swap');

:root {
  --mss-accent:     #3B82F6;
  --mss-transition: 0.42s cubic-bezier(0.35,0,0.2,1);
  --mss-font:       'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ── Wrapper: full width, white bg ── */
.mss-wrapper {
  font-family: var(--mss-font);
  background: #ffffff;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  padding: 32px 0 28px;
  overflow: hidden;
}

/* ── Stage ── */
.mss-stage {
  position: relative;
  width: 100%;
  height: 780px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ════════════════════════════════════
   CENTER PHONE  (data-pos="0")
   ════════════════════════════════════ */
.mss-slide[data-pos="0"] {
  /* position & size */
  position: absolute;
  top: 50%;
  left: 50%;
  width: 345px;
  height: 747px;
  aspect-ratio: unset;
  transform: translate(-50%, -50%);
  z-index: 10;
  cursor: default;

  /* thick black bezel */
  border-radius: 46px;
  background: #111118;
  padding: 0;
  box-shadow:
    0 0 0 10px #111118,
    0 0 0 12px #2c2c3a,
    0 40px 100px rgba(0,0,0,0.35),
    0 10px 30px rgba(0,0,0,0.20);

  overflow: visible;   /* allow notch to sit on top */
}

/* Screen inside the phone */
.mss-slide[data-pos="0"] .mss-slide-inner {
  width: 100%;
  height: 100%;
  border-radius: 38px;
  overflow: hidden;
  background: #fff;
  position: relative;
}

/* Notch on center phone */
.mss-slide[data-pos="0"] .mss-slide-inner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 110px;
  height: 30px;
  background: #111118;
  border-radius: 0 0 22px 22px;
  z-index: 5;
}

/* Home bar */
.mss-slide[data-pos="0"] .mss-slide-inner::after {
  content: '';
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 90px;
  height: 5px;
  background: rgba(0,0,0,0.25);
  border-radius: 3px;
  z-index: 5;
}

/* ════════════════════════════════════
   ALL SLIDE IMAGES
   ════════════════════════════════════ */
.mss-slide {
  position: absolute;
  transition: transform var(--mss-transition),
              opacity   var(--mss-transition),
              box-shadow var(--mss-transition);
}

.mss-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  pointer-events: none;
}

/* image inside center phone goes in .mss-slide-inner */
.mss-slide[data-pos="0"] img {
  border-radius: 38px;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ════════════════════════════════════
   SIDE CARDS  (flat white, no phone frame)
   ════════════════════════════════════ */

/* L1 – left neighbour */
.mss-slide[data-pos="-1"] {
  width: 309px;
  height: 670px;
  aspect-ratio: unset;
  border-radius: 24px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 8px 40px rgba(0,0,0,0.11);
  transform: translateX(-360px) translateY(-40px) scale(0.82);
  z-index: 6;
  opacity: 1;
  cursor: pointer;
}

/* R1 – right neighbour */
.mss-slide[data-pos="1"] {
  width: 309px;
  height: 670px;
  aspect-ratio: unset;
  border-radius: 24px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 8px 40px rgba(0,0,0,0.11);
  transform: translateX(360px) translateY(20px) scale(0.82);
  z-index: 6;
  opacity: 1;
  cursor: pointer;
}

/* L2 */
.mss-slide[data-pos="-2"] {
  width: 309px;
  height: 670px;
  aspect-ratio: unset;
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  transform: translateX(-600px) translateY(-20px) scale(0.65);
  z-index: 4;
  opacity: 0.85;
  cursor: pointer;
}

/* R2 */
.mss-slide[data-pos="2"] {
  width: 309px;
  height: 670px;
  aspect-ratio: unset;
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  transform: translateX(600px) translateY(40px) scale(0.65);
  z-index: 4;
  opacity: 0.85;
  cursor: pointer;
}

/* hidden */
.mss-slide[data-pos="-3"],
.mss-slide[data-pos="3"],
.mss-slide[data-pos="far"] {
  opacity: 0;
  pointer-events: none;
  transform: translateX(0) scale(0.3);
  z-index: 1;
}

/* Hover lift on side cards */
.mss-slide[data-pos="-1"]:hover,
.mss-slide[data-pos="1"]:hover {
  box-shadow: 0 16px 56px rgba(0,0,0,0.16);
  filter: brightness(1.02);
}
.mss-slide[data-pos="-2"]:hover,
.mss-slide[data-pos="2"]:hover {
  opacity: 1;
}

/* ── Transition for ALL slides when pos changes ── */
.mss-slide {
  transition:
    transform var(--mss-transition),
    opacity   var(--mss-transition),
    width     var(--mss-transition),
    box-shadow var(--mss-transition);
}

/* ── Dots ── */
.mss-dots-row {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 24px;
  position: relative;
  z-index: 2;
}
.mss-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  border: none;
  background: #c8d5e8;
  cursor: pointer;
  padding: 0;
  transition: background 0.25s, width 0.25s, transform 0.25s;
}
.mss-dot--active {
  background: var(--mss-accent);
  width: 26px;
  border-radius: 5px;
  transform: none;
}

/* ══════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════ */

/* ── 1280px: slight scale down ── */
@media (max-width: 1280px) {
  .mss-stage { height: 720px; }
  .mss-slide[data-pos="0"]  { width: 310px; height: 670px; }
  .mss-slide[data-pos="-1"],
  .mss-slide[data-pos="1"]  { width: 270px; height: 585px; }
  .mss-slide[data-pos="-1"] { transform: translateX(-330px) translateY(-35px) scale(0.82); }
  .mss-slide[data-pos="1"]  { transform: translateX(330px)  translateY(18px)  scale(0.82); }
  .mss-slide[data-pos="-2"],
  .mss-slide[data-pos="2"]  { width: 270px; height: 585px; }
  .mss-slide[data-pos="-2"] { transform: translateX(-540px) translateY(-18px) scale(0.65); }
  .mss-slide[data-pos="2"]  { transform: translateX(540px)  translateY(36px)  scale(0.65); }
}

/* ── 1024px: hide L2/R2, scale everything ── */
@media (max-width: 1024px) {
  .mss-stage { height: 640px; }
  .mss-slide[data-pos="0"]  { width: 275px; height: 595px; }
  .mss-slide[data-pos="-1"],
  .mss-slide[data-pos="1"]  { width: 240px; height: 520px; }
  .mss-slide[data-pos="-1"] { transform: translateX(-290px) translateY(-28px) scale(0.82); }
  .mss-slide[data-pos="1"]  { transform: translateX(290px)  translateY(16px)  scale(0.82); }
  .mss-slide[data-pos="-2"],
  .mss-slide[data-pos="2"]  { opacity: 0; pointer-events: none; transform: translateX(0) scale(0.3); }
}

/* ── 768px: tablet – center phone + 1 side each ── */
@media (max-width: 768px) {
  .mss-stage   { height: 560px; }
  .mss-wrapper { padding: 24px 0 20px; }
  .mss-slide[data-pos="0"]  { width: 240px; height: 520px; border-radius: 38px; }
  .mss-slide[data-pos="0"] .mss-slide-inner { border-radius: 30px; }
  .mss-slide[data-pos="-1"],
  .mss-slide[data-pos="1"]  { width: 200px; height: 434px; border-radius: 18px; }
  .mss-slide[data-pos="-1"] { transform: translateX(-240px) translateY(-20px) scale(0.80); }
  .mss-slide[data-pos="1"]  { transform: translateX(240px)  translateY(12px)  scale(0.80); }
  .mss-slide[data-pos="-2"],
  .mss-slide[data-pos="2"]  { opacity: 0; pointer-events: none; transform: translateX(0) scale(0.3); }
  .mss-dots-row { margin-top: 18px; }
}

/* ── 580px: large phones ── */
@media (max-width: 580px) {
  .mss-stage   { height: 500px; }
  .mss-slide[data-pos="0"]  { width: 210px; height: 455px; border-radius: 34px; }
  .mss-slide[data-pos="0"] .mss-slide-inner { border-radius: 26px; }
  .mss-slide[data-pos="-1"],
  .mss-slide[data-pos="1"]  { width: 175px; height: 380px; border-radius: 16px; }
  .mss-slide[data-pos="-1"] { transform: translateX(-200px) translateY(-16px) scale(0.78); }
  .mss-slide[data-pos="1"]  { transform: translateX(200px)  translateY(10px)  scale(0.78); }
}

/* ── 420px: small phones – single screen view ── */
@media (max-width: 420px) {
  .mss-stage   { height: 460px; }
  .mss-slide[data-pos="0"]  { width: 190px; height: 412px; border-radius: 30px; }
  .mss-slide[data-pos="0"] .mss-slide-inner { border-radius: 22px; }
  .mss-slide[data-pos="-1"],
  .mss-slide[data-pos="1"]  { width: 160px; height: 347px; border-radius: 14px; }
  .mss-slide[data-pos="-1"] { transform: translateX(-180px) translateY(-12px) scale(0.74); }
  .mss-slide[data-pos="1"]  { transform: translateX(180px)  translateY(8px)   scale(0.74); }
  .mss-dot { width: 7px; height: 7px; }
  .mss-dot--active { width: 20px; }
}