:root{
  /* Dark premium palette (navy + glass + emerald accent) */
  --wbl-bg:#070c17;
  --wbl-surface:rgba(18,27,45,.60);
  --wbl-surface2:rgba(18,27,45,.82);
  --wbl-text:#e9eefc;
  --wbl-muted:rgba(233,238,252,.68);
  --wbl-border:rgba(255,255,255,.10);
  --wbl-border2:rgba(255,255,255,.14);
  --wbl-shadow: none;
  --wbl-shadow2: none;
  --wbl-accent:#10b981;   /* emerald */
  --wbl-accent2:#22d3ee;  /* cyan */
  --wbl-accent3:#8b5cf6;  /* violet */
  --wbl-radius:18px;
  --wbl-radius2:14px;
  --wbl-container: 1160px;
}

*{box-sizing:border-box}
html{min-height:100%}
body.wbl-body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--wbl-text, #e9eefc);
  /* Base canvas */
  background: var(--wbl-bg);
  position:relative;
  isolation:isolate;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
.wbl-main{flex:1 0 auto}
/* Global background: fixed layer (no "repeating" transitions while scrolling) */
body.wbl-body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(980px 700px at 12% 0%, rgba(139,92,246,.18), transparent 55%),
    radial-gradient(900px 650px at 88% 10%, rgba(34,211,238,.16), transparent 55%),
    radial-gradient(900px 650px at 60% 80%, rgba(16,185,129,.12), transparent 55%),
    radial-gradient(1200px 900px at 50% 110%, rgba(255,255,255,.04), transparent 60%);
  opacity:.95;
}
body.wbl-body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.010) 0 1px, transparent 1px 160px);
  opacity:.55;
}

/* Auth page (login) */
body.wbl-body[data-page="login"] .wbl-header,
body.wbl-body[data-page="login"] .wbl-footer{display:none}
body.wbl-body[data-page="login"] .wbl-main{
  flex:1 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px 16px;
}

/* CRM SPA lives on dedicated layout (layouts/crm.htm).
   Keep site.css out of /crm to avoid CSS conflicts with PrimeReact. */
.wbl-auth{width:100%}
.wbl-auth__wrap{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.wbl-authCard{
  width:min(720px, 100%);
  border-radius: 22px;
  border:1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(1200px 700px at 18% 12%, rgba(139,92,246,.22), transparent 55%),
    radial-gradient(1200px 700px at 88% 18%, rgba(34,211,238,.18), transparent 55%),
    rgba(18,27,45,.42);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
  padding:24px;
  position:relative;
  overflow:hidden;
}

/* Auth page enter animation (no flicker) */
body.wbl-body[data-page="login"] .wbl-authCard{
  will-change: opacity, transform;
  transition: opacity 520ms cubic-bezier(.18,.9,.18,1), transform 520ms cubic-bezier(.18,.9,.18,1);
}
html.wbl-auth-pre body.wbl-body[data-page="login"] .wbl-authCard{
  opacity:0;
  transform: translateY(10px) scale(.99);
}
body.wbl-body[data-page="login"] .wbl-authCard.is-in{
  opacity:1;
  transform:none;
}
.wbl-authCard::before{
  content:"";
  position:absolute; inset:-2px;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.016) 0 1px, transparent 1px 180px);
  opacity:.55;
  pointer-events:none;
}
.wbl-authCard > *{position:relative; z-index:1}
.wbl-authTop{text-align:center}
.wbl-authBrand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:900;
  letter-spacing:-.02em;
  color: rgba(233,238,252,.92);
}
.wbl-authTitle{
  margin-top:14px;
  font-weight:980;
  letter-spacing:-.03em;
  font-size:34px;
  line-height:1.12;
}
.wbl-authSub{
  margin-top:8px;
  color: rgba(233,238,252,.64);
  line-height:1.55;
}
.wbl-authSeg{
  margin-top:18px;
  display:flex;
  gap:8px;
  padding:8px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(7,12,23,.42);
  position:relative;
  --wbl-auth-n: 2;
  --wbl-auth-i: 0;
}
.wbl-authSeg::before{
  content:"";
  position:absolute;
  top:8px; bottom:8px; left:8px;
  width: calc((100% - 16px) / var(--wbl-auth-n));
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
  transform: translateX(calc(var(--wbl-auth-i) * 100%));
  transition: transform 420ms cubic-bezier(.18,.9,.18,1);
  pointer-events:none;
}
.wbl-authSeg__btn{
  flex:1;
  border:0;
  cursor:pointer;
  border-radius:999px;
  padding:10px 12px;
  background: transparent;
  color: rgba(233,238,252,.78);
  font-weight:800;
  position:relative;
  z-index:1;
}
.wbl-authSeg__btn.is-active{
  color: rgba(233,238,252,.95);
}
/* Panes: horizontal slide switch */
.wbl-authPanes{
  margin-top:16px;
  overflow:hidden;
  transition: height 420ms cubic-bezier(.18,.9,.18,1);
  box-sizing:border-box;
  padding-bottom:14px; /* breathing room for links */
}
.wbl-authTrack{
  display:flex;
  width:200%;
  /* Track is 200% width, so one pane shift = 50% of track */
  transform: translateX(calc(var(--wbl-auth-i, 0) * -50%));
  transition: transform 520ms cubic-bezier(.18,.9,.18,1);
  will-change: transform;
}
.wbl-authPane{
  flex:0 0 50%;
  max-width:50%;
  padding-right:0;
  box-sizing:border-box;
  padding-bottom:6px; /* prevents last line clipping */
  opacity:1;
  transform:none;
  max-height:none;
  overflow:visible;
  pointer-events:auto;
}
.wbl-authPane[aria-hidden="true"]{pointer-events:none}
/* Allow smooth transitions even if template uses [hidden] on panes */
html.wbl-js body.wbl-body[data-page="login"] .wbl-authPane[hidden]{display:block !important}
.wbl-authPane[aria-hidden="true"]{pointer-events:none}

.wbl-authBtn--primary{
  background: linear-gradient(135deg, rgba(34,211,238,.95), rgba(16,185,129,.88), rgba(139,92,246,.86));
  color:#06130f;
  position:relative;
  overflow:hidden;
}
.wbl-authBtn--primary::after{
  content:"";
  position:absolute;
  top:-40%;
  left:-60%;
  width:60%;
  height:180%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  transform: rotate(18deg) translateX(-40%);
  opacity:.0;
  transition: opacity 220ms ease;
  pointer-events:none;
}
.wbl-authBtn--primary:hover::after{
  opacity:.75;
  animation: wblAuthShine 900ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes wblAuthShine{
  from{ transform: rotate(18deg) translateX(-40%); }
  to{ transform: rotate(18deg) translateX(260%); }
}

@media (prefers-reduced-motion: reduce){
  body.wbl-body[data-page="login"] .wbl-authCard{
    opacity:1;
    transform:none;
    transition:none !important;
  }
  .wbl-authPanes{transition:none !important}
  .wbl-authTrack{transition:none !important}
  .wbl-authPane,
  .wbl-authSeg::before,
  .wbl-authBtn--primary::after{transition:none !important; animation:none !important}
}
.wbl-authForm{margin-top:4px}
.wbl-authField{
  display:flex;
  align-items:center;
  gap:10px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(7,12,23,.38);
  padding:10px 14px;
  transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}
.wbl-authField:hover{
  border-color: rgba(255,255,255,.22);
  background: rgba(7,12,23,.48);
}
.wbl-authField:focus-within{
  border-color: rgba(34,211,238,.55);
  background: rgba(7,12,23,.56);
}
.wbl-authField__ic{width:18px;height:18px; color: rgba(233,238,252,.70); flex:0 0 18px}
.wbl-authInput{
  width:100%;
  border:0;
  outline:0;
  background: transparent;
  color: rgba(233,238,252,.92);
  font-size:15px;
}
.wbl-authInput:focus{outline:0}
.wbl-authInput::placeholder{color: rgba(233,238,252,.46)}

.wbl-authPwToggle{
  flex:0 0 auto;
  width:18px;
  height:18px;
  border-radius:10px;
  border:0;
  background: transparent;
  color: rgba(233,238,252,.78);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  position:relative;
  transition: filter 180ms ease, background 180ms ease, border-color 180ms ease;
}
.wbl-authPwToggle::before{
  content:"";
  position:absolute;
  inset:-10px; /* larger hit-area without changing layout height */
}
.wbl-authPwToggle:hover{
  filter: brightness(1.06);
  background: transparent;
}
.wbl-authPwToggle:active{
  filter: brightness(1.02);
}

/* Staff restore / sign-in swap */
.wbl-authView{transition: opacity 220ms ease, transform 220ms ease, max-height 420ms cubic-bezier(.18,.9,.18,1)}
.wbl-authView[hidden]{display:block !important; opacity:0; transform: translateX(12px); max-height:0; overflow:hidden; pointer-events:none}
.wbl-authView.is-active{opacity:1; transform:none; max-height: 999px; overflow:visible; pointer-events:auto}
.wbl-authHint{
  margin-top:10px;
  font-size:13px;
  color: rgba(233,238,252,.62);
  line-height:1.55;
}
.wbl-authBtn{
  margin-top:14px;
  width:100%;
  border:0;
  cursor:pointer;
  border-radius: 999px;
  padding:12px 14px;
  font-weight:900;
  letter-spacing:-.01em;
  background: linear-gradient(135deg, rgba(233,238,252,.22), rgba(233,238,252,.08));
  color: rgba(233,238,252,.95);
  transition: transform 180ms ease, filter 180ms ease;
}
.wbl-authBtn:hover{filter: brightness(1.05)}
.wbl-authBtn:active{transform: translateY(0)}
.wbl-authBtn:disabled{opacity:.6; cursor:not-allowed}
.wbl-authBtn.wbl-authBtn--primary{
  background: linear-gradient(135deg, rgba(34,211,238,.96), rgba(139,92,246,.90));
}
.wbl-authBtn.wbl-authBtn--primary:hover{
  filter: brightness(1.06) saturate(1.06);
  transform: translateY(-1px);
}
.wbl-authBtn.wbl-authBtn--primary:active{
  transform: translateY(0);
  filter: brightness(1.02);
}
.wbl-authBtn--ghost{
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:none;
}
.wbl-authMsg{
  margin-top:10px;
  padding:10px 12px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(7,12,23,.35);
  color: rgba(233,238,252,.78);
  line-height:1.45;
}
.wbl-authLinks{
  margin-top:12px;
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  color: rgba(233,238,252,.62);
  font-size:13px;
}
.wbl-authLinks a{color: rgba(34,211,238,.95)}
.wbl-authLinks a:hover{text-decoration:none}
.wbl-authBlock{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(7,12,23,.34);
  border-radius: 18px;
  padding:16px;
}
.wbl-authBlock__t{font-weight:950; letter-spacing:-.02em; font-size:16px}
.wbl-authBlock__p{margin-top:8px; color: rgba(233,238,252,.64); line-height:1.55}
.wbl-authActions{margin-top:12px; display:flex; gap:10px; flex-wrap:wrap}
.wbl-authActions .wbl-authBtn{margin-top:0; width:auto; flex:1 1 180px; text-align:center; display:inline-flex; justify-content:center}
.wbl-authFoot{
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.08);
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
  color: rgba(233,238,252,.55);
  font-size:13px;
}
.wbl-authDot{width:4px;height:4px;border-radius:999px;background: rgba(233,238,252,.28); align-self:center}

