/* product showcase */
#showcase{display:grid;grid-template-columns:320px 1fr;gap:22px;align-items:stretch}
.sc-tabs{display:flex;flex-direction:column;gap:10px}
.sc-tab{position:relative;text-align:start;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px 18px 18px;cursor:pointer;font:inherit;color:var(--ink);transition:transform .25s,box-shadow .25s,border-color .25s;overflow:hidden}
.sc-tab:hover{transform:translateX(-3px)}html[dir=ltr] .sc-tab:hover{transform:translateX(3px)}
.sc-tab.on{border-color:var(--ink);box-shadow:var(--shadow)}
.sc-tab b{display:block;font:800 1.15rem var(--head);margin:6px 0 2px}
.sc-tab small{color:var(--muted);font-size:.92rem}
.sc-tag{display:inline-flex;align-items:center;gap:6px;font:600 .74rem var(--head);color:var(--muted)}
.sc-tag::before{content:"";width:7px;height:7px;border-radius:50%;background:#E0A23A}
.sc-tag.live::before{background:#1FA855;box-shadow:0 0 0 3px #D3F2DF}
.sc-bar{position:absolute;inset-inline:0;bottom:0;height:3px;background:transparent}
.sc-bar i{display:block;height:100%;width:0;background:var(--teal)}
.sc-tab.on .sc-bar{background:var(--line)}
@keyframes scfill{to{width:100%}}
.sc-stage{background:#1F1A14;border-radius:20px;padding:10px;box-shadow:0 30px 70px rgba(60,40,15,.25);display:flex;flex-direction:column;min-height:560px}
.sc-chrome{display:flex;align-items:center;gap:6px;padding:4px 8px 10px}
.sc-chrome i{width:10px;height:10px;border-radius:50%;background:#4a3f33}
.sc-url{margin-inline-start:10px;font:500 .78rem 'Prompt',sans-serif;color:#B8A88F;background:#2A231B;border-radius:8px;padding:3px 12px;direction:ltr}
.sc-demo{margin-inline-start:auto;font:600 .72rem var(--head);color:#8C7A64}
.sc-views{position:relative;flex:1;border-radius:14px;overflow:hidden;background:#FBF7F1}
.sc-view{position:absolute;inset:0;opacity:0;transform:translateY(14px) scale(.985);transition:opacity .6s ease,transform .7s cubic-bezier(.2,.8,.2,1);pointer-events:none;overflow:hidden}
.sc-view.on{opacity:1;transform:none;pointer-events:auto}
.sc-view.on [style*="--d"]{animation:scin .6s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--d) * 90ms + 200ms)}
@keyframes scin{from{opacity:0;transform:translateY(10px)}}
.sv{height:100%;padding:18px;font:400 13px/1.45 'Rubik','Assistant',sans-serif;color:#1F1A14;text-align:start}
.sv-cn{padding:0}.sv-cn .cn-app{border:0;border-radius:0;height:100%;width:960px;transform:scale(.86);transform-origin:top right}
html[dir=ltr] .sv-cn .cn-app{transform-origin:top left}
/* CreatorFlow */
.sv-cf{background:#0B0B0B;color:#fff;display:flex;flex-direction:column;gap:14px}
.cf-top{display:flex;justify-content:space-between;align-items:center}
.cf-top b{font:800 1.2rem 'Prompt',sans-serif}.cf-top b span{color:#39FF14}
.cf-top em{font-style:normal;font-size:12px;color:#39FF14;background:rgba(57,255,20,.1);border:1px solid rgba(57,255,20,.3);border-radius:999px;padding:3px 10px}
.cf-k{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.cf-k div{background:#161616;border:1px solid #262626;border-radius:12px;padding:10px 12px}
.cf-k small{display:block;color:#8A8A8A;font-size:11.5px}.cf-k b{font:700 1.3rem 'Prompt',sans-serif}
.cf-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;flex:1}
.cf-post{display:flex;flex-direction:column;gap:6px}
.cf-thumb{flex:1;min-height:150px;border-radius:12px;background:linear-gradient(160deg,var(--c),#0B0B0B 140%);display:grid;place-items:center;position:relative;overflow:hidden}
.cf-thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.18) 50%,transparent 70%);transform:translateX(-100%);animation:shine 3.2s ease-in-out infinite}
@keyframes shine{60%,100%{transform:translateX(100%)}}
.cf-thumb svg{width:34px;height:34px;fill:#0B0B0B;background:rgba(255,255,255,.75);border-radius:50%;padding:8px}
.cf-post span{font-size:11.5px;font-weight:600}.cf-post .ok{color:#39FF14}.cf-post .rv{color:#FFC56B}.cf-post .pd{color:#8A8A8A}
/* BuildFlow */
.sv-bf{display:flex;flex-direction:column;gap:16px;background:linear-gradient(160deg,#F3F7FF,#FBF7F1)}
.bf-head{display:flex;justify-content:space-between;align-items:center}
.bf-head b{display:block;font:700 1.15rem 'Rubik',sans-serif}.bf-head small{color:#7A6B58}
.bf-pct{font:800 1.6rem 'Prompt',sans-serif;color:#0E8F72}
.bf-stages{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.bf-stages div{display:flex;flex-direction:column;gap:6px;font-size:12px;color:#7A6B58}
.bf-stages i{height:8px;border-radius:5px;background:#E6DCCB}
.bf-stages .d i{background:#12C9A0}.bf-stages .c i{background:linear-gradient(90deg,#6D5BFF 55%,#E6DCCB 55%)}
.bf-stages .c{color:#1F1A14;font-weight:600}
.bf-row{display:grid;grid-template-columns:1.2fr 1fr;gap:14px;flex:1}
.bf-co,.bf-pay{background:#fff;border:1px solid #ECE2D3;border-radius:14px;padding:16px}
.bf-co small,.bf-pay small{color:#7A6B58;font-size:12px}
.bf-co b{display:block;font:600 1.05rem 'Rubik',sans-serif;margin:4px 0}
.bf-amt{font:800 1.8rem 'Prompt',sans-serif;margin:6px 0 14px}
.bf-act{display:flex;gap:8px}.bf-act span{flex:1;text-align:center;padding:10px;border-radius:10px;border:1px solid #ECE2D3;font-weight:600}
.bf-act .ap{background:#1F1A14;color:#fff;border-color:#1F1A14;animation:pulse 2s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 6px rgba(18,201,160,.25)}}
.bf-pay div{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid #F3ECE1}
.bf-pay div.paid b::after{content:" ✓";color:#0E8F72}
/* Maintenance */
.sv-mt{display:flex;flex-direction:column;gap:8px}
.mt-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.mt-top b{font:700 1.1rem 'Rubik',sans-serif}.mt-top span{font:700 .9rem 'Prompt',sans-serif;background:#E1F5EE;color:#0E8F72;border-radius:999px;padding:3px 12px}
.mt-r{display:grid;grid-template-columns:1.8fr 1fr 1fr 90px;gap:10px;align-items:center;background:#fff;border:1px solid #ECE2D3;border-radius:12px;padding:12px 14px}
.mt-r b{font-weight:600}.mt-r span{color:#7A6B58}
.mt-r em{font-style:normal;font-size:11.5px;font-weight:700;text-align:center;border-radius:999px;padding:3px 0}
.mt-r .ok{background:#E1F5EE;color:#0E8F72}.mt-r .risk{background:#FFF2D9;color:#9A6414}.mt-r .late{background:#FFE9E3;color:#C23A20;animation:pulse 1.8s infinite}
.mt-tech{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:auto}
.mt-tech div{display:flex;align-items:center;gap:10px;background:#1F1A14;color:#FAF1E4;border-radius:12px;padding:12px}
.mt-tech i{width:30px;height:30px;border-radius:50%;background:#12C9A0;color:#1F1A14;display:grid;place-items:center;font-style:normal;font-weight:700}
.mt-tech em{margin-inline-start:auto;font-style:normal;font-size:12px;color:#3EE6BC}
@media (max-width:960px){#showcase{grid-template-columns:1fr}.sc-tabs{flex-direction:row;overflow-x:auto;padding-bottom:4px}.sc-tab{min-width:220px}.sc-stage{min-height:480px}}
@media (max-width:640px){.sc-stage{min-height:430px}.cf-k,.cf-grid{grid-template-columns:1fr 1fr}.cf-thumb{min-height:90px}.bf-row{grid-template-columns:1fr}.mt-r{grid-template-columns:1.6fr 80px}.mt-r span{display:none}.sv-cn .cn-app{transform:scale(.5)}}

/* capabilities marquee */
.mq{overflow:hidden;border-block:1px solid var(--line);padding:16px 0;background:var(--card);direction:ltr}
.mq-t{display:flex;gap:46px;width:max-content;animation:mq 38s linear infinite;font:700 1.25rem var(--head);color:var(--ink)}
.mq-t span{display:flex;align-items:center;gap:46px;white-space:nowrap}
.mq-t span::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--teal)}
.mq-t span:nth-child(3n)::after{background:var(--violet)}.mq-t span:nth-child(3n+1)::after{background:var(--clay)}
@keyframes mq{to{transform:translateX(-50%)}}
.mq:hover .mq-t{animation-play-state:paused}

/* cross-page transitions (supported browsers) */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .28s ease both}
::view-transition-new(root){animation:vt-in .42s cubic-bezier(.2,.8,.2,1) both}
@keyframes vt-out{to{opacity:0;transform:translateY(-10px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(14px)}}
@media (prefers-reduced-motion:reduce){.mq-t,.cf-thumb::after,.bf-act .ap,.mt-r .late{animation:none}}