/* Hambank • 18-second auto-play story in the phone, scoped to #app-tour.
   All figures and allocations shown are clearly illustrative, not financial advice. */
#app-tour .app-premiere{grid-template-columns:.82fr 1.18fr;gap:44px}
#app-tour .app-premiere-copy{padding:14px 0}
#app-tour .app-premiere h2{font-size:clamp(28px,3vw,42px);line-height:1.64;letter-spacing:-.8px}
#app-tour .hb-story-summary{font-size:15px;line-height:2.3;color:#d1dddd;margin:10px 0 27px;max-width:500px}
#app-tour .hb-story-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;margin-bottom:28px;max-width:440px}
#app-tour .hb-story-steps span{display:flex;align-items:center;gap:10px;color:#ebf2f1;font-weight:650;font-size:13px;padding:11px 13px;background:rgba(255,255,255,.045);border:1px solid rgba(199,222,219,.13);border-radius:12px}
#app-tour .hb-story-steps i{font-style:normal;color:#e4c899;font-size:11px;font-weight:800}
#app-tour .hb-story-cta{font-size:14px;padding:13px 24px}
#app-tour .hb-story-disclaimer{font-size:11px;color:#9ab1b5;line-height:2;margin-top:16px;max-width:460px}
#app-tour .cinema-visual{min-height:595px;border-radius:30px;background:radial-gradient(circle at 45% 29%,rgba(13,156,154,.21),transparent 39%),radial-gradient(circle at 69% 54%,rgba(211,169,99,.15),transparent 45%),linear-gradient(146deg,#102534,#1b3444 55%,#0f2030)!important}
#app-tour .cinema-visual:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 61px,rgba(255,255,255,.024) 62px),repeating-linear-gradient(90deg,transparent 0 61px,rgba(255,255,255,.024) 62px);mask-image:linear-gradient(180deg,transparent 3%,#060606 50%,transparent 96%);pointer-events:none}
#app-tour .cinema-glint{width:292px;height:292px;top:19%;opacity:.52;box-shadow:0 0 0 62px rgba(255,255,255,0.015),0 0 0 124px rgba(255,255,255,0.008)}
#app-tour .cinema-floor{opacity:.65}
#app-tour .cinema-shadow{bottom:89px;width:250px;opacity:.7}
#app-tour .hb-story-orbit{pointer-events:none;position:absolute;left:50%;top:47%;border:1px solid rgba(216,176,104,.2);border-radius:50%;transform:translate(-50%,-50%) rotate(-22deg)}
#app-tour .hb-story-orbit-a{width:370px;height:465px;box-shadow:inset 0 0 28px rgba(12,171,162,0.036)}
#app-tour .hb-story-orbit-b{width:450px;height:285px;transform:translate(-50%,-50%) rotate(35deg);border-color:rgba(34,182,177,.13)}
#app-tour .hb-story-topline{position:absolute;top:22px;right:25px;left:25px;display:flex;align-items:center;gap:8px;font-size:11px;color:#bdd0d1;letter-spacing:.1px}
#app-tour .hb-story-topline small{margin-right:auto;color:#c8b287;border:1px solid rgba(206,178,115,.3);border-radius:8px;padding:3px 7px;font-size:10px}
#app-tour .hb-story-led{width:7px;height:7px;background:#34aa9a;border-radius:50%;box-shadow:0 0 12px #31ad9c;animation:hbLed 3s ease-in-out infinite}
@keyframes hbLed{50%{opacity:.35}}
#app-tour .hb-story-phone{width:223px;height:437px;margin-left:-111.5px;margin-top:-218.5px;border:7px solid #1f313b;border-radius:38px;box-shadow:inset 0 0 0 2px #94a1a1,9px 18px 20px #0616264d,24px 30px 85px #0606065c;animation:hbStory18Phone 18s cubic-bezier(.28,.65,.28,1) infinite both!important;transform-origin:50% 50% !important;z-index:3}
#app-tour .hb-story-phone:after{animation:none!important}
#app-tour .phone-back{border-radius:29px;animation:hbStory18Back 18s linear infinite both!important}
#app-tour .phone-screen{border-radius:28px;animation:hbStory18Screen 18s linear infinite both!important;opacity:0}
#app-tour .phone-notch{z-index:12;top:7px;width:57px;height:16px;border:2px solid #243a46;background:#112b39}
@keyframes hbStory18Phone{
  0%{transform:translate3d(-22px,105px,-110px) rotateX(69deg) rotateY(-38deg) rotateZ(-20deg) scale(.74);opacity:0}
  3%{opacity:1}
  10%,14%{transform:translate3d(0,-17px,5px) rotateX(6deg) rotateY(-8deg) rotateZ(-3deg) scale(1.03);opacity:1}
  19%,89%{transform:translate3d(0,-15px,10px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1.025);opacity:1}
  98%{transform:translate3d(0,-16px,6px) rotateX(0deg) rotateY(13deg) rotateZ(2deg) scale(1.00);opacity:1}
  100%{transform:translate3d(-22px,105px,-110px) rotateX(69deg) rotateY(-38deg) rotateZ(-20deg) scale(.74);opacity:0}
}
@keyframes hbStory18Screen{0%,8%{opacity:0}12%,98%{opacity:1}100%{opacity:0}}
@keyframes hbStory18Back{0%,8%{opacity:1}12%,98%{opacity:0}100%{opacity:1}}
#app-tour .hb-story-screens{height:100%;position:relative;background:#f3f7f5;overflow:hidden}
#app-tour .hb-story-scene{position:absolute;inset:0;background:#f4f7f6;opacity:0;transform:translateY(11px) scale(.98);will-change:opacity,transform;animation-duration:18s!important;animation-iteration-count:infinite!important;animation-timing-function:ease-in-out!important;animation-fill-mode:both!important}
#app-tour .hb-story-scan{animation-name:hbStory18S1!important}
#app-tour .hb-story-risk{animation-name:hbStory18S2!important}
#app-tour .hb-story-goals{animation-name:hbStory18S3!important}
#app-tour .hb-story-portfolio{animation-name:hbStory18S4!important}
#app-tour .hb-story-finish{animation-name:hbStory18S5!important;background:linear-gradient(165deg,#f5f9f8,#eff4f3)}
@keyframes hbStory18S1{0%,10%{opacity:0;transform:translateY(11px) scale(.98)}12.5%,26.4%{opacity:1;transform:none}28.3%,100%{opacity:0;transform:translateY(-12px) scale(1.01)}}
@keyframes hbStory18S2{0%,26.4%{opacity:0;transform:translateY(11px) scale(.98)}29%,48.6%{opacity:1;transform:none}50.6%,100%{opacity:0;transform:translateY(-12px) scale(1.01)}}
@keyframes hbStory18S3{0%,48.6%{opacity:0;transform:translateY(11px) scale(.98)}51%,70.8%{opacity:1;transform:none}72.9%,100%{opacity:0;transform:translateY(-12px) scale(1.01)}}
@keyframes hbStory18S4{0%,70.8%{opacity:0;transform:translateY(11px) scale(.98)}73.5%,87.3%{opacity:1;transform:none}89.7%,100%{opacity:0;transform:translateY(-12px) scale(1.01)}}
@keyframes hbStory18S5{0%,87.5%{opacity:0;transform:scale(.97)}90%,97.8%{opacity:1;transform:none}100%{opacity:0;transform:scale(1.01)}}
#app-tour .hb-story-apphead{background:linear-gradient(115deg,#153847,#1c6e6a);color:#fcfcfc;padding:37px 13px 14px;font-size:12px;display:flex;align-items:center;justify-content:space-between;gap:5px}
#app-tour .hb-story-apphead small{font-size:8px;color:#bfe1db;white-space:nowrap}
#app-tour .hb-story-screen-content{padding:11px 10px;color:#23404c}
#app-tour .hb-story-scan-card{position:relative;background:white;border:1px solid #e9f0ee;border-radius:13px;padding:11px;overflow:hidden;box-shadow:0 8px 23px #1b3b4808}
#app-tour .hb-story-card-head{display:flex;justify-content:space-between;gap:3px;font-size:10px;font-weight:800;align-items:center}
#app-tour .hb-story-scan-indicator{font-size:7.5px;color:#1c7c74;background:#edf6f4;border-radius:10px;padding:3px 5px;white-space:nowrap}
#app-tour .hb-story-profile-icon{display:grid;place-items:center;height:94px}
#app-tour .hb-story-profile-icon svg{width:70px;height:70px;filter:drop-shadow(0 6px 8px #207b7518)}
#app-tour .hb-story-scan-line{position:absolute;left:8px;right:8px;top:49px;height:3px;background:linear-gradient(90deg,transparent,#39bdb0,#e5c79a,#39bdb0,transparent);box-shadow:0 0 16px #2baf9f;opacity:0;animation:hbStory18Scan 18s ease-in-out infinite both}
@keyframes hbStory18Scan{0%,11%{opacity:0;transform:translateY(0)}13%{opacity:1;transform:translateY(0)}25%{opacity:1;transform:translateY(155px)}27%,100%{opacity:0;transform:translateY(155px)}}
#app-tour .hb-story-metric{display:flex;justify-content:space-between;align-items:center;margin:7px 0;background:#f5f8f7;border-radius:8px;padding:7px;font-size:9px;color:#3f5960}
#app-tour .hb-story-check{color:#1e8378;font-weight:900;opacity:0;animation:hbStory18Checks 18s linear infinite}
#app-tour .hb-story-metric:nth-of-type(4) .hb-story-check{animation-delay:.25s}#app-tour .hb-story-metric:nth-of-type(5) .hb-story-check{animation-delay:.5s}
@keyframes hbStory18Checks{0%,16%{opacity:0;transform:scale(.5)}23%,28%{opacity:1;transform:scale(1)}29%,100%{opacity:0}}
#app-tour .hb-story-screen-note{font-size:8px;color:#89979a;text-align:center;padding:8px 2px}
#app-tour .hb-story-risk-chart{height:138px;background:white;border:1px solid #e7eeeb;border-radius:13px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;box-shadow:0 7px 15px #1a324006}
#app-tour .hb-story-risk-chart svg{height:106px;width:130px}
#app-tour .hb-story-risk-chart>div{font-size:9px;color:#1e6e6a;font-weight:900;margin-top:-6px}
#app-tour .hb-story-risk-shape{transform:scale(.07);transform-origin:50% 63%;animation:hbStory18Polygon 18s ease-out infinite both}
@keyframes hbStory18Polygon{0%,29%{transform:scale(.07);opacity:0}39%,49.5%{transform:scale(1);opacity:1}51%,100%{transform:scale(.07);opacity:0}}
#app-tour .hb-story-risk-row{display:flex;align-items:center;justify-content:space-between;margin-top:10px;background:#fcfcfc;border:1px solid #ebf0ee;padding:8px;border-radius:9px;gap:8px}
#app-tour .hb-story-risk-row div{min-width:77px}
#app-tour .hb-story-risk-row b{font-size:9px;display:block}
#app-tour .hb-story-risk-row small{font-size:7.5px;color:#839498}
#app-tour .hb-story-risk-track{height:7px;border-radius:6px;flex:1;background:#eaf0ee;overflow:hidden;direction:ltr}
#app-tour .hb-story-risk-track i{height:100%;display:block;width:var(--target);border-radius:6px;background:linear-gradient(90deg,#1c948d,#c2a27a);transform-origin:left;animation:hbStory18Bars 18s ease-out infinite both}
@keyframes hbStory18Bars{0%,28%{transform:scaleX(0)}42%,50%{transform:scaleX(1)}51%,100%{transform:scaleX(0)}}
#app-tour .hb-story-tiny-intro{font-size:10px;font-weight:800;color:#3f5e65;margin:3px 0 12px}
#app-tour .hb-story-goal-card{display:flex;align-items:center;gap:8px;padding:10px 8px;border-radius:11px;background:white;border:1px solid #eaefee;margin-bottom:10px;box-shadow:0 6px 14px #13313e06}
#app-tour .hb-story-goal-symbol{display:grid;place-items:center;flex-shrink:0;width:29px;height:29px;border-radius:9px;color:#217b74;background:#eaf6f2;font-size:20px}
#app-tour .hb-story-goal-card b{font-size:10px;display:block}
#app-tour .hb-story-goal-card small{font-size:8px;color:#7c8e94;display:block;margin-top:2px}
#app-tour .hb-story-goal-choice{animation:hbStory18Goal 18s ease-out infinite both}
@keyframes hbStory18Goal{0%,54%{background:white;border-color:#eaefee}60%,72%{background:#edf8f4;border-color:#299587;box-shadow:0 7px 25px #27938513}73%,100%{background:white;border-color:#eaefee}}
#app-tour .hb-story-select-check{margin-right:auto;opacity:0;color:#1e8177;font-size:14px;font-weight:900;animation:hbStory18GoalCheck 18s linear infinite both}
@keyframes hbStory18GoalCheck{0%,56%{opacity:0;transform:scale(.6)}61%,72%{opacity:1;transform:scale(1)}73%,100%{opacity:0}}
#app-tour .hb-story-goal-progress{background:white;border-radius:11px;border:1px solid #ebf0ee;padding:11px;margin-top:12px}
#app-tour .hb-story-goal-progress-label{display:flex;justify-content:space-between;color:#53666d;font-size:8px;gap:5px;margin-bottom:9px}
#app-tour .hb-story-goal-progress-label b{color:#1d8175}
#app-tour .hb-story-progress-track{height:7px;border-radius:7px;overflow:hidden;background:#ecf1ef}
#app-tour .hb-story-progress-track i{height:100%;width:100%;display:block;background:linear-gradient(90deg,#219089,#c6ab7e);transform-origin:right;animation:hbStory18GoalBar 18s linear infinite both}
@keyframes hbStory18GoalBar{0%,49%{transform:scaleX(0)}68%,73%{transform:scaleX(1)}74%,100%{transform:scaleX(0)}}
#app-tour .hb-story-portfolio-caption{font-size:9px;line-height:1.7;color:#657c80;text-align:center;margin:2px 0 5px}
#app-tour .hb-story-donut{position:relative;display:grid;place-items:center;width:158px;height:158px;border-radius:50%;margin:7px auto 13px;background:conic-gradient(#1e8882 0 45%,#26465a 45% 80%,#c6a87e 80% 100%);animation:hbStory18Donut 18s ease-out infinite both;filter:drop-shadow(0 6px 12px #1e63611e)}
#app-tour .hb-story-donut:before{content:"";width:110px;height:110px;border-radius:50%;background:#fcfcfc;position:absolute}
#app-tour .hb-story-donut>div{position:relative;z-index:1;text-align:center}
#app-tour .hb-story-donut b{font-size:17px;color:#1e424d;display:block}
#app-tour .hb-story-donut small{font-size:8px;color:#819398}
@keyframes hbStory18Donut{0%,71%{transform:rotate(-50deg) scale(.65);opacity:0}78%,89%{transform:rotate(0deg) scale(1);opacity:1}90%,100%{transform:rotate(0deg) scale(.65);opacity:0}}
#app-tour .hb-story-legend{display:flex;justify-content:space-between;margin:7px 4px;color:#3f555b;font-size:10px}
#app-tour .hb-story-legend>span{display:flex;align-items:center;gap:7px}
#app-tour .hb-story-legend i{display:inline-block;width:9px;height:9px;border-radius:3px}
#app-tour .hb-story-legend i.fixed{background:#1e8882}#app-tour .hb-story-legend i.stocks{background:#26465a}#app-tour .hb-story-legend i.gold{background:#c6a87e}
#app-tour .hb-story-finish-inner{height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:28px 15px}
#app-tour .hb-story-finish-inner img{width:78px;max-height:95px;object-fit:contain;margin-bottom:18px}
#app-tour .hb-story-finish-inner b{font-size:19px;line-height:1.8;color:#1d3c49}
#app-tour .hb-story-finish-inner>span{font-size:9px;line-height:2;color:#6d7f85;margin:12px 0 17px}
#app-tour .hb-story-finish-mark{border-radius:18px;color:#196e69;background:#ebf5f2;padding:8px 12px;font-size:10px;font-weight:900}
#app-tour .hb-story-bottom{position:absolute;left:24px;right:24px;bottom:18px;color:#b6cdcd;z-index:5}
#app-tour .hb-story-timeline{height:3px;overflow:hidden;border-radius:4px;background:#38515e;direction:ltr}
#app-tour .hb-story-time-progress{display:block;background:linear-gradient(90deg,#3abaa9,#e0c291);width:100%;height:100%;transform-origin:left;animation:hbStory18Progress 18s linear infinite}
@keyframes hbStory18Progress{0%{transform:scaleX(0)}100%{transform:scaleX(1)}}
#app-tour .hb-story-stages{display:flex;justify-content:space-around;gap:7px;font-size:10px;margin-top:9px;color:#b3c6c7}
#app-tour .hb-story-float{position:absolute;z-index:5;padding:9px 12px;border:1px solid rgba(118,202,188,.34);border-radius:14px;color:#f0f9f6;box-shadow:0 14px 28px rgba(0,17,31,0.132);font-size:11px;font-weight:700;background:linear-gradient(125deg,rgba(13,52,70,.93),rgba(9,89,90,.85));backdrop-filter:blur(10px);opacity:0;pointer-events:none;animation:hbStory18Float 18s ease-in-out infinite both}
#app-tour .hb-story-float-one{left:22px;top:28%;animation-delay:0s;animation-name:hbStory18Float1}
#app-tour .hb-story-float-two{right:15px;top:48%;animation-name:hbStory18Float2}
#app-tour .hb-story-float-three{left:22px;top:36%;animation-name:hbStory18Float3}
#app-tour .hb-story-float-four{right:16px;top:36%;animation-name:hbStory18Float4}
@keyframes hbStory18Float1{0%,11%{opacity:0;transform:translateY(10px)}14%,25%{opacity:1;transform:none}28%,100%{opacity:0;transform:translateY(-8px)}}
@keyframes hbStory18Float2{0%,27%{opacity:0;transform:translateY(10px)}31%,47%{opacity:1;transform:none}51%,100%{opacity:0;transform:translateY(-8px)}}
@keyframes hbStory18Float3{0%,50%{opacity:0;transform:translateY(10px)}54%,70%{opacity:1;transform:none}74%,100%{opacity:0;transform:translateY(-8px)}}
@keyframes hbStory18Float4{0%,72%{opacity:0;transform:translateY(10px)}75%,86%{opacity:1;transform:none}90%,100%{opacity:0;transform:translateY(-8px)}}
@media(max-width:950px){#app-tour .app-premiere{grid-template-columns:1fr;gap:18px}#app-tour .app-premiere-copy{text-align:right;max-width:700px}#app-tour .hb-story-steps{max-width:none;grid-template-columns:repeat(4,minmax(0,1fr))}#app-tour .cinema-visual{min-height:575px}#app-tour .hb-story-summary{max-width:700px}}
@media(max-width:610px){#app-tour{padding:50px 0 55px}#app-tour .app-premiere h2{font-size:29px}#app-tour .hb-story-summary{font-size:13px}#app-tour .hb-story-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:20px}#app-tour .hb-story-steps span{font-size:11px;padding:9px 10px}#app-tour .cinema-visual{min-height:532px;border-radius:23px}#app-tour .hb-story-phone{transform-origin:center!important}#app-tour .hb-story-float{display:none}#app-tour .hb-story-float-one,#app-tour .hb-story-float-three{left:5px}#app-tour .hb-story-float-two,#app-tour .hb-story-float-four{right:5px}#app-tour .hb-story-orbit-a{width:310px;height:410px}#app-tour .hb-story-orbit-b{width:355px;height:260px}#app-tour .hb-story-phone{top:49%}#app-tour .cinema-shadow{bottom:70px}}
/* Motion-sensitive devices: show one meaningful final-state screen rather than spinning the phone. */
@media(prefers-reduced-motion:reduce){
 #app-tour .hb-story-phone{animation:none!important;opacity:1;transform:translate3d(0,-15px,0)!important}
 #app-tour .phone-screen{animation:none!important;opacity:1!important}
 #app-tour .phone-back{animation:none!important;opacity:0!important}
 #app-tour .hb-story-scene{animation:none!important;opacity:0!important}
 #app-tour .hb-story-portfolio{opacity:1!important;transform:none!important}
 #app-tour .hb-story-donut{animation:none!important;opacity:1;transform:none}
 #app-tour .hb-story-float{animation:none!important;opacity:0}
 #app-tour .hb-story-time-progress{animation:none!important;transform:scaleX(1)}
}