/* ============================================================================
   "Watch how it works" — in-browser animated explainer modal.
   Five auto-advancing scenes with captions + optional Web Speech voice-over.
   ========================================================================== */

/* Trigger button under the hero search */
.hiw-trigger{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(100deg,var(--accent),var(--accent-3));color:#fff;border:none;border-radius:100px;padding:11px 22px;font-family:'Inter',sans-serif;font-size:14.5px;font-weight:600;cursor:pointer;margin-top:16px;box-shadow:0 8px 22px -10px rgba(225,87,43,.5);transition:transform .15s,filter .15s;}
.hiw-trigger:hover{transform:translateY(-1px);filter:brightness(1.08);}
.hiw-trigger-sub{opacity:.85;font-weight:500;font-size:13px;}

/* Modal */
#hiwBg{position:fixed;inset:0;background:rgba(13,27,42,.86);display:flex;align-items:center;justify-content:center;z-index:200;opacity:0;pointer-events:none;transition:opacity .25s;padding:16px;}
#hiwBg.open{opacity:1;pointer-events:auto;}
.hiw-panel{background:#fff;border-radius:20px;max-width:780px;width:100%;box-shadow:0 30px 80px -20px rgba(0,0,0,.5);overflow:hidden;display:flex;flex-direction:column;position:relative;max-height:calc(100vh - 32px);}
.hiw-close{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;background:rgba(13,27,42,.85);color:#fff;border:none;font-size:16px;cursor:pointer;z-index:5;display:flex;align-items:center;justify-content:center;}

/* Stage */
.hiw-stage{position:relative;aspect-ratio:16/10;background:linear-gradient(135deg,#f7f9fb,#eef3f5);overflow:hidden;}
.hiw-scene{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:24px 24px 92px;opacity:0;visibility:hidden;transition:opacity .35s ease;}
.hiw-scene.active{opacity:1;visibility:visible;}
.hiw-caption{position:absolute;left:18px;right:18px;bottom:18px;background:rgba(13,27,42,.92);color:#fff;font-family:'Inter',sans-serif;font-size:14px;line-height:1.55;padding:12px 18px;border-radius:10px;z-index:3;}
@media(max-width:520px){.hiw-caption{font-size:12.5px;padding:10px 14px;}}

/* Controls */
.hiw-controls{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-top:1px solid var(--line);background:var(--bg-soft);font-family:'Inter',sans-serif;font-size:13px;gap:12px;flex-wrap:wrap;}
.hiw-controls .left,.hiw-controls .right{display:flex;align-items:center;gap:10px;}
.hiw-controls button{background:transparent;border:none;color:var(--ink);font-size:13px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:8px;}
.hiw-controls button:hover{background:rgba(13,27,42,.06);}
.hiw-time{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink-soft);}
.hiw-dots{display:flex;gap:6px;}
.hiw-dots span{width:8px;height:8px;border-radius:50%;background:var(--line-strong);cursor:pointer;transition:background .2s,transform .15s;}
.hiw-dots span:hover{transform:scale(1.25);}
.hiw-dots span.on{background:var(--accent);}

/* ── Scene 1: The phone-call maze ─────────────────────────────────── */
.hiw-s1{position:relative;}
.hiw-s1 .core{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);width:84px;height:84px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-3));display:flex;align-items:center;justify-content:center;color:#fff;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:42px;box-shadow:0 16px 40px -10px rgba(225,87,43,.5);}
.hiw-s1 .chip{position:absolute;background:#fff;border:1px solid var(--line);border-radius:100px;padding:7px 14px;font-size:12.5px;font-weight:600;color:var(--ink);box-shadow:var(--shadow);opacity:0;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;}
.hiw-s1.active .chip{animation:hiw-pop .55s cubic-bezier(.34,1.56,.64,1) forwards;}
.hiw-s1.active .c1{animation-delay:.3s;}.hiw-s1.active .c2{animation-delay:1.0s;}.hiw-s1.active .c3{animation-delay:1.7s;}.hiw-s1.active .c4{animation-delay:2.4s;}.hiw-s1.active .c5{animation-delay:3.1s;}
.hiw-s1 .c1{left:6%;top:12%;}
.hiw-s1 .c2{right:6%;top:12%;}
.hiw-s1 .c3{left:4%;top:60%;}
.hiw-s1 .c4{right:4%;top:60%;}
.hiw-s1 .c5{left:50%;transform:translateX(-50%);top:78%;}
.hiw-s1 .day{position:absolute;top:14px;right:18px;font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--ink-soft);background:rgba(255,255,255,.9);padding:5px 9px;border-radius:6px;border:1px solid var(--line);opacity:0;}
.hiw-s1.active .day{animation:hiw-fade .5s 4.2s forwards;}
@keyframes hiw-pop{0%{opacity:0;transform:translateY(10px) scale(.92);}50%{transform:translateY(-3px) scale(1.05);}100%{opacity:1;transform:translateY(0) scale(1);}}
.hiw-s1 .c5{transform:translateX(-50%) translateY(10px) scale(.92);}
.hiw-s1.active .c5{animation:hiw-pop-c5 .55s 3.1s cubic-bezier(.34,1.56,.64,1) forwards;}
@keyframes hiw-pop-c5{0%{opacity:0;transform:translateX(-50%) translateY(10px) scale(.92);}50%{transform:translateX(-50%) translateY(-3px) scale(1.05);}100%{opacity:1;transform:translateX(-50%) translateY(0) scale(1);}}

/* ── Scene 2: Burnout ─────────────────────────────────────────────── */
.hiw-s2{flex-direction:column;gap:16px;}
.hiw-s2 .figure{font-size:64px;line-height:1;opacity:0;transform:translateY(10px);}
.hiw-s2.active .figure{animation:hiw-rise .5s .1s forwards;}
.hiw-s2 .counters{display:flex;gap:24px;opacity:0;transform:translateY(10px);}
.hiw-s2.active .counters{animation:hiw-rise .5s 1.0s forwards;}
.hiw-s2 .counters .ctr{text-align:center;}
.hiw-s2 .counters .num{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:34px;color:var(--accent-text);letter-spacing:-.02em;line-height:1;}
.hiw-s2 .counters .lbl{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin-top:6px;}
.hiw-s2 .ouch{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:17px;color:var(--ink);text-align:center;opacity:0;transform:translateY(10px);}
.hiw-s2.active .ouch{animation:hiw-rise .5s 2.2s forwards;}
@keyframes hiw-rise{to{opacity:1;transform:translateY(0);}}

/* ── Scene 3: Unbanking dashboard ─────────────────────────────────── */
.hiw-s3 .dash{width:84%;max-width:520px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg);padding:18px;display:flex;flex-direction:column;gap:9px;}
.hiw-s3 .addr-bar{background:var(--bg-soft);border-radius:8px;padding:9px 12px;font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--ink-soft);}
.hiw-s3 .badge-ok{display:inline-flex;align-items:center;gap:6px;background:rgba(14,165,164,.16);color:var(--teal-text);font-size:11px;font-weight:700;padding:4px 10px;border-radius:100px;width:max-content;opacity:0;transform:translateY(6px);}
.hiw-s3.active .badge-ok{animation:hiw-rise .4s .4s forwards;}
.hiw-s3 .qcard{display:flex;justify-content:space-between;align-items:center;background:var(--bg-soft);border:1px solid var(--line);border-radius:10px;padding:9px 12px;font-size:12.5px;opacity:0;transform:translateY(10px);}
.hiw-s3 .qcard .name{font-weight:600;color:var(--ink);}
.hiw-s3 .qcard .amt{font-family:'JetBrains Mono',monospace;font-weight:700;color:var(--ink);}
.hiw-s3.active .q1{animation:hiw-rise .4s 1.2s forwards;}
.hiw-s3.active .q2{animation:hiw-rise .4s 1.7s forwards;}
.hiw-s3.active .q3{animation:hiw-rise .4s 2.2s forwards;}
.hiw-s3.active .q4{animation:hiw-rise .4s 2.7s forwards;}
.hiw-s3 .qcard.accepted{background:linear-gradient(135deg,rgba(225,87,43,.10),rgba(109,92,245,.10));border-color:rgba(225,87,43,.3);}
.hiw-s3 .qcard .check{color:var(--accent);font-weight:700;margin-left:6px;}
.hiw-s3.active .q4{animation:hiw-rise .4s 2.7s forwards,hiw-flash 1s 3.6s;}
@keyframes hiw-flash{0%,100%{box-shadow:none;}50%{box-shadow:0 0 0 4px rgba(225,87,43,.22);}}

/* ── Scene 4: The flip ────────────────────────────────────────────── */
.hiw-s4 .score{display:grid;grid-template-columns:1fr 1fr;gap:16px;width:92%;max-width:560px;}
.hiw-s4 .col{padding:18px;border-radius:14px;border:1px solid var(--line);opacity:0;transform:translateY(10px);}
.hiw-s4.active .col1{animation:hiw-rise .5s .1s forwards;}
.hiw-s4.active .col2{animation:hiw-rise .5s .6s forwards;}
.hiw-s4 .col1{background:var(--bg-soft);color:var(--ink-soft);}
.hiw-s4 .col2{background:linear-gradient(135deg,rgba(225,87,43,.12),rgba(109,92,245,.12));border-color:rgba(225,87,43,.32);}
.hiw-s4 .lbl{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:8px;}
.hiw-s4 .v{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:24px;color:var(--ink);letter-spacing:-.02em;}
.hiw-s4 .sub{font-size:12px;color:var(--ink-soft);margin-top:6px;}
.hiw-s4 .delta{grid-column:1 / -1;text-align:center;margin-top:6px;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:24px;background:linear-gradient(100deg,var(--accent),var(--accent-3));-webkit-background-clip:text;background-clip:text;color:transparent;opacity:0;transform:translateY(10px);}
.hiw-s4.active .delta{animation:hiw-rise .5s 1.4s forwards;}
@media(max-width:520px){.hiw-s4 .score{grid-template-columns:1fr;}}

/* ── Scene 5: CTA ─────────────────────────────────────────────────── */
.hiw-s5{flex-direction:column;gap:18px;}
.hiw-s5 .logo{opacity:0;transform:scale(.94);}
.hiw-s5.active .logo{animation:hiw-pop-in .5s .2s forwards;}
@keyframes hiw-pop-in{to{opacity:1;transform:scale(1);}}
.hiw-s5 .input-mock{width:80%;max-width:420px;background:#fff;border:1px solid var(--line-strong);border-radius:10px;padding:13px 16px;font-family:'Inter',sans-serif;font-size:14.5px;color:var(--ink-soft);opacity:0;transform:translateY(10px);display:flex;align-items:center;gap:2px;}
.hiw-s5.active .input-mock{animation:hiw-rise .5s 1.0s forwards;}
.hiw-s5 .caret{display:inline-block;width:1.5px;height:14px;background:var(--ink);margin-left:2px;animation:hiw-blink 1s steps(2) infinite;}
@keyframes hiw-blink{50%{opacity:0;}}
.hiw-s5 .tag{font-size:13px;color:var(--ink-soft);opacity:0;transform:translateY(10px);}
.hiw-s5.active .tag{animation:hiw-rise .4s 1.8s forwards;}

@keyframes hiw-fade{to{opacity:1;}}