.prototype-showcase { background: #f7f9fb; border-top: 1px solid var(--line); }
.prototype-heading { display: grid; grid-template-columns: 1.1fr .9fr; gap: 7vw; align-items: end; }
.prototype-heading h2 { max-width: 720px; margin-bottom: 0; }
.prototype-copy { color: var(--muted); }
.prototype-copy .button { margin-top: 8px; }
.stage-badge { display: inline-flex; width: fit-content; margin: 18px 0 0; padding: 8px 12px; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; color: #fff; font-size: .78rem; font-weight: 750; }
.prototype-proof { margin-top: 42px; overflow: hidden; border: 1px solid rgba(37,42,103,.16); border-radius: 24px; background: #0d1231; box-shadow: 0 28px 80px rgba(37,42,103,.18); }
.proof-bar { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 20px; color: #d5dbf0; font-size: .78rem; border-bottom: 1px solid rgba(255,255,255,.12); }
.proof-bar i { display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: #35c4ba; box-shadow: 0 0 0 5px rgba(53,196,186,.12); }
.prototype-proof iframe { display: block; width: 100%; height: min(920px, 82vh); min-height: 680px; border: 0; background: #0d1231; }
.prototype-note { max-width: 900px; margin: 20px auto 0; text-align: center; color: var(--muted); font-size: .84rem; }
@media (max-width: 850px) { .prototype-heading { grid-template-columns: 1fr; } .prototype-proof iframe { min-height: 720px; height: 82vh; } }
@media (max-width: 560px) { .proof-bar { align-items: flex-start; flex-direction: column; padding: 14px 16px; } .prototype-proof { border-radius: 16px; } }