/* Showcase animated scene (v1.14.9) — all selectors prefixed zs- so nothing leaks into the theme. */
.zs-scene{position:relative;width:100%;aspect-ratio:1670/940;overflow:hidden;border-radius:48px;background:#050303;color:#fff4ea;font-family:inherit;line-height:normal;text-align:left;isolation:isolate;will-change:transform;user-select:none;-webkit-user-select:none}
.zs-scene .zs-pre{font:500 15.5px/1.6 ui-monospace,"JetBrains Mono",SFMono-Regular,Menlo,monospace}
.zs-scene .zs-paused,.zs-scene.zs-paused *{animation-play-state:paused!important}
.zs-scene button{font-family:inherit}

.zs-scene{--zs-o:#ff7a18;--zs-o2:#ff4d00;--zs-o3:#ffb36b}
.zs-scene *{box-sizing:border-box;margin:0}


.zs-stage{position:absolute;left:0;top:0;width:1670px;height:940px;transform-origin:0 0;perspective:1800px}
.zs-world{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .25s ease-out}
.zs-world:before{content:"";position:absolute;inset:-200px;background:radial-gradient(40% 45% at 50% 55%,rgba(255,90,0,.13),transparent 70%)}
.zs-glass{position:absolute;background:linear-gradient(160deg,rgba(40,28,22,.9),rgba(14,10,8,.92));border:1.5px solid rgba(255,122,24,.75);border-radius:22px;box-shadow:0 0 22px rgba(255,90,0,.45),0 0 70px rgba(255,90,0,.18),inset 0 0 28px rgba(255,110,20,.16);backdrop-filter:blur(6px)}
.zs-float{animation:zs-fl 7s ease-in-out infinite}
@keyframes zs-fl{50%{translate:0 -14px}}
svg.zs-orbit{position:absolute;inset:0;pointer-events:none;overflow:visible}
.zs-ring{fill:none;stroke:url(#zs-g);stroke-width:2.5;stroke-linecap:round;filter:url(#zs-glow);stroke-dasharray:900 260;animation:zs-dash 9s linear infinite}
.zs-ring.b{animation-duration:13s;animation-direction:reverse;stroke-width:2}
@keyframes zs-dash{to{stroke-dashoffset:-1160}}
/* code */
#zs-code{left:250px;top:100px;width:400px;height:320px;transform:rotate(-8deg) skewX(-2deg);animation-delay:-2s}
.zs-bar{display:flex;justify-content:space-between;align-items:center;padding:14px 22px;font:600 28px 'JetBrains Mono',monospace;color:var(--zs-o)}
.zs-burger{width:18px;height:12px;border-top:2px solid #e8d8cc;border-bottom:2px solid #e8d8cc;position:relative}
.zs-burger:after{content:"";position:absolute;left:0;right:0;top:3px;border-top:2px solid #e8d8cc}
.zs-pre{padding:6px 26px 24px;color:#e9ddd2;white-space:pre;min-height:230px}
.zs-k{color:var(--zs-o)}.zs-v{color:#8fd3ff}.zs-c{display:inline-block;width:8px;height:16px;background:var(--zs-o);vertical-align:-3px;animation:zs-bl 1s steps(1) infinite}
@keyframes zs-bl{50%{opacity:0}}
/* browser */
#zs-browser{left:490px;top:150px;width:780px;height:545px;transform:rotate(-4deg) skewY(-1.5deg);border-radius:26px;animation-delay:-4s}
.zs-dots{position:absolute;left:18px;top:14px;display:flex;gap:8px}
.zs-dots i{width:11px;height:11px;border-radius:50%;background:#ff4d3a}.zs-dots i:nth-child(2){background:#ffc02e}.zs-dots i:nth-child(3){background:#fff}
.zs-nav{position:absolute;left:0;right:0;top:48px;display:flex;align-items:center;padding:0 40px}
.zs-logo{font-weight:600;font-size:25px;letter-spacing:.2px}.zs-logo b{color:var(--zs-o)}
.zs-nav ul{display:flex;gap:30px;list-style:none;margin-left:auto;margin-right:60px;font-size:13px}
.zs-nav li{cursor:pointer;transition:color .2s}.zs-nav li:hover{color:var(--zs-o)}
.zs-h1{position:absolute;left:62px;top:112px;font-weight:500;font-size:40px;line-height:1.05;letter-spacing:-1px;white-space:nowrap}
.zs-h1 span{display:block;font-weight:600;background:linear-gradient(90deg,#ff7a18,#ffc27a,#ff5a00,#ff7a18);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:zs-sh 5s linear infinite}
@keyframes zs-sh{to{background-position:-250% 0}}
.zs-sub{position:absolute;left:62px;top:228px;width:300px;font-size:14px;line-height:1.5;color:#e6d6ca}
.zs-cta{position:absolute;left:62px;top:326px;display:flex;align-items:center;gap:16px;padding:11px 20px;border-radius:999px;border:0;font:500 14px 'Outfit';color:#fff;background:linear-gradient(90deg,#ff8a1f,#ff5a00);box-shadow:0 0 26px rgba(255,100,0,.6);cursor:pointer;animation:zs-pulse 2.6s ease-in-out infinite}
@keyframes zs-pulse{50%{box-shadow:0 0 44px rgba(255,120,20,.95)}}
.zs-hero{position:absolute;left:462px;top:84px;width:278px;height:260px;border-radius:14px;overflow:hidden;background:#0a0503;box-shadow:inset 0 0 30px #000,0 0 30px rgba(255,90,0,.3)}
.zs-blob,.zs-blob:before,.zs-blob:after{position:absolute;border-radius:50%;content:""}
.zs-blob{inset:-40%;background:conic-gradient(from 0deg,#150600,#ff6a00,#2a0d00,#ffb347,#120500,#ff4d00,#150600);filter:blur(14px);animation:zs-spin 14s linear infinite}
.zs-blob:before{inset:22%;background:conic-gradient(from 90deg,#000,#ff7a18,#1a0800,#ffcf8a,#000);animation:zs-spin 8s linear infinite reverse}
.zs-blob:after{inset:38%;background:radial-gradient(circle at 35% 30%,#ffd9a8,#ff6a00 40%,#150500 80%);filter:blur(3px);animation:zs-breathe 5s ease-in-out infinite}
@keyframes zs-spin{to{transform:rotate(360deg)}}
@keyframes zs-breathe{50%{transform:scale(1.25)}}
.zs-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.14) 50%,transparent 60%);transform:translateX(-120%);animation:zs-gl 6s ease-in-out infinite}
@keyframes zs-gl{40%,100%{transform:translateX(120%)}}
.zs-svcs{position:absolute;left:36px;right:36px;top:394px;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.zs-svc{min-height:118px;padding:16px 12px 14px;border-radius:12px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.07);font-size:12px;transition:transform .3s,border-color .3s,box-shadow .3s;animation:zs-lit 8s infinite}
.zs-svc:nth-child(2){animation-delay:2s}.zs-svc:nth-child(3){animation-delay:4s}.zs-svc:nth-child(4){animation-delay:6s}
.zs-svc:hover{transform:translateY(-6px);border-color:var(--zs-o)}
@keyframes zs-lit{0%,22%,100%{border-color:rgba(255,255,255,.07);box-shadow:none}8%,14%{border-color:rgba(255,122,24,.8);box-shadow:0 0 22px rgba(255,90,0,.4)}}
.zs-ico{width:28px;height:28px;border:1.8px solid var(--zs-o);border-radius:8px;margin-bottom:10px;display:grid;place-items:center;color:var(--zs-o);font-size:14px;box-shadow:0 0 12px rgba(255,90,0,.35)}
.zs-svc b{display:block;font-weight:500;font-size:12.5px;color:#fff;white-space:nowrap}.zs-svc small{display:block;margin-top:3px;color:#a8978b;font-size:10px;line-height:1.35}
/* phone */
#zs-phone{left:1325px;top:196px;width:205px;height:300px;transform:rotate(-3deg) skewY(-1deg);border-radius:24px;animation-delay:-1s;padding:22px 20px}
#zs-phone .zs-logo{font-size:16px}
#zs-phone .zs-h3{font-weight:500;font-size:19px;line-height:1.1;margin-top:34px;transition:opacity .35s,transform .35s}
.zs-go{width:30px;height:30px;border-radius:50%;background:var(--zs-o);display:grid;place-items:center;margin-top:12px;color:#fff;box-shadow:0 0 16px rgba(255,100,0,.7);cursor:pointer}
.zs-pic{position:absolute;left:20px;right:20px;top:166px;height:92px;border-radius:10px;overflow:hidden;background:#100604}
.zs-pic .zs-blob{inset:-60%;filter:blur(8px);transition:filter .5s}
.zs-cnt{position:absolute;left:20px;right:20px;bottom:14px;display:flex;align-items:center;gap:8px;font-size:12px}
.zs-cnt em{font-style:normal;color:#8d7d72}.zs-cnt .zs-sp{flex:1;height:2px;background:rgba(255,255,255,.12);position:relative}
.zs-cnt .zs-sp i{position:absolute;left:0;top:0;bottom:0;background:var(--zs-o);width:50%;transition:width .5s}
.zs-cnt button{background:none;border:0;color:var(--zs-o);font-size:17px;cursor:pointer}
.zs-chip{left:1343px;width:182px;height:40px;border-radius:10px;display:flex;align-items:center;gap:12px;padding:0 14px;font-size:14px;animation:zs-chip 6s ease-in-out infinite}
.zs-chip u{text-decoration:none;color:var(--zs-o);font-size:16px;width:18px;text-align:center}
@keyframes zs-chip{50%{transform:translateX(-8px);box-shadow:0 0 34px rgba(255,100,0,.7),inset 0 0 20px rgba(255,110,20,.25)}}
/* progress */
#zs-prog{left:575px;top:735px;width:372px;height:185px;transform:rotate(3deg) skewX(2deg);animation-delay:-3s;padding:20px 22px;border-radius:18px}
#zs-prog .zs-h4{font-weight:500;font-size:17px}
.zs-donut{position:absolute;left:30px;top:62px;width:108px;height:108px}
.zs-donut svg{transform:rotate(-90deg)}.zs-donut text{transform:rotate(90deg);transform-origin:54px 54px}
.zs-donut .zs-n{position:absolute;inset:0;display:grid;place-items:center;font-size:26px;font-weight:500}
.zs-cl{position:absolute;left:182px;top:62px;list-style:none;font-size:15px;display:grid;gap:9px}
.zs-cl li{display:flex;align-items:center;gap:10px;opacity:.5;transition:opacity .4s}
.zs-cl li i{width:15px;height:15px;border-radius:50%;border:1.6px solid #6c5a4e;display:grid;place-items:center;font-size:9px;color:#1a0d05;font-style:normal;transition:.4s}
.zs-cl li.on{opacity:1}.zs-cl li.on i{background:var(--zs-o);border-color:var(--zs-o);box-shadow:0 0 10px rgba(255,100,0,.8)}
/* extras */
#zs-cursor{left:1258px;top:690px;width:84px;height:84px;filter:drop-shadow(0 0 16px #ff6a00);animation:zs-cur 8s ease-in-out infinite}
@keyframes zs-cur{0%,100%{transform:translate(0,0) rotate(0)}30%{transform:translate(-60px,-60px) rotate(-8deg)}60%{transform:translate(-25px,40px) rotate(6deg)}}
.zs-gem{position:absolute;width:64px;height:64px;filter:drop-shadow(0 0 14px rgba(255,100,0,.7));animation:zs-gem 9s linear infinite}
.zs-gem i{position:absolute;inset:8px;border:2px solid #ff9a4a;border-radius:10px;background:linear-gradient(135deg,rgba(255,150,60,.45),rgba(120,40,0,.25));box-shadow:inset 0 0 14px rgba(255,120,30,.6);transform:rotate(45deg)}
.zs-gem i+i{transform:rotate(0);border-color:#ffc58f;opacity:.7}
@keyframes zs-gem{from{transform:rotate(0) translateY(0)}50%{transform:rotate(180deg) translateY(-18px)}to{transform:rotate(360deg) translateY(0)}}
.zs-orb{position:absolute;width:62px;height:62px;border-radius:50%;background:radial-gradient(circle at 32% 28%,rgba(255,220,180,.9),rgba(255,120,30,.35) 30%,rgba(60,15,0,.7) 70%);border:1.5px solid rgba(255,140,50,.7);box-shadow:0 0 26px rgba(255,90,0,.55),inset 0 0 18px rgba(255,120,30,.5);animation:zs-fl 6s ease-in-out infinite}
.zs-spark{position:absolute;width:3px;height:3px;border-radius:50%;background:#ff9a4a;box-shadow:0 0 8px #ff7a18;animation:zs-tw 4s ease-in-out infinite}
@keyframes zs-tw{0%,100%{opacity:0;transform:translateY(0)}50%{opacity:1;transform:translateY(-30px)}}
@media (prefers-reduced-motion:reduce){.zs-scene *{animation:none!important;transition:none!important}}