.zsp{--zsp-ink: #0A2418;--zsp-ink-soft: #3F5A4A;--zsp-mute: #7A8B7F;--zsp-accent: #14A800;--zsp-accent-2: #7CFF5B;--zsp-dark: #071610;--zsp-dark-2: #0D2219;--zsp-line: rgba(10, 36, 24, .1);--zsp-line-dark: rgba(255, 255, 255, .1);--zsp-serif: "Fraunces", ui-serif, Georgia, serif;--zsp-sans: "Manrope", ui-sans-serif, system-ui, sans-serif;--zsp-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;--zsp-ease: cubic-bezier(.2, .8, .2, 1);font-family:var(--zsp-sans);color:var(--zsp-ink);position:relative}.zsp *,.zsp *:before,.zsp *:after{box-sizing:border-box}.zsp a{text-decoration:none}.zsp img{display:block;max-width:100%}.zsp-container{width:100%;max-width:1360px;margin:0 auto;padding:0 40px;position:relative;z-index:2}@media(max-width:900px){.zsp-container{padding:0 20px}}.zsp--dark{position:relative;background:var(--zsp-dark);color:#fff;overflow:hidden}.zsp--dark:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:1;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse at 50% 0%,#000 30%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse at 50% 0%,#000 30%,transparent 75%)}.zsp--dark:after{content:"";position:absolute;z-index:1;pointer-events:none;width:900px;height:900px;border-radius:50%;top:-450px;left:50%;transform:translate(-50%);background:radial-gradient(circle,rgba(20,168,0,.22),transparent 65%)}.zsp-label{font-family:var(--zsp-mono);font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.16em;display:inline-flex;align-items:center;gap:10px;color:var(--zsp-mute)}.zsp-label:before{content:"";width:24px;height:1px;background:currentColor}.zsp--dark .zsp-label{color:var(--zsp-accent-2)}.zsp-h2{font-weight:300;font-size:clamp(38px,5.6vw,84px);line-height:.98;letter-spacing:-.04em;margin:22px 0 0;max-width:940px;color:inherit}.zsp-h2 em,.zsp-h1 em{font-family:var(--zsp-serif);font-style:italic;font-weight:300;color:var(--zsp-accent)}.zsp--dark .zsp-h2 em,.zsp--dark .zsp-h1 em{color:var(--zsp-accent-2)}.zsp-sub{font-size:17px;line-height:1.65;color:var(--zsp-ink-soft);max-width:560px;margin:22px 0 0}.zsp--dark .zsp-sub{color:#ffffffb8}.zsp-btn{display:inline-flex;align-items:center;gap:12px;border-radius:999px;padding:13px 14px 13px 26px;font-size:15px;font-weight:600;letter-spacing:-.01em;transition:transform .4s var(--zsp-ease),background .3s,box-shadow .3s,color .3s,border-color .3s;border:1px solid transparent;cursor:pointer;white-space:nowrap}.zsp-btn .zsp-btn-ico{width:32px;height:32px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--zsp-accent);transition:transform .35s var(--zsp-ease);flex-shrink:0}.zsp-btn .zsp-btn-ico svg{width:14px;height:14px;stroke:#fff;stroke-width:2.2;fill:none}.zsp-btn:hover{transform:translateY(-3px)}.zsp-btn:hover .zsp-btn-ico{transform:rotate(45deg)}.zsp-btn--solid{background:var(--zsp-ink);color:#fff!important}.zsp-btn--solid:hover{box-shadow:0 14px 30px -10px #0a241873}.zsp-btn--accent{background:var(--zsp-accent);color:#fff!important}.zsp-btn--accent .zsp-btn-ico{background:#fff3}.zsp-btn--accent:hover{box-shadow:0 14px 34px -10px #14a800a6}.zsp-btn--ghost{border-color:var(--zsp-line);color:var(--zsp-ink)!important;background:transparent;padding:13px 26px}.zsp-btn--ghost:hover{border-color:var(--zsp-ink)}.zsp--dark .zsp-btn--ghost{border-color:#ffffff40;color:#fff!important;background:#ffffff0a}.zsp--dark .zsp-btn--ghost:hover{border-color:#fff;background:#ffffff14}.zsp--dark .zsp-btn--solid{background:#fff;color:var(--zsp-ink)!important}.zsp-stats{display:flex;gap:44px;flex-wrap:wrap;margin-top:34px}.zsp-stat strong{display:block;font-family:var(--zsp-serif);font-weight:400;font-size:clamp(34px,3.6vw,48px);line-height:1;letter-spacing:-.03em;color:inherit}.zsp-stat span{display:block;margin-top:8px;font-family:var(--zsp-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--zsp-mute)}.zsp--dark .zsp-stat span{color:#ffffff80}.zsp-stat strong sup{font-size:.5em;color:var(--zsp-accent);vertical-align:super}.zsp--dark .zsp-stat strong sup{color:var(--zsp-accent-2)}.zsp-filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 34px}.zsp-chip{font-family:var(--zsp-sans);font-size:13px;font-weight:600;padding:9px 16px;border-radius:999px;border:1px solid var(--zsp-line);background:#fff;color:var(--zsp-ink-soft);cursor:pointer;transition:all .25s var(--zsp-ease)}.zsp-chip:hover{border-color:var(--zsp-ink);color:var(--zsp-ink)}.zsp-chip.is-active{background:var(--zsp-ink);border-color:var(--zsp-ink);color:#fff}.zsp-chip small{opacity:.55;margin-left:4px;font-weight:500}.zsp--dark .zsp-chip{background:#ffffff0a;border-color:#ffffff24;color:#ffffffbf}.zsp--dark .zsp-chip:hover{border-color:#ffffff80;color:#fff}.zsp--dark .zsp-chip.is-active{background:var(--zsp-accent);border-color:var(--zsp-accent);color:#fff}.zsp-browser{position:relative;border-radius:14px;overflow:hidden;background:#fff;border:1px solid rgba(10,36,24,.12);box-shadow:0 1px #fff9 inset,0 24px 50px -24px #07161073}.zsp-browser-bar{display:flex;align-items:center;gap:12px;height:34px;padding:0 12px;background:#f3f5f3;border-bottom:1px solid rgba(10,36,24,.08)}.zsp-dots{display:inline-flex;gap:6px;flex-shrink:0}.zsp-dots i{width:9px;height:9px;border-radius:50%;background:#ff5f57;display:block}.zsp-dots i:nth-child(2){background:#febc2e}.zsp-dots i:nth-child(3){background:#28c840}.zsp-url{flex:1;min-width:0;height:20px;border-radius:6px;background:#fff;border:1px solid rgba(10,36,24,.08);display:flex;align-items:center;justify-content:center;gap:6px;font-family:var(--zsp-mono);font-size:10.5px;color:var(--zsp-ink-soft);letter-spacing:.02em;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:0 8px}.zsp-url svg{width:9px;height:9px;flex-shrink:0;fill:var(--zsp-accent)}.zsp-screen{position:relative;overflow:hidden;background:#eef2ee;aspect-ratio:4 / 3}.zsp-screen img{width:100%;height:100%;object-fit:cover;object-position:50% 0%;transition:object-position 6s cubic-bezier(.45,.05,.35,1)}.zsp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}@media(max-width:1100px){.zsp-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}}@media(max-width:640px){.zsp-grid{grid-template-columns:1fr}}.zsp-card{position:relative;display:flex;flex-direction:column;border-radius:22px;padding:12px;background:#fff;border:1px solid var(--zsp-line);transition:transform .5s var(--zsp-ease),box-shadow .5s var(--zsp-ease),border-color .4s}.zsp-card.is-hidden{display:none}.zsp-card:hover{transform:translateY(-6px);border-color:#14a80073;box-shadow:0 34px 60px -28px #14a80059}.zsp-card:hover .zsp-screen img{object-position:50% 100%}.zsp-card-link{position:absolute;top:0;right:0;bottom:0;left:0;z-index:3;border-radius:inherit}.zsp-card-link:focus-visible{outline:2px solid var(--zsp-accent);outline-offset:3px}.zsp-card .zsp-browser{box-shadow:none;border-radius:12px}.zsp-card-body{padding:18px 8px 8px;display:flex;flex-direction:column;flex:1}.zsp-card-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}.zsp-pill{font-family:var(--zsp-mono);font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--zsp-accent);background:#14a80014;border:1px solid rgba(20,168,0,.18);padding:5px 10px;border-radius:999px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:75%}.zsp-num{font-family:var(--zsp-mono);font-size:11px;color:var(--zsp-mute);letter-spacing:.08em}.zsp-card h3{font-size:21px;font-weight:700;letter-spacing:-.02em;line-height:1.2;margin:0 0 8px;color:var(--zsp-ink)}.zsp-card p{font-size:14.5px;line-height:1.6;color:var(--zsp-ink-soft);margin:0 0 18px}.zsp-card-actions{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:14px;border-top:1px dashed var(--zsp-line)}.zsp-more{font-size:14px;font-weight:700;color:var(--zsp-ink);display:inline-flex;align-items:center;gap:8px}.zsp-more svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none;transition:transform .35s var(--zsp-ease)}.zsp-card:hover .zsp-more{color:var(--zsp-accent)}.zsp-card:hover .zsp-more svg{transform:translate(4px)}.zsp-live{position:relative;z-index:4;font-family:var(--zsp-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--zsp-mute)!important;display:inline-flex;align-items:center;gap:6px;padding:6px 0}.zsp-live:hover{color:var(--zsp-accent)!important}.zsp-live svg{width:11px;height:11px;stroke:currentColor;stroke-width:2.2;fill:none}.zsp--dark .zsp-card{background:#ffffff09;border-color:#ffffff17;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.zsp--dark .zsp-card:hover{border-color:#7cff5b73;box-shadow:0 40px 70px -30px #14a80073}.zsp--dark .zsp-card h3{color:#fff}.zsp--dark .zsp-card p{color:#ffffff9e}.zsp--dark .zsp-card-actions{border-top-color:#ffffff1a}.zsp--dark .zsp-more{color:#fff}.zsp--dark .zsp-card:hover .zsp-more{color:var(--zsp-accent-2)}.zsp--dark .zsp-pill{color:var(--zsp-accent-2);background:#7cff5b14;border-color:#7cff5b33}.zsp--dark .zsp-num,.zsp--dark .zsp-live{color:#ffffff73!important}.zsp--dark .zsp-live:hover{color:var(--zsp-accent-2)!important}@media(min-width:1101px){.zsp-grid--feature .zsp-card:first-child{grid-column:span 2;flex-direction:row;gap:10px}.zsp-grid--feature .zsp-card:first-child .zsp-browser{flex:1.35}.zsp-grid--feature .zsp-card:first-child .zsp-screen{aspect-ratio:auto;height:100%;min-height:360px}.zsp-grid--feature .zsp-card:first-child .zsp-card-body{flex:1;padding:22px 18px 12px 22px}.zsp-grid--feature .zsp-card:first-child h3{font-size:30px}.zsp-grid--feature .zsp-card:first-child p{font-size:15.5px}.zsp-grid--feature .zsp-card:first-child .zsp-browser{display:flex;flex-direction:column}.zsp-grid--feature .zsp-card:first-child .zsp-screen{flex:1}}@media(max-width:640px){.zsp-grid--scroll{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin:0 -20px;padding:6px 20px 18px;scrollbar-width:none}.zsp-grid--scroll::-webkit-scrollbar{display:none}.zsp-grid--scroll .zsp-card{flex:0 0 84%;scroll-snap-align:center}}.zsp-reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--zsp-ease),transform .8s var(--zsp-ease)}.zsp-reveal.is-in{opacity:1;transform:none}@media(prefers-reduced-motion:reduce){.zsp-reveal{opacity:1;transform:none;transition:none}.zsp-screen img{transition:none}.zsp-card:hover .zsp-screen img{object-position:50% 0%}}
/*# sourceMappingURL=/cdn/shop/t/2/assets/zs-portfolio.css.map */