.mock-stage{position:relative;width:100%;max-width:460px;margin-inline:auto;padding:20px 0 36px}.mock-stage:before{content:"";position:absolute;inset:-8% -12%;z-index:0;background:radial-gradient(closest-side,var(--primary-halo),transparent);pointer-events:none}.mock{position:relative;z-index:1;overflow:hidden;box-shadow:var(--shadow),0 24px 48px -24px #0f172a59}.mock__bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;border-bottom:1px solid var(--border)}.mock__dots{display:flex;gap:6px}.mock__dots i{width:8px;height:8px;border-radius:50%;background:var(--border)}.mock__body{display:grid;gap:16px;padding:20px}.mock__cta{width:100%;pointer-events:none}.mock-field{display:grid;gap:6px;min-width:0}.mock-field__label{font-size:.75rem;font-weight:500;color:var(--muted)}.mock-input{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;padding:10px 14px;border:1px solid var(--input-border);border-radius:var(--radius);color:var(--strong);font-size:.9375rem}.mock-input span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mock-input svg{flex-shrink:0;color:var(--muted)}.mock-input--mono{font-family:var(--mono);letter-spacing:.02em}.mock-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.mock-rows{display:grid;border:1px solid var(--border);border-radius:var(--radius)}.mock-row{display:flex;align-items:center;gap:10px;padding:10px 14px;font-size:.875rem}.mock-row+.mock-row{border-top:1px solid var(--border)}.mock-row svg{color:var(--primary-text);flex-shrink:0}.mock-row__label{color:var(--text);margin-right:auto}.mock-row__value{color:var(--strong);font-weight:600;text-align:right}.mock-switch{position:relative;width:34px;height:20px;border-radius:10px;background:var(--input-border);flex-shrink:0}.mock-switch:after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0000004d}.mock-switch--on{background-image:var(--gradient)}.mock-switch--on:after{left:17px}.mock-float{position:absolute;z-index:2;left:-24px;bottom:0;display:flex;align-items:center;gap:12px;padding:12px 16px;max-width:280px;box-shadow:0 10px 25px #0003;animation:mock-float-in .6s .4s ease-out both}.mock-float__icon{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--success-chip-bg);color:var(--success-chip-text);flex-shrink:0}.mock-float__text{display:grid;min-width:0;font-size:.8125rem;line-height:1.4}.mock-float__text strong{color:var(--strong);font-weight:600}.mock-float__text span{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@keyframes mock-float-in{0%{opacity:.4;transform:translateY(8px)}}@media(max-width:560px){.mock-float{left:8px}}.mock-timeline{display:grid;gap:8px}.mock-timeline__track{position:relative;height:6px;border-radius:3px;background:var(--border)}.mock-timeline__fill{position:absolute;inset:0 12% 0 38%;border-radius:3px;background-image:var(--gradient)}.mock-timeline__labels{display:flex;justify-content:space-between;font-size:.75rem;color:var(--muted)}.mock-timeline__labels span:nth-child(2){margin-left:18%}.mock-file{display:flex;align-items:center;gap:14px}.mock-file__meta{display:grid;min-width:0;font-size:.875rem}.mock-file__meta strong{color:var(--strong);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mock-file__meta span{color:var(--muted)}.mock-progress{height:6px;border-radius:3px;background:var(--border);overflow:hidden}.mock-progress span{display:block;width:100%;height:100%;background-image:var(--gradient);transform-origin:left;animation:mock-progress 2.4s ease-out both}@keyframes mock-progress{0%{transform:scaleX(.35)}}.code{margin:0;padding:20px;overflow-x:auto;font-family:var(--mono);font-size:.8125rem;line-height:1.7;color:var(--text);white-space:pre}.code__verb{color:var(--success-text);font-weight:700}.code__key{color:var(--primary-text)}.code__str{color:var(--accent-text)}.code__comment{color:var(--muted)}.mock-stage--phone{max-width:320px}.phone{position:relative;z-index:1;padding:12px;border-radius:40px;background:#0b1220;box-shadow:0 0 0 1px #334155,0 30px 60px -20px #0f172a80}.phone__screen{display:grid;grid-template-rows:1fr auto;min-height:520px;overflow:hidden;border-radius:30px;background:var(--ground)}.phone__chat{display:flex;flex-direction:column;justify-content:flex-end;gap:10px;padding:20px 14px}.bubble{max-width:82%;padding:10px 14px;border-radius:18px;font-size:.875rem;line-height:1.4}.bubble--in{align-self:flex-start;background:var(--card);color:var(--strong);border:1px solid var(--border);border-bottom-left-radius:6px}.bubble--out{align-self:flex-end;display:grid;gap:2px;background-image:var(--gradient-brand);color:#fff;border-bottom-right-radius:6px;font-family:var(--mono);font-size:.8125rem}.bubble--out strong{font-family:var(--font);font-size:.75rem;letter-spacing:.06em;text-transform:uppercase}.bubble--out small{font-family:var(--font);opacity:.85}.phone__keyboard{display:grid;gap:8px;padding:10px 6px 18px;background:var(--card);border-top:1px solid var(--border)}.phone__bar{display:flex;align-items:center;justify-content:space-between;padding:2px 6px 4px}.phone__brand{font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--primary-text)}.phone__send{padding:4px 12px;border-radius:var(--radius);background-image:var(--gradient);color:#fff;font-size:.6875rem;font-weight:600;letter-spacing:.35px;text-transform:uppercase}.phone__keys{display:flex;justify-content:center;gap:4px}.phone__keys span{display:grid;place-items:center;width:24px;height:34px;border-radius:5px;background:var(--ground);box-shadow:0 1px 0 var(--border);color:var(--strong);font-size:.875rem}
