/* Hambank Interactive Journey: isolated component, RTL, WCAG-aware */
.hbx{--hbx-ink:#12354b;--hbx-mid:#5c7182;--hbx-teal:#147e7b;--hbx-dark-teal:#0d6367;--hbx-line:#e1e9ea;--hbx-surface:#fff;--hbx-ice:#f1f8f7;--hbx-gold:#d9ad62;color:var(--hbx-ink);direction:rtl;font-family:Vazirmatn,Vazir,Tahoma,sans-serif;position:relative;padding:88px 20px 74px;background:linear-gradient(160deg,#fff 0%,#f5faf9 66%,#f6f9fa 100%);isolation:isolate;box-sizing:border-box;overflow:hidden}
.hbx *{box-sizing:border-box}.hbx:before{content:"";position:absolute;width:430px;height:430px;border-radius:50%;background:#d2f4ec;opacity:.28;filter:blur(80px);left:-230px;top:110px;z-index:-1;pointer-events:none}.hbx-shell{max-width:1200px;margin:auto}.hbx-heading{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:34px}.hbx-heading-copy{max-width:740px}.hbx-eyebrow{font-size:12px;color:var(--hbx-teal);display:flex;align-items:center;gap:10px;font-weight:800;margin-bottom:12px}.hbx-eyebrow-dot,.hbx-live-dot{display:inline-block;width:7px;height:7px;background:#38b7a8;border-radius:99px;box-shadow:0 0 0 5px #3abaaa18}.hbx-eyebrow-divider{width:1px;height:13px;background:#c7d7d6}.hbx h2{font-size:clamp(25px,3vw,39px)!important;letter-spacing:-1.3px;line-height:1.55;margin:0 0 9px!important;color:var(--hbx-ink)!important;font-weight:850!important}.hbx-heading p{font-size:14px;line-height:2;color:var(--hbx-mid);margin:0;max-width:640px}.hbx-steps{display:flex;align-items:center;gap:7px;flex-shrink:0;margin-bottom:12px}.hbx-step{display:flex;align-items:center;gap:6px;font-size:10px;color:#8798a0;white-space:nowrap}.hbx-step b{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1px solid #dce7e7;font-size:11px}.hbx-step-active{color:var(--hbx-teal);font-weight:800}.hbx-step-active b{border-color:#a8dcd4;background:#e4f5f1}.hbx-step-sep{height:1px;width:13px;background:#d8e3e2}.hbx-workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:16px;align-items:stretch}.hbx-controls{border:1px solid var(--hbx-line);border-radius:25px;background:#fff;box-shadow:0 18px 55px #24434e0a;padding:29px 30px 25px;min-width:0}.hbx-control-head,.hbx-panel-head{display:flex;flex-direction:column;align-items:start;gap:6px;margin-bottom:16px}.hbx-mini-kicker{font-size:11px;color:#599592;font-weight:800;letter-spacing:.2px}.hbx-control-head strong,.hbx-panel-head strong{font-size:16px;color:var(--hbx-ink)}.hbx-paths{display:grid;gap:9px}.hbx button,.hbx input{font-family:inherit}.hbx-path{padding:12px 14px;cursor:pointer;display:flex;align-items:center;gap:12px;text-align:right;background:#fbfcfc;color:var(--hbx-ink);border:1px solid #e7eeee;border-radius:15px;transition:border-color .2s,background .2s,box-shadow .2s,transform .2s;width:100%}.hbx-path:hover{border-color:#90c9c3;transform:translateX(-2px)}.hbx-path:focus-visible,.hbx input:focus-visible,.hbx-btn:focus-visible{outline:3px solid #68cbbf;outline-offset:3px}.hbx-path.is-active{border-color:#5ab4aa;background:linear-gradient(100deg,#effaf7,#fafefd);box-shadow:inset 3px 0 0 var(--hbx-teal)}.hbx-path-icon{display:grid;place-items:center;width:43px;height:43px;border-radius:12px;background:#ecf2f4;color:#517b86;flex-shrink:0}.hbx-path.is-active .hbx-path-icon{color:var(--hbx-teal);background:#dcefea}.hbx-path-icon svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.hbx-path-text{display:flex;flex-direction:column;gap:3px;flex:1}.hbx-path-text strong{font-size:13px;font-weight:850}.hbx-path-text small{font-size:11px;color:#799098}.hbx-path-arrow{color:#9ab2b5;font-size:20px}.hbx-path.is-active .hbx-path-arrow{color:#16867f}.hbx-panel-wrap{margin-top:23px;border-top:1px solid #eef1f0;padding-top:23px}.hbx-panel[hidden]{display:none!important}.hbx-panel-head{margin-bottom:23px}.hbx-field{margin-bottom:19px}.hbx-field label{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;font-size:12px;color:#5a6e7a;font-weight:600;margin-bottom:12px}.hbx-field output{font-size:12px;color:#157c77;font-weight:850}.hbx input[type=range]{width:100%;display:block;appearance:none;-webkit-appearance:none;height:5px;border-radius:40px;background:linear-gradient(to left,#188b82 var(--hbx-percent,50%),#e7eff0 var(--hbx-percent,50%));cursor:pointer;border:0;margin:0}.hbx input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:17px;height:17px;border:4px solid #fff;box-shadow:0 0 0 2px #2caca0,0 2px 8px #143c4029;border-radius:50%;background:#188b82}.hbx input[type=range]::-moz-range-thumb{width:9px;height:9px;border:4px solid #fff;box-shadow:0 0 0 2px #2caca0;border-radius:50%;background:#188b82}.hbx-hint{font-size:11px;line-height:2;color:#7d909a;background:#f5f8f7;border-radius:11px;padding:11px 13px;margin:18px 0 0}.hbx-visual{min-width:0;background:radial-gradient(ellipse at 65% 35%,#c5eee7 0%,transparent 63%),linear-gradient(160deg,#e7f6f3 0%,#eaf4f3 43%,#e9f0f2 100%);border:1px solid #dfebea;border-radius:25px;overflow:hidden;padding:24px 26px 20px;position:relative;display:flex;flex-direction:column}.hbx-visual-top{display:flex;align-items:center;justify-content:space-between;gap:15px;font-size:11px;color:#749299;position:relative;z-index:2}.hbx-visual-top>span:first-child{display:flex;gap:10px;align-items:center;color:#2b7272;font-weight:800}.hbx-device-scene{flex:1;min-height:480px;display:grid;place-items:center;position:relative;perspective:1000px}.hbx-orbit{position:absolute;pointer-events:none;border:1px solid #92ccc485;transform:rotate(-16deg);border-radius:50%}.hbx-orbit-one{width:420px;height:260px;top:94px;left:calc(50% - 210px)}.hbx-orbit-two{width:480px;height:320px;top:67px;left:calc(50% - 240px);border-style:dashed;opacity:.5}.hbx-phone{width:250px;height:425px;background:linear-gradient(130deg,#d3eaeb,#fbffff 36%,#819ba9 100%);padding:6px;border:1px solid #91a8ae;border-radius:34px;box-shadow:25px 30px 40px #1a657039,3px 7px 15px #225a5b1c,inset 2px 0 3px #fff;position:relative;z-index:1;transform:rotate(-4deg) rotateY(-7deg);transition:transform .4s cubic-bezier(.2,.8,.2,1),filter .3s}.hbx-phone:hover{transform:rotate(-1deg) rotateY(0deg) translateY(-4px)}.hbx-phone-notch{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:74px;height:15px;border-radius:0 0 12px 12px;background:#152b38;z-index:4}.hbx-phone-body{height:100%;background:#fdfefe;border-radius:29px;padding:24px 15px 7px;display:flex;flex-direction:column;overflow:hidden}.hbx-phone-head{display:flex;align-items:center;gap:6px;color:#1b4957;font-size:12px;font-weight:850;margin-bottom:19px}.hbx-phone-mark{width:22px;height:24px;display:grid;place-items:center;overflow:hidden}.hbx-phone-mark img{display:block;width:24px;height:24px;object-fit:contain}.hbx-phone-head>span:nth-child(2){display:flex;align-items:center;flex:1;gap:5px}.hbx-phone-head small{font-size:8px;color:#9aadad;font-weight:500}.hbx-phone-dots{font-weight:900;font-size:13px;color:#92a8ad}.hbx-phone-tag{font-size:9px;letter-spacing:.1px;border-radius:50px;background:#e5f6f1;align-self:start;color:#247d76;font-weight:800;padding:6px 10px;margin-bottom:13px}.hbx-phone-label{font-size:10px;color:#748c95;margin:0 0 2px}.hbx-phone-value{font-size:29px;font-weight:900;letter-spacing:-1.2px;color:#133f50;direction:rtl;line-height:1.4;white-space:nowrap}.hbx-phone-value small{font-size:9px;letter-spacing:0;color:#54747e;font-weight:600}.hbx-phone-chart-title{display:flex;align-items:center;justify-content:space-between;gap:4px;font-size:10px;color:#264f5e;font-weight:850;margin:19px 0 4px}.hbx-phone-chart-caption{font-size:8px;color:#8ca5ad;font-weight:500}.hbx-chart-area{height:99px;position:relative;overflow:hidden}.hbx-chart-area svg{width:100%;height:100%;overflow:visible}.hbx-chart-grid path{stroke:#e9f1f0;stroke-width:1;fill:none}.hbx-chart-area-fill{transition:d .45s}.hbx-chart-line{fill:none;stroke:#168f82;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;transition:d .45s}.hbx-chart-area circle{fill:#fff;stroke:#168f82;stroke-width:3;transition:cx .45s,cy .45s}.hbx-phone-progress{margin-top:12px}.hbx-phone-progress-text{display:flex;justify-content:space-between;align-items:center;font-size:9px;color:#7c939b}.hbx-phone-progress-text strong{font-size:10px;color:#1b776f}.hbx-track{height:6px;border-radius:30px;background:#e8f1f0;overflow:hidden;margin-top:7px}.hbx-track>span{display:block;background:linear-gradient(to left,#159489,#6ed1b6);height:100%;border-radius:30px;transition:width .45s}.hbx-phone-note{margin-top:12px;display:flex;align-items:start;gap:6px;font-size:8px;line-height:1.9;color:#8ca1a6}.hbx-phone-info{border-radius:50%;border:1px solid #9ab9b9;width:13px;height:13px;display:grid;place-items:center;flex-shrink:0;line-height:1}.hbx-phone-nav{margin-top:auto;border-top:1px solid #ecf2f1;display:flex;justify-content:space-between;align-items:center;padding-top:6px}.hbx-phone-nav span{font-size:7px;display:flex;flex-direction:column;align-items:center;gap:2px;color:#adbcc0}.hbx-phone-nav i{font-style:normal;font-size:13px}.hbx-phone-nav .is-on{color:#21877e}.hbx-floating-note{position:absolute;z-index:2;right:12%;top:21%;background:#fff;border:1px solid #e6f1ee;box-shadow:0 12px 26px #326a6921;padding:8px 11px;border-radius:12px;color:#38736f;font-size:10px;display:flex;align-items:center;gap:7px;transform:rotate(3deg)}.hbx-checkmark{width:17px;height:17px;display:grid;place-items:center;border-radius:50%;background:#e3f6f1;color:#188b82;font-weight:900}.hbx-side-metric{position:absolute;z-index:2;left:6%;bottom:15%;display:flex;flex-direction:column;gap:2px;background:#fff;border:1px solid #e5efef;box-shadow:0 10px 27px #205b5b20;padding:14px 20px;border-radius:16px;min-width:126px;transform:rotate(4deg)}.hbx-side-metric span{font-size:10px;color:#7a9096}.hbx-side-metric strong{font-size:25px;color:#144a58;font-weight:900;line-height:1.5}.hbx-side-metric small{font-size:9px;color:#6b9494}.hbx-insight{background:#ffffffd9;border:1px solid #ffffff;border-radius:16px;padding:13px 15px;display:flex;align-items:start;gap:10px;position:relative;z-index:2;box-shadow:0 5px 14px #41656809}.hbx-insight-icon{color:#17a290;font-size:16px}.hbx-insight p{font-size:11px;line-height:2.2;color:#4e6d78;margin:0}.hbx-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:27px 8px 0}.hbx-bottom-copy{display:flex;flex-direction:column;gap:5px}.hbx-bottom-copy b{font-size:14px}.hbx-bottom-copy span{font-size:12px;color:#708692;line-height:1.9}.hbx-bottom-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}.hbx-btn{font-family:inherit;display:inline-flex;justify-content:center;align-items:center;gap:14px;text-decoration:none!important;font-size:12px;font-weight:850;border-radius:13px;padding:14px 21px;min-height:45px;white-space:nowrap;transition:transform .2s,background .2s}.hbx-btn:hover{transform:translateY(-2px)}.hbx-btn-primary{color:#fff!important;background:#147e7b;box-shadow:0 8px 20px #156d6b30}.hbx-btn-primary:hover{background:#0f6765}.hbx-btn-text{color:#246f75!important;background:#eaf5f3}.hbx-disclaimer{font-size:10px;line-height:2;color:#94a3a9;margin:18px 8px 0}
@media(max-width:1040px){.hbx-heading{display:block}.hbx-steps{margin-top:20px}.hbx-workspace{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.hbx-controls{padding:25px 20px}.hbx-device-scene{min-height:440px}.hbx-side-metric{left:0;bottom:12%}.hbx-floating-note{right:0;top:20%}}
@media(max-width:760px){.hbx{padding:57px 16px 49px}.hbx-heading{margin-bottom:24px}.hbx h2{font-size:25px!important}.hbx-heading p{font-size:12px}.hbx-steps{justify-content:space-between}.hbx-workspace{grid-template-columns:1fr;gap:14px}.hbx-controls{padding:21px 20px}.hbx-paths{grid-template-columns:1fr}.hbx-panel-wrap{margin-top:18px;padding-top:19px}.hbx-visual{padding:21px 15px}.hbx-device-scene{min-height:450px}.hbx-bottom{flex-direction:column;align-items:stretch;text-align:right;padding-top:24px}.hbx-bottom-actions{width:100%;display:grid;grid-template-columns:1fr}.hbx-btn{width:100%}.hbx-disclaimer{margin-top:16px}.hbx-orbit-one{width:350px;left:calc(50% - 175px)}.hbx-orbit-two{width:380px;left:calc(50% - 190px)}}
@media(max-width:380px){.hbx-controls{padding:17px 14px}.hbx-device-scene{min-height:440px}.hbx-phone{transform:scale(.9) rotate(-4deg);margin:-12px 0}.hbx-phone:hover{transform:scale(.9) rotate(0deg)}.hbx-side-metric{left:-8px;bottom:16%;transform:scale(.84) rotate(4deg);transform-origin:left bottom}.hbx-floating-note{right:-5px;font-size:9px}.hbx-step{font-size:9px}.hbx-step-sep{width:6px}}
@media(prefers-reduced-motion:reduce){.hbx *{animation:none!important;transition:none!important;scroll-behavior:auto!important}.hbx-phone,.hbx-phone:hover{transform:none!important}.hbx-floating-note,.hbx-side-metric{transform:none!important}}

.hbx-chart-alt[hidden],.hbx-chart-area[hidden]{display:none!important}.hbx-chart-alt{height:99px}.hbx-risk-bars{display:grid;gap:8px;padding-top:5px}.hbx-risk-bars>div{display:grid;grid-template-columns:65px 1fr 39px;align-items:center;gap:7px}.hbx-risk-bars span,.hbx-risk-bars em{font-size:8px;font-style:normal;color:#718d95;white-space:nowrap}.hbx-risk-bars em{text-align:left;color:#235e67;font-weight:800}.hbx-risk-bars i{height:7px;border-radius:8px;background:#e8f0ef;overflow:hidden}.hbx-risk-bars i b{display:block;width:50%;height:100%;background:linear-gradient(to left,#148e84,#74d1bd);border-radius:7px;transition:width .2s}.hbx-cash-bars{display:flex;flex-direction:column;justify-content:center;gap:10px}.hbx-cash-stack{height:21px;display:flex;border-radius:7px;overflow:hidden;background:#ebf0f1}.hbx-cash-stack span{display:block;height:100%;min-width:0;transition:width .2s}.hbx-cash-cost,.hbx-cost-key{background:#5c8c9d}.hbx-cash-debt,.hbx-debt-key{background:#d5ad75}.hbx-cash-remain,.hbx-remain-key{background:#38b9a8}.hbx-cash-legend{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px}.hbx-cash-legend span{font-size:8px;color:#718d95;display:flex;align-items:center;gap:3px}.hbx-cash-legend i{display:inline-block;width:7px;height:7px;border-radius:2px}.hbx-cash-bars small{color:#849aa1;font-size:8px;text-align:right}


/* 2026-11-04 refinement: stronger interactive section + less microcopy */
.hbx{background:linear-gradient(160deg,#ffffff 0%,#f3fbfa 54%,#edf5f7 100%)}
.hbx-heading{margin-bottom:40px}
.hbx-eyebrow{font-size:13px;font-weight:900;color:#0f7d77}
.hbx-steps{gap:10px;flex-wrap:wrap}
.hbx-step{font-size:12px;font-weight:800;color:#6d848e;background:rgba(255,255,255,.72);border:1px solid #d7e6e6;border-radius:999px;padding:8px 12px;box-shadow:0 8px 22px rgba(22,73,84,.05)}
.hbx-step b{width:28px;height:28px;font-size:13px;border:1px solid #cfe1e1;background:#fff}
.hbx-step-active{color:#0d726f;background:linear-gradient(135deg,#effcf8,#e3f7f3);border-color:#97d1c9;box-shadow:0 12px 28px rgba(20,126,123,.14)}
.hbx-step-active b{border-color:#79c1b7;background:linear-gradient(135deg,#daf4ee,#f7fffd);color:#0f716c}
.hbx-step-sep{width:18px;height:2px;background:linear-gradient(to left,#9bcfc8,#dbe8e7)}
.hbx-controls{border-color:#d7e7e8;border-radius:28px;box-shadow:0 20px 60px rgba(25,62,76,.09);padding:31px 32px 27px;background:linear-gradient(180deg,#ffffff 0%,#fcfefe 100%)}
.hbx-control-head strong,.hbx-panel-head strong{font-size:18px;font-weight:900}
.hbx-paths{gap:12px}
.hbx-path{padding:15px 16px;border-radius:18px;background:linear-gradient(180deg,#ffffff 0%,#f8fbfb 100%);border-color:#dfeaea;box-shadow:0 10px 26px rgba(24,58,72,.05)}
.hbx-path:hover{border-color:#7fc3bb;box-shadow:0 14px 34px rgba(20,126,123,.11);transform:translateX(-3px) translateY(-1px)}
.hbx-path.is-active{border-color:#5ab4aa;background:linear-gradient(135deg,#effbf8,#f8fffe);box-shadow:0 18px 34px rgba(20,126,123,.12);inset:unset}
.hbx-path-icon{width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,#edf5f6,#e4f2ef)}
.hbx-path-text strong{font-size:14px}
.hbx-path-text small,.hbx-mini-kicker,.hbx-hint,.hbx-visual-top,.hbx-phone-note,.hbx-disclaimer,.hbx-side-metric small{display:none!important}
.hbx-panel-wrap{margin-top:26px;padding-top:24px;border-top:1px solid #ecf2f1}
.hbx-field label{font-size:13px;font-weight:700;color:#48626f}
.hbx-field output{font-size:13px}
.hbx-visual{border-radius:28px;border-color:#d8e8e8;box-shadow:0 20px 60px rgba(17,56,66,.08);padding:22px 24px 22px;background:radial-gradient(ellipse at 70% 30%,rgba(181,236,228,.7) 0%,transparent 56%),linear-gradient(160deg,#edf8f6 0%,#eef6f7 50%,#e9f0f4 100%)}
.hbx-device-scene{min-height:500px}
.hbx-phone{box-shadow:30px 34px 48px rgba(19,86,97,.22),4px 9px 18px rgba(34,90,91,.12),inset 2px 0 3px #fff}
.hbx-side-metric{left:4%;bottom:13%;padding:15px 18px;border-radius:18px;box-shadow:0 16px 34px rgba(25,91,91,.16);background:rgba(255,255,255,.96);border-color:#dceaea}
.hbx-side-metric span{font-size:11px;color:#5e7c84;font-weight:700}
.hbx-side-metric strong{font-size:28px;color:#0f5561}
.hbx-insight{margin-top:10px;border-radius:18px;padding:15px 16px;box-shadow:0 12px 26px rgba(65,101,104,.08)}
.hbx-insight p{font-size:12px;line-height:2.1;color:#42616b}
.hbx-bottom{padding-top:28px;align-items:center}
.hbx-bottom-copy b{font-size:15px}
.hbx-bottom-copy span{font-size:13px;color:#617983}
.hbx-btn{padding:15px 22px;border-radius:15px;font-size:13px}
@media(max-width:760px){
  .hbx-steps{gap:8px;justify-content:flex-start}
  .hbx-step{font-size:11px;padding:7px 10px}
  .hbx-step b{width:26px;height:26px}
  .hbx-controls{padding:22px 18px}
  .hbx-visual{padding:18px 12px}
  .hbx-device-scene{min-height:455px}
  .hbx-side-metric{left:2%;bottom:12%;padding:12px 14px}
}