/* A short product story, with manual controls and stable panel geometry. */
.scene-stack{position:relative;min-height:320px}.scene-layer{position:absolute;inset:0 0 auto;visibility:hidden;opacity:0;transform:translateY(14px);pointer-events:none}.scene-layer.scene-active{position:absolute;visibility:visible;opacity:1;transform:none;pointer-events:auto}.motion-ready .scene-layer{transition:opacity .5s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1),visibility 0s .5s}.motion-ready .scene-layer.scene-active{transition-delay:0s}.scene-controls{display:flex;align-items:center;justify-content:center;gap:24px;margin-top:20px}.scene-status{display:inline-flex;align-items:center;gap:9px;font-size:12px;color:#8a98aa}.scene-status i{width:6px;height:6px;border-radius:50%;background:#91a7bd}.auto-playing .scene-status i{background:#1688f8;box-shadow:0 0 0 4px #1688f80e}.autoplay-toggle{display:inline-flex;align-items:center;gap:8px;border:1px solid #dce9f9;border-radius:7px;background:#f5f9ff;padding:9px 13px;color:#387abf;font-size:12px;min-height:38px}.autoplay-toggle:hover{background:#e9f3ff;border-color:#bad8fa}.autoplay-toggle:disabled{cursor:default;color:#91a0b2;border-color:#e8edf4;background:#f9fbfd}.autoplay-toggle>span:first-child{font-size:13px;line-height:1}.showcase-tabs button{position:relative;border-bottom-color:#e8eef7}.showcase-tabs button[aria-selected=true]{border-bottom-color:#bbdafe}.showcase-tabs button:after{content:'';position:absolute;bottom:-2px;left:0;width:100%;height:2px;background:#0879ed;transform:scaleX(0);transform-origin:left;transition:transform .12s linear}.auto-playing .showcase-tabs button[aria-selected=true]:after{transform:scaleX(var(--scene-progress,0))}.hero-visual:not(.auto-playing) .showcase-tabs button[aria-selected=true]:after{transform:scaleX(1)}.showcase-foot{margin-top:13px}.counter-value{font-variant-numeric:tabular-nums}
.motion-ready .scene-layer:not(.scene-active) *{animation:none!important}.motion-ready .scene-active .stage-header{animation:scene-item .65s both}.motion-ready .scene-active .stage-stat{animation:scene-item .65s .08s both}.motion-ready .scene-active .stage-stat:nth-child(2){animation-delay:.16s}.motion-ready .scene-active .stage-stat:nth-child(3){animation-delay:.24s}.motion-ready .scene-active .stage-stat:nth-child(4){animation-delay:.32s}.motion-ready .scene-active .stage-ai-question{animation:question-wipe .9s .3s steps(28,end) both}.motion-ready .scene-active .stage-ai-card>p:not(.stage-tip){animation:scene-item .7s 1.1s both}.motion-ready .scene-active .stage-ai-card>.stage-tip{animation:scene-item .7s 1.8s both}.motion-ready .scene-active .stage-ai-source{animation:scene-item .6s 2.2s both}.motion-ready .scene-active .stage-step{animation:scene-item .6s .3s both}.motion-ready .scene-active .stage-step:nth-of-type(3){animation-delay:.8s}.motion-ready .scene-active .stage-step:nth-of-type(4){animation-delay:1.3s}.motion-ready .scene-active .stage-change-row{animation:scene-item .55s .5s both}.motion-ready .scene-active .stage-change-row:nth-of-type(2){animation-delay:1s}.motion-ready .scene-active .stage-change-row:nth-of-type(3){animation-delay:1.5s}.motion-ready .scene-active .stage-action-link{animation:scene-item .65s 1.9s both}.motion-ready .scene-active .stage-export-card .report-row{animation:scene-item .65s .3s both}.motion-ready .scene-active .stage-export-card .report-row:nth-of-type(2){animation-delay:.6s}.motion-ready .scene-active .stage-export-card .report-row:nth-of-type(3){animation-delay:.9s}.motion-ready .scene-active .stage-pdf{animation:scene-item .7s 1.4s both}.motion-ready .scene-active .blue-chart path[stroke="#1681ef"]{animation:draw-line 2s .2s ease both}.motion-ready .scene-active .blue-chart circle{animation:chart-point 2.6s 1s ease-in-out infinite;transform-box:fill-box;transform-origin:center}.motion-ready .scene-active .sparkline path{stroke-dasharray:100;animation:spark-draw 1.4s .4s both}
.data-flow{position:relative;display:grid;grid-template-columns:26% 22% 26%;column-gap:13%;align-items:center;min-height:330px;margin:10px 0 52px;padding:22px 0 34px;isolation:isolate}.data-flow:before{content:'';position:absolute;inset:0 -25px;z-index:-2;background-image:radial-gradient(#9ec0e742 .8px,transparent .8px);background-size:16px 16px;mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent)}.data-flow:after{content:'';position:absolute;inset:0 25%;z-index:-1;background:radial-gradient(ellipse,#cde4ff60,transparent 68%)}.flow-inputs,.flow-outputs{display:flex;flex-direction:column;gap:16px;position:relative;z-index:2}.flow-node{display:flex;align-items:center;gap:12px;min-height:76px;background:#fff;border:1px solid #dfe9f6;border-radius:10px;padding:13px 14px;box-shadow:0 4px 15px #1f62af05;color:#3e5b7d;font-size:14px;font-weight:600}.flow-node small{display:block;font-size:11px;font-weight:400;line-height:1.5;color:#8c9cb0;margin-top:4px}.flow-node>i{margin-left:auto;width:5px;height:5px;border-radius:50%;background:#79b3ec;flex-shrink:0}.flow-app,.flow-output-icon{display:grid;place-items:center;flex-shrink:0;width:32px;height:32px;border-radius:8px;font-size:19px;background:#f2f7fe;color:#5f96d6;font-weight:600}.yandex-app{background:#fff0ec;color:#d25540}.metrika-app{background:#fff5e4;color:#d59b43}.crm-app{font-size:13px;background:#eaf6ff;color:#4e9bd0}.flow-core{position:relative;justify-self:center;display:flex;align-items:center;justify-content:center;flex-direction:column;width:170px;height:170px;border:1px solid #d7e7fc;border-radius:34px;background:linear-gradient(150deg,#fff,#f0f7ff);box-shadow:0 10px 35px #0b77e715;z-index:1}.flow-core .brand-icon{width:47px;height:47px;border-radius:13px;margin-bottom:12px;gap:4px;padding:11px}.flow-core .brand-icon i{width:5px;height:17px}.flow-core .brand-icon i:nth-child(2){height:25px}.flow-core .brand-icon i:nth-child(3){height:21px}.flow-core>strong{font-size:17px;letter-spacing:-.3px;color:#2c507d}.flow-core>span:last-child{font-size:10px;color:#8ca4c1;margin-top:5px}.core-orbit{position:absolute;inset:-12px;border:1px solid #cce1fb;border-radius:43px;z-index:-1}.core-orbit:after{content:'';position:absolute;width:7px;height:7px;border:3px solid #fff;background:#1689ff;box-shadow:0 0 0 1px #d3e7ff,0 0 12px #188bff66;border-radius:100%;left:calc(50% - 4px);top:-4px}.flow-paths{position:absolute;inset:15px 0 35px;width:100%;height:calc(100% - 50px);overflow:visible;z-index:0;pointer-events:none}.flow-base{stroke:#d2e4fa;stroke-width:1.3}.flow-packets{stroke:#2b91f5;stroke-width:2.2;stroke-linecap:round;stroke-dasharray:16 360;stroke-dashoffset:0}.flow-caption{position:absolute;bottom:0;text-align:center;width:100%;font-size:10px;color:#a0aec0}.motion-ready .data-flow .flow-packets path{animation:data-packet 4.3s linear infinite;animation-play-state:paused}.motion-ready .data-flow.in-view .flow-packets path{animation-play-state:running}.flow-packets path:nth-child(2){animation-delay:-1.4s!important}.flow-packets path:nth-child(3){animation-delay:-2.8s!important}.flow-packets path:nth-child(4){animation-delay:-2s!important}.flow-packets path:nth-child(5){animation-delay:-3.4s!important}.flow-packets path:nth-child(6){animation-delay:-.6s!important}.motion-ready .data-flow.in-view .core-orbit{animation:core-signal 4.3s ease-in-out infinite}.motion-ready .data-flow.in-view .flow-node{animation:node-active 6s ease-in-out infinite}.motion-ready .data-flow.in-view .flow-node:nth-child(2){animation-delay:-4s}.motion-ready .data-flow.in-view .flow-node:nth-child(3){animation-delay:-2s}.motion-ready .data-flow.in-view .flow-outputs .flow-node{animation-delay:-3s}.motion-ready .data-flow.in-view .flow-outputs .flow-node:nth-child(2){animation-delay:-1s}.motion-ready .data-flow.in-view .flow-outputs .flow-node:nth-child(3){animation-delay:-5s}.motion-ready .steps.in-view article>span{animation:step-active 9s ease-in-out infinite}.motion-ready .steps.in-view article:nth-child(2)>span{animation-delay:3s}.motion-ready .steps.in-view article:nth-child(3)>span{animation-delay:6s}.motion-ready .steps.in-view article:not(:last-child):after{background:linear-gradient(90deg,#d7e5f5 0%,#7abaff 45%,#d7e5f5 60%);background-size:250% 100%;animation:step-link 9s linear infinite}.motion-ready .steps.in-view article:nth-child(2):after{animation-delay:3s}
@keyframes scene-item{from{opacity:0;transform:translateY(13px)}to{opacity:1;transform:none}}@keyframes question-wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}@keyframes chart-point{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.7}}@keyframes spark-draw{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}@keyframes data-packet{from{stroke-dashoffset:376}to{stroke-dashoffset:0}}@keyframes core-signal{0%,100%{transform:scale(.97);opacity:.6}50%{transform:scale(1.04);opacity:1}}@keyframes node-active{0%,50%,100%{border-color:#dfe9f6;box-shadow:0 4px 15px #1f62af05;transform:translateY(0)}15%,30%{border-color:#9dc8fa;box-shadow:0 6px 23px #1689ff12;transform:translateY(-3px)}}@keyframes step-active{0%,35%,100%{background:#eaf4ff;color:#0879ed;box-shadow:0 0 0 0 #1689ff00}10%,23%{background:#0879ed;color:#fff;box-shadow:0 0 0 7px #1689ff0c}}@keyframes step-link{0%{background-position:100% 0}35%,100%{background-position:-150% 0}}
@media(min-width:601px) and (max-width:1100px){.data-flow{grid-template-columns:27% 24% 27%;column-gap:11%;margin-top:20px}.flow-node{font-size:13px;padding:12px 10px;gap:8px;min-height:82px}.flow-node small{font-size:11px}.flow-app,.flow-output-icon{width:29px;height:29px;font-size:17px}.crm-app{font-size:12px}.flow-core{width:150px;height:160px;border-radius:30px}.core-orbit{border-radius:38px;inset:-9px}.flow-core>strong{font-size:17px}.scene-controls{margin-top:21px}.scene-status,.autoplay-toggle{font-size:13px}}
@media(min-width:601px) and (max-width:800px){.flow-core{width:125px;height:145px;border-radius:24px}.flow-core>strong{font-size:15px}.flow-core>span:last-child{font-size:9px}.flow-node{font-size:11px;gap:7px}.flow-node small{font-size:9px}.flow-app,.flow-output-icon{width:25px;height:28px;font-size:16px}.crm-app{font-size:10px}.core-orbit{border-radius:33px}.flow-inputs,.flow-outputs{gap:15px}}
@media(max-width:600px){.scene-controls{gap:10px;justify-content:space-between;align-items:center;margin-top:17px}.scene-status{font-size:10px;gap:6px}.autoplay-toggle{font-size:10px;padding:8px 10px;min-height:35px}.scene-status i{width:5px;height:5px}.showcase-foot{margin-top:13px}.data-flow{grid-template-columns:1fr;gap:35px;padding:5px 0 35px;margin:28px 0 30px}.data-flow:before{inset:0 -10px;mask-image:linear-gradient(180deg,transparent,#000 15%,#000 85%,transparent)}.data-flow:after{inset:20% 0}.flow-paths{display:none}.flow-inputs,.flow-outputs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.flow-node{min-height:106px;padding:12px 5px;flex-direction:column;text-align:center;gap:7px;font-size:11px;line-height:1.4;position:relative}.flow-node>i{display:none}.flow-node small{font-size:9px;line-height:1.6;margin-top:5px}.flow-app,.flow-output-icon{width:30px;height:30px;font-size:18px}.crm-app{font-size:12px}.flow-core{width:157px;height:151px;border-radius:27px}.flow-core:before,.flow-core:after{content:'';position:absolute;left:50%;width:2px;height:35px;background:linear-gradient(180deg,#d3e6fb,#5aa5f4,#d3e6fb);background-size:100% 300%;z-index:-2}.flow-core:before{bottom:100%}.flow-core:after{top:100%}.motion-ready .data-flow.in-view .flow-core:before,.motion-ready .data-flow.in-view .flow-core:after{animation:mobile-flow 2s linear infinite}.core-orbit{border-radius:35px;inset:-8px}.flow-core .brand-icon{width:40px;height:40px;border-radius:11px;padding:9px;gap:3px}.flow-core .brand-icon i{width:4px;height:15px}.flow-core .brand-icon i:nth-child(2){height:22px}.flow-core .brand-icon i:nth-child(3){height:18px}.flow-core>strong{font-size:16px}.flow-core>span:last-child{font-size:10px}.flow-caption{font-size:9px}.flow-outputs .flow-node{font-size:10px}.motion-ready .steps.in-view article:not(:last-child):after{background:linear-gradient(180deg,#d7e5f5,#7abaff,#d7e5f5);background-size:100% 300%;animation:mobile-flow 3s linear infinite}@keyframes mobile-flow{from{background-position:0 100%}to{background-position:0 -100%}}}
@media(max-width:360px){.scene-status{font-size:9px}.autoplay-toggle{font-size:9px;gap:5px;padding-inline:7px}.flow-node{font-size:10px}.flow-node small{font-size:8px}.flow-outputs .flow-node{font-size:9px}}
html.motion-paused .scene-layer.scene-active *,html.motion-paused .scene-layer.scene-active *:before,html.motion-paused .scene-layer.scene-active *:after{animation:none!important;clip-path:none!important}html.motion-paused .scene-layer{transition:none!important}html.motion-paused .scene-active .stage-stat,html.motion-paused .scene-active .stage-header,html.motion-paused .scene-active .stage-ai-card>p,html.motion-paused .scene-active .stage-ai-source,html.motion-paused .scene-active .stage-step,html.motion-paused .scene-active .stage-change-row,html.motion-paused .scene-active .stage-action-link,html.motion-paused .scene-active .report-row,html.motion-paused .scene-active .stage-pdf{opacity:1!important;transform:none!important}html.motion-paused .flow-packets{opacity:.45}html.motion-paused .sparkline path{stroke-dashoffset:0!important}
@media(prefers-reduced-motion:reduce){.scene-layer{transition:none!important}.scene-active *{clip-path:none!important;opacity:1!important}.flow-packets{opacity:.4}.sparkline path{stroke-dashoffset:0!important}.flow-node,.core-orbit{transform:none!important}}
/* Keep the new diagram readable on touch screens. */
@media(min-width:601px) and (max-width:1100px){.flow-node{font-size:14px;min-height:92px}.flow-node small{font-size:12px}.flow-core>span:last-child{font-size:11px}.flow-caption{font-size:11px}}
@media(min-width:601px) and (max-width:800px){.flow-node{padding:12px 9px;gap:7px}.flow-app,.flow-output-icon{width:23px;font-size:16px}.crm-app{font-size:11px}.flow-node>i{display:none}}
@media(max-width:600px){.flow-node,.flow-outputs .flow-node{font-size:12px}.flow-node small{font-size:11px}.flow-node{min-height:128px}.flow-caption{font-size:10px}}
