.b4{--card:rgba(255,255,255,.04);--line:rgba(255,255,255,.09);--mut:#9fb0cc;--cy:#8fd8ff;--vi:#3b82ff;--pk:#2f5bff;--am:#ffb020;--gd:#ffd36b;padding:80px 0}
.b4 .bento{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.b4 .btile{--mx:50%;--my:50%;position:relative;padding:26px;border-radius:22px;background:var(--card);border:1px solid var(--line);overflow:hidden;backdrop-filter:blur(10px);display:flex;flex-direction:column;gap:10px;min-height:220px}
.b4 .btile:before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:radial-gradient(260px circle at var(--mx) var(--my),var(--cy),transparent 60%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:.3s}
.b4 .btile:after{content:"";position:absolute;inset:0;background:radial-gradient(320px circle at var(--mx) var(--my),rgba(143,216,255,.09),transparent 60%);opacity:0;transition:.3s;pointer-events:none}
.b4 .btile:hover:before,.b4 .btile:hover:after{opacity:1}
.b4 .btile h3{font-size:1.15rem;letter-spacing:-.02em}.b4 .btile p{color:var(--mut)}.b4 .k{font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;color:var(--cy)}
.b4 .bhero{grid-column:span 2;grid-row:span 2}.b4 .bhero h3{font-size:clamp(1.6rem,3vw,2.4rem);line-height:1.15}
.b4 .btile svg{margin-top:auto;width:100%;max-height:110px}.b4 .bhero svg{max-height:200px}
.b4 .pl{fill:none;stroke:rgba(143,216,255,.15);stroke-width:6;stroke-linecap:round}.b4 .pl.draw{stroke:var(--vi);stroke-dasharray:900;stroke-dashoffset:900}.b4 .in .pl.draw{animation:dr 2.4s ease forwards}
@keyframes dr{to{stroke-dashoffset:0}}.pulse{fill:var(--cy);filter:drop-shadow(0 0 8px var(--cy))}.node{fill:none;stroke:var(--cy);stroke-width:2;animation:np 2s ease-in-out infinite;transform-origin:300px 50px}
@keyframes np{50%{transform:scale(1.5);opacity:.3}}
.b4 .cycle .ring{fill:none;stroke:rgba(143,216,255,.25);stroke-width:2;stroke-dasharray:4 6}.b4 .cycle .spin{transform-origin:60px 60px;animation:sp 12s linear infinite}.b4 .cycle .spin circle{fill:var(--vi)}.b4 .cycle .spin circle:first-child{fill:var(--cy);filter:drop-shadow(0 0 6px var(--cy))}@keyframes sp{to{transform:rotate(360deg)}}
.b4 .dots circle{fill:rgba(143,216,255,.12);stroke:var(--cy);stroke-width:1.5}.b4 .in .dots circle{animation:fl .4s forwards}
.b4 .dots circle:nth-child(2){animation-delay:.2s!important}.b4 .dots circle:nth-child(3){animation-delay:.4s!important}.b4 .dots circle:nth-child(4){animation-delay:.6s!important}.b4 .dots circle:nth-child(5){animation-delay:.8s!important}.b4 .dots circle:nth-child(6){animation-delay:1s!important}.b4 .dots circle:nth-child(7){animation-delay:1.2s!important}.b4 .dots circle:nth-child(8){animation-delay:1.4s!important}@keyframes fl{to{fill:var(--vi)}}
.b4 .wave path{fill:none;stroke:var(--cy);stroke-width:3;stroke-dasharray:12 10;animation:wv 1.5s linear infinite}@keyframes wv{to{stroke-dashoffset:-44}}
.b4 .radar circle{fill:var(--cy)}.b4 .radar .r1,.b4 .radar .r2{fill:none;stroke:var(--cy);stroke-width:2;transform-origin:100px 30px;animation:rd 2.4s ease-out infinite}.b4 .radar .r2{animation-delay:1.2s}@keyframes rd{from{transform:scale(1);opacity:.9}to{transform:scale(3.4);opacity:0}}
.b4 .rv4{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease;transition-delay:var(--d,0s)}.b4 .rv4.in{opacity:1;transform:none}
.b4 .rpanel{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center;padding:40px;border-radius:28px;background:var(--card);border:1px solid var(--line);backdrop-filter:blur(10px)}
.b4 .rgauge{position:relative;max-width:420px;width:100%;margin:0 auto;aspect-ratio:1;border-radius:50%;outline:none}.b4 .rgauge svg{width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.b4 .track{fill:none;stroke:rgba(255,255,255,.06);stroke-width:18}
.b4 .seg{fill:none;stroke-width:18;stroke-linecap:round;stroke-dasharray:0 691;transition:stroke-dasharray 1s cubic-bezier(.4,0,.2,1),stroke .4s}
.b4 .s1{stroke:var(--cy)}.b4 .s2{stroke:var(--vi);stroke-dashoffset:-172.8}.b4 .s3{stroke:var(--pk);stroke-dashoffset:-345.6}.b4 .s4{stroke:#6aa8ff;stroke-dashoffset:-518.4}
.b4 .rpanel.on .seg.s1,.b4 .rpanel.on .seg.s2,.b4 .rpanel.on .seg.s3,.b4 .rpanel.on .seg.s4{stroke-dasharray:160.8 691}
.b4 .seg.s2{transition-delay:.9s}.b4 .seg.s3{transition-delay:1.8s}.b4 .seg.s4{transition-delay:2.7s}
.b4 .halo{fill:none;stroke:var(--am);stroke-width:3;opacity:0;transition:opacity .6s,filter .6s;filter:drop-shadow(0 0 0 transparent)}
.b4 .rgauge:hover .halo,.b4 .rgauge:focus .halo,.b4 .rgauge.hov .halo{opacity:1;filter:drop-shadow(0 0 14px var(--am)) drop-shadow(0 0 30px rgba(255,211,107,.6));animation:gp 2.8s ease-in-out infinite}
@keyframes gp{50%{stroke:var(--gd);stroke-width:6;opacity:.6}}
.b4 .rgauge:before{content:"";position:absolute;inset:-6%;border-radius:50%;background:radial-gradient(circle,transparent 55%,rgba(255,176,32,.22) 68%,transparent 76%);opacity:0;transition:opacity .6s}
.b4 .rgauge:hover:before,.b4 .rgauge:focus:before,.b4 .rgauge.hov:before{opacity:1}
.b4 .ctr{position:absolute;inset:22%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.b4 .ctr strong{font-size:clamp(1.1rem,2.6vw,1.6rem);line-height:1.2;letter-spacing:-.02em}
.b4 .rgauge:hover .ctr .k,.b4 .rgauge.hov .ctr .k{color:var(--gd)}
.b4 .states{list-style:none;padding:0;display:grid;gap:14px}.b4 .st{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.03);opacity:.4;transition:.5s}
.b4 .st em{font-style:normal;font-size:.85rem;color:var(--mut)}.b4 .st em:before{content:"○ ";}
.b4 .rpanel.on .st{opacity:1;border-color:rgba(143,216,255,.35)}.b4 .rpanel.on .st em{color:var(--cy)}.b4 .rpanel.on .st em:before{content:"✓ "}
.b4 .st.s2{transition-delay:.9s}.b4 .st.s3{transition-delay:1.8s}.b4 .st.s4{transition-delay:2.7s}.b4 .st b{font-weight:700}.b4 .st.s1,.b4 .st.s2,.b4 .st.s3,.b4 .st.s4{stroke:none}
@media(max-width:860px){.b4 .bento{grid-template-columns:1fr}.b4 .bhero{grid-column:auto;grid-row:auto}.b4 .rpanel{grid-template-columns:1fr;padding:24px}.b4{padding:56px 0}}
@media(prefers-reduced-motion:reduce){.b4 *,.b4 *:before,.b4 *:after{animation:none!important;transition:none!important}.b4 .rv4{opacity:1;transform:none}.b4 .pl.draw{stroke-dashoffset:0}.b4 .pillars rect{transform:none}.b4 .seg{stroke-dasharray:160.8 691}.b4 .pulse{display:none}}

.b4 .bhero{justify-content:flex-start}.b4 .bhero svg.pipe{margin:18px 0 auto;flex:none;height:auto;max-height:none}.b4 .bhero .chips{margin-top:auto}
.b4 .chips{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px}.b4 .chips li{font-size:.78rem;padding:5px 12px;border-radius:999px;border:1px solid rgba(143,216,255,.3);color:var(--cy);background:rgba(143,216,255,.06)}
.b4 .rgauge:hover,.b4 .rgauge:focus-visible{box-shadow:0 0 60px rgba(255,176,32,.25)}
@media(max-width:860px){.b4 .bhero svg.pipe{min-height:90px}.b4 .rgauge{max-width:300px}}
.b4 .pillars rect:nth-child(2){fill:#2f5bff}.b4 .pillars rect:nth-child(3){fill:#8fd8ff}
.b4 .pillars rect:nth-child(1),.b4 .pillars rect:nth-child(4){fill:#3b82ff}