@media (max-width: 520px){
  .wbl-authCard{padding:18px}
  .wbl-authTitle{font-size:30px}
}
a{color:inherit; text-decoration:none}
a:hover{text-decoration:none}

.wbl-container{
  max-width:var(--wbl-container);
  margin:0 auto;
  padding:0 18px;
}

/* Motion / reveal */
.reveal{
  /* Fail-safe: content is visible even if JS fails to run */
  opacity:1;
  transform:none;
}
.wbl-js .reveal{
  /* Never hide content completely to avoid "empty slides" */
  opacity:1;
  transform: translateY(10px);
  transition: opacity 700ms cubic-bezier(.2,.8,.2,1), transform 700ms cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform;
}
.wbl-js .reveal.is-in{ opacity:1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce){
  .wbl-js .reveal{opacity:1; transform:none; transition:none}
  .wbl-hero__track{transition:none !important}
}

/* Slide enter animations (per-slide, re-triggers on change via .is-entering) */
@keyframes wblFadeUp{
  from{ opacity:0; transform: translateY(14px); filter: blur(2px); }
  to{ opacity:1; transform: translateY(0); filter: blur(0); }
}
@keyframes wblPop{
  from{ opacity:0; transform: translateY(10px) scale(.98); filter: blur(2px); }
  to{ opacity:1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes wblFloatIn{
  from{ opacity:0; transform: translateY(12px) scale(.985); }
  to{ opacity:1; transform: translateY(0) scale(1); }
}

.wbl-hero__slide.is-entering .wbl-kicker{ animation: wblFadeUp 680ms cubic-bezier(.2,.8,.2,1) both; }
.wbl-hero__slide.is-entering .wbl-h1{ animation: wblFadeUp 760ms cubic-bezier(.2,.8,.2,1) both; animation-delay: 70ms; }
.wbl-hero__slide.is-entering .wbl-sub{ animation: wblFadeUp 760ms cubic-bezier(.2,.8,.2,1) both; animation-delay: 140ms; }
.wbl-hero__slide.is-entering .wbl-actions{ animation: wblFadeUp 760ms cubic-bezier(.2,.8,.2,1) both; animation-delay: 210ms; }
.wbl-hero__slide.is-entering .wbl-badges{ animation: wblFadeUp 760ms cubic-bezier(.2,.8,.2,1) both; animation-delay: 280ms; }

/* Slide A: stats grid pops */
.wbl-hero__slide--a.is-entering .wbl-stats{ animation: wblPop 820ms cubic-bezier(.2,.9,.2,1) both; animation-delay: 120ms; }

/* Slide B: dashboard gets its own pop + stagger cards */
.wbl-hero__slide--b.is-entering .wbl-board{ animation: wblPop 860ms cubic-bezier(.2,.9,.2,1) both; animation-delay: 120ms; }
.wbl-hero__slide--b.is-entering .wbl-boardCard{ animation: wblPop 820ms cubic-bezier(.2,.9,.2,1) both; }
.wbl-hero__slide--b.is-entering .wbl-boardCard:nth-child(1){ animation-delay: 220ms; }
.wbl-hero__slide--b.is-entering .wbl-boardCard:nth-child(2){ animation-delay: 300ms; }
.wbl-hero__slide--b.is-entering .wbl-boardCard:nth-child(3){ animation-delay: 380ms; }

/* Slide C: phone floats in; bubbles appear */
.wbl-hero__slide--c.is-entering .wbl-phone{ animation: wblFloatIn 900ms cubic-bezier(.2,.9,.2,1) both; animation-delay: 120ms; }
.wbl-hero__slide--c.is-entering .wbl-bubble{ animation: wblFadeUp 720ms cubic-bezier(.2,.8,.2,1) both; }
.wbl-hero__slide--c.is-entering .wbl-bubble:nth-child(1){ animation-delay: 260ms; }
.wbl-hero__slide--c.is-entering .wbl-bubble:nth-child(2){ animation-delay: 330ms; }
.wbl-hero__slide--c.is-entering .wbl-bubble:nth-child(3){ animation-delay: 400ms; }

/* Header */
.wbl-header{
  position:sticky;
  top:0;
  z-index:30;
  backdrop-filter:saturate(160%) blur(10px);
  background:rgba(7,12,23,.62);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.wbl-nav{
  height:68px;
  display:flex;
  align-items:center;
  gap:14px;
}
.wbl-brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  letter-spacing:-.02em;
}
.wbl-mark{
  width:34px;height:34px;border-radius:12px;
  background: linear-gradient(135deg, var(--wbl-accent3), var(--wbl-accent2));
  box-shadow: none;
}
.wbl-brand__text{font-size:16px}
.wbl-links{
  display:flex;
  align-items:center;
  gap:14px;
  margin-left:8px;
  color:rgba(233,238,252,.80);
}
.wbl-links a{
  padding:8px 10px;
  border-radius:10px;
  position:relative;
}
.wbl-links a:hover{
  background:transparent;
}
.wbl-links a::after{
  content:"";
  position:absolute;
  left:10px;
  right:10px;
  bottom:5px;
  height:2px;
  border-radius:999px;
  background: linear-gradient(135deg, var(--wbl-accent2), var(--wbl-accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 260ms ease;
  opacity:.85;
}
.wbl-links a:hover::after{ transform: scaleX(1); }
.wbl-cta{margin-left:auto; display:flex; gap:10px; align-items:center}

.wbl-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(18,27,45,.55);
  box-shadow: none;
  font-weight:600;
  font-size:14px;
  line-height:1.1;
  font-family: inherit;
  color: rgba(233,238,252,.90);
  cursor:pointer;
  position:relative;
  overflow:hidden;
}
button.wbl-btn{appearance:none}
.wbl-btn{transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease}
.wbl-btn:hover{transform: translateY(-1px); border-color: rgba(255,255,255,.18)}
.wbl-btn:active{transform: translateY(0)}
.wbl-btn::after{
  content:"";
  position:absolute;
  inset:-2px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
  transform: translateX(-140%);
  opacity:0;
  transition: transform 700ms cubic-bezier(.2,.8,.2,1), opacity 260ms ease;
  pointer-events:none;
}
.wbl-btn:hover::after{transform: translateX(140%); opacity:1}
.wbl-btn--primary::after{background: linear-gradient(90deg, transparent, rgba(255,255,255,.26), transparent)}
.wbl-btn--ghost::after{background: linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent)}
.wbl-btn--sm{padding:9px 12px; border-radius:12px; font-size:13px}
.wbl-btn--wide{width:100%}
.wbl-btn--primary{transition: transform 180ms ease, filter 180ms ease}
.wbl-btn--primary:hover{filter: saturate(1.08) contrast(1.02)}
.wbl-btn--primary{
  border-color:transparent;
  background: linear-gradient(135deg, var(--wbl-accent), rgba(16,185,129,.72));
  color:#06130f;
  box-shadow: none;
}
.wbl-btn--shine.wbl-btn--primary::after{
  opacity:1;
  transform: translateX(-140%);
  animation: wblShine 3.2s cubic-bezier(.2,.8,.2,1) infinite;
}
@keyframes wblShine{
  0%{ transform: translateX(-140%); opacity:0 }
  20%{ opacity:.0 }
  35%{ opacity:.9 }
  55%{ transform: translateX(140%); opacity:0 }
  100%{ transform: translateX(140%); opacity:0 }
}
@media (prefers-reduced-motion: reduce){
  .wbl-btn--shine.wbl-btn--primary::after{animation:none; opacity:0}
}
.wbl-btn--ghost{
  background:rgba(18,27,45,.55);
}
.wbl-btn--ghost{color: rgba(233,238,252,.90)}
.wbl-btn--ghost:hover{color: rgba(233,238,252,.96)}

.wbl-burger{
  display:none;
  margin-left:8px;
  width:42px;height:42px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(18,27,45,.55);
  box-shadow: none;
}
.wbl-burger span{
  display:block;
  width:18px;
  height:2px;
  background:rgba(233,238,252,.78);
  margin:4px auto;
  border-radius:2px;
}

.wbl-mobile{
  position:fixed; inset:0;
  background:#070c17;
  z-index:9996;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition: opacity 260ms ease, visibility 0s linear 260ms;
}
.wbl-mobile[hidden]{display:none !important}
.wbl-mobile.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition: opacity 260ms ease, visibility 0s linear 0s;
}
.wbl-mobile__panel{
  position:absolute; right:0; top:0; bottom:0;
  width:min(420px, 92vw);
  background:#070c17;
  border-left:1px solid rgba(255,255,255,.10);
  padding:0;
  display:flex;
  flex-direction:column;
  overflow:auto;
  transform: translateX(105%);
  opacity:0;
  transition: transform 360ms cubic-bezier(.18,.9,.18,1), opacity 240ms ease;
}
.wbl-mobile.is-open .wbl-mobile__panel{transform: translateX(0); opacity:1}
.wbl-mobile__panel::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(980px 640px at 18% 12%, rgba(34,211,238,.10), transparent 60%),
    radial-gradient(980px 640px at 86% 18%, rgba(139,92,246,.10), transparent 60%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.012) 0 1px, transparent 1px 160px);
  opacity:.9;
}
.wbl-mobile__panel > *{position:relative; z-index:1}
.wbl-mobile__head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:16px;
  margin-bottom:0;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.wbl-mobile__title{font-weight:800}
