/* ============================================================
   Brikito · "How it works" interactive scroll module
   All rules scoped under .bkt-hiw  ·  no global selectors.
   Embed: <link rel="stylesheet" href="bkt-hiw.css" /> in <head>,
   the <section id="how" class="s bkt-hiw"> markup, and
   <script src="bkt-hiw.js"></script> before </body>.
   ============================================================ */

.bkt-hiw{--bp:#FAF8F4;--bi:#17150F;--bc:#BE6A4A;--bn:#1A3A5C;--bh:#E9E4D8;--bmut:#7A736A;}

/* ---------- scene shells ---------- */
.bkt-hiw .bkt-sc{position:relative;background:var(--bp);}
.bkt-hiw .bkt-s1{height:240vh;border-top:1px solid var(--bh);}
.bkt-hiw .bkt-s2{height:200vh;}
.bkt-hiw .bkt-s3{height:205vh;}
.bkt-hiw .bkt-s4{height:240vh;}
.bkt-hiw .bkt-s5{height:210vh;border-bottom:1px solid var(--bh);}
.bkt-hiw .bkt-pin{position:sticky;top:60px;height:calc(100vh - 60px);overflow:hidden;display:flex;align-items:center;}
.bkt-hiw .bkt-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:center;width:100%;}
.bkt-hiw .s3g{grid-template-columns:.68fr 1.32fr;}
.bkt-hiw .s4g{grid-template-columns:.72fr 1.28fr;}
.bkt-hiw .bkt-stage{position:relative;width:100%;}

/* ---------- left copy ---------- */
.bkt-hiw .bkt-tag{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.14em;color:var(--bc);margin-bottom:16px;}
.bkt-hiw .bkt-copy h3{font-size:clamp(26px,2.9vw,38px);line-height:1.06;letter-spacing:-.03em;font-weight:500;color:var(--bi);margin:0 0 20px;text-wrap:balance;}
.bkt-hiw .bkt-beats{display:flex;flex-direction:column;gap:9px;margin:0 0 28px;}
.bkt-hiw .bb{font-size:14px;line-height:1.45;color:var(--bmut);opacity:.3;transform:translateX(-6px);transition:.45s ease;border-left:2px solid transparent;padding-left:11px;}
.bkt-s1.at1 .bb-a,.bkt-s1.at3 .bb-b,.bkt-s1.at5 .bb-c,.bkt-s1.at6 .bb-d,
.bkt-s2.at1 .bb-a,.bkt-s2.at2 .bb-b,.bkt-s2.at4 .bb-c,.bkt-s2.at5 .bb-d,
.bkt-s3.at1 .bb-a,.bkt-s3.at2 .bb-b,.bkt-s3.at4 .bb-c,.bkt-s3.at5 .bb-d,
.bkt-s4.at1 .bb-a,.bkt-s4.at3 .bb-b,.bkt-s4.at4 .bb-c,.bkt-s4.at6 .bb-d,
.bkt-s5.at1 .bb-a,.bkt-s5.at3 .bb-b,.bkt-s5.at4 .bb-c,.bkt-s5.at5 .bb-d{opacity:1;color:var(--bi);border-left-color:var(--bc);transform:none;}
.bkt-hiw .bkt-cap{opacity:0;transform:translateY(8px);transition:.55s ease;font-size:16px;font-weight:500;letter-spacing:-.01em;color:var(--bi);border-top:1px solid var(--bh);padding-top:14px;max-width:34ch;}
.bkt-hiw .bkt-cap::before{content:"\2726\00a0\00a0";color:var(--bc);}
.bkt-s1.at7 .bkt-cap,.bkt-s2.at6 .bkt-cap,.bkt-s3.at6 .bkt-cap,.bkt-s4.at7 .bkt-cap,.bkt-s5.at6 .bkt-cap{opacity:1;transform:none;}

