/* Hello Bleu homepage: motion, Spotlight, review desk, Bleu Lab + Bleu OS screens, Desktop scene. 28 Oct 2026 */
/* ═══════════════════════════════════════════════════════════
   PROTOTYPE ADDITIONS — everything new lives below this line.
   Built on the live homepage; the original rules above are untouched.
   Tokens: ink #111 · cream #fffef7 · warm #f7f4ee · line #e8e8e0
           bleu #2c8ffa · bleu-hover #1a7de8 · night #16162a (terminal)
           lights #ff5f57 #febc2e #28c840
═══════════════════════════════════════════════════════════ */
:root{
  --hb-ink:#111111;--hb-cream:#fffef7;--hb-warm:#f7f4ee;--hb-line:#e8e8e0;
  --hb-bleu:#2c8ffa;--hb-bleu2:#1a7de8;--hb-night:#16162a;--hb-night2:#22223a;
  --hb-red:#ff5f57;--hb-yel:#febc2e;--hb-grn:#28c840;--hb-mute:#6f6f68;
  --hb-display:'Bebas Neue',Impact,sans-serif;--hb-ui:'Montserrat',system-ui,sans-serif;
  --hb-mono:'Courier New',ui-monospace,Menlo,monospace;
}
body{background:#fffef7 !important}

/* ── 1. LOGO: the dot is cut out of the real logo and lives on its own ── */
.hb-logo-wrap{position:relative !important;display:block !important;height:45px !important;margin:7px 0 8px !important}
.nav-logo img.hb-logo-body,.hbf img.hb-logo-body{height:45px !important;width:auto !important;display:block !important}
.nav-logo img.hb-dot,.hbf img.hb-dot{position:absolute !important;left:89.3% !important;top:77.3% !important;width:9.4% !important;height:auto !important;transform-origin:50% 100% !important;animation:hbDotHop 4.2s cubic-bezier(.3,.7,.4,1) 2.2s infinite !important}
.nav-logo:hover img.hb-dot{animation:hbDotHop .9s cubic-bezier(.3,.7,.4,1) infinite !important}
.hb-dot.hb-cheer{animation:hbDotCheer 1.1s cubic-bezier(.3,.7,.4,1) 1 !important}
@keyframes hbDotHop{0%,74%,100%{transform:translateY(0) scale(1)}80%{transform:translateY(-70%) scale(1.1,.92)}87%{transform:translateY(0) scale(1.35,.68)}93%{transform:translateY(-18%) scale(.94,1.06)}}
@keyframes hbDotCheer{0%{transform:none}20%{transform:translateY(-120%) scale(.9,1.1)}38%{transform:translateY(0) scale(1.4,.62)}55%{transform:translateY(-55%)}72%{transform:translateY(0) scale(1.15,.85)}86%{transform:translateY(-14%)}100%{transform:none}}
.hbf .hb-logo-wrap{height:44px !important;margin:0 !important;width:max-content !important}
.hbf img.hb-logo-body{height:44px !important}

/* ── 2. NAV: reading line + Spotlight button (dropdown untouched) ── */
.hb-prog{position:absolute !important;left:0 !important;right:0 !important;bottom:-1px !important;height:2px !important;background:var(--hb-bleu) !important;transform-origin:0 50% !important;transform:scaleX(0);pointer-events:none !important}
.hb-spot-btn{display:inline-flex !important;align-items:center !important;gap:8px !important;height:38px !important;padding:0 10px 0 12px !important;margin-right:12px !important;border-radius:100px !important;border:1.5px solid rgba(44,143,250,.35) !important;background:transparent !important;color:var(--hb-bleu) !important;font:700 11px/1 var(--hb-ui) !important;letter-spacing:.3px !important;transition:border-color .2s,background .2s !important}
.hb-spot-btn:hover{border-color:var(--hb-bleu) !important;background:#f0f6ff !important}
.hb-spot-btn kbd{font:700 10px/1 var(--hb-ui) !important;padding:4px 6px !important;border-radius:6px !important;background:#f0f6ff !important;color:var(--hb-bleu2) !important}
.hb-nav-right{display:flex !important;align-items:center !important}

/* ── 3. SCREEN SWITCHER (right edge, desktop) ── */
.hb-dock{position:fixed !important;right:8px !important;top:50% !important;transform:translateY(-50%) !important;z-index:90 !important;display:flex !important;flex-direction:column !important;gap:6px !important;padding:8px !important;border-radius:14px !important;background:rgba(255,254,247,.82) !important;border:1px solid rgba(0,0,0,.06) !important;backdrop-filter:blur(8px) !important;-webkit-backdrop-filter:blur(8px) !important;transition:background .4s,border-color .4s !important}
.hb-dock.on-dark{background:rgba(22,22,42,.55) !important;border-color:rgba(255,255,255,.1) !important}
.hb-dock button{position:relative !important;width:12px !important;height:12px !important;border:0 !important;border-radius:4px !important;background:#d6d6cc !important;transition:height .35s cubic-bezier(.2,.8,.2,1),background .3s !important}
.hb-dock.on-dark button{background:rgba(255,255,255,.28) !important}
.hb-dock button.is-on{height:30px !important;background:var(--hb-bleu) !important}
.hb-dock button:hover{background:var(--hb-bleu2) !important}
.hb-dock button span{position:absolute !important;right:22px !important;top:50% !important;transform:translate(6px,-50%) !important;white-space:nowrap !important;padding:6px 10px !important;border-radius:8px !important;background:var(--hb-ink) !important;color:#fff !important;font:700 10px/1 var(--hb-ui) !important;letter-spacing:1.2px !important;text-transform:uppercase !important;opacity:0 !important;pointer-events:none !important;transition:opacity .2s,transform .2s !important}
.hb-dock button:hover span,.hb-dock button:focus-visible span{opacity:1 !important;transform:translate(0,-50%) !important}
.hb-dock button:focus-visible{outline:2px solid var(--hb-bleu2) !important;outline-offset:2px !important}

/* ── 4. HERO: typed 404, decoded headline, typed service word ── */
.terminal{transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s !important}
.terminal.hb-glitch{animation:hbGlitch .42s steps(2) 1 !important}
@keyframes hbGlitch{0%{transform:translate(0)}20%{transform:translate(-3px,1px)}40%{transform:translate(3px,-1px);box-shadow:-3px 0 0 rgba(255,95,87,.55),3px 0 0 rgba(44,143,250,.55)}60%{transform:translate(-2px,0)}80%{transform:translate(2px,1px)}100%{transform:none}}
.terminal.hb-solved .d-red,.terminal.hb-solved .d-yellow{background:#3a3a55 !important}
.terminal.hb-solved .d-green{box-shadow:0 0 0 4px rgba(40,200,64,.22) !important}
.hb-type-msg{color:#f0f0f0 !important}
.headline .hb-ch{display:inline-block !important}
.headline .hb-ch.hb-scr{color:var(--hb-bleu) !important;opacity:.55}
.headline .accent .hb-ch.hb-scr{color:#111 !important}
.hb-rot{color:var(--hb-bleu) !important;white-space:nowrap !important}
.hb-rot-caret{display:inline-block !important;width:2px !important;height:1.05em !important;background:var(--hb-bleu) !important;vertical-align:-.15em !important;margin-left:1px !important;animation:blink 1s step-start infinite !important}

/* ── 5. PACKAGES: lights boot when a card is picked, total counts ── */
.svc-card.selected .tl-dot{animation:hbBoot .9s cubic-bezier(.3,1.6,.5,1) both !important}
.svc-card.selected .tl-dot:nth-child(2){animation-delay:.12s !important}
.svc-card.selected .tl-dot:nth-child(3){animation-delay:.24s !important}
@keyframes hbBoot{0%{transform:scale(1)}40%{transform:scale(1.6)}100%{transform:scale(1)}}
.svc-card .check{transition:opacity .25s,transform .45s cubic-bezier(.3,1.6,.5,1) !important}
.save-badge.show{animation:hbPop .5s cubic-bezier(.3,1.6,.5,1) both !important}
@keyframes hbPop{from{transform:scale(.4);opacity:0}}
.price-total{font-variant-numeric:tabular-nums !important}

/* ── 6. BLEU BUDDIES: every review as a window on a desk ── */
#testimonials{background:var(--hb-cream) !important;justify-content:center !important;align-items:center !important;padding:96px 60px 40px !important}
.hb-rev-top{display:flex !important;align-items:center !important;justify-content:center !important;gap:12px !important;flex-wrap:wrap !important;margin-bottom:6px !important}
.hb-clutch{display:inline-flex !important;align-items:center !important;gap:10px !important;height:36px !important;padding:0 14px 0 6px !important;border-radius:100px !important;background:#fff !important;border:1.5px solid var(--hb-line) !important;color:#111 !important;text-decoration:none !important;font:700 12px/1 var(--hb-ui) !important;transition:border-color .2s,transform .2s !important}
.hb-clutch:hover{border-color:var(--hb-bleu) !important;transform:translateY(-1px) !important}
.hb-clutch b{display:grid !important;place-items:center !important;height:26px !important;padding:0 9px !important;border-radius:100px !important;background:#111 !important;color:#fff !important;font:700 12px/1 var(--hb-ui) !important}
.hb-clutch i{font-style:normal !important;color:var(--hb-mute) !important;font-weight:600 !important}
.hb-desk{position:relative !important;width:100% !important;max-width:1060px !important;height:clamp(420px,60vh,540px) !important;margin-top:14px !important}
.hb-desk-tools{display:flex !important;gap:8px !important;justify-content:center !important;margin-top:14px !important}
.hb-desk-tools button{height:38px !important;padding:0 16px !important;border-radius:100px !important;border:1.5px solid var(--hb-line) !important;background:#fff !important;font:700 11px/1 var(--hb-ui) !important;letter-spacing:1px !important;text-transform:uppercase !important;color:#111 !important;transition:border-color .2s,color .2s !important}
.hb-desk-tools button:hover{border-color:var(--hb-bleu) !important;color:var(--hb-bleu) !important}
.hb-win{position:absolute !important;width:330px !important;background:#fff !important;border:1.5px solid var(--hb-line) !important;border-radius:14px !important;box-shadow:0 22px 44px -26px rgba(17,17,17,.45) !important;touch-action:none !important;user-select:none !important;transition:box-shadow .25s,transform .6s cubic-bezier(.2,.8,.2,1),left .7s cubic-bezier(.2,.8,.2,1),top .7s cubic-bezier(.2,.8,.2,1) !important}
.hb-win.is-drag{transition:box-shadow .25s !important;box-shadow:0 34px 60px -24px rgba(44,143,250,.5) !important}
.hb-win.is-front{border-color:#cfe3fb !important}
.hb-win-bar{display:flex !important;align-items:center !important;gap:6px !important;height:34px !important;padding:0 12px !important;border-bottom:1px solid #f0f0ea !important}
.hb-win-bar .dot{width:10px !important;height:10px !important}
.hb-win-bar em{margin-left:auto !important;font:700 9px/1 var(--hb-ui) !important;font-style:normal !important;letter-spacing:1.4px !important;text-transform:uppercase !important;color:var(--hb-mute) !important}
.hb-win-bar em.cl{color:#111 !important}
.hb-win-body{padding:16px 18px 18px !important;display:flex !important;flex-direction:column !important;gap:12px !important}
.hb-win-q{font:500 14.5px/1.5 'Open Sans',sans-serif !important;color:#111 !important}
.hb-win-q.big{font:400 27px/1.02 var(--hb-display) !important;letter-spacing:.6px !important}
.hb-win-q.big::before{content:'\201C';color:var(--hb-bleu);margin-right:2px}
.hb-win-q.big::after{content:'\201D';color:var(--hb-bleu);margin-left:2px}
.hb-win-proj{font:600 11px/1.45 var(--hb-ui) !important;color:var(--hb-mute) !important}
.hb-stars{display:flex !important;gap:2px !important;color:#f2b01e !important;align-items:center !important}
.hb-stars small{margin-left:6px !important;font:700 11px/1 var(--hb-ui) !important;color:#111 !important}
.hb-who{display:flex !important;align-items:center !important;gap:10px !important}
.hb-av{width:36px !important;height:36px !important;border-radius:50% !important;display:grid !important;place-items:center !important;background:var(--hb-bleu) !important;color:#fff !important;font:800 12px/1 var(--hb-ui) !important;flex:none !important}
.hb-who b{display:block !important;font:700 13px/1.25 var(--hb-ui) !important;color:#111 !important}
.hb-who small{display:block !important;font:500 11px/1.3 'Open Sans',sans-serif !important;color:var(--hb-mute) !important}

/* ── 7. THE BLEU LAB: a calculator app on the homepage ── */
#lab{background:var(--hb-warm) !important;justify-content:center !important;align-items:center !important;padding:96px 60px 40px !important}
.hb-lab{display:grid !important;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr) !important;gap:56px !important;align-items:center !important;width:100% !important;max-width:1080px !important}
.hb-h2{font:400 clamp(48px,6vw,84px)/.9 var(--hb-display) !important;letter-spacing:2px !important;color:#111 !important}
.hb-h2 span{color:var(--hb-bleu) !important}
.hb-h2 span.hb-badge-new{color:#fff !important}
.hb-h2 span.hb-soon{color:#111 !important}
.hb-lead{font:500 15px/1.6 'Open Sans',sans-serif !important;color:#555 !important;max-width:430px !important;margin-top:14px !important}
.hb-badge-new{display:inline-block !important;vertical-align:top !important;margin-left:8px !important;padding:5px 9px !important;border-radius:100px !important;background:var(--hb-bleu) !important;color:#fff !important;font:700 10px/1 var(--hb-ui) !important;letter-spacing:1.2px !important;text-transform:uppercase !important}
.hb-apps{display:grid !important;grid-template-columns:repeat(4,minmax(0,1fr)) !important;gap:14px !important;margin-top:30px !important;max-width:440px !important}
.hb-app{display:flex !important;flex-direction:column !important;align-items:center !important;gap:8px !important;text-decoration:none !important;color:#111 !important;font:700 10.5px/1.25 var(--hb-ui) !important;text-align:center !important}
.hb-app i{width:62px !important;height:62px !important;border-radius:16px !important;display:grid !important;place-items:center !important;background:#fff !important;border:1.5px solid var(--hb-line) !important;font:400 22px/1 var(--hb-display) !important;font-style:normal !important;color:var(--hb-bleu) !important;letter-spacing:.5px !important;box-shadow:0 10px 20px -14px rgba(17,17,17,.4) !important;transition:transform .35s cubic-bezier(.3,1.6,.5,1),border-color .2s !important}
.hb-app:hover i{transform:translateY(-6px) scale(1.06) !important;border-color:var(--hb-bleu) !important}
.hb-app.is-open i{background:var(--hb-bleu) !important;color:#fff !important;border-color:var(--hb-bleu) !important}
.hb-calc{background:#fff !important;border:2px solid var(--hb-line) !important;border-radius:16px !important;overflow:hidden !important;box-shadow:0 30px 60px -36px rgba(17,17,17,.45) !important}
.hb-calc-bar{display:flex !important;align-items:center !important;gap:8px !important;height:40px !important;padding:0 16px !important;background:#f7f7f2 !important;border-bottom:1px solid var(--hb-line) !important}
.hb-calc-bar span:last-child{margin-left:auto !important;margin-right:auto !important;font:700 11px/1 var(--hb-mono) !important;color:#555 !important}
.hb-calc-body{padding:22px 24px 20px !important;display:flex !important;flex-direction:column !important;gap:14px !important}
.hb-field{display:flex !important;flex-direction:column !important;gap:4px !important}
.hb-field-top{display:flex !important;justify-content:space-between !important;align-items:baseline !important}
.hb-field label{font:700 11px/1 var(--hb-ui) !important;letter-spacing:1.2px !important;text-transform:uppercase !important;color:#555 !important}
.hb-field output{font:400 26px/1 var(--hb-display) !important;letter-spacing:1px !important;color:#111 !important;font-variant-numeric:tabular-nums !important}
.hb-field input[type=range]{-webkit-appearance:none !important;appearance:none !important;width:100% !important;height:30px !important;background:transparent !important}
.hb-field input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:6px;background:linear-gradient(90deg,var(--hb-bleu) var(--p,50%),#ecece4 var(--p,50%))}
.hb-field input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-8px;border-radius:50%;background:#fff;border:3px solid var(--hb-bleu);box-shadow:0 4px 10px rgba(44,143,250,.35)}
.hb-field input[type=range]::-moz-range-track{height:6px;border-radius:6px;background:#ecece4}
.hb-field input[type=range]::-moz-range-progress{height:6px;border-radius:6px;background:var(--hb-bleu)}
.hb-field input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid var(--hb-bleu)}
.hb-field input[type=range]:focus-visible{outline:2px solid var(--hb-bleu2) !important;outline-offset:2px !important;border-radius:6px !important}
.hb-calc-out{display:grid !important;grid-template-columns:auto 1fr !important;gap:18px !important;align-items:center !important;padding:16px 18px !important;border-radius:12px !important;background:var(--hb-night) !important;color:#fff !important}
.hb-lights{display:flex !important;flex-direction:column !important;gap:7px !important;padding:8px !important;border-radius:12px !important;background:#0d0d1d !important}
.hb-lights i{width:14px !important;height:14px !important;border-radius:50% !important;background:#2c2c44 !important;transition:background .3s,box-shadow .3s !important}
.hb-lights.is-red i:nth-child(1){background:var(--hb-red) !important;box-shadow:0 0 12px var(--hb-red) !important}
.hb-lights.is-yel i:nth-child(2){background:var(--hb-yel) !important;box-shadow:0 0 12px var(--hb-yel) !important}
.hb-lights.is-grn i:nth-child(3){background:var(--hb-grn) !important;box-shadow:0 0 12px var(--hb-grn) !important}
.hb-roas{font:400 54px/1 var(--hb-display) !important;letter-spacing:1px !important;color:#fff !important;font-variant-numeric:tabular-nums !important}
.hb-roas small{font:700 11px/1 var(--hb-ui) !important;letter-spacing:1.2px !important;text-transform:uppercase !important;color:#9fa0c0 !important;margin-left:8px !important}
.hb-verdict{font:600 12.5px/1.45 var(--hb-ui) !important;color:#d9d9ea !important;margin-top:4px !important}
.hb-calc-foot{display:flex !important;justify-content:space-between !important;gap:10px !important;flex-wrap:wrap !important;font:500 11px/1.4 var(--hb-mono) !important;color:var(--hb-mute) !important}
.hb-calc-foot a{color:var(--hb-bleu) !important;font:700 12px/1 var(--hb-ui) !important;text-decoration:none !important}

/* ── 8. BLEU OS: an installer that never quite finishes ── */
#bleuos{background:var(--hb-night) !important;justify-content:center !important;align-items:center !important;padding:96px 60px 40px !important;color:#fff !important}
.hb-os{display:grid !important;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr) !important;gap:56px !important;align-items:center !important;width:100% !important;max-width:1080px !important}
#bleuos .hb-h2{color:#fff !important}
#bleuos .hb-lead{color:#b9b9d2 !important}
.hb-soon{display:inline-block !important;vertical-align:top !important;margin-left:8px !important;padding:5px 9px !important;border-radius:100px !important;background:#fff !important;color:#111 !important;font:700 10px/1 var(--hb-ui) !important;letter-spacing:1.2px !important;text-transform:uppercase !important}
.hb-inst{background:#0d0d1d !important;border:1px solid #2c2c48 !important;border-radius:14px !important;overflow:hidden !important;box-shadow:0 40px 80px -40px rgba(0,0,0,.8) !important}
.hb-inst-bar{display:flex !important;align-items:center !important;gap:8px !important;height:38px !important;padding:0 16px !important;background:var(--hb-night2) !important}
.hb-inst-bar span:last-child{margin-left:8px !important;font:400 11px/1 var(--hb-mono) !important;color:#8d8db0 !important}
.hb-inst-body{padding:20px 22px 22px !important;font:400 13.5px/1.8 var(--hb-mono) !important;color:#d8d8ea !important;min-height:262px !important;display:flex !important;flex-direction:column !important;justify-content:flex-end !important}
.hb-inst-body p{white-space:pre !important;overflow:hidden !important;text-overflow:ellipsis !important}
.hb-inst-body .ok{color:var(--hb-grn) !important}
.hb-inst-body .bl{color:var(--hb-bleu) !important}
.hb-inst-body .dim{color:#7a7a9a !important}
.hb-bar{height:10px !important;border-radius:10px !important;background:#22223a !important;overflow:hidden !important;margin-top:10px !important}
.hb-bar i{display:block !important;height:100% !important;width:0;background:repeating-linear-gradient(-45deg,var(--hb-bleu) 0 10px,#5aa9ff 10px 20px) !important;background-size:28px 28px !important;animation:hbStripes .8s linear infinite !important;transition:width .6s ease !important}
@keyframes hbStripes{to{background-position:28px 0}}
.hb-bar-l{display:flex !important;justify-content:space-between !important;margin-top:6px !important;font:700 10px/1 var(--hb-ui) !important;letter-spacing:1.2px !important;text-transform:uppercase !important;color:#8d8db0 !important}
.hb-steps{display:flex !important;flex-wrap:wrap !important;gap:8px !important;margin-top:22px !important}
.hb-steps span{display:inline-flex !important;align-items:center !important;gap:8px !important;height:34px !important;padding:0 14px !important;border-radius:100px !important;border:1px solid #33335a !important;font:700 11px/1 var(--hb-ui) !important;letter-spacing:.8px !important;text-transform:uppercase !important;color:#b9b9d2 !important;transition:all .4s !important}
.hb-steps span.is-on{border-color:var(--hb-bleu) !important;color:#fff !important;background:rgba(44,143,250,.16) !important}
.hb-steps b{font:400 16px/1 var(--hb-display) !important;color:var(--hb-bleu) !important}
.hb-os-cta{display:flex !important;align-items:center !important;gap:16px !important;flex-wrap:wrap !important;margin-top:28px !important}
.hb-os-cta .btn-primary{padding:14px 30px !important}
.hb-os-cta small{font:600 12px/1.4 var(--hb-ui) !important;color:#8d8db0 !important}

/* ── 9. SPOTLIGHT (⌘K) ── */
.hb-spot{position:fixed !important;inset:0 !important;z-index:99990 !important;display:flex !important;justify-content:center !important;align-items:flex-start !important;padding:14vh 16px 16px !important;background:rgba(17,17,17,.28) !important;backdrop-filter:blur(3px) !important;-webkit-backdrop-filter:blur(3px) !important}
.hb-spot[hidden]{display:none !important}
.hb-spot-box{width:100% !important;max-width:620px !important;border-radius:18px !important;background:rgba(255,254,247,.97) !important;border:1px solid rgba(0,0,0,.08) !important;box-shadow:0 40px 90px -30px rgba(17,17,17,.55) !important;overflow:hidden !important;animation:hbSpotIn .28s cubic-bezier(.2,.8,.2,1) !important}
@keyframes hbSpotIn{from{opacity:0;transform:translateY(-10px) scale(.98)}}
.hb-spot-in{display:flex !important;align-items:center !important;gap:12px !important;padding:0 18px !important;border-bottom:1px solid var(--hb-line) !important;color:var(--hb-bleu) !important}
.hb-spot-in input{flex:1 !important;min-width:0 !important;height:62px !important;border:0 !important;outline:0 !important;background:transparent !important;font:600 19px/1 var(--hb-ui) !important;color:#111 !important}
.hb-spot-in kbd{font:700 10px/1 var(--hb-ui) !important;padding:5px 7px !important;border-radius:6px !important;background:#efefe7 !important;color:#555 !important}
.hb-spot-list{max-height:52vh !important;overflow:auto !important;padding:8px !important}
.hb-spot-g{font:800 10px/1 var(--hb-ui) !important;letter-spacing:2px !important;text-transform:uppercase !important;color:var(--hb-mute) !important;padding:12px 12px 6px !important}
.hb-spot-it{display:flex !important;align-items:center !important;gap:12px !important;min-height:44px !important;padding:0 12px !important;border-radius:10px !important;color:#111 !important;text-decoration:none !important;font:600 14px/1.2 var(--hb-ui) !important}
.hb-spot-it svg{flex:none !important}
.hb-spot-it.is-sel{background:var(--hb-bleu) !important;color:#fff !important}
.hb-spot-it small{margin-left:auto !important;font:600 11px/1 var(--hb-ui) !important;opacity:.6 !important}
.hb-spot-none{padding:20px 14px !important;font:500 14px/1.5 'Open Sans',sans-serif !important;color:#555 !important}

/* ── Phones / small screens ── */
@media (max-width: 1100px){
  .hb-dock{display:none !important}
  .hb-spot-btn{display:none !important}
}
@media (max-width: 900px){
  .hb-lab,.hb-os{grid-template-columns:minmax(0,1fr) !important;gap:32px !important}
  .hb-desk{height:auto !important;display:flex !important;gap:14px !important;overflow-x:auto !important;scroll-snap-type:x mandatory !important;padding:6px 2px 18px !important;-webkit-overflow-scrolling:touch !important}
  .hb-win{position:relative !important;left:auto !important;top:auto !important;transform:none !important;flex:0 0 min(300px,82vw) !important;scroll-snap-align:center !important;touch-action:auto !important}
  .hb-desk-tools{display:none !important}
}
@media (max-width: 768px), (pointer: coarse) and (max-height: 520px){
  #testimonials,#lab,#bleuos{padding:80px 20px 60px !important}
  .hb-spot-btn{display:none !important}
  .hb-apps{grid-template-columns:repeat(4,minmax(0,1fr)) !important;gap:8px !important}
  .hb-app i{width:54px !important;height:54px !important}
  .hb-inst-body{font-size:12px !important;min-height:220px !important;padding:16px !important}
  .hb-calc-body{padding:18px 16px !important}
  .hb-roas{font-size:44px !important}
  .hb-notes-btn{left:12px !important;bottom:12px !important}
}
@media (prefers-reduced-motion: reduce){
  .nav-logo img.hb-dot,.hbf img.hb-dot,.hb-bar i,.hb-rot-caret{animation:none !important}
  .hb-win,.terminal{transition:none !important}
}

/* ═══════════════════════════════════════════════════════════
   DESKTOP SCENE — hero + Who
   Each scene has a fixed design size; desk.js measures the free
   space around the page content and scales the scene into it,
   so it never overlaps the terminal, buttons, marquee or nav.
═══════════════════════════════════════════════════════════ */
#hero > .terminal,#hero > .hero-reveal{position:relative !important;z-index:2 !important}
#who .who-statement{position:relative !important;z-index:2 !important}
.hbd{position:absolute !important;inset:0 !important;pointer-events:none !important;z-index:1 !important}
.hbd-scene{position:absolute !important;left:0;top:0;transform-origin:0 0 !important;visibility:hidden;opacity:0;transition:opacity .6s ease .2s !important}
.hbd-scene.is-fit{visibility:visible;opacity:1}
.hbd-l{width:300px !important;height:480px !important}
.hbd-r{width:310px !important;height:440px !important}
.hbd-notes{width:260px !important;height:470px !important;display:flex !important;flex-direction:column !important}
body.hbd-compact-hero #hero .hbd,body.hbd-compact-who #who .hbd{display:none !important}

/* icons, file, trash */
.hbi-icon,.hbi-file,.hbi-trash,.hbd-mfile{position:absolute !important;display:flex !important;flex-direction:column !important;align-items:center !important;gap:6px !important;width:96px !important}
.hbi-icon svg,.hbi-file svg,.hbd-mfile svg{width:58px !important;height:auto !important;filter:drop-shadow(0 8px 10px rgba(17,17,17,.12))}
.hbi-icon span,.hbi-file span,.hbi-trash span,.hbd-mfile span{font:700 10.5px/1.25 'Montserrat',sans-serif !important;color:#111 !important;text-align:center !important;padding:2px 6px !important;border-radius:5px !important;word-break:break-word !important}
.hbi-icon.f1{left:0;top:0}.hbi-icon.f2{left:100px;top:10px}.hbi-icon.f3{left:200px;top:0}
.hbi-icon{animation:hbiBob 6s ease-in-out infinite}
.hbi-icon.f2,.hbi-icon.m2{animation-delay:-2s}.hbi-icon.f3{animation-delay:-4s}
@keyframes hbiBob{50%{transform:translateY(-6px)}}
.hbi-file{left:30px;top:150px;animation:hbiFile 9s cubic-bezier(.45,0,.3,1) infinite}
.hbi-file span,.hbd-mfile span{animation:hbiSel 9s infinite}
@keyframes hbiSel{0%,16%{background:transparent;color:#111}20%,52%{background:#2c8ffa;color:#fff}56%,100%{background:transparent;color:#111}}
@keyframes hbiFile{0%,18%{transform:translate(0,0);opacity:1}50%{transform:translate(12px,196px) rotate(-6deg);opacity:1}58%{transform:translate(14px,232px) scale(.15);opacity:0}86%{transform:translate(0,0) scale(.6);opacity:0}96%,100%{transform:translate(0,0) scale(1);opacity:1}}
.hbi-trash{left:40px;top:360px}
.hbi-lid{width:56px;height:8px;border-radius:4px 4px 2px 2px;background:#8f8f86;transform-origin:0% 100%;animation:hbiLid 9s infinite}
.hbi-lid::before{content:'';display:block;width:16px;height:5px;margin:-5px auto 0 !important;border-radius:4px 4px 0 0;background:#8f8f86}
.hbi-bin{width:48px;height:58px;border-radius:2px 2px 10px 10px;background:repeating-linear-gradient(90deg,#c9c9bf 0 7px,#b6b6ab 7px 9px);box-shadow:0 10px 16px -10px rgba(17,17,17,.35);animation:hbiBin 9s infinite}
@keyframes hbiLid{0%,42%{transform:none}48%,60%{transform:rotate(-24deg)}68%,100%{transform:none}}
@keyframes hbiBin{0%,58%{transform:none}62%{transform:scale(1.08,.9)}67%{transform:scale(.97,1.03)}72%,100%{transform:none}}
.hbi-ghost{position:absolute !important;left:78px;top:196px;width:26px !important;animation:hbiGhost 9s cubic-bezier(.45,0,.3,1) infinite}
.hbi-ghost svg,.hbd-mghost svg{width:26px !important;height:26px !important;image-rendering:pixelated !important;filter:drop-shadow(0 3px 3px rgba(17,17,17,.25))}
@keyframes hbiGhost{0%{transform:translate(190px,-90px);opacity:0}6%{opacity:1}18%{transform:translate(0,0)}50%{transform:translate(12px,196px)}58%{transform:translate(14px,206px)}76%{transform:translate(170px,110px);opacity:1}86%,100%{transform:translate(190px,-90px);opacity:0}}

/* fanned work cards + sticky note */
.hbi-fan{position:relative !important;height:236px !important}
.hbi-card{position:absolute !important;left:50%;top:22px;width:132px !important;margin-left:-66px !important;background:#fff !important;border:1.5px solid #e8e8e0 !important;border-radius:12px !important;padding:6px !important;box-shadow:0 18px 30px -20px rgba(17,17,17,.45) !important;transform-origin:50% 120%}
.hbi-card .ph{height:88px !important;border-radius:8px !important;display:grid !important;place-items:center !important;overflow:hidden !important}
.hbi-card img{max-width:80% !important;max-height:70% !important;object-fit:contain !important}
.hbi-card b{display:block !important;text-align:center !important;font:700 10.5px/1 'Montserrat',sans-serif !important;color:#111 !important;padding:8px 0 3px !important}
.hbi-card.c1{animation:hbiFan1 7s cubic-bezier(.3,.9,.3,1) infinite}
.hbi-card.c2{animation:hbiFan2 7s cubic-bezier(.3,.9,.3,1) infinite;z-index:2}
.hbi-card.c3{animation:hbiFan3 7s cubic-bezier(.3,.9,.3,1) infinite}
@keyframes hbiFan1{0%,12%,92%,100%{transform:rotate(-3deg)}30%,76%{transform:translate(-76px,16px) rotate(-14deg)}}
@keyframes hbiFan2{0%,12%,92%,100%{transform:rotate(1deg)}30%,76%{transform:translateY(-16px) rotate(0)}}
@keyframes hbiFan3{0%,12%,92%,100%{transform:rotate(4deg)}30%,76%{transform:translate(76px,16px) rotate(14deg)}}
.hbi-sticky{position:relative !important;width:210px !important;margin:34px auto 0 !important;padding:22px 18px 18px !important;background:#ffe98a !important;font:600 23px/1.15 'Caveat','Comic Sans MS',cursive !important;color:#2a2410 !important;text-align:left !important;box-shadow:0 18px 26px -18px rgba(17,17,17,.45) !important;transform:rotate(3deg);animation:hbiSway 6s ease-in-out infinite}
.hbi-sticky i,.hbi-note i{position:absolute;top:8px;left:50%;width:12px;height:12px;margin-left:-6px !important;border-radius:50%;background:#2c8ffa;box-shadow:0 2px 3px rgba(0,0,0,.25)}
@keyframes hbiSway{0%,100%{transform:rotate(3deg)}50%{transform:rotate(1deg) translateY(-4px)}}

/* sticky notes (Who) */
.hbi-note{position:relative !important;width:220px !important;padding:28px 20px 22px !important;box-shadow:0 20px 30px -20px rgba(17,17,17,.45) !important;font-family:'Caveat','Comic Sans MS',cursive !important;text-align:left !important}
.hbi-note.y{align-self:flex-start !important;background:#ffe98a !important;color:#2a2410 !important;transform:rotate(-4deg);animation:hbiSwayL 7s ease-in-out infinite}
.hbi-note.b{align-self:flex-end !important;margin-top:-26px !important;background:#2c8ffa !important;color:#fff !important;text-align:center !important;transform:rotate(4deg);animation:hbiSwayR 7s ease-in-out infinite}
.hbi-note.b i{background:#fffef7}
@keyframes hbiSwayL{0%,100%{transform:rotate(-4deg)}50%{transform:translateY(-6px) rotate(-2.5deg)}}
@keyframes hbiSwayR{0%,100%{transform:rotate(4deg)}50%{transform:translateY(-6px) rotate(2.5deg)}}
.hbi-note-h{font:700 26px/1 'Caveat',cursive !important;margin-bottom:10px !important}
.hbi-x{position:relative !important;display:table !important;font:600 23px/1.25 'Caveat',cursive !important;animation:hbiNoop 9s infinite}
.hbi-x::after{content:'';position:absolute;left:-3px;top:55%;height:3px;width:0;border-radius:3px;background:#2c8ffa;animation:hbiStrike 9s infinite;animation-delay:inherit}
.hbi-x:nth-of-type(2){animation-delay:0s}.hbi-x:nth-of-type(3){animation-delay:.7s}.hbi-x:nth-of-type(4){animation-delay:1.4s}.hbi-x:nth-of-type(5){animation-delay:2.1s}.hbi-x:nth-of-type(6){animation-delay:2.8s}
@keyframes hbiNoop{to{opacity:1}}
@keyframes hbiStrike{0%,6%{width:0}14%,84%{width:calc(100% + 6px)}92%,100%{width:0}}
.hbi-you{font:400 66px/.9 'Bebas Neue',sans-serif !important;letter-spacing:2px !important;margin:2px 0 6px !important}
.hbi-note-tr svg{width:52px !important;height:52px !important;image-rendering:pixelated !important;animation:hbiBob 3s ease-in-out infinite}

/* ── compact (phones, tablets, and any screen too narrow for the sides) ── */
.hbd-m{display:none !important}
body.hbd-compact-hero .hbd-m-hero{display:block !important}
body.hbd-compact-who .hbd-m-who{display:flex !important}
.hbd-m-hero{width:100% !important;margin:6px 0 4px !important;overflow:visible !important}
.hbd-strip{position:relative !important;width:300px !important;height:150px !important;margin:0 auto !important;transform-origin:50% 0 !important}
.hbi-icon.m1,.hbi-icon.m2{width:64px !important}
.hbi-icon.m1 svg,.hbi-icon.m2 svg{width:40px !important}
.hbi-icon.m1{left:86px;top:0}.hbi-icon.m2{left:150px;top:6px}
.hbd-mfile{left:0;top:62px;animation:hbdMFile 9s cubic-bezier(.45,0,.3,1) infinite}
.hbd-mfile svg{width:46px !important}
.hbd-mtrash{left:204px !important;top:60px !important}
.hbd-mghost{position:absolute !important;left:58px;top:100px;width:26px !important;animation:hbdMGhost 9s cubic-bezier(.45,0,.3,1) infinite}
@keyframes hbdMFile{0%,18%{transform:translate(0,0);opacity:1}34%{transform:translate(104px,-26px) rotate(-5deg)}50%{transform:translate(206px,-2px) rotate(-8deg);opacity:1}58%{transform:translate(206px,24px) scale(.15);opacity:0}86%{transform:translate(0,0) scale(.6);opacity:0}96%,100%{transform:translate(0,0) scale(1);opacity:1}}
@keyframes hbdMGhost{0%{transform:translate(150px,30px);opacity:0}6%{opacity:1}18%{transform:translate(0,0)}34%{transform:translate(104px,-26px)}50%{transform:translate(206px,-2px)}58%{transform:translate(208px,8px)}76%{transform:translate(110px,20px);opacity:1}86%,100%{transform:translate(150px,30px);opacity:0}}
.hbd-m-who{gap:14px !important;justify-content:flex-start !important;align-items:flex-start !important;margin-top:34px !important;padding:0 4px !important}
.hbd-m-who .hbi-note{width:calc(50% - 7px) !important;max-width:210px !important;padding:24px 14px 16px !important;margin:0 !important}
.hbd-m-who .hbi-note.b{margin-top:22px !important}
.hbd-m-who .hbi-note-h{font-size:21px !important}
.hbd-m-who .hbi-x{font-size:19px !important}
.hbd-m-who .hbi-you{font-size:50px !important}
.hbd-m-who .hbi-note-tr svg{width:40px !important;height:40px !important}

@media (prefers-reduced-motion: reduce){ .hbd *,.hbd-m *{animation:none !important} }