.odm-steps-container{width:100%;max-width:1200px;margin:0 auto;padding:40px 20px;background:#f9fafb;border-radius:12px}.odm-steps-header{text-align:center;margin-bottom:60px}.odm-steps-title{font-size:2rem;font-weight:600;color:#374151;margin-bottom:12px}.odm-steps-subtitle{font-size:1.2rem;color:#64748b;margin:0}.cube-container{position:relative;width:100%;height:400px;display:flex;justify-content:center;align-items:center;perspective:1000px;margin-bottom:60px}.cube,.cube-wrapper{position:relative;width:300px;height:300px;transform-style:preserve-3d}.cube{transition:transform .8s cubic-bezier(.4,0,.2,1)}.cube-face{position:absolute;width:300px;height:300px;display:flex;align-items:center;justify-content:center;border:2px solid hsla(0,0%,100%,.8)}.cube-face.front{transform:translateZ(150px)}.cube-face.back{transform:rotateY(180deg) translateZ(150px)}.cube-face.right{transform:rotateY(90deg) translateZ(150px)}.cube-face.left{transform:rotateY(-90deg) translateZ(150px)}.cube-face.top{transform:rotateX(90deg) translateZ(150px)}.cube-face.bottom{transform:rotateX(-90deg) translateZ(150px)}.face-content{text-align:center;color:#fff;padding:30px;width:100%}.step-icon{font-size:2.5rem;margin-bottom:12px;display:block}.step-number{font-size:.8rem;font-weight:500;opacity:.8;margin-bottom:8px}.step-title{font-size:1.5rem;font-weight:600;margin-bottom:12px}.step-description{font-size:.9rem;line-height:1.5;opacity:.9;margin:0}.nav-arrow{position:absolute;top:50%;transform:translateY(-50%);background:#fff;border:1px solid #d1d5db;border-radius:8px;width:48px;height:48px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;z-index:10;color:#6b7280}.nav-arrow:hover{background:#f3f4f6;color:#374151}.nav-arrow-left{left:-80px}.nav-arrow-right{right:-80px}.steps-indicators{display:flex;justify-content:center;gap:16px;margin-bottom:40px;flex-wrap:wrap}.step-indicator{display:flex;align-items:center;gap:6px;padding:8px 16px;border:1px solid #d1d5db;border-radius:8px;background:#fff;cursor:pointer;transition:all .2s ease;font-size:.875rem;font-weight:400}.step-indicator:hover{background:#f9fafb}.step-indicator.active{color:#fff;border-color:transparent}.indicator-icon{font-size:1.2rem}.indicator-text{white-space:nowrap}.current-step-details{display:flex;justify-content:center}.step-detail-card{background:#fff;padding:20px;max-width:600px;width:100%;border:1px solid #e5e7eb;border-left:4px solid #3b82f6}.step-detail-header{display:flex;align-items:center;gap:16px;margin-bottom:16px}.step-detail-icon{font-size:2rem;filter:drop-shadow(0 2px 4px rgba(0,0,0,.1))}.step-detail-title{font-size:1.5rem;font-weight:700;color:#1e293b;margin:0}.step-detail-description{font-size:1.1rem;line-height:1.7;color:#475569;margin:0}@media (max-width:768px){.odm-steps-container{padding:40px 16px}.odm-steps-title{font-size:2rem}.cube-container{height:300px}.cube,.cube-face,.cube-wrapper{width:250px;height:250px}.cube-face.front{transform:translateZ(125px)}.cube-face.back{transform:rotateY(180deg) translateZ(125px)}.cube-face.right{transform:rotateY(90deg) translateZ(125px)}.cube-face.left{transform:rotateY(-90deg) translateZ(125px)}.cube-face.top{transform:rotateX(90deg) translateZ(125px)}.cube-face.bottom{transform:rotateX(-90deg) translateZ(125px)}.nav-arrow{width:50px;height:50px}.nav-arrow-left{left:-60px}.nav-arrow-right{right:-60px}.steps-indicators{gap:8px}.step-indicator{padding:8px 12px;font-size:.8rem}.indicator-text{display:none}.step-detail-card{padding:20px}.step-detail-title{font-size:1.3rem}}@media (max-width:480px){.nav-arrow-left{left:-40px}.nav-arrow-right{right:-40px}.cube-container{margin:0 60px 40px}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.cube-face,.odm-steps-container{animation:fadeInUp .8s ease-out}.cube-face{animation-delay:calc(var(--index) * .1s)}