/* ---------- phone mockup ---------- */
.bkt-hiw .bkt-phone{width:288px;margin:0 auto;background:#fff;border:1px solid var(--bh);border-radius:26px;overflow:hidden;box-shadow:0 8px 30px rgba(23,21,15,.08);position:relative;z-index:2;transition:transform .7s cubic-bezier(.2,.8,.2,1);}
.bkt-hiw .ph-chrome{background:var(--bn);color:#FAF8F4;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.14em;padding:9px 15px;display:flex;align-items:center;gap:8px;}
.bkt-hiw .ph-dot{width:6px;height:6px;border-radius:50%;background:var(--bc);}
.bkt-hiw .ph-head{display:flex;gap:10px;padding:12px 14px;border-bottom:1px solid var(--bh);align-items:center;background:#fff;}
.bkt-hiw .ph-av{width:30px;height:30px;border-radius:50%;background:var(--bn);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;flex:none;}
.bkt-hiw .ph-av.bk{background:var(--bc);}
.bkt-hiw .ph-head b{display:block;font-size:13px;color:var(--bi);letter-spacing:-.01em;}
.bkt-hiw .ph-head span{display:block;font-size:10px;color:var(--bmut);font-family:'JetBrains Mono',monospace;margin-top:1px;}
.bkt-hiw .ph-body{padding:14px 12px 16px;display:flex;flex-direction:column;gap:9px;min-height:310px;background:var(--bp);align-items:flex-start;}

/* bubbles */
.bkt-hiw .bub{max-width:88%;font-size:12.5px;line-height:1.42;padding:8px 11px;border-radius:13px;background:#fff;border:1px solid var(--bh);color:var(--bi);opacity:0;transform:translateY(10px) scale(.96);transition:.45s cubic-bezier(.2,.9,.3,1.18);}
.bkt-hiw .bub.me{align-self:flex-end;background:var(--bi);color:#FAF8F4;border-color:var(--bi);}
.bkt-hiw .bub .bt{display:block;font-family:'JetBrains Mono',monospace;font-size:8.5px;opacity:.55;margin-top:3px;text-align:right;}
.bkt-hiw .bub.typing{display:inline-flex;gap:4px;padding:11px 13px;align-self:flex-end;background:var(--bi);max-height:40px;overflow:hidden;}
.bkt-hiw .bub.typing i{width:5px;height:5px;border-radius:50%;background:rgba(250,248,244,.85);}
.bkt-hiw .live .bub.typing i{animation:bktDot 1s ease-in-out infinite;}
.bkt-hiw .bub.typing i:nth-child(2){animation-delay:.15s;}
.bkt-hiw .bub.typing i:nth-child(3){animation-delay:.3s;}
@keyframes bktDot{0%,100%{transform:translateY(0);opacity:.4;}50%{transform:translateY(-3px);opacity:1;}}

/* ---------- scene 1 ---------- */
.bkt-hiw .st1{height:540px;display:flex;align-items:center;justify-content:center;}
.bkt-s1.at1 .b-typing{opacity:1;transform:none;}
.bkt-s1.at2 .b-typing{opacity:0;max-height:0;padding-top:0;padding-bottom:0;margin-top:-9px;transform:scale(.8);}
.bkt-s1.at2 .b-msg{opacity:1;transform:none;}
.bkt-s1.at4 .b-msg{opacity:.45;transform:scale(.97);}
.bkt-hiw .bchip{align-self:flex-end;font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.06em;color:var(--bc);background:#F6EDE6;border:1px solid #EBD7C9;border-radius:999px;padding:4px 10px;opacity:0;transform:translateY(8px) scale(.92);transition:.45s cubic-bezier(.2,.9,.3,1.2);}
.bkt-hiw .bchip::before{content:"\2726 ";}
.bkt-s1.at3 .b-chip{opacity:1;transform:none;}
.bkt-hiw .icard{width:100%;background:#fff;border:1px solid var(--bh);border-radius:12px;overflow:hidden;opacity:0;transform:translateY(14px) scale(.95);transition:.55s cubic-bezier(.2,.9,.3,1.15);}
.bkt-s1.at4 .b-card{opacity:1;transform:none;}
.bkt-hiw .ic-head{display:flex;justify-content:space-between;align-items:center;padding:9px 11px;background:var(--bp);border-bottom:1px solid var(--bh);font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.06em;color:var(--bi);}
.bkt-hiw .ic-st .stp,.bkt-hiw .ic-st .sta,.bkt-hiw .dk-st .stp,.bkt-hiw .dk-st .sta{font-style:normal;font-family:'JetBrains Mono',monospace;font-size:8.5px;letter-spacing:.06em;padding:2px 8px;border-radius:999px;}
.bkt-hiw .stp{border:1px solid rgba(23,21,15,.35);color:var(--bmut);}
.bkt-hiw .sta{background:var(--bc);color:#fff;display:none;}
.bkt-s1.at6 .stp{display:none;}
.bkt-s1.at6 .sta{display:inline-block;}
.bkt-hiw .ic-row{display:flex;justify-content:space-between;gap:10px;padding:7px 11px;border-bottom:1px dashed var(--bh);font-size:11px;color:var(--bmut);}
.bkt-hiw .ic-row:last-child{border-bottom:none;}
.bkt-hiw .ic-row b{color:var(--bi);font-weight:500;font-size:11px;}
.bkt-hiw .b-toast{position:absolute;left:10px;right:10px;top:44px;z-index:5;background:var(--bi);color:#FAF8F4;font-family:'JetBrains Mono',monospace;font-size:10px;padding:9px 11px;border-radius:9px;opacity:0;transform:translateY(-14px);transition:.5s cubic-bezier(.2,.9,.3,1.2);}
.bkt-hiw .b-toast::before{content:"\2713 ";color:var(--bc);}
.bkt-s1.at7 .b-toast{opacity:1;transform:none;}
.bkt-s1.at5 .bkt-phone{transform:translateX(-78px);}

/* desktop approval frame */
.bkt-hiw .bkt-desk{position:absolute;right:-4px;top:50%;width:344px;background:#fff;border:1px solid var(--bh);border-radius:14px;box-shadow:0 8px 30px rgba(23,21,15,.08);transform:translate(118%,-50%);opacity:0;transition:transform .75s cubic-bezier(.2,.8,.2,1),opacity .5s ease;z-index:1;}
.bkt-s1.at5 .b-desk{transform:translate(0,-50%);opacity:1;}
.bkt-hiw .dk-bar{display:flex;align-items:center;gap:6px;padding:9px 12px;border-bottom:1px solid var(--bh);background:var(--bp);border-radius:14px 14px 0 0;}
.bkt-hiw .dk-bar i{width:8px;height:8px;border-radius:50%;background:#E3DCCB;}
.bkt-hiw .dk-bar span{margin-left:6px;font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.08em;color:var(--bmut);}
.bkt-hiw .dk-item{padding:10px 13px;border-bottom:1px solid var(--bh);font-size:12px;color:var(--bi);}
.bkt-hiw .dk-item:last-child{border-bottom:none;}
.bkt-hiw .dk-item.dim{display:flex;justify-content:space-between;gap:10px;color:var(--bmut);font-size:11px;}
.bkt-hiw .dk-item.dim em{font-style:normal;font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.06em;}
.bkt-hiw .dk-item.hot{background:#FAF3EC;}
.bkt-s1.at5 .dk-item.hot{animation:bktPulse 1.1s ease 1 .5s;}
.bkt-hiw .dk-line{display:flex;justify-content:space-between;align-items:center;gap:10px;}
.bkt-hiw .dk-line b{font-weight:500;font-size:12px;letter-spacing:-.005em;}
.bkt-s1.at6 .dk-st .stp{display:none;}
.bkt-s1.at6 .dk-st .sta{display:inline-block;}
.bkt-hiw .dk-sub{font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--bmut);margin:4px 0 9px;}
.bkt-hiw .dk-approve{font:inherit;font-size:12px;font-weight:500;display:inline-flex;align-items:center;gap:6px;padding:7px 16px;border:1px solid var(--bi);background:#fff;color:var(--bi);border-radius:8px;position:relative;overflow:hidden;cursor:default;transition:color .35s .15s;}
.bkt-hiw .dk-approve::before{content:"";position:absolute;inset:0;background:var(--bc);transform:scaleX(0);transform-origin:left;transition:transform .5s ease;}
.bkt-hiw .dk-approve span{position:relative;z-index:1;}
.bkt-s1.at6 .dk-approve{color:#fff;border-color:var(--bc);}
.bkt-s1.at6 .dk-approve::before{transform:scaleX(1);}
@keyframes bktPulse{0%{box-shadow:0 0 0 0 rgba(190,106,74,.4);}100%{box-shadow:0 0 0 16px rgba(190,106,74,0);}}

/* ---------- scene 2 ---------- */
.bkt-s2 .bkt-stage{display:flex;justify-content:center;}
.bkt-s2.at1 .b-q1{opacity:1;transform:none;}
.bkt-s2.at4 .b-q2{opacity:1;transform:none;}
.bkt-hiw .acard{width:100%;background:#fff;border:1px solid var(--bh);border-radius:12px;padding:12px;opacity:0;transform:translateY(10px);transition:.5s ease;}
.bkt-s2.at2 .b-rep{opacity:1;transform:none;}
.bkt-s2.at5 .b-att{opacity:1;transform:none;}
.bkt-hiw .ac-top{display:flex;gap:12px;align-items:center;margin-bottom:9px;}
.bkt-hiw .ring{width:52px;height:52px;transform:rotate(-90deg);flex:none;}
.bkt-hiw .rbg{fill:none;stroke:#EDE7DA;stroke-width:7;}
.bkt-hiw .rfg{fill:none;stroke:var(--bc);stroke-width:7;stroke-linecap:round;stroke-dasharray:163.4;stroke-dashoffset:163.4;}
.bkt-hiw .ac-pct b{display:block;font-size:21px;font-weight:600;letter-spacing:-.02em;color:var(--bi);line-height:1;}
.bkt-hiw .ac-pct span{display:block;font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--bmut);margin-top:3px;}
.bkt-hiw .ac-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px;}
.bkt-hiw .ac-list li{font-size:11.5px;color:var(--bi);padding-left:15px;position:relative;opacity:0;transform:translateX(-6px);transition:.4s ease;}
.bkt-hiw .ac-list li::before{content:"";position:absolute;left:0;top:5px;width:6px;height:6px;border:1.5px solid var(--bc);border-radius:2px;}
.bkt-s2.at3 .ac-list li{opacity:1;transform:none;}
.bkt-s2.at3 .ac-list li:nth-child(2){transition-delay:.12s;}
.bkt-s2.at3 .ac-list li:nth-child(3){transition-delay:.24s;}
.bkt-hiw .ac-flag{margin-top:9px;display:inline-block;font-family:'JetBrains Mono',monospace;font-size:9.5px;color:#fff;background:var(--bc);padding:4px 9px;border-radius:6px;opacity:0;transform:scale(.9);transition:.4s ease .4s;}
.bkt-hiw .ac-flag::before{content:"\2691 ";}
.bkt-s2.at3 .ac-flag{opacity:1;transform:none;}
.bkt-hiw .ac-cap{font-size:11.5px;color:var(--bmut);}
.bkt-hiw .ac-cap b{color:var(--bi);font-weight:600;}
.bkt-hiw .heat{display:grid;grid-template-columns:repeat(13,1fr);gap:3px;margin-top:8px;}
.bkt-hiw .heat i{height:11px;border-radius:2.5px;background:#EBE5D8;transition:background .35s ease;}
.bkt-s2.at5 .heat i{background:var(--bn);}
.bkt-s2.at5 .heat i:nth-child(n+6){transition-delay:.18s;}
.bkt-s2.at5 .heat i:nth-child(n+11){transition-delay:.34s;}
.bkt-s2.at5 .heat i:nth-child(n+16){transition-delay:.5s;}
.bkt-s2.at5 .heat i:nth-child(n+21){transition-delay:.66s;}
.bkt-s2.at5 .heat i.x{background:var(--bc);}

/* ---------- scene 3 · cctv ---------- */
.bkt-hiw .s3-wrap{display:grid;grid-template-columns:1.22fr .78fr;gap:12px;align-items:start;}
.bkt-hiw .bkt-cams{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.bkt-hiw .kcam{position:relative;aspect-ratio:16/10;background:#1A222C;border-radius:10px;overflow:hidden;border:1px solid rgba(255,255,255,.07);opacity:0;transform:translateY(12px) scale(.97);transition:.5s ease;}
.bkt-s3.at1 .kcam{opacity:1;transform:none;}
.bkt-s3.at1 .kcam:nth-child(2){transition-delay:.1s;}
.bkt-s3.at1 .kcam:nth-child(3){transition-delay:.2s;}
.bkt-s3.at1 .kcam:nth-child(4){transition-delay:.3s;}
.bkt-hiw .kcam svg{position:absolute;inset:0;width:100%;height:100%;}
.bkt-hiw .kl{position:absolute;left:8px;top:7px;font-family:'JetBrains Mono',monospace;font-size:7.5px;letter-spacing:.08em;color:rgba(255,255,255,.78);z-index:2;}
.bkt-hiw .ks{position:absolute;left:8px;bottom:6px;font-family:'JetBrains Mono',monospace;font-size:6.5px;letter-spacing:.12em;color:rgba(255,255,255,.32);z-index:2;}
.bkt-hiw .kt{position:absolute;right:8px;bottom:6px;font-family:'JetBrains Mono',monospace;font-size:7.5px;color:#E2A07F;z-index:2;}
.bkt-hiw .kscan{position:absolute;left:0;right:0;height:34%;top:-40%;background:linear-gradient(180deg,transparent,rgba(190,106,74,.13),transparent);z-index:1;}
.bkt-hiw .live .kscan{animation:bktScan 4.6s linear infinite;}
.bkt-hiw .k2 .kscan{animation-delay:1.1s;}
.bkt-hiw .k3 .kscan{animation-delay:2.2s;}
.bkt-hiw .k4 .kscan{animation-delay:3.3s;}
.bkt-hiw .wk{transform:translateX(14px);}
.bkt-hiw .live .wk1{animation:bktWalk 8s ease-in-out infinite alternate;}
.bkt-hiw .live .wk2{animation:bktWalk 10s ease-in-out infinite alternate;animation-delay:-4s;}
.bkt-hiw .live .wk3{animation:bktWalk 9s ease-in-out infinite alternate;animation-delay:-2s;}
.bkt-hiw .cage{transform:translateY(8px);}
.bkt-hiw .live .cage{animation:bktCage 6s ease-in-out infinite alternate;}
@keyframes bktWalk{from{transform:translateX(14px);}to{transform:translateX(166px);}}
@keyframes bktCage{from{transform:translateY(8px);}to{transform:translateY(72px);}}
@keyframes bktScan{0%{top:-40%;}100%{top:112%;}}
.bkt-hiw .s3-sum{background:#fff;border:1px solid var(--bh);border-radius:12px;padding:14px;}
.bkt-hiw .sm-h{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.12em;color:var(--bmut);margin-bottom:8px;display:flex;align-items:center;gap:7px;}
.bkt-hiw .sm-h::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--bc);}
.bkt-hiw .ln{font-family:'JetBrains Mono',monospace;font-size:10.5px;line-height:1.55;color:var(--bi);padding:8px 0;border-top:1px dashed var(--bh);clip-path:inset(0 100% 0 0);transition:clip-path .9s steps(26,end);}
.bkt-hiw .ln .k{display:block;font-size:8.5px;letter-spacing:.1em;color:var(--bmut);margin-bottom:2px;}
.bkt-s3.at2 .l1,.bkt-s3.at3 .l2,.bkt-s3.at4 .l3,.bkt-s3.at5 .l4{clip-path:inset(0 0 0 0);}

/* ---------- scene 4 · drawing ---------- */
.bkt-hiw .s4-wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:12px;align-items:start;position:relative;}
.bkt-hiw .s4-left{position:relative;}
.bkt-hiw .dwg-card{position:relative;background:#fff;border:1px solid var(--bh);border-radius:12px;padding:10px;overflow:hidden;}
.bkt-hiw .dwg{width:100%;height:auto;display:block;opacity:.16;transition:opacity .6s ease .35s;}
.bkt-s4.at1 .dwg{opacity:1;}
.bkt-hiw .b-scan{position:absolute;left:0;right:0;top:-18%;height:16%;background:linear-gradient(180deg,transparent,rgba(190,106,74,.22),transparent);opacity:0;}
.bkt-s4.at4 .b-scan{animation:bktSweep 1.2s ease forwards;}
@keyframes bktSweep{0%{top:-18%;opacity:1;}100%{top:108%;opacity:0;}}
.bkt-hiw .co{opacity:0;transition:opacity .4s ease;}
.bkt-s4.at4 .co1{opacity:1;transition-delay:.35s;}
.bkt-s4.at4 .co2{opacity:1;transition-delay:.6s;}
.bkt-s4.at4 .co3{opacity:1;transition-delay:.85s;}
.bkt-hiw .s4-btns{display:flex;gap:8px;margin-top:10px;opacity:0;transform:translateY(8px);transition:.45s ease;}
.bkt-s4.at2 .b-btns{opacity:1;transform:none;}
.bkt-hiw .tb{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.08em;padding:8px 0;flex:1;border:1px solid var(--bh);background:#fff;border-radius:8px;color:var(--bi);cursor:default;transition:.3s ease;}
.bkt-s4.at3 .tb-boq{background:var(--bi);color:#FAF8F4;border-color:var(--bi);}
.bkt-hiw .b-thumb{position:absolute;left:8px;bottom:60px;display:flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--bh);border-radius:9px;padding:7px 10px;font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--bi);box-shadow:0 8px 30px rgba(23,21,15,.1);opacity:0;transform:translate(-70px,80px) rotate(-7deg);transition:.85s cubic-bezier(.3,.8,.3,1);z-index:3;}
.bkt-hiw .b-thumb svg{width:26px;height:20px;flex:none;}
.bkt-s4.at1 .b-thumb{opacity:1;transform:translate(70px,-80px) rotate(0deg) scale(1.04);}
.bkt-s4.at2 .b-thumb{opacity:0;transform:translate(78px,-96px) scale(.7);}
.bkt-hiw .b-cur{position:absolute;width:16px;height:16px;z-index:4;left:62%;bottom:-26px;opacity:0;transition:transform .85s ease,opacity .3s ease;}
.bkt-s4.at3 .b-cur{opacity:1;transform:translate(-96px,-40px);}
.bkt-s4.at3 .b-cur::after{content:"";position:absolute;left:-6px;top:-6px;width:26px;height:26px;border:2px solid var(--bc);border-radius:50%;animation:bktClick .55s ease .9s both;}
@keyframes bktClick{0%{transform:scale(.3);opacity:0;}40%{opacity:1;}100%{transform:scale(1.1);opacity:0;}}
.bkt-hiw .s4-panel{background:#fff;border:1px solid var(--bh);border-radius:12px;padding:12px;opacity:0;transform:translateY(12px);transition:.5s ease;min-height:300px;position:relative;}
.bkt-s4.at4 .b-panel{opacity:1;transform:none;}
.bkt-hiw .pt-row{display:flex;gap:6px;margin-bottom:10px;}
.bkt-hiw .pt{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.08em;padding:4px 11px;border-radius:6px;border:1px solid var(--bh);color:var(--bmut);background:#fff;transition:.3s ease;}
.bkt-s4.at5 .pt-boq{background:var(--bi);color:#FAF8F4;border-color:var(--bi);}
.bkt-s4.at6 .pt-boq{background:#fff;color:var(--bmut);border-color:var(--bh);}
.bkt-s4.at6 .pt-bbs{background:var(--bi);color:#FAF8F4;border-color:var(--bi);}
.bkt-s4.at7 .pt-bbs{background:#fff;color:var(--bmut);border-color:var(--bh);}
.bkt-s4.at7 .pt-fab{background:var(--bi);color:#FAF8F4;border-color:var(--bi);}
.bkt-hiw .panes{position:relative;min-height:240px;}
.bkt-hiw .pane{position:absolute;inset:0;opacity:0;transition:opacity .35s ease;}
.bkt-s4.at4 .pane-boq{opacity:1;}
.bkt-s4.at6 .pane-boq{opacity:0;}
.bkt-s4.at6 .pane-bbs{opacity:1;}
.bkt-s4.at7 .pane-bbs{opacity:0;}
.bkt-s4.at7 .pane-fab{opacity:1;}
.bkt-hiw .pr{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 2px;border-bottom:1px dashed var(--bh);font-size:12px;color:var(--bi);opacity:0;transform:translateY(6px);transition:.4s ease;}
.bkt-hiw .pr>span{display:flex;align-items:center;}
.bkt-hiw .pr b{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:500;}
.bkt-hiw .pr.ph{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.1em;color:var(--bmut);border-bottom:1px solid var(--bh);}
.bkt-s4.at5 .pane-boq .pr{opacity:1;transform:none;}
.bkt-s4.at5 .pane-boq .pr:nth-child(2){transition-delay:.09s;}
.bkt-s4.at5 .pane-boq .pr:nth-child(3){transition-delay:.18s;}
.bkt-s4.at5 .pane-boq .pr:nth-child(4){transition-delay:.27s;}
.bkt-s4.at5 .pane-boq .pr:nth-child(5){transition-delay:.36s;}
.bkt-s4.at5 .pane-boq .pr:nth-child(6){transition-delay:.45s;}
.bkt-s4.at6 .pane-bbs .pr{opacity:1;transform:none;}
.bkt-s4.at6 .pane-bbs .pr:nth-child(2){transition-delay:.09s;}
.bkt-s4.at6 .pane-bbs .pr:nth-child(3){transition-delay:.18s;}
.bkt-s4.at6 .pane-bbs .pr:nth-child(4){transition-delay:.27s;}
.bkt-s4.at6 .pane-bbs .pr:nth-child(5){transition-delay:.36s;}
.bkt-hiw .bs{width:30px;height:12px;flex:none;margin-right:9px;}
.bkt-hiw .bs path{stroke:var(--bn);stroke-width:1.8;fill:none;}
.bkt-hiw .fab-sheet .fr{display:flex;align-items:center;gap:10px;padding:11px 2px;border-bottom:1px dashed var(--bh);font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--bi);opacity:0;transform:translateY(6px);transition:.4s ease;}
.bkt-hiw .fr svg{width:60px;height:16px;flex:none;}
.bkt-hiw .fbl{stroke:var(--bn);stroke-width:2;fill:none;}
.bkt-s4.at7 .fab-sheet .fr{opacity:1;transform:none;}
.bkt-s4.at7 .fab-sheet .fr:nth-child(2){transition-delay:.12s;}
.bkt-s4.at7 .fab-sheet .fr:nth-child(3){transition-delay:.24s;}
.bkt-hiw .fgen{margin-top:14px;font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.06em;color:var(--bmut);display:flex;align-items:center;gap:9px;}
.bkt-hiw .fgen i{width:90px;height:5px;border-radius:3px;background:linear-gradient(90deg,#EBE5D8 30%,#DCD4C2 50%,#EBE5D8 70%);background-size:200% 100%;}
.bkt-hiw .live .fgen i{animation:bktShim 1.4s linear infinite;}
@keyframes bktShim{from{background-position:200% 0;}to{background-position:0 0;}}

/* ---------- scene 5 · dashboard ---------- */
.bkt-hiw .s5-card{position:relative;background:#fff;border:1px solid var(--bh);border-radius:14px;padding:16px;box-shadow:0 8px 30px rgba(23,21,15,.06);}
.bkt-hiw .s5-legend{display:flex;gap:14px;margin-bottom:6px;}
.bkt-hiw .lg{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.06em;color:var(--bmut);display:flex;align-items:center;gap:6px;}
.bkt-hiw .lg::before{content:"";width:14px;height:0;border-top:2px solid;}
.bkt-hiw .lg.p::before{border-color:rgba(23,21,15,.45);}
.bkt-hiw .lg.e::before{border-color:#2E7D5B;}
.bkt-hiw .lg.c::before{border-color:#C98A2B;}
.bkt-hiw .s5-chart{width:100%;height:auto;display:block;}
.bkt-hiw .ax{stroke:#E2DCCF;stroke-width:1;}
.bkt-hiw .gp{fill:#C0392B;opacity:0;transition:opacity .7s ease;}
.bkt-s5.at3 .gp{opacity:.13;}
.bkt-hiw .pl{fill:none;stroke-width:2.4;stroke-dasharray:1;stroke-dashoffset:1;stroke-linecap:round;}
.bkt-hiw .pl-plan{stroke:rgba(23,21,15,.45);stroke-width:1.8;}
.bkt-hiw .pl-earn{stroke:#2E7D5B;}
.bkt-hiw .pl-cost{stroke:#C98A2B;}
.bkt-s5.at1 .pl-plan{stroke-dashoffset:0;transition:stroke-dashoffset 1.1s ease;}
.bkt-s5.at2 .pl-earn{stroke-dashoffset:0;transition:stroke-dashoffset 1.1s ease;}
.bkt-s5.at2 .pl-cost{stroke-dashoffset:0;transition:stroke-dashoffset 1.1s ease .15s;}
.bkt-hiw .brk path{stroke:#C0392B;stroke-width:1.6;fill:none;opacity:0;transition:opacity .4s ease;}
.bkt-s5.at3 .brk path{opacity:1;}
.bkt-hiw .b-stamp{position:absolute;top:48px;right:24px;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.04em;color:#C0392B;border:1.5px solid #C0392B;padding:4px 9px;border-radius:4px;background:rgba(255,255,255,.88);transform:rotate(-4deg) scale(.55);opacity:0;transition:.45s cubic-bezier(.2,.9,.3,1.3);}
.bkt-s5.at3 .b-stamp{opacity:1;transform:rotate(-4deg) scale(1);}
.bkt-hiw .b-banner{display:flex;align-items:center;gap:9px;margin-top:12px;background:var(--bi);color:#FAF8F4;font-size:12.5px;font-weight:500;padding:9px 13px;border-radius:9px;opacity:0;transform:translateY(10px);transition:.5s ease;}
.bkt-hiw .bdot{width:7px;height:7px;border-radius:50%;background:var(--bc);flex:none;}
.bkt-hiw .live .bdot{animation:bktPulseDot 1.6s ease-in-out infinite;}
@keyframes bktPulseDot{0%,100%{opacity:1;}50%{opacity:.35;}}
.bkt-s5.at4 .b-banner{opacity:1;transform:none;}
.bkt-hiw .b-gantt{margin-top:10px;opacity:0;transition:.5s ease;}
.bkt-s5.at5 .b-gantt{opacity:1;}
.bkt-hiw .gr{display:grid;grid-template-columns:208px 1fr;gap:10px;align-items:center;padding:5px 0;font-size:11px;color:var(--bi);}
.bkt-hiw .gr i{display:block;height:8px;border-radius:4px;background:var(--bn);width:0;transition:width .8s ease;}
.bkt-s5.at5 .gr:nth-child(1) i{width:var(--w);transition-delay:.05s;}
.bkt-s5.at5 .gr:nth-child(2) i{width:var(--w);transition-delay:.2s;}
.bkt-s5.at5 .gr:nth-child(3) i{width:var(--w);transition-delay:.35s;}
.bkt-hiw .gdate{display:flex;gap:12px;align-items:center;margin-top:10px;padding-top:10px;border-top:1px dashed var(--bh);font-family:'JetBrains Mono',monospace;font-size:11px;}
.bkt-hiw .d-old{color:var(--bmut);transition:.4s ease;}
.bkt-s5.at5 .d-old{text-decoration:line-through;opacity:.55;}
.bkt-hiw .d-new{color:var(--bi);font-weight:600;opacity:0;transform:scale(.8);transition:.45s ease .5s;}
.bkt-s5.at5 .d-new{opacity:1;transform:none;}
.bkt-hiw .d-chip{margin-left:auto;border:1px solid var(--bc);color:var(--bc);padding:2px 9px;border-radius:999px;font-size:10px;}
.bkt-hiw .d-chip b{font-weight:600;}

/* ---------- mosaic + cta ---------- */
.bkt-hiw .bkt-tail{padding-top:88px;}
.bkt-hiw .bkt-tail .bkt-tag{text-align:center;margin-bottom:10px;}
.bkt-hiw .bkt-tail-h{text-align:center;font-size:clamp(24px,3vw,34px);letter-spacing:-.025em;font-weight:500;color:var(--ink);margin:0 0 36px;}
.bkt-hiw .bkt-mosaic{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.bkt-hiw .bkt-mcard{background:var(--bp);border:1px solid var(--bh);border-radius:12px;padding:16px;opacity:0;transform:translateY(14px);transition:.5s ease;}
.bkt-hiw .bkt-mcard.in{opacity:1;transform:none;}
.bkt-hiw .bkt-mcard.in:hover{transform:translateY(-3px);}
.bkt-hiw .bkt-mcard:nth-child(2){transition-delay:.06s;}
.bkt-hiw .bkt-mcard:nth-child(3){transition-delay:.12s;}
.bkt-hiw .bkt-mcard:nth-child(4){transition-delay:.18s;}
.bkt-hiw .bkt-mcard:nth-child(6){transition-delay:.06s;}
.bkt-hiw .bkt-mcard:nth-child(7){transition-delay:.12s;}
.bkt-hiw .bkt-mcard:nth-child(8){transition-delay:.18s;}
.bkt-hiw .bkt-mcard b{display:block;font-size:13.5px;letter-spacing:-.01em;color:var(--bi);margin-bottom:4px;font-weight:600;}
.bkt-hiw .bkt-mcard>span{font-size:11.5px;line-height:1.45;color:var(--bmut);display:block;}
.bkt-hiw .mi{position:relative;height:56px;margin-bottom:12px;border-bottom:1px dashed var(--bh);overflow:hidden;}
/* attendance */
.bkt-hiw .mi-att .pinp{position:absolute;left:50%;top:16px;width:11px;height:11px;margin-left:-5.5px;border-radius:50% 50% 50% 0;background:var(--bn);transform:rotate(-45deg);}
.bkt-hiw .mi-att .ringp{position:absolute;left:50%;top:22px;width:8px;height:8px;margin-left:-4px;border:1.5px solid var(--bc);border-radius:50%;}
.bkt-hiw .bkt-mcard.in .mi-att .ringp{animation:bktRing 2s ease-out infinite;}
@keyframes bktRing{from{transform:scale(.5);opacity:1;}to{transform:scale(3.6);opacity:0;}}
/* revision */
.bkt-hiw .mi-rev .sh{position:absolute;left:28%;top:9px;width:25px;height:34px;border:1.5px solid var(--bn);border-radius:3px;background:#fff;}
.bkt-hiw .mi-rev .sh.s2{left:36%;top:13px;}
.bkt-hiw .mi-rev .badge{position:absolute;right:16%;top:16px;font-family:'JetBrains Mono',monospace;font-size:8.5px;background:var(--bc);color:#fff;padding:2px 7px;border-radius:5px;}
.bkt-hiw .bkt-mcard.in .mi-rev .badge{animation:bktBlink2 1.6s steps(1) infinite;}
@keyframes bktBlink2{0%,70%{opacity:1;}71%,100%{opacity:.35;}}
/* minutes */
.bkt-hiw .mi-mom i{position:absolute;left:22%;height:3.5px;border-radius:2px;background:var(--bn);width:0;}
.bkt-hiw .mi-mom i:nth-child(1){top:14px;}
.bkt-hiw .mi-mom i:nth-child(2){top:24px;}
.bkt-hiw .mi-mom i:nth-child(3){top:34px;}
.bkt-hiw .bkt-mcard.in .mi-mom i{animation:bktType 2.6s ease-in-out infinite;}
.bkt-hiw .bkt-mcard.in .mi-mom i:nth-child(2){animation-delay:.25s;}
.bkt-hiw .bkt-mcard.in .mi-mom i:nth-child(3){animation-delay:.5s;}
@keyframes bktType{0%{width:0;}40%,80%{width:50%;}100%{width:0;}}
/* dpr */
.bkt-hiw .mi-dpr .phf{position:absolute;left:22%;top:12px;width:26px;height:22px;border:1.5px solid var(--bn);border-radius:3px;}
.bkt-hiw .mi-dpr .docf{position:absolute;right:22%;top:9px;width:24px;height:30px;border:1.5px solid var(--bn);border-radius:3px;}
.bkt-hiw .mi-dpr .docf i{position:absolute;left:4px;height:2.5px;background:var(--bc);border-radius:1px;width:14px;opacity:.2;}
.bkt-hiw .mi-dpr .docf i:nth-child(1){top:6px;}
.bkt-hiw .mi-dpr .docf i:nth-child(2){top:12px;}
.bkt-hiw .mi-dpr .docf i:nth-child(3){top:18px;width:9px;}
.bkt-hiw .bkt-mcard.in .mi-dpr .docf i{animation:bktFadeLoop 2.2s ease-in-out infinite;}
.bkt-hiw .bkt-mcard.in .mi-dpr .docf i:nth-child(2){animation-delay:.3s;}
.bkt-hiw .bkt-mcard.in .mi-dpr .docf i:nth-child(3){animation-delay:.6s;}
@keyframes bktFadeLoop{0%,15%{opacity:.2;}35%,80%{opacity:1;}100%{opacity:.2;}}
/* safety */
.bkt-hiw .mi-safe .flg{position:absolute;left:44%;top:11px;width:0;height:0;border-left:15px solid var(--bc);border-top:8px solid transparent;border-bottom:8px solid transparent;transform-origin:left center;}
.bkt-hiw .mi-safe .flg::after{content:"";position:absolute;left:-15px;top:-9px;width:1.5px;height:36px;background:var(--bn);}
.bkt-hiw .bkt-mcard.in .mi-safe .flg{animation:bktWiggle 1.8s ease-in-out infinite;}
@keyframes bktWiggle{0%,100%{transform:rotate(0deg);}50%{transform:rotate(9deg);}}
/* multi-project */
.bkt-hiw .mi-multi .cha,.bkt-hiw .mi-multi .chb{position:absolute;top:17px;font-family:'JetBrains Mono',monospace;font-size:8.5px;padding:4px 9px;border-radius:6px;border:1px solid var(--bh);background:#fff;color:var(--bi);}
.bkt-hiw .mi-multi .cha{left:12%;}
.bkt-hiw .mi-multi .chb{right:12%;}
.bkt-hiw .bkt-mcard.in .mi-multi .cha{animation:bktSwap 3s ease-in-out infinite;}
.bkt-hiw .bkt-mcard.in .mi-multi .chb{animation:bktSwap 3s ease-in-out infinite;animation-delay:1.5s;}
@keyframes bktSwap{0%,38%{background:#17150F;color:#FAF8F4;border-color:#17150F;}50%,88%{background:#fff;color:#17150F;border-color:#E9E4D8;}100%{background:#17150F;color:#FAF8F4;border-color:#17150F;}}
/* shared workspace */
.bkt-hiw .mi-share .pn{position:absolute;top:11px;width:28%;height:32px;border:1.5px solid var(--bn);border-radius:4px;left:13%;}
.bkt-hiw .mi-share .pn.p2{left:auto;right:13%;}
.bkt-hiw .mi-share .bl{position:absolute;top:24px;left:50%;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:var(--bc);}
.bkt-hiw .bkt-mcard.in .mi-share .bl{animation:bktPing 2.2s ease-in-out infinite alternate;}
@keyframes bktPing{from{transform:translateX(-26px);}to{transform:translateX(26px);}}
/* voice */
.bkt-hiw .mi-voice .wv{position:absolute;left:16%;top:15px;display:flex;gap:3px;align-items:center;height:26px;}
.bkt-hiw .mi-voice .wv i{width:3px;background:var(--bn);border-radius:2px;height:8px;}
.bkt-hiw .bkt-mcard.in .mi-voice .wv i{animation:bktWave 1.1s ease-in-out infinite;}
.bkt-hiw .bkt-mcard.in .mi-voice .wv i:nth-child(2){animation-delay:.12s;}
.bkt-hiw .bkt-mcard.in .mi-voice .wv i:nth-child(3){animation-delay:.24s;}
.bkt-hiw .bkt-mcard.in .mi-voice .wv i:nth-child(4){animation-delay:.36s;}
.bkt-hiw .bkt-mcard.in .mi-voice .wv i:nth-child(5){animation-delay:.48s;}
@keyframes bktWave{0%,100%{height:7px;}50%{height:19px;}}
.bkt-hiw .mi-voice .rws{position:absolute;right:15%;top:18px;display:flex;flex-direction:column;gap:5px;}
.bkt-hiw .mi-voice .rws i{width:34px;height:3.5px;background:var(--bc);border-radius:2px;opacity:.2;}
.bkt-hiw .mi-voice .rws i:nth-child(2){width:24px;}
.bkt-hiw .bkt-mcard.in .mi-voice .rws i{animation:bktFadeLoop 2.4s ease-in-out infinite;}
.bkt-hiw .bkt-mcard.in .mi-voice .rws i:nth-child(2){animation-delay:.35s;}

.bkt-hiw .bkt-cta-row{display:flex;justify-content:center;margin-top:44px;}

/* ---------- print: force every beat state visible ---------- */
@media print{
  .bkt-hiw .bub,.bkt-hiw .bchip,.bkt-hiw .icard,.bkt-hiw .acard,.bkt-hiw .ac-list li,.bkt-hiw .ac-flag,.bkt-hiw .bkt-desk,.bkt-hiw .b-toast,.bkt-hiw .kcam,.bkt-hiw .ln,.bkt-hiw .s4-btns,.bkt-hiw .s4-panel,.bkt-hiw .pr,.bkt-hiw .fab-sheet .fr,.bkt-hiw .dwg,.bkt-hiw .co,.bkt-hiw .b-banner,.bkt-hiw .b-gantt,.bkt-hiw .b-stamp,.bkt-hiw .bkt-cap,.bkt-hiw .bb,.bkt-hiw .bkt-mcard{opacity:1 !important;transform:none !important;clip-path:none !important;}
  .bkt-hiw .bub.typing,.bkt-hiw .b-cur,.bkt-hiw .b-thumb,.bkt-hiw .b-scan{display:none !important;}
  .bkt-hiw .pl{stroke-dashoffset:0 !important;}
  .bkt-hiw .gp{opacity:.13 !important;}
  .bkt-hiw .gr i{width:var(--w) !important;}
  .bkt-hiw .bkt-sc{height:auto !important;}
  .bkt-hiw .bkt-pin{position:relative !important;top:0 !important;height:auto !important;padding:40px 0;}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .bkt-hiw *,
  .bkt-hiw *::before,
  .bkt-hiw *::after{animation:none !important;transition:none !important;}
  .bkt-hiw .ln{clip-path:none;}
}

/* ---------- responsive ---------- */
@media (max-width:880px){
  .bkt-hiw .bkt-sc{height:auto;}
  .bkt-hiw .bkt-pin{position:relative;top:0;height:auto;overflow:visible;padding:52px 0;}
  .bkt-hiw .bkt-grid{grid-template-columns:1fr;gap:28px;}
  .bkt-hiw .st1{height:auto;flex-direction:column;gap:18px;}
  .bkt-hiw .bkt-desk{position:relative;right:auto;top:auto;width:100%;max-width:360px;margin:0 auto;transform:none;opacity:1;}
  .bkt-s1.at5 .bkt-phone{transform:none;}
  .bkt-hiw .s3-wrap,.bkt-hiw .s4-wrap{grid-template-columns:1fr;}
  .bkt-hiw .bkt-mosaic{grid-template-columns:1fr 1fr;}
  .bkt-hiw .gr{grid-template-columns:1fr;gap:4px;}
  .bkt-hiw .b-stamp{top:38px;right:12px;}
}
@media (max-width:560px){
  .bkt-hiw .bkt-mosaic{grid-template-columns:1fr;}
  .bkt-hiw .bkt-beats{display:none;}
  .bkt-hiw .bkt-phone{width:100%;max-width:300px;}
}
