/* Motion only: existing composition, copy, colors and spacing remain the baseline. */
/* Motion system: press 120ms · interaction 200ms · UI 400ms · scene 800–1000ms. One ease family, no bounce. */
:root{--motion-press:120ms;--motion-fast:200ms;--motion-ui:400ms;--motion-scene:800ms;--motion-ease:cubic-bezier(.2,.7,.2,1);--motion-ease-out:cubic-bezier(.16,1,.3,1)}
@property --rise{syntax:'<length>';inherits:false;initial-value:0px}
@property --depth-y{syntax:'<length>';inherits:false;initial-value:0px}
@property --fill{syntax:'<percentage>';inherits:true;initial-value:0%}
@property --opp-fill{syntax:'<percentage>';inherits:true;initial-value:100%}
.motion-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.motion-toggle{padding:4px 0;color:var(--muted);background:none;font-size:11px;white-space:nowrap;text-underline-offset:4px}
.motion-toggle:hover{text-decoration:underline}
.motion-toggle[hidden]{display:none}
/* Disable the older, uncoordinated visual drift. */
.hero-art,.opportunity-art{animation:none}

/* Scroll reveals: a few distinct gestures, chosen per content type. */
.motion-reveal{transition:opacity var(--motion-scene) var(--motion-ease),translate var(--motion-scene) var(--motion-ease),scale var(--motion-scene) var(--motion-ease);transition-delay:var(--motion-delay,0ms)}
.motion-pending{opacity:0;translate:0 18px}
.motion-reveal[data-reveal=fade].motion-pending{translate:none}
.motion-reveal[data-reveal=short].motion-pending{translate:0 10px}
.motion-reveal[data-reveal=rise]{transition-duration:1000ms;transition-timing-function:var(--motion-ease-out)}
.motion-reveal[data-reveal=rise].motion-pending{translate:0 30px}
.motion-reveal[data-reveal=slide].motion-pending{translate:-18px 0}
.motion-reveal[data-reveal=pop].motion-pending{translate:0 8px;scale:.94}
.services article.motion-reveal{transition:opacity var(--motion-scene) var(--motion-ease),translate var(--motion-scene) var(--motion-ease),transform var(--motion-ui) var(--motion-ease),box-shadow var(--motion-ui),border-color var(--motion-ui)}
.categories li.motion-reveal{transition:opacity var(--motion-ui) var(--motion-ease),translate var(--motion-ui) var(--motion-ease),scale var(--motion-ui) var(--motion-ease),transform var(--motion-fast) var(--motion-ease),box-shadow var(--motion-fast),border-color var(--motion-fast)}
.platform-features article{transition:translate var(--motion-scene) var(--motion-ease),opacity var(--motion-scene) var(--motion-ease)}

