/* =====================================================================
   CASE STUDIES · hero index with a cursor-follow preview
   ===================================================================== */
.c-hero{position:relative;padding:calc(var(--nav-h) + 60px) 24px 70px;
  background:radial-gradient(45% 45% at 15% 10%,rgba(124,58,237,.16),transparent 70%),var(--bg)}
.c-hero-top{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap;margin-bottom:46px}
.c-hero .lead{margin-top:0;max-width:40ch;font-size:16.5px}
.meta{display:flex;gap:26px;margin-top:22px}
.meta div b{display:block;font-family:var(--f-d);font-weight:600;font-size:28px;letter-spacing:-.04em;color:var(--ink)}
.meta div span{font-family:var(--f-m);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.index{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.ix{position:relative;display:grid;grid-template-columns:70px minmax(0,1.1fr) minmax(0,1fr) 44px;gap:20px;align-items:center;padding:26px 8px;
  border-bottom:1px solid var(--line);transition:padding .4s cubic-bezier(.2,.8,.2,1)}
.ix::before{content:"";position:absolute;inset:0;transform:scaleY(0);transform-origin:bottom;transition:transform .45s cubic-bezier(.2,.8,.2,1);
  background:linear-gradient(90deg,rgba(124,58,237,.18),rgba(232,121,249,.06) 60%,transparent);z-index:-1}
.ix:hover::before{transform:scaleY(1)}
.ix:hover{padding-left:22px}
.ix .no{font-family:var(--f-m);font-size:13px;letter-spacing:.14em;color:var(--dim);transition:color .3s ease}
.ix .nm{font-family:var(--f-d);font-weight:600;font-size:clamp(24px,3.2vw,46px);letter-spacing:-.045em;line-height:1.05;color:var(--muted);transition:color .3s ease}
.ix .inf small{display:block;font-family:var(--f-m);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--pink)}
.ix .inf span{display:block;margin-top:6px;color:var(--muted);font-size:15px;line-height:1.5}
.ix .ar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(205,166,255,.25);color:var(--ink);
  transition:transform .4s ease,background .4s ease,border-color .4s ease}
.ix .ar svg{width:16px;height:16px}
.ix:hover .no{color:var(--pink)}
.ix:hover .nm{color:var(--ink)}
.ix:hover .ar{transform:rotate(-45deg);background:linear-gradient(135deg,var(--violet),var(--purple));border-color:transparent}
.ix .thumb{display:none}
.peek{position:fixed;left:0;top:0;z-index:45;width:300px;aspect-ratio:4/3;border-radius:18px;overflow:hidden;pointer-events:none;
  border:1px solid rgba(205,166,255,.35);box-shadow:0 30px 60px -20px rgba(0,0,0,.9),0 0 40px -10px rgba(168,85,247,.6);
  opacity:0;transform:translate(-50%,-50%) scale(.7) rotate(-6deg);transition:opacity .3s ease,transform .45s cubic-bezier(.2,.8,.2,1)}
.peek.on{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(var(--tilt,-3deg))}
.peek img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.15);transition:opacity .35s ease,transform .6s ease}
.peek img.on{opacity:1;transform:none}
.peek-wrap{position:fixed;left:0;top:0;z-index:45;pointer-events:none;will-change:transform}

/* =====================================================================
   CASE STUDIES · shared case layout
   ===================================================================== */
