.signature-showcase{padding-bottom:0}.signature-stage{height:545px;position:relative;overflow:hidden;background:#0c0c0e;border:1px solid #252527;border-radius:15px;color:#fff;isolation:isolate;container-type:inline-size}.signature-grid{position:absolute;inset:0;z-index:1;background-image:linear-gradient(#ffffff05 1px,transparent 1px),linear-gradient(90deg,#ffffff05 1px,transparent 1px);background-size:36px 36px;mask-image:radial-gradient(ellipse,#000,transparent 75%)}.signature-light{position:absolute;width:90%;height:80%;left:5%;top:0;z-index:1;background:radial-gradient(ellipse,#ff5e0024,transparent 65%);animation:light-breathe 9s ease-in-out infinite}.signature-coordinates{position:absolute;left:24px;right:24px;top:24px;display:flex;justify-content:space-between;font-size:6px;letter-spacing:1.3px;color:#777;z-index:20}.signal-dot:before{content:'';display:inline-block;width:4px;height:4px;background:#ff650a;border-radius:50%;margin-right:6px;box-shadow:0 0 8px #ff650a}.signature-paths{position:absolute;inset:0;width:100%;height:100%;fill:none;z-index:2;pointer-events:none}.signature-paths .base-lines{stroke:#ffffff12;stroke-width:1;stroke-linecap:round;stroke-linejoin:round}.signature-paths .signal-path{stroke:#ff650a;stroke-width:1.5;stroke-opacity:.65;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:20 400;animation:signal-flow 8s linear infinite;inset:0;z-index:10;transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .7s ease;transform-style:preserve-3d}.signature-core{position:absolute;left:50%;top:42%;width:116px;height:134px;transform:translate(-50%,-50%);z-index:10;border:1px solid #ffffff25;border-radius:28px;background:linear-gradient(145deg,#353537cc,#101012ee 65%);box-shadow:0 20px 45px #0009,inset 0 1px 0 #ffffff36,0 0 70px #ff650a12;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;overflow:hidden;animation:core-float 6s ease-in-out infinite}.signature-core img{width:45px;height:68px;object-fit:contain;filter:drop-shadow(0 3px 12px #ff650a35)}.signature-core>span{font-size:7px;letter-spacing:2.7px;color:#ddd}.core-shine{position:absolute;inset:-100%;background:linear-gradient(110deg,transparent 40%,#ffffff12 49%,transparent 58%);animation:core-shine 8s ease-in-out infinite}.motion-tile{position:absolute;z-index:2;transform:translateZ(20px);border:1px solid #ffffff19;border-radius:10px;box-shadow:0 16px 30px #0005;overflow:hidden;transition:transform 1.4s cubic-bezier(.22,1,.36,1),opacity 1.4s,filter 1.4s;will-change:transform;background:#19191c}.tile-meta{font-size:5.5px;letter-spacing:.75px;display:flex;justify-content:space-between;align-items:center}.tile-brand{width:30%;height:164px;left:5%;top:14%;padding:16px;background:#ff650a;color:#151515;transform:rotate(-9deg)}.brand-type{font-size:clamp(22px,5.5cqw,38px);font-weight:600;line-height:.95;letter-spacing:-1.5px;margin-top:19px}.brand-type>span{color:#fff}.brand-chips{display:flex;gap:5px;margin-top:15px}.brand-chips i{width:17px;height:5px;background:#111}.brand-chips i:nth-child(2){background:#fff}.brand-chips i:nth-child(3){background:#ffab6c}.brand-chips i:nth-child(4){background:#a33300}.tile-app{width:34%;height:192px;right:3%;top:13%;transform:rotate(8deg);padding-top:12px;background:#eee}.tile-app>.tile-meta{padding:0 12px;color:#555;font-size:5px}.app-film{height:169px;width:100%;overflow:hidden}.app-film img{width:160%;height:100%;object-fit:cover;max-width:none;transform:translateX(-18%)}.tile-web{width:38%;height:154px;left:5%;top:53%;transform:rotate(-5deg);background:#fafafa;color:#111}.browser-dots{height:22px;display:flex;align-items:center;gap:3px;padding:0 10px;border-bottom:1px solid #ddd}.browser-dots i{width:3px;height:3px;border-radius:50%;background:#aaa}.browser-dots span{font-size:4px;color:#888;margin-left:7px}.web-demo{padding:13px 15px}.web-demo>span{font-size:4px;letter-spacing:.8px;color:#888}.web-demo strong{display:block;font-size:23px;line-height:1;letter-spacing:-1px;font-weight:500;margin-top:9px}.web-demo-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:9px}.web-demo-bottom i{font-style:normal;font-size:5px;border-radius:20px;background:#111;color:#fff;padding:5px 8px}.web-demo-bottom b{font-size:38px;line-height:.5;color:#ff650a;font-weight:400}.tile-ai{width:36%;height:107px;right:3%;top:57%;padding:13px;transform:rotate(6deg);background:linear-gradient(120deg,#29292e,#141417)}.tile-ai .tile-meta{font-size:4.5px;color:#aaa;justify-content:flex-start;gap:5px}.ai-spark{color:#ff650a;font-size:15px}.ai-line{font-size:8px;border-bottom:1px solid #ffffff12;padding:10px 0;color:#ddd}.ai-answer{display:flex;gap:3px;align-items:center;margin-top:10px}.ai-answer i{width:3px;height:3px;border-radius:50%;background:#ff650a;animation:ai-pulse 1.5s infinite}.ai-answer i:nth-child(2){animation-delay:.2s}.ai-answer i:nth-child(3){animation-delay:.4s}.ai-answer span{font-size:4.5px;color:#888;margin-left:4px}.motion-tag{position:absolute;z-index:3;transform:translateZ(25px);background:#1c1c20;border:1px solid #ffffff14;color:#bbb;box-shadow:0 8px 16px #0003;border-radius:6px;padding:10px;font-size:6px;display:flex;align-items:center;gap:12px;transition:transform 1.4s,opacity 1.4s;z-index:2}.tag-commerce{left:7%;top:47%;transform:rotate(-5deg)}.tag-commerce>span{color:#ff650a}.tag-growth{right:4%;top:47%;transform:rotate(3deg)}.tag-saas{left:41%;top:76%;font-size:5px;color:#999}.growth-bars{display:flex;align-items:flex-end;gap:2px;height:13px}.growth-bars i{background:#ff650a;width:3px;height:5px}.growth-bars i:nth-child(2){height:8px}.growth-bars i:nth-child(3){height:10px}.growth-bars i:nth-child(4){height:13px}.signature-caption{position:absolute;bottom:37px;left:0;right:0;text-align:center;pointer-events:none}.chapter-kicker{display:block;font-size:5px;letter-spacing:1.7px;color:#8d8d92;margin-bottom:9px}.signature-caption strong{display:block;font-size:27px;font-weight:500;letter-spacing:-1px}.signature-subline{display:block;color:#8d8d92;font-size:7px;margin-top:8px}.signature-corner{position:absolute;bottom:13px;width:100%;text-align:center;font-size:4px;letter-spacing:1.5px;color:#555}.signature-controls{display:flex;align-items:center;border-bottom:1px solid #ddd;padding:0 0 0;gap:15px}.signature-chapters{display:flex;flex:1;gap:25px}.signature-chapters button{position:relative;background:none;border:0;color:#999;padding:19px 0;font-size:11px;min-width:65px;text-align:left}.signature-chapters button>span{font-size:8px;margin-right:7px;color:#999}.signature-chapters button[aria-pressed=true]{color:#111}.signature-chapters button i{position:absolute;bottom:-1px;height:2px;left:0;width:100%;transform:scaleX(0);transform-origin:left;background:#ff650a}.signature-chapters button[aria-pressed=true] i{transform:scaleX(var(--progress,0))}.signature-note{font-size:9px;color:#999;margin:12px 0 0}/* Chapter 0: Design */.signature-stage[data-chapter="0"] .tile-brand{transform:translate(0,0) rotate(-9deg) scale(1.05);z-index:5;opacity:1;filter:none;box-shadow:0 24px 45px rgba(0,0,0,0.5)}.signature-stage[data-chapter="0"] .tile-app{opacity:0.35;filter:saturate(0.6) brightness(0.9);transform:translate(4%,-2%) rotate(9deg) scale(0.9)}.signature-stage[data-chapter="0"] .tile-web{opacity:0.35;filter:saturate(0.6) brightness(0.9);transform:translate(-3%,3%) rotate(-6deg) scale(0.9)}.signature-stage[data-chapter="0"] .tile-ai{opacity:0.3;filter:saturate(0.5);transform:translate(3%,6%) rotate(7deg) scale(0.85)}.signature-stage[data-chapter="0"] .tag-saas{opacity:0.4}.signature-stage[data-chapter="0"] .tag-commerce{opacity:0.4}.signature-stage[data-chapter="0"] .tag-growth{opacity:0.3}/* Chapter 1: Build (Brand fades, Web & Mobile pop) */.signature-stage[data-chapter="1"] .signature-core{z-index:10}.signature-stage[data-chapter="1"] .tile-brand{transform:translate(-10%,4%) rotate(-16deg) scale(0.85);opacity:0.35;filter:saturate(0.5) brightness(0.85);box-shadow:0 10px 20px rgba(0,0,0,0.3)}.signature-stage[data-chapter="1"] .tile-web{transform:translate(5%,-12%) rotate(-3deg) scale(1.12);z-index:5;opacity:1;filter:none;box-shadow:0 24px 45px rgba(0,0,0,0.5)}.signature-stage[data-chapter="1"] .tile-app{transform:translate(-5%,3%) rotate(3deg) scale(1.08);z-index:5;opacity:1;filter:none;box-shadow:0 24px 45px rgba(0,0,0,0.5)}.signature-stage[data-chapter="1"] .tile-ai{transform:translate(3%,9%) rotate(9deg) scale(0.82);opacity:0.35;filter:saturate(0.5)}.signature-stage[data-chapter="1"] .tag-saas{transform:translate(0,-6px) scale(1.05);opacity:0.95;color:#fff}.signature-stage[data-chapter="1"] .tag-commerce{opacity:0.45}.signature-stage[data-chapter="1"] .tag-growth{opacity:0.35}/* Chapter 2: Grow (AI & Growth pop, Brand & Build fade) */.signature-stage[data-chapter="2"] .tile-brand{transform:translate(-8%,3%) rotate(-12deg) scale(0.82);opacity:0.32;filter:saturate(0.5) brightness(0.85)}.signature-stage[data-chapter="2"] .tile-app{transform:translate(10%,-4%) rotate(12deg) scale(0.82);opacity:0.35;filter:saturate(0.5)}.signature-stage[data-chapter="2"] .tile-web{transform:translate(-5%,3%) rotate(-9deg) scale(0.85);opacity:0.35;filter:saturate(0.5)}.signature-stage[data-chapter="2"] .tile-ai{transform:translate(-5%,-5%) rotate(0deg) scale(1.13);z-index:5;opacity:1;filter:none;box-shadow:0 24px 45px rgba(0,0,0,0.5)}.signature-stage[data-chapter="2"] .tag-growth{transform:translate(-5%,-40%) rotate(0deg) scale(1.18);z-index:4;opacity:1;color:#fff}.signature-stage[data-chapter="2"] .tag-commerce{transform:rotate(-2deg) scale(1.12);z-index:4;opacity:1;color:#fff}.signature-stage[data-chapter="2"] .tag-saas{opacity:0.4}..signature-offscreen *{animation-play-state:paused!important}@keyframes signal-flow{to{stroke-dashoffset:-744}}@keyframes light-breathe{50%{opacity:.5;transform:translate(8%,8%) scale(1.15)}}@keyframes core-float{50%{transform:translate(-50%,calc(-50% - 8px))}}@keyframes core-shine{0%,35%{transform:translateX(-40%)}80%,100%{transform:translateX(40%)}}@keyframes ai-pulse{50%{opacity:.2}}@media(min-width:1500px){.signature-stage{height:590px}.tile-brand{height:185px}.tile-app{height:216px}.app-film{height:190px}.tile-web{height:168px}.web-demo strong{font-size:28px}.signature-caption strong{font-size:31px}}@media(max-width:1050px) and (min-width:701px){.signature-stage{height:490px}.signature-core{width:90px;height:112px}.signature-core img{width:37px;height:55px}.tile-brand{padding:12px;height:144px}.tile-app{height:170px}.app-film{height:145px}.tile-web{height:140px}.web-demo strong{font-size:19px}.tile-ai{padding:10px}.motion-tag{font-size:5px;padding:8px}.signature-chapters{gap:15px}}@media(max-width:700px){.signature-stage{height:475px}.signature-coordinates{left:17px;right:17px;font-size:5px}.signature-core{width:86px;height:106px;border-radius:21px}.signature-core img{width:34px;height:53px}.signature-core>span{font-size:5px}.tile-brand{height:145px;padding:12px}.tile-meta{font-size:4px}.brand-type{font-size:26px}.brand-chips{gap:3px}.brand-chips i{width:13px}.tile-app{height:174px}.tile-app>.tile-meta{font-size:3.5px;padding:0 8px}.app-film{height:149px}.tile-web{height:137px}.web-demo{padding:10px}.web-demo strong{font-size:20px}.browser-dots span{font-size:3px}.tile-ai{padding:9px;height:97px}.tile-ai .tile-meta{font-size:3.5px}.ai-line{font-size:6px}.ai-answer span{font-size:3.5px}.motion-tag{font-size:4.5px;padding:8px;gap:6px}.tag-saas{font-size:4px;top:76%}.signature-caption strong{font-size:25px}.signature-subline{font-size:6px}.signature-chapters{gap:20px}.signature-chapters button{font-size:10px}.signature-caption{bottom:36px}}@media(prefers-reduced-motion:reduce){.signature-stage *{animation:none!important;transition:none!important}.signature-world{transform:none!important}}
@media(max-width:700px){.tile-web{top:51%;height:130px}.tag-saas{display:none}.signature-caption{bottom:30px}.web-demo strong{font-size:18px}}
