/* JB Technologies homepage — interactive service universes.
   Adapted from the supplied pixel-perfect-pix-300-main GitHub export.
   Scoped deliberately to .jb-universes; does not restyle site header/admin. */
.jb-universes {
  --jbu-ink: #182d2a;
  --jbu-subtle: #657975;
  --jbu-stroke: #d7e5e2;
  --jbu-paper: #fff;
  --jbu-aqua: #0aa9c8;
  --jbu-blue: #269cce;
  --jbu-milk: #eaf7fc;
  --jbu-glass: rgba(255,255,255,.92);
  font-family: 'Inter', Arial, sans-serif;
  color: var(--jbu-ink);
  background: #fff;
  isolation: isolate;
  overflow: clip;
}
.jb-universes *, .jb-universes *::before, .jb-universes *::after { box-sizing: border-box; }
.jb-universes [hidden] { display: none !important; }
.jb-universes button { font: inherit; color: inherit; }
.jb-universes button:focus-visible, .jb-universes a:focus-visible { outline: 3px solid var(--jbu-aqua); outline-offset: 4px; }
.jb-universe { padding: clamp(80px, 10vw, 155px) 24px; position:relative; scroll-margin-top:88px; }
.jb-u-inner { width:min(100%,1120px); margin:0 auto; position:relative; }
.jb-u-heading { max-width:750px; }
.jb-u-eyebrow, .jb-u-mini-label, .jb-u-dev-caption, .jb-u-steps, .jb-u-stage small,
.jb-u-commerce-service small, .jb-u-illustrative-note, .jb-u-demo-note {
  font-family: 'Inter',Arial,sans-serif;
}
.jb-u-eyebrow { display:flex; align-items:center; gap:14px; font-size:10px; letter-spacing:.24em; text-transform:uppercase; font-weight:500; color:#758784; line-height:1.5; }
.jb-u-eyebrow .jb-u-num { color:var(--jbu-aqua); font-weight:700; }
.jb-u-rule { background:var(--jbu-stroke); height:1px; width:38px; flex:none; }
.jb-u-heading h2 { font:600 clamp(43px,5.25vw,76px)/1.04 'Inter',Arial,sans-serif; letter-spacing:-.064em; text-transform:none; margin:23px 0 26px; }
.jb-u-metal { color:#e4f2f8; }
.jb-u-heading p { max-width:595px; margin:0; font-size:16px; line-height:1.8; color:var(--jbu-subtle); }
.jb-u-mini-label { text-transform:uppercase; letter-spacing:.23em; font-size:10px; font-weight:600; color:#809491; }
/* 01 — Development */
.jb-u-development { background-image:linear-gradient(rgba(38,156,206,.023) 1px,transparent 1px),linear-gradient(90deg,rgba(38,156,206,.023) 1px,transparent 1px); background-size:66px 66px; background-color:#fff; }
.jb-u-steps { display:flex; flex-wrap:wrap; gap:11px; align-items:center; margin-top:37px; text-transform:uppercase; letter-spacing:.20em; color:#778a86; font-size:10px; }
.jb-u-step-arrow { color:var(--jbu-blue); font-weight:700; }
.jb-u-dev-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:38px; align-items:stretch; margin-top:57px; }
.jb-u-dev-menu { border-top:1px solid var(--jbu-stroke); border-bottom:1px solid var(--jbu-stroke); min-width:0; }
.jb-u-dev-option { width:100%; padding:17px 0; display:flex; justify-content:space-between; align-items:center; text-align:left; gap:15px; border:0; border-bottom:1px solid var(--jbu-stroke); background:transparent; cursor:pointer; transition: color .2s, padding .25s; }
.jb-u-dev-option:last-child { border-bottom:0; }
.jb-u-dev-option:hover { padding-left:7px; }
.jb-u-dev-option-name { display:flex; align-items:center; gap:21px; min-width:0; font-size:clamp(14px,1.4vw,19px); line-height:1.5; color:#607671; transition:color .2s; }
.jb-u-dev-option.is-selected .jb-u-dev-option-name,.jb-u-dev-option:hover .jb-u-dev-option-name { color:var(--jbu-ink); }
.jb-u-dev-option small { font:700 10px 'Inter',Arial,sans-serif; color:var(--jbu-blue); flex:none; }
.jb-u-dev-option-line { height:2px; width:0; background:var(--jbu-blue); flex:none; transition:width .3s ease; }
.jb-u-dev-option.is-selected .jb-u-dev-option-line { width:44px; }
.jb-u-dev-screen { border:1px solid var(--jbu-stroke); border-radius:22px; min-height:440px; display:grid; place-items:center; position:relative; overflow:hidden; background:linear-gradient(180deg,#f1faff 0%,#fff 95%); }
.jb-u-device { position:absolute; inset:14px; display:grid; place-items:center; animation:jbu-in .38s cubic-bezier(.2,.7,.2,1) both; }
@keyframes jbu-in { from { opacity:0; transform:translateY(12px) scale(.96); } to { opacity:1; transform:translateY(0) scale(1); } }
.jb-u-dev-caption { position:absolute; bottom:23px; left:25px; font-size:10px; text-transform:uppercase; letter-spacing:.2em; font-weight:600; color:#7d9591; }
.jb-u-phone { position:relative; width:170px; height:320px; padding:13px 12px; border:1px solid #d4e7e1; border-radius:34px; background:rgba(255,255,255,.9); box-shadow:0 25px 40px -30px #264f5559, inset 0 1px 0 #fff; }
.jb-u-phone-speaker { width:42px; height:4px; background:#d7e7e2; border-radius:9px; margin:0 auto 12px; }
.jb-u-phone-photo { height:96px; border-radius:15px; background:#d0ecfa; }
.jb-u-phone-copy { margin-top:16px; display:grid; gap:9px; }
.jb-u-phone-copy i { display:block; height:10px; width:88%; border-radius:10px; background:#dce2e1; }
.jb-u-phone-copy i:nth-child(2) { width:70%; }.jb-u-phone-copy i:nth-child(3) { width:52%; }
.jb-u-phone-nav { position:absolute; bottom:13px; left:12px; right:12px; display:grid; grid-template-columns:repeat(4,1fr); gap:7px; }
.jb-u-phone-nav i { aspect-ratio:1; border-radius:50%; background:#e8eeee; }
.jb-u-window,.jb-u-crm { width:min(90%,470px); border:1px solid #d7e5e2; border-radius:15px; box-shadow:0 20px 45px -27px #153f4e30; background:#fff; overflow:hidden; }
.jb-u-window-top { display:flex; align-items:center; gap:6px; height:43px; padding:0 15px; border-bottom:1px solid var(--jbu-stroke); }
.jb-u-window-top i { width:9px; height:9px; border-radius:100%; background:#d8e4e4; }
.jb-u-window-top span { margin-left:auto; height:8px; width:36%; background:#eff6f4; border-radius:8px; }
.jb-u-window-body { padding:23px; flex:1; }
.jb-u-window-banner { height:88px; border-radius:12px; background:linear-gradient(100deg,#c8e9fa,#f7fbfd); }
.jb-u-window-tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:15px; }
.jb-u-window-tiles i { height:69px; border:1px solid #e3ecea; border-radius:9px; background:#f5f8f7; }
.jb-u-app-body { display:flex; }
.jb-u-app-body aside { border-right:1px solid #e4eae8; padding:18px 12px; width:80px; flex:none; display:grid; align-content:start; gap:12px; }
.jb-u-app-body aside i { height:11px; background:#e5eeeb; border-radius:5px; }
.jb-u-app-body .jb-u-window-body { min-width:0; }
.jb-u-crm { padding:22px; }.jb-u-crm-columns { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:18px; }
.jb-u-crm-columns>div { min-width:0; }.jb-u-crm-columns small { color:#718784; font-size:10px; display:block; margin-bottom:10px; }
.jb-u-crm-columns i { display:block; height:35px; border:1px solid #e0eae7; background:#f6fafa; margin-bottom:8px; border-radius:7px; }
.jb-u-node-graphic { width:min(94%,480px); height:auto; overflow:visible; }
.jb-u-node-graphic line { stroke:var(--jbu-blue); stroke-width:1.7; stroke-dasharray:4 9; animation:jbu-flow 1.5s linear infinite; }
@keyframes jbu-flow {to{stroke-dashoffset:-26}}
.jb-u-node-graphic rect { stroke:#ccdfdc; stroke-width:1; fill:rgba(255,255,255,.94); }
.jb-u-node-graphic text { font:12px 'Inter',Arial,sans-serif; fill:#58716d; }
.jb-u-node-graphic .jb-u-node-hub {fill:#dff3fe; stroke:var(--jbu-blue); stroke-width:1.8; }
.jb-u-node-graphic .jb-u-hub-text { fill:#0d5665; font-size:14px; font-weight:700; }
/* 02 — Marketing */
.jb-u-marketing { background:#fff; }
.jb-u-marketing:before,.jb-u-commerce:before { content:''; position:absolute; width:420px; height:420px; background:radial-gradient(circle,rgba(10,169,200,.055),transparent 68%); right:-190px; top:140px; pointer-events:none; }
.jb-u-marketing-stages { margin-top:65px; display:grid; grid-template-columns:repeat(6,1fr); border:1px solid var(--jbu-stroke); border-radius:16px; overflow:hidden; background:#fff; }
.jb-u-stage { border-right:1px solid var(--jbu-stroke); padding:19px 20px 17px; min-width:0; }
.jb-u-stage:last-child { border-right:0; }.jb-u-stage small {color:var(--jbu-aqua); font-size:10px; }
.jb-u-stage strong { display:block; font-size:15px; font-weight:500; margin-top:24px; white-space:nowrap; }
.jb-u-stage-track { background:#e9f1f0; height:3px; border-radius:8px; margin-top:14px; }
.jb-u-stage-track span { display:block; background:var(--jbu-aqua); height:100%; width:var(--jb-stage-width); transform-origin:left; }
.jb-u-growth-card { padding:33px 37px 24px; margin-top:35px; border:1px solid var(--jbu-stroke); border-radius:20px; background:#fff; box-shadow:0 20px 50px -39px #16536145; }
.jb-u-growth-header { display:flex; justify-content:space-between; align-items:center; gap:15px; }
.jb-u-growth-tag { border:1px solid var(--jbu-stroke); border-radius:20px; padding:7px 12px; font-size:11px; color:#8a9c98; }
.jb-u-growth-graph { width:100%; display:block; height:auto; margin-top:25px; overflow:visible; }
.jb-u-chart-line { stroke:#dce6e4; stroke-dasharray:2 6; stroke-width:1; }
.jb-u-growth-shadow { fill:none; stroke:#d6e8e5; stroke-width:1.2; }
.jb-u-growth-path { fill:none; stroke:var(--jbu-aqua); stroke-width:3; stroke-linecap:round; }
.jb-u-growth-halo {fill:#b7eef5;}.jb-u-growth-dot {fill:var(--jbu-aqua);}
.jb-u-growth-point text { fill:#344b48; font:12px 'Inter',Arial,sans-serif; }
.jb-u-illustrative-note { color:#a1afac; text-align:right; font-size:9px; letter-spacing:.05em; }
.jb-u-campaign-grid { display:grid; grid-template-columns:1.25fr 1fr; gap:42px; margin-top:50px; align-items:start; }
.jb-u-campaign-options { display:flex; flex-wrap:wrap; align-content:start; gap:9px; }
.jb-u-campaign-chip { border:1px solid var(--jbu-stroke); background:#fff; color:#657b76 !important; border-radius:26px; padding:12px 15px; font-size:12px !important; line-height:1.5; cursor:pointer; transition:background .2s,color .2s,border-color .2s,transform .2s; }
.jb-u-campaign-chip:hover { border-color:#85d9e7; transform:translateY(-2px); }.jb-u-campaign-chip.is-selected { background:var(--jbu-aqua); border-color:var(--jbu-aqua); color:#003b45 !important; }
.jb-u-campaign-card { border:1px solid var(--jbu-stroke); padding:25px; border-radius:18px; background:#fff; min-height:186px; box-shadow:0 15px 36px -29px #16536130; }
.jb-u-campaign-card .jb-u-mini-label { color:var(--jbu-aqua); }
.jb-u-campaign-card h3 { font:500 24px/1.25 'Inter',Arial,sans-serif; letter-spacing:-.04em; margin:12px 0 24px; min-height:31px; overflow-wrap:anywhere; }
.jb-u-campaign-bars { height:80px; display:flex; align-items:flex-end; gap:5px; }
.jb-u-campaign-bars i { display:block; flex:1; min-width:0; background:#60c8db; border-radius:4px 4px 0 0; transition:height .36s cubic-bezier(.25,.7,.25,1); }
/* 03 — Commerce */
.jb-u-commerce { background:#fff; }
.jb-u-commerce:before { right:auto; left:-190px; top:220px; }
.jb-u-commerce-grid { display:grid; grid-template-columns:1.38fr 1fr; gap:24px; margin-top:60px; }
.jb-u-store-card,.jb-u-order-card { border:1px solid var(--jbu-stroke); border-radius:19px; background:rgba(255,255,255,.95); padding:26px; box-shadow:0 15px 40px -33px #17505b35; }
.jb-u-products { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:25px; }
.jb-u-product { min-width:0; border:1px solid var(--jbu-stroke); background:#fafdfe; border-radius:15px; padding:11px; text-align:left; cursor:pointer; transition:transform .25s,border-color .2s,background .2s,box-shadow .25s; }
.jb-u-product:hover { transform:translateY(-5px) rotate(-1deg); box-shadow:0 12px 26px #17485910; }
.jb-u-product.is-selected { border-color:var(--jbu-aqua); background:#edfbfd; box-shadow:0 0 0 2px #0aa9c818; }
.jb-u-product-graphic { aspect-ratio:1; width:100%; border-radius:11px; background:linear-gradient(130deg,#e2e9e8,#f7faf9); display:grid; place-items:center; }
.jb-u-product-symbol { width:37px; height:37px; border:2px solid rgba(255,255,255,.9); display:block; border-radius:100%; box-shadow:0 2px 7px #abc8c341; }
.jb-u-product-symbol-1 {border-radius:11px;}.jb-u-product-symbol-2 {border-radius:8px; transform:rotate(45deg);}
.jb-u-product-name,.jb-u-product-price { display:block; }
.jb-u-product-name { margin-top:12px; font-size:12px; line-height:1.35; }
.jb-u-product-price { color:var(--jbu-aqua); font:600 11px 'Inter',Arial,sans-serif; margin-top:3px; }
.jb-u-order-card { display:flex; flex-direction:column; }
.jb-u-flow-steps { margin-top:23px; display:grid; gap:10px; flex:1; }
.jb-u-flow-step { display:flex; align-items:center; gap:12px; border:1px solid var(--jbu-stroke); border-radius:10px; color:#7b8c88; font-size:13px; padding:10px 13px; transition:background .25s,border-color .25s,color .25s; }
.jb-u-flow-step.is-done { border-color:#87dce8; background:#eafbfd; color:#243f3e; }
.jb-u-flow-step strong { margin-left:auto; font:600 11px 'Inter',Arial,sans-serif; color:var(--jbu-aqua); }
.jb-u-flow-icon { color:#6e8c86; display:inline-grid; place-items:center; width:15px; font-size:15px; }
.jb-u-flow-step.is-done .jb-u-flow-icon {color:#029bad;}
.jb-u-demo-status { color:#7f928d; font-size:11px; line-height:1.6; margin:16px 0 0; }
.jb-u-demo-note { display:block; color:#98a7a3; font-size:9px; line-height:1.6; margin-top:10px; letter-spacing:.01em; }
.jb-u-commerce-services { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:55px; border:1px solid var(--jbu-stroke); border-radius:15px; overflow:hidden; background:var(--jbu-stroke); gap:1px; }
.jb-u-commerce-service { display:flex; flex-direction:column; min-height:100px; gap:23px; background:#fff; padding:19px; transition:background .25s; }
.jb-u-commerce-service:hover {background:#edfbfd;}
.jb-u-commerce-service small { color:var(--jbu-aqua); font-size:10px; }
.jb-u-commerce-service span { font-size:12px; line-height:1.5; overflow-wrap:anywhere; }
.jb-u-bottom-cta { border-top:1px solid var(--jbu-stroke); margin-top:62px; padding-top:25px; display:flex; justify-content:space-between; gap:20px; align-items:center; }
.jb-u-bottom-cta p { color:#718681; font-size:13px; margin:0; }
.jb-u-contact-link { font-size:12px; font-weight:700; color:#167e91; display:inline-flex; align-items:center; gap:13px; white-space:nowrap; }
.jb-u-contact-link:hover {color:#0aafca;}
/* Scroll reveal only enabled once JavaScript has initialized; no-JS stays visible. */
@keyframes jbu-reveal { from { transform:translateY(12px); opacity:.82; } to { transform:none; opacity:1; } }
.jb-universes.jb-u-enhanced [data-jbu-reveal] { opacity:1; transform:none; }
.jb-universes.jb-u-enhanced [data-jbu-reveal].is-visible { animation:jbu-reveal .55s ease-out both; }
.jb-universes.jb-u-enhanced .jb-u-growth-path { stroke-dasharray:100; stroke-dashoffset:100; transition:stroke-dashoffset 1.5s ease .2s; }
.jb-universes.jb-u-enhanced .jb-u-growth-card.is-visible .jb-u-growth-path { stroke-dashoffset:0; }
@media(max-width:1000px) {
  .jb-u-dev-grid { gap:25px; }
  .jb-u-marketing-stages {grid-template-columns:repeat(3,minmax(0,1fr));}
  .jb-u-stage:nth-child(3) {border-right:0;}
  .jb-u-stage:nth-child(n+4) {border-top:1px solid var(--jbu-stroke);}
  .jb-u-campaign-grid {gap:25px;}
  .jb-u-commerce-grid {grid-template-columns:1.15fr 1fr;}
  .jb-u-store-card,.jb-u-order-card {padding:19px;}
  .jb-u-commerce-service {padding:16px;}
}
@media(max-width:720px) {
  .jb-universe {padding:76px 18px;}
  .jb-u-heading h2 {font-size:clamp(39px,9vw,58px); margin:20px 0;}
  .jb-u-heading p {font-size:14px;line-height:1.75;}
  .jb-u-dev-grid,.jb-u-campaign-grid,.jb-u-commerce-grid {grid-template-columns:minmax(0,1fr);}
  .jb-u-dev-grid {gap:24px;margin-top:36px;}
  .jb-u-dev-option {padding:12px 0;}
  .jb-u-dev-screen { min-height:330px; }
  .jb-u-phone {transform:scale(.82);}
  .jb-u-dev-option-name {font-size:15px;}
  .jb-u-steps {font-size:9px;margin-top:28px;gap:8px;letter-spacing:.12em;}
  .jb-u-marketing-stages {margin-top:34px;}
  .jb-u-growth-card {padding:20px 16px 14px;margin-top:22px;}
  .jb-u-growth-header {flex-wrap:wrap;}
  .jb-u-campaign-grid {margin-top:30px;gap:22px;}
  .jb-u-campaign-card {min-height:170px;}
  .jb-u-commerce-grid {margin-top:35px;}
  .jb-u-commerce-services {grid-template-columns:repeat(2,minmax(0,1fr));margin-top:36px;}
  .jb-u-commerce-service {min-height:84px;}
  .jb-u-bottom-cta {align-items:flex-start;flex-direction:column;margin-top:42px;}
  .jb-u-growth-point text {font-size:14px;}
}
@media(max-width:440px) {
  .jb-u-heading h2 {font-size:clamp(37px,10vw,46px);}
  .jb-u-marketing-stages {grid-template-columns:repeat(2,minmax(0,1fr));}
  .jb-u-stage:nth-child(3) {border-right:1px solid var(--jbu-stroke);}
  .jb-u-stage:nth-child(even) {border-right:0;}
  .jb-u-stage:nth-child(n+3) {border-top:1px solid var(--jbu-stroke);}
  .jb-u-stage {padding:14px;}
  .jb-u-stage strong {font-size:13px;margin-top:15px;}
  .jb-u-steps {font-size:8px;}
  .jb-u-dev-screen {min-height:295px;}
  .jb-u-products {gap:7px;}.jb-u-product {padding:7px;}.jb-u-product-name {font-size:10px;}
  .jb-u-campaign-chip {padding:9px 10px;font-size:11px!important;}
  .jb-u-commerce-service {padding:14px;}
}
@media(prefers-reduced-motion:reduce) {
  .jb-universes *, .jb-universes *::before,.jb-universes *::after { animation:none!important; transition:none!important; }
  .jb-universes.jb-u-enhanced [data-jbu-reveal] {opacity:1;transform:none;}
  .jb-universes.jb-u-enhanced .jb-u-growth-path {stroke-dashoffset:0;}
}