.wbl-mobile__links{
  display:flex;
  flex-direction:column;
  gap:0;
  padding:6px 0;
  border-radius:0;
  background: transparent;
  border:0;
  flex:1;
}
.wbl-mobile__links a{
  padding:14px 16px;
  border-radius:0;
  background:transparent;
  border:0;
  border-bottom:1px solid rgba(255,255,255,.06);
  color: rgba(233,238,252,.90);
  display:flex;
  align-items:center;
  gap:10px;
}
.wbl-mobile__links a:hover{background: rgba(255,255,255,.05)}
.wbl-mobile__links a:focus-visible{outline:2px solid rgba(34,211,238,.45); outline-offset:2px}
.wbl-mobile__links a.wbl-btn{
  margin:12px 16px 16px;
  border-radius:0;
  border:0;
  border-bottom:0;
  background: linear-gradient(135deg, var(--wbl-accent), rgba(16,185,129,.72));
  color:#06130f;
}
.wbl-mobile__ic{
  width:18px;height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color: rgba(233,238,252,.78);
  flex: 0 0 18px;
}
.wbl-mobile__links a:hover .wbl-mobile__ic{color: rgba(34,211,238,.95)}
.wbl-mobile__links a.wbl-btn .wbl-mobile__ic{color:#06130f}

@media (prefers-reduced-motion: reduce){
  .wbl-mobile,
  .wbl-mobile__panel{transition:none !important}
}

/* Hero */
.wbl-hero{position:relative; padding:0}
.wbl-hero{overflow:hidden}
.wbl-hero__bg{
  position:absolute; inset:0;
  z-index:0;
  background:
    radial-gradient(780px 520px at 16% 18%, rgba(139,92,246,.22), transparent 62%),
    radial-gradient(780px 520px at 82% 12%, rgba(34,211,238,.20), transparent 62%),
    radial-gradient(900px 680px at 56% 86%, rgba(16,185,129,.14), transparent 62%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.020) 0 1px, transparent 1px 92px);
  pointer-events:none;
  transform: translate3d(calc(var(--wbl-mx, 0) * 10px), calc(var(--wbl-my, 0) * 10px), 0);
  transition: transform 120ms linear;
  opacity:.55;
}
.wbl-hero__bg::before,
.wbl-hero__bg::after{
  content:"";
  position:absolute;
  inset:-10%;
  pointer-events:none;
  background:
    radial-gradient(520px 360px at 25% 35%, rgba(79,70,229,.18), transparent 62%),
    radial-gradient(560px 380px at 75% 20%, rgba(6,182,212,.18), transparent 62%);
  filter: blur(10px);
  opacity:.85;
  animation: wblFloat 16s ease-in-out infinite;
}
.wbl-hero__bg::after{
  animation-duration: 22s;
  opacity:.65;
  transform: translate3d(calc(var(--wbl-mx, 0) * -14px), calc(var(--wbl-my, 0) * -14px), 0);
}
@keyframes wblFloat{
  0%{ transform: translate3d(-10px, 6px, 0) scale(1); }
  50%{ transform: translate3d(12px, -8px, 0) scale(1.02); }
  100%{ transform: translate3d(-10px, 6px, 0) scale(1); }
}
.wbl-hero__slider{position:relative; z-index:1; overflow:hidden}
.wbl-hero__track{
  display:flex;
  overflow:visible;
  width:100%;
  will-change: transform;
  border-radius: 0;
  border:0;
  background:transparent;
  box-shadow: none;
}
.wbl-hero__slide{
  position:relative;
  isolation:isolate;
  min-width:100%;
  padding:44px 0 72px;
  opacity:.74;
  transform: scale(.988);
  transition: opacity 520ms ease, transform 520ms ease;
}
.wbl-hero__slide.is-active{opacity:1; transform: scale(1)}
.wbl-hero__content{
  position:relative;
  z-index:5;
  color: var(--wbl-text, #e9eefc);
  text-shadow: 0 1px 0 rgba(0,0,0,.18);
  opacity:1 !important;
  visibility:visible !important;
}

/* Per-slide media (image/video background) */
.wbl-hero__media{
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  overflow:hidden;
}
.wbl-hero__media::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(7,12,23,.05) 0%, rgba(7,12,23,.72) 72%, rgba(7,12,23,.92) 100%),
    radial-gradient(900px 620px at 28% 24%, rgba(255,255,255,.10), rgba(255,255,255,.0) 62%);
}
.wbl-hero__media > img,
.wbl-hero__media > video{
  position:absolute;
  inset:-2%;
  width:104%;
  height:104%;
  object-fit:cover;
  filter:saturate(1.04) contrast(1.02);
  opacity:.32;
  transform: scale(1.02);
}

/* Subtle tilt/parallax scene */
.wbl-hero__card,
.wbl-hero__art{
  transform: translate3d(0,0,0)
    rotateX(calc(var(--wbl-tilt-y, 0) * -2.2deg))
    rotateY(calc(var(--wbl-tilt-x, 0) * 2.2deg));
  transform-style: preserve-3d;
  transition: transform 220ms ease;
}
.wbl-hero__art{
  transform:
    translate3d(calc(var(--wbl-tilt-x, 0) * 6px), calc(var(--wbl-tilt-y, 0) * 6px), 0);
}
@media (prefers-reduced-motion: reduce){
  .wbl-hero__card,.wbl-hero__art{transform:none !important; transition:none !important}
  .wbl-hero__slide{transition:none !important; transform:none !important; opacity:1}
  .wbl-hero__media > img,.wbl-hero__media > video{transform:none}
}
.wbl-hero__grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:22px;
  align-items:center;
}
.wbl-heroCopy{
  min-height: unset;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap:18px;
}
.wbl-heroCopy__bottom{margin-top:18px}
.wbl-kicker{
  display:inline-flex; align-items:center; gap:10px;
  color:rgba(233,238,252,.72);
  font-weight:600;
  letter-spacing:.02em;
  margin-bottom:10px;
}
.wbl-h1{font-size:48px; line-height:1.04; letter-spacing:-.035em; margin:0}
.wbl-sub{margin:12px 0 0; color:var(--wbl-muted); font-size:16px; line-height:1.5}
.wbl-actions{margin-top:16px; display:flex; gap:10px; flex-wrap:wrap}
.wbl-badges{margin-top:14px; display:flex; gap:8px; flex-wrap:wrap}
.wbl-badge{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color:rgba(233,238,252,.72);
}

.wbl-hero__card{
  border-radius: var(--wbl-radius2);
  background: rgba(18,27,45,.50);
  border:1px solid rgba(255,255,255,.10);
  box-shadow: none;
  padding:16px;
}
.wbl-hero__card{
  backdrop-filter: blur(10px) saturate(150%);
}

/* Trusted-by pill */
.wbl-trust{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:14px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.06);
  backdrop-filter: blur(12px) saturate(160%);
}
.wbl-trust__label{
  font-size:11px;
  letter-spacing:.12em;
  font-weight:800;
  color:rgba(233,238,252,.78);
}
.wbl-trust__icons{display:flex; gap:8px; align-items:center}
.wbl-trust__icon{
  width:22px;height:22px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(18,27,45,.55);
  font-size:11px;
  color:rgba(233,238,252,.86);
}

/* Stats grid (hero) */
.wbl-stats{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
}
.wbl-statCard{
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(18,27,45,.55);
  backdrop-filter: blur(12px) saturate(160%);
  padding:18px 18px;
  min-height:112px;
  transition: transform 220ms ease, border-color 220ms ease, background-color 220ms ease;
}
.wbl-statCard:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.18);
  background:rgba(18,27,45,.70);
}
.wbl-statNum{
  font-size:34px;
  font-weight:900;
  letter-spacing:-.03em;
  line-height:1.05;
}
.wbl-statLabel{
  margin-top:8px;
  color:rgba(233,238,252,.62);
}
.wbl-statCard--cta{
  border-color: rgba(16,185,129,.22);
  background: linear-gradient(135deg, rgba(16,185,129,.18), rgba(18,27,45,.60));
  text-decoration:none;
}
.wbl-statTitle{
  font-size:18px;
  font-weight:900;
  letter-spacing:-.02em;
}
.wbl-statLink{
  margin-top:10px;
  color: rgba(16,185,129,.92);
  font-weight:700;
}
@media (max-width: 980px){
  .wbl-stats{grid-template-columns: 1fr 1fr}
}
@media (max-width: 720px){
  .wbl-stats{grid-template-columns: 1fr}
}
.wbl-cardTitle{font-weight:800; margin-bottom:10px}
.wbl-list{margin:0; padding-left:18px; color:rgba(233,238,252,.72)}
.wbl-list li{margin:6px 0}
.wbl-mini{display:grid; grid-template-columns: repeat(3,1fr); gap:10px; margin-top:12px}
.wbl-mini__kpi{padding:10px 10px; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.04); border-radius:12px}
.wbl-mini__k{font-size:12px; color:rgba(233,238,252,.62)}
.wbl-mini__v{font-size:18px; font-weight:800}

/* Slide 2: "Case dashboard" */
.wbl-board{
  border-radius: 22px;
  border:1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(620px 380px at 20% 10%, rgba(34,211,238,.10), transparent 60%),
    radial-gradient(620px 380px at 86% 20%, rgba(139,92,246,.10), transparent 60%),
    rgba(18,27,45,.48);
  backdrop-filter: blur(14px) saturate(160%);
  padding:16px;
  position:relative;
  overflow:hidden;
}
.wbl-board::after{
  content:"";
  position:absolute; inset:-2px;
  background: linear-gradient(135deg, rgba(34,211,238,.18), rgba(16,185,129,.12), rgba(139,92,246,.16));
  opacity:.22;
  filter: blur(18px);
  pointer-events:none;
}
.wbl-board__top{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; position:relative; z-index:1}
.wbl-board__k{
  font-size:11px;
  letter-spacing:.14em;
  font-weight:900;
  color:rgba(233,238,252,.70);
}
.wbl-board__t{font-weight:900; letter-spacing:-.02em; margin-top:2px}
.wbl-board__pill{
  font-size:12px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(16,185,129,.28);
  background:rgba(16,185,129,.10);
  color:rgba(16,185,129,.95);
  font-weight:800;
  white-space:nowrap;
}
.wbl-tline{position:relative; display:flex; gap:14px; margin-top:12px; justify-content:space-between; z-index:1}
.wbl-tline::before{
  content:"";
  position:absolute;
  left:8px; right:8px; top:10px;
  height:2px;
  background: linear-gradient(90deg, rgba(16,185,129,.42), rgba(233,238,252,.12));
  opacity:.8;
}
.wbl-tline__dot{
  width:18px; height:18px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  position:relative;
  z-index:1;
}
.wbl-tline__dot.is-on{
  border-color: rgba(16,185,129,.40);
  background: rgba(16,185,129,.16);
  box-shadow: 0 0 0 6px rgba(16,185,129,.08);
}
.wbl-tline__labels{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-top:8px;
  font-size:12px;
  color:rgba(233,238,252,.62);
  z-index:1;
  position:relative;
}
.wbl-board__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
  margin-top:14px;
  position:relative;
  z-index:1;
}
.wbl-boardCard{
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.05);
  padding:12px 12px;
  min-height:102px;
  transition: transform 220ms ease, border-color 220ms ease, background-color 220ms ease;
}
.wbl-boardCard:hover{transform: translateY(-2px); border-color: rgba(255,255,255,.18); background:rgba(255,255,255,.07)}
.wbl-boardCard--wide{grid-column: 1 / -1}
.wbl-boardCard__ic{font-size:18px; opacity:.95}
.wbl-boardCard__h{margin-top:6px; font-size:12px; color:rgba(233,238,252,.68); font-weight:800; letter-spacing:.06em; text-transform:uppercase}
.wbl-boardCard__v{margin-top:6px; font-size:22px; font-weight:900; letter-spacing:-.02em}
.wbl-boardCard__s{margin-top:6px; color:rgba(233,238,252,.62); font-size:13px; line-height:1.35}
.wbl-docRow{margin-top:10px; display:flex; flex-wrap:wrap; gap:8px}
.wbl-doc{
  font-size:12px;
  padding:7px 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(18,27,45,.55);
  color:rgba(233,238,252,.78);
}

/* Slide 3: phone mock + chat */
.wbl-phone{
  border-radius: 28px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(10,14,26,.72);
  backdrop-filter: blur(14px) saturate(160%);
  overflow:hidden;
  position:relative;
  min-height: 320px;
}
.wbl-phone::before{
  content:"";
  position:absolute; inset:-20%;
  background:
    radial-gradient(560px 360px at 20% 20%, rgba(34,211,238,.12), transparent 62%),
    radial-gradient(520px 360px at 80% 10%, rgba(139,92,246,.12), transparent 62%),
    radial-gradient(720px 520px at 60% 90%, rgba(16,185,129,.10), transparent 62%);
  filter: blur(14px);
  opacity:.9;
  pointer-events:none;
}
.wbl-phone__top{height:16px; display:flex; justify-content:center; align-items:center; position:relative; z-index:1}
.wbl-phone__pill{width:64px; height:6px; border-radius:999px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.10)}
.wbl-phone__head{
  padding:10px 14px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:rgba(233,238,252,.78);
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
  position:relative;
  z-index:1;
}
.wbl-phone__app{font-weight:900; letter-spacing:-.01em}
.wbl-phone__time{font-size:12px; opacity:.8}
.wbl-phone__screen{padding:14px; position:relative; z-index:1}
.wbl-botMsg{
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  padding:12px 12px;
}
.wbl-botMsg__title{font-weight:900; font-size:13px}
.wbl-botMsg__text{margin-top:6px; color:rgba(233,238,252,.72)}
.wbl-otp{margin-top:12px}
.wbl-otp__label{font-size:12px; color:rgba(233,238,252,.62); font-weight:800; letter-spacing:.06em; text-transform:uppercase}
.wbl-otp__cells{display:grid; grid-template-columns: repeat(6, 1fr); gap:8px; margin-top:10px}
.wbl-otp__cells span{
  height:44px;
  border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(18,27,45,.55);
  font-weight:900;
  font-size:18px;
}
.wbl-otp__cells span:nth-child(4){
  border-color: rgba(34,211,238,.42);
  box-shadow: 0 0 0 6px rgba(34,211,238,.10);
}
.wbl-otp__hint{margin-top:8px; font-size:12px; color:rgba(233,238,252,.55)}
.wbl-chat{margin-top:14px}
.wbl-chat__k{font-size:12px; color:rgba(233,238,252,.62); font-weight:800; letter-spacing:.06em; text-transform:uppercase}
.wbl-chat__row{display:flex; flex-direction:column; gap:8px; margin-top:10px}
.wbl-bubble{
  max-width: 92%;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.06);
  color:rgba(233,238,252,.78);
}
.wbl-bubble--you{align-self:flex-start}
.wbl-bubble--me{align-self:flex-end; background:rgba(16,185,129,.10); border-color: rgba(16,185,129,.20)}

