.app-showcase { overflow: hidden; border-block: 1px solid #28323d; background: var(--section-bg); }
.app-showcase-head { display: flex; align-items: end; justify-content: space-between; gap: 45px; margin-bottom: 34px; }
.app-showcase-head h2 { margin: 0; font: 700 clamp(68px, 8.2vw, 116px)/.82 var(--display); text-transform: uppercase; }
.app-showcase-head h2 span { color: #82adff; }
.app-showcase-head>p { max-width: 355px; margin: 0 0 7px; color: #b4c1ce; font-size: 15px; line-height: 1.65; }
.mockup-picker { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.mockup-picker button { position: relative; overflow: hidden; min-width: 0; min-height: 59px; display: flex; align-items: center; gap: 13px; padding: 0 17px 5px; border: 1px solid #495565; border-radius: 7px; background: #111821; color: #cad6e2; font: 600 11px/1 var(--mono); text-align: left; text-transform: uppercase; cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
.mockup-picker button b { color: #7199d8; font-weight: 500; }
.mockup-picker button:hover { border-color: #8fb8ff; background: #19253a; }
.mockup-picker button[aria-selected="true"] { border-color: #8fb8ff; background: #2268f4; color: white; }
.mockup-picker button[aria-selected="true"] b { color: #dceaff; }
.mockup-progress { position: absolute; right: 12px; bottom: 8px; left: 12px; height: 3px; overflow: hidden; border-radius: 3px; background: #8da8cc33; }
.mockup-progress i { display: block; width: 100%; height: 100%; background: #9cbfff; transform: scaleX(0); transform-origin: left; }
.mockup-picker button[aria-selected="true"] .mockup-progress { background: #071b5066; }
.mockup-picker button[aria-selected="true"] .mockup-progress i { background: #e6f1ff; }
.app-preview-frame { overflow: hidden; height: 650px; border: 1px solid #435263; border-radius: 15px; background: #070808; box-shadow: 0 32px 80px #0008, 0 0 0 7px #27364c3d; }
.app-preview-frame iframe { display: block; width: 100%; height: 100%; border: 0; background: #070808; }

@media (max-width: 900px) {
  .app-showcase-head { display: block; }
  .app-showcase-head>p { margin-top: 15px; }
}
@media (max-width: 650px) {
  .app-showcase-head h2 { font-size: clamp(62px, 13vw, 87px); }
  .mockup-picker { grid-template-columns: 1fr 1fr; }
  .mockup-picker button { min-height: 53px; padding-inline: 11px; font-size: 9px; }
  .app-preview-frame { height: 620px; border-radius: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .mockup-picker button { transition: none; }
}