.showreel{position:absolute;right:2.5%;top:var(--s10);width:52%;height:calc(100% - 148px);max-height:720px;z-index:2;display:flex;flex-direction:column}
.reel-heading{display:flex;justify-content:space-between;align-items:center;padding-inline:var(--s4);font-size:var(--xs);letter-spacing:.07em;gap:var(--s4);color:var(--muted)}.demo-label{font-size:12px;letter-spacing:.02em;white-space:nowrap}
.demo-stage{position:relative;flex:1;min-height:350px;perspective:1400px;touch-action:pan-y;cursor:grab;outline-offset:-8px}
.demo-scene{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(var(--tilt-y,-3deg)) rotateY(var(--tilt-x,-7deg));transition:transform 1.1s var(--ease)}
.demo-screen{position:absolute;top:50%;left:50%;width:84%;margin:0;background:#f0f0e8;color:#252921;box-shadow:0 25px 70px #0005,0 1px 0 #fff6;border:1px solid #ffffff70;border-radius:5px;transform-style:preserve-3d;transition:transform 1s var(--ease),opacity .7s,filter .7s;overflow:hidden;user-select:none;will-change:transform}
.demo-screen[data-position="active"]{transform:translate(-45%,-47%) translateZ(50px) rotateY(-9deg) rotateZ(4deg);opacity:1;z-index:4}
.demo-screen[data-position="next"]{transform:translate(-9%,-52%) translateZ(-240px) rotateY(-20deg) rotateZ(10deg);opacity:.75;filter:brightness(.6);z-index:2}
.demo-screen[data-position="previous"]{transform:translate(-77%,-34%) translateZ(-220px) rotateY(-16deg) rotateZ(-8deg);opacity:.7;filter:brightness(.6);z-index:1}
.demo-screen[data-position="hidden"]{transform:translate(-45%,-45%) translateZ(-450px);opacity:0;z-index:0}
.demo-canvas{height:380px;position:relative;overflow:hidden;font-size:14px;line-height:1.4;background:#f2f2e9}.demo-toolbar{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);padding:var(--s4) var(--s5);border-bottom:1px solid #2223;font-size:12px}.demo-toolbar strong{font-size:12px;font-weight:700}.demo-toolbar>span{font-size:12px;color:#62695a}
.mock-web{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);padding:var(--s6) var(--s5);height:287px}.mock-web h3{font:400 36px/1 var(--font-serif);letter-spacing:-.02em;margin:var(--s4) 0}.mock-web p{font-size:12px;color:#535c4f}.mock-web>img{width:100%;height:234px;object-fit:cover;object-position:center}.mini-label{font-size:12px;letter-spacing:.07em;color:#5f6857}.mock-button{display:inline-flex;margin-top:var(--s4);background:#394a36;color:#fff;padding:var(--s2) var(--s3);font-size:12px}
.demo-bottom{position:absolute;bottom:0;left:0;right:0;min-height:40px;display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:var(--s3) var(--s5);background:#e4e8dc;font-size:12px;color:#384d35}
.wireframe{position:absolute;inset:49px 0 40px;background:#f1f0e8;padding:var(--s6);display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);transition:opacity 1.1s,clip-path 1.1s;clip-path:inset(0 0 0 0)}.wireframe>span{font-size:12px;grid-column:1/-1;align-self:center;color:#596051}.wireframe>div{border:1px dashed #8b9480;background:repeating-linear-gradient(135deg,transparent,transparent 7px,#00000003 7px,#00000003 8px)}.wireframe>div:last-child{grid-column:1/-1;height:36px}
.showreel:not([data-step="0"]) .demo-screen[data-position="active"] .wireframe{opacity:0;clip-path:inset(0 0 0 100%);pointer-events:none}
.device-preview{position:absolute;bottom:26px;right:var(--s5);width:116px;height:218px;background:#fffef4;border:5px solid #23291f;border-radius:16px;padding:var(--s3) var(--s2);box-shadow:0 10px 28px #0005;font-size:12px;z-index:2}.phone-speaker{display:block;width:25px;height:3px;border-radius:4px;background:#303a28;margin:0 auto var(--s2)}.device-preview strong{font:400 22px/1 var(--font-serif);display:block;margin-bottom:var(--s2)}.device-preview img{height:105px;width:100%;object-fit:cover}.device-preview>span:last-child{display:block;font-size:12px;margin-top:var(--s2)}
.ai-demo{background:#ecefe6}.ai-demo .demo-toolbar{justify-content:flex-start;background:#f9faf6}.assistant-mark{font-size:19px;color:#4a5f3e}.ai-demo .demo-toolbar>div:nth-child(2){display:flex;flex-direction:column;gap:var(--s1)}.ai-demo .demo-toolbar>div>span{font-size:12px;color:#636d5a}.ai-demo .demo-toolbar>i{width:6px;height:6px;border-radius:50%;background:#5f784a;margin-left:auto}
.conversation{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s3);padding:var(--s4) var(--s5)}.message{max-width:88%;padding:var(--s3);font-size:13px;line-height:1.4;border-radius:7px}.question{align-self:flex-end;background:#dce5cf;color:#31462c}.answer{background:#fff;color:#30362b;box-shadow:0 1px 3px #00000008}.message small{display:block;font-size:12px;color:#6b755f;margin-top:var(--s2)}.chat-chip{font-size:12px;background:#e5ebdc;display:inline-block;padding:var(--s2);margin-top:var(--s2)}.chat-input{position:absolute;bottom:var(--s3);left:var(--s5);right:var(--s5);border:1px solid #88927d50;background:#f9faf6;padding:var(--s3);display:flex;justify-content:space-between;font-size:12px;color:#777f6e}
.automation-demo{background:#edf0e7}.automation-demo .demo-toolbar{display:block}.automation-demo .demo-toolbar>strong{display:block;font-size:16px;margin-bottom:var(--s1)}.automation-demo .demo-toolbar>span{font-size:12px}
.workflow{padding:var(--s4) var(--s8)}.flow-node{display:flex;align-items:center;gap:var(--s3);padding:var(--s3);height:54px;background:#fff;border:1px solid #b5bdaa80;border-radius:5px}.flow-icon{font-size:12px;color:#6d7b5e}.flow-node>div{display:flex;flex-direction:column;gap:var(--s1)}.flow-node strong{font-size:13px}.flow-node>div>span{font-size:12px;color:#697360}.flow-node b{margin-left:auto;color:#4d703c;font-size:14px;font-weight:400}.flow-line{height:16px;width:1px;margin-left:23px;background:#869879}
.workspace-demo{background:#eff0e9}.workspace-demo .demo-toolbar{display:block}.workspace-demo .demo-toolbar>strong{display:block;font-size:16px;margin-bottom:var(--s1)}.mail-layout{display:grid;grid-template-columns:66px 1fr;height:calc(100% - 58px)}.mail-layout aside{padding:var(--s4) var(--s2);border-right:1px solid #2222;display:flex;flex-direction:column;gap:var(--s4);color:#68725e;font-size:12px}.mail-letter{padding:var(--s5);background:#fffef8}.mail-letter h3{font:400 30px/1.05 var(--font-serif);margin:var(--s3) 0}.mail-letter p{font-size:13px;color:#68705e}.attachment{display:flex;align-items:center;gap:var(--s3);padding:var(--s3);border:1px solid #4442;margin-top:var(--s4);font-size:12px}.attachment>div{flex:1}.attachment strong,.attachment small{display:block;font-size:12px}.attachment small{color:#65735b}.calendar-event{display:flex;align-items:center;gap:var(--s3);background:#e2ead8;padding:var(--s3);margin-top:var(--s3)}.calendar-day{text-align:center;font-size:20px;line-height:.8}.calendar-day small{font-size:12px}.calendar-event>div{display:flex;flex-direction:column;font-size:12px}.calendar-event b{margin-left:auto;font-size:14px}
.phase{opacity:0;transform:translateY(7px);transition:opacity .5s,transform .7s var(--ease)}
.showreel[data-step="1"] .demo-screen[data-position="active"] .phase-1,.showreel[data-step="2"] .demo-screen[data-position="active"] :is(.phase-1,.phase-2),.showreel[data-step="3"] .demo-screen[data-position="active"] .phase{opacity:1;transform:translateY(0)}
.reel-caption{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:var(--s2) var(--s4) var(--s4);position:relative;z-index:5}.reel-caption>div:first-child{display:flex;gap:var(--s4);align-items:center}.reel-number{font-size:var(--xs);color:var(--muted);font-variant-numeric:tabular-nums}.reel-title{font-size:var(--sm);font-weight:500}.reel-controls{display:flex;gap:var(--s1)}.reel-controls .icon-button{border:0}
.capability-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3);padding-inline:var(--s4)}.capability-tabs button{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s2);position:relative;min-height:66px;padding:var(--s3) 0;border:0;border-top:1px solid var(--line);background:none;font-size:var(--xs);color:var(--muted)}.capability-tabs button>span{font-size:12px}.capability-tabs button[aria-pressed=true]{color:var(--fg)}.capability-tabs button i{position:absolute;top:-1px;height:2px;left:0;width:100%;background:var(--fg);transform:scaleX(0);transform-origin:left}.capability-tabs button[aria-pressed=false] i{opacity:0}
.reel-description{font-size:var(--xs);color:var(--muted);padding:var(--s2) var(--s4) 0;min-height:36px}
@media(max-width:1150px){.showreel{right:1%;width:49%;top:var(--s16);height:630px}.reel-heading{justify-content:flex-end}.reel-heading>span:first-child{display:none}.demo-screen{width:94%}.demo-toolbar>span{display:none}.demo-canvas{height:365px}.reel-number{display:none}.reel-caption{padding-inline:var(--s2)}.capability-tabs{gap:var(--s2);padding-inline:var(--s2)}.reel-description{padding-inline:var(--s2)}.mock-web h3{font-size:30px}}
@media(max-width:850px){.showreel{position:relative;top:auto;right:auto;width:100%;height:650px;margin-top:var(--s12)}.reel-heading{justify-content:space-between;padding-inline:0}.reel-heading>span:first-child{display:block}.demo-screen{width:78%}.demo-screen[data-position="active"]{transform:translate(-50%,-46%) translateZ(45px) rotateY(-8deg) rotateZ(3deg)}.demo-screen[data-position="next"]{transform:translate(-8%,-42%) translateZ(-250px) rotateY(-15deg) rotateZ(9deg)}.demo-screen[data-position="previous"]{transform:translate(-95%,-33%) translateZ(-260px) rotateY(-12deg) rotateZ(-7deg)}.demo-canvas{height:380px}.reel-caption{padding-inline:0}.capability-tabs{padding-inline:0}.reel-description{padding-inline:0}.demo-toolbar>span{display:block}}
@media(max-width:520px){
  .showreel{height:600px;margin-top:var(--s10)}.reel-heading{font-size:12px;letter-spacing:.03em}.reel-heading>span:first-child{max-width:155px;line-height:1.4}.demo-label{font-size:12px;max-width:98px;white-space:normal;text-align:right}.demo-stage{min-height:350px}.demo-screen{width:96%}.demo-screen[data-position="active"]{transform:translate(-50%,-48%) translateZ(0) rotateY(-3deg) rotateZ(2deg)}.demo-screen[data-position="next"]{transform:translate(-20%,-46%) translateZ(-280px) rotateY(-15deg) rotateZ(8deg)}.demo-screen[data-position="previous"]{transform:translate(-82%,-37%) translateZ(-260px) rotateY(-12deg) rotateZ(-7deg)}
  .demo-canvas{height:356px}.demo-toolbar{padding:var(--s3);gap:var(--s2)}.demo-toolbar>span{display:none}.mock-web{padding:var(--s4) var(--s3);gap:var(--s3)}.mock-web h3{font-size:28px}.mock-web>img{height:215px}.mock-web p{font-size:12px}.mini-label{font-size:12px;letter-spacing:.03em}.demo-bottom{padding-inline:var(--s3);font-size:12px;gap:var(--s2)}.device-preview{right:var(--s3);width:105px;height:207px}.device-preview img{height:96px}
  .ai-demo .demo-toolbar>div>span{font-size:12px;line-height:1.25;max-width:195px}.conversation{padding:var(--s3);gap:var(--s2)}.message{font-size:12px;padding:var(--s2);max-width:93%}.message small{font-size:12px}.chat-input{left:var(--s3);right:var(--s3);padding:var(--s2);bottom:var(--s2)}.chat-chip{margin-top:var(--s1);padding:var(--s1) var(--s2)}
  .automation-demo .demo-toolbar>strong,.workspace-demo .demo-toolbar>strong{font-size:14px}.automation-demo .demo-toolbar>span,.workspace-demo .demo-toolbar>span{display:block}.workflow{padding:var(--s4) var(--s3)}.flow-node{height:53px;padding:var(--s2);gap:var(--s2)}.flow-node strong{font-size:12px}.flow-node>div>span{font-size:12px}.flow-line{height:15px}
  .mail-layout{grid-template-columns:48px 1fr}.mail-layout aside{padding:var(--s3) var(--s1)}.mail-letter{padding:var(--s3)}.mail-letter h3{font-size:27px}.mail-letter p{font-size:12px}.attachment{margin-top:var(--s3);padding:var(--s2);gap:var(--s2)}.calendar-event{padding:var(--s2);gap:var(--s2)}.calendar-event>div{font-size:12px}
  .reel-title{font-size:var(--sm);max-width:225px}.reel-controls{gap:0}.reel-caption{padding-bottom:var(--s2)}.capability-tabs{gap:var(--s2)}.capability-tabs button{font-size:12px;min-height:64px}.reel-description{font-size:12px;min-height:40px;line-height:1.5}
}
@media(min-width:851px) and (max-width:1100px){.showreel{position:relative;top:auto;right:auto;width:90%;max-width:860px;height:690px;margin:var(--s10) auto 0}.demo-screen{width:78%}.reel-heading{justify-content:space-between}.reel-heading>span:first-child{display:block}}
.mail-letter h3{font-size:28px;margin:0 0 var(--s3)}.mail-letter .attachment{margin-top:var(--s3)}.mail-letter .calendar-event{margin-top:var(--s2)}
.ai-demo .conversation{gap:8px;padding:12px 20px}
.ai-demo .message{padding:8px 12px}
.ai-demo .message small{margin-top:4px}
.ai-demo .chat-chip{display:table;margin-top:4px;padding:4px 8px}
@media(max-width:520px){.ai-demo .conversation{padding:12px;gap:8px}.ai-demo .message{padding:8px}.ai-demo .demo-toolbar>div>span{max-width:170px}}
@media(max-width:520px){.showreel{height:675px}.demo-stage{min-height:430px}.demo-canvas{height:385px}.mail-letter h3{font-size:26px}.mail-letter .calendar-event{padding:var(--s2) var(--s1)}}
@media(min-width:1101px) and (max-height:950px){.demo-screen[data-position="active"]{transform:translate(-45%,-50%) translateZ(15px) rotateY(-9deg) rotateZ(4deg) scale(.88)}.demo-screen[data-position="previous"]{transform:translate(-77%,-40%) translateZ(-220px) rotateY(-16deg) rotateZ(-8deg) scale(.88)}.demo-screen[data-position="next"]{transform:translate(-9%,-52%) translateZ(-240px) rotateY(-20deg) rotateZ(10deg) scale(.88)}}
@media(prefers-reduced-motion:reduce){.demo-scene{transform:rotateY(-3deg)!important}.phase{opacity:1;transform:none}.wireframe{display:none}.capability-tabs button i{display:none}}