/* Readable software UI: opaque surfaces, larger type and restrained perspective. */
.hero-art{height:640px;isolation:isolate}
.ribbon-entrance{z-index:0}
.device-tilt{transform:perspective(2400px) rotateX(calc(1deg + var(--card-rx,0deg))) rotateY(calc(-2deg + var(--card-ry,0deg)));transform-style:flat;will-change:auto!important;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.device-entrance{z-index:2;animation:device-arrive 1.1s .24s var(--ease) backwards}
.app-window{background:#f1f4fc;backdrop-filter:none;-webkit-backdrop-filter:none;border-color:#d8e1f4;isolation:isolate}
.app-chrome{height:52px;background:#f7f9ff;padding-inline:20px}
.app-brand{font-size:13px;gap:9px;color:#263856}
.app-brand img{width:25px;height:25px}
.window-controls{font-size:19px;color:#7381a0}
.app-body{grid-template-columns:122px minmax(0,1fr);min-height:360px}
.app-sidebar{background:#e9eef9;border-color:#dce3f0;padding:20px 10px}
.side-item{font-size:12px;gap:8px;padding:12px 9px;color:#5e6a85}
.side-item.selected{background:#dedfff;color:#6252d7}
.side-item>span,.side-item>svg{flex-shrink:0}
.workspace{font-size:11px;color:#62738f;bottom:20px;left:15px;right:10px;gap:7px}
.workspace small{font-size:9px;letter-spacing:0}
.app-main{background:#f1f4fc;padding:23px 20px 17px}
.app-top h2{font-size:23px;letter-spacing:-.5px;color:#233450}
.app-top p{font-size:11px;color:#64748b;line-height:1.8;margin-top:6px}
.app-search{display:none}
.app-tabs{font-size:11px;gap:18px;margin-top:20px;padding-bottom:10px;color:#75829a;border-color:#dce3f0}
.table-heading,.product-row{grid-template-columns:minmax(0,1fr) 61px 41px;gap:9px}
.table-heading{font-size:11px;background:#e7edf8;color:#667791;padding:10px 6px;border-radius:5px;margin-top:10px}
.product-row{padding:12px 5px;border-color:#dce4f1}
.product-row:hover{background:#e8edfb}
.product-info{gap:10px;min-width:0}
.product-thumb{width:39px;height:43px;border-radius:6px;flex-shrink:0}
.product-text strong{font-size:13px;color:#33455f;letter-spacing:0}
.product-text small{font-size:11px;color:#74819a;margin-top:4px}
.product-status{font-size:11px;color:#4978dc}
.product-status.purple{color:#8a65cb}
.row-action{font-size:10px;padding:5px 7px;background:#fff;color:#657493;border-color:#dce4f2}
.app-bottom{font-size:9px;color:#7888a1;padding-top:15px;line-height:1.7}
.app-bottom>button{font-size:10px;color:#6758c5;flex-shrink:0}
.floating-status{transform:none;right:0;bottom:-24px;max-width:85%;padding:14px 18px;gap:11px;background:#edf0ff;border-color:#d4ddf3;backdrop-filter:none;-webkit-backdrop-filter:none;border-radius:12px}
.floating-status strong{font-size:13px;color:#364773;white-space:normal}
.floating-status div>span{font-size:10px;color:#7886a2;letter-spacing:.6px;margin-top:4px}
.status-check{width:36px;height:36px;font-size:22px}
.demo-caption{bottom:0;left:0;right:0;text-align:center;font-size:10px;color:#8b9dbf;line-height:1.6}
.app-window.view-switch{animation:none}

/* Glass and a gentle device tilt create depth without scaling the UI bitmap. */
.glass-ribbon{translate:var(--scene-x,0px) var(--scene-y,0px);animation:glass-drift 11s ease-in-out infinite;animation-play-state:paused}
.hero-band::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at var(--light-x,70%) var(--light-y,38%),#7774e01a,transparent 48%);transition:opacity .6s;opacity:.7}
.hero-band.motion-in-view .glass-ribbon{animation-play-state:running}
.hero .gradient-text{background-size:200% 100%;animation:title-light 8s ease-in-out infinite;animation-play-state:paused}
.hero-band.motion-in-view .gradient-text{animation-play-state:running}
.hero-eyebrow .eyebrow-rule{position:relative;overflow:hidden}
.eyebrow-rule::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,#e8edff,transparent);animation:rule-light 3s 1.5s ease-in-out infinite;animation-play-state:paused}
.hero-band.motion-in-view .eyebrow-rule::after{animation-play-state:running}
.hero-principles>div{transition:opacity .85s var(--ease),transform .85s var(--ease),color .3s;transition-delay:var(--reveal-delay,0ms)}
.hero-principles>div:hover strong{color:#fff}
.hero-principles>div:hover>span{color:#b0bafa}
.status-check{position:relative}
.status-check::after{content:"";position:absolute;inset:-5px;border:1px solid #b5abef;border-radius:50%;animation:status-orbit 3.8s 1.5s ease-out infinite;animation-play-state:paused;pointer-events:none}
.hero-band.motion-in-view .status-check::after{animation-play-state:running}

/* DPR-aware canvas avoids stretching a fractional-width SVG stroke. */
.flow-track{height:76px;margin-block:18px 15px;isolation:isolate}
.flow-canvas{position:absolute;inset:0;display:none;width:100%;height:100%;pointer-events:none}
.flow-ready .flow-canvas{display:block}
.flow-ready .flow-fallback{display:none}
.flow-fallback path{vector-effect:non-scaling-stroke;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;shape-rendering:geometricPrecision}
.flow-node{width:10px;height:10px;margin-left:-5px;top:40%;box-shadow:0 0 0 5px #e0e5f4,0 0 16px #a893ff55;transition:background .5s,box-shadow .5s,scale .5s}
.flow-node.lit{transform:none;scale:1.05;background:#7564ed;box-shadow:0 0 0 5px #dadcfa,0 0 20px #8b7bf588}
.flow-node::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:1px solid #9e95e9;opacity:0}
.motion-in-view .flow-node.lit::after{animation:node-ripple 3s ease-out infinite}
.node-two::after{animation-delay:.55s!important}.node-three::after{animation-delay:1.1s!important}

/* Reveal, panel changes and local hover responses share one easing rhythm. */
.reveal{transition:opacity .95s var(--ease),transform .95s var(--ease);transition-delay:var(--reveal-delay,0ms)}
.reveal.is-pending{transform:translateY(38px)}
.reveal.is-visible{transform:none}
.capability-tabs>button{position:relative;transition:background .35s,border-color .35s,box-shadow .35s,color .35s}
.capability-tabs>button:hover{background:#dce3f3;border-color:#bdc9e3;box-shadow:0 5px 18px #374b7610}
.capability-tabs>button i{transition:translate .35s var(--ease),color .35s}
.capability-tabs>button:hover i{translate:3px -3px;color:#6353d5}
.capability-panel{animation:panel-arrive .6s var(--ease) backwards}
.capability-facts>div{transition:background .3s,border-color .3s}
.library-visual{transform:none!important}
.library-products>span{transition:translate .4s var(--ease),box-shadow .4s}
.capabilities.motion-in-view .library-products>span{animation:product-arrive .7s var(--ease) backwards}
.library-products>span:nth-child(2){animation-delay:.12s!important}.library-products>span:nth-child(3){animation-delay:.24s!important}
.library-products>span:hover{translate:0 -5px;box-shadow:0 12px 20px #3f54831c}
.review-visual b{position:relative;overflow:hidden}
.review-visual b::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent,#ffffff90,transparent);translate:-120% 0}
.capabilities.motion-in-view .review-visual b::after{animation:card-sheen 4.5s ease-in-out infinite}
.workflow-step .mini-scene{transition:translate .5s var(--ease),box-shadow .5s,background .5s;transform:none!important}
.workflow-step:hover .mini-scene{translate:0 -6px;box-shadow:0 14px 28px #51649616}
.workflow-step .step-number{transition:color .4s,translate .4s var(--ease)}
.workflow-step:hover .step-number{color:#7462d8;translate:0 -3px}
.import-board{transform:none}
.workflow.motion-in-view .package-document{animation:package-arrive 1s .25s var(--ease) backwards}
.workflow.motion-in-view .import-products>span{animation:product-arrive .75s .4s var(--ease) backwards}
.workflow.motion-in-view .import-products>span:nth-child(2){animation-delay:.55s}.workflow.motion-in-view .import-products>span:nth-child(3){animation-delay:.7s}
.workflow.motion-in-view .skeleton-lines i{transform-origin:left;animation:line-fill 1.2s .5s var(--ease) backwards}
.workflow.motion-in-view .skeleton-lines i:last-child{animation-delay:.7s}
.workflow.motion-in-view .publish-scene>div{animation:product-arrive .8s .4s var(--ease) backwards}
.workflow.motion-in-view .publish-scene>div:nth-child(2){animation-delay:.55s}.workflow.motion-in-view .publish-scene>div:nth-child(3){animation-delay:.7s}
.faq-grid>details{transition:background .3s,border-color .3s}
.faq-grid>details:hover{background:#dce4f140;border-color:#b9c7e0}
.faq-grid details[open] p{animation:copy-arrive .45s var(--ease)}
.download-panel::after{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,#c4d2ff,#bb9cff,transparent);translate:-110% 0;pointer-events:none;animation:edge-light 6s ease-in-out infinite;animation-play-state:paused}
.download-zone.motion-in-view .download-panel::after{animation-play-state:running}
.download-ribbon{animation:download-glass 13s ease-in-out infinite;animation-play-state:paused}
.download-zone.motion-in-view .download-ribbon{animation-play-state:running}
.download-card,.companion-download{transition:border-color .35s,box-shadow .35s,background .35s}
.download-card:hover{border-color:#bac8f0;box-shadow:0 18px 40px #090f2530}
.companion-download:hover{border-color:#7788bb70;background:#283852}
.button:hover{box-shadow:0 12px 30px #5d57d941}
html[data-page-active="false"] :is(.glass-ribbon,.gradient-text,.download-ribbon),html[data-page-active="false"] :is(.status-check,.eyebrow-rule,.flow-node,.download-panel,.review-visual b)::after{animation-play-state:paused!important}

@keyframes device-arrive{from{opacity:0;transform:translateY(35px)}to{opacity:1;transform:none}}
@keyframes glass-drift{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-15px) rotate(2deg)}}
@keyframes title-light{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}
@keyframes rule-light{0%,30%{translate:-120% 0}80%,100%{translate:120% 0}}
@keyframes status-orbit{0%{opacity:0;scale:.85}20%{opacity:.65}75%,100%{opacity:0;scale:1.4}}
@keyframes node-ripple{0%{opacity:0;scale:.6}20%{opacity:.6}80%,100%{opacity:0;scale:1.7}}
@keyframes panel-arrive{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:none}}
@keyframes product-arrive{from{opacity:0;translate:0 13px}to{opacity:1;translate:0 0}}
@keyframes package-arrive{from{opacity:0;translate:-18px 0}to{opacity:1;translate:0 0}}
@keyframes line-fill{from{scale:0 1}to{scale:1 1}}
@keyframes copy-arrive{from{opacity:0;translate:0 5px}to{opacity:1;translate:0 0}}
@keyframes card-sheen{0%,55%{translate:-120% 0}90%,100%{translate:120% 0}}
@keyframes edge-light{0%,20%{translate:-110% 0}80%,100%{translate:110% 0}}
@keyframes download-glass{0%,100%{transform:translateY(0) rotate(-16deg)}50%{transform:translateY(15px) rotate(-13deg)}}

@media(min-width:761px) and (max-width:1180px){
  .app-body{grid-template-columns:111px minmax(0,1fr);min-height:350px}
  .app-sidebar{padding:18px 7px}.side-item{font-size:11px;padding:12px 7px;gap:7px}
  .app-main{padding:21px 16px 15px}.app-top h2{font-size:21px}.app-top p{font-size:10px}
  .app-chrome{height:46px;padding-inline:16px}.app-brand{font-size:12px}
  .table-heading,.product-row{grid-template-columns:minmax(0,1fr) 57px 36px;gap:7px}
  .product-info{gap:8px}.product-thumb{width:34px;height:39px}.product-text strong{font-size:13px}.product-text small{font-size:11px}
  .product-status,.row-action{font-size:10px}.row-action{padding:5px}.app-bottom{font-size:9px}.app-bottom>button{font-size:10px}
  .floating-status{padding:13px 16px}.floating-status strong{font-size:12px}.floating-status div>span{font-size:9px}
}
@media(min-width:761px) and (max-width:940px){
  .hero-art{height:620px}.device-entrance{top:100px;left:-15px;right:-2px}
  .app-body{grid-template-columns:96px minmax(0,1fr);min-height:337px}.side-item{font-size:10px;padding-inline:5px;gap:6px}
  .app-main{padding-inline:12px}.product-info{gap:6px}.product-thumb{width:28px;height:35px}
  .product-text strong{font-size:11px}.product-text small{font-size:9px}.product-status,.row-action{font-size:9px}
  .app-tabs{font-size:10px;gap:12px}.table-heading{font-size:10px}.app-bottom>span{max-width:140px}
  .floating-status strong{font-size:11px}.demo-caption{font-size:9px}
}
@media(max-width:760px){
  .hero-art{height:535px;aspect-ratio:auto;margin-top:23px}
  .device-tilt{transform:none!important}
  .device-entrance{top:66px;left:0;right:0}
  .ribbon-entrance{top:-11%;width:150%;left:-25%}
  .app-chrome{height:40px;padding-inline:12px}.app-brand{font-size:11px;gap:6px}.app-brand img{width:20px;height:20px}.window-controls{font-size:15px}
  .app-body{grid-template-columns:77px minmax(0,1fr);min-height:305px}.app-sidebar{padding:14px 5px}
  .side-item{font-size:9px;gap:5px;padding:10px 3px;margin-bottom:7px}.side-item svg{width:13px;height:13px}.side-item>span{font-size:13px}
  .workspace{left:8px;bottom:17px;font-size:8px;gap:5px}.workspace small{font-size:7px}.workspace>span{font-size:11px}
  .app-main{padding:17px 10px 12px}.app-top h2{font-size:18px}.app-top p{font-size:9px;line-height:1.7;margin-top:5px}
  .app-tabs{font-size:9px;gap:10px;margin-top:15px;padding-bottom:9px}
  .table-heading,.product-row{grid-template-columns:minmax(0,1fr) 45px 30px;gap:5px}
  .table-heading{font-size:9px;padding:8px 2px;margin-top:9px}.product-row{padding:10px 1px}
  .product-info{gap:5px}.product-thumb{width:27px;height:35px;padding:2px}
  .product-text strong{font-size:10px}.product-text small{font-size:8px;margin-top:4px}
  .product-status{font-size:8px}.row-action{font-size:8px;padding:5px 3px}
  .app-bottom{font-size:8px;padding-top:13px;gap:6px}.app-bottom>span{max-width:100px}.app-bottom>button{font-size:8px}
  .floating-status{right:0;bottom:-26px;padding:12px 14px;border-radius:10px;gap:9px}
  .floating-status strong{font-size:11px}.floating-status div>span{font-size:8px;letter-spacing:.4px}.status-check{width:30px;height:30px;font-size:19px}
  .demo-caption{font-size:8px;bottom:0}
  .flow-track{height:62px;margin-block:18px 10px}.flow-node{width:9px;height:9px}
  .glass-ribbon{animation-duration:13s}
}
@media(max-width:360px){
  .app-body{grid-template-columns:67px minmax(0,1fr)}.side-item{font-size:8px;gap:4px}
  .app-main{padding-inline:8px}.product-thumb{display:none}.product-text strong{font-size:10px}.app-tabs{font-size:8px;gap:7px}
  .workspace{font-size:7px}.workspace small{font-size:6px}.floating-status strong{font-size:10px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .device-entrance,.device-tilt,.reveal,.reveal.is-pending{opacity:1!important;transform:none!important}
  .glass-ribbon{translate:none!important}
  .button:hover,.workflow-step:hover .mini-scene,.workflow-step:hover .step-number{transform:none!important;translate:none!important}
}