.case{position:relative;padding:84px 24px;scroll-margin-top:var(--nav-h)}
.case + .case{border-top:1px solid var(--line)}
.case-head{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:48px;align-items:end}
.case-k{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.badge-live{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:999px;background:rgba(74,222,128,.12);border:1px solid rgba(74,222,128,.3);
  font-family:var(--f-m);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#4ADE80}
.badge-live::before{content:"";width:6px;height:6px;border-radius:50%;background:#4ADE80;box-shadow:0 0 8px #4ADE80;animation:pulse 1.6s infinite}
.case-no{font-family:var(--f-m);font-size:12px;letter-spacing:.16em;color:var(--dim)}
.case h2{margin:16px 0 0;font-family:var(--f-d);font-weight:600;font-size:clamp(28px,3.4vw,48px);letter-spacing:-.045em;line-height:1.06;max-width:22ch}
.case h2 em{font-style:normal;background:linear-gradient(90deg,var(--glow),var(--pink));-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.08em}
.case .who{margin:14px 0 0;font-size:18px;line-height:1.45;color:var(--glow);max-width:40ch}
.case .d{margin:12px 0 0;color:var(--muted);font-size:16px;line-height:1.65;max-width:52ch}
.case .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.case .acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}

/* Avillion · live demo frame */
.frame{position:relative;margin-top:12px;aspect-ratio:16/8.4;border-radius:26px;overflow:hidden;border:1px solid rgba(205,166,255,.28);background:#07030D;
  box-shadow:0 40px 80px -40px rgba(124,58,237,.6)}
.frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#07030D}
.poster{position:absolute;inset:0;overflow:hidden}
.poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:kb 26s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1.04) translate(0,0)}to{transform:scale(1.18) translate(-3%,-2%)}}
.poster::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 70% at 50% 50%,rgba(5,2,8,.15),rgba(5,2,8,.75)),linear-gradient(180deg,rgba(5,2,8,.1),rgba(5,2,8,.55))}
.veil{all:unset;position:absolute;inset:0;z-index:3;display:grid;place-items:center;cursor:pointer;text-align:center}
.veil .play{width:84px;height:84px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,var(--violet),var(--pink));box-shadow:0 0 0 10px rgba(232,121,249,.16),0 0 60px rgba(232,121,249,.6);transition:transform .3s ease}
.veil:hover .play{transform:scale(1.08)}
.veil:focus-visible .play{outline:2px solid #fff;outline-offset:6px}
.veil .play svg{width:30px;height:30px;margin-left:4px}
.veil b{display:block;font-family:var(--f-d);font-weight:600;font-size:clamp(18px,2vw,26px);letter-spacing:-.03em;color:#fff}
.veil small{display:block;margin-top:8px;font-size:14px;color:var(--ink);opacity:.8}
.veil .ld{margin-top:14px;font-family:var(--f-m);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--glow);opacity:0}
.frame.loading .veil .ld{opacity:1}
.frame.is-live .poster,.frame.is-live .veil{opacity:0;pointer-events:none;transition:opacity .6s ease}
.ring-pulse{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-60px 0 0 -42px;border-radius:50%;border:1px solid rgba(232,121,249,.5);animation:rp 2.4s ease-out infinite;pointer-events:none}
@keyframes rp{to{transform:scale(2.6);opacity:0}}
.frame-bar{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:36px;flex-wrap:wrap}
.pill-dark{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;background:rgba(5,2,8,.7);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid rgba(205,166,255,.25);font-size:12.5px;color:var(--ink)}
button.pill-dark{cursor:pointer;font-family:var(--f-b)}
button.pill-dark:hover,a.pill-dark:hover{border-color:var(--glow)}
.feat3{display:grid;gap:10px}
.feat3 div{padding:18px 18px;border-radius:18px;border:1px solid var(--line);background:rgba(14,6,24,.6)}
.feat3 b{display:block;font-family:var(--f-d);font-weight:500;font-size:16px;letter-spacing:-.02em}
.feat3 span{display:block;margin-top:6px;color:var(--muted);font-size:14.5px;line-height:1.5}

/* split cases */
.split{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:52px;align-items:center}
.case.flip .split > :first-child{order:2}
.stage{position:relative;border-radius:26px;overflow:hidden;border:1px solid rgba(205,166,255,.22);aspect-ratio:1/0.86;background:#07030D}
.stage > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5;transform:scale(1.15);transition:transform 1.4s cubic-bezier(.2,.8,.2,1)}
.stage.in > img{transform:scale(1.02)}
.stage::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(5,2,8,.35),rgba(5,2,8,.85))}
.stage .cap{position:absolute;left:16px;top:16px;z-index:3}
.sys{position:absolute;left:5%;right:5%;bottom:5%;top:16%;z-index:2;border-radius:18px;padding:16px;
  background:rgba(14,6,24,.8);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(205,166,255,.22)}