@media (max-width: 980px){
  .wbl-board__grid{grid-template-columns: 1fr}
  .wbl-boardCard--wide{grid-column:auto}
}

.wbl-hero__controls{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  margin-top:0;
  opacity:.72;
  position:absolute;
  left:0;
  right:0;
  bottom:14px;
  z-index:6;
}
.wbl-iconBtn{
  width:40px;height:40px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(18,27,45,.55);
  box-shadow: none;
  cursor:pointer;
  font-size:20px;
  line-height:1;
}
.wbl-iconBtn:hover{border-color: rgba(255,255,255,.18)}
.wbl-dots{display:flex; gap:6px; align-items:center}
.wbl-dots{justify-content:center}
.wbl-dotsPill{
  padding:0;
  border-radius:0;
  border:0;
  background:transparent;
  backdrop-filter:none;
}
.wbl-dot{
  width:8px;height:8px;border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.08);
}
.wbl-dot.is-active{
  width:22px;
  background: linear-gradient(135deg, var(--wbl-accent2), var(--wbl-accent));
  border-color: transparent;
}

/* Slide backgrounds (no images/videos) */
.wbl-hero__slide--a .wbl-hero__media{
  background:
    radial-gradient(760px 520px at 20% 26%, rgba(16,185,129,.18), transparent 60%),
    radial-gradient(760px 520px at 82% 18%, rgba(34,211,238,.16), transparent 60%),
    radial-gradient(900px 620px at 60% 86%, rgba(139,92,246,.14), transparent 62%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 70px);
}
.wbl-hero__slide--b .wbl-hero__media{
  background:
    radial-gradient(760px 520px at 22% 18%, rgba(139,92,246,.18), transparent 60%),
    radial-gradient(760px 520px at 78% 22%, rgba(34,211,238,.14), transparent 60%),
    radial-gradient(920px 640px at 54% 88%, rgba(16,185,129,.10), transparent 62%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 1px, transparent 1px 72px);
}
.wbl-hero__slide--c .wbl-hero__media{
  background:
    radial-gradient(780px 540px at 18% 22%, rgba(34,211,238,.14), transparent 60%),
    radial-gradient(780px 540px at 80% 18%, rgba(16,185,129,.16), transparent 60%),
    radial-gradient(900px 620px at 60% 88%, rgba(139,92,246,.12), transparent 62%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 1px, transparent 1px 72px);
}


.wbl-hero__art{
  position:relative;
  height:320px;
}
.wbl-artCard{
  position:absolute;
  inset:auto;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.06);
  box-shadow: none;
}
.wbl-artCard--a{width:70%; height:55%; left:10%; top:8%; background:linear-gradient(135deg, rgba(79,70,229,.10), rgba(6,182,212,.08))}
.wbl-artCard--b{width:64%; height:46%; left:22%; top:34%}
.wbl-artCard--c{width:56%; height:38%; left:14%; top:58%; background:linear-gradient(135deg, rgba(6,182,212,.10), rgba(79,70,229,.08))}

/* Sections */
.wbl-section{
  padding:78px 0;
  position:relative;
}
/* Section divider line (no background band; works with global fixed canvas) */
.wbl-section::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
  opacity:.55;
  pointer-events:none;
}
.wbl-section:first-of-type::before{display:none}

.wbl-section--soft{
  background: rgba(18,27,45,.10);
}
.wbl-section--alt{
  background:
    radial-gradient(980px 560px at 18% 0%, rgba(34,211,238,.07), transparent 62%),
    radial-gradient(980px 560px at 86% 12%, rgba(139,92,246,.06), transparent 62%),
    rgba(18,27,45,.10);
}
.wbl-section__head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:14px;
  margin-bottom:22px;
}
.wbl-h2{margin:0; font-size:28px; letter-spacing:-.02em}
.wbl-lead{margin:8px 0 0; color:var(--wbl-muted)}

.wbl-accentText{color: rgba(16,185,129,.95)}

/* Services grid (no horizontal scroll) */
.wbl-servicesGrid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:18px;
}
.wbl-card{
  background:rgba(18,27,45,.55);
  border:1px solid rgba(255,255,255,.10);
  border-radius: var(--wbl-radius2);
  box-shadow: none;
  padding:16px;
  min-height:168px;
}
.wbl-card{transition: transform 200ms ease, border-color 200ms ease, background-color 200ms ease}
.wbl-card:hover{transform: translateY(-2px); border-color: rgba(255,255,255,.18); background: rgba(18,27,45,.70)}

/* Directions (legal) */
.wbl-dirWrap{
  --wbl-dir-accent-rgb: 16,185,129; /* default: emerald */
  display:grid;
  grid-template-columns: 1fr 1.25fr 1fr;
  grid-template-areas:
    "i1 c i3"
    "i2 c i4";
  gap:18px;
  align-items:stretch;
  margin-top:14px;
}
.wbl-dirCenter{grid-area:c}
.wbl-dirItem:nth-of-type(1){grid-area:i1}
.wbl-dirItem:nth-of-type(2){grid-area:i2}
.wbl-dirItem:nth-of-type(3){grid-area:i3}
.wbl-dirItem:nth-of-type(4){grid-area:i4}

.wbl-dirItem{
  appearance:none;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(18,27,45,.52);
  backdrop-filter: blur(10px) saturate(150%);
  padding:14px 14px;
  text-align:left;
  cursor:pointer;
  color: rgba(233,238,252,.90);
  transition: transform 200ms ease, border-color 200ms ease, background-color 200ms ease;
  position:relative;
  overflow:hidden;
}
.wbl-dirItem::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: radial-gradient(420px 220px at 18% 18%, rgba(255,255,255,.08), transparent 60%);
  opacity:.7;
  pointer-events:none;
}
.wbl-dirItem:hover{transform: translateY(-2px); border-color: rgba(255,255,255,.18); background: rgba(18,27,45,.70)}
.wbl-dirItem.is-active{
  border-color: rgba(var(--wbl-dir-accent-rgb), .45);
  box-shadow: 0 0 0 6px rgba(var(--wbl-dir-accent-rgb), .12);
}
.wbl-dirItem__ic{
  width:40px;height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(233,238,252,.86);
  position:relative;
  z-index:1;
}
.wbl-icSvg{width:20px; height:20px; display:block}
.wbl-dirItem.is-active .wbl-dirItem__ic{
  color: rgba(var(--wbl-dir-accent-rgb), .95);
  border-color: rgba(var(--wbl-dir-accent-rgb), .28);
  background: rgba(var(--wbl-dir-accent-rgb), .10);
  box-shadow: 0 0 0 6px rgba(var(--wbl-dir-accent-rgb), .08);
}
.wbl-dirItem__t{display:block; margin-top:10px; font-weight:900; letter-spacing:-.01em; position:relative; z-index:1}
.wbl-dirItem__p{display:block; margin-top:6px; color:rgba(233,238,252,.62); font-size:13px; line-height:1.35; position:relative; z-index:1}

.wbl-dirCenter__card{
  height:100%;
  border-radius: 22px;
  border:1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(720px 420px at 18% 12%, rgba(var(--wbl-dir-accent-rgb), .18), transparent 60%),
    radial-gradient(720px 420px at 86% 22%, rgba(139,92,246,.10), transparent 60%),
    rgba(18,27,45,.48);
  backdrop-filter: blur(14px) saturate(160%);
  padding:18px;
  position:relative;
  overflow:hidden;
}
.wbl-dirCenter__card::after{
  content:"";
  position:absolute; inset:-8%;
  background:
    radial-gradient(520px 360px at 25% 20%, rgba(var(--wbl-dir-accent-rgb), .20), transparent 62%),
    radial-gradient(560px 380px at 75% 70%, rgba(34,211,238,.10), transparent 62%);
  opacity:.22;
  filter: blur(18px);
  pointer-events:none;
}
.wbl-dirCenter__tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:rgba(233,238,252,.78);
  position:relative;
  z-index:1;
}
.wbl-dirCenter__title{
  margin-top:12px;
  font-size:28px;
  line-height:1.08;
  letter-spacing:-.03em;
  font-weight:950;
  position:relative;
  z-index:1;
}
.wbl-dirCenter__desc{
  margin-top:10px;
  color:rgba(233,238,252,.70);
  line-height:1.55;
  position:relative;
  z-index:1;
}
.wbl-dirCenter__meta{
  margin-top:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
  position:relative;
  z-index:1;
}
.wbl-dirCenter__kpi{
  font-weight:900;
  color:rgba(233,238,252,.86);
}
.wbl-dirCenter__chips{display:flex; flex-wrap:wrap; gap:8px}
.wbl-dirChip{
  font-size:12px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(18,27,45,.55);
  color:rgba(233,238,252,.72);
}
.wbl-dirCenter__actions{
  margin-top:16px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  position:relative;
  z-index:1;
}
.wbl-dirCenter__card.is-swap{
  animation: wblPop 520ms cubic-bezier(.2,.9,.2,1) both;
}

