/* KIBO · Brand promise, executed (brands) — 30s animation (1920×1080 artboard, scales to any width).
   Colors: dark slate #2E343E, KIBO yellow #FFCE01 (demand / values), KIBO blue #0C66E4 + light blue #8DB8FF (supply / active), node disc #1C2128.
   Font: Poppins 400/500/600 (Google Fonts). */
:root{--ka-ink:#2E343E;--ka-yellow:#FFCE01;--ka-blue:#0C66E4;--ka-lblue:#8DB8FF;--ka-node:#1C2128;--ka-mute:rgba(255,255,255,0.68);--ka-on:rgba(12,102,228,0.34);--ka-on-ring:inset 0 0 0 1px rgba(141,184,255,0.45)}
*{box-sizing:border-box}
html,body{margin:0;background:#2E343E;color:#fff;font-family:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased}
a{color:#FFCE01}a:hover{color:#fff}
.page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.anim-section{width:100%;max-width:1920px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Responsive wrapper: fluid width, fixed 16:9. The artboard inside is scaled by JS to the wrapper width. */
.kibo-anim{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:16px;background:#2E343E;font-family:'Poppins',system-ui,sans-serif;color:#fff;line-height:1.3}
.ka-stage{position:absolute;left:0;top:0;width:1920px;height:1080px;transform-origin:0 0}
.ka-stage>*,.net>*,.card *, .strip>*{position:absolute}
.ka-bg{inset:0;background:radial-gradient(120% 120% at 0% 100%,#2a3955 0%,#2E343E 60%)}
.ka-bg-glow{left:260px;top:-70px;width:1400px;height:1200px;border-radius:50%;background:radial-gradient(closest-side,rgba(12,102,228,0.18),rgba(0,0,0,0))}
.net{inset:0}
.net-glow{top:160px;width:760px;height:800px;border-radius:50%}
.net-glow-l{left:0;background:radial-gradient(closest-side,rgba(255,206,1,0.12),rgba(0,0,0,0))}
.net-glow-r{left:1160px;background:radial-gradient(closest-side,rgba(12,102,228,0.2),rgba(0,0,0,0))}
.net-svg{left:0;top:0;overflow:visible}
.spine{fill:none;stroke-width:1.5;stroke-dasharray:4 8;animation:ka-drift 1.2s linear infinite}
.spine-l{stroke:#FFCE01;animation-direction:reverse}.spine-r{stroke:#8DB8FF}
@keyframes ka-drift{from{stroke-dashoffset:0}to{stroke-dashoffset:-12}}
.conn{fill:none;stroke-width:2;stroke-dasharray:1;stroke-dashoffset:1}
.conn-l{stroke:#FFCE01;stroke-opacity:0.3}.conn-r{stroke:#8DB8FF;stroke-opacity:0.35}
.hub-ring{fill:none;stroke:#8DB8FF;stroke-width:1.5;stroke-dasharray:5 9;opacity:0}
.tokens{inset:0}
.token{position:absolute;width:8px;height:8px;border-radius:50%;opacity:0.6}
.token.yel{background:#FFCE01;box-shadow:0 0 6px #FFCE01}.token.blu{background:#8DB8FF;box-shadow:0 0 6px #8DB8FF}
.group-label{font-size:28px;font-weight:600;white-space:nowrap;color:rgba(255,255,255,0.85)}
.group-label-l{left:150px;top:282px}.group-label-r{right:150px;top:338px}
.node,.node-ripple{width:64px;height:64px;border-radius:50%}
.node{display:flex;align-items:center;justify-content:center;background:#1C2128}
.node.yel{color:#FFCE01;box-shadow:inset 0 0 0 1.5px rgba(255,206,1,0.55)}
.node.blu{color:#8DB8FF;box-shadow:inset 0 0 0 1.5px rgba(141,184,255,0.55)}
.node .ico{position:relative}
.node-fill{position:absolute;inset:0;border-radius:50%;opacity:0}
.node.yel .node-fill{background:#FFCE01}.node.blu .node-fill{background:#0C66E4}
.node.yel.is-hot{color:#2E343E}.node.blu.is-hot{color:#fff}
.node-ripple{border:1.5px solid;opacity:0}.node-ripple.yel{border-color:#FFCE01}.node-ripple.blu{border-color:#8DB8FF}
.node-label{font-size:20px;font-weight:500;white-space:nowrap;color:rgba(255,255,255,0.9)}
.hub{inset:0}
.hub-glow{position:absolute;left:700px;top:330px;width:520px;height:520px;border-radius:50%;background:radial-gradient(closest-side,rgba(12,102,228,0.45),rgba(0,0,0,0))}
.hub-disc{position:absolute;left:845px;top:475px;width:230px;height:230px;border-radius:50%;background:rgba(40,47,59,0.96);box-shadow:inset 0 0 0 2px #8DB8FF,0 0 0 12px rgba(12,102,228,0.3),0 0 70px rgba(12,102,228,0.55);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:11px}
.hub-disc img{display:block;width:143px;height:auto}
.hub-name{font-size:15px;font-weight:600;white-space:nowrap}
/* Glass product card (1000×580, shown at 1.15×) */
.card{left:460px;top:312px;width:1000px;height:580px;transform-origin:50% 60%;opacity:0}
.card .card-bg{inset:0;border-radius:24px;background:linear-gradient(180deg,rgba(141,184,255,0.10),rgba(255,255,255,0.02) 40%),rgba(28,33,41,0.97)}
.card .card-border{left:0;top:0;overflow:visible;pointer-events:none}
.card .card-dots{left:20px;top:0;height:44px;display:flex;align-items:center;gap:7px}
.card .card-dots span{position:static;width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,0.3)}
.card .card-rule{left:0;right:0;top:44px;height:1px;background:rgba(255,255,255,0.1)}
.card .pane{inset:0}
.card .pane *{position:static}
.card .pane>*,.card .abs,.card .shop>*{position:absolute}
.row{display:flex;align-items:center;gap:14px;padding:0 16px;border-radius:14px;background:rgba(255,255,255,0.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.24);transition:background .3s,box-shadow .3s}
.row.is-on{background:var(--ka-on);box-shadow:var(--ka-on-ring)}
.lab{font-size:16px;color:var(--ka-mute);white-space:nowrap}
.sub{font-size:15px;color:var(--ka-mute);white-space:nowrap}
.sub-16{font-size:16px}
.nm{font-size:18px;font-weight:600;white-space:nowrap}.nm-17{font-size:17px}.nm-16{font-size:16px}
.val{font-size:20px;font-weight:600;color:#FFCE01;white-space:nowrap}.val-24{font-size:24px}.val-26{font-size:26px}
.yel-t{color:#FFCE01}
.grow{flex:1}.minw0{min-width:0}.flex{display:flex}
.w80{width:80px}.w90{width:90px}.w104{width:104px}.w120{width:120px}.w134{width:134px}.w150{width:150px}.w230{width:230px}
.tr{text-align:right}.pr16{padding-right:16px}.mt4{margin-top:4px}.mt18{margin-top:18px}.mb8{margin-bottom:8px}
.origin-l{transform-origin:left center}
.colhead{display:flex;justify-content:flex-end}
.cost{width:64px;text-align:right;font-size:17px;font-weight:500}
.margin{width:74px;text-align:right;font-size:19px;font-weight:600;color:#fff}.margin.is-yel{color:#FFCE01}
.held{font-size:17px;color:var(--ka-mute)}
.disc,.pdisc{border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none}
.disc{background:rgba(12,102,228,0.3);box-shadow:inset 0 0 0 1px rgba(141,184,255,0.5)}
.disc.yel{background:#1C2128;box-shadow:inset 0 0 0 1.5px rgba(255,206,1,0.55)}
.s36{width:36px;height:36px}.s38{width:38px;height:38px}.s44{width:44px;height:44px}.s48{width:48px;height:48px}.s96{width:96px;height:96px}
.pd-olive{background:#6F7A45}.pd-rust{background:#B8613C}.pd-black{background:#1F242B}.pd-sand{background:#D5BC94}
.pill{display:inline-flex;align-items:center;gap:6px;padding:0 14px;border-radius:60px;font-weight:500;white-space:nowrap;color:#fff;background:rgba(255,255,255,0.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.32);transition:background .25s,box-shadow .25s}
.pill.on,.pill.is-on{background:var(--ka-on);box-shadow:var(--ka-on-ring)}
.pill.is-on{font-weight:600}
.pill.yel{color:#FFCE01}
.pill-28{height:28px;font-size:14px}.pill-36{height:36px;font-size:15px;gap:8px}.pill-38{height:38px;font-size:15px}
.pills{display:flex;gap:10px}
.shop{border-radius:16px;background:rgba(255,255,255,0.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.18)}
.shop .shop-bar{left:20px;right:20px;top:0;height:52px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,0.12)}
.shop-brand{font-size:18px;font-weight:600}.shop-icons{display:flex;gap:14px}
.shop .shop-product{left:20px;right:20px;top:72px;display:flex;gap:16px}
.shop-title{font-size:20px;font-weight:600}
.price-line{display:flex;align-items:baseline;gap:10px;margin-top:6px}
.price-was{font-size:17px}.price-was.is-strike{text-decoration:line-through}
.shop .shop-row{left:20px;right:20px;height:52px}.shop .shop-row-1{top:196px}.shop .shop-row-2{top:262px}
.row-text{font-size:16px;font-weight:500}.row-text-17{font-size:17px;font-weight:500}
.shop .btn-cart{left:20px;right:20px;top:334px;height:46px;border-radius:60px;background:#FFCE01;color:#2E343E;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:600}
.recov{display:flex;align-items:center;gap:18px}
.recov-title{font-size:18px;font-weight:600;white-space:nowrap}
.bar{flex:1;height:12px;border-radius:6px;background:rgba(255,255,255,0.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.2);overflow:hidden}
.bar-fill{width:0;height:100%;border-radius:6px;background:#0C66E4;transition:width .5s cubic-bezier(0.22,1,0.36,1)}
/* Top chapter strip */
.strip{inset:0;opacity:0}
.strip-svg{left:0;top:0;overflow:visible}
.strip-path{stroke:rgba(255,255,255,0.3);stroke-width:1.5;stroke-dasharray:3 6}
.strip-prog{stroke:#8DB8FF;stroke-width:2}
.strip-dot{width:10px;height:10px;border-radius:50%;background:#FFCE01;box-shadow:0 0 8px #FFCE01;top:135px}
.strip-halo{width:108px;height:108px;border-radius:50%;background:radial-gradient(closest-side,rgba(12,102,228,0.55),rgba(0,0,0,0));opacity:0}
.strip-halo.is-on{opacity:1}
.strip-node{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#2B313B;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,0.35)}
.strip-node.is-done{background:rgba(12,102,228,0.35);box-shadow:inset 0 0 0 1.5px #8DB8FF}
.strip-node.is-on{background:#0C66E4;box-shadow:inset 0 0 0 1.5px #8DB8FF;transform:translateY(-1px)}
.strip-label{width:260px;text-align:center;font-size:24px;font-weight:500;white-space:nowrap;color:var(--ka-mute)}
.strip-label.is-on{font-weight:600;color:#fff}
/* Play / replay control */
.ka-btn{position:absolute;right:2%;bottom:3%;width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;background:rgba(30,35,44,0.7);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.3);opacity:0;transition:opacity .2s}
.kibo-anim:hover .ka-btn,.kibo-anim.is-paused .ka-btn,.ka-btn:focus-visible{opacity:1}
.ka-btn:focus-visible{outline:2px solid #FFCE01;outline-offset:2px}
/* Tablet */
@media (max-width:1024px){.page{padding:16px}.kibo-anim{border-radius:12px}}
/* Mobile: the artboard keeps its composition and scales down; the control stays visible for touch. */
@media (max-width:767px){.page{padding:0;align-items:flex-start}.kibo-anim{border-radius:0}.ka-btn{opacity:1;width:44px;height:44px;right:12px;bottom:12px}}
@media (prefers-reduced-motion:reduce){.spine{animation:none}}
/* Brands additions */
.nm-20{font-size:20px}.val-17{font-size:17px}.w56{width:56px}.w78{width:78px}.nowrap{white-space:nowrap}
.strike{text-decoration:line-through}.line-val{font-size:17px;font-weight:600}
.swap .s1{display:none}.swap.is-on .s0{display:none}.swap.is-on .s1{display:inline}
.pill-40{height:40px;font-size:17px;gap:10px;font-weight:600}
.track{background:rgba(255,255,255,0.2)}.track-fill{background:#8DB8FF;transform-origin:top center}
.card .pane .step{display:flex;align-items:center;gap:16px}
.step-dot{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#2B313B;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,0.35)}
.step-dot .ico{opacity:0}
.step.is-on .step-dot{background:#0C66E4;box-shadow:inset 0 0 0 1.5px #8DB8FF}.step.is-on .step-dot .ico{opacity:1}
.step-label{font-size:17px;font-weight:500;color:var(--ka-mute);white-space:nowrap}.step.is-on .step-label{font-weight:600;color:#fff}
.strip-label{width:300px}
.pd-olive{background:#6F7A45}.pd-rust{background:#B8613C}.s64{width:64px;height:64px}.s40{width:40px;height:40px}
/* Element positions on the 1920×1080 artboard */
.pos-l0{left:268px;top:334px}
.lab-l0{right:1670px;top:353px}
.pos-l1{left:324.57px;top:446px}
.lab-l1{right:1613.43px;top:465px}
.pos-l2{left:348px;top:558px}
.lab-l2{right:1590px;top:577px}
.pos-l3{left:324.57px;top:670px}
.lab-l3{right:1613.43px;top:689px}
.pos-l4{left:268px;top:782px}
.lab-l4{right:1670px;top:801px}
.pos-r0{left:1588px;top:390px}
.lab-r0{left:1670px;top:409px}
.pos-r1{left:1518.72px;top:502px}
.lab-r1{left:1600.72px;top:521px}
.pos-r2{left:1518.72px;top:614px}
.lab-r2{left:1600.72px;top:633px}
.pos-r3{left:1588px;top:726px}
.lab-r3{left:1670px;top:745px}
.e-lab1{left:32px;top:66px}
.e-prod{left:32px;top:94px;width:420px;height:104px}
.e-price{left:32px;top:214px;width:420px;height:64px}
.e-inv{left:32px;top:292px;width:420px;height:72px}
.e-sale{left:32px;top:384px;width:420px;height:80px}
.e-lab2{left:484px;top:66px}
.e-ch0{left:484px;top:94px;width:484px;height:68px}
.e-ch1{left:484px;top:174px;width:484px;height:68px}
.e-ch2{left:484px;top:254px;width:484px;height:68px}
.e-ch3{left:484px;top:334px;width:484px;height:68px}
.p-lab1{left:32px;top:66px}
.p-acct{left:32px;top:94px;width:420px;height:84px}
.p-lab2{left:32px;top:200px}
.p-price0{left:32px;top:228px;width:420px;height:60px}
.p-price1{left:32px;top:300px;width:420px;height:60px}
.p-self{left:32px;top:384px;width:420px;height:80px}
.p-lab3{left:484px;top:66px}
.p-line0{left:484px;top:94px;width:484px;height:60px}
.p-line1{left:484px;top:166px;width:484px;height:60px}
.p-total{left:484px;top:246px;width:484px;height:60px}
.p-reorder{left:484px;top:322px;width:484px;height:64px}
.p-placed{left:484px;top:402px;width:484px;height:64px}
.k-lab1{left:32px;top:66px}
.k-prom{left:32px;top:94px;width:420px;height:80px}
.k-track{left:58px;top:214px;width:2px;height:150px}
.k-trackf{left:58px;top:214px;width:2px;height:150px}
.k-step0{left:48px;top:204px}
.k-step1{left:48px;top:254px}
.k-step2{left:48px;top:304px}
.k-step3{left:48px;top:354px}
.k-ontime{left:32px;top:412px}
.k-lab2{left:484px;top:66px}
.k-ret0{left:484px;top:94px;width:484px;height:68px}
.k-ret1{left:484px;top:174px;width:484px;height:68px}
.k-ret2{left:484px;top:254px;width:484px;height:68px}
.k-kept{left:484px;top:344px;width:484px;height:80px}
.sh0{left:586px;top:86px}
.sn0{left:608px;top:108px}
.sl0{left:490px;top:182px}
.sh1{left:906px;top:86px}
.sn1{left:928px;top:108px}
.sl1{left:810px;top:182px}
.sh2{left:1226px;top:86px}
.sn2{left:1248px;top:108px}
.sl2{left:1130px;top:182px}