.home-steps {
  position: relative;
  z-index: 1;
  width: min(100%, 1500px);
  margin: 64px auto 72px;
  padding: 0 20px;
}
.home-steps-heading { margin-bottom: 32px; text-align: center; }
.home-steps-eyebrow { display: block; margin-bottom: 10px; color: #b69aff; font-size: .72rem; font-weight: 800; letter-spacing: .18em; }
.home-steps-heading h2 { margin: 0; color: #f3efff; font: 700 clamp(2rem, 3.8vw, 3.5rem)/1.15 "Exo 2", sans-serif; }
.home-steps-heading h2 span { color: #9468e8; }
.home-steps-heading p { margin: 14px 0 0; color: #c3bdd7; line-height: 1.6; }
.home-steps-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin: 0; padding: 0; list-style: none; }
.home-step { min-width: 0; }
.home-step h3 { margin: 22px 0 10px; color: #f3efff; font: 700 1.38rem/1.3 "Exo 2", sans-serif; }
.home-step > p { margin: 0; color: #bcb5d0; font-size: 1rem; line-height: 1.75; }
.home-step-art { position: relative; display: grid; place-items: center; height: 350px; overflow: hidden; border: 1px solid rgba(157,117,239,.18); border-radius: 20px; background: linear-gradient(140deg, #0c0a1b, #050713); isolation: isolate; }
.home-step-art::before { content: ""; position: absolute; z-index: -1; width: 230px; height: 180px; border-radius: 50%; background: #7850d4; opacity: .12; filter: blur(34px); }
.home-step-art-select::before { background: #56b994; opacity: .09; }
.home-step-art-track::before { background: #587eff; }
.home-step-number { position: absolute; top: 14px; left: 17px; color: #a58acb; font: 700 .8rem "Exo 2", sans-serif; letter-spacing: .08em; }
.home-step-window { position: relative; padding: 15px; border: 1px solid #302746; border-radius: 10px; background: #0f1021; box-shadow: 0 16px 36px #06051066; color: #ece7f7; font-family: "Exo 2", sans-serif; font-size: 11px; }
.home-step-window strong { font-weight: 700; }
.home-step-window small { display: block; color: #a6a1bc; font-size: 9px; line-height: 1.4; }
.home-step-window img { display: block; object-fit: contain; }
.home-step-rank-window { width: 86%; max-width: 350px; }
.home-step-window-heading { display: flex; align-items: center; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid #ffffff0c; }
.home-step-window-heading strong { display: block; margin-bottom: 4px; font-size: 12px; }
.home-step-dot { flex: 0 0 5px; width: 5px; height: 5px; border-radius: 50%; background: #79dab0; box-shadow: 0 0 9px #79dab066; }
.home-step-window-heading .home-step-dot { margin-left: auto; }
.home-step-rank-options { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; margin: 13px 0 9px; }
.home-step-rank-options > span, .home-step-divisions > span { display: grid; place-items: center; border: 1px solid #ffffff08; border-radius: 5px; background: #1b1c30; }
.home-step-rank-options > span { height: 36px; }
.home-step-rank-options img { width: 100%; max-width: 32px; }
.home-step-rank-options .is-picked, .home-step-divisions .is-picked { border-color: #68c99e66; background: #64d09916; box-shadow: 0 0 12px #58d79b0f; }
.home-step-divisions { display: flex; gap: 6px; }
.home-step-divisions > span { width: 31px; height: 25px; font-size: 9px; }
.home-step-mini-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 12px; }
.home-step-mini-fields small { margin-bottom: 5px; font-size: 7px; letter-spacing: .08em; }
.home-step-mini-fields div > span { display: flex; justify-content: space-between; padding: 6px 8px; border: 1px solid #ffffff0c; border-radius: 4px; font-size: 9px; }
.home-step-window i { color: #b59bde; font-style: normal; }
.home-step-order-window { width: 76%; max-width: 305px; margin: 28px 30px 0 0; }
.home-step-mini-kicker { color: #ba9ae9 !important; letter-spacing: .09em; }
.home-step-order-title { display: block; margin: 5px 0 10px; font-size: 18px; }
.home-step-order-route { display: flex; align-items: center; justify-content: space-between; gap: 3px; padding-bottom: 10px; margin-bottom: 9px; border-bottom: 1px solid #ffffff0c; font-size: 9px; white-space: nowrap; }
.home-step-order-route img { width: 28px; height: 28px; }
.home-step-order-line { display: flex; justify-content: space-between; margin: 8px 0; color: #a6a1bc; font-size: 9px; }
.home-step-order-line strong { color: #ddd5ee; }
.home-step-mock-button { display: flex; justify-content: space-between; margin-top: 14px; padding: 10px 12px; border-radius: 6px; background: linear-gradient(110deg, #8151f4, #5932c2); font-size: 9px; font-weight: 700; }
.home-step-payment-window { position: absolute; top: 46px; right: 22px; display: flex; align-items: center; gap: 9px; padding: 13px; animation: home-step-float 6s ease-in-out infinite; }
.home-step-payment-window strong { display: block; margin-bottom: 3px; }
.home-step-payment-icon { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; color: #ccb1ff; background: #9866f526; }
.home-step-payment-window svg { width: 18px; height: 18px; margin-left: 7px; color: #a489d1; }
.home-step-chat-window { position: absolute; top: 44px; right: 23px; width: 72%; max-width: 285px; min-height: 142px; padding: 13px; }
.home-step-chat-heading { display: flex; align-items: center; gap: 6px; padding-bottom: 10px; border-bottom: 1px solid #ffffff0c; font-size: 9px; }
.home-step-chat-heading > span:last-child { margin-left: auto; color: #a6a1bc; }
.home-step-chat-bubble { display: table; margin-top: 9px; padding: 7px 8px; border-radius: 6px 6px 6px 0; background: #242138; font-size: 9px; }
.home-step-chat-bubble.is-customer { margin-left: auto; background: #553791; border-radius: 6px 6px 0 6px; }
.home-step-progress-window { position: absolute; left: 23px; bottom: 36px; width: 80%; max-width: 325px; animation: home-step-float 6s ease-in-out -3s infinite; }
.home-step-progress-heading { display: flex; justify-content: space-between; align-items: center; gap: 5px; font-size: 10px; }
.home-step-progress-heading > span { padding: 4px 6px; border-radius: 12px; background: #6d4fb62b; color: #c7abf5; font-size: 8px; }
.home-step-progress-ranks { display: flex; align-items: center; justify-content: space-between; gap: 4px; margin: 13px 0; text-align: center; }
.home-step-progress-ranks > div { display: grid; justify-items: center; gap: 3px; }
.home-step-progress-ranks small { font-size: 6px; letter-spacing: .08em; }
.home-step-progress-ranks strong { font-size: 9px; }
.home-step-progress-ranks > span { color: #8568b1; }
.home-step-progress-bar { height: 4px; overflow: hidden; border-radius: 4px; background: #29223f; }
.home-step-progress-bar > span { display: block; width: 64%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #35c978, #79e7a9); box-shadow: 0 0 10px rgba(82, 221, 143, .48); }
@keyframes home-step-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@media (max-width: 1000px) and (min-width: 761px) { .home-steps-grid { gap: 14px; } .home-step-art { height: 270px; } .home-step-window { padding: 10px; } .home-step-rank-window { width: 92%; } .home-step-payment-window { right: 10px; } .home-step-progress-window { left: 10px; width: 90%; } .home-step-chat-window { right: 10px; width: 85%; } }
@media (max-width: 760px) { .home-steps { margin: 44px auto 48px; padding: 0 16px; } .home-steps-grid { grid-template-columns: 1fr; gap: 30px; max-width: 440px; margin-inline: auto; } .home-steps-heading { margin-bottom: 25px; } .home-step-art { height: 290px; } .home-step h3 { margin-top: 16px; } }
@media (prefers-reduced-motion: reduce) { .home-steps .home-step-window { animation: none; } }