/* BHROMI v046 - "BHROMI ব্যবহার করুন সহজেই" how-to guide on Home (design image shown 1:1, full width).
   Tap areas sit exactly over the 3 "ভিডিও দেখুন" buttons. Set the video links in index-Bhx1Shell.js -> HOME_GUIDE_VIDEOS. */
.hguide{position:relative;margin:0;padding:0;width:100%;line-height:0;background:transparent}
.hguide-img{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none}
.hguide-btn{position:absolute;left:15.65%;width:24.4%;border-radius:999px;display:block;-webkit-tap-highlight-color:transparent;cursor:pointer;background:transparent;outline-offset:2px}
.hguide-b1{top:33.41%;height:5.48%}
.hguide-b2{top:60.64%;height:5.48%}
.hguide-b3{top:87.51%;height:5.48%}

/* v055: image now ends with the 3rd card's rounded bottom + breathing room; background matches page (#f4f7fc) so top/bottom blend */
.is-home .hguide{background:#f4f7fc!important;margin:-6px 0 4px}

/* v059: 3 separate tappable cards (each its own link) instead of one big image */
.is-home .hguide{margin:-6px 0 4px;line-height:0}
.hguide-head{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none}
.hguide-card{display:block;width:100%;-webkit-tap-highlight-color:transparent;cursor:pointer;transition:transform .15s ease,filter .15s ease}
.hguide-card:active{transform:scale(.985);filter:brightness(.97)}
.hguide-card img{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none}
.hguide-card:focus-visible{outline:3px solid #045ff4;outline-offset:-3px;border-radius:24px}

/* v060: heading wrapper + 3 animated sun rays beside "BHROMI" */
.hguide-headwrap{position:relative;width:100%;line-height:0}
.hguide-headwrap .hguide-head{display:block;width:100%;height:auto}
.hguide-ray{position:absolute;pointer-events:none;user-select:none;-webkit-user-drag:none;transform-origin:70% 60%;will-change:transform,opacity;animation:hgRay 1.8s ease-in-out infinite}
.hguide-ray1{left:5.000%;top:10.638%;width:2.312%;height:22.128%;--dx:-2.80px;--dy:-4.14px;animation-delay:0.00s}
.hguide-ray2{left:2.562%;top:28.085%;width:3.375%;height:14.894%;--dx:-4.96px;--dy:-0.61px;animation-delay:0.22s}
.hguide-ray3{left:2.562%;top:47.660%;width:3.312%;height:13.617%;--dx:-4.18px;--dy:2.74px;animation-delay:0.44s}
@keyframes hgRay{0%,100%{opacity:.35;transform:translate(0,0) scale(.94)}40%{opacity:1;transform:translate(var(--dx),var(--dy)) scale(1.1)}70%{opacity:.9;transform:translate(var(--dx),var(--dy)) scale(1.04)}}
@media (prefers-reduced-motion:reduce){.hguide-ray{animation:none}}