/* Team */
.wbl-teamGrid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:18px;
  margin-top:14px;
}
.wbl-teamCard{
  position:relative;
  overflow:hidden;
  border-radius: 22px;
  border:1px solid rgba(255,255,255,.10);
  min-height: 290px;
  background: var(--wbl-team-bg, radial-gradient(820px 520px at 20% 10%, rgba(34,211,238,.12), transparent 60%), rgba(18,27,45,.40));
  transition: transform 260ms cubic-bezier(.2,.8,.2,1), border-color 260ms ease, filter 260ms ease;
}
.wbl-teamCard::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(7,12,23,.00) 0%, rgba(7,12,23,.16) 45%, rgba(7,12,23,.72) 100%);
  pointer-events:none;
}
.wbl-teamCard::after{
  content:"";
  position:absolute; inset:-2px;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.010) 0 1px, transparent 1px 140px);
  opacity:.35;
  pointer-events:none;
}
.wbl-teamCard:hover{
  transform: translateY(-3px) scale(1.01);
  border-color: rgba(255,255,255,.18);
  filter: saturate(1.06);
}
.wbl-teamCard__meta{
  position:absolute;
  left:12px; right:12px; bottom:12px;
  padding:14px 14px 12px;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(18,27,45,.38);
  backdrop-filter: blur(14px) saturate(160%);
  display:grid;
  gap:8px;
  z-index:2;
}
.wbl-teamCard__name{font-weight:950; letter-spacing:-.02em; font-size:16px}
.wbl-teamCard__role{color: rgba(233,238,252,.70); font-size:13px; line-height:1.25}
.wbl-teamCard__social{display:flex; gap:8px; flex-wrap:wrap}
.wbl-teamIcon{
  width:34px;height:34px;
  display:inline-flex;
  align-items:center; justify-content:center;
  border-radius: 12px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(233,238,252,.82);
  transition: transform 200ms ease, border-color 200ms ease, background-color 200ms ease;
}
.wbl-teamIcon:hover{
  transform: translateY(-1px);
  border-color: rgba(var(--wbl-accent2), .28);
  background: rgba(34,211,238,.10);
  color: rgba(34,211,238,.95);
}
.wbl-teamCard--a{ --wbl-team-bg:
  radial-gradient(980px 680px at 18% 0%, rgba(34,211,238,.16), transparent 60%),
  radial-gradient(980px 680px at 86% 18%, rgba(16,185,129,.14), transparent 62%),
  rgba(18,27,45,.34);
}
.wbl-teamCard--b{ --wbl-team-bg:
  radial-gradient(980px 680px at 20% 10%, rgba(139,92,246,.16), transparent 60%),
  radial-gradient(980px 680px at 86% 22%, rgba(34,211,238,.12), transparent 62%),
  rgba(18,27,45,.34);
}
.wbl-teamCard--c{ --wbl-team-bg:
  radial-gradient(980px 680px at 18% 0%, rgba(16,185,129,.16), transparent 60%),
  radial-gradient(980px 680px at 86% 18%, rgba(139,92,246,.10), transparent 62%),
  rgba(18,27,45,.34);
}
.wbl-teamCard--d{ --wbl-team-bg:
  radial-gradient(980px 680px at 18% 0%, rgba(34,211,238,.14), transparent 60%),
  radial-gradient(980px 680px at 86% 18%, rgba(139,92,246,.14), transparent 62%),
  rgba(18,27,45,.34);
}
.wbl-teamCard--e{ --wbl-team-bg:
  radial-gradient(980px 680px at 22% 10%, rgba(255,255,255,.10), transparent 62%),
  radial-gradient(980px 680px at 86% 18%, rgba(16,185,129,.12), transparent 62%),
  rgba(18,27,45,.34);
}
.wbl-teamCard--f{ --wbl-team-bg:
  radial-gradient(980px 680px at 18% 0%, rgba(139,92,246,.14), transparent 60%),
  radial-gradient(980px 680px at 82% 22%, rgba(16,185,129,.12), transparent 62%),
  rgba(18,27,45,.34);
}
.wbl-teamCard--g{ --wbl-team-bg:
  radial-gradient(980px 680px at 18% 0%, rgba(34,211,238,.14), transparent 60%),
  radial-gradient(980px 680px at 86% 18%, rgba(255,255,255,.08), transparent 62%),
  rgba(18,27,45,.34);
}
.wbl-teamCard--h{ --wbl-team-bg:
  radial-gradient(980px 680px at 22% 10%, rgba(16,185,129,.14), transparent 60%),
  radial-gradient(980px 680px at 86% 18%, rgba(139,92,246,.12), transparent 62%),
  rgba(18,27,45,.34);
}
@media (max-width: 1100px){
  .wbl-teamGrid{grid-template-columns: repeat(3, 1fr)}
}
@media (max-width: 880px){
  .wbl-teamGrid{grid-template-columns: repeat(2, 1fr)}
}
@media (max-width: 520px){
  .wbl-teamGrid{grid-template-columns: 1fr}
  .wbl-teamCard{min-height: 260px}
}

/* FAQ accordion */
.wbl-faqWrap{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:18px;
  align-items:stretch;
  margin-top:14px;
}
.wbl-faqAcc{display:flex; flex-direction:column; gap:10px}
.wbl-faqItem{
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(18,27,45,.44);
  overflow:hidden;
}
.wbl-faqItem[open]{border-color: rgba(var(--wbl-accent2), .22)}
.wbl-faqQ{
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 14px;
  cursor:pointer;
  user-select:none;
}
.wbl-faqQ::-webkit-details-marker{display:none}
.wbl-faqQ__t{font-weight:900; letter-spacing:-.01em}
.wbl-faqQ__ic{
  width:34px; height:34px;
  display:inline-flex;
  align-items:center; justify-content:center;
  border-radius: 12px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(233,238,252,.78);
  transition: transform 220ms ease, border-color 220ms ease, background-color 220ms ease, color 220ms ease;
}
.wbl-faqItem[open] .wbl-faqQ__ic{
  transform: rotate(180deg);
  border-color: rgba(var(--wbl-accent2), .26);
  background: rgba(34,211,238,.10);
  color: rgba(34,211,238,.95);
}
.wbl-faqA{
  padding:0 14px 14px;
  display:grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 320ms cubic-bezier(.2,.9,.2,1);
  color: rgba(233,238,252,.72);
  line-height:1.6;
}
.wbl-faqA__in{overflow:hidden}
.wbl-faqItem[open] .wbl-faqA{grid-template-rows: 1fr}
.wbl-formCard{
  border-radius: 22px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(820px 520px at 18% 12%, rgba(34,211,238,.12), transparent 60%),
    radial-gradient(760px 520px at 86% 18%, rgba(139,92,246,.10), transparent 60%),
    rgba(18,27,45,.38);
  backdrop-filter: blur(14px) saturate(160%);
  padding:18px;
  position:relative;
  overflow:hidden;
}
.wbl-formCard::after{
  content:"";
  position:absolute; inset:-10%;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.010) 0 1px, transparent 1px 140px);
  opacity:.32;
  pointer-events:none;
}
.wbl-formCard > *{position:relative; z-index:1}
.wbl-formTag{
  display:inline-flex;
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:rgba(233,238,252,.72);
}
.wbl-formTitle{margin-top:12px; font-size:26px; font-weight:950; letter-spacing:-.03em; line-height:1.08}
.wbl-formText{margin-top:10px; color: rgba(233,238,252,.72); line-height:1.6}
.wbl-form{margin-top:14px; display:grid; gap:12px}
.wbl-field{display:grid; gap:6px}
.wbl-label{font-size:12px; color:rgba(233,238,252,.62); font-weight:800; letter-spacing:.06em; text-transform:uppercase}
.wbl-input{
  width:100%;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  padding:12px 12px;
  color: rgba(233,238,252,.88);
  outline:none;
}
.wbl-input::placeholder{color:rgba(233,238,252,.45)}
.wbl-input:focus{border-color: rgba(34,211,238,.38); box-shadow: 0 0 0 6px rgba(34,211,238,.10)}
.wbl-textarea{resize:vertical; min-height: 92px}
.wbl-formHint{font-size:12px; color:rgba(233,238,252,.55); line-height:1.4}
.wbl-check{
  display:flex;
  gap:10px;
  align-items:flex-start;
  margin-top:6px;
  font-size:12px;
  color: rgba(233,238,252,.62);
  line-height:1.4;
}
.wbl-check input{
  width:18px;
  height:18px;
  margin-top:2px;
  accent-color: rgba(34,211,238,.95);
}
.wbl-check a{
  color: rgba(233,238,252,.86);
  text-decoration: underline;
  text-decoration-color: rgba(34,211,238,.55);
  text-underline-offset: 3px;
}
.wbl-check a:hover{color: rgba(34,211,238,.95)}
@media (max-width: 980px){
  .wbl-faqWrap{grid-template-columns: 1fr}
}
@media (max-width: 520px){
  .wbl-faqMedia__mini{grid-template-columns: 1fr}
}

/* Pricing */
.wbl-priceGrid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:18px;
  margin-top:14px;
}
.wbl-priceCard{
  border-radius: 22px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(18,27,45,.44);
  padding:18px;
  position:relative;
  overflow:hidden;
  transition: transform 240ms cubic-bezier(.2,.8,.2,1), border-color 240ms ease, background-color 240ms ease;
}
.wbl-priceCard > *{position:relative; z-index:2}
.wbl-priceCard::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: inherit;
  pointer-events:none;
  z-index:1;
  opacity:0;
}
.wbl-priceCard:hover{transform: translateY(-3px); border-color: rgba(255,255,255,.18); background: rgba(18,27,45,.52)}
.wbl-priceCard__top{display:flex; justify-content:space-between; align-items:flex-start; gap:14px; flex-wrap:wrap}
.wbl-priceCard__top > a{margin-left:auto}
.wbl-priceCard__plan{font-size:12px; font-weight:900; letter-spacing:.14em; text-transform:uppercase; color:rgba(233,238,252,.72)}
.wbl-priceCard__price{margin-top:10px; font-size:30px; font-weight:980; letter-spacing:-.03em}
.wbl-priceCard__sub{margin-top:6px; color:rgba(233,238,252,.62)}
.wbl-priceList{
  margin:14px 0 0;
  padding:0;
  list-style:none;
  display:grid;
  gap:10px;
}
.wbl-priceCard__bottom{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.10);
  display:flex;
}
.wbl-priceCard__bottom .wbl-btn{width:100%}
.wbl-priceCard--hot .wbl-priceCard__bottom{border-top-color: rgba(16,185,129,.18)}
.wbl-priceList li{
  position:relative;
  padding-left:22px;
  color: rgba(233,238,252,.78);
}
.wbl-priceList li::before{
  content:"";
  position:absolute;
  left:0; top:.45em;
  width:12px; height:12px;
  border-radius:999px;
  background: rgba(16,185,129,.85);
  box-shadow: 0 0 0 6px rgba(16,185,129,.10);
}
.wbl-priceCard--hot{
  border-color: rgba(16,185,129,.28);
  background:
    radial-gradient(820px 520px at 18% 12%, rgba(16,185,129,.16), transparent 60%),
    radial-gradient(760px 520px at 86% 18%, rgba(34,211,238,.10), transparent 60%),
    rgba(18,27,45,.44);
}
.wbl-priceCard--hot::before{
  opacity:.55;
  background:
    linear-gradient(105deg,
      transparent 0%,
      rgba(255,255,255,.00) 38%,
      rgba(255,255,255,.18) 48%,
      rgba(34,211,238,.16) 52%,
      rgba(255,255,255,.00) 62%,
      transparent 100%);
  transform: translateX(-130%) skewX(-12deg);
  animation: wblShineSweep 6.5s ease-in-out infinite;
  animation-delay: 1.2s;
}
.wbl-priceCard--hot:hover::before{opacity:.70}
@keyframes wblShineSweep{
  0%, 18% { transform: translateX(-130%) skewX(-12deg); }
  38%    { transform: translateX(130%) skewX(-12deg); }
  100%   { transform: translateX(130%) skewX(-12deg); }
}
@media (prefers-reduced-motion: reduce){
  .wbl-priceCard--hot::before{animation:none !important; opacity:0 !important}
}
.wbl-priceCard__badge{
  position:absolute;
  top:14px; right:14px;
  font-size:10px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(16,185,129,.30);
  background: rgba(16,185,129,.12);
  color: rgba(16,185,129,.95);
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  pointer-events:none;
}
.wbl-priceCard__badge{backdrop-filter: blur(10px) saturate(160%)}
.wbl-priceNote{
  margin-top:14px;
  display:flex;
  align-items:center;
  gap:10px;
  color: rgba(233,238,252,.72);
}
.wbl-dotOk{
  width:12px; height:12px;
  border-radius:999px;
  background: linear-gradient(135deg, var(--wbl-accent), rgba(34,211,238,.85));
  box-shadow: 0 0 0 8px rgba(16,185,129,.10);
  flex:0 0 auto;
}
@media (max-width: 980px){
  .wbl-priceGrid{grid-template-columns: 1fr}
}
@media (max-width: 420px){
  .wbl-priceCard__top > a{width:100%}
}

