@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');
.sox-ff{--sox-primary:#1265e8;--sox-dark:#082b64;--sox-accent:#19c37d;position:relative;overflow:hidden;font-family:Montserrat,Arial,sans-serif;background:linear-gradient(145deg,#f8fbff 0%,#fff 50%,#eef5ff 100%);color:#13233a;border-radius:28px;padding:70px 28px;isolation:isolate}.sox-ff *{box-sizing:border-box}.sox-ff button{font-family:inherit}.sox-ff__glow{position:absolute;width:580px;height:580px;border-radius:50%;background:color-mix(in srgb,var(--sox-primary) 12%,transparent);filter:blur(75px);right:-280px;top:-270px;z-index:-1}.sox-ff__inner{max-width:1180px;margin:auto}.sox-ff__header{text-align:center;max-width:820px;margin:0 auto 38px}.sox-ff__eyebrow{display:inline-flex;color:var(--sox-primary);font-size:11px;font-weight:800;letter-spacing:2px;background:#fff;padding:9px 14px;border:1px solid #dce9fd;border-radius:30px;box-shadow:0 7px 22px rgba(14,64,130,.08)}.sox-ff__header h2{font-size:clamp(30px,4vw,52px);line-height:1.08;letter-spacing:-2px;color:var(--sox-dark);margin:17px 0 15px;font-weight:800}.sox-ff__header p{font-size:16px;line-height:1.7;color:#607086;margin:0}.sox-ff__stage{display:grid;grid-template-columns:minmax(360px,1.02fr) minmax(360px,.98fr);align-items:center;gap:44px;background:rgba(255,255,255,.72);border:1px solid #e1ebf7;border-radius:27px;padding:35px;box-shadow:0 28px 70px rgba(13,55,109,.12);backdrop-filter:blur(8px)}.sox-ff__visual{position:relative;width:min(100%,500px);aspect-ratio:380/430;margin:auto;isolation:isolate}.sox-ff__visual:before{content:"";position:absolute;inset:8% 5%;border-radius:50%;background:radial-gradient(circle,rgba(18,101,232,.09),transparent 68%);z-index:-2}.sox-ff__visual img{display:block;width:100%;height:100%;object-fit:contain;position:relative;z-index:2;filter:drop-shadow(0 20px 18px rgba(8,43,100,.12))}.sox-ff__route{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}.sox-ff__route path{fill:none;stroke:var(--sox-primary);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:7 11;opacity:.38;animation:soxRoute 8s linear infinite}.sox-ff__spotlight{position:absolute;width:34%;aspect-ratio:1;border-radius:50%;left:var(--spot-x,8%);top:var(--spot-y,0%);background:radial-gradient(circle,color-mix(in srgb,var(--sox-primary) 25%,transparent),transparent 68%);filter:blur(8px);z-index:1;transition:left .7s cubic-bezier(.2,.8,.2,1),top .7s cubic-bezier(.2,.8,.2,1);animation:soxGlow 2s ease-in-out infinite}.sox-ff__hotspot{position:absolute;left:var(--x);top:var(--y);z-index:5;width:34px;height:34px;transform:translate(-50%,-50%);border:3px solid #fff;border-radius:50%;background:var(--sox-dark);color:#fff;box-shadow:0 5px 18px rgba(5,39,85,.28);font:800 12px/1 Montserrat;cursor:pointer;transition:.3s}.sox-ff__hotspot:before{content:"";position:absolute;inset:-8px;border:1px solid var(--sox-primary);border-radius:50%;opacity:0}.sox-ff__hotspot:hover,.sox-ff__hotspot:focus-visible,.sox-ff__hotspot.is-active{background:var(--sox-primary);transform:translate(-50%,-50%) scale(1.18);outline:none}.sox-ff__hotspot.is-active:before{opacity:.8;animation:soxPing 1.6s infinite}.sox-ff__content{min-width:0}.sox-ff__counter{display:flex;align-items:center;gap:15px;margin-bottom:20px}.sox-ff__counter>span{font-size:10px;font-weight:800;letter-spacing:1.5px;color:var(--sox-primary);white-space:nowrap}.sox-ff__counter>div{height:3px;flex:1;background:#e2eaf4;border-radius:5px;overflow:hidden}.sox-ff__counter i{display:block;width:20%;height:100%;background:linear-gradient(90deg,var(--sox-primary),var(--sox-accent));border-radius:5px;transition:width .6s}.sox-ff__detail{display:grid;grid-template-columns:68px 1fr;gap:19px;align-items:start;min-height:174px;transition:opacity .2s,transform .2s}.sox-ff__detail.is-changing{opacity:.15;transform:translateY(5px)}.sox-ff__detail-icon{width:64px;height:64px;border-radius:18px;background:linear-gradient(135deg,var(--sox-primary),var(--sox-dark));display:grid;place-items:center;color:#fff;box-shadow:0 13px 27px color-mix(in srgb,var(--sox-primary) 24%,transparent)}.sox-ff svg:not(.sox-ff__route){width:29px;height:29px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.sox-ff__detail small{display:block;color:var(--sox-accent);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.9px;margin:1px 0 6px}.sox-ff__detail h3{font-size:clamp(22px,2.4vw,31px);line-height:1.15;color:var(--sox-dark);letter-spacing:-.8px;margin:0 0 10px}.sox-ff__detail p{font-size:13px;line-height:1.72;color:#627287;margin:0}.sox-ff__steps{display:grid;gap:6px;margin-top:22px}.sox-ff__step{display:grid;grid-template-columns:34px 1fr;align-items:center;text-align:left;gap:9px;width:100%;border:0;border-left:3px solid transparent;background:transparent;padding:8px 10px;color:#8492a5;border-radius:0 10px 10px 0;cursor:pointer;transition:.25s}.sox-ff__step span{font-size:9px;font-weight:800}.sox-ff__step strong{font-size:11px;font-weight:650}.sox-ff__step:hover,.sox-ff__step:focus-visible{background:#f0f6ff;color:var(--sox-primary);outline:none}.sox-ff__step.is-active{border-left-color:var(--sox-primary);background:#eef5ff;color:var(--sox-dark)}.sox-ff__controls{display:flex;align-items:center;gap:8px;margin-top:17px}.sox-ff__controls button{height:38px;border-radius:10px;border:1px solid #dce6f2;background:#fff;color:var(--sox-dark);font-weight:700;cursor:pointer;transition:.25s}.sox-ff__prev,.sox-ff__next{width:42px;font-size:17px}.sox-ff__toggle{display:flex;align-items:center;justify-content:center;gap:8px;padding:0 14px;font-size:10px}.sox-ff__controls button:hover,.sox-ff__controls button:focus-visible{border-color:var(--sox-primary);color:var(--sox-primary);transform:translateY(-2px);outline:none}.sox-pause{font-size:12px}.sox-ff__footer{margin:28px auto 0;display:flex;align-items:center;justify-content:center;gap:30px;flex-wrap:wrap}.sox-ff__footer p{color:#617187;font-size:13px;margin:0}.sox-ff__footer p b{color:var(--sox-dark)}.sox-ff__footer a{display:inline-flex;align-items:center;gap:12px;text-decoration:none;background:var(--sox-primary);color:#fff!important;padding:14px 21px;border-radius:12px;font-weight:700;font-size:12px;box-shadow:0 11px 24px color-mix(in srgb,var(--sox-primary) 25%,transparent);transition:.3s}.sox-ff__footer a:hover{transform:translateY(-3px);filter:brightness(1.07)}.sox-ff__footer a span{font-size:17px}@keyframes soxRoute{to{stroke-dashoffset:-90}}@keyframes soxPing{0%{transform:scale(.7);opacity:.9}100%{transform:scale(1.7);opacity:0}}@keyframes soxGlow{50%{transform:scale(1.18);opacity:.65}}
@media(max-width:920px){.sox-ff__stage{grid-template-columns:1fr;gap:24px;padding:28px}.sox-ff__visual{width:min(100%,480px)}.sox-ff__content{max-width:650px;width:100%;margin:auto}.sox-ff__detail{min-height:145px}.sox-ff__steps{grid-template-columns:repeat(5,1fr)}.sox-ff__step{display:flex;flex-direction:column;align-items:center;text-align:center;border-left:0;border-bottom:3px solid transparent;border-radius:10px;padding:9px 5px;gap:5px}.sox-ff__step.is-active{border-left:0;border-bottom-color:var(--sox-primary)}}
@media(max-width:620px){.sox-ff{padding:48px 14px;border-radius:20px}.sox-ff__header{margin-bottom:25px}.sox-ff__header h2{letter-spacing:-1.2px}.sox-ff__header p{font-size:14px}.sox-ff__stage{padding:18px 13px;border-radius:19px;gap:16px}.sox-ff__visual{width:100%}.sox-ff__hotspot{width:30px;height:30px}.sox-ff__detail{grid-template-columns:54px 1fr;gap:13px;min-height:190px}.sox-ff__detail-icon{width:52px;height:52px;border-radius:14px}.sox-ff__detail h3{font-size:21px}.sox-ff__detail p{font-size:12px}.sox-ff__steps{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:7px}.sox-ff__step{min-width:125px;scroll-snap-align:start}.sox-ff__controls{justify-content:center}.sox-ff__footer{text-align:center;gap:17px;flex-direction:column}.sox-ff__footer a{width:100%;justify-content:center}}
@media(prefers-reduced-motion:reduce){.sox-ff *{animation:none!important;transition:none!important}}