.tspb-demo{--tspb-navy:#071127;--tspb-ink:#101936;--tspb-muted:#64748b;--tspb-purple:#6818ed;--tspb-green:#18a66f;position:relative;width:100vw;margin-left:calc(50% - 50vw);overflow:hidden;padding:104px 20px;background:radial-gradient(circle at 7% 8%,rgba(25,177,124,.12),transparent 29%),radial-gradient(circle at 93% 12%,rgba(104,24,237,.1),transparent 30%),linear-gradient(180deg,#fff 0%,#f5f8fc 100%);color:var(--tspb-ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}.tspb-demo *{box-sizing:border-box}.tspb-inner{display:grid;width:min(1240px,100%);align-items:center;gap:64px;margin:0 auto;grid-template-columns:minmax(350px,.78fr) minmax(620px,1.22fr)}.tspb-copy{position:relative;z-index:2}.tspb-eyebrow{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid #d8eee6;border-radius:999px;background:#eefaf5;color:#14845e;font-size:11px;font-weight:850;letter-spacing:.09em;text-transform:uppercase}.tspb-eyebrow svg{width:15px;height:15px}.tspb-copy h2{max-width:520px;margin:18px 0 0!important;color:#101936!important;font-size:clamp(40px,4.5vw,62px)!important;font-weight:840!important;line-height:1.02!important;letter-spacing:-.05em!important;text-wrap:balance}.tspb-copy>p{max-width:510px;margin:20px 0 0!important;color:#62708a!important;font-size:16px!important;line-height:1.75!important}.tspb-benefits{display:grid;gap:12px;margin:25px 0 0!important;padding:0!important;list-style:none!important}.tspb-benefits li{display:flex;align-items:center;gap:11px;color:#33415a;font-size:13px;font-weight:680}.tspb-benefits li>span{display:block;width:8px;height:8px;border-radius:50%;background:var(--tspb-green);box-shadow:0 0 0 5px rgba(24,166,111,.1)}.tspb-copy-actions{display:flex;align-items:center;gap:14px;margin-top:30px}.tspb-replay{display:inline-flex;min-height:48px;align-items:center;justify-content:center;gap:9px;padding:0 18px;border:0;border-radius:13px;background:var(--tspb-navy);color:#fff;font-size:13px;font-weight:800;cursor:pointer;box-shadow:0 13px 27px rgba(7,17,39,.17);transition:transform .18s ease,background .18s ease}.tspb-replay:hover{background:#15213b;transform:translateY(-2px)}.tspb-replay:focus-visible,.tspb-library button:focus-visible{outline:3px solid rgba(104,24,237,.28);outline-offset:3px}.tspb-replay svg{width:17px;height:17px}.tspb-copy-note{color:#8591a4;font-size:11px}.tspb-builder{position:relative;z-index:3;overflow:hidden;height:680px;border:1px solid #dfe5ee;border-radius:28px;background:#fff;box-shadow:0 32px 80px rgba(20,36,65,.16),0 8px 24px rgba(20,36,65,.08)}.tspb-topbar{display:grid;height:58px;align-items:center;padding:0 17px;border-bottom:1px solid #e5eaf1;background:#f8fafc;grid-template-columns:90px 1fr 100px}.tspb-window-dots{display:flex;gap:7px}.tspb-window-dots i{width:9px;height:9px;border-radius:50%;background:#ff5f57}.tspb-window-dots i:nth-child(2){background:#febc2e}.tspb-window-dots i:nth-child(3){background:#28c840}.tspb-address{display:flex;height:32px;align-items:center;justify-content:center;gap:7px;border:1px solid #e2e7ee;border-radius:9px;background:#fff;color:#8a95a5;font-size:10px}.tspb-address span{width:7px;height:7px;border-radius:50%;background:#19a770}.tspb-progress{display:flex;align-items:baseline;justify-content:flex-end;gap:3px;color:#8b96a6;font-size:9px}.tspb-progress b{color:var(--tspb-purple);font-size:15px}.tspb-workspace{display:grid;height:622px;grid-template-columns:164px minmax(0,1fr)}.tspb-library{position:relative;z-index:3;display:flex;flex-direction:column;gap:8px;padding:18px 13px;border-right:1px solid #e4e9f0;background:#f8fafc}.tspb-library>strong{margin:0 5px 4px;color:#9aa4b2;font-size:9px;font-weight:900;letter-spacing:.13em;text-transform:uppercase}.tspb-library button{position:relative;display:flex;min-height:54px;align-items:center;gap:9px;padding:0 11px;border:1px solid #e2e7ef;border-radius:11px;background:#fff;color:#445169;font-size:11px;font-weight:720;text-align:left;cursor:pointer;transition:border-color .18s ease,background .18s ease,transform .18s ease}.tspb-library button svg{width:17px;height:17px;color:#6c7890}.tspb-library button>i{position:absolute;right:9px;width:6px;height:6px;border-radius:50%;background:#d4dbe4}.tspb-library button.is-active{border-color:#9f75ee;background:#f3edff;color:#5d1ec4;transform:translateX(3px)}.tspb-library button.is-active svg{color:#6818ed}.tspb-library button.is-done{border-color:#ccebdd;background:#f0faf6;color:#137453}.tspb-library button.is-done>i{background:#1ca36f}.tspb-canvas-wrap{position:relative;overflow:hidden;padding:18px;background-color:#eef2f6;background-image:linear-gradient(rgba(106,123,146,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(106,123,146,.07) 1px,transparent 1px);background-size:24px 24px}.tspb-canvas{position:relative;display:flex;height:100%;flex-direction:column;gap:9px;overflow:hidden;padding:18px;border:1px solid #e1e6ed;border-radius:16px;background:#fff;box-shadow:0 15px 35px rgba(31,48,75,.1)}.tspb-piece{position:relative;flex:none;transition:opacity .28s ease,transform .32s cubic-bezier(.2,.9,.3,1),filter .28s ease,box-shadow .28s ease}.tspb-builder.is-animating .tspb-piece:not(.is-placed){border:1px dashed #d8dee7!important;background:#f9fafc!important;box-shadow:none!important;opacity:.52;filter:grayscale(1)}.tspb-builder.is-animating .tspb-piece:not(.is-placed)>*{opacity:0}.tspb-piece.is-placed{opacity:1;filter:none;transform:scale(1);animation:tspb-snap .38s cubic-bezier(.2,1.4,.4,1)}@keyframes tspb-snap{0%{transform:scale(.96);box-shadow:0 0 0 4px rgba(104,24,237,.14)}100%{transform:scale(1);box-shadow:none}}.tspb-piece-header{display:flex;height:40px;align-items:center;padding:0 12px;border-bottom:1px solid #eef1f5}.tspb-mini-logo{color:#111827;font-size:11px;font-weight:900}.tspb-mini-logo>span{color:#19a770}.tspb-mini-nav{display:flex;gap:7px;margin-left:auto}.tspb-mini-nav i{display:block;width:30px;height:5px;border-radius:5px;background:#e2e5ea}.tspb-piece-header>b{width:42px;height:17px;margin-left:10px;border-radius:6px;background:#071127}.tspb-piece-hero{height:120px;padding:18px;border-radius:12px;background:linear-gradient(130deg,#f0f7ff,#f7f3ff)}.tspb-piece-hero small{display:block;color:#16835e;font-size:7px;font-weight:900;letter-spacing:.11em}.tspb-piece-hero strong{display:block;margin-top:7px;color:#101936;font-size:19px;line-height:1.02;letter-spacing:-.04em}.tspb-piece-hero>span{display:block;width:52%;height:6px;margin-top:10px;border-radius:5px;background:#d8dfe8}.tspb-piece-hero>span+span{width:38%;margin-top:5px}.tspb-piece-action{display:flex;width:max-content;height:32px;align-items:center;gap:8px;margin-top:-2px;padding:0 13px;border-radius:8px;background:#071127;color:#fff;font-size:8px;font-weight:850}.tspb-piece-action span{font-size:12px}.tspb-piece-visual{height:112px;padding:10px;border-radius:12px;background:linear-gradient(135deg,#eef8f4,#f5efff)}.tspb-piece-visual>div{position:relative;height:100%;overflow:hidden;border-radius:9px;background:linear-gradient(135deg,#101936,#21375d)}.tspb-piece-visual span{position:absolute;top:17px;left:18px;width:90px;height:8px;border-radius:7px;background:rgba(255,255,255,.9)}.tspb-piece-visual b{position:absolute;top:35px;left:18px;width:145px;height:5px;border-radius:5px;background:rgba(255,255,255,.24)}.tspb-piece-visual i{position:absolute;right:22px;bottom:-22px;width:108px;height:108px;border:18px solid rgba(80,204,158,.48);border-radius:50%}.tspb-piece-products{display:grid;height:102px;gap:8px;grid-template-columns:repeat(3,1fr)}.tspb-piece-products article{padding:7px;border:1px solid #e6eaf0;border-radius:9px;background:#fff}.tspb-piece-products article>i{display:block;height:49px;border-radius:6px;background:linear-gradient(145deg,#eaf0f6,#f8fafc)}.tspb-piece-products article>span{display:block;width:72%;height:5px;margin-top:7px;border-radius:4px;background:#cfd7e1}.tspb-piece-products article>b{display:block;width:35%;height:6px;margin-top:5px;border-radius:5px;background:#6b2ae3}.tspb-piece-trust{display:flex;height:30px;align-items:center;justify-content:center;gap:15px;border-radius:8px;background:#eefaf5;color:#187957;font-size:7px;font-weight:800}.tspb-piece-trust span:before{display:inline-block;width:5px;height:5px;margin-right:5px;border-radius:50%;background:#1cab74;content:""}.tspb-piece-footer{display:grid;height:45px;align-items:center;padding:0 12px;border-radius:8px;background:#101936;color:#fff;grid-template-columns:1fr auto 1fr}.tspb-piece-footer>b{font-size:8px}.tspb-piece-footer>div{display:flex;gap:5px}.tspb-piece-footer i{display:block;width:18px;height:4px;border-radius:3px;background:#58627b}.tspb-piece-footer small{justify-self:end;color:#8590a7;font-size:6px}.tspb-cursor{position:absolute;z-index:20;top:0;left:0;width:29px;height:35px;opacity:0;pointer-events:none;filter:drop-shadow(0 5px 7px rgba(20,26,38,.3));will-change:transform}.tspb-cursor svg{width:29px;height:35px;fill:#fff;stroke:#101936;stroke-width:1.8}.tspb-cursor span{position:absolute;top:-7px;left:-7px;width:42px;height:42px;border:2px solid rgba(104,24,237,.25);border-radius:50%;opacity:0}.tspb-cursor.is-clicking span{animation:tspb-click .5s ease}@keyframes tspb-click{0%{opacity:1;transform:scale(.4)}100%{opacity:0;transform:scale(1.2)}}.tspb-drag-ghost{position:absolute;z-index:18;top:0;left:0;display:flex;min-width:100px;height:39px;align-items:center;justify-content:center;padding:0 13px;border:1px solid #9569e8;border-radius:10px;background:#fff;color:#5c20bd;font-size:10px;font-weight:800;opacity:0;pointer-events:none;box-shadow:0 15px 30px rgba(50,30,88,.22);will-change:transform}.tspb-complete{position:absolute;z-index:24;right:27px;bottom:26px;display:flex;min-width:210px;align-items:center;gap:12px;padding:15px 17px;border:1px solid rgba(255,255,255,.1);border-radius:16px;background:#071127;color:#fff;opacity:0;transform:translateY(18px) scale(.97);box-shadow:0 22px 48px rgba(5,13,28,.32);pointer-events:none;transition:opacity .35s ease,transform .4s cubic-bezier(.2,1.2,.3,1)}.tspb-complete.is-visible{opacity:1;transform:none}.tspb-complete>span{display:grid;width:34px;height:34px;place-items:center;border-radius:10px;background:#1ba873;color:#fff}.tspb-complete svg{width:19px;height:19px}.tspb-complete strong{display:block;font-size:13px}.tspb-complete small{display:block;margin-top:3px;color:#91a0b5;font-size:9px}@media(max-width:1080px){.tspb-inner{grid-template-columns:1fr}.tspb-copy{max-width:760px;margin:0 auto;text-align:center}.tspb-copy h2,.tspb-copy>p{margin-right:auto!important;margin-left:auto!important}.tspb-benefits{justify-content:center}.tspb-copy-actions{justify-content:center}.tspb-builder{width:min(760px,100%);margin:0 auto}}@media(max-width:680px){.tspb-demo{padding:64px 14px}.tspb-inner{gap:36px}.tspb-copy{text-align:left}.tspb-copy h2{font-size:39px!important}.tspb-copy>p{font-size:14px!important;line-height:1.65!important}.tspb-benefits{justify-content:start}.tspb-copy-actions{align-items:stretch;flex-direction:column}.tspb-replay{width:100%;min-height:48px}.tspb-copy-note{text-align:center}.tspb-builder{height:720px;border-radius:22px}.tspb-topbar{height:52px;padding:0 10px;grid-template-columns:62px 1fr 66px}.tspb-address{height:29px;font-size:8px}.tspb-progress span{display:none}.tspb-workspace{height:668px;grid-template-columns:1fr;grid-template-rows:72px 1fr}.tspb-library{display:flex;overflow-x:auto;flex-direction:row;gap:6px;padding:9px;border-right:0;border-bottom:1px solid #e3e8ef}.tspb-library>strong{display:none}.tspb-library button{flex:0 0 72px;min-height:52px;justify-content:center;flex-direction:column;gap:2px;padding:4px;font-size:8px}.tspb-library button svg{width:15px;height:15px}.tspb-library button>i{top:6px;right:6px}.tspb-library button.is-active{transform:translateY(2px)}.tspb-canvas-wrap{padding:10px}.tspb-canvas{gap:7px;padding:11px;border-radius:13px}.tspb-piece-header{height:36px}.tspb-piece-hero{height:112px;padding:15px}.tspb-piece-hero strong{font-size:17px}.tspb-piece-visual{height:106px}.tspb-piece-products{height:95px;gap:5px}.tspb-piece-products article{padding:5px}.tspb-piece-products article>i{height:46px}.tspb-piece-trust{height:29px;gap:8px;font-size:6px}.tspb-piece-footer{height:40px}.tspb-complete{right:16px;bottom:16px;min-width:190px}.tspb-drag-ghost{min-width:82px;height:34px;font-size:9px}}@media(prefers-reduced-motion:reduce){.tspb-cursor,.tspb-drag-ghost{display:none!important}.tspb-builder.is-animating .tspb-piece{opacity:1!important;filter:none!important}.tspb-builder.is-animating .tspb-piece>*{opacity:1!important}.tspb-replay{display:none}}
.tspb-demo.tspb-compact{width:100%;margin:0;padding:0;overflow:visible;background:transparent}.tspb-compact [data-tspb-replay][hidden]{display:none!important}.tspb-compact .tspb-inner{display:block;width:100%;margin:0}.tspb-compact .tspb-builder{width:100%;height:377px;margin:0;border-radius:22px}.tspb-compact .tspb-topbar{height:42px;padding:0 11px;grid-template-columns:60px 1fr 70px}.tspb-compact .tspb-window-dots{gap:5px}.tspb-compact .tspb-window-dots i{width:7px;height:7px}.tspb-compact .tspb-address{height:25px;font-size:7px}.tspb-compact .tspb-progress{font-size:7px}.tspb-compact .tspb-progress b{font-size:12px}.tspb-compact .tspb-workspace{height:335px;grid-template-columns:112px minmax(0,1fr)}.tspb-compact .tspb-library{gap:4px;padding:8px 7px}.tspb-compact .tspb-library>strong{margin-bottom:0;font-size:7px}.tspb-compact .tspb-library button{min-height:36px;gap:6px;padding:0 7px;border-radius:8px;font-size:8px}.tspb-compact .tspb-library button svg{width:13px;height:13px}.tspb-compact .tspb-library button>i{right:6px;width:5px;height:5px}.tspb-compact .tspb-canvas-wrap{padding:10px}.tspb-compact .tspb-canvas{gap:4px;padding:8px;border-radius:11px}.tspb-compact .tspb-piece-header{height:26px;padding:0 7px}.tspb-compact .tspb-mini-logo{font-size:7px}.tspb-compact .tspb-mini-nav{gap:4px}.tspb-compact .tspb-mini-nav i{width:18px;height:3px}.tspb-compact .tspb-piece-header>b{width:28px;height:12px;margin-left:6px}.tspb-compact .tspb-piece-hero{height:66px;padding:9px;border-radius:8px}.tspb-compact .tspb-piece-hero small{font-size:5px}.tspb-compact .tspb-piece-hero strong{margin-top:3px;font-size:11px}.tspb-compact .tspb-piece-hero>span{height:3px;margin-top:5px}.tspb-compact .tspb-piece-hero>span+span{margin-top:3px}.tspb-compact .tspb-piece-action{height:22px;padding:0 8px;border-radius:6px;font-size:5.5px}.tspb-compact .tspb-piece-action span{font-size:8px}.tspb-compact .tspb-piece-visual{height:54px;padding:5px;border-radius:8px}.tspb-compact .tspb-piece-visual>div{border-radius:6px}.tspb-compact .tspb-piece-visual span{top:8px;left:9px;width:50px;height:4px}.tspb-compact .tspb-piece-visual b{top:18px;left:9px;width:80px;height:3px}.tspb-compact .tspb-piece-visual i{right:10px;bottom:-15px;width:58px;height:58px;border-width:10px}.tspb-compact .tspb-piece-products{height:54px;gap:4px}.tspb-compact .tspb-piece-products article{padding:3px;border-radius:5px}.tspb-compact .tspb-piece-products article>i{height:28px;border-radius:4px}.tspb-compact .tspb-piece-products article>span{height:3px;margin-top:4px}.tspb-compact .tspb-piece-products article>b{height:3px;margin-top:3px}.tspb-compact .tspb-piece-trust{height:18px;gap:7px;border-radius:5px;font-size:4.5px}.tspb-compact .tspb-piece-trust span:before{width:3px;height:3px;margin-right:3px}.tspb-compact .tspb-piece-footer{height:25px;padding:0 7px;border-radius:5px}.tspb-compact .tspb-piece-footer>b{font-size:5px}.tspb-compact .tspb-piece-footer i{width:10px;height:2px}.tspb-compact .tspb-piece-footer small{font-size:4px}.tspb-compact .tspb-complete{right:12px;bottom:12px;min-width:145px;gap:8px;padding:9px 10px;border-radius:11px}.tspb-compact .tspb-complete>span{width:25px;height:25px;border-radius:7px}.tspb-compact .tspb-complete svg{width:14px;height:14px}.tspb-compact .tspb-complete strong{font-size:9px}.tspb-compact .tspb-complete small{font-size:6px}.tspb-compact .tspb-drag-ghost{min-width:72px;height:28px;padding:0 8px;border-radius:7px;font-size:7px}.tspb-compact .tspb-cursor,.tspb-compact .tspb-cursor svg{width:22px;height:28px}
@media(max-width:680px){.tspb-demo.tspb-compact{width:100%;margin:0}.tspb-compact .tspb-builder{height:483px;border-radius:20px}.tspb-compact .tspb-topbar{height:42px}.tspb-compact .tspb-workspace{height:441px;grid-template-columns:1fr;grid-template-rows:58px 1fr}.tspb-compact .tspb-library{display:flex;overflow-x:auto;flex-direction:row;gap:5px;padding:7px;border-right:0;border-bottom:1px solid #e3e8ef}.tspb-compact .tspb-library>strong{display:none}.tspb-compact .tspb-library button{flex:0 0 62px;min-height:43px;justify-content:center;flex-direction:column;gap:1px;padding:3px;font-size:6px}.tspb-compact .tspb-library button.is-active{transform:translateY(1px)}.tspb-compact .tspb-canvas-wrap{padding:8px}.tspb-compact .tspb-canvas{gap:5px;padding:9px}.tspb-compact .tspb-piece-header{height:28px}.tspb-compact .tspb-piece-hero{height:74px}.tspb-compact .tspb-piece-hero strong{font-size:12px}.tspb-compact .tspb-piece-action{height:24px}.tspb-compact .tspb-piece-visual{height:62px}.tspb-compact .tspb-piece-products{height:64px}.tspb-compact .tspb-piece-products article>i{height:36px}.tspb-compact .tspb-piece-trust{height:20px;font-size:4.5px}.tspb-compact .tspb-piece-footer{height:28px}.tspb-compact .tspb-complete{right:10px;bottom:10px}}