/* Micro-interactions. */
.button{transition:transform var(--motion-fast) var(--motion-ease),box-shadow var(--motion-fast),background-color var(--motion-fast),border-color var(--motion-fast),color var(--motion-fast)}
.button:active{transform:translateY(0) scale(.97);box-shadow:inset 0 1px 3px #00000012;transition-duration:var(--motion-press)}
.process-select:active,.workflow-next:active,.marquee-toggle:active{scale:.98}
.button span,.service-emoji,.avatars img,.placeholder-logo,.workflow-next span,.platform-feature-label>span{transition:transform var(--motion-ui) var(--motion-ease),translate var(--motion-fast) var(--motion-ease),color var(--motion-fast),border-color var(--motion-fast),background-color var(--motion-fast)}
.workflow-next span{display:inline-block}
.faq summary>span{transition:transform var(--motion-fast) var(--motion-ease)}
.faq summary{transition:color var(--motion-fast)}
.faq details[open] summary>span{transform:rotate(45deg)}
.demo-count,.demo-gauge{font-variant-numeric:tabular-nums}
@media(hover:hover) and (pointer:fine){
 .services article:hover{transform:translateY(-5px) scale(1.01)}
 .services article:hover .service-emoji{transform:translateY(-3px) scale(1.06)}
 .button:hover{transform:translateY(-2px)}
 .button:active{transform:translateY(0) scale(.97)}
 .button.secondary:hover{border-color:#cfd2db;box-shadow:0 8px 18px #11111b0d}
 .workflow-next:hover span{transform:translateX(4px)}
 .platform-features article:hover .platform-feature-label>span{translate:0 -2px;border-color:#0012ff38;background-color:#0012ff0d}
 .categories li:hover{border-color:#0012ff2e;box-shadow:0 10px 22px #11111b0d}
 .faq summary:hover{color:var(--blue)}
 .avatars img:hover{transform:translateY(-3px) scale(1.07)}
 .placeholder-logo:hover{color:#69707e;transform:translateY(-2px)}
}

/* A single scroll story, activated only when the complete visual fits on desktop. */
.workflow-story.story-enabled{--story-top:max(112px,calc((100vh - var(--story-height,460px))/2));position:relative;min-height:calc(var(--story-height,460px) + 168vh)}
.story-enabled .workflow{position:sticky;top:var(--story-top)}
.story-markers{position:absolute;top:calc(50vh - var(--story-top));bottom:calc(var(--story-height,460px) - 50vh + var(--story-top));left:0;right:0;display:grid;grid-template-rows:repeat(6,1fr);pointer-events:none;visibility:hidden}
/* One continuous progress rail replaces per-tab underlines while the story is pinned. */
.story-enabled .process{position:relative}
.story-enabled .process::before,.story-enabled .process::after{content:'';position:absolute;left:0;right:0;bottom:-15px;height:2px;border-radius:2px;background:#e6e7ee}
.story-enabled .process::after{background:var(--blue);transform:scaleX(var(--story-p,.1667));transform-origin:left;transition:transform var(--motion-ui) var(--motion-ease)}
.workflow[data-active="1"]{--story-p:.3333}.workflow[data-active="2"]{--story-p:.5}.workflow[data-active="3"]{--story-p:.6667}.workflow[data-active="4"]{--story-p:.8333}.workflow[data-active="5"]{--story-p:1}

/* Hero: copy first, then the composition arrives layer by layer. */
@keyframes hero-arrive{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
@keyframes hero-layer-in{from{opacity:0;--rise:26px;scale:.965}to{opacity:1;--rise:0px;scale:1}}
@keyframes hero-depth{to{--depth-y:var(--sd,0px)}}
@keyframes race-grow{from{transform:scaleY(.15)}to{transform:scaleY(1)}}
@keyframes winner-pop{from{opacity:0;translate:0 4px;scale:.9}to{opacity:1;translate:0 0;scale:1}}
@keyframes chart-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes chart-area{from{opacity:0}to{opacity:1}}
.hero{view-timeline:--hero block}
.hero-beauty{--d:9px;--in:300ms}
.hero-man{--d:5px;--sd:-18px;--in:380ms}
.hero-product{--d:13px;--sd:10px;--in:460ms}
.portal-mini{--d:11px;--in:560ms}
.performance-card{--d:15px;--in:640ms}
html[data-motion=full] .hero-art>*{translate:calc(var(--px,0)*var(--d,0px)) calc(var(--py,0)*var(--d,0px) + var(--rise) + var(--depth-y))}
html[data-motion=full] .hero-enter .hero-brand{animation:hero-arrive 700ms var(--motion-ease) 40ms backwards}
html[data-motion=full] .hero-enter .hero-intro{animation:hero-arrive 700ms var(--motion-ease) 120ms backwards}
html[data-motion=full] .hero-enter .actions{animation:hero-arrive 700ms var(--motion-ease) 200ms backwards}
html[data-motion=full] .hero-enter .benefits{animation:hero-arrive 650ms var(--motion-ease) 260ms backwards}
html[data-motion=full] .hero-enter .hero-art>*{animation:hero-layer-in 950ms var(--motion-ease-out) var(--in,300ms) backwards}
html[data-motion=full] .hero-enter .creative-race i{animation:race-grow 900ms var(--motion-ease-out) calc(900ms + var(--i,0)*80ms) backwards}
html[data-motion=full] .hero-enter .creative-race .is-winner span{animation:winner-pop 450ms var(--motion-ease) 1550ms backwards}
html[data-motion=full] .chart-revealed .demo-chart-line{stroke-dasharray:1;animation:chart-draw 1100ms var(--motion-ease) 100ms both}
html[data-motion=full] .chart-revealed .demo-chart-area{animation:chart-area 900ms var(--motion-ease) 180ms both}

/* Dashboard: the frame grows into focus on scroll; its panels then settle into place. */
.platform-stage :is(.demo-welcome,.demo-health,.demo-panel){transition:opacity 700ms var(--motion-ease),translate 700ms var(--motion-ease-out);transition-delay:var(--dd,0ms)}
html[data-motion=full] .dashboard-pending :is(.demo-welcome,.demo-health,.demo-panel){opacity:0;translate:0 14px}
.demo-health{--dd:90ms}.demo-sales{--dd:180ms}.demo-activity{--dd:260ms}
.demo-bottom>:nth-child(1){--dd:340ms}.demo-bottom>:nth-child(2){--dd:400ms}.demo-bottom>:nth-child(3){--dd:460ms}

@keyframes dashboard-focus{from{transform:perspective(1600px) rotateX(5deg) translateY(36px) scale(.93)}to{transform:perspective(1600px) rotateX(0) translateY(0) scale(1)}}
@keyframes product-focus{from{transform:scale(1.035)}to{transform:scale(1)}}
@keyframes founding-depth{from{translate:0 10px}to{translate:0 -10px}}
@keyframes band-open{from{clip-path:inset(0 2.5% round 36px)}to{clip-path:inset(0 0 round 0px)}}
@keyframes handoff-draw{from{transform:scaleX(0);opacity:.2}to{transform:scaleX(1);opacity:1}}
@keyframes timeline-fill{to{--fill:100%}}
@keyframes opp-line{from{--opp-fill:0%}to{--opp-fill:100%}}
@keyframes opp-pulse{50%{opacity:.35;scale:.8}}
html[data-motion=full] .opp-chips .is-testing i{animation:opp-pulse 1.8s ease-in-out infinite}
html[data-motion=full] .opp-winner.motion-reveal:not(.motion-pending) .opp-badge{animation:winner-pop 450ms var(--motion-ease) 700ms backwards}
@supports(animation-timeline:view()){
 /* The 90-day timeline line fills in blue as the reader moves through the months. */
 html[data-motion=full] .months{animation:timeline-fill linear both;animation-timeline:view();animation-range:cover 20% cover 70%}
 html[data-motion=full] .months::before{background:linear-gradient(var(--blue),var(--blue)) top/100% var(--fill) no-repeat,#d6d6df}
 @media(min-width:701px) and (prefers-reduced-motion:no-preference){
  html[data-motion=full] .opp-stages{animation:opp-line linear both;animation-timeline:view();animation-range:entry 30% cover 55%}
  html[data-motion=full] .platform-stage{animation:dashboard-focus linear both;animation-timeline:view();animation-range:entry 0% cover 45%;transform-origin:center 65%}
  html[data-motion=full] .hero-art>*{animation:hero-depth linear both;animation-timeline:--hero;animation-range:exit 0% exit 100%}
  html[data-motion=full] .hero-enter .hero-art>*{animation:hero-layer-in 950ms var(--motion-ease-out) var(--in,300ms) backwards,hero-depth linear both;animation-timeline:auto,--hero;animation-range:normal,exit 0% exit 100%}
  html[data-motion=full] .product-large img{animation:product-focus linear both;animation-timeline:view();animation-range:entry 0% cover 50%}
  html[data-motion=full] .founding{animation:band-open linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
  html[data-motion=full] .founding-mark{animation:founding-depth linear both;animation-timeline:--founding;animation-range:entry 0% exit 100%}
  html[data-motion=full] .handoff-line{animation:handoff-draw linear both;animation-timeline:view();animation-range:entry 0% cover 35%;transform-origin:left}
 }
}
.founding{view-timeline:--founding block}

/* FAQ answers open smoothly where the browser can animate to height:auto. */
@supports(interpolate-size:allow-keywords){
 html[data-motion=full]{interpolate-size:allow-keywords}
 html[data-motion=full] .faq details::details-content{height:0;overflow:clip;transition:height var(--motion-ui) var(--motion-ease),content-visibility var(--motion-ui) allow-discrete}
 html[data-motion=full] .faq details[open]::details-content{height:auto}
}

@media(max-width:700px){
 .motion-pending{translate:0 10px}.motion-reveal{transition-duration:600ms;transition-delay:0ms}
 .motion-reveal[data-reveal=rise].motion-pending{translate:0 16px}
 .motion-reveal[data-reveal=slide].motion-pending{translate:-10px 0}
 .hero-beauty{--in:120ms}.hero-man{--in:180ms}.hero-product{--in:240ms}.portal-mini{--in:300ms}.performance-card{--in:360ms}
 html[data-motion=full] .hero-enter .creative-race i{animation-delay:calc(550ms + var(--i,0)*80ms)}html[data-motion=full] .hero-enter .creative-race .is-winner span{animation-delay:1200ms}
}
html[data-motion=reduce]{scroll-behavior:auto}
html[data-motion=reduce] *,html[data-motion=reduce] *::before,html[data-motion=reduce] *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
html[data-motion=reduce] .motion-pending{opacity:1;translate:none}
html[data-motion=reduce] .marquee-toggle{display:none}
html[data-motion=reduce] .workflow-story{min-height:0!important}
html[data-motion=reduce] .workflow{position:static}
html[data-motion=reduce] :is(.services article,.button,.categories li):is(:hover,:active){transform:none}
@media(prefers-reduced-motion:reduce){
 .motion-pending{opacity:1;translate:none}.workflow-story{min-height:0!important}.workflow{position:static!important}
 :is(.services article,.button,.categories li):is(:hover,:active){transform:none}.motion-toggle{display:none}
}