/* An illustrative integration story; no live activity or measured results. */
.hero-moving .hero-main{grid-template-columns:minmax(0,1fr) 425px;gap:40px;align-items:center;padding-block:22px 26px}
.hero-moving{padding-top:32px}
.hero-moving .hero-description{color:var(--text)}
.hero-moving h1{font-size:clamp(64px,6.35vw,99px);letter-spacing:-4.8px}
.integration-visual{margin:0;min-width:0;color:var(--accent);position:relative;align-self:center;container-type:inline-size;animation:arrive .8s .12s both;--input-web:#c5adeb;--input-cloud:#95bdf5;--input-work:#81cfda;--input-intelligence:#dfba7c}

html[data-theme=light] .integration-visual{--input-web:#70518e;--input-cloud:#2e609b;--input-work:#186877;--input-intelligence:#80571f}
.integration-scene{position:relative;aspect-ratio:480/290;margin-block:10px 12px;isolation:isolate}
.scene-connections{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.scene-wires{fill:none;stroke:var(--line);stroke-width:1.1}
.flow-web{--flow-accent:var(--input-web)}.flow-cloud{--flow-accent:var(--input-cloud)}.flow-work{--flow-accent:var(--input-work)}.flow-intelligence{--flow-accent:var(--input-intelligence)}.flow-output{--flow-accent:var(--accent)}
.scene-paths,.scene-afterglows{fill:none;stroke-width:1.5;stroke-linecap:round}
.scene-afterglows use{stroke:var(--flow-accent)}.scene-afterglows .flow-input{opacity:calc(.7 * var(--input-afterglow,0))}.scene-afterglows .flow-output{opacity:calc(.8 * var(--output-afterglow,0))}
.scene-paths use{stroke:var(--flow-accent);opacity:.7}.scene-paths .flow-output{opacity:calc(.8 * var(--output-strength,0))}.scene-pulses use{stroke:var(--flow-accent);opacity:.95}.scene-trails use{stroke:var(--flow-accent)}
.scene-paths .flow-input{stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--input-progress,0));opacity:calc(.7 * var(--input-strength,1))}
.scene-paths .flow-output{stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--output-progress,0))}
.scene-trails{fill:none;stroke-width:7;stroke-linecap:round;opacity:.16}
.scene-trails .flow-input{stroke-dasharray:.16 1;stroke-dashoffset:calc(.16 - var(--input-progress,0));opacity:var(--input-pulse-strength,0)}
.scene-trails .flow-output{stroke-dasharray:.16 1;stroke-dashoffset:calc(.16 - var(--output-progress,0))}
.scene-pulses{fill:none;stroke-width:3;stroke-linecap:round}
.scene-pulses .flow-input{stroke-dasharray:.055 1;stroke-dashoffset:calc(.055 - var(--input-progress,0));opacity:calc(.95 * var(--input-pulse-strength,0))}
.scene-pulses .flow-output{stroke-dasharray:.055 1;stroke-dashoffset:calc(.055 - var(--output-progress,0));stroke:color-mix(in srgb,var(--flow-accent) 78%,var(--text));stroke-width:3.5;opacity:var(--delivery-strength,0)}
.scene-trails .flow-output{opacity:var(--delivery-strength,0)}
.integration-visual:not([data-input-phase=input]) :is(.scene-pulses,.scene-trails) .flow-input,.integration-visual:not([data-output-phase=output]) :is(.scene-pulses,.scene-trails) .flow-output{display:none}
.scene-node{position:absolute;transform:translate(-50%,-16px);display:flex;flex-direction:column;align-items:center;gap:7px;width:112px;text-align:center;font-size:12px;line-height:1.35;font-weight:600;color:var(--text);transition:color .5s}
.scene-source{left:14.5833%}.source-web{top:13.9535%}.source-cloud{top:36.6279%}.source-work{top:59.3023%}.source-intelligence{top:81.9767%}
.scene-outcome{left:88.125%;width:112px}.outcome-journey{top:20.6395%}.outcome-work{top:49.4186%}.outcome-decisions{top:77.6163%}
.scene-icon{width:32px;height:32px;border:1px solid var(--line);border-radius:10px;background:var(--bg);display:grid;place-items:center;transition:background .5s,border-color .5s,color .5s,box-shadow .5s}.scene-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}.scene-outcome .scene-icon{border-radius:50%;width:29px;height:29px;margin-top:1.5px;margin-bottom:1.5px}
.scene-core{position:absolute;left:51.0417%;top:47.9651%;transform:translate(-50%,-50%);width:34%;height:94px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:var(--bg);isolation:isolate}
.core-wordmark{display:inline-flex;align-items:baseline;white-space:nowrap;font:800 25px/1 var(--heading);letter-spacing:-1.4px;color:var(--text)}
.core-brand-dot{font-size:33px;line-height:0;color:var(--accent)}
.core-label{max-width:100%;font:600 13px/1.45 var(--heading);letter-spacing:-.2px;color:var(--muted);text-align:center}
.core-signal{position:absolute;bottom:6px;left:32%;right:32%;height:2px;background:var(--line);border-radius:2px;overflow:hidden}
.core-signal::after{content:"";position:absolute;inset-block:0;left:calc(var(--core-progress,0) * 100%);width:24%;background:var(--accent);transform:translateX(-50%);opacity:var(--core-energy,0)}
.source-web{--route-accent:var(--input-web)}.source-cloud{--route-accent:var(--input-cloud)}.source-work{--route-accent:var(--input-work)}.source-intelligence{--route-accent:var(--input-intelligence)}.scene-outcome{--route-accent:var(--accent)}
.scene-source{--node-accent:var(--route-accent);--node-tint:6%}
.integration-visual:is([data-input-phase=input],[data-input-phase=complete]) .scene-source,.integration-visual[data-delivered=true] .scene-outcome{color:var(--text);--node-accent:var(--route-accent);--node-tint:12%}
.scene-node .scene-icon{color:var(--node-accent,var(--muted));border-color:color-mix(in srgb,var(--node-accent,var(--line)) 70%,var(--bg));background:color-mix(in srgb,var(--node-accent,var(--bg)) var(--node-tint,0%),var(--bg))}
.integration-story{margin-inline:8px;border-top:1px solid var(--line);padding-top:4px}
.story-controls{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.story-step{position:relative;display:flex;align-items:center;gap:8px;justify-content:flex-start;padding:13px 0 14px;min-height:44px;background:none;border:0;border-bottom:1px solid var(--line);font-size:12px;font-weight:600;color:var(--text);transition:color .3s}.story-number{font-size:9px;font-variant-numeric:tabular-nums;color:inherit}.story-step:hover{color:var(--text)}.story-step[aria-pressed=true]{color:var(--accent)}.story-step[aria-pressed=true] .story-number{color:inherit}.story-step i{position:absolute;bottom:-1px;height:2px;background:var(--accent);left:0;right:0;transform-origin:left;transform:scaleX(0);opacity:0;transition:opacity .3s}.story-step[aria-pressed=true] i{opacity:1;transform:scaleX(var(--step-progress))}
.story-step[data-complete=true] i{opacity:.45;transform:scaleX(1)}
.story-narration{display:grid;align-items:start;min-height:58px;padding-top:12px;position:relative}.story-narration strong{font-size:15px;font-weight:650;line-height:1.4;letter-spacing:-.2px;color:color-mix(in srgb,var(--gold) 38%,var(--text));display:block}.story-narration span{font-size:13px;font-weight:550;line-height:1.65;color:var(--text);display:block;margin-top:6px}.story-narration>p{grid-area:1/1;min-width:0;animation:narration-in .45s ease both}.story-narration>p[hidden]{display:block!important;visibility:hidden;pointer-events:none;animation:none}
@keyframes narration-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:1550px){.hero-moving .hero-main{grid-template-columns:minmax(0,1fr) 460px;gap:55px;padding-block:54px 57px}.hero-moving h1{font-size:97px}}
@media(max-width:1200px){.hero-moving .hero-main{grid-template-columns:minmax(0,1fr) 360px;gap:25px}.hero-moving h1{font-size:clamp(57px,6.25vw,76px);letter-spacing:-3.8px}}
@media(max-width:960px) and (min-width:701px){.hero-moving .hero-main{grid-template-columns:minmax(0,1fr) 300px;gap:20px}.hero-moving h1{font-size:clamp(43px,6.4vw,61px);letter-spacing:-3px}.hero-moving .hero-description{font-size:14px}.hero-moving .hero-actions{gap:17px}.hero-moving .hero-actions .button{font-size:12px;gap:23px;padding:14px 17px}}
@container(max-width:380px){.integration-scene{width:100%;aspect-ratio:480/400;min-height:320px}.scene-node{font-size:12px;width:92px;gap:5px}.scene-outcome{width:104px;left:87%}.scene-icon{width:28px;height:28px}.scene-node{transform:translate(-50%,-14px)}.scene-outcome .scene-icon{width:26px;height:26px;margin-block:1px}.scene-icon svg{width:16px;height:16px}.scene-core{height:90px;gap:7px}.core-wordmark{font-size:19px;letter-spacing:-1.1px}.core-brand-dot{font-size:26px}.core-label{font-size:12px;max-width:100%}.core-signal{bottom:2px}.story-controls{gap:10px}.story-step{font-size:12px;gap:5px}.story-narration strong{font-size:14px}.story-narration span{font-size:12px}.story-narration{min-height:74px}}
@media(max-width:700px){.hero-moving .hero-main{grid-template-columns:1fr;gap:38px;padding-block:31px 30px}.hero-moving h1{font-size:clamp(43px,8.95vw,63px);letter-spacing:-1.65px}.integration-visual{width:100%;max-width:430px;margin-inline:auto}.hero-moving .hero-bottom>span{max-width:160px}.hero-moving .hero-description{max-width:470px}.integration-scene{margin-block:20px 18px}.story-narration{min-height:74px}}
@media(max-width:380px){.hero-moving h1{font-size:40px}}
@media(prefers-reduced-motion:reduce){.integration-visual,.integration-visual *{animation:none!important;transition:none!important}.scene-pulses,.scene-trails,.scene-afterglows{display:none}.scene-paths .flow-input,.scene-paths .flow-output{stroke-dashoffset:0}.story-step[aria-pressed=true] i{transform:scaleX(1)}}