/* Blog */
.wbl-blogGrid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:18px;
  margin-top:14px;
  align-items:start;
}
.wbl-blogCol{display:grid; gap:18px}
.wbl-post{
  border-radius: 22px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(18,27,45,.38);
  padding:18px;
  position:relative;
  overflow:hidden;
  min-height: 220px;
  display:flex;
  flex-direction:column;
}
.wbl-post__media{
  position:absolute;
  inset:0;
  background-image: var(--wbl-post-img, radial-gradient(1200px 700px at 30% 20%, rgba(34,211,238,.18), transparent 55%), radial-gradient(900px 560px at 80% 30%, rgba(139,92,246,.14), transparent 60%));
  background-size: cover;
  background-position: center;
  filter: saturate(1.02) contrast(1.02);
  opacity:.62;
  transform: scale(1.02);
  z-index:0;
}
.wbl-post::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(7,12,23,.00) 0%, rgba(7,12,23,.18) 40%, rgba(7,12,23,.78) 100%);
  pointer-events:none;
  z-index:1;
}
.wbl-post::after{
  content:"";
  position:absolute; inset:-10%;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.010) 0 1px, transparent 1px 160px);
  opacity:.24;
  pointer-events:none;
  z-index:1;
}
.wbl-post > *{position:relative; z-index:2}
.wbl-post__chips{display:flex; gap:8px; flex-wrap:wrap}
.wbl-post__title{margin-top:14px; font-size:22px; font-weight:980; letter-spacing:-.03em; line-height:1.12}
.wbl-post__text{margin-top:10px; color: rgba(233,238,252,.72); line-height:1.6; max-width: 62ch}
.wbl-post__meta{
  margin-top:auto;
  display:grid;
  gap:10px;
  color: rgba(233,238,252,.62);
}
.wbl-post__metaRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.wbl-post__line{
  height:1px;
  background: rgba(255,255,255,.10);
  opacity:.9;
}
.wbl-post__more{
  display:inline-flex;
  justify-self:flex-end;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(233,238,252,.92);
  font-weight:950;
  letter-spacing:-.01em;
  transition: transform 220ms ease, border-color 220ms ease, background-color 220ms ease, color 220ms ease;
}
.wbl-post__more:visited{color: rgba(233,238,252,.92)}
.wbl-post__more .wbl-icSvg{width:18px;height:18px}
.wbl-post__more:hover{
  transform: translateY(-1px);
  border-color: rgba(var(--wbl-accent2), .24);
  background: rgba(34,211,238,.10);
  color: rgba(34,211,238,.96);
  text-decoration:none;
}
.wbl-post__more:active{transform: translateY(0)}
.wbl-post--feature{
  min-height: 320px;
  background:
    radial-gradient(980px 640px at 18% 12%, rgba(34,211,238,.16), transparent 62%),
    radial-gradient(980px 640px at 86% 18%, rgba(139,92,246,.14), transparent 62%),
    rgba(18,27,45,.30);
}
.wbl-post--plain{
  min-height: 220px;
  background: rgba(18,27,45,.38);
}
.wbl-blogCol--side .wbl-post{min-height: 240px}
.wbl-post--card{
  background:
    radial-gradient(980px 640px at 18% 12%, rgba(139,92,246,.14), transparent 62%),
    radial-gradient(980px 640px at 86% 18%, rgba(34,211,238,.12), transparent 62%),
    rgba(18,27,45,.30);
}
.wbl-post--dark{
  background:
    radial-gradient(980px 640px at 18% 12%, rgba(16,185,129,.16), transparent 62%),
    radial-gradient(980px 640px at 86% 18%, rgba(34,211,238,.12), transparent 62%),
    rgba(18,27,45,.30);
}
.wbl-chip--a{border-color: rgba(16,185,129,.30); background: rgba(16,185,129,.12); color: rgba(16,185,129,.95)}
.wbl-chip--b{border-color: rgba(34,211,238,.30); background: rgba(34,211,238,.12); color: rgba(34,211,238,.95)}
.wbl-chip--c{border-color: rgba(139,92,246,.30); background: rgba(139,92,246,.12); color: rgba(139,92,246,.95)}
@media (max-width: 980px){
  .wbl-blogGrid{grid-template-columns: 1fr}
}

/* Cases (before/after) */
.wbl-cases{
  display:grid;
  grid-template-columns: 1fr;
  gap:14px;
  margin-top:10px;
}
.wbl-case{
  border:1px solid rgba(255,255,255,.10);
  border-radius: var(--wbl-radius);
  background: rgba(18,27,45,.55);
  backdrop-filter: blur(12px) saturate(150%);
  padding:16px;
}
.wbl-case__top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:12px;
}
.wbl-case__tag{
  display:inline-flex;
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.06);
  color:rgba(233,238,252,.72);
}
.wbl-case__title{
  margin-top:10px;
  font-size:20px;
  font-weight:900;
  letter-spacing:-.02em;
}
.wbl-case__kpis{display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end}
.wbl-case__grid{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  gap:12px;
  align-items:stretch;
}
.wbl-case__box{
  border:1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  background: rgba(18,27,45,.55);
  padding:14px;
}
.wbl-case__box--good{
  border-color: rgba(6,182,212,.30);
  background: linear-gradient(180deg, rgba(16,185,129,.12), rgba(18,27,45,.55));
}
.wbl-case__h{font-weight:900; letter-spacing:-.01em}
.wbl-case__p{margin-top:8px; color:var(--wbl-muted); line-height:1.55}
.wbl-case__arrow{
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  color:rgba(233,238,252,.55);
}
.wbl-case__steps{
  margin-top:12px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.wbl-stepDot{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.06);
  color:rgba(233,238,252,.72);
}

.wbl-caseHub{
  --wbl-case-accent-rgb: 16,185,129;
  --wbl-case-surface: rgba(18,27,45,.55);
  display:grid;
  grid-template-columns: 1fr;
  gap:14px;
  margin-top:10px;
  align-items:stretch;
}
.wbl-caseTabs{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:stretch;
  justify-content:center;
}
.wbl-caseTabs .wbl-caseItem{
  display:inline-flex;
  align-items:center;
  gap:10px;
  border-radius:999px;
  padding:10px 14px;
  width:auto;
  min-height:unset;
  grid-template-columns: initial;
  /* Chips must sit on the same background as the section head (no filled pill) */
  background-color: transparent !important;
  background-image: none !important;
  background: transparent !important;
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  appearance: none;
}
.wbl-caseTabs .wbl-caseItem::before{display:none}
.wbl-caseTabs .wbl-caseItem:hover{
  transform: translateY(-1px);
  background: transparent !important;
  border-color: rgba(255,255,255,.18);
}
.wbl-caseTabs .wbl-caseItem.is-active{
  border-color: rgba(var(--wbl-case-accent-rgb), .45);
  box-shadow: 0 0 0 6px rgba(var(--wbl-case-accent-rgb), .10);
  background: transparent !important;
}
.wbl-caseTabs .wbl-caseItem__ic{
  width:34px; height:34px;
  border-radius:12px;
  background: transparent;
}
.wbl-caseTabs .wbl-caseItem__t{display:block; font-size:13px; margin:0}
.wbl-caseTabs .wbl-caseItem__p{display:block; margin-top:2px; font-size:12px; line-height:1.2}
.wbl-caseTabs .wbl-caseItem__t,
.wbl-caseTabs .wbl-caseItem__p{white-space:nowrap}
.wbl-caseTabs .wbl-caseItem__p{opacity:.75}
.wbl-caseTabs .wbl-caseItem{max-width: 100%}
.wbl-caseTabs .wbl-caseItem__t,
.wbl-caseTabs .wbl-caseItem__p{overflow:hidden; text-overflow:ellipsis}
.wbl-caseList{
  display:grid;
  gap:12px;
  padding:12px;
  border-radius: 22px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(760px 520px at 18% 12%, rgba(var(--wbl-case-accent-rgb), .10), transparent 60%),
    rgba(18,27,45,.35);
  backdrop-filter: blur(14px) saturate(160%);
}
.wbl-caseItem{
  appearance:none;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(520px 320px at 20% 20%, rgba(255,255,255,.05), transparent 62%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.018) 0 1px, transparent 1px 92px),
    rgba(18,27,45,.52);
  backdrop-filter: blur(10px) saturate(150%);
  padding:14px 14px;
  text-align:left;
  cursor:pointer;
  color: rgba(233,238,252,.90);
  transition: transform 200ms ease, border-color 200ms ease, background-color 200ms ease;
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns: 44px 1fr;
  gap:12px;
  align-items:center;
}
.wbl-caseItem::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: radial-gradient(420px 220px at 18% 18%, rgba(255,255,255,.08), transparent 60%);
  opacity:.7;
  pointer-events:none;
}
.wbl-caseItem:hover{transform: translateY(-2px); border-color: rgba(255,255,255,.18); background: rgba(18,27,45,.70)}
.wbl-caseItem.is-active{
  border-color: rgba(var(--wbl-case-accent-rgb), .45);
  box-shadow: 0 0 0 6px rgba(var(--wbl-case-accent-rgb), .12);
}
.wbl-caseItem__ic{
  width:40px;height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(233,238,252,.86);
  position:relative;
  z-index:1;
}
.wbl-caseItem__t{display:block; font-weight:900; letter-spacing:-.01em; position:relative; z-index:1}
.wbl-caseItem__p{display:block; margin-top:6px; color:rgba(233,238,252,.62); font-size:13px; line-height:1.35; position:relative; z-index:1}
.wbl-caseItem.is-active .wbl-caseItem__ic{
  color: rgba(var(--wbl-case-accent-rgb), .95);
  border-color: rgba(var(--wbl-case-accent-rgb), .28);
  background: rgba(var(--wbl-case-accent-rgb), .10);
  box-shadow: 0 0 0 6px rgba(var(--wbl-case-accent-rgb), .08);
}

