.showcase {
  padding-block: clamp(58px, 8vw, 112px);
  border-block: 1px solid #c8baff24;
  background: #0a0a12;
}

.showcase-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 22px;
  margin-bottom: clamp(20px, 4vw, 50px);
}

.showcase-heading h2 {
  max-width: 18ch;
  font-size: clamp(36px, 6.1vw, 82px);
}

.showcase-stage {
  display: none;
}

.showcase-track {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.showcase-scene {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  align-items: center;
  gap: clamp(18px, 4vw, 42px);
  min-width: 0;
  padding: clamp(22px, 3vw, 38px);
  border: 1px solid #c8baff29;
  border-radius: 22px;
  background: radial-gradient(ellipse at 5% 100%, #29223e, #11101b 70%);
}

.showcase-scene h3 {
  font-size: clamp(26px, 3vw, 46px);
  line-height: 1.06;
  letter-spacing: -.04em;
  text-wrap: balance;
}

.showcase-scene p {
  max-width: 37ch;
  margin-top: 13px;
  color: #c4bfd1;
  font-size: 16px;
  line-height: 1.6;
}

.showcase-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  margin-top: 12px;
  color: var(--accent);
  font-size: 14px;
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.showcase-link:hover { color: #fff; }

.showcase-device {
  position: relative;
  width: 100%;
  min-width: 0;
  aspect-ratio: .558;
  padding: 5px;
  overflow: hidden;
  border: 1px solid #bbb0d5a1;
  border-radius: clamp(15px, 2.4vw, 28px);
  background: linear-gradient(145deg, #807795, #272431 30%, #676176 75%, #1b1825);
  box-shadow: 0 20px 34px #020207c4, inset 0 1px 2px #e5d9fb66;
}

.showcase-device > img,
.showcase-layer > img,
.showcase-voice,
.showcase-covered {
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

.showcase-device img { object-fit: cover; }

.showcase-mobile-device {
  max-width: 210px;
  justify-self: center;
}

.showcase-voice {
  position: relative;
  overflow: hidden;
  background: #0b0b14;
}

.showcase-voice img { opacity: .42; }

.showcase-wave {
  position: absolute;
  inset: auto 7% 18%;
  display: flex;
  align-items: center;
  gap: clamp(5px, 1vw, 10px);
  min-height: 43px;
  padding: 6px;
  border: 1px solid #bba7f47a;
  border-radius: 13px 13px 4px;
  background: #31254f;
  box-shadow: 0 10px 20px #08060d88;
  color: #f2e8ff;
  font-size: 11px;
}

.showcase-wave-play {
  display: grid;
  flex: none;
  width: 27px;
  height: 27px;
  padding-left: 1px;
  place-items: center;
  border-radius: 50%;
  background: #dbcaff;
  color: #1d1230;
  font-size: 10px;
}

.showcase-wave-bars {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: space-between;
  gap: 2px;
  min-width: 0;
}

.showcase-wave-bars i {
  width: min(3px, 100%);
  height: var(--bar);
  border-radius: 3px;
  background: #c7b2ff;
}

.showcase-covered {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 8px;
  padding: 9%;
  background: radial-gradient(ellipse at 50% 45%, #201734, #0b0a12 61%);
  text-align: center;
}

.showcase-covered img {
  width: 29%;
  max-width: 63px;
  margin-bottom: 6px;
  object-fit: contain;
}

.showcase-covered span {
  color: #c8baff;
  font-size: clamp(10px, 1.15vw, 14px);
}

.showcase-covered strong {
  font-size: clamp(13px, 1.5vw, 21px);
  text-wrap: balance;
}

.showcase-controls { display: none; }

@media (min-width: 781px) {
  .showcase.is-enhanced .showcase-story {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    align-items: start;
    gap: clamp(25px, 5vw, 75px);
  }

  .showcase.is-enhanced .showcase-stage {
    position: sticky;
    top: clamp(16px, 8vh, 72px);
    isolation: isolate;
    display: grid;
    place-items: center;
    min-width: 0;
    height: clamp(320px, 76vh, 630px);
    border: 1px solid #c8baff29;
    border-radius: 25px;
    background: radial-gradient(ellipse at 51% 65%, #3b2c64, #1c172b 44%, #0e0d16 80%);
    perspective: 850px;
  }

  .showcase-stage::before {
    position: absolute;
    z-index: -1;
    width: min(78%, 440px);
    aspect-ratio: 1;
    border: 1px solid #c8baff3b;
    border-radius: 50%;
    box-shadow: 0 0 0 22px #c8baff0c, 0 0 0 44px #c8baff07;
    content: '';
  }

  .showcase-sticky-device {
    --phone-tilt: -12deg;
    width: min(47%, 270px, 35vh);
    transform: rotate(-5deg) rotateY(var(--phone-tilt));
    transition: transform .52s cubic-bezier(.2, .8, .2, 1);
  }

  .showcase-stage[data-current="1"] .showcase-sticky-device { --phone-tilt: 9deg; }
  .showcase-stage[data-current="2"] .showcase-sticky-device { --phone-tilt: -3deg; }
  .showcase-stage[data-current="3"] .showcase-sticky-device { --phone-tilt: 0deg; }

  .showcase-layer {
    position: absolute;
    inset: 5px;
    overflow: hidden;
    border-radius: clamp(10px, 2vw, 23px);
    opacity: 0;
    transition: opacity .26s ease;
  }

  .showcase-layer.is-current { opacity: 1; }

  .showcase.is-enhanced .showcase-track {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .showcase.is-enhanced .showcase-scene {
    grid-template-columns: 1fr;
    min-height: clamp(240px, 53vh, 450px);
    border-color: #c8baff22;
    background: #101019;
    transition: border-color .3s ease, background .3s ease;
  }

  .showcase.is-enhanced .showcase-scene.is-current {
    border-color: #c8baff73;
    background: radial-gradient(ellipse at 4% 100%, #2b2244, #14121e 68%);
  }

  .showcase.is-enhanced .showcase-mobile-device { display: none; }
}

@media (max-width: 780px) {
  .showcase-heading { align-items: start; }

  .showcase-track {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 6px 4px 12px;
    scroll-padding-inline: 4px;
    scroll-snap-type: x mandatory;
    scrollbar-color: #8374a5 #14121e;
    scrollbar-width: thin;
    overscroll-behavior-x: contain;
  }

  .showcase-track::after {
    flex: 0 0 22px;
    content: '';
  }

  .showcase-scene {
    flex: 0 0 calc(100% - 32px);
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    justify-items: center;
    padding: 20px 15px;
    scroll-snap-align: start;
  }

  .showcase-mobile-device { width: min(57%, 225px); }
  .showcase-scene-copy { justify-self: start; }
  .showcase-scene p { font-size: 14px; }

  .showcase-controls:not([hidden]),
  .showcase-dots {
    display: flex;
    align-items: center;
  }

  .showcase-controls:not([hidden]) { gap: 5px; }

  .showcase-controls button {
    display: grid;
    min-width: 36px;
    min-height: 44px;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #e7defa;
    cursor: pointer;
  }

  .showcase-controls .showcase-arrow {
    min-width: 44px;
    border: 1px solid #c8baff3c;
    font-size: 20px;
  }

  .showcase-arrow[aria-disabled="true"] {
    color: #777286;
    cursor: default;
  }

  .showcase-dots button::after {
    width: 8px;
    height: 8px;
    border: 1px solid #ac9dcc;
    border-radius: 50%;
    content: '';
  }

  .showcase-dots [aria-current="true"]::after {
    width: 20px;
    border-radius: 10px;
    background: #c8baff;
  }
}

@media (prefers-reduced-motion: reduce) {
  .showcase-sticky-device,
  .showcase-layer,
  .showcase-scene { transition: none !important; }

  .showcase-sticky-device { transform: none; }
}