/* Soft light follows the same clock as the routes; brand colours stay fixed. */
.scene-core::before{content:"";position:absolute;inset:-28px -32px;z-index:-1;background:radial-gradient(ellipse closest-side at 35% 48%,color-mix(in srgb,var(--accent) 20%,transparent),transparent 100%),radial-gradient(ellipse closest-side at 67% 57%,color-mix(in srgb,var(--teal) 12%,transparent),transparent 100%),radial-gradient(ellipse closest-side at 52% 60%,color-mix(in srgb,var(--gold) 9%,transparent),transparent 100%);opacity:var(--core-energy,0);transform:scale(calc(.9 + var(--core-bloom,0) * .12));pointer-events:none}
.core-signal{box-shadow:0 0 calc(9px * var(--core-energy,0)) color-mix(in srgb,var(--accent) 26%,transparent)}
.scene-outcome .scene-icon{position:relative;box-shadow:0 0 calc(20px * var(--arrival-strength,0)) color-mix(in srgb,var(--route-accent) 25%,transparent)}
.scene-outcome .scene-icon::after{content:"";position:absolute;inset:-4px;border:1px solid var(--route-accent);border-radius:inherit;opacity:calc(var(--arrival-strength,0) * .4);transform:scale(calc(1 + var(--arrival-progress,0) * .45));pointer-events:none}
@media(prefers-reduced-motion:reduce){.scene-core::before{opacity:.65;transform:none}.core-signal::after{left:0;width:100%;transform:none}.scene-outcome .scene-icon{box-shadow:none}.scene-outcome .scene-icon::after{display:none}}

.hero-moving .hero-intro .eyebrow{font:600 12px/1.6 var(--heading);letter-spacing:.1px;color:var(--muted)}
@media(max-width:700px){.hero-moving .hero-intro .eyebrow{font-size:11px;letter-spacing:.1px}}