.wbl-caseSpot__card{
  height:100%;
  border-radius: 22px;
  border: none;
  background: transparent;
  backdrop-filter: none;
  padding:18px;
  position:relative;
  overflow:hidden;
}
.wbl-caseSpot__card::after{display:none}
.wbl-caseSpot__card::after{
  content:"";
  position:absolute; inset:-8%;
  background:
    radial-gradient(820px 520px at 18% 12%, rgba(var(--wbl-case-accent-rgb), .12), transparent 60%),
    radial-gradient(560px 380px at 75% 70%, rgba(139,92,246,.12), transparent 62%);
  opacity:.22;
  filter: blur(16px);
  pointer-events:none;
}
.wbl-caseSpot__tag{
  display:inline-flex;
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:rgba(233,238,252,.72);
  position:relative;
  z-index:1;
}
.wbl-caseSpot__title{
  margin-top:12px;
  font-size:26px;
  font-weight:950;
  letter-spacing:-.03em;
  line-height:1.08;
  position:relative;
  z-index:1;
}
.wbl-caseSpot__grid{
  margin-top:14px;
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  gap:12px;
  align-items:stretch;
  position:relative;
  z-index:1;
}
.wbl-caseSpot__box{
  border:1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  background: rgba(18,27,45,.55);
  padding:14px;
}
.wbl-caseSpot__box--good{
  border-color: rgba(var(--wbl-case-accent-rgb), .26);
  background: linear-gradient(180deg, rgba(var(--wbl-case-accent-rgb), .14), rgba(18,27,45,.55));
}
.wbl-caseSpot__h{font-weight:900; letter-spacing:-.01em}
.wbl-caseSpot__p{margin-top:8px; color:var(--wbl-muted); line-height:1.55}
.wbl-caseSpot__arrow{display:flex; align-items:center; justify-content:center; font-size:22px; color:rgba(233,238,252,.55)}
.wbl-caseSpot__kpis{margin-top:12px; display:flex; gap:8px; flex-wrap:wrap; position:relative; z-index:1}
.wbl-caseSpot__steps{margin-top:12px; display:flex; gap:8px; flex-wrap:wrap; position:relative; z-index:1}
.wbl-caseSpot__card.is-swap{animation: wblPop 520ms cubic-bezier(.2,.9,.2,1) both;}

/* Fill the empty space: mini visual dashboard inside spotlight */
.wbl-caseViz{
  margin-top:14px;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.10);
  background: var(--wbl-case-surface);
  padding:12px;
  position:relative;
  z-index:1;
}
.wbl-caseViz__top{display:flex; gap:8px; flex-wrap:wrap}
.wbl-caseViz__pill{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(var(--wbl-case-accent-rgb), .22);
  background: rgba(var(--wbl-case-accent-rgb), .10);
  color: rgba(var(--wbl-case-accent-rgb), .95);
  font-weight:800;
}
.wbl-caseViz__pill--muted{
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(233,238,252,.70);
  font-weight:700;
}
.wbl-caseViz__grid{margin-top:10px; display:grid; grid-template-columns: 1fr 1fr; gap:10px}
.wbl-caseViz__card{
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  padding:10px 10px;
  min-height: 92px;
}
.wbl-caseViz__k{font-size:12px; color:rgba(233,238,252,.62); font-weight:800; letter-spacing:.06em; text-transform:uppercase}
.wbl-caseViz__bar{
  margin-top:10px;
  height:10px;
  border-radius:999px;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
  overflow:hidden;
}
.wbl-caseViz__bar span{
  display:block;
  height:100%;
  width:58%;
  border-radius:999px;
  background: linear-gradient(135deg, rgba(var(--wbl-case-accent-rgb), .95), rgba(34,211,238,.85));
}
.wbl-caseViz__s{margin-top:10px; color:rgba(233,238,252,.70); font-size:13px; line-height:1.35}
.wbl-caseViz__docs{margin-top:10px; display:flex; flex-wrap:wrap; gap:8px}
.wbl-caseViz__doc{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(18,27,45,.55);
  color: rgba(233,238,252,.72);
}
.wbl-card__k{font-weight:800; color:rgba(233,238,252,.86)}
.wbl-card__t{margin-top:6px; font-size:18px; font-weight:800; letter-spacing:-.02em}
.wbl-card__p{margin-top:8px; color:var(--wbl-muted); line-height:1.5}
.wbl-chipRow{margin-top:12px; display:flex; gap:8px; flex-wrap:wrap}
.wbl-chip{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.06);
  color:rgba(233,238,252,.72);
}
/* Tiles / steps */
.wbl-grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.wbl-tile{
  background:rgba(18,27,45,.55);
  border:1px solid rgba(255,255,255,.10);
  border-radius: var(--wbl-radius2);
  box-shadow: none;
  padding:16px;
}
.wbl-tile__t{font-weight:800}
.wbl-tile__p{margin-top:8px; color:var(--wbl-muted); line-height:1.5}
.wbl-steps{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
.wbl-step{
  background:rgba(18,27,45,.55);
  border:1px solid rgba(255,255,255,.10);
  border-radius: var(--wbl-radius2);
  box-shadow: none;
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.wbl-step__n{
  width:30px;height:30px;border-radius:12px;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  font-weight:800;
}
.wbl-step b{font-size:15px}
.wbl-step span{color:var(--wbl-muted)}

/* Contacts */
.wbl-contactQuick{display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end}
.wbl-contactGrid{display:grid; grid-template-columns: 1fr 1fr; gap:18px; margin-top:14px; align-items:stretch}
.wbl-contactCard{
  position:relative;
  overflow:hidden;
  background:rgba(18,27,45,.55);
  border:1px solid rgba(255,255,255,.10);
  border-radius: 22px;
  box-shadow: none;
  padding:18px;
}
.wbl-contactCard--info{
  display:flex;
  flex-direction:column;
  background:
    radial-gradient(980px 640px at 18% 12%, rgba(34,211,238,.14), transparent 62%),
    radial-gradient(980px 640px at 86% 18%, rgba(16,185,129,.12), transparent 62%),
    rgba(18,27,45,.44);
}
.wbl-contactCard--info::after{
  content:"";
  position:absolute; inset:-10%;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.010) 0 1px, transparent 1px 170px);
  opacity:.32;
  pointer-events:none;
}
.wbl-contactCard--info > *{position:relative; z-index:1}
.wbl-contactKicker{
  display:inline-flex;
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:rgba(233,238,252,.72);
  font-weight:900;
  letter-spacing:.10em;
  text-transform:uppercase;
}
.wbl-contactTitle{margin-top:12px; font-size:22px; font-weight:980; letter-spacing:-.03em; line-height:1.1}
.wbl-contactText{margin-top:10px; color: rgba(233,238,252,.72); line-height:1.6}
.wbl-contactPills{margin-top:14px; display:grid; gap:10px}
.wbl-pill{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
  padding:12px 14px;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  transition: transform 220ms ease, border-color 220ms ease, background-color 220ms ease;
}
.wbl-pill__ic{
  width:34px; height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 12px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(18,27,45,.45);
  flex:0 0 auto;
  color: rgba(233,238,252,.90);
}
.wbl-pill__ic .wbl-icSvg{width:18px;height:18px}
.wbl-pill__txt{display:flex; flex-direction:column; gap:3px; min-width:0}
.wbl-pill:hover{
  transform: translateY(-1px);
  border-color: rgba(var(--wbl-accent2), .24);
  background: rgba(34,211,238,.08);
  text-decoration:none;
}
.wbl-pill__txt > span{font-size:12px; color: rgba(233,238,252,.60); font-weight:900; letter-spacing:.08em; text-transform:uppercase}
.wbl-pill__txt > b{font-weight:950; letter-spacing:-.01em; color: rgba(233,238,252,.92)}
.wbl-contactMeta{
  margin-top:auto;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:10px;
}
.wbl-contactMeta__item{
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(18,27,45,.38);
  padding:12px 12px;
}
.wbl-contactMeta__k{display:block; font-size:12px; color: rgba(233,238,252,.62); font-weight:900; letter-spacing:.08em; text-transform:uppercase}
.wbl-contactMeta__v{display:block; margin-top:6px; color: rgba(233,238,252,.84); font-weight:800; line-height:1.25}
.wbl-form__msg{margin-top:10px; font-weight:700}

/* Footer */
.wbl-footer{
  padding:42px 0 30px;
  border-top:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(980px 640px at 12% 10%, rgba(34,211,238,.10), transparent 62%),
    radial-gradient(980px 640px at 86% 10%, rgba(139,92,246,.10), transparent 62%),
    rgba(255,255,255,.02);
}
.wbl-footer__grid{
  display:grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1.2fr;
  gap:18px;
  align-items:start;
}
.wbl-footer__brand{font-weight:900; letter-spacing:-.02em}
.wbl-footer__muted{margin-top:8px; color:var(--wbl-muted); line-height:1.5}
.wbl-footer__h{font-weight:800; margin-bottom:10px}
.wbl-footer__h--sm{font-size:13px; opacity:.92}
.wbl-footer__links{display:flex; flex-direction:column; gap:8px}
.wbl-footer__links a{color:rgba(233,238,252,.72)}
.wbl-footer__links a:hover{color:rgba(233,238,252,.95)}
.wbl-footer__cta{margin-top:14px}
.wbl-footer__cta .wbl-btn{width:100%}
.wbl-footer__bottom{margin-top:20px; display:flex; gap:10px; flex-wrap:wrap; align-items:center; color:rgba(233,238,252,.62)}
.wbl-footer__bottom a{
  color: rgba(233,238,252,.72);
  text-decoration: underline;
  text-decoration-color: rgba(34,211,238,.35);
  text-underline-offset: 4px;
}
.wbl-footer__bottom a:hover{color: rgba(34,211,238,.95); text-decoration-color: rgba(34,211,238,.65)}
.wbl-footer__dot{opacity:.5}

@media (max-width: 980px){
  .wbl-footer__grid{grid-template-columns: 1fr 1fr}
  .wbl-footer__about{grid-column: 1 / -1}
  .wbl-footer__cta .wbl-btn{width:auto}
}
@media (max-width: 520px){
  .wbl-footer__grid{grid-template-columns: 1fr}
  .wbl-footer__cta .wbl-btn{width:100%}
}

/* Map placeholder (Contacts page) */
.wbl-mapHost{
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(900px 520px at 20% 20%, rgba(34,211,238,.16), transparent 55%),
    radial-gradient(800px 460px at 80% 20%, rgba(139,92,246,.14), transparent 55%),
    rgba(7,12,23,.45);
  min-height: 360px;
  overflow:hidden;
  position:relative;
}
.wbl-mapHost__ph{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:8px;
  padding:18px;
  text-align:center;
}
.wbl-mapHost__t{
  font-weight:900;
  letter-spacing:-.02em;
}
.wbl-mapHost__p{
  color: rgba(233,238,252,.72);
  max-width: 62ch;
  line-height:1.55;
}

/* Consent modal */
.wbl-consent[hidden]{display:none !important}
.wbl-consent{position:fixed; inset:0; z-index:9999; display:grid; place-items:end center; padding:18px}
.wbl-consent__overlay{
  position:absolute; inset:0;
  background: rgba(7,12,23,.55);
  backdrop-filter: blur(16px) saturate(120%);
  z-index:0;
}
.wbl-consent__overlay::after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(1200px 800px at 20% 20%, rgba(255,255,255,.06), transparent 55%),
    radial-gradient(1200px 800px at 80% 20%, rgba(255,255,255,.04), transparent 55%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.015) 0 1px, transparent 1px 180px);
  opacity:.55;
  pointer-events:none;
}
.wbl-consent__panel{
  position:relative;
  width:min(720px, 100%);
  border-radius: 22px;
  border:1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(980px 640px at 18% 12%, rgba(34,211,238,.14), transparent 62%),
    radial-gradient(980px 640px at 86% 18%, rgba(139,92,246,.12), transparent 62%),
    rgba(18,27,45,.74);
  padding:16px 16px 14px;
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
  z-index:1;
}
.wbl-consent__title{font-weight:980; letter-spacing:-.03em; font-size:18px}
.wbl-consent__text{margin-top:8px; color: rgba(233,238,252,.72); line-height:1.5}
.wbl-consent__details{
  margin-top:10px;
  border-top:1px solid rgba(255,255,255,.10);
  padding-top:10px;
}
.wbl-consent__detailsIn{
  max-height: 42vh;
  overflow:auto;
  padding-right:6px;
  color: rgba(233,238,252,.74);
  line-height:1.6;
}
.wbl-consent__detailsIn a{color: rgba(34,211,238,.95)}
.wbl-consent__detailsIn a:hover{text-decoration:none}
.wbl-consent__detailsIn ul{margin:10px 0 0; padding-left:18px}
.wbl-consent__actions{margin-top:12px; display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap}
.wbl-consentOpen{overflow:hidden}
html.wbl-consentOpen, body.wbl-consentOpen{overflow:hidden}

