.steps-root{--steps-bg:#f1f5f9;--steps-ink:#fff;--steps-muted:#fff;--steps-card-bg:#012b46;--steps-border:#ffffff1f;--steps-shadow:0 8px 48px #00000080;color:var(--steps-ink);background:var(--steps-bg);padding:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.steps-title{z-index:50;background:var(--steps-bg);margin-bottom:0;padding:2.5rem 0 .5rem;font-size:clamp(28px,4vw,36px);font-weight:700;line-height:1.3;position:sticky;top:72px;box-shadow:0 2px 8px #0000000d}.steps-root>h2{color:#012b46;padding-top:1.5rem;font-weight:700;line-height:1.3}.imgstory{min-height:500vh;position:relative}.imgstory .pin{justify-content:center;align-items:center;height:100vh;display:flex;position:sticky;top:0;overflow:hidden}.imgstory .stage{justify-content:center;align-items:center;width:100%;max-width:900px;height:100%;display:flex;position:relative}.imgstory .frame{opacity:0;pointer-events:none;transform:translate3d(var(--start-x,0),var(--start-y,120px),0)scale(var(--start-scale,.94));will-change:transform,opacity;place-items:center;scroll-margin-top:72px;transition:opacity .6s cubic-bezier(.4,0,.2,1),transform .9s cubic-bezier(.4,0,.2,1);display:grid;position:absolute;inset:0}.imgstory .frame[data-enter=up-right]{--start-x:-80px;--start-y:120px;--start-scale:.92}.imgstory .frame[data-enter=up-left]{--start-x:80px;--start-y:120px;--start-scale:.92}.imgstory .frame[data-enter=up-middle]{--start-x:0;--start-y:130px;--start-scale:.94}.imgstory .frame.visible{opacity:1;pointer-events:auto;transform:translate(0,0)scale(1)}.imgstory .frame.exiting{opacity:0;transform:translate3d(var(--exit-x,0),var(--exit-y,-120px),0)scale(var(--exit-scale,.92));pointer-events:none;transition:opacity .35s cubic-bezier(.4,0,.2,1),transform .65s cubic-bezier(.4,0,.2,1)}.imgstory .frame[data-exit=up-right]{--exit-x:120px;--exit-y:-130px;--exit-scale:.9}.imgstory .frame[data-exit=up-left]{--exit-x:-120px;--exit-y:-130px;--exit-scale:.9}.imgstory .frame[data-exit=up-middle]{--exit-x:0;--exit-y:-130px;--exit-scale:.92}.step-card{background:var(--steps-card-bg);border:1px solid var(--steps-border);width:min(600px,88vw);min-height:70vh;box-shadow:var(--steps-shadow);border-radius:20px;flex-direction:column;display:flex;overflow:hidden}.step-media{aspect-ratio:16/9;background:#ffffff0d;justify-content:center;align-items:center;width:100%;display:flex;position:relative;overflow:hidden}.step-video{object-fit:cover;width:100%;height:100%;display:block}.step-content{text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:20px;padding:36px 28px;display:flex}.step-content h3{margin:0;font-size:clamp(28px,4vw,36px);font-weight:700;line-height:1.3}.step-content p{max-width:46ch;color:var(--steps-muted);margin:0;font-size:clamp(16px,2.2vw,20px);line-height:1.7}.imgstory .progress{z-index:100;background:#ffffff24;border-radius:99px;width:min(720px,88%);height:4px;transition:opacity .3s;position:fixed;bottom:30px;left:50%;overflow:hidden;transform:translate(-50%)}.imgstory .progress .bar{background:linear-gradient(90deg,#36d1dc,#5b86e5);width:0;height:100%;transition:width .3s ease-out}.scroll-trigger{pointer-events:none;width:100%;height:100vh;scroll-margin-top:72px;position:absolute;left:0}.scroll-trigger.t1{height:100vh;top:0}.scroll-trigger.t2{height:100vh;top:100vh}.scroll-trigger.t3{height:100vh;top:200vh}.scroll-trigger.t4{height:100vh;top:300vh}.scroll-trigger.t5{height:100vh;top:400vh}.desktop-flow{flex-direction:column;gap:80px;max-width:1400px;margin:0 auto;padding:60px 50px;display:flex;overflow:visible}.desktop-flow .desktop-card{grid-template-columns:minmax(0,2fr) minmax(0,3fr);align-items:center;gap:48px;padding:0 40px;transition:transform .3s,box-shadow .3s;display:grid;position:relative;overflow:visible}.desktop-flow .desktop-card:hover{transform:translateY(-4px)}.desktop-flow .desktop-card.reverse{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}.desktop-flow .desktop-card .desktop-content{order:1}.desktop-flow .desktop-card .desktop-media,.desktop-flow .desktop-card.reverse .desktop-content{order:2}.desktop-flow .desktop-card.reverse .desktop-media{order:1}.desktop-media{aspect-ratio:16/9;background:#ffffff0d;border-radius:24px;transition:box-shadow .3s;position:relative;overflow:hidden;box-shadow:0 12px 64px #00000040,0 4px 16px #00000026}.desktop-card:hover .desktop-media{box-shadow:0 16px 80px #0000004d,0 6px 24px #0003}.desktop-media video{object-fit:cover;width:100%;height:100%;display:block}.desktop-content{color:#012b46;flex-direction:column;gap:20px;padding:0;display:flex;position:relative}.desktop-content h3{letter-spacing:-.02em;color:#012b46;align-self:flex-start;margin:0;font-weight:700;line-height:1.2}.desktop-content p{color:#012b46;letter-spacing:.01em;align-self:flex-start;max-width:90%;margin:0;font-size:clamp(16px,2vw,20px);line-height:1.7}.step-badge{color:#fff;z-index:10;box-sizing:border-box;background:#012b46;justify-content:center;align-items:center;width:60px;height:80px;padding:8px;font-size:48px;font-weight:700;line-height:1;display:flex;position:absolute;top:50px;box-shadow:0 6px 24px #00000040}.step-badge-left{border-radius:0 16px 16px 0;left:-50px}.step-badge-right{border-radius:16px 0 0 16px;right:-50px}.step-number{color:#fff;z-index:10;box-sizing:border-box;background:#012b46;border-radius:8px;justify-content:center;align-items:center;width:40px;height:40px;padding:4px;font-size:20px;font-weight:700;display:flex;position:absolute;top:12px;left:12px;box-shadow:0 2px 8px #00000026}.desktop-step-number{color:#fff;z-index:10;background:#012b46;border-radius:8px;justify-content:center;align-items:center;width:48px;height:48px;font-size:24px;font-weight:700;display:flex;position:absolute;top:0;left:0;box-shadow:0 2px 8px #00000026}.desktop-indicator{align-self:center;gap:8px;margin-top:36px;display:flex}.desktop-indicator span{background:#fff3;border-radius:50%;width:10px;height:10px;transition:background .2s}.desktop-indicator span.active{background:linear-gradient(90deg,#36d1dc,#5b86e5)}p{line-height:1.5}@media (max-width:768px){.steps-title{margin-bottom:0;padding:.75rem 1rem .5rem;top:72px}.imgstory .pin{height:calc(100vh - 72px - 4rem);top:calc(72px + 4rem)}.imgstory .stage{width:100%}.step-content{padding:36px 24px}.step-content h3{font-size:clamp(28px,5vw,36px)}.step-content p{font-size:clamp(16px,2.5vw,20px)}.imgstory .progress{bottom:24px}}