.sys.auto{top:auto}
.sys-h{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px;font-size:13.5px;color:var(--ink)}
.live{display:inline-flex;align-items:center;gap:7px;font-family:var(--f-m);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--glow)}
.live::before{content:"";width:6px;height:6px;border-radius:50%;background:#4ADE80;box-shadow:0 0 8px #4ADE80;animation:pulse 1.6s infinite}

/* Alaara · WhatsApp → tickets */
.wa{display:grid;grid-template-columns:minmax(0,.9fr) 30px minmax(0,1.1fr);gap:8px;height:calc(100% - 34px)}
.col-h{font-family:var(--f-m);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:8px}
.chat,.tix{display:flex;flex-direction:column;gap:7px;overflow:hidden}
.bub{align-self:flex-start;max-width:100%;padding:8px 10px;border-radius:12px 12px 12px 3px;background:#1C3A2B;color:#DFF5E7;font-size:12.5px;line-height:1.35;
  opacity:0;transform:translateY(10px);transition:opacity .4s ease,transform .4s ease}
.bub.on{opacity:1;transform:none}
.bub small{display:block;margin-top:3px;font-family:var(--f-m);font-size:9.5px;color:#8FC3A4}
.arrow-col{display:grid;place-items:center}
.arrow-col span{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--violet),var(--pink));color:#fff;box-shadow:0 0 16px rgba(232,121,249,.6)}
.arrow-col svg{width:13px;height:13px}
.tk{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 8px;padding:8px 10px;border-radius:10px;border:1px solid rgba(205,166,255,.18);background:rgba(124,58,237,.1);
  font-size:12.5px;opacity:0;transform:translateX(-14px);transition:opacity .4s ease,transform .4s ease}
.tk.on{opacity:1;transform:none}
.tk b{font-weight:500;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk small{grid-column:1;font-family:var(--f-m);font-size:9.5px;letter-spacing:.06em;color:var(--muted)}
.st{grid-row:1/3;grid-column:2;align-self:center;font-family:var(--f-m);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;padding:4px 7px;border-radius:999px;
  background:rgba(232,121,249,.14);color:#F5B8FB}
.st.prog{background:rgba(205,166,255,.14);color:var(--glow)}
.st.done{background:rgba(74,222,128,.14);color:#4ADE80}

/* Showofff · one stock count */
.sku{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;background:rgba(124,58,237,.1);border:1px solid rgba(205,166,255,.16);margin-bottom:12px}
.sku i{width:34px;height:34px;border-radius:8px;flex-shrink:0;background:linear-gradient(135deg,#2A1240,#5B2A86)}
.sku b{display:block;font-weight:500;font-size:13.5px;color:var(--ink)}
.sku small{font-family:var(--f-m);font-size:10px;letter-spacing:.08em;color:var(--dim)}
.sku .one{margin-left:auto;text-align:right}
.sku .one em{display:block;font-style:normal;font-family:var(--f-d);font-weight:600;font-size:24px;letter-spacing:-.04em;color:var(--ink);transition:color .3s ease}
.sku .one em.bump{color:var(--pink)}
.chs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ch{position:relative;padding:10px 10px;border-radius:12px;border:1px solid rgba(205,166,255,.16);background:rgba(5,2,8,.5);text-align:center;transition:border-color .3s ease,box-shadow .3s ease}
.ch small{display:block;font-family:var(--f-m);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.ch b{display:block;margin-top:4px;font-family:var(--f-d);font-weight:600;font-size:20px;letter-spacing:-.03em;color:var(--ink)}
.ch.hit{border-color:var(--pink);box-shadow:0 0 22px -6px rgba(232,121,249,.8)}
.ch .sync{position:absolute;right:7px;top:7px;width:6px;height:6px;border-radius:50%;background:#4ADE80;box-shadow:0 0 8px #4ADE80}
.log{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:6px}
.log li{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);padding:6px 8px;border-radius:8px;background:rgba(5,2,8,.4);animation:logIn .4s ease}
.log li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--glow);flex-shrink:0}
.log li.ret::before{background:#4ADE80}
@keyframes logIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* Steel · mission control */
.mc-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;position:relative;margin:6px 0 14px}
.mc-steps::before{content:"";position:absolute;left:10%;right:10%;top:13px;height:2px;background:rgba(205,166,255,.14)}
.mc-steps .fill{position:absolute;left:10%;top:13px;height:2px;width:calc(80% * var(--p,0));background:linear-gradient(90deg,var(--violet),var(--pink));transition:width .7s ease}
.mc{position:relative;text-align:center;font-size:11.5px;color:var(--dim);transition:color .3s ease}
.mc i{display:grid;place-items:center;width:28px;height:28px;margin:0 auto 6px;border-radius:50%;background:#0C0516;border:1.5px solid rgba(205,166,255,.25);transition:all .3s ease;position:relative;z-index:1}
.mc i svg{width:13px;height:13px}
.mc.on{color:var(--ink)}
.mc.on i{border-color:transparent;background:linear-gradient(135deg,var(--violet),var(--pink));color:#fff;box-shadow:0 0 14px rgba(232,121,249,.6)}
.mc.bad i{background:linear-gradient(135deg,#B91C1C,var(--pink))}
.ord{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.ord div{padding:9px 11px;border-radius:10px;background:rgba(5,2,8,.5);border:1px solid rgba(205,166,255,.12)}
.ord small{display:block;font-family:var(--f-m);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.ord b{display:block;margin-top:3px;font-weight:500;font-size:14px;color:var(--ink)}
.gate{margin-top:10px;display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;border:1px solid rgba(205,166,255,.18);background:rgba(124,58,237,.1);transition:all .4s ease}
.gate .gi{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex-shrink:0;background:rgba(205,166,255,.12);color:var(--glow);transition:all .4s ease}
.gate .gi svg{width:18px;height:18px}
.gate b{display:block;font-weight:500;font-size:13.5px;color:var(--ink)}
.gate small{display:block;font-family:var(--f-m);font-size:10.5px;letter-spacing:.04em;color:var(--muted)}
.gate.bad{border-color:rgba(248,113,113,.55);background:rgba(185,28,28,.16);animation:shake .45s ease}
.gate.bad .gi{background:rgba(248,113,113,.2);color:#F87171}
.gate.ok{border-color:rgba(74,222,128,.45);background:rgba(74,222,128,.1)}
.gate.ok .gi{background:rgba(74,222,128,.16);color:#4ADE80}
@keyframes shake{25%{transform:translateX(-5px)}50%{transform:translateX(4px)}75%{transform:translateX(-2px)}}

/* =====================================================================
   CASE STUDIES · logos + closing CTA
   ===================================================================== */
.c-end{padding:40px 24px 100px}
.logo-row{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:20px 56px;padding:34px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.logo-row img{display:block;width:auto;opacity:.65;transition:opacity .3s ease,transform .3s ease,filter .3s ease}
.logo-row img:hover{opacity:1;transform:scale(1.05);filter:drop-shadow(0 0 14px rgba(205,166,255,.45))}
.logo-row .w{height:30px}.logo-row .m{height:56px}.logo-row .r{height:68px}
.next{margin-top:56px;display:grid;grid-template-columns:minmax(0,1.2fr) auto;gap:28px;align-items:center;padding:44px 48px;border-radius:28px;
  border:1px solid rgba(205,166,255,.25);background:radial-gradient(60% 120% at 100% 50%,rgba(168,85,247,.28),transparent 70%),linear-gradient(160deg,#150926,#08030F)}
.next h2{margin:14px 0 0;font-family:var(--f-d);font-weight:600;font-size:clamp(26px,3vw,42px);letter-spacing:-.045em;line-height:1.08}
.next h2 em{font-style:normal;background:linear-gradient(90deg,var(--glow),var(--pink));-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.08em}
.next p{margin:12px 0 0;color:var(--muted);font-size:16px;line-height:1.6;max-width:48ch}
.next .acts{display:flex;gap:12px;flex-wrap:wrap}

@media (max-width:900px){
  .ix{grid-template-columns:44px minmax(0,1fr) 40px;gap:14px}
  .ix .inf{grid-column:2;grid-row:2}
  .ix .ar{grid-row:1/3;grid-column:3}
  .ix .thumb{display:block;grid-column:1/-1;grid-row:3;aspect-ratio:16/7;border-radius:14px;overflow:hidden;border:1px solid rgba(205,166,255,.2)}
  .ix .thumb img{width:100%;height:100%;object-fit:cover;opacity:.8}
  .peek-wrap{display:none}
  .frame{aspect-ratio:4/3.4}
  .case-head{grid-template-columns:1fr;gap:24px}
  .split{grid-template-columns:1fr;gap:30px}
  .case.flip .split > :first-child{order:0}
  .next{grid-template-columns:1fr;padding:34px 28px}
}
@media (max-width:600px){
  .c-hero{padding:calc(var(--nav-h) + 36px) 16px 48px}
  .case{padding:60px 16px}
  .c-end{padding:30px 16px 80px}
  .ix{padding:20px 4px}
  .ix:hover{padding-left:4px}
  .stage{aspect-ratio:auto;height:470px}
  .sys{top:13%;left:3.5%;right:3.5%;bottom:3.5%;padding:12px}
  .wa{grid-template-columns:1fr;grid-template-rows:auto auto auto}
  .arrow-col span{transform:rotate(90deg)}
  .chat .bub:nth-child(n+4),.tix .tk:nth-child(n+4){display:none}
  .frame{aspect-ratio:3/4}
  .veil .play{width:68px;height:68px}
  .ring-pulse{width:68px;height:68px;margin:-52px 0 0 -34px}
  .next{padding:28px 22px}
  .logo-row{gap:18px 34px}
  .logo-row .w{height:22px}.logo-row .m{height:44px}.logo-row .r{height:54px}
}
@media (prefers-reduced-motion:reduce){
  .poster img,.ring-pulse{animation:none}
  .ix,.ix::before,.peek{transition:none}
}

/* first case sits right under the fixed nav now that the hero is gone */
.case:first-of-type{padding-top:calc(var(--nav-h) + 48px);border-top:0}

/* Steel · live gate weighbridge (truck drives in, load is weighed against the order) */
.wbx{display:flex;flex-direction:column;gap:12px}
.wbx .sys-h{margin-bottom:0}
.wb-lane{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px}
.wb-end{font-family:var(--f-m);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);white-space:nowrap}
.wb-road{position:relative;height:46px;border-radius:12px;background:rgba(5,2,8,.6);border:1px solid rgba(205,166,255,.14);overflow:hidden}
.wb-dash{position:absolute;left:10px;right:10px;top:50%;height:2px;margin-top:-1px;
  background:repeating-linear-gradient(90deg,rgba(205,166,255,.22) 0 10px,transparent 10px 20px)}
.wb-scale{position:absolute;right:8%;top:6px;bottom:6px;width:26%;border-radius:8px;display:grid;place-items:end center;padding-bottom:2px;
  border:1.5px dashed rgba(232,121,249,.45);background:rgba(124,58,237,.12);font-family:var(--f-m);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--glow)}
.wb-truck{position:absolute;top:50%;left:var(--x,2%);transform:translate(0,-50%);display:flex;align-items:center;gap:6px;padding:5px 9px;border-radius:9px;
  background:linear-gradient(135deg,var(--violet),var(--pink));color:#fff;box-shadow:0 6px 18px -6px rgba(232,121,249,.8);
  transition:left 1.6s cubic-bezier(.45,0,.2,1),background .4s ease}
.wb-truck svg{width:18px;height:18px}
.wb-truck b{font-family:var(--f-m);font-size:10.5px;font-weight:500;letter-spacing:.06em;white-space:nowrap}
@media (max-width:600px){ .wb-truck svg{width:15px;height:15px} .wb-end{font-size:9px} }
.wbx.bad .wb-truck{background:linear-gradient(135deg,#B91C1C,#F87171)}
.wbx.ok .wb-truck{background:linear-gradient(135deg,#15803D,#4ADE80)}
.wb-read{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:16px;padding:12px 14px;border-radius:12px;background:rgba(5,2,8,.5);border:1px solid rgba(205,166,255,.12)}
.wb-num small{display:block;font-family:var(--f-m);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.wb-num b{display:block;margin-top:2px;font-family:var(--f-d);font-weight:600;font-size:26px;letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums;transition:color .3s ease}
.wb-num em{font-style:normal;font-size:11.5px;color:var(--muted)}
.wbx.bad .wb-num b{color:#F87171}
.wbx.ok .wb-num b{color:#4ADE80}
.wb-meter{position:relative;height:10px;border-radius:999px;background:rgba(205,166,255,.12);overflow:visible}
.wb-meter i{position:absolute;left:0;top:0;bottom:0;width:var(--w,0%);border-radius:inherit;background:linear-gradient(90deg,var(--violet),var(--pink));transition:width .25s linear,background .3s ease}
.wbx.bad .wb-meter i{background:linear-gradient(90deg,#B91C1C,#F87171)}
.wbx.ok .wb-meter i{background:linear-gradient(90deg,#15803D,#4ADE80)}
.wb-target{position:absolute;right:0;top:-5px;bottom:-5px;width:2px;background:#fff;box-shadow:0 0 8px #fff}
.wbx .gate{margin-top:0}
.wb-log{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px;height:58px;overflow:hidden}
.wb-log li{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);animation:logIn .45s ease both}
.wb-log li::before{content:"";width:6px;height:6px;flex-shrink:0;border-radius:50%;background:var(--c,var(--glow))}
.wb-log li time{margin-left:auto;font-family:var(--f-m);font-size:10.5px;color:var(--dim)}
@keyframes logIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (max-width:600px){
  .wb-num b{font-size:22px}
  .wb-log li:nth-child(n+3){display:none}
}
@media (prefers-reduced-motion:reduce){ .wb-truck,.wb-meter i,.wb-log li{transition:none;animation:none} }