/* BASF-YPC case: four-step flow, benefits band, smart placement animation, 3D warehouse */
.bf-band{background:linear-gradient(135deg,#0B2438 0%,#123B5C 60%,#1a5a73 100%);color:#fff;position:relative;overflow:hidden}
.bf-band:before{content:"";position:absolute;right:-8%;top:-30%;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,#3C974C55,transparent 65%);pointer-events:none}
.bf-band .head{margin-bottom:clamp(28px,4vw,48px)}
.bf-band h2{color:#fff}
.bf-band .eyebrow{color:var(--mint)}
.bf-band .head-note{color:#cfe3f0}
.bf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;position:relative}
.bf-card{background:#ffffff12;border:1px solid #ffffff2e;border-radius:var(--radius);padding:24px 22px 22px;backdrop-filter:blur(2px);transition:transform .3s var(--ease),background .3s}
.bf-card:hover{transform:translateY(-3px);background:#ffffff1c}
.bf-card .n{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--green);color:#fff;font-weight:800;font-size:15px;margin-bottom:14px}
.bf-card h3{font-size:clamp(18px,1.7vw,22px);line-height:1.25;margin:0 0 8px;color:#fff}
.bf-card p{margin:0;color:#cfe3f0;font-size:15px;line-height:1.55}
.bf-card.big{grid-column:span 1;background:linear-gradient(160deg,#3C974C,#2b7a3b);border-color:#7CCB8B88}
.bf-card.big p{color:#eaf7ec}
.bf-card.big .n{background:#fff;color:var(--green)}

.bf-flow .head{margin-bottom:clamp(24px,3vw,40px)}
.bf-split{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);gap:24px;align-items:stretch}
.bf-split{margin-bottom:44px}
.bf-split figure{margin:0;position:relative;display:flex}
.bf-split video{width:100%;height:100%;object-fit:cover;border-radius:var(--radius);display:block;background:#000}
.bf-split .video-caption{position:absolute;left:0;top:calc(100% + 10px);margin:0}
.bf-split>p.video-caption{position:static}
.bf-pane{background:linear-gradient(170deg,#0B2438,#123B5C);color:#fff;border-radius:var(--radius);padding:clamp(22px,2.4vw,32px);display:flex;flex-direction:column;gap:18px;box-shadow:0 18px 50px #0B243833}
.bf-pane .eyebrow{color:var(--mint);margin:0}
.bf-pane ul{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.bf-pane li{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;opacity:.35;transform:translateX(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.bf-pane.in li{opacity:1;transform:none}
.bf-pane.in li:nth-child(2){transition-delay:.18s}
.bf-pane.in li:nth-child(3){transition-delay:.36s}
.bf-pane li:before{content:"✓";display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--green);color:#fff;font-weight:800;font-size:15px}
.bf-pane li b{display:block;font-size:clamp(17px,1.5vw,20px);line-height:1.25;margin-bottom:4px}
.bf-pane li span{display:block;color:#cfe3f0;font-size:14.5px;line-height:1.5}
.bf-pane li.no:before{content:"✕";background:#d8483e}
.bf-flow .case-steps{margin-top:24px}

/* ---- smart placement stage ---- */
.sp{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:clamp(18px,2.4vw,32px);box-shadow:0 18px 50px #234E7014}
.sp-top{display:grid;grid-template-columns:minmax(150px,.7fr) minmax(0,.55fr) minmax(0,1.6fr);gap:clamp(14px,2vw,28px);align-items:center}
.sp-factors{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.sp-factors li{background:var(--navy2);color:#fff;border:2px solid #fff;outline:1px solid #234E7033;padding:8px 12px;font-size:13.5px;font-weight:600;border-radius:4px;transform:translateX(-26px);opacity:0;transition:transform .5s var(--ease),opacity .5s,background .3s,box-shadow .3s}
.sp.run .sp-factors li{transform:none;opacity:1}
.sp-factors li.on{background:var(--green);box-shadow:0 0 0 4px #3C974C33}
.sp-factors li.done{background:var(--ink)}
.sp-engine{display:grid;gap:12px;justify-items:center;text-align:center}
.sp-live{background:var(--green);color:#fff;font-weight:800;font-size:12px;line-height:1.35;padding:8px 10px;border-radius:4px;letter-spacing:.02em}
.sp-arrow{width:100%;background:var(--blue);color:#fff;font-weight:700;font-size:14px;line-height:1.3;padding:16px 26px 16px 12px;clip-path:polygon(0 0,82% 0,100% 50%,82% 100%,0 100%);min-height:70px;display:grid;align-items:center}
.sp-count{font-size:12px;color:var(--muted)}
.sp-count b{display:block;font-size:26px;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.1}
.sp-rack{position:relative}
.sp-dock{position:absolute;left:0;bottom:-30px;font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.08em}
.sp-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:5px;padding:12px;background:#EEF3F6;border-radius:10px;position:relative}
.sp-slot{aspect-ratio:1.5;border-radius:4px;background:#fff;border:1.5px solid #234E7033;position:relative;transition:opacity .5s,background .4s,border-color .4s,transform .4s}
.sp-slot.occ{background:#9fb4c4;border-color:#7d95a7}
.sp-slot.occ:after{content:"";position:absolute;inset:22% 18%;background:#7d95a7;border-radius:2px}
.sp-slot.bad:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(45deg,#d8483e33 0 4px,transparent 4px 8px);border-radius:3px}
.sp-slot.dim{opacity:.22;transform:scale(.92)}
.sp-slot.cand{border-color:var(--blue);background:#E2F2FB}
.sp-slot.best{opacity:1;transform:scale(1.1);background:var(--green);border-color:#2b7a3b;box-shadow:0 0 0 5px #3C974C44,0 8px 22px #3C974C66;z-index:2;animation:spPulse 1.4s ease-in-out infinite}
.sp-slot.best:after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-weight:800;font-size:16px;background:none}
@keyframes spPulse{50%{box-shadow:0 0 0 9px #3C974C22,0 8px 22px #3C974C66}}
.sp-lvl{position:absolute;left:-4px;top:12px;bottom:12px;display:none}
.sp-pallet{position:absolute;width:11%;aspect-ratio:1.5;background:#c98a2b;border:2px solid #8d5f17;border-radius:3px;left:0;top:0;opacity:0;transition:transform 1.1s var(--ease),opacity .3s;z-index:3;box-shadow:0 6px 14px #0003}
.sp-reason{margin-top:14px;min-height:40px;font-size:14.5px;color:var(--ink);font-weight:600;line-height:1.4}
.sp-reason small{display:block;color:var(--muted);font-weight:500;font-size:12.5px;margin-top:2px}
.sp-bottom{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:16px;margin-top:22px;align-items:stretch}
.sp-logic{background:var(--blue);color:#fff;border-radius:10px;padding:16px 18px;font-size:13.5px;line-height:1.5}
.sp-logic b{display:block;margin-bottom:6px}
.sp-logic ol{margin:0;padding-left:20px;list-style:decimal}
.sp-logic li{margin-bottom:3px}
.sp-vs{border-radius:10px;padding:16px 18px;border:1px solid var(--line);background:var(--paper)}
.sp-vs h4{margin:0 0 6px;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.sp-vs .big{font-size:clamp(22px,2.4vw,30px);font-weight:800;color:var(--ink);line-height:1.1}
.sp-vs p{margin:6px 0 0;font-size:13.5px;color:var(--muted);line-height:1.45}
.sp-vs.sys{background:#EAF4EC;border-color:#3C974C55}
.sp-vs.sys .big{color:var(--green)}
.sp-bar{height:6px;border-radius:3px;background:#234E7022;margin-top:10px;overflow:hidden}
.sp-bar i{display:block;height:100%;width:0;background:var(--green);transition:width .4s linear}
.sp-bar.h i{background:#c98a2b;width:6%}
.sp-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:16px;flex-wrap:wrap}
.sp-foot small{color:var(--muted);font-size:12px}
.bf-btn{appearance:none;border:1px solid var(--line);background:#fff;color:var(--ink);font:inherit;font-weight:700;font-size:13px;padding:8px 16px;border-radius:999px;cursor:pointer}
.bf-btn:hover{background:var(--paper)}
.bf-btn:focus-visible{outline:3px solid var(--sky);outline-offset:2px}

/* ---- 3D warehouse ---- */
.w3-wrap{position:relative;border-radius:var(--radius);overflow:hidden;background:radial-gradient(120% 90% at 50% 20%,#17476b 0%,#0B2438 70%);border:1px solid #ffffff22;min-height:420px;aspect-ratio:16/10}
.w3-wrap canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:pan-y;cursor:grab;display:block}
.w3-wrap canvas.drag{cursor:grabbing}
.w3-hint{position:absolute;left:14px;bottom:12px;color:#cfe3f0;font-size:12.5px;display:flex;gap:8px;align-items:center;pointer-events:none;background:#0B243899;padding:6px 12px;border-radius:999px}
.w3-modes{position:absolute;left:14px;top:12px;display:flex;gap:6px;flex-wrap:wrap}
.w3-zoom{position:absolute;right:14px;top:12px;display:flex;gap:6px}
.w3-modes button,.w3-zoom button{appearance:none;border:1px solid #ffffff44;background:#0B243899;color:#fff;font:inherit;font-size:12.5px;font-weight:600;padding:6px 12px;border-radius:999px;cursor:pointer}
.w3-zoom button{width:34px;padding:6px 0}
.w3-modes button[aria-pressed=true]{background:var(--green);border-color:var(--mint)}
.w3-modes button:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
.w3-tip{position:absolute;pointer-events:none;background:#fff;color:var(--navy);font-size:12.5px;line-height:1.4;padding:8px 11px;border-radius:8px;box-shadow:0 8px 24px #0006;opacity:0;transform:translate(-50%,-120%);transition:opacity .15s;white-space:nowrap;z-index:3}
.w3-tip.on{opacity:1}
.w3-legend{position:absolute;right:14px;bottom:12px;display:flex;gap:12px;color:#cfe3f0;font-size:12px;background:#0B243899;padding:6px 12px;border-radius:999px;flex-wrap:wrap}
.w3-legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px}
.bf-dark .bf-pane{background:#ffffff12;border:1px solid #ffffff2e;box-shadow:none}
.bf-dark h2,.bf-dark .head-note{color:#fff}
.bf-dark .head-note{color:#cfe3f0}

@media(max-width:980px){
 .bf-split figure video{height:auto}
 .bf-split{margin-bottom:0}
 .bf-split figure{margin-bottom:34px}
 .bf-grid{grid-template-columns:repeat(2,1fr)}
 .bf-split{grid-template-columns:1fr}
 .sp-top{grid-template-columns:1fr}
 .sp-arrow{clip-path:none;border-radius:6px;padding:14px}
 .sp-bottom{grid-template-columns:1fr}
 .sp-dock{display:none}
}
@media(max-width:600px){
 .bf-grid{grid-template-columns:1fr}
 .w3-wrap{aspect-ratio:auto;height:440px}
 .w3-legend{display:none}
}
@media(prefers-reduced-motion:reduce){
 .sp-factors li,.sp-slot,.sp-pallet,.bf-pane li{transition:none}
 .sp-slot.best{animation:none}
}