/* JWALA.CODES — blueprint builder + cursor sparks */
.builder{background:radial-gradient(60% 60% at 20% 30%,rgba(255,90,0,.1),transparent 70%)}
.b-wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(24px,4vw,56px);align-items:start}
.b-panel h4{font-family:var(--f-head);font-size:.66rem;letter-spacing:.22em;color:var(--fire-1);margin:0 0 12px}
.b-panel .grp{margin-bottom:26px}
.b-chips{display:flex;flex-wrap:wrap;gap:8px}
.bchip{padding:10px 16px;border-radius:999px;border:1px solid var(--line-2);background:rgba(255,255,255,.03);font-family:var(--f-head);font-weight:600;font-size:.76rem;color:var(--ink-2);transition:all .25s}
.bchip:hover{border-color:var(--fire-2);color:#fff}
.bchip.on{background:var(--grad);border-color:transparent;color:#1a0800}
.b-mods{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.bmod{display:flex;align-items:center;gap:10px;text-align:left;padding:11px 13px;border-radius:14px;border:1px solid var(--line);background:var(--panel);font-size:.84rem;color:var(--ink-2);transition:all .3s var(--ease)}
.bmod span{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:rgba(255,106,0,.1);color:var(--fire-1);flex:none;transition:all .3s}
.bmod span svg{width:17px;height:17px}
.bmod:hover{border-color:rgba(255,106,0,.5);transform:translateY(-2px)}
.bmod.on{border-color:var(--fire-2);background:rgba(255,106,0,.12);color:#fff;box-shadow:0 0 26px rgba(255,90,0,.16)}
.bmod.on span{background:var(--grad);color:#1a0800}
.b-stage{position:sticky;top:calc(var(--nav-h) + 16px);border-radius:26px;border:1px solid var(--line-2);background:radial-gradient(80% 80% at 50% 40%,#1c0f08,#080605);overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.b-stage::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:32px 32px;-webkit-mask-image:radial-gradient(70% 70% at 50% 50%,#000,transparent);mask-image:radial-gradient(70% 70% at 50% 50%,#000,transparent)}
.b-tag{position:absolute;top:14px;left:16px;font-family:var(--f-head);font-weight:700;font-size:.58rem;letter-spacing:.2em;color:var(--muted);z-index:2}
#bSvg{position:relative;width:100%;height:auto;display:block}
.b-ring{fill:none;stroke:rgba(255,140,40,.16);stroke-dasharray:4 6}
.b-ring.r2{stroke:rgba(255,140,40,.08)}
.b-line{fill:none;stroke:url(#bg1);stroke-width:2;stroke-linecap:round;filter:drop-shadow(0 0 5px rgba(255,106,0,.9));stroke-dasharray:400;stroke-dashoffset:400;animation:bdraw .9s var(--ease) forwards}
@keyframes bdraw{to{stroke-dashoffset:0}}
.b-spark{fill:#ffe2ad;filter:drop-shadow(0 0 6px #ff7a00)}
.b-node{opacity:0;animation:bpop .5s var(--ease) forwards}
@keyframes bpop{from{opacity:0;transform:scale(.6)}to{opacity:1}}
.b-node rect{fill:#150d09;stroke:rgba(255,106,0,.65);stroke-width:1}
.b-node text{fill:#fff;font:600 11px var(--f-head)}
.b-hub circle{fill:radial-gradient(#ff6a00,#ff3d00);fill:#2a1106;stroke:var(--fire-2);stroke-width:1.5;filter:drop-shadow(0 0 16px rgba(255,90,0,.7))}
.b-hub circle.pulse{fill:none;stroke:rgba(255,154,31,.5);animation:bpulse 2.4s infinite}
@keyframes bpulse{from{r:46;opacity:.9}to{r:74;opacity:0}}
.b-hub text{fill:#fff;font:800 10px var(--f-head);letter-spacing:.14em}
.b-empty{position:absolute;left:0;right:0;bottom:18px;text-align:center;color:var(--muted);font-size:.86rem;z-index:2;padding:0 20px}
.b-out{padding:22px 24px 24px;border-top:1px solid var(--line);position:relative;background:rgba(0,0,0,.25)}
.b-out h3{font-family:var(--f-head);font-weight:800;font-size:1.1rem;margin-bottom:14px}
.b-cols{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.b-out h4{font-family:var(--f-head);font-size:.62rem;letter-spacing:.2em;color:var(--fire-1);margin:0 0 8px}
.b-out p{font-size:.88rem;color:var(--ink-2);margin-bottom:10px}.b-out p b{color:#fff}
.b-out small{display:block;color:var(--muted);font-size:.76rem;margin-top:2px}
.b-ph{padding-left:18px;list-style:decimal;color:var(--ink-2);font-size:.84rem;display:grid;gap:3px}.b-ph li::marker{color:var(--fire-1);font-weight:700}
.b-act{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:8px}
.b-act .btn{padding:12px 18px;font-size:.72rem}
.b-note{margin:12px 0 0!important;font-size:.76rem!important;color:var(--muted)!important}
.b-out[hidden],.b-empty[hidden]{display:none}

/* cursor sparks */
#sparkCanvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:795}

@media(max-width:900px){.b-wrap{grid-template-columns:1fr}.b-stage{position:relative;top:0}.b-cols{grid-template-columns:1fr}}
@media(max-width:480px){.b-mods{grid-template-columns:1fr}}

/* hero flame glow follows the cursor; logo leans via rotate/scale (individual props keep the screen-blend intact) */
.flame-glow{position:absolute;left:50%;top:44%;width:62%;aspect-ratio:1;margin:-31% 0 0 -31%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,130,20,.55),rgba(255,60,0,.18) 55%,transparent);filter:blur(14px);pointer-events:none;will-change:transform}
.hero-logo{transform-origin:50% 64%}
@media(prefers-reduced-motion:reduce){.flame-glow{display:none}}

/* portfolio: live-demo badge + inventory mock */
.badge.live{border-color:rgba(60,220,120,.6);color:#7dffb0}
.mk.inv .mk-body{display:flex;flex-direction:column;gap:10px}
.mk.inv .kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;height:26%}
.mk.inv .rows{flex:1;display:flex;flex-direction:column;gap:8px;justify-content:center}
.mk.inv .rw{display:flex;align-items:center;gap:10px}.mk.inv .rw .blk{height:12px}
.mk.inv .rw i{font:700 9px/1 var(--f-head);padding:4px 8px;border-radius:99px;font-style:normal;letter-spacing:.06em}
.mk.inv .rw i.ok{background:rgba(60,220,120,.18);color:#7dffb0}.mk.inv .rw i.low{background:rgba(255,189,46,.2);color:#ffbd2e}.mk.inv .rw i.exp{background:rgba(255,107,91,.2);color:#ff8b7a}

.rv-st{color:#ffb347;letter-spacing:3px;font-size:.95rem;text-shadow:0 0 12px rgba(255,140,30,.4)}