:root{--orange:#008b73;--ink:#102724;--muted:#839c96;--paper:#f7faf9;--line:#dce7e3;--cyan:#20cce0}.brand-mark{width:26px;height:27px;position:relative;display:inline-block;margin-left:3px}.brand-mark i{position:absolute;width:9px;height:24px;border-radius:2px;transform:skew(-23deg);background:#008b73;left:4px;top:1px}.brand-mark i+i{left:16px;height:15px;top:10px;background:#18c9d1}.small-star{width:20px;height:13px;background:linear-gradient(110deg,#008b73 48%,transparent 49%,transparent 61%,#22c9d0 62%);transform:skew(-20deg)}.hero{padding-top:24px}h1{font-size:clamp(60px,6.6vw,94px);margin-top:20px;letter-spacing:-5px}.hero-bottom{margin:27px 0 34px}.version{color:#007961}.version svg{stroke:#17b9bd}.primary{background:linear-gradient(115deg,#008c69,#007c80);box-shadow:0 10px 28px #007b6926}.primary:hover{background:linear-gradient(115deg,#006d51,#006a76)}
.stage{background:#052d2c;color:#ecfffa;border:1px solid #064c48;border-radius:18px;box-shadow:0 35px 70px -45px #00665688;isolation:isolate}.stage::before{content:'';position:absolute;width:80%;height:120%;background:radial-gradient(ellipse,#0da28f36,transparent 66%);top:-10%;left:10%;pointer-events:none}.stage-heading,.stage-footer{position:relative;z-index:5;color:#8fbdb2}.stage-heading{padding:20px 27px}.motion-toggle{background:#ffffff0d;color:#d5f4ed;border:1px solid #83b6a244;border-radius:20px;padding:7px 12px;font-size:12px}.builder-tabs button{color:#9cbbb4}.builder-tabs button[aria-selected=true]{background:#d5fff1;color:#063e31}.builder-tabs button:hover{background:#ffffff12}.builder-tabs button[aria-selected=true]:hover{background:#b0f8df}#flow-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}.diagram{height:440px;background:none;perspective:1200px}.product-window{width:480px;top:60px;box-shadow:0 35px 70px #001b2699;transform:translateX(-50%) rotateX(6deg) rotateY(-9deg) rotateZ(-3deg);color:#12392f;border:1px solid #b2f8e28c}.window-bar{background:#e5f2ed;border-radius:10px 10px 0 0;color:#5e8377}.window-dots i{background:#77a99a}.window-content{background:linear-gradient(120deg,#fff,#f0fff8);border-radius:0 0 10px 10px}.demo-content h2 em{color:#008964}.mini-button{background:#008b73}.orbit i{border-color:#00a892}.stage:hover .product-window{transform:translateX(-50%) rotateX(6deg) rotateY(-9deg) rotateZ(-3deg)}.float-card{background:#f2fff9;color:#163e32;border-color:#bafcde99;box-shadow:0 17px 35px #001f2755}.idea{top:69px;left:5%}.result{left:7%;bottom:40px}.mini-phone{background:linear-gradient(155deg,#00ad7c,#00656d);right:12%;top:169px;box-shadow:0 30px 50px #001a28aa;border-color:#ceffeb}.phone-sphere{display:flex;align-items:flex-end;gap:5px;height:48px;animation:none}.phone-sphere i{width:11px;height:26px;background:#b4ffdf;border-radius:3px;animation:bars 2s ease-in-out infinite alternate}.phone-sphere i:nth-child(2){height:38px;animation-delay:-.5s;background:#46e4d9}.phone-sphere i:nth-child(3){height:48px;animation-delay:-1s;background:#7affdf}.ghost-panel{position:absolute;border:1px solid #38b59b66;border-radius:10px;width:455px;height:265px;left:50%;top:55px;background:linear-gradient(140deg,#0ca78214,#42cfeb0a);transform:translate(-50%,0) rotate(-9deg);z-index:0}.ghost-two{transform:translate(-50%,0) rotate(4deg);border-color:#5ddce04d}.floating-label{position:absolute;border:1px solid #63b8a459;border-radius:7px;color:#b5e7d8;padding:10px 15px;font-size:12px;background:#073d36aa;backdrop-filter:blur(8px);z-index:1}.label-design{left:15%;top:230px;transform:rotate(-7deg)}.label-data{right:5%;top:76px;transform:rotate(6deg)}.floating-label b{margin-left:22px;color:#3fecd2}.assembly-label{position:absolute;left:28px;top:22px;color:#68ad9d;font-size:11px;letter-spacing:1px}.live-event{position:absolute;z-index:5;left:50%;bottom:10px;transform:translateX(-20%);background:#d9fff0;color:#145d49;box-shadow:0 15px 35px #001a2733;border:1px solid #c3ffe7;display:flex;gap:12px;align-items:center;padding:12px 17px;border-radius:9px;font-size:12px;white-space:nowrap}.event-icon{background:#008969;color:white;width:24px;height:24px;display:grid;place-items:center;border-radius:50%}.event-time{color:#6e9d8e;font-size:10px;margin-left:14px}.scene-progress{display:flex;align-items:center;gap:14px;font-size:11px}.scene-progress>div{width:150px;height:2px;background:#719d9344}.scene-progress i{height:2px;width:0;display:block;background:linear-gradient(90deg,#3ee7aa,#4cd5f5)}.stage-footer{padding:20px 27px}.ai-symbol{animation:none;display:flex;gap:5px;align-items:center;width:auto}.ai-symbol i{width:7px;height:25px;border-radius:4px;background:#008b73;animation:bars 1.6s ease-in-out infinite alternate}.ai-symbol i:nth-child(2){height:43px;animation-delay:-.7s}.ai-symbol i:nth-child(3){height:60px;background:#1dbed0;animation-delay:-1.1s}.ai-symbol i:nth-child(4){height:36px;animation-delay:-.3s}.ai-symbol i:nth-child(5){height:20px;animation-delay:-.9s}.service .blocks i{animation:block-stack 4s ease-in-out infinite}.service .blocks i:nth-child(2){animation-delay:-1.3s}.service .blocks i:nth-child(3){animation-delay:-2.6s}.replacement-card{background:linear-gradient(125deg,#082e29,#053c3d)}.new-system{background:linear-gradient(120deg,#00936d,#078d99);box-shadow:0 15px 60px #03dbb522}.replacement h2>span{color:#63bca8}.migration-arrow{color:#39c6ae;animation:transfer 2.4s ease-in-out infinite}.new-bottom{position:relative;overflow:hidden}.new-bottom::after{content:'';position:absolute;height:2px;top:0;left:-30%;width:30%;background:#9effe5;animation:transfer-line 2.5s linear infinite}.footer-word{font-size:clamp(65px,12vw,173px);letter-spacing:-.065em;color:#e0ede8}.manifesto h2>span{background:linear-gradient(100deg,#007a5c,#07aabd);-webkit-background-clip:text;background-clip:text;color:transparent}
.stage.assembling .product-window{animation:build-window 12s cubic-bezier(.2,.7,.2,1) both}.stage.assembling .ghost-one{animation:build-ghost 12s ease both}.stage.assembling .ghost-two{animation:build-ghost 12s .14s ease both}.stage.assembling .idea{animation:build-idea 12s ease both}.stage.assembling .result{animation:build-result 12s ease both}.stage.assembling .mini-phone{animation:build-phone 12s ease both}.stage.assembling .mini-brand{animation:build-content 12s .3s ease both}.stage.assembling .demo-kicker{display:block;animation:build-content 12s .45s ease both}.stage.assembling .demo-content h2{animation:build-content 12s .65s ease both}.stage.assembling .mini-bottom,.stage.assembling .mini-rows,.stage.assembling .chat-bubble{animation:build-content 12s .8s ease both}.stage.assembling .live-event{animation:event-arrive 12s ease both}.stage.assembling .floating-label{animation:build-label 12s ease both}.stage.paused *,.stage.paused *::before,.stage.paused *::after{animation-play-state:paused!important}.stage.reduced .product-window{transform:translateX(-50%) rotate(-3deg)}
@keyframes build-window{0%{opacity:0;transform:translate(-50%,65px) rotateX(35deg) rotateY(-25deg) rotateZ(-12deg) scale(.65)}12%,85%{opacity:1;transform:translateX(-50%) rotateX(6deg) rotateY(-9deg) rotateZ(-3deg)}92%{opacity:1;transform:translate(-50%,-6px) rotateX(0) rotateY(0) rotateZ(0)}100%{opacity:0;transform:translate(-50%,-35px) rotateX(-15deg) rotateZ(3deg) scale(.94)}}
@keyframes build-ghost{0%{opacity:0;translate:0 80px;scale:.75}8%,84%{opacity:1;translate:0 0;scale:1}100%{opacity:0;translate:0 -45px}}
@keyframes build-idea{0%{opacity:0;transform:translate(-45px,0)}7%,81%{opacity:1;transform:translate(0,0)}88%{opacity:1;transform:translateY(-5px)}100%{opacity:0;transform:translate(60px,-20px)}}
@keyframes build-result{0%,35%{opacity:0;transform:translate(-30px,25px)}45%,86%{opacity:1;transform:translate(0,0)}100%{opacity:0;transform:translateY(-25px)}}
@keyframes build-phone{0%,19%{opacity:0;transform:translate(70px,45px) rotate(22deg) scale(.75)}32%,87%{opacity:1;transform:rotate(8deg)}100%{opacity:0;transform:translate(45px,-40px) rotate(-8deg) scale(.9)}}
@keyframes build-content{0%,6%{opacity:0;transform:translateY(18px);filter:blur(4px)}18%,88%{opacity:1;transform:translateY(0);filter:blur(0)}100%{opacity:0;transform:translateY(-8px)}}
@keyframes event-arrive{0%,49%{opacity:0;translate:0 30px;scale:.9}55%,80%{opacity:1;translate:0 0;scale:1}92%,100%{opacity:0;translate:0 -18px;scale:.98}}
@keyframes build-label{0%,14%{opacity:0;translate:0 20px}25%,86%{opacity:1;translate:0 0}100%{opacity:0;translate:0 -20px}}
@keyframes bars{to{transform:scaleY(.45)}}@keyframes block-stack{0%,100%{translate:0 0}40%{translate:0 -12px;rotate:8deg}70%{translate:0 0;rotate:0deg}}@keyframes transfer{0%,100%{opacity:.3;transform:translateY(-5px)}55%{opacity:1;transform:translateY(5px)}}@keyframes transfer-line{to{left:110%}}
@media(max-width:1100px){.idea{left:3%;top:65px}.mini-phone{right:5%}.label-design{left:4%;top:230px}.result{left:4%}h1{letter-spacing:-3.5px}.hero{padding-top:30px}}@media(max-width:700px){.hero{padding-top:22px}h1{font-size:clamp(42px,9.8vw,67px);letter-spacing:-2.5px}.hero-bottom{margin:25px 0 30px}.hero-bottom p{font-size:14px}.stage-heading{padding:16px 13px;font-size:9px}.motion-toggle{font-size:10px;padding:6px 10px}.diagram{height:368px}.product-window{width:265px;left:46%;top:93px}.idea{left:13px;top:27px}.result{left:13px;bottom:14px}.mini-phone{right:12px;top:181px}.assembly-label{font-size:8px;left:15px;top:9px}.ghost-panel{width:260px;height:205px;top:99px;left:46%}.floating-label{font-size:8px;padding:7px 10px}.label-design{left:9%;top:76px}.label-data{top:38px;right:18px}.floating-label b{margin-left:10px}.live-event{left:auto;right:13px;bottom:60px;transform:none;font-size:9px;gap:6px;padding:9px}.event-icon{width:18px;height:18px;font-size:10px}.event-time{display:none}.stage-footer{padding:18px 13px;gap:9px;font-size:9px}.stage-footer>span:last-child{display:block;max-width:140px;text-align:right;font-size:9px}.scene-progress{gap:9px;font-size:9px}.scene-progress>div{width:65px}.phone-sphere{height:35px;gap:3px}.phone-sphere i{width:7px;height:20px}.phone-sphere i:nth-child(2){height:27px}.phone-sphere i:nth-child(3){height:34px}.footer-word{font-size:12.5vw}.ai-symbol{gap:4px}.ai-symbol i{width:6px}.hero-bottom .button{font-size:13px}.eyebrow{line-height:1.6}.stage .demo-content .compact-title{font-size:22px}}
@media(prefers-reduced-motion:reduce){.stage *{animation:none!important}.scene-progress i{width:100%!important}}