/* FieldOps AI — "A day with FieldOps" story (platform page). Normal flow, no pinning. */
.ds{--ds-cw:880;--ds-ch:560;position:relative;background:#071230;color:#fff;overflow:hidden;padding:30px 0 110px}
.ds-bg{position:absolute;inset:0;pointer-events:none}
.ds-bg i{position:absolute;border-radius:50%;filter:blur(90px);opacity:.9}
.ds-bg .a{width:640px;height:640px;left:-10%;top:2%;background:radial-gradient(circle,rgba(9,105,248,.45),transparent 65%)}
.ds-bg .b{width:620px;height:620px;right:-10%;top:38%;background:radial-gradient(circle,rgba(121,87,232,.38),transparent 65%)}
.ds-bg .c{width:560px;height:560px;left:-6%;bottom:-6%;background:radial-gradient(circle,rgba(27,199,223,.22),transparent 65%)}
.ds-bg span{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:56px 56px;-webkit-mask:linear-gradient(#000,transparent 85%);mask:linear-gradient(#000,transparent 85%)}
.ds-wrap{position:relative;z-index:2;width:min(1320px,calc(100% - 48px));margin:auto}
.ds-head{text-align:center;padding:30px 0 6px}
.ds-kick{display:inline-block;padding:7px 16px;border-radius:99px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.07);color:#9fc2ff;font-size:12.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.ds-row{position:relative;display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.38fr);gap:72px;align-items:center;padding:72px 0;perspective:1500px}
.ds-row:nth-of-type(odd){grid-template-columns:minmax(0,1.38fr) minmax(0,.72fr)}
.ds-row:nth-of-type(odd) .ds-text{order:2}
.ds-text{opacity:0;transform:translateX(-90px);transition:opacity 1s cubic-bezier(.22,1,.36,1),transform 1.2s cubic-bezier(.22,1,.36,1)}
.ds-row.on .ds-text{opacity:1;transform:none}
.ds-time{font-size:clamp(46px,5.2vw,76px);font-weight:900;letter-spacing:-.06em;line-height:1;font-variant-numeric:tabular-nums;background:linear-gradient(90deg,#fff,#9fc2ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.ds-role{display:inline-flex;align-items:center;gap:8px;margin:16px 0 0;padding:6px 14px;border-radius:99px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.07);color:#9fc2ff;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.ds-role i{width:8px;height:8px;border-radius:50%;background:#20c895;box-shadow:0 0 0 5px rgba(32,200,149,.2)}
.ds-text h2{margin:20px 0 14px;color:#fff;font-size:clamp(28px,2.8vw,42px);line-height:1.06;letter-spacing:-.05em}
.ds .ds-text p{margin:0;color:#b9c8e6;font-size:17px;line-height:1.65;max-width:430px}
/* stage */
.ds-stage{position:relative;justify-self:center;width:100%}
.ds-canvas{position:absolute;left:0;top:0;width:calc(var(--ds-cw)*1px);height:calc(var(--ds-ch)*1px);transform-origin:0 0;font-size:15px;color:#0b1d45}
.ds-scene{position:absolute;inset:0;opacity:0;transform:scale(.94) translateY(40px);transition:opacity 1s cubic-bezier(.22,1,.36,1),transform 1.2s cubic-bezier(.22,1,.36,1);pointer-events:none}
.ds-scene.on{opacity:1;transform:none}
.ds-scene.on .fx{animation:dsIn 1s cubic-bezier(.22,1,.36,1) backwards;animation-delay:calc(var(--n,0)*.16s + .35s)}
.ui{background:#fff;border-radius:18px;box-shadow:0 30px 70px -20px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.5) inset;position:relative}
.ui h4{margin:0;font-size:14px;font-weight:800;letter-spacing:-.01em}
.sm{font-size:12px;color:#62718d;font-weight:600}
.pill{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:99px;font-size:12px;font-weight:800;white-space:nowrap}
.pill.p{background:#efe9ff;color:#6a47e0}.pill.k{background:#e5f0ff;color:#1268f5}.pill.o{background:#fff3df;color:#c77a00}.pill.g{background:#e3f8ef;color:#0f9d6a}
.up{color:#0f9d6a;font-weight:800}.dn{color:#e5384b;font-weight:800}
.chip{position:absolute;z-index:6;display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:14px;background:#fff;color:#0b1d45;font-size:13px;font-weight:800;box-shadow:0 18px 40px -12px rgba(0,0,0,.5);white-space:nowrap}
.chip i{width:9px;height:9px;border-radius:50%;background:#20c895;box-shadow:0 0 0 4px rgba(32,200,149,.2)}
.chip.bl i{background:#1268f5;box-shadow:0 0 0 4px rgba(18,104,245,.2)}.chip.pu i{background:#7d5cf5;box-shadow:0 0 0 4px rgba(125,92,245,.2)}.chip.am i{background:#ffb83e;box-shadow:0 0 0 4px rgba(255,184,62,.25)}
.ds-scene.on .chip{animation:dsPop .6s cubic-bezier(.3,1.5,.5,1) backwards;animation-delay:var(--d,2s)}
.ds-scene.on .chip.fl{animation:dsPop .6s cubic-bezier(.3,1.5,.5,1) backwards var(--d,2s),dsFloat 5s ease-in-out calc(var(--d,2s) + .6s) infinite}
/* cursor */
.cur{position:absolute;z-index:8;width:26px;height:26px;opacity:0;pointer-events:none;filter:drop-shadow(0 4px 6px rgba(0,0,0,.4))}
.cur svg{width:100%;height:100%}
.cur:after{content:"";position:absolute;left:-10px;top:-10px;width:22px;height:22px;border-radius:50%;border:2px solid #fff;opacity:0}
.ds-scene.on .cur{animation:dsCur 3.2s cubic-bezier(.5,0,.2,1) .8s forwards}
.ds-scene.on .cur:after{animation:dsClick .5s 2.6s}

/* scene 0 — stores */
.s0{display:flex;flex-direction:column;gap:16px;padding:6px 0}
.kp{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.kp .ui{padding:16px 18px;border-bottom:4px solid var(--c)}
.kp b{display:block;font-size:34px;letter-spacing:-.05em;line-height:1.1}
.kp .sm{text-transform:uppercase;letter-spacing:.06em;font-size:11px;font-weight:800}
.tb{flex:1;padding:8px 0;overflow:hidden}
.tr{display:grid;grid-template-columns:2fr .8fr .8fr 1.35fr;align-items:center;gap:10px;height:56px;padding:0 20px;font-size:14px;font-weight:700;background:#fff;position:relative}
.tr.h{height:38px;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:#62718d;font-weight:800;border-bottom:1px solid #e6eef8}
.ds-scene.on .tr.r{animation:dsSort 1.1s cubic-bezier(.65,0,.25,1) .9s backwards;border-bottom:1px solid #eef3fa}
.tr.r{border-bottom:1px solid #eef3fa}
.lg{display:flex;align-items:center;gap:11px}
.lg i{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;font-style:normal;font-size:12px;font-weight:900;color:#fff;background:var(--c);flex:none}
.lg small{display:block;color:#62718d;font-weight:600;font-size:11.5px}
.ds-scene.on .tr .pill{animation:dsPop .5s cubic-bezier(.3,1.5,.5,1) 2.1s backwards}
.tr.r.hot{background:linear-gradient(90deg,rgba(125,92,245,.09),transparent 70%)}

/* scene 1 — map */
.s1{display:grid;grid-template-columns:1fr 270px;gap:16px}
.mp{overflow:hidden;border-radius:18px;background:
 linear-gradient(115deg,transparent 41%,#a9d4f2 41.5%,#a9d4f2 51%,transparent 51.5%),
 repeating-linear-gradient(35deg,transparent 0 46px,rgba(255,255,255,.75) 46px 49px),
 repeating-linear-gradient(-55deg,transparent 0 62px,rgba(255,255,255,.65) 62px 65px),
 radial-gradient(circle at 30% 40%,#cfe8c3,transparent 45%),#e8f1e1}
.pin{position:absolute;width:26px;height:26px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--c);box-shadow:0 8px 14px -4px rgba(0,0,0,.35)}
.pin:after{content:"";position:absolute;inset:7px;border-radius:50%;background:#fff}
.ds-scene.on .pin{animation:dsDrop .6s cubic-bezier(.3,1.4,.5,1) backwards;animation-delay:calc(var(--n)*.09s + .3s)}
.pin.sel{width:34px;height:34px;z-index:3}.pin.sel:after{inset:9px}
.ds-scene.on .pin.sel:before{content:"";position:absolute;inset:-12px;border-radius:50%;border:3px solid #1268f5;animation:dsRing 1.6s 2.1s infinite}
.mcard{position:absolute;left:44%;top:12%;z-index:4;padding:10px 14px;display:flex;gap:10px;align-items:center;font-size:12.5px;font-weight:800}
.mcard i{width:36px;height:28px;border-radius:6px;background:linear-gradient(135deg,#1268f5,#1bc7df)}
.as{padding:16px;display:flex;flex-direction:column;gap:10px}
.as .rw{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:12px;background:#f5f9ff;font-size:13px;font-weight:800}
.as .rw em{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:11px;font-weight:900;background:var(--c);color:#0b1d45;flex:none}
.as .rw small{margin-left:auto;font-size:11.5px;color:#62718d;position:relative;height:16px;width:60px;text-align:right}
.as .rw small>span{position:absolute;right:0}
.ds-scene.on .as .rw.me{animation:dsHi 2.4s 2.7s both}
.ds-scene.on .as .rw.me small .o{animation:dsOut .3s 2.7s forwards}
.ds-scene.on .as .rw.me small .n{opacity:0;animation:dsInT .4s 2.8s forwards;color:#1268f5;font-weight:900}
.btn1{margin-top:auto;padding:12px;border-radius:12px;background:#1268f5;color:#fff;font-weight:800;text-align:center;font-size:14px}
.ds-scene.on .btn1{animation:dsPress .4s 2.6s}

/* scene 2 — phone */
.s2{display:grid;place-items:center}
.ph{width:270px;height:540px;border-radius:42px;background:#0b1d45;padding:10px;box-shadow:0 40px 80px -20px rgba(0,0,0,.7);position:relative}
.ph:before{content:"";position:absolute;left:50%;top:18px;width:74px;height:20px;margin-left:-37px;border-radius:12px;background:#0b1d45;z-index:3}
.phs{height:100%;border-radius:33px;background:#f3f8ff;padding:46px 16px 16px;display:flex;flex-direction:column;gap:10px;overflow:hidden}
.phs h4{font-size:19px;letter-spacing:-.03em}
.ph-st{display:flex;align-items:center;gap:10px;padding:11px;border-radius:14px;background:#fff;box-shadow:0 6px 16px -8px rgba(11,29,69,.25)}
.ph-st i{width:30px;height:30px;border-radius:10px;background:#1268f5;color:#fff;display:grid;place-items:center;font-style:normal;font-weight:900;font-size:13px}
.ph-st b{font-size:13.5px;display:block}
.ck{display:flex;align-items:center;gap:10px;padding:11px;border-radius:12px;background:#fff;font-size:13px;font-weight:700}
.ck u{width:22px;height:22px;border-radius:7px;border:2px solid #c9d6ea;display:grid;place-items:center;text-decoration:none;color:transparent;font-size:13px;font-weight:900;flex:none}
.ds-scene.on .ck u{animation:dsTick .35s forwards;animation-delay:calc(var(--n)*.7s + 1.2s)}
.ds-scene.on .ck{animation:dsIn .6s backwards;animation-delay:calc(var(--n)*.14s + .45s)}
.ph .cam{margin-top:auto;padding:13px;border-radius:14px;background:#1268f5;color:#fff;text-align:center;font-weight:800;font-size:14px}
.ds-scene.on .ph .cam{animation:dsPress .4s 2.6s}

/* scene 3 — proof */
.s3{display:grid;grid-template-columns:1.35fr 1fr;gap:18px;align-items:center}
.pho{padding:12px}
.pic{height:300px;border-radius:12px;position:relative;overflow:hidden;background:linear-gradient(180deg,#dfe8f5 0,#eef3fa 55%,#c9d3e3 55%)}
.pic .sh{position:absolute;left:5%;right:5%;height:8px;background:#aeb9cc;border-radius:4px}
.pic .sh{display:block}
.pic .sh i{position:absolute;bottom:8px;left:var(--l);width:var(--w);height:var(--h);border-radius:5px 5px 2px 2px;background:var(--c)}
.scan{position:absolute;left:0;right:0;top:0;height:3px;background:#1bc7df;box-shadow:0 0 22px 6px rgba(27,199,223,.7);opacity:0}
.ds-scene.on .scan{animation:dsScan 1.6s 1s ease-in-out}
.tg{position:absolute;left:8%;top:18%;width:120px;height:90px;border:2px solid #20c895;border-radius:10px;opacity:0}
.ds-scene.on .tg{animation:dsTg .5s 2.1s forwards}
.tg:after{content:"✓ 12 facings";position:absolute;left:-2px;top:-26px;padding:3px 9px;border-radius:8px;background:#20c895;color:#fff;font-size:11.5px;font-weight:800;white-space:nowrap}
.side3{display:flex;flex-direction:column;gap:16px}
.side3 .ui{padding:16px 18px}
.big{font-size:44px;font-weight:900;letter-spacing:-.05em;line-height:1}
.ob{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:800;margin-top:10px}
.ob u{flex:1;height:8px;border-radius:8px;background:#e8eef8;overflow:hidden;text-decoration:none}
.ob u s{display:block;height:100%;width:0;border-radius:8px;background:linear-gradient(90deg,#7d5cf5,#1268f5)}
.ds-scene.on .ob u s{animation:dsW 1.2s 2.3s cubic-bezier(.2,.8,.2,1) forwards}

/* scene 4 — impact */
.s4{display:grid;grid-template-columns:260px 1fr;grid-template-rows:1fr auto;gap:16px}
.ring{padding:20px;display:grid;place-items:center;position:relative}
.ring svg{width:190px;height:190px}
.ring .arc{stroke-dasharray:314;stroke-dashoffset:314}
.ds-scene.on .ring .arc{animation:dsArc 1.8s .5s cubic-bezier(.2,.8,.2,1) forwards}
.ring div{position:absolute;text-align:center}
.ring b{display:block;font-size:42px;letter-spacing:-.05em;line-height:1}
.bars{padding:20px 22px;display:flex;flex-direction:column}
.bars .top{display:flex;justify-content:space-between;align-items:flex-start}
.bars .bg{flex:1;display:flex;align-items:flex-end;gap:12px;margin-top:14px;border-bottom:1px solid #e6eef8}
.bars .bg i{flex:1;border-radius:8px 8px 0 0;background:linear-gradient(180deg,#9cc4ff,#e5f0ff);height:var(--h);transform-origin:bottom}
.bars .bg i.a{background:linear-gradient(180deg,#1268f5,#1bc7df)}
.ds-scene.on .bars .bg i{animation:dsGrow .9s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(var(--n)*.1s + .5s)}
.nx{grid-column:1/-1;padding:14px 20px;display:flex;align-items:center;gap:14px;font-size:14px;font-weight:800}
.nx i{width:34px;height:34px;border-radius:10px;background:#efe9ff;color:#6a47e0;display:grid;place-items:center;font-style:normal}

/* keyframes */
@keyframes dsIn{from{opacity:0;transform:translateY(22px) scale(.96)}}
@keyframes dsPop{from{opacity:0;transform:scale(.4)}}
@keyframes dsFloat{50%{transform:translateY(-8px)}}
@keyframes dsSort{from{transform:translateY(var(--y));z-index:2;box-shadow:0 10px 30px -10px rgba(11,29,69,.35)}}
@keyframes dsDrop{from{opacity:0;transform:translateY(-60px) rotate(-45deg)}}
@keyframes dsRing{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.5);opacity:0}}
@keyframes dsHi{0%,100%{background:#f5f9ff}30%,70%{background:#e3f0ff}}
@keyframes dsOut{to{opacity:0;transform:translateY(-8px)}}
@keyframes dsInT{from{opacity:0;transform:translateY(8px)}to{opacity:1}}
@keyframes dsPress{50%{transform:scale(.94)}}
@keyframes dsTick{to{background:#20c895;border-color:#20c895;color:#fff}}
@keyframes dsScan{0%{opacity:1;top:0}100%{opacity:0;top:100%}}
@keyframes dsW{to{width:var(--w)}}
@keyframes dsArc{to{stroke-dashoffset:88}}
@keyframes dsGrow{from{transform:scaleY(0)}}
@keyframes dsBlink{50%{opacity:.25}}
@keyframes dsRoll{from{opacity:0;transform:translateY(.35em)}}
@keyframes dsCur{0%{opacity:0;left:var(--x0);top:var(--y0)}12%{opacity:1}55%{left:var(--x1);top:var(--y1)}100%{opacity:1;left:var(--x1);top:var(--y1)}}
@keyframes dsClick{0%{opacity:1;transform:scale(.4)}100%{opacity:0;transform:scale(2.2)}}

/* compact (phones) */
.ds.compact{--ds-cw:520;--ds-ch:600}
.ds.compact .dk{display:none!important}
.ds.compact .s1{grid-template-columns:1fr;grid-template-rows:1fr auto}
.ds.compact .tr{grid-template-columns:2fr .8fr 1.35fr}
.ds.compact .s3{grid-template-columns:1fr}
.ds.compact .pic{height:240px}
.ds.compact .s4{grid-template-columns:1fr;grid-template-rows:auto 1fr auto}
.ds.compact .ring{padding:12px}.ds.compact .ring svg{width:150px;height:150px}
@media(max-width:900px){
 .ds-wrap{width:calc(100% - 36px)}
 .ds-row,.ds-row:nth-of-type(odd){grid-template-columns:1fr;gap:22px;padding:46px 0}
 .ds-row:nth-of-type(odd) .ds-text{order:0}
 .ds-time{font-size:44px}.ds-text h2{font-size:26px}.ds .ds-text p{font-size:15px}
 }
@media(prefers-reduced-motion:reduce){.ds *{animation-duration:.01s!important;animation-delay:0s!important;transition-duration:.01s!important}.ds-text{opacity:1;transform:none}}
.fo-phero{padding-bottom:56px}
@keyframes dsTg{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}

/* left → right motion: diagonal entrance, drifting parallax, route + travelling marker */
.ds-stage{opacity:0;transform:translate(-170px,70px) rotateY(18deg) rotate(-2.5deg) scale(.9);transform-origin:0 60%;translate:var(--px,0px) 0;transition:opacity 1.1s cubic-bezier(.22,1,.36,1),transform 1.5s cubic-bezier(.22,1,.36,1)}
.ds-row.on .ds-stage{opacity:1;transform:none}
.ds-route{position:absolute;left:0;top:0;width:100%;height:100%;z-index:1;pointer-events:none;overflow:visible}
.ds-route .base{fill:none;stroke:rgba(159,194,255,.22);stroke-width:2;stroke-dasharray:3 11;stroke-linecap:round}
.ds-route .done{fill:none;stroke:url(#dsg);stroke-width:3.5;stroke-linecap:round;filter:drop-shadow(0 0 8px rgba(90,162,255,.9))}
.ds-route .nd{fill:#071230;stroke:#3b5fa0;stroke-width:2.5;transition:.5s}
.ds-route .nd.hit{fill:#5aa2ff;stroke:#cfe2ff;filter:drop-shadow(0 0 10px rgba(90,162,255,1))}
.ds-mark{position:absolute;left:0;top:0;z-index:4;pointer-events:none;display:flex;align-items:center;gap:10px;margin:-13px 0 0 -13px;will-change:transform}
.ds-mark i{width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 0 0 6px rgba(90,162,255,.35),0 0 30px 8px rgba(90,162,255,.8);animation:dsMk 1.8s ease-in-out infinite}
.ds-mark b{padding:5px 11px;border-radius:99px;background:#fff;color:#0b1d45;font-size:13px;font-weight:900;letter-spacing:.02em;font-variant-numeric:tabular-nums;box-shadow:0 10px 24px -8px rgba(0,0,0,.6)}
@keyframes dsMk{50%{box-shadow:0 0 0 12px rgba(90,162,255,.15),0 0 40px 12px rgba(90,162,255,.9)}}
/* light sweep across each card, left to right */
.ds-canvas .ui:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.85) 50%,transparent 62%) -160% 0/250% 100% no-repeat;mix-blend-mode:soft-light}
.ds-scene.on .ui:after{animation:dsSweep 1.6s cubic-bezier(.4,0,.2,1) calc(var(--n,0)*.16s + 1s) both}
@keyframes dsSweep{to{background-position:160% 0}}
@media(max-width:900px){.ds-row,.ds-row:nth-of-type(odd){padding-left:24px}.ds-stage{transform:translate(-80px,40px) rotateY(10deg) scale(.94);translate:0 0}.ds-mark b{display:none}}
@media(prefers-reduced-motion:reduce){.ds-stage{transform:none;opacity:1;translate:0 0}}