/* Post modal */
.wbl-postModal[hidden]{display:none !important}
.wbl-postModal{position:fixed; inset:0; z-index:9998; display:grid; place-items:center; padding:18px}
.wbl-postModal__overlay{
  position:absolute; inset:0;
  background: rgba(7,12,23,.55);
  backdrop-filter: blur(16px) saturate(120%);
}
.wbl-postModal__overlay::after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(1200px 800px at 20% 20%, rgba(255,255,255,.06), transparent 55%),
    radial-gradient(1200px 800px at 80% 20%, rgba(255,255,255,.04), transparent 55%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.015) 0 1px, transparent 1px 180px);
  opacity:.55;
  pointer-events:none;
}
.wbl-postModal__panel{
  position:relative;
  width:min(860px, 100%);
  border-radius: 22px;
  border:1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(980px 640px at 18% 12%, rgba(34,211,238,.12), transparent 62%),
    radial-gradient(980px 640px at 86% 18%, rgba(139,92,246,.10), transparent 62%),
    rgba(18,27,45,.78);
  padding:14px 14px 12px;
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
}
.wbl-postModal__top{display:flex; align-items:flex-start; justify-content:space-between; gap:10px}
.wbl-postModal__chips{display:flex; gap:8px; flex-wrap:wrap}
.wbl-postModal__close{
  width:40px;height:40px;
  display:inline-flex;
  align-items:center; justify-content:center;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(233,238,252,.86);
  cursor:pointer;
}
.wbl-postModal__close:hover{border-color: rgba(var(--wbl-accent2), .24); background: rgba(34,211,238,.08); color: rgba(34,211,238,.95)}
.wbl-postModal__title{margin-top:10px; font-size:22px; font-weight:980; letter-spacing:-.03em; line-height:1.12}
.wbl-postModal__meta{margin-top:8px; color: rgba(233,238,252,.62)}
.wbl-postModal__body{
  margin-top:12px;
  max-height: 54vh;
  overflow:auto;
  padding-right:6px;
  color: rgba(233,238,252,.80);
  line-height:1.75;
}

/* Slim scrollbars (WebKit + Firefox) */
.wbl-consent__detailsIn,
.wbl-postModal__body{
  scrollbar-width: thin;
  scrollbar-color: rgba(233,238,252,.18) transparent;
}
.wbl-consent__detailsIn::-webkit-scrollbar,
.wbl-postModal__body::-webkit-scrollbar{
  width: 8px;
}
.wbl-consent__detailsIn::-webkit-scrollbar-track,
.wbl-postModal__body::-webkit-scrollbar-track{
  background: transparent;
}
.wbl-consent__detailsIn::-webkit-scrollbar-thumb,
.wbl-postModal__body::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, rgba(34,211,238,.22), rgba(139,92,246,.18));
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.wbl-consent__detailsIn::-webkit-scrollbar-thumb:hover,
.wbl-postModal__body::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(180deg, rgba(34,211,238,.32), rgba(139,92,246,.26));
  background-clip: padding-box;
}
.wbl-postModal__body p{margin-top:12px}
.wbl-postModal__body p:first-child{margin-top:0}
.wbl-postModal__actions{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.10);
  display:flex;
  gap:10px;
  justify-content:flex-end;
  flex-wrap:wrap;
}

/* Policy modal */
.wbl-policyModal[hidden]{display:none !important}
.wbl-policyModal{position:fixed; inset:0; z-index:9997; display:grid; place-items:center; padding:18px}
.wbl-policyModal__overlay{
  position:absolute; inset:0;
  background: rgba(7,12,23,.55);
  backdrop-filter: blur(16px) saturate(120%);
}
.wbl-policyModal__overlay::after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(1200px 800px at 20% 20%, rgba(255,255,255,.06), transparent 55%),
    radial-gradient(1200px 800px at 80% 20%, rgba(255,255,255,.04), transparent 55%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.015) 0 1px, transparent 1px 180px);
  opacity:.55;
  pointer-events:none;
}
.wbl-policyModal__panel{
  position:relative;
  width:min(900px, 100%);
  border-radius: 22px;
  border:1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(980px 640px at 18% 12%, rgba(34,211,238,.12), transparent 62%),
    radial-gradient(980px 640px at 86% 18%, rgba(139,92,246,.10), transparent 62%),
    rgba(18,27,45,.78);
  padding:14px 14px 12px;
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
}
.wbl-policyModal__top{display:flex; align-items:flex-start; justify-content:space-between; gap:10px}
.wbl-policyModal__title{font-weight:980; letter-spacing:-.03em; font-size:20px}
.wbl-policyModal__sub{margin-top:6px; color: rgba(233,238,252,.62)}
.wbl-policyModal__close{
  width:40px;height:40px;
  display:inline-flex;
  align-items:center; justify-content:center;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(233,238,252,.86);
  cursor:pointer;
}
.wbl-policyModal__close:hover{border-color: rgba(var(--wbl-accent2), .24); background: rgba(34,211,238,.08); color: rgba(34,211,238,.95)}
.wbl-policyModal__body{
  margin-top:12px;
  max-height: 58vh;
  overflow:auto;
  padding-right:6px;
  color: rgba(233,238,252,.78);
  line-height:1.75;
}
.wbl-policyModal__body p{margin-top:12px}
.wbl-policyModal__body p:first-child{margin-top:0}
.wbl-policyModal__body a{color: rgba(34,211,238,.95)}
.wbl-policyModal__body a:hover{text-decoration:none}
.wbl-policyModal__body ul{margin:8px 0 0; padding-left:18px}
.wbl-policyModal__actions{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.10);
  display:flex;
  gap:10px;
  justify-content:flex-end;
  flex-wrap:wrap;
}
.wbl-policyModal__body{
  scrollbar-width: thin;
  scrollbar-color: rgba(233,238,252,.18) transparent;
}
.wbl-policyModal__body::-webkit-scrollbar{width: 8px}
.wbl-policyModal__body::-webkit-scrollbar-track{background: transparent}
.wbl-policyModal__body::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, rgba(34,211,238,.22), rgba(139,92,246,.18));
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.wbl-policyModal__body::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(180deg, rgba(34,211,238,.32), rgba(139,92,246,.26));
  background-clip: padding-box;
}

/* Responsive */
@media (max-width: 980px){
  .wbl-hero__grid{grid-template-columns:1fr; gap:16px}
  .wbl-h1{font-size:40px}
  .wbl-mini{grid-template-columns:repeat(3,1fr)}
  .wbl-servicesGrid{grid-template-columns: repeat(2, 1fr)}
  .wbl-dirWrap{
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "c c"
      "i1 i3"
      "i2 i4";
  }
  .wbl-caseHub{grid-template-columns: 1fr}
  .wbl-caseSpot__grid{grid-template-columns: 1fr}
  .wbl-caseSpot__arrow{display:none}
  .wbl-caseViz__grid{grid-template-columns: 1fr}
  .wbl-grid3{grid-template-columns:1fr; }
  .wbl-steps{grid-template-columns:repeat(2,1fr)}
  .wbl-contactGrid{grid-template-columns:1fr}
  .wbl-contactQuick{justify-content:flex-start}
  .wbl-contactMeta{grid-template-columns:1fr}
  .wbl-footer__grid{grid-template-columns:1fr}
  .wbl-case__grid{grid-template-columns: 1fr}
  .wbl-case__arrow{display:none}
  .wbl-case__kpis{justify-content:flex-start}
}
@media (max-width: 720px){
  .wbl-links,.wbl-cta{display:none}
  .wbl-burger{display:inline-flex; align-items:center; justify-content:center; margin-left:auto}
  .wbl-h1{font-size:34px}
  .wbl-servicesGrid{grid-template-columns: 1fr}
  /* Mobile: keep hero compact (only left column) */
  .wbl-hero__grid > :nth-child(2){display:none}

  /* Mobile menu: panel must not look transparent */
  .wbl-mobile{background: #070c17}

  /* Section head: avoid cramped buttons */
  .wbl-section__head{flex-direction:column; align-items:flex-start}
  .wbl-section__head > a.wbl-btn{width:100%; justify-content:center; white-space:normal}

  /* Directions (services): chips before the main card, small like chips */
  .wbl-dirWrap{
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "i1 i2" "i3 i4" "c c";
    gap:10px;
  }
  .wbl-dirItem{
    border-radius:999px;
    padding:10px 12px;
    background: transparent;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    text-align:center;
  }
  .wbl-dirItem__ic{display:none}
  .wbl-dirItem__p{display:none}
  .wbl-dirItem__t{font-size:13px}
  .wbl-dirItem.is-active{box-shadow: 0 0 0 6px rgba(var(--wbl-dir-accent-rgb), .10)}

  /* Cases: tiny chips, horizontally scrollable */
  .wbl-caseTabs{
    flex-wrap:nowrap;
    overflow:auto;
    justify-content:flex-start;
    padding-bottom:6px;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
  }
  .wbl-caseTabs .wbl-caseItem{scroll-snap-align:start; padding:8px 10px; gap:8px}
  .wbl-caseTabs .wbl-caseItem__ic{display:none}
  .wbl-caseTabs .wbl-caseItem__p{display:none}
  .wbl-caseTabs .wbl-caseItem__t{font-size:13px}

  /* Team: slider on mobile */
  .wbl-teamGrid{
    display:flex;
    gap:14px;
    overflow:auto;
    padding-bottom:6px;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
  }
  .wbl-teamCard{flex:0 0 86%; scroll-snap-align:start}

  /* FAQ: only questions, hide the right form */
  .wbl-faqWrap{grid-template-columns:1fr}
  .wbl-faqWrap > aside{display:none !important}

  /* Pricing: slider on mobile */
  .wbl-priceGrid{
    display:flex;
    gap:14px;
    overflow:auto;
    padding-bottom:6px;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
  }
  .wbl-priceCard{flex:0 0 86%; scroll-snap-align:start}

  /* Home blog: slider on mobile */
  .wbl-section#blog .wbl-blogGrid{
    display:flex;
    gap:14px;
    overflow:auto;
    padding-bottom:6px;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
  }
  .wbl-section#blog .wbl-blogCol{display:contents}
  .wbl-section#blog .wbl-post{flex:0 0 86%; scroll-snap-align:start}

  /* Blog page: slider on mobile (posts + subscribe card) */
  .wbl-body[data-page="blog"] .wbl-blogGrid{
    display:flex;
    gap:14px;
    overflow:auto;
    padding-bottom:6px;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
  }
  .wbl-body[data-page="blog"] .wbl-blogCol{display:contents}
  .wbl-body[data-page="blog"] .wbl-post,
  .wbl-body[data-page="blog"] .wbl-card{flex:0 0 86%; scroll-snap-align:start}
  .wbl-steps{grid-template-columns:1fr}
}

@media (max-width: 520px){
  .wbl-dirItem{padding:9px 10px}
  .wbl-caseTabs .wbl-caseItem{padding:7px 10px}
  .wbl-teamCard,
  .wbl-priceCard,
  .wbl-section#blog .wbl-post{flex-basis: 90%}
}