/* Expertise cards: blue story panels. Cards stay white; only the illustration panel is blue. */
.saas-scroll-section .card-right .xp-scene {
    position: relative; width: 100%; max-width: 470px; margin: 0; border-radius: 20px; overflow: hidden;
    background: radial-gradient(ellipse at 85% 8%, #378cff66, transparent 52%), linear-gradient(145deg, #1d6bf3, #104dcc);
    box-shadow: 0 24px 44px -26px #1043a2b3, inset 0 0 0 1px #ffffff1f;
}
.xp-scene::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(#ffffff08 1px, transparent 1px), linear-gradient(90deg, #ffffff08 1px, transparent 1px); background-size: 32px 32px; pointer-events: none; }
.xp-scene svg { position: relative; display: block; width: 100%; height: auto; overflow: visible; }
.xp-scene text { font-family: 'DM Sans', -apple-system, sans-serif; fill: #f3f8ff; }

/* Palette */
.xp-panel { fill: #1454c9; stroke: #8dbbff; stroke-opacity: .6; }
.xp-soft { fill: #3d83ee; fill-opacity: .55; stroke: #aad0ff; stroke-opacity: .3; }
.xp-bright { fill: #a6d2ff; }
.xp-white { fill: #fff; }
.xp-wire { fill: none; stroke: #cfe3ff; stroke-opacity: .45; stroke-dasharray: 4 4; }
.xp-rule { fill: none; stroke: #a0c9ff; stroke-opacity: .4; }
.xp-line { fill: none; stroke: #e6f1ff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.xp-route { fill: none; stroke: #b4d8ff; stroke-width: 1.4; stroke-dasharray: 4 5; animation: xp-flow 6s linear infinite; }
.xp-label { font-size: 12px; font-weight: 500; }
.xp-micro { font-size: 9px; letter-spacing: 1px; fill: #d3e7ff !important; }
.xp-small { font-size: 10px; fill: #d6e8ff !important; }
.xp-dark { font-size: 11px; font-weight: 600; fill: #0f3a8a !important; }
.xp-big { font-size: 19px; font-weight: 600; letter-spacing: -.3px; }
.xp-badge { font-size: 9px; font-weight: 700; fill: #1d4ed8 !important; }

/* Step reveals: .st + .stN appears when the scene has class sN. */
.xp-scene .st { opacity: 0; transform-box: fill-box; transform-origin: center; transition: opacity .45s ease, transform .7s cubic-bezier(.2,.8,.2,1), fill .4s ease; }
.xp-scene .xp-grow { transform: scaleX(0); transform-origin: left center; }
.xp-scene .xp-rise { transform: scaleY(0); transform-origin: center bottom; }
.xp-scene .xp-pop { transform: scale(.4); }
.xp-scene .xp-up { transform: translateY(12px); }
.xp-scene .xp-left { transform: translateX(-16px); }
.xp-scene.s1 .st1, .xp-scene.s2 .st2, .xp-scene.s3 .st3, .xp-scene.s4 .st4, .xp-scene.s5 .st5, .xp-scene.s6 .st6 { opacity: 1; transform: none; }
.xp-scene .d1 { transition-delay: .12s; } .xp-scene .d2 { transition-delay: .24s; } .xp-scene .d3 { transition-delay: .36s; } .xp-scene .d4 { transition-delay: .48s; } .xp-scene .d5 { transition-delay: .6s; }

/* Line drawing */
.xp-scene .xp-draw { stroke-dasharray: 700; stroke-dashoffset: 700; transition: stroke-dashoffset 1.3s ease; }
.xp-scene.s3 .xp-draw-s3, .xp-scene.s1 .xp-draw-s1 { stroke-dashoffset: 0; }

/* Movers */
.xp-cursor, .xp-task, .xp-deal { transition: transform 1s cubic-bezier(.6,0,.2,1); }
.xp-cursor { transform: translate(410px, 318px); }
.xp-scene.s3 .xp-cursor { transform: translate(232px, 264px); }
.xp-cursor path { transform-box: fill-box; transform-origin: top left; transition: transform .2s ease; }
.xp-scene.s4 .xp-cursor path { transform: scale(.82); }
.xp-scene.s4 .xp-btn-target { fill: #fff; }
.xp-scene.s4 .xp-task { transform: translateY(90px); }
.xp-scene.s5 .xp-task { transform: translateY(180px); }
.xp-scene.s5 .xp-task rect { fill: #fff; }
.xp-scene.s2 .xp-deal { transform: translateX(138px); }
.xp-scene.s3 .xp-deal { transform: translateX(276px); }
.xp-scene.s3 .xp-deal rect.xp-bright { fill: #fff; }
.xp-scene.s3 .xp-typing, .xp-scene.s4 .xp-swap-out { opacity: 0 !important; }

/* Ambient motion */
.xp-typing circle { animation: xp-blink 1.2s ease-in-out infinite; }
.xp-typing circle:nth-child(3) { animation-delay: .2s; } .xp-typing circle:nth-child(4) { animation-delay: .4s; }
.xp-live { transform-box: fill-box; transform-origin: center; animation: xp-pulse 1.6s ease-out infinite; }
.xp-ring { fill: none; stroke: #d6ebff; stroke-width: 1.4; transform-box: fill-box; transform-origin: center; opacity: 0; }
.xp-scene.s2 .xp-ring { animation: xp-ring 2.2s ease-out infinite; }
.xp-scene.s2 .xp-ring + .xp-ring { animation-delay: 1.1s; }
.xp-flow circle { fill: #e6f4ff; opacity: 0; }
.xp-scene.s3 .xp-flow circle { animation: xp-fall 2.4s linear infinite; }
.xp-flow circle:nth-child(2) { animation-delay: .4s !important; } .xp-flow circle:nth-child(3) { animation-delay: .8s !important; }
.xp-flow circle:nth-child(4) { animation-delay: 1.2s !important; } .xp-flow circle:nth-child(5) { animation-delay: 1.6s !important; } .xp-flow circle:nth-child(6) { animation-delay: 2s !important; }

@keyframes xp-flow { to { stroke-dashoffset: -90; } }
@keyframes xp-blink { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
@keyframes xp-pulse { 0% { transform: scale(1); opacity: 1; } 70% { transform: scale(2.2); opacity: 0; } 100% { opacity: 0; } }
@keyframes xp-ring { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes xp-fall { 0% { transform: translate(0, 0); opacity: 0; } 12% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translate(var(--dx), 168px); opacity: 0; } }

.xp-scene:not(.is-on) * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { .xp-scene *, .xp-scene .st { animation: none !important; transition: none !important; } }
@media (max-width: 768px) { .saas-scroll-section .card-right .xp-scene { max-width: 100%; border-radius: 16px; } }