/* ============================================================================ BizBlocks marketing design system, v3 "Assembled" Concept: the product is named after blocks, so the page is built from them. Ink navy ground, BizBlocks blue signal, cyan pulse for live states. Display: Bricolage Grotesque. Body: Instrument Sans. Data: JetBrains Mono. Scoped under .bbx so it never collides with the framework's Bootstrap. Docs pages reuse: bb-badge, bb-doc-*, bb-callout, bb-card, bb-grid, orbs. ========================================================================== */ :root { /* Ground */ --bb-bg: #04060c; --bb-bg-2: #090d1a; --bb-bg-3: #0b101f; --bb-surface: rgba(146, 170, 255, .045); --bb-surface-2: rgba(146, 170, 255, .08); --bb-border: rgba(146, 170, 255, .11); --bb-border-2: rgba(146, 170, 255, .2); /* Text */ --bb-text: #e9eeff; --bb-text-2: rgba(214, 224, 255, .72); --bb-text-3: rgba(214, 224, 255, .45); /* Signal (themeable by Brand Studio) */ --bb-accent-1: #4f8cff; --bb-accent-2: #22d3ee; --bb-accent-rgb: 79, 140, 255; --bb-grad: linear-gradient(135deg, var(--bb-accent-1) 0%, var(--bb-accent-2) 100%); --bb-grad-soft: linear-gradient(135deg, rgba(var(--bb-accent-rgb), .16), rgba(34, 211, 238, .09)); /* Gradient family (docs card icons reference these) */ --bb-g1: linear-gradient(135deg, #4f8cff, #22d3ee); --bb-g2: linear-gradient(135deg, #3b82f6, #06b6d4); --bb-g3: linear-gradient(135deg, #6366f1, #38bdf8); --bb-g4: linear-gradient(135deg, #2563eb, #60a5fa); --bb-g5: linear-gradient(135deg, #0ea5e9, #67e8f9); --bb-g6: linear-gradient(135deg, #4338ca, #3b82f6); /* Rhythm */ --bb-xs: .5rem; --bb-sm: 1rem; --bb-md: 1.5rem; --bb-lg: 2rem; --bb-xl: 3rem; --bb-2xl: 4.5rem; --bb-3xl: 6.5rem; --bb-r-sm: 10px; --bb-r-md: 14px; --bb-r-lg: 20px; --bb-r-xl: 26px; --bb-r-full: 999px; --bb-shadow-md: 0 10px 34px rgba(2, 4, 12, .45); --bb-shadow-lg: 0 26px 70px rgba(2, 4, 12, .6); --bb-glow: 0 0 44px rgba(var(--bb-accent-rgb), .35); --bb-font: 'Instrument Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --bb-font-display: 'Bricolage Grotesque', 'Instrument Sans', -apple-system, sans-serif; --bb-font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace; --bb-container: 1200px; } /* Full-page canvas (this stylesheet only loads on marketing pages) */ body { background: var(--bb-bg) !important; color: var(--bb-text); font-family: var(--bb-font); -webkit-font-smoothing: antialiased; overflow-x: hidden; } #divBody { background: var(--bb-bg); } /* --------------------------------------------------------------------- Framework CSS neutralizer. BizBlocks core's content.css ships a brutal `* { font-size: 14px }` universal rule. It sets to 14px (so every rem in this file would compute against 14px, not 16px) AND overrides inherited sizing on any bare inline/block element (headline spans, the logo wordmark, terminal text), which is what made the hero headline render tiny and jammed. This did not show in local previews because they never loaded content.css. Fix: pin the root to 16px, and neutralize the universal rule for our own subtree with a zero-specificity :where() fallback so every real rule in this file still wins. Loads after content.css, so it beats `*` on order. --------------------------------------------------------------------- */ html { font-size: 16px; } :where(.bbx, .bbx *) { font-size: inherit; } /* Google's reCAPTCHA badge is fixed and sits deliberately part-way off screen, which expands the html scroll width and lets the whole page slide sideways on a phone. body already hides overflow-x; html needs it too. */ html { overflow-x: hidden; } /* Brand scrollbar. Chrome/Edge/Safari take the gradient thumb; Firefox has no gradient support for scrollbars, so it gets the accent colour as a solid fallback. */ ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-track { background: #070a12; } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--bb-accent-1), var(--bb-accent-2)); border-radius: 8px; border: 3px solid #070a12; } ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--bb-accent-2), var(--bb-accent-1)); } ::-webkit-scrollbar-corner { background: #070a12; } html { scrollbar-width: thin; scrollbar-color: var(--bb-accent-1) #070a12; } .bbx, .bbx * { box-sizing: border-box; } .bbx { font-family: var(--bb-font); color: var(--bb-text); line-height: 1.6; font-size: 16.5px; position: relative; } .bbx img { max-width: 100%; height: auto; display: block; } .bbx a { color: inherit; text-decoration: none; transition: color .25s ease, opacity .25s ease; } .bbx ::selection { background: rgba(var(--bb-accent-rgb), .35); color: #fff; } /* Film grain: keeps large dark fields from reading flat */ .bb-noise { position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: .05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); } .bb-container { max-width: var(--bb-container); margin: 0 auto; padding: 0 var(--bb-lg); position: relative; z-index: 1; } .bbx section { position: relative; } .bb-section { padding: var(--bb-3xl) 0; } /* ===================================================================== TYPE ===================================================================== */ .bbx h1, .bbx h2, .bbx h3, .bbx h4 { font-family: var(--bb-font-display); font-weight: 700; line-height: 1.04; letter-spacing: -.028em; color: var(--bb-text); margin: 0; text-wrap: balance; } .bbx h1 { font-size: clamp(2.7rem, 5vw, 4.35rem); font-weight: 800; } .bbx h2 { font-size: clamp(2rem, 3.6vw, 3rem); } .bbx h3 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); letter-spacing: -.015em; line-height: 1.15; } .bbx h4 { font-size: 1.1rem; letter-spacing: -.01em; line-height: 1.25; } .bbx p { margin: 0; } .bb-gradient-text { background: var(--bb-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* Left-anchored section header: kicker + rule, headline, optional sub */ .bb-sechead { margin-bottom: var(--bb-2xl); max-width: 780px; } .bb-sechead.bb-center { margin-left: auto; margin-right: auto; text-align: center; } .bb-kicker { display: flex; align-items: center; gap: .9rem; font-family: var(--bb-font-mono); font-size: .85rem; font-weight: 600; text-transform: uppercase; letter-spacing: .24em; color: var(--bb-accent-2); margin-bottom: 1.15rem; } .bb-kicker::after { content: ''; flex: 0 0 46px; height: 1px; background: linear-gradient(90deg, rgba(var(--bb-accent-rgb), .7), transparent); } .bb-center .bb-kicker { justify-content: center; } .bb-center .bb-kicker::before { content: ''; flex: 0 0 46px; height: 1px; background: linear-gradient(270deg, rgba(var(--bb-accent-rgb), .7), transparent); } .bb-sechead .bb-sub { margin-top: var(--bb-md); font-size: 1.12rem; color: var(--bb-text-2); line-height: 1.7; max-width: 640px; } .bb-sechead:has(.bb-sub-wide) { max-width: none; } .bb-sechead .bb-sub-wide { font-size: 1.3rem; max-width: none; white-space: nowrap; margin-top: .55rem; } @media (max-width: 980px) { .bb-sechead .bb-sub-wide { font-size: 1.08rem; white-space: normal; } } .bb-center .bb-sub { margin-left: auto; margin-right: auto; } /* Pill badge (docs hero + hero badge) */ .bb-badge { display: inline-flex; align-items: center; gap: .55rem; padding: .48rem 1.05rem; background: rgba(var(--bb-accent-rgb), .1); color: var(--bb-accent-1); border: 1px solid rgba(var(--bb-accent-rgb), .3); border-radius: var(--bb-r-full); font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; margin-bottom: var(--bb-md); } .bb-section-desc { font-size: 1.12rem; color: var(--bb-text-2); max-width: 660px; margin: var(--bb-md) auto 0; line-height: 1.7; } .bb-section-head { text-align: center; max-width: 780px; margin: 0 auto var(--bb-2xl); } /* ===================================================================== BUTTONS ===================================================================== */ .bb-btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; padding: .62rem 1.55rem; font-family: var(--bb-font); font-weight: 650; font-size: 15.5px; line-height: 1; border-radius: 12px; border: 0; cursor: pointer; white-space: nowrap; transition: transform .2s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease; } /* .bbx a { color: inherit } outranks a single class, so button ink needs .bbx too, otherwise the primary button renders near-white on the bright gradient (~2.5:1). */ .bbx .bb-btn-primary, .bb-btn-primary { background: var(--bb-grad); color: #ffffff; text-shadow: 0 1px 10px rgba(3, 18, 66, .75), 0 0 22px rgba(6, 30, 96, .6); box-shadow: var(--bb-glow); font-weight: 750; letter-spacing: -.005em; } .bbx .bb-btn-primary:hover, .bb-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 0 58px rgba(var(--bb-accent-rgb), .55); color: #ffffff; } .bbx .bb-btn-secondary, .bb-btn-secondary { background: var(--bb-surface-2); color: var(--bb-text); border: 1px solid rgba(146, 170, 255, .28); backdrop-filter: blur(8px); font-weight: 650; } .bbx .bb-btn-secondary:hover, .bb-btn-secondary:hover { transform: translateY(-2px); background: rgba(146, 170, 255, .13); border-color: rgba(var(--bb-accent-rgb), .55); } .bbx .bb-btn:focus-visible { outline: 2px solid var(--bb-accent-2); outline-offset: 3px; } .bb-btn-lg { padding: .95rem 1.15rem; font-size: 17px; } .bb-btn-block { width: 100%; } /* ===================================================================== NAV ===================================================================== */ .bb-nav { position: fixed; inset: 0 0 auto 0; z-index: 900; padding: 1rem 0; background: rgba(4, 6, 12, .7); backdrop-filter: blur(18px) saturate(1.25); border-bottom: 1px solid transparent; transition: background .3s ease, border-color .3s ease, padding .3s ease; } .bb-nav::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent 6%, rgba(var(--bb-accent-rgb), .35) 50%, transparent 94%); opacity: 0; transition: opacity .3s ease; } .bb-nav.bb-scrolled { padding: .68rem 0; background: rgba(4, 6, 12, .9); border-bottom-color: var(--bb-border); } .bb-nav.bb-scrolled::after { opacity: 1; } .bb-nav-wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--bb-lg); } .bb-logo { display: flex; align-items: center; gap: .6rem; font-family: var(--bb-font-display); font-weight: 700; font-size: 1.32rem; letter-spacing: -.03em; color: var(--bb-text); } .bbx .bb-logo-img { height: 34px; width: 34px; display: block; border-radius: 8px; flex: 0 0 auto; object-fit: contain; } .bb-footer .bb-logo-img { height: 30px; width: 30px; } .bbx .bb-logo-lockup { height: 52px; width: auto; display: block; flex: 0 0 auto; } .bb-footer .bb-logo-lockup { height: 46px; } #bb-studio-app { display: none !important; } /* Login modal: project styling over the framework #ModalLogin dialog. */ #ModalLogin .modal-dialog { margin-top: 8.5rem; } #ModalLogin .modal-content { border-radius: var(--bb-r-lg); border: 1px solid var(--bb-border-2); box-shadow: var(--bb-shadow-lg), 0 0 80px rgba(var(--bb-accent-rgb), .16); } #ModalLogin .modal-header { border-bottom: 0; padding-bottom: .2rem; } #ModalLogin .bb-login-brand { display: flex; flex-direction: column; align-items: center; gap: .6rem; padding: .1rem 0 1.15rem; text-align: center; } #ModalLogin .bb-login-brand img { height: 56px; width: auto; } #ModalLogin .bb-login-brand span { color: var(--bb-text-3); font-size: .95rem; line-height: 1.5; } /* The framework's login fields and submit button sit flush against each other. */ #ModalLogin #loginEmail, #ModalLogin #loginPassword { margin-bottom: .85rem; } #ModalLogin input[type="submit"] { margin-top: .6rem; } /* Google allows hiding the floating badge only if the attribution text is shown instead; that line lives under the demo form. */ .grecaptcha-badge { visibility: hidden; } .bb-recaptcha-note { margin-top: var(--bb-sm); font-size: .82rem; color: var(--bb-text-3); line-height: 1.5; } .bb-recaptcha-note a { color: var(--bb-text-2); text-decoration: underline; } /* The close button is a Font Awesome glyph, but this layout does not load Font Awesome, so it rendered as an empty 23x13 target. Draw the X in CSS and give it a real hit area. */ #ModalLogin .modal-header .btn { width: 40px; height: 40px; padding: 0; border-radius: 50%; font-size: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--bb-text-2); background: transparent; border: 1px solid var(--bb-border-2); } #ModalLogin .modal-header .btn i { display: none; } #ModalLogin .modal-header .btn::after { content: "\00d7"; font-size: 26px; line-height: 1; font-weight: 400; } #ModalLogin .modal-header .btn:hover { color: #fff; background: rgba(var(--bb-accent-rgb), .18); border-color: rgba(var(--bb-accent-rgb), .5); } @media (max-width: 700px) { #ModalLogin .modal-dialog { margin-top: 4.5rem; } } .bb-logo .bb-logo-text { color: var(--bb-text); } /* Menu sits with the CTA on the right, not centered in the bar. */ .bb-nav-menu { display: flex; align-items: center; gap: 1.55rem; list-style: none; margin: 0 0 0 auto; padding: 0; } /* Anchor targets clear the sticky nav when jumped to from the menu. */ #bbHome section[id] { scroll-margin-top: 92px; } /* "What is BizBlocks": tighter around the three cards than the default section rhythm. */ #bbHome #what { padding-bottom: var(--bb-2xl); } #bbHome #what .bb-sechead { margin-bottom: var(--bb-lg); } #bbHome #platform .bb-sechead { margin-bottom: var(--bb-lg); } #bbHome #proof .bb-sechead { margin-bottom: var(--bb-lg); } #bbHome #tech .bb-sechead { margin-bottom: var(--bb-lg); } #bbHome #contact .bb-sechead { margin-bottom: var(--bb-lg); } /* Contact form: narrower card and a shorter message box. */ #bbHome #contact .bb-form-card { max-width: 780px; margin: 0 auto; padding: var(--bb-xl); } #bbHome #contact textarea.bb-input { min-height: 104px; } .bb-recaptcha-box { margin-bottom: var(--bb-sm); } /* ---- Demo wizard ---- */ .bb-wizard { max-width: 720px; margin: 0 auto; text-align: left; } .bb-wiz-head { margin-bottom: var(--bb-xl); } .bb-wiz-steps { display: flex; align-items: center; gap: .7rem; margin-bottom: .9rem; } .bb-wiz-dot { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--bb-font-mono); font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--bb-text-3); transition: color .3s ease; } .bb-wiz-dot i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-style: normal; font-size: .8rem; font-weight: 700; background: rgba(146, 170, 255, .1); border: 1px solid var(--bb-border-2); color: var(--bb-text-3); transition: background .3s ease, color .3s ease, border-color .3s ease; } .bb-wiz-dot.bb-on { color: var(--bb-text); } .bb-wiz-dot.bb-on i { background: var(--bb-grad); border-color: transparent; color: #04070f; } .bb-wiz-line { flex: 1; height: 1px; background: var(--bb-border-2); } .bb-wiz-bar { height: 3px; border-radius: 3px; background: rgba(146, 170, 255, .12); overflow: hidden; } .bb-wiz-bar span { display: block; height: 100%; width: 33%; background: var(--bb-grad); border-radius: 3px; transition: width .35s ease; } .bb-wiz-step { display: none; } .bb-wiz-step.bb-on { display: block; animation: bb-wiz-in .35s ease both; } @keyframes bb-wiz-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .bb-wiz-q { font-size: 1.5rem; margin-bottom: .35rem; letter-spacing: -.02em; } .bb-wiz-help { color: var(--bb-text-3); font-size: 1rem; line-height: 1.6; margin-bottom: var(--bb-lg); } .bb-wiz-fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--bb-md); } .bb-wiz-field { display: flex; flex-direction: column; gap: .45rem; } .bb-wiz-field.bb-wiz-wide { grid-column: 1 / -1; } .bb-wiz-field > span { font-size: .95rem; font-weight: 600; color: var(--bb-text-2); } .bb-wiz-field > span i { font-style: normal; font-weight: 400; color: var(--bb-text-3); } .bb-wiz-preview { font-family: var(--bb-font-mono); font-size: .8rem; color: var(--bb-text-3); font-style: normal; } .bb-wiz-preview b { color: var(--bb-accent-2); } .bb-wiz-nav { display: flex; gap: .6rem; margin-top: var(--bb-xl); } .bb-wiz-nav .bb-btn { flex: 1; } @media (max-width: 700px) { .bb-wiz-fields { grid-template-columns: 1fr; } } /* At phone widths the card's own padding left the step row too little room and the third step was cut off. Trim the padding and the row rather than dropping the labels. */ @media (max-width: 600px) { /* .bb-form-card's base padding is declared later in this file, so it needs the .bbx prefix. */ .bbx .bb-form-card { padding: var(--bb-lg) 1.1rem; } .bb-wiz-steps { gap: .4rem; } .bb-wiz-dot { font-size: .66rem; gap: .35rem; letter-spacing: .06em; } .bb-wiz-dot i { width: 22px; height: 22px; font-size: .72rem; } } @media (prefers-reduced-motion: reduce) { .bb-wiz-step.bb-on { animation: none; } } /* The footer lockup sat too far from the mission statement. */ .bb-footer-main .bb-logo { margin-bottom: 0; } #bbHome #process { padding-bottom: var(--bb-lg); } #bbHome #process .bb-sechead { margin-bottom: var(--bb-lg); } /* Sized so the rollout line sits on one row at desktop widths. */ #bbHome #process .bb-sechead .bb-sub { font-size: 1.13rem; white-space: nowrap; } /* Platform cards: icon and title share a row, copy spans the full width beneath. */ #bbHome #platform .bb-card { display: grid; grid-template-columns: auto 1fr; column-gap: .95rem; align-items: center; } #bbHome #platform .bb-card-icon { grid-column: 1; grid-row: 1; width: 42px; height: 42px; margin-bottom: 0; } #bbHome #platform .bb-card-icon svg { width: 21px; height: 21px; } #bbHome #platform .bb-card h3 { grid-column: 2; grid-row: 1; margin-bottom: 0; font-size: 1.12rem; text-wrap: nowrap; } #bbHome #platform .bb-card p { grid-column: 1 / -1; grid-row: 2; margin-top: var(--bb-md); } /* Section heads run the full container width so the heading and its subtitle line up with the cards/panels beneath them. Centered heads (FAQ, contact) keep their narrower measure. */ #bbHome .bb-sechead:not(.bb-center) { max-width: none; } #bbHome .bb-sechead:not(.bb-center) .bb-sub { max-width: none; font-size: 1.25rem; } .bb-nav-menu a { font-size: 15px; font-weight: 550; color: var(--bb-text-2); position: relative; } .bb-nav-menu a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: -6px; height: 2px; border-radius: 2px; background: var(--bb-grad); transition: right .25s ease; } .bb-nav-menu a:hover { color: var(--bb-text); } .bb-nav-menu a:hover::after { right: 0; } .bb-nav-actions { display: flex; align-items: center; gap: 1rem; } .bb-nav-actions .bb-login { font-size: 15px; font-weight: 600; color: var(--bb-text-2); cursor: pointer; } .bb-nav-actions .bb-login:hover { color: var(--bb-text); } /* 44px minimum touch target */ .bb-burger { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px; background: none; border: 0; cursor: pointer; padding: 0; width: 44px; height: 44px; margin-right: -8px; } .bb-burger span { width: 24px; height: 2px; background: var(--bb-text); border-radius: 2px; transition: transform .3s ease, opacity .3s ease; } .bb-burger.bb-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .bb-burger.bb-open span:nth-child(2) { opacity: 0; } .bb-burger.bb-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .bb-mobile-menu { position: fixed; inset: 0; z-index: 899; background: rgba(3, 5, 10, .97); backdrop-filter: blur(14px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.4rem; opacity: 0; pointer-events: none; transition: opacity .3s ease; } .bb-mobile-menu.bb-open { opacity: 1; pointer-events: auto; } .bb-mobile-menu a { font-family: var(--bb-font-display); font-size: 1.5rem; font-weight: 700; color: var(--bb-text); } .bb-mobile-menu a:hover { color: var(--bb-accent-1); } /* ===================================================================== HERO ===================================================================== */ .bb-hero { position: relative; padding: 11rem 0 var(--bb-2xl); overflow: hidden; min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; } .bb-hero > .bb-container { width: 100%; } .bb-hero-bg { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; } .bb-orb { position: absolute; border-radius: 50%; filter: blur(95px); opacity: .5; animation: bb-float 24s ease-in-out infinite; } .bb-orb-1 { width: 580px; height: 580px; background: var(--bb-g1); top: -200px; right: -150px; } .bb-orb-2 { width: 470px; height: 470px; background: var(--bb-g6); bottom: -220px; left: -170px; animation-delay: -8s; } .bb-orb-3 { width: 380px; height: 380px; background: var(--bb-g3); top: 42%; right: 20%; opacity: .28; animation-delay: -15s; } .bb-hero-grid-overlay { position: absolute; inset: 0; z-index: 0; opacity: .5; pointer-events: none; background-image: linear-gradient(rgba(146,170,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(146,170,255,.05) 1px, transparent 1px); background-size: 54px 54px; -webkit-mask-image: radial-gradient(ellipse 75% 62% at 32% 30%, #000 18%, transparent 74%); mask-image: radial-gradient(ellipse 75% 62% at 32% 30%, #000 18%, transparent 74%); } .bb-hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.04fr .96fr; gap: 4.6rem; align-items: center; } .bb-hero-copy { text-align: left; } .bb-hero-badge { display: inline-flex; align-items: center; gap: .6rem; padding: .5rem 1.1rem; background: var(--bb-surface-2); border: 1px solid var(--bb-border-2); border-radius: var(--bb-r-full); font-size: 13.5px; font-weight: 600; color: var(--bb-text-2); margin-bottom: var(--bb-lg); } .bb-hero-badge .bb-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bb-accent-2); box-shadow: 0 0 12px var(--bb-accent-2); animation: bb-pulse 2.4s ease-in-out infinite; } #bbHome .bb-hero h1 { margin-bottom: var(--bb-md); font-size: clamp(2.05rem, 3.4vw, 2.9rem); } .bb-hero-desc { font-size: 1.16rem; color: var(--bb-text-2); max-width: 540px; margin: 0 0 var(--bb-xl); line-height: 1.68; } .bb-hero-btns { display: flex; gap: .5rem; justify-content: flex-start; flex-wrap: wrap; } #bbHome .bb-hero-assure { margin-top: .95rem; color: var(--bb-text-3); font-size: 1rem; line-height: 1.6; max-width: 560px; } /* Proof bar under both columns */ .bb-hero-statbar { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--bb-lg); margin-top: var(--bb-xl); padding-top: var(--bb-xl); border-top: 1px solid var(--bb-border); } .bb-stat { text-align: left; } .bb-stat-num { font-family: var(--bb-font-display); font-size: 2.5rem; font-weight: 800; letter-spacing: -.02em; line-height: 1; margin-bottom: .4rem; background: var(--bb-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; font-variant-numeric: tabular-nums; } .bb-stat-label { font-size: .78rem; color: var(--bb-text-3); text-transform: uppercase; letter-spacing: .1em; font-weight: 600; } /* legacy alias kept for safety */ .bb-hero-stats { display: flex; gap: var(--bb-xl); flex-wrap: wrap; } /* ---- Hero visual: the live dashboard, framed by a soft glow ring ---- */ .bb-hero-visual { position: relative; z-index: 1; } .bb-hero-visual::before { content: ''; position: absolute; top: 50%; left: 50%; width: 118%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; z-index: 0; pointer-events: none; background: radial-gradient(circle, rgba(var(--bb-accent-rgb), .12), transparent 62%); -webkit-mask-image: radial-gradient(circle, transparent 46%, #000 47%, #000 62%, transparent 66%); mask-image: radial-gradient(circle, transparent 46%, #000 47%, #000 62%, transparent 66%); } .bb-dash { position: relative; z-index: 1; background: linear-gradient(160deg, rgba(20, 27, 51, .94), rgba(9, 13, 26, .96)); border: 1px solid var(--bb-border-2); border-radius: var(--bb-r-lg); box-shadow: var(--bb-shadow-lg), 0 0 90px rgba(var(--bb-accent-rgb), .16); backdrop-filter: blur(20px); overflow: hidden; } .bb-dash::before { content: ''; position: absolute; top: 0; left: 8%; right: 8%; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--bb-accent-rgb), .7), transparent); } .bb-dash-head { display: flex; align-items: center; gap: .55rem; padding: .95rem 1.2rem; border-bottom: 1px solid var(--bb-border); } .bb-dash-head .bb-dd { width: 10px; height: 10px; border-radius: 50%; background: rgba(146, 170, 255, .18); } .bb-dash-head .bb-dd:nth-child(1) { background: rgba(var(--bb-accent-rgb), .85); } .bb-dash-title { margin-left: .5rem; font-family: var(--bb-font-display); font-weight: 600; font-size: 1.05rem; } .bb-dash-live { margin-left: auto; display: inline-flex; align-items: center; gap: .4rem; font-family: var(--bb-font-mono); font-size: .76rem; text-transform: uppercase; letter-spacing: .12em; color: var(--bb-accent-2); } .bb-dash-live .bb-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--bb-accent-2); box-shadow: 0 0 8px var(--bb-accent-2); animation: bb-pulse 1.8s ease-in-out infinite; } .bb-dash-body { padding: 1rem; } .bb-dash-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin-bottom: .8rem; } .bb-dash-kpi { background: var(--bb-surface); border: 1px solid var(--bb-border); border-radius: var(--bb-r-md); padding: .6rem .75rem; } .bb-dash-kpi .bb-kl { font-family: var(--bb-font-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; color: var(--bb-text-2); } .bb-dash-kpi .bb-kv { font-family: var(--bb-font-display); font-weight: 700; font-size: 1.5rem; margin-top: .18rem; font-variant-numeric: tabular-nums; } .bb-dash-kpi .bb-kv small { font-size: .84rem; color: var(--bb-accent-2); font-weight: 600; margin-left: .3rem; } .bb-dash-chart { padding: .8rem .9rem .65rem; background: var(--bb-surface); border: 1px solid var(--bb-border); border-radius: var(--bb-r-md); } .bb-dash-bars { display: flex; align-items: flex-end; gap: .7rem; height: 176px; padding-top: 1.5rem; background: repeating-linear-gradient(to top, rgba(146, 170, 255, .06) 0 1px, transparent 1px 38px); } .bb-bar-group { flex: 1; position: relative; height: 100%; display: flex; align-items: flex-end; gap: 3px; } .bb-dash-chart i { flex: 1; border-radius: 4px 4px 0 0; background: var(--bb-grad); opacity: .9; display: block; animation: bb-bar 3.6s ease-in-out infinite; transform-origin: bottom; } .bb-dash-chart i.bb-bar-prev { background: rgba(146, 170, 255, .22); animation: none; opacity: 1; } .bb-bar-group:nth-child(2n) i { animation-delay: -.9s; } .bb-bar-group:nth-child(3n) i { animation-delay: -1.7s; } .bb-chart-flag { position: absolute; top: -1.35rem; left: 50%; transform: translateX(-50%); white-space: nowrap; font-family: var(--bb-font-mono); font-size: .76rem; color: var(--bb-accent-2); background: rgba(9, 13, 26, .92); border: 1px solid var(--bb-border-2); border-radius: 6px; padding: .18rem .5rem; } .bb-dash-months { display: flex; gap: .7rem; margin-top: .5rem; } .bb-dash-months span { flex: 1; text-align: center; font-family: var(--bb-font-mono); font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; color: var(--bb-text-2); } .bb-dash-legend { display: flex; gap: 1.1rem; margin-top: .8rem; font-family: var(--bb-font-mono); font-size: .8rem; color: var(--bb-text-2); } .bb-dash-legend span::before { content: ''; display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: .4rem; vertical-align: -1px; background: var(--bb-accent-1); } .bb-dash-legend span:nth-child(2)::before { background: rgba(146, 170, 255, .35); } .bb-dash-feed { margin-top: .65rem; padding-top: .6rem; border-top: 1px solid var(--bb-border); display: flex; flex-direction: column; gap: .4rem; } .bb-feed-row { display: flex; align-items: center; gap: .6rem; font-family: var(--bb-font-mono); font-size: .82rem; line-height: 1.45; color: var(--bb-text-2); } .bb-feed-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--bb-accent-1); box-shadow: 0 0 8px rgba(var(--bb-accent-rgb), .7); } .bb-feed-dot.bb-feed-ok { background: #34d399; box-shadow: 0 0 8px rgba(52, 211, 153, .6); } /* Desktop: the dashboard spans exactly from the headline top to the subhead's last line; buttons and trust line sit in a second grid row under the copy. */ @media (min-width: 978px) { #bbHome .bb-hero-inner { align-items: start; row-gap: var(--bb-lg); column-gap: 5.4rem; } #bbHome .bb-hero-copy { grid-column: 1; grid-row: 1; } /* Buttons sit directly under the copy. The dashboard is no longer required to end flush with them, so we do not push them to the bottom of the row. */ #bbHome .bb-hero-btns { grid-column: 1; grid-row: 2; align-self: start; } #bbHome .bb-hero-visual { grid-column: 2; grid-row: 1 / 3; align-self: stretch; display: flex; } #bbHome .bb-hero-visual .bb-dash { display: flex; flex-direction: column; width: 100%; } #bbHome .bb-hero-visual .bb-dash-body { flex: 1; display: flex; flex-direction: column; min-height: 0; } #bbHome .bb-hero-visual .bb-dash-chart { flex: 1; display: flex; flex-direction: column; min-height: 0; } #bbHome .bb-hero-visual .bb-dash-bars { flex: 1; height: auto; min-height: 96px; padding-top: .95rem; } #bbHome .bb-hero-visual .bb-chart-flag { top: -.9rem; } } /* Between the two-column breakpoint and ~1200px the copy column is too narrow for both CTAs at full size, so trim them rather than letting the pair wrap. */ @media (min-width: 978px) and (max-width: 1200px) { #bbHome .bb-hero-inner { column-gap: 3rem; } #bbHome .bb-hero-btns .bb-btn-lg { font-size: 15px; padding: .8rem 1.1rem; } #bbHome .bb-hero-btns { gap: .45rem; } } /* Narrowest two-column widths can't fit both CTAs beside the dashboard, so stack the hero into one column there rather than wrapping the button pair. */ @media (min-width: 978px) and (max-width: 1100px) { #bbHome .bb-hero-inner { grid-template-columns: 1fr; column-gap: 0; } #bbHome .bb-hero-copy { grid-column: 1; grid-row: 1; } #bbHome .bb-hero-visual { grid-column: 1; grid-row: 2; } #bbHome .bb-hero-btns { grid-column: 1; grid-row: 3; } } /* ===================================================================== NAV MEGAMENU + CURRENT STATE ===================================================================== */ .bb-nav-menu a.bb-nav-current { color: var(--bb-text); } .bb-nav-menu a.bb-nav-current::after { right: 0; } .bb-nav-top { display: inline-flex; align-items: center; gap: .3rem; } .bb-caret { width: 13px; height: 13px; transition: transform .25s ease; } .bb-has-menu { position: relative; } .bb-has-menu:hover .bb-caret { transform: rotate(180deg); } .bb-megamenu { position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(-6px); width: 620px; display: grid; grid-template-columns: 1fr 1fr; gap: .25rem; padding: .7rem; border-radius: var(--bb-r-lg); background: linear-gradient(180deg, rgba(14, 19, 38, .98), rgba(7, 10, 20, .99)); border: 1px solid var(--bb-border-2); box-shadow: var(--bb-shadow-lg); backdrop-filter: blur(20px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .22s ease, transform .22s ease, visibility .22s; } .bb-has-menu:hover .bb-megamenu, .bb-has-menu:focus-within .bb-megamenu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); } .bb-megamenu::before { content: ''; position: absolute; top: -14px; left: 0; right: 0; height: 14px; } .bb-megamenu a { display: block; padding: .75rem .85rem; border-radius: var(--bb-r-md); border: 1px solid transparent; } .bb-megamenu .bb-mm-featured { grid-column: 1 / -1; background: rgba(var(--bb-accent-rgb), .07); border-color: rgba(var(--bb-accent-rgb), .22); } .bb-megamenu .bb-mm-featured b { color: var(--bb-accent-2); } .bb-megamenu a:hover { background: var(--bb-surface-2); border-color: var(--bb-border); } .bb-megamenu b { display: block; font-family: var(--bb-font-display); font-weight: 650; font-size: .95rem; color: var(--bb-text); margin-bottom: .12rem; } .bb-megamenu span { display: block; font-size: .8rem; color: var(--bb-text-3); line-height: 1.4; } .bb-mm-sub { display: flex; flex-direction: column; gap: .5rem; margin: -.3rem 0 .3rem; } .bb-mm-sub a { font-size: 1rem !important; font-weight: 500 !important; color: var(--bb-text-2) !important; } /* ===================================================================== LOGO WALL (real client brand marks, monochrome on dark) ===================================================================== */ .bb-logowall { text-align: center; } /* .bbx p sets margin:0 with higher specificity, so this selector must match it. */ /* Body font, sentence case: the mono face at wide tracking made this long line hard to read. */ .bbx .bb-logowall-label { font-family: var(--bb-font); font-size: 1.62rem; font-weight: 500; letter-spacing: 0; color: var(--bb-text-2); margin: 0 0 2.2rem; } .bb-logowall-grid { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.1rem 2.6rem; } .bb-logowall-item { display: inline-flex; align-items: center; justify-content: center; } /* One shared box for every brand mark on the page (wall, proof cards, testimonials) so the same logo never appears at two different sizes. */ .bbx .bb-logowall-item img { height: 32px; width: 136px; object-fit: contain; filter: brightness(0) invert(1); opacity: .55; transition: opacity .25s ease, transform .25s ease; } .bb-logowall-item:hover img { opacity: 1; transform: translateY(-2px); } .bb-logowall-marquee + .bb-logowall-marquee { margin-top: 1.7rem; } .bb-logowall-marquee .bb-marquee-track { gap: 0; animation-duration: 95s; } .bb-marquee-reverse .bb-marquee-track { animation-direction: reverse; } .bb-marquee-group { display: flex; align-items: center; gap: 1.9rem; padding-right: 1.9rem; } .bb-logowall-marquee:hover .bb-marquee-track { animation-play-state: paused; } /* ===================================================================== BUILD VS BUY SPLIT ===================================================================== */ .bb-split2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--bb-lg); } .bb-panel { border-radius: var(--bb-r-xl); padding: var(--bb-xl); border: 1px solid var(--bb-border); background: var(--bb-surface); } .bb-panel.bb-panel-accent { border-color: rgba(var(--bb-accent-rgb), .4); background: linear-gradient(165deg, rgba(var(--bb-accent-rgb), .11), rgba(9, 13, 26, .75)); box-shadow: 0 0 60px rgba(var(--bb-accent-rgb), .12); } .bb-panel-eyebrow { font-family: var(--bb-font-mono); font-size: .78rem; text-transform: uppercase; letter-spacing: .18em; color: var(--bb-text-3); margin-bottom: .35rem; } .bb-panel-accent .bb-panel-eyebrow { color: var(--bb-accent-2); } .bb-panel h3 { margin-bottom: var(--bb-md); } .bb-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; } .bb-checklist li { display: flex; gap: .65rem; align-items: flex-start; color: var(--bb-text-2); font-size: 1.08rem; line-height: 1.5; } .bb-checklist svg { flex: 0 0 auto; width: 20px; height: 20px; margin-top: .18rem; } .bb-checklist .bb-yes { color: var(--bb-accent-2); } .bb-checklist .bb-no { color: rgba(214, 224, 255, .3); } /* ===================================================================== ERP DOMAIN MAP ===================================================================== */ .bb-domains { display: grid; grid-template-columns: repeat(4, 1fr); gap: .85rem; } /* One header per group instead of a badge repeated on every card. */ .bb-domain-head { display: flex; align-items: center; gap: .85rem; margin-bottom: var(--bb-md); } .bb-domain-head h3 { margin: 0; font-size: 1.3rem; } /* The group headers read as labels, not badges, so they sit a notch under the card tags. */ .bb-domain-head .bb-tag { flex: 0 0 auto; font-size: .74rem; padding: .3rem .7rem; } .bb-domain { padding: 1.1rem; border-radius: var(--bb-r-lg); border: 1px solid var(--bb-border); background: var(--bb-surface); transition: transform .25s ease, border-color .25s ease, background .25s ease; } .bb-domain:hover { transform: translateY(-3px); border-color: rgba(var(--bb-accent-rgb), .35); background: var(--bb-surface-2); } .bb-domain h4 { font-size: 1rem; margin-bottom: .3rem; } .bb-domain p { font-size: .86rem; color: var(--bb-text-2); line-height: 1.5; } .bb-tag { display: inline-block; margin-bottom: .55rem; font-family: var(--bb-font-mono); font-size: .84rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; padding: .36rem .8rem; border-radius: var(--bb-r-full); } .bb-tag-core { background: rgba(var(--bb-accent-rgb), .18); color: var(--bb-accent-2); border: 1px solid rgba(var(--bb-accent-rgb), .42); } /* text-3 on a near-black chip was barely legible; text-2 with a brighter edge reads. */ .bb-tag-custom { background: rgba(146, 170, 255, .1); color: var(--bb-text-2); border: 1px solid rgba(146, 170, 255, .3); } /* ===================================================================== CUSTOMER CARDS ===================================================================== */ .bb-cust { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--bb-lg); } .bb-cust-mini { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--bb-md); margin-top: var(--bb-lg); } .bb-cust-mini .bb-cust-card { padding: 1.05rem 1.15rem; } .bb-cust-mini .bb-cust-logo { margin-bottom: .2rem; } .bb-cust-mini p { font-size: .92rem; color: var(--bb-text-2); line-height: 1.5; margin: .3rem 0 0; } /* Brink's mark is mostly cloud outline with small type, so it reads smaller than the others at a shared height. Nudge it up so the row is optically even. */ .bbx img.bb-cust-logo[alt="PAR Brink POS"] { height: 56px; } /* These marks carry small type inside a wide canvas, so a shared height leaves them reading smaller than their neighbours. Nudge each to match optically. */ .bbx img.bb-cust-logo[alt="Carvertise"] { height: 60px; } .bbx img.bb-cust-logo[alt="TakeOut Technologies"] { height: 52px; } .bbx img.bb-cust-logo[alt="LevelUp"] { height: 50px; } @media (max-width: 900px) { .bb-cust-mini { grid-template-columns: 1fr 1fr; } } .bb-cust-card { border-radius: var(--bb-r-xl); border: 1px solid var(--bb-border); background: var(--bb-surface); padding: var(--bb-xl); overflow: hidden; transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; } .bb-cust-card:hover { transform: translateY(-4px); border-color: rgba(var(--bb-accent-rgb), .35); box-shadow: var(--bb-shadow-md); } /* Fixed box + contain so wordmarks of very different proportions read at the same visual size. */ .bbx .bb-cust-logo { height: 44px; width: auto; max-width: 230px; object-fit: contain; object-position: left center; filter: brightness(0) invert(1); opacity: .9; margin-bottom: .55rem; } .bb-cust-card h3 { margin-bottom: .5rem; } .bb-cust-card p { color: var(--bb-text-2); line-height: 1.65; } .bb-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: var(--bb-md); } .bb-chip2 { font-family: var(--bb-font-mono); font-size: .755rem; letter-spacing: .03em; padding: .33rem .68rem; border-radius: var(--bb-r-full); background: rgba(var(--bb-accent-rgb), .12); border: 1px solid rgba(var(--bb-accent-rgb), .3); color: var(--bb-accent-2); } /* ===================================================================== LETTERMARKS (integration tiles used in marquee, bento, flow) ===================================================================== */ .bb-mark { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; flex: 0 0 auto; font-family: var(--bb-font-display); font-weight: 700; font-size: .68rem; color: #fff; background: var(--mk, var(--bb-grad)); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 4px 12px rgba(2,4,12,.4); } /* Marquee strip */ .bb-strip { padding: var(--bb-xl) 0; border-top: 1px solid var(--bb-border); border-bottom: 1px solid var(--bb-border); background: rgba(146,170,255,.015); } .bb-strip-label { text-align: center; color: var(--bb-text-3); font-family: var(--bb-font-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .22em; margin: 0 0 var(--bb-lg); } .bb-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); } .bb-marquee-track { display: flex; gap: .9rem; width: max-content; animation: bb-marquee 38s linear infinite; } .bb-marquee-item { display: flex; align-items: center; gap: .6rem; white-space: nowrap; padding: .5rem 1rem .5rem .55rem; background: var(--bb-surface); border: 1px solid var(--bb-border); border-radius: var(--bb-r-full); font-weight: 600; font-size: .92rem; color: var(--bb-text-2); } /* ===================================================================== SPOTLIGHT (cursor-tracked highlight on tiles/cards) ===================================================================== */ .bb-spot { position: relative; } .bb-spot::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit; background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--bb-accent-rgb), .1), transparent 62%); opacity: 0; transition: opacity .3s ease; } .bb-spot:hover::after { opacity: 1; } .bb-spot > * { position: relative; z-index: 1; } /* ===================================================================== BENTO GRID (01 The platform) ===================================================================== */ .bb-bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(168px, auto); gap: 1rem; } .bb-tile { display: flex; flex-direction: column; gap: .55rem; padding: 1.35rem; background: var(--bb-surface); border: 1px solid var(--bb-border); border-radius: var(--bb-r-lg); overflow: hidden; transition: transform .3s ease, border-color .3s ease, background .3s ease, box-shadow .3s ease; } .bb-tile:hover { transform: translateY(-4px); border-color: rgba(var(--bb-accent-rgb), .38); background: var(--bb-surface-2); box-shadow: var(--bb-shadow-md); } .bb-tile h3 { font-size: 1.18rem; } .bb-tile p { color: var(--bb-text-2); font-size: .92rem; line-height: 1.55; } .bb-tile .bb-tlink { margin-top: auto; padding-top: .5rem; color: var(--bb-accent-1); font-weight: 650; font-size: .88rem; display: inline-flex; align-items: center; gap: .35rem; } .bb-tile .bb-tlink:hover { color: var(--bb-accent-2); gap: .6rem; } .bb-t-2x2 { grid-column: span 2; grid-row: span 2; } .bb-t-2x1 { grid-column: span 2; } .bb-tico { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; color: #fff; margin-bottom: .3rem; box-shadow: 0 8px 20px rgba(2,4,12,.4), inset 0 1px 0 rgba(255,255,255,.2); } .bb-tico svg { width: 20px; height: 20px; } /* Tile mini-visuals */ .bb-mini { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: .6rem; justify-content: flex-end; } .bb-pills { display: flex; flex-wrap: wrap; gap: .4rem; } .bb-pill { font-family: var(--bb-font-mono); font-size: .64rem; padding: .3rem .6rem; border-radius: var(--bb-r-full); background: rgba(var(--bb-accent-rgb), .12); border: 1px solid rgba(var(--bb-accent-rgb), .28); color: var(--bb-accent-1); } .bb-pill.bb-on { background: var(--bb-grad); color: #03050c; border-color: transparent; font-weight: 700; } .bb-minichart { display: flex; align-items: flex-end; gap: .4rem; height: 116px; padding: .7rem; background: rgba(3,5,10,.5); border: 1px solid var(--bb-border); border-radius: var(--bb-r-md); } .bb-minichart i { flex: 1; border-radius: 4px 4px 0 0; background: var(--bb-grad); opacity: .88; animation: bb-bar 3.8s ease-in-out infinite; transform-origin: bottom; } .bb-minichart i:nth-child(2n) { animation-delay: -1.1s; } .bb-minichart i:nth-child(3n) { animation-delay: -2s; } .bb-mono-rows { display: flex; flex-direction: column; gap: .4rem; font-family: var(--bb-font-mono); font-size: .68rem; color: var(--bb-text-2); } .bb-mono-rows span { display: flex; align-items: center; gap: .5rem; padding: .4rem .6rem; background: rgba(3,5,10,.5); border: 1px solid var(--bb-border); border-radius: 8px; white-space: nowrap; overflow: hidden; } .bb-mono-rows i { width: 7px; height: 7px; border-radius: 50%; background: #34d399; box-shadow: 0 0 7px rgba(52,211,153,.8); flex: 0 0 auto; } .bb-mono-rows .bb-amber i { background: #fbbf24; box-shadow: 0 0 7px rgba(251,191,36,.8); } .bb-mono-rows b { color: var(--bb-accent-2); font-weight: 600; } .bb-pulse-wrap { position: relative; height: 74px; background: rgba(3,5,10,.5); border: 1px solid var(--bb-border); border-radius: var(--bb-r-md); overflow: hidden; } .bb-pulse-wrap svg { position: absolute; inset: 0; width: 100%; height: 100%; } .bb-pulse-line { fill: none; stroke: url(#bbPulseGrad); stroke-width: 2; stroke-dasharray: 320; stroke-dashoffset: 320; animation: bb-draw 4s linear infinite; } .bb-rolerow { display: flex; flex-wrap: wrap; gap: .4rem; } .bb-role { display: inline-flex; align-items: center; gap: .4rem; font-size: .74rem; font-weight: 600; padding: .34rem .7rem; border-radius: var(--bb-r-full); background: rgba(3,5,10,.5); border: 1px solid var(--bb-border); color: var(--bb-text-2); } .bb-role i { width: 7px; height: 7px; border-radius: 50%; background: var(--bb-accent-1); } .bb-role:nth-child(2) i { background: var(--bb-accent-2); } .bb-role:nth-child(3) i { background: #a78bfa; } .bb-markwall { display: flex; flex-wrap: wrap; gap: .55rem; } .bb-markwall .bb-mark { width: 38px; height: 38px; border-radius: 11px; font-size: .74rem; } .bb-term { flex: 1; background: rgba(3,5,10,.62); border: 1px solid var(--bb-border); border-radius: var(--bb-r-md); padding: .85rem 1rem; font-family: var(--bb-font-mono); font-size: .72rem; line-height: 1.85; color: var(--bb-text-2); overflow: hidden; } .bb-term b { color: var(--bb-accent-2); font-weight: 600; } .bb-term .bb-tp { color: var(--bb-accent-1); } .bb-term .bb-tg { color: #34d399; } .bb-swatchrow { display: flex; gap: .45rem; align-items: center; } .bb-swatchrow i { width: 22px; height: 22px; border-radius: 7px; border: 1px solid rgba(255,255,255,.18); } .bb-mini-nav { display: flex; align-items: center; gap: .55rem; padding: .55rem .7rem; background: rgba(3,5,10,.5); border: 1px solid var(--bb-border); border-radius: var(--bb-r-md); } .bb-mini-nav i { width: 20px; height: 20px; border-radius: 6px; background: var(--bb-grad); flex: 0 0 auto; } .bb-mini-nav span { font-family: var(--bb-font-display); font-weight: 700; font-size: .8rem; } .bb-mini-nav em { margin-left: auto; font-style: normal; font-family: var(--bb-font-mono); font-size: .62rem; color: var(--bb-text-3); } /* ===================================================================== FLOW DIAGRAM (02 architecture) ===================================================================== */ /* Three equal columns: the diagram reads as one flow, so no column is wider than another. */ .bb-flow { display: grid; grid-template-columns: 1fr 56px 1fr 56px 1fr; align-items: stretch; gap: 0; } /* The glow ramps left to right across the three columns, so the eye travels from the systems you already run, through the engine, to the product at the end. Same box, rising intensity. */ .bb-flow-col { background: linear-gradient(165deg, rgba(var(--bb-accent-rgb), .05), rgba(9, 13, 26, .78)); border: 1px solid rgba(var(--bb-accent-rgb), .18); border-radius: var(--bb-r-lg); padding: 1.5rem; display: flex; flex-direction: column; gap: .9rem; box-shadow: 0 0 30px rgba(var(--bb-accent-rgb), .07), var(--bb-shadow-md); } .bb-flow-col.bb-core { background: linear-gradient(165deg, rgba(var(--bb-accent-rgb), .11), rgba(9, 13, 26, .8)); border-color: rgba(var(--bb-accent-rgb), .36); box-shadow: 0 0 58px rgba(var(--bb-accent-rgb), .15), var(--bb-shadow-md); } .bb-flow-title { display: flex; align-items: center; gap: .6rem; font-family: var(--bb-font-mono); font-size: .82rem; font-weight: 600; text-transform: uppercase; letter-spacing: .16em; color: var(--bb-text-2); } /* Violet sets the engine apart from the cyan used on the product column. */ .bb-core .bb-flow-title { color: #b39cff; } /* The product is the payoff, so it sits at the bright end of the ramp. No lift: the three columns stay on the same baseline so they read as equal blocks. */ .bb-flow-col.bb-out { background: linear-gradient(165deg, rgba(var(--bb-accent-rgb), .17), rgba(9, 13, 26, .82)); border-color: rgba(var(--bb-accent-rgb), .58); box-shadow: 0 0 86px rgba(var(--bb-accent-rgb), .26), var(--bb-shadow-lg); } .bb-out .bb-flow-title { color: var(--bb-accent-2); } .bb-flow-row { display: flex; align-items: center; gap: .7rem; padding: .66rem .8rem; background: rgba(3,5,10,.45); border: 1px solid var(--bb-border); border-radius: var(--bb-r-md); font-size: 1.02rem; font-weight: 600; } .bb-flow-row small { margin-left: auto; font-family: var(--bb-font-mono); font-size: .74rem; color: var(--bb-text-3); font-weight: 400; } .bb-block-row { display: flex; align-items: center; gap: .7rem; padding: .72rem .85rem; background: rgba(3,5,10,.5); border: 1px solid rgba(var(--bb-accent-rgb), .26); border-left: 3px solid var(--bb-accent-1); border-radius: 10px; font-size: 1.04rem; font-weight: 650; } .bb-block-row:nth-child(odd) { border-left-color: var(--bb-accent-2); } .bb-block-row svg { width: 17px; height: 17px; color: var(--bb-accent-2); flex: 0 0 auto; } .bb-flow-arrow { display: grid; place-items: center; } .bb-flow-arrow svg { width: 100%; height: 44px; overflow: visible; } .bb-flow-arrow line { stroke: rgba(var(--bb-accent-rgb), .55); stroke-width: 2; stroke-dasharray: 7 6; animation: bb-dash 1.2s linear infinite; } .bb-flow-arrow polygon { fill: rgba(var(--bb-accent-rgb), .75); } .bb-browser { background: rgba(3,5,10,.55); border: 1px solid var(--bb-border); border-radius: var(--bb-r-md); overflow: hidden; } /* The product column carries less content than the other two, which left a dead area under it. Let the app mock absorb the extra height so all three columns read as deliberate. */ #bbHome #how .bb-flow-col .bb-browser { display: flex; flex-direction: column; flex: 1; min-height: 190px; } #bbHome #how .bb-flow-col .bb-browser-body { flex: 1; } #bbHome #how .bb-devices { margin-top: .2rem; } .bb-browser-bar { display: flex; align-items: center; gap: .45rem; padding: .5rem .7rem; border-bottom: 1px solid var(--bb-border); } .bb-browser-bar i { width: 8px; height: 8px; border-radius: 50%; background: rgba(146,170,255,.2); } .bb-browser-bar span { margin-left: .4rem; font-family: var(--bb-font-mono); font-size: .64rem; color: var(--bb-text-3); } .bb-browser-body { padding: .8rem; display: flex; flex-direction: column; gap: .5rem; } /* A miniature of the branded app rather than three grey placeholder bars. */ .bb-mini-app { display: grid; grid-template-columns: 34px 1fr; gap: .6rem; flex: 1; min-height: 0; } .bb-mini-side { display: flex; flex-direction: column; gap: .42rem; padding: .5rem .4rem; background: rgba(3,5,10,.6); border: 1px solid var(--bb-border); border-radius: 9px; } .bb-mini-mark { height: 12px; border-radius: 4px; background: var(--bb-grad); margin-bottom: .2rem; } .bb-mini-side i { height: 6px; border-radius: 3px; background: rgba(146,170,255,.16); } .bb-mini-side i.bb-mini-on { background: rgba(var(--bb-accent-rgb), .6); } .bb-mini-main { display: flex; flex-direction: column; gap: .55rem; min-height: 0; } .bb-mini-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; } .bb-mini-tiles div { background: rgba(3,5,10,.6); border: 1px solid var(--bb-border); border-radius: 9px; padding: .45rem .55rem; } .bb-mini-tiles b { display: block; font-family: var(--bb-font-display); font-size: .92rem; font-variant-numeric: tabular-nums; } .bb-mini-tiles span { font-family: var(--bb-font-mono); font-size: .58rem; color: var(--bb-text-3); } .bb-mini-chart { flex: 1; min-height: 46px; display: flex; align-items: flex-end; gap: .3rem; padding: .5rem .55rem; background: rgba(3,5,10,.6); border: 1px solid var(--bb-border); border-radius: 9px; } .bb-mini-chart i { flex: 1; border-radius: 3px 3px 0 0; background: var(--bb-grad); opacity: .85; } .bb-browser-body .bb-line { height: 9px; border-radius: 4px; background: rgba(146,170,255,.14); } .bb-browser-body .bb-line.bb-brand { width: 46%; background: var(--bb-grad); height: 11px; } .bb-browser-body .bb-line:nth-child(2) { width: 84%; } .bb-browser-body .bb-line:nth-child(3) { width: 66%; } .bb-devices { display: flex; gap: .45rem; } .bb-devices span { font-family: var(--bb-font-mono); font-size: .76rem; padding: .34rem .7rem; border-radius: var(--bb-r-full); border: 1px solid var(--bb-border-2); color: var(--bb-text-2); } /* ===================================================================== SPLITS (03 reporting, 04 framework) ===================================================================== */ .bb-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--bb-2xl); align-items: center; } /* Grid and flex items default to min-width:auto, so a wide 
 stretches its column
   instead of scrolling inside it. Let the columns shrink and keep code scrollable. */
.bb-split > *, .bb-split2 > *, .bb-hero-inner > *, .bb-doc-layout > *, .bb-grid > *, .bb-bento > * { min-width: 0; }
.bb-code-card, .bb-term, .bb-report-table, .bb-doc-content { max-width: 100%; }
.bb-split-media {
    border: 1px solid var(--bb-border); border-radius: var(--bb-r-lg);
    background: linear-gradient(160deg, var(--bb-bg-3), var(--bb-bg-2));
    padding: var(--bb-lg); box-shadow: var(--bb-shadow-lg); overflow: hidden; position: relative;
}
.bb-split-media::before { content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--bb-accent-rgb), .6), transparent); }
.bb-feature-list { list-style: none; margin: var(--bb-lg) 0 0; padding: 0; }
.bb-feature-list li { display: flex; gap: .95rem; margin-bottom: var(--bb-md); }
.bb-feature-list .bb-fi { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--bb-grad-soft); border: 1px solid rgba(var(--bb-accent-rgb), .32); color: var(--bb-accent-1); }
.bb-feature-list .bb-fi svg { width: 20px; height: 20px; }
.bb-feature-list h4 { margin-bottom: .18rem; }
.bb-feature-list p { color: var(--bb-text-2); font-size: .95rem; }
.bb-card-link { display: inline-flex; align-items: center; gap: .4rem; margin-top: var(--bb-md); color: var(--bb-accent-1); font-weight: 650; font-size: .95rem; }
.bb-card-link:hover { gap: .7rem; color: var(--bb-accent-2); }

/* Report-builder mock */
.bb-report { display: flex; flex-direction: column; gap: .7rem; }
.bb-report-filters { display: flex; gap: .45rem; flex-wrap: wrap; }
.bb-report-table { border: 1px solid var(--bb-border); border-radius: var(--bb-r-md); overflow: hidden; background: rgba(3,5,10,.45); }
.bb-report-table .bb-tr { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: .6rem; padding: .55rem .8rem; border-bottom: 1px solid var(--bb-border); font-family: var(--bb-font-mono); font-size: .68rem; color: var(--bb-text-2); font-variant-numeric: tabular-nums; }
.bb-report-table .bb-tr:last-child { border-bottom: 0; }
.bb-report-table .bb-th { background: rgba(146,170,255,.06); color: var(--bb-text-3); text-transform: uppercase; letter-spacing: .08em; font-size: .6rem; }
.bb-report-table .bb-up { color: #34d399; }
.bb-report-foot { display: flex; align-items: center; gap: .6rem; font-family: var(--bb-font-mono); font-size: .66rem; color: var(--bb-text-3); }
.bb-report-foot i { width: 7px; height: 7px; border-radius: 50%; background: var(--bb-accent-2); box-shadow: 0 0 8px var(--bb-accent-2); animation: bb-pulse 2s ease-in-out infinite; }

/* Capability rows */
.bb-cap-list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--bb-lg) var(--bb-xl); margin-top: var(--bb-xl); }
.bb-cap { display: flex; gap: .9rem; }
.bb-cap .bb-cap-ico { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; background: var(--bb-grad-soft); border: 1px solid rgba(var(--bb-accent-rgb), .3); color: var(--bb-accent-1); }
.bb-cap .bb-cap-ico svg { width: 21px; height: 21px; }
.bb-cap h4 { margin-bottom: .2rem; }
.bb-cap p { color: var(--bb-text-2); font-size: .94rem; line-height: 1.6; }

/* Code panel */
.bb-code-card { border: 1px solid var(--bb-border-2); border-radius: var(--bb-r-lg); overflow: hidden; background: #060911; box-shadow: var(--bb-shadow-lg); position: relative; }
.bb-code-card::before { content: ''; position: absolute; top: 0; left: 8%; right: 8%; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--bb-accent-rgb), .6), transparent); }
.bb-code-bar { display: flex; align-items: center; gap: .45rem; padding: .8rem 1rem; border-bottom: 1px solid var(--bb-border); background: rgba(146,170,255,.03); }
.bb-code-bar i { width: 11px; height: 11px; border-radius: 50%; display: block; }
.bb-code-bar i:nth-child(1) { background: #ff5f57; } .bb-code-bar i:nth-child(2) { background: #febc2e; } .bb-code-bar i:nth-child(3) { background: #28c840; }
.bb-code-bar span { margin-left: .6rem; font-family: var(--bb-font-mono); font-size: .76rem; color: var(--bb-text-3); }
.bb-code-card pre { margin: 0; padding: var(--bb-md) var(--bb-lg); overflow-x: auto; }
.bb-code-card code { font-family: var(--bb-font-mono); font-size: .85rem; line-height: 1.8; color: #ccd6f6; white-space: pre; }
.bb-code-card .k { color: #93b4ff; } .bb-code-card .t { color: var(--bb-accent-2); } .bb-code-card .s { color: #a6e3a1; } .bb-code-card .c { color: var(--bb-text-3); font-style: italic; }

/* =====================================================================
   PROCESS (05, numbered: it is a real sequence)
   ===================================================================== */
.bb-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--bb-lg); position: relative; }
.bb-steps::before { content: ''; position: absolute; top: 26px; left: 6%; right: 6%; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--bb-accent-rgb), .4) 18%, rgba(var(--bb-accent-rgb), .4) 82%, transparent); }
.bb-step { position: relative; text-align: left; padding-top: .4rem; }
.bb-step-num {
    width: 52px; height: 52px; margin-bottom: var(--bb-md); border-radius: 15px;
    display: grid; place-items: center;
    font-family: var(--bb-font-display); font-weight: 800; font-size: 1.05rem;
    background: var(--bb-bg); border: 1px solid rgba(var(--bb-accent-rgb), .45); color: var(--bb-accent-1);
    box-shadow: 0 0 24px rgba(var(--bb-accent-rgb), .18);
    position: relative; z-index: 1;
}
.bb-step h4 { margin-bottom: .45rem; font-size: 1.24rem; }
.bb-step p { color: var(--bb-text-2); font-size: 1.06rem; line-height: 1.6; }

/* =====================================================================
   QUOTE BAND
   ===================================================================== */
.bb-quote { position: relative; text-align: center; padding: var(--bb-2xl) 0; overflow: hidden; }
.bb-quote-inner { max-width: 840px; margin: 0 auto; position: relative; z-index: 1; }
.bb-quote-glyph { font-family: var(--bb-font-display); font-size: 4.4rem; line-height: .6; font-weight: 800; background: var(--bb-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; display: block; margin-bottom: .9rem; }
.bb-quote blockquote { margin: 0; font-family: var(--bb-font-display); font-weight: 600; font-size: clamp(1.3rem, 2.6vw, 1.85rem); line-height: 1.42; letter-spacing: -.015em; text-wrap: balance; }
.bb-quote-cite { display: flex; align-items: center; justify-content: center; gap: .8rem; margin-top: var(--bb-xl); }
.bb-quote-cite img { width: 38px; height: 38px; border-radius: 10px; }
.bb-quote-cite div { text-align: left; }
.bb-quote-cite b { display: block; font-size: .95rem; }
.bb-quote-cite span { font-size: .8rem; color: var(--bb-text-3); }
/* Customer testimonials: two per row, logo on top, attribution beneath. */
.bb-tq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--bb-lg); }
.bb-tq {
    margin: 0; text-align: left; display: flex; flex-direction: column; gap: var(--bb-md);
    background: var(--bb-surface); border: 1px solid var(--bb-border);
    border-radius: var(--bb-r-lg); padding: var(--bb-xl);
}
.bbx .bb-tq-logo { height: 44px; width: auto; max-width: 230px; object-fit: contain; object-position: left center; filter: brightness(0) invert(1); opacity: .85; }
.bb-tq blockquote { margin: 0; flex: 1; font-family: var(--bb-font-display); font-weight: 550; font-size: 1.22rem; line-height: 1.55; letter-spacing: -.01em; color: var(--bb-text); }
.bb-tq figcaption { display: flex; flex-direction: column; gap: .1rem; padding-top: var(--bb-sm); border-top: 1px solid var(--bb-border); }
.bb-tq figcaption b { font-size: 1.02rem; }
.bb-tq figcaption span { font-size: .92rem; color: var(--bb-text-3); }
/* Pill leads on the left, logo sits at the right edge of the row. */
/* Logo leads the card, top left. The challenge pill moved down under the attribution, so the
   quote itself is the first thing read rather than a label competing with the brand mark. */
.bb-tq-top { display: flex; align-items: center; gap: .9rem; }
.bb-tq-chal { font-family: var(--bb-font-mono); text-transform: uppercase; letter-spacing: .09em; color: var(--bb-accent-2); background: rgba(var(--bb-accent-rgb), .1); border: 1px solid rgba(var(--bb-accent-rgb), .28); border-radius: var(--bb-r-full); }
/* Outranks .bb-tq figcaption span, which would otherwise set the pill's size and grey it out. */
.bb-tq figcaption .bb-tq-chal { align-self: flex-start; margin-top: .5rem; padding: .22rem .6rem; font-size: .68rem; color: var(--bb-accent-2); }
@media (max-width: 900px) { .bb-tq-grid { grid-template-columns: 1fr; } }

/* =====================================================================
   FAQ
   ===================================================================== */
.bb-faq { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: .8rem; }
.bb-faq details { border: 1px solid var(--bb-border); border-radius: var(--bb-r-md); background: var(--bb-surface); overflow: hidden; transition: border-color .25s ease; }
.bb-faq details[open] { border-color: rgba(var(--bb-accent-rgb), .38); background: var(--bb-surface-2); }
.bb-faq summary { list-style: none; cursor: pointer; padding: 1.12rem 1.3rem; font-family: var(--bb-font-display); font-weight: 600; font-size: 1.04rem; letter-spacing: -.01em; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.bb-faq summary::-webkit-details-marker { display: none; }
.bb-faq summary::after { content: '+'; font-family: var(--bb-font); font-size: 1.5rem; font-weight: 400; color: var(--bb-accent-1); transition: transform .25s ease; line-height: 1; }
.bb-faq details[open] summary::after { transform: rotate(45deg); }
.bb-faq .bb-faq-body { padding: 0 1.3rem 1.2rem; color: var(--bb-text-2); line-height: 1.7; }
.bb-faq .bb-faq-body ul { margin: .5rem 0 0 1.1rem; }

/* =====================================================================
   CTA + FORMS
   ===================================================================== */
.bb-cta { position: relative; overflow: hidden; text-align: center; padding: var(--bb-3xl) 0; }
.bb-cta-inner { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; }
.bb-cta h2 { margin-bottom: var(--bb-md); }
.bb-cta p { font-size: 1.14rem; color: var(--bb-text-2); margin-bottom: 0; }

.bb-form-card {
    max-width: 780px; margin: 0 auto; position: relative;
    background: linear-gradient(170deg, rgba(20,27,51,.55), rgba(9,13,26,.7));
    border: 1px solid var(--bb-border); border-radius: var(--bb-r-xl);
    padding: var(--bb-xl); box-shadow: var(--bb-shadow-md); backdrop-filter: blur(12px);
}
.bb-form-card::before { content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--bb-accent-rgb), .65), transparent); }
.bb-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--bb-sm); }
.bb-field { display: flex; flex-direction: column; }
.bb-field.bb-col-2 { grid-column: 1 / -1; }
.bbx .bb-input, .bbx .bb-input:focus {
    width: 100%;
    background: rgba(3, 5, 10, .5);
    border: 1px solid var(--bb-border-2);
    border-radius: var(--bb-r-md);
    color: var(--bb-text);
    /* 16px minimum: iOS Safari zooms the page when a focused field is smaller. */
    font-family: var(--bb-font); font-size: 16px;
    padding: .95rem 1.1rem;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.bbx .bb-input::placeholder { color: var(--bb-text-3); }
/* The native select arrow sits inset from the edge and differs per browser. Draw our own and
   pin it to the right, so both dropdowns match the text inputs beside them. */
.bbx select.bb-input {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a95a6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1.05rem center;
    background-size: 15px 15px;
    padding-right: 2.8rem;
    cursor: pointer;
}
.bbx select.bb-input option { background: #0b0f16; color: var(--bb-text); }
.bbx .bb-input:focus { border-color: var(--bb-accent-1); box-shadow: 0 0 0 3px rgba(var(--bb-accent-rgb), .18); }
.bbx textarea.bb-input { resize: vertical; min-height: 130px; }
.bb-notify { margin-top: var(--bb-sm); padding: .9rem 1.1rem; border-radius: var(--bb-r-md); font-weight: 600; font-size: .95rem; }
.bb-notify.bb-ok { background: rgba(52, 211, 153, .13); border: 1px solid rgba(52, 211, 153, .4); color: #86efac; }
.bb-notify.bb-err { background: rgba(239, 68, 68, .13); border: 1px solid rgba(239, 68, 68, .4); color: #fca5a5; }
.bb-hidden { display: none; }
.bb-spin { display: inline-block; width: 15px; height: 15px; border: 2px solid rgba(3,5,12,.35); border-top-color: #03050c; border-radius: 50%; animation: bb-rot .7s linear infinite; vertical-align: -2px; }

/* Subscribe band (footer) */
.bb-subscribe { display: flex; align-items: center; justify-content: space-between; gap: var(--bb-lg); flex-wrap: wrap; background: var(--bb-surface); border: 1px solid var(--bb-border); border-radius: var(--bb-r-lg); padding: var(--bb-lg); }
.bb-subscribe .bb-sub-ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--bb-grad-soft); border: 1px solid rgba(var(--bb-accent-rgb), .3); color: var(--bb-accent-1); flex: 0 0 auto; }
.bb-subscribe .bb-sub-ico svg { width: 20px; height: 20px; }

/* =====================================================================
   FOOTER
   ===================================================================== */
.bb-footer { border-top: 1px solid var(--bb-border); padding: var(--bb-3xl) 0 var(--bb-lg); background: var(--bb-bg); }
.bb-footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--bb-xl); margin-bottom: var(--bb-2xl); }
.bb-footer-main { max-width: 340px; }
/* Tight under the lockup so the logo and the statement read as one unit. */
.bb-footer-main p { color: var(--bb-text-2); margin: .6rem 0 var(--bb-md); font-size: .95rem; line-height: 1.7; }
.bb-footer h5 { font-family: var(--bb-font-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .18em; color: var(--bb-text-3); margin: 0 0 var(--bb-md); font-weight: 600; }
.bb-footer ul { list-style: none; margin: 0; padding: 0; }
.bb-footer ul li { margin-bottom: .7rem; }
.bb-footer ul a { color: var(--bb-text-2); font-size: .95rem; }
.bb-footer ul a:hover { color: var(--bb-accent-1); }
.bb-social { display: flex; gap: .7rem; margin-top: var(--bb-md); }
.bb-social a { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--bb-surface-2); border: 1px solid var(--bb-border); color: var(--bb-text-2); }
.bb-social a:hover { color: #fff; border-color: rgba(var(--bb-accent-rgb), .5); background: var(--bb-grad-soft); }
.bb-footer-bottom { border-top: 1px solid var(--bb-border); padding-top: var(--bb-lg); display: flex; justify-content: space-between; align-items: center; gap: var(--bb-md); flex-wrap: wrap; color: var(--bb-text-3); font-size: .9rem; }
.bb-footer-bottom .bb-powered { display: flex; align-items: center; gap: .5rem; }

/* =====================================================================
   BRAND STUDIO (Vue widget)
   ===================================================================== */
#bb-studio-fab {
    position: fixed; right: 22px; bottom: 22px; z-index: 2147480000;
    display: inline-flex; align-items: center; gap: .5rem;
    font-family: var(--bb-font); font-weight: 700; font-size: 13.5px; color: #03050c;
    padding: .8rem 1.15rem; border: 0; border-radius: var(--bb-r-full); cursor: pointer;
    background: var(--bb-grad);
    box-shadow: 0 14px 40px -8px rgba(var(--bb-accent-rgb), .8), inset 0 1px 0 rgba(255, 255, 255, .4);
    transition: transform .2s ease;
}
#bb-studio-fab:hover { transform: translateY(-2px) scale(1.03); }
#bb-studio {
    position: fixed; right: 18px; top: 84px; bottom: 18px; z-index: 2147480000;
    width: 366px; max-width: calc(100vw - 36px);
    display: flex; flex-direction: column;
    background: linear-gradient(180deg, rgba(14, 19, 38, .97), rgba(7, 10, 20, .98));
    border: 1px solid var(--bb-border-2); border-radius: var(--bb-r-lg);
    box-shadow: var(--bb-shadow-lg); backdrop-filter: blur(22px) saturate(1.3);
    transition: transform .38s cubic-bezier(.22, 1, .36, 1), opacity .3s ease;
    overflow: hidden;
}
#bb-studio.bb-closed { transform: translateX(118%); opacity: 0; pointer-events: none; }
.bb-studio-head { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--bb-border); }
.bb-studio-head b { font-family: var(--bb-font-display); font-size: 1rem; display: flex; align-items: center; gap: .5rem; }
.bb-studio-head .bb-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--bb-accent-2); box-shadow: 0 0 10px var(--bb-accent-2); }
.bb-studio-x { background: none; border: 0; color: var(--bb-text-2); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.bb-studio-x:hover { color: #fff; }
.bb-studio-body { padding: 1.25rem; overflow-y: auto; display: flex; flex-direction: column; gap: 1.4rem; }
.bb-studio-label { display: block; font-family: var(--bb-font-mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .16em; color: var(--bb-text-3); font-weight: 600; margin-bottom: .7rem; }
.bb-swatches { display: flex; flex-wrap: wrap; gap: .6rem; }
.bb-swatch { width: 34px; height: 34px; border-radius: 10px; cursor: pointer; border: 1px solid rgba(255, 255, 255, .18); transition: transform .15s ease; }
.bb-swatch:hover { transform: scale(1.1); }
.bb-swatch.bb-active { box-shadow: 0 0 0 2px var(--bb-bg), 0 0 0 4px #fff; }
.bb-color-row { display: flex; gap: .8rem; }
.bb-color-pick { flex: 1; display: flex; align-items: center; gap: .55rem; background: var(--bb-surface); border: 1px solid var(--bb-border); border-radius: var(--bb-r-md); padding: .5rem .7rem; }
.bb-color-pick input[type=color] { width: 30px; height: 30px; border: 0; background: none; padding: 0; cursor: pointer; }
.bb-color-pick label { font-size: .8rem; color: var(--bb-text-2); }
.bb-studio-field { display: flex; flex-direction: column; gap: .4rem; }
.bb-studio-field input, .bb-studio-field textarea {
    background: var(--bb-surface); border: 1px solid var(--bb-border-2); border-radius: var(--bb-r-md);
    color: var(--bb-text); font-family: var(--bb-font); font-size: 14px; padding: .6rem .75rem; outline: none; resize: vertical;
}
.bb-studio-field input:focus, .bb-studio-field textarea:focus { border-color: var(--bb-accent-1); }
.bb-studio-foot { display: flex; gap: .6rem; padding: 1rem 1.25rem; border-top: 1px solid var(--bb-border); }
.bb-studio-foot button { flex: 1; padding: .7rem; border-radius: var(--bb-r-md); font-family: var(--bb-font); font-weight: 650; font-size: 13.5px; cursor: pointer; border: 1px solid var(--bb-border-2); background: var(--bb-surface); color: var(--bb-text); }
.bb-studio-foot .bb-reset:hover { border-color: rgba(239, 68, 68, .5); color: #fca5a5; }
.bb-studio-hint { font-size: .78rem; color: var(--bb-text-3); line-height: 1.5; }
#bb-studio-fab.bb-hide { display: none; }
.bbx [data-bb-edit].bb-editing { outline: 2px dashed rgba(var(--bb-accent-rgb), .6); outline-offset: 4px; border-radius: 6px; cursor: text; }

/* =====================================================================
   FRAMEWORK SURFACES (login modal + any bootstrap modal on marketing pages)
   These live OUTSIDE .bbx, so the marketing body color would otherwise
   bleed near-white text onto their white panels. Loaded only on marketing
   pages, so the authenticated app is never affected.
   ===================================================================== */
/* Safety net: any framework modal gets readable dark-on-light text back */
.modal-content { color: #1c2333; }

/* The BizBlocks core login modal, restyled to match the marketing design */
#ModalLogin, #ModalLogin *, #ModalLogin *::before, #ModalLogin *::after { box-sizing: border-box; }
#ModalLogin .modal-content {
    background: linear-gradient(175deg, #10182e, #090d1a);
    color: var(--bb-text);
    border: 1px solid var(--bb-border-2);
    border-radius: var(--bb-r-lg);
    box-shadow: var(--bb-shadow-lg), 0 0 90px rgba(var(--bb-accent-rgb), .14);
    font-family: var(--bb-font);
    overflow: hidden;
}
#ModalLogin .modal-content::before { content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--bb-accent-rgb), .7), transparent); }
#ModalLogin .modal-header { border-bottom: 1px solid var(--bb-border); padding: 1.1rem 1.4rem; }
#ModalLogin .modal-title { font-family: var(--bb-font-display); font-weight: 700; font-size: 1.25rem; letter-spacing: -.02em; color: var(--bb-text); }
#ModalLogin .modal-header .btn,
#ModalLogin .modal-footer .btn {
    background: var(--bb-surface-2); border: 1px solid var(--bb-border-2); color: var(--bb-text-2);
    border-radius: 10px; padding: .35rem .65rem; line-height: 1;
}
#ModalLogin .modal-header .btn:hover { color: #fff; border-color: rgba(var(--bb-accent-rgb), .5); }
#ModalLogin .modal-body { padding: 1.4rem; }
#ModalLogin .modal-body label { color: var(--bb-text-2); font-size: .9rem; }
#ModalLogin .modal-body a { color: var(--bb-accent-1); font-weight: 600; }
#ModalLogin .modal-body a:hover { color: var(--bb-accent-2); }
#ModalLogin .modal-body input[type=text],
#ModalLogin .modal-body input[type=email],
#ModalLogin .modal-body input[type=password],
#ModalLogin .modal-body input:not([type]),
#ModalLogin .modal-body select {
    width: 100%;
    background: rgba(3, 5, 10, .5) !important;
    border: 1px solid var(--bb-border-2);
    border-radius: var(--bb-r-md);
    color: var(--bb-text) !important;
    font-family: var(--bb-font); font-size: 15px;
    padding: .85rem 1rem;
    outline: none;
    box-shadow: none;
    transition: border-color .2s ease, box-shadow .2s ease;
    -webkit-text-fill-color: var(--bb-text);
}
#ModalLogin .modal-body input:focus { border-color: var(--bb-accent-1); box-shadow: 0 0 0 3px rgba(var(--bb-accent-rgb), .18); }
#ModalLogin .modal-body input::placeholder { color: var(--bb-text-3); }
#ModalLogin .modal-body input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 60px #0b1122 inset !important;
    -webkit-text-fill-color: var(--bb-text) !important;
    caret-color: var(--bb-text);
}
/* Primary action buttons inside the modal body get the brand gradient */
#ModalLogin .modal-body .btn-primary,
#ModalLogin .modal-body button.btn:not(.btn-outline-dark):not(.btn-link),
#ModalLogin .modal-body input[type=button],
#ModalLogin .modal-body input[type=submit] {
    display: inline-flex; align-items: center; justify-content: center; width: 100%;
    background: var(--bb-grad) !important;
    color: #03050c !important;
    border: 0; border-radius: var(--bb-r-full);
    font-family: var(--bb-font); font-weight: 700; font-size: 15.5px;
    padding: .9rem 1.5rem; cursor: pointer;
    box-shadow: var(--bb-glow);
    transition: transform .2s ease, box-shadow .25s ease;
}
#ModalLogin .modal-body .btn-primary:hover,
#ModalLogin .modal-body input[type=button]:hover,
#ModalLogin .modal-body input[type=submit]:hover { transform: translateY(-1px); box-shadow: 0 0 54px rgba(var(--bb-accent-rgb), .55); }
#ModalLogin .modal-body .btn-link { background: none !important; color: var(--bb-accent-1) !important; box-shadow: none; width: auto; padding: .3rem 0; }
#ModalLogin .modal-body .text-primary { color: var(--bb-accent-1) !important; }
#ModalLogin .form-check-input, #ModalLogin .form-switch .form-check-input { background-color: rgba(146,170,255,.18); border-color: var(--bb-border-2); }
#ModalLogin .form-check-input:checked { background-color: var(--bb-accent-1); border-color: var(--bb-accent-1); }

/* Back to top */
.bb-top { position: fixed; right: 22px; bottom: 84px; z-index: 800; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--bb-surface-2); border: 1px solid var(--bb-border-2); color: var(--bb-text); cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .3s ease, transform .2s ease; }
.bb-top.bb-show { opacity: 1; pointer-events: auto; }
.bb-top:hover { transform: translateY(-3px); }

/* =====================================================================
   CARDS (docs pages depend on these)
   ===================================================================== */
.bb-grid { display: grid; gap: var(--bb-lg); }
.bb-grid-3 { grid-template-columns: repeat(3, 1fr); }
.bb-grid-4 { grid-template-columns: repeat(4, 1fr); }
.bb-card {
    position: relative;
    background: var(--bb-surface);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-r-lg);
    padding: var(--bb-lg);
    transition: transform .3s ease, border-color .3s ease, background .3s ease, box-shadow .3s ease;
    overflow: hidden;
}
.bb-card:hover { transform: translateY(-5px); border-color: rgba(var(--bb-accent-rgb), .35); background: var(--bb-surface-2); box-shadow: var(--bb-shadow-md); }
.bb-card h3 { margin-bottom: .7rem; }
.bb-card p { color: var(--bb-text-2); line-height: 1.66; }
.bb-card-icon { width: 54px; height: 54px; border-radius: var(--bb-r-md); display: grid; place-items: center; color: #fff; margin-bottom: var(--bb-md); box-shadow: 0 10px 26px rgba(2, 4, 12, .4); }
.bb-card-icon svg { width: 27px; height: 27px; }
.bb-bg-1 { background: var(--bb-g1); } .bb-bg-2 { background: var(--bb-g2); }
.bb-bg-3 { background: var(--bb-g3); } .bb-bg-4 { background: var(--bb-g4); }
.bb-bg-5 { background: var(--bb-g5); } .bb-bg-6 { background: var(--bb-g6); }
.bb-card-list { list-style: none; margin: var(--bb-sm) 0 0; padding: 0; }
.bb-card-list li { position: relative; padding-left: 1.6rem; color: var(--bb-text-2); margin-bottom: .55rem; font-size: .96rem; line-height: 1.5; }
.bb-card-list li::before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--bb-accent-2); font-weight: 800; }
.bb-int-card { text-align: center; padding: var(--bb-md); }
.bb-int-card h4 { margin-bottom: .4rem; font-size: 1.05rem; }
.bb-int-card p { font-size: .9rem; color: var(--bb-text-2); }

/* =====================================================================
   TABS (legacy Vue explorer, kept for compatibility)
   ===================================================================== */
.bb-tabs { display: grid; grid-template-columns: 300px 1fr; gap: var(--bb-2xl); align-items: start; }
.bb-tab-btns { display: flex; flex-direction: column; gap: .5rem; }
.bb-tab-btn { display: flex; align-items: center; gap: .9rem; text-align: left; padding: 1rem 1.1rem; border-radius: var(--bb-r-md); cursor: pointer; background: var(--bb-surface); border: 1px solid var(--bb-border); color: var(--bb-text-2); font-family: var(--bb-font); font-size: 1rem; font-weight: 600; transition: all .25s ease; }
.bb-tab-btn:hover { color: var(--bb-text); border-color: var(--bb-border-2); }
.bb-tab-btn.bb-active { background: var(--bb-grad-soft); border-color: rgba(var(--bb-accent-rgb), .5); color: var(--bb-text); }
.bb-tabs:not(.bb-tabbed) .bb-tab-btns { display: none; }
.bb-tab-panels { display: flex; flex-direction: column; gap: var(--bb-lg); }
.bb-tabs.bb-tabbed .bb-tab-panel { display: none; }
.bb-tabs.bb-tabbed .bb-tab-panel.bb-active { display: block; animation: bb-fade-up .5s ease forwards; }
[v-cloak] { display: none !important; }

/* =====================================================================
   DOCS
   ===================================================================== */
.bb-doc-hero { padding: 10rem 0 var(--bb-xl); text-align: center; position: relative; overflow: hidden; }
/* Matches the scale the homepage hero was tuned to, rather than the oversized global h1. */
.bb-doc-hero h1 { font-size: clamp(1.95rem, 3.2vw, 2.62rem); }
/* Booking page: reasons on the left, the scheduler carrying the weight on the right. */
.bb-book-layout { display: grid; grid-template-columns: minmax(310px, .62fr) minmax(0, 1.38fr); gap: var(--bb-xl); align-items: start; }
.bb-book-side h3 { margin-bottom: var(--bb-md); font-size: 1.5rem; }
.bb-book-side .bb-checklist li { font-size: 1.16rem; }
.bb-book-who { margin-top: var(--bb-xl); padding-top: var(--bb-lg); border-top: 1px solid var(--bb-border); }
.bb-book-who p { color: var(--bb-text-2); line-height: 1.65; font-size: 1.08rem; }
.bb-book-who p + p { margin-top: .4rem; }
/* .bbx p sets margin:0 at equal-ish specificity, so this needs the .bbx prefix to land. */
.bbx .bb-book-alt { margin-top: var(--bb-lg); color: var(--bb-text-3); font-size: 1.05rem; }
.bb-book-alt a { color: var(--bb-accent-1); font-weight: 600; }
/* A definite height, not just min-height, so the iframe's height:100% has something to
   resolve against. The background matches Calendly's own so any slack reads as one surface. */
.bb-cal-embed {
    height: 780px; min-height: 780px; border-radius: var(--bb-r-lg); overflow: hidden;
    border: 1px solid var(--bb-border-2); background: #0b0f16;
}
/* Calendly's widget.css only sizes iframes inside its own .calendly-inline-widget wrapper, and
   it loads after this file, so equal-specificity rules there win. Without this the iframe falls
   back to the browser default of 150px and the scheduler renders clipped behind its own
   scrollbar. !important is what keeps the third-party sheet from taking the height back. */
.bb-cal-embed iframe { display: block !important; width: 100% !important; height: 100% !important; border: 0 !important; }
.bb-cal-fallback { text-align: center; padding: var(--bb-2xl) var(--bb-lg); border: 1px solid var(--bb-border-2); border-radius: var(--bb-r-lg); background: var(--bb-surface); }
.bb-cal-fallback p { color: var(--bb-text-2); margin-bottom: var(--bb-md); }
.bb-cal-fallback a { color: var(--bb-accent-1); }
/* Stack early. Side by side, the calendar column drops under ~700px on these widths, which is
   where Calendly falls back to its tall single-column layout and needs a scrollbar again.
   Stacked, it gets the full container and stays short. */
@media (max-width: 1120px) {
    .bb-book-layout { grid-template-columns: 1fr; gap: var(--bb-xl); }
    .bb-cal-embed { height: 720px; min-height: 720px; }
}
/* On a phone Calendly stacks month, day and times, so the box has to be taller than the screen.
   Scrolling the page past it beats scrolling inside it. */
@media (max-width: 600px) {
    .bb-cal-embed { height: 1000px; min-height: 1000px; }
}
.bb-doc-layout { display: grid; grid-template-columns: 240px 1fr; gap: var(--bb-2xl); align-items: start; padding-bottom: var(--bb-3xl); }
.bb-doc-nav { position: sticky; top: 100px; }
.bb-doc-nav h5 { font-family: var(--bb-font-mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .16em; color: var(--bb-text-3); margin: 0 0 var(--bb-sm); font-weight: 600; }
.bb-doc-nav ul { list-style: none; margin: 0 0 var(--bb-lg); padding: 0; }
.bb-doc-nav ul li { margin-bottom: .3rem; }
.bb-doc-nav ul a { display: block; padding: .45rem .75rem; border-radius: 9px; color: var(--bb-text-2); font-size: .93rem; }
.bb-doc-nav ul a:hover, .bb-doc-nav ul a.bb-active { background: var(--bb-surface-2); color: var(--bb-text); }
.bb-doc-content { max-width: 780px; }
.bb-doc-content h2 { margin: var(--bb-2xl) 0 var(--bb-md); scroll-margin-top: 100px; }
.bb-doc-content h2:first-child { margin-top: 0; }
.bb-doc-content h3 { margin: var(--bb-xl) 0 var(--bb-sm); }
.bb-doc-content p { color: var(--bb-text-2); margin-bottom: var(--bb-md); line-height: 1.75; }
.bb-doc-content ul.bb-doc-list { margin: 0 0 var(--bb-md) 1.2rem; color: var(--bb-text-2); }
.bb-doc-content ul.bb-doc-list li { margin-bottom: .5rem; line-height: 1.6; }
.bb-doc-content code { background: var(--bb-surface-2); border: 1px solid var(--bb-border); border-radius: 6px; padding: .12rem .45rem; font-family: var(--bb-font-mono); font-size: .88em; color: var(--bb-accent-2); }
.bb-doc-content pre { background: var(--bb-bg-2); border: 1px solid var(--bb-border); border-radius: var(--bb-r-md); padding: var(--bb-md); overflow-x: auto; margin-bottom: var(--bb-md); }
.bb-doc-content pre code { background: none; border: 0; padding: 0; color: var(--bb-text); }
.bb-callout { background: var(--bb-grad-soft); border: 1px solid rgba(var(--bb-accent-rgb), .3); border-left: 3px solid var(--bb-accent-1); border-radius: var(--bb-r-md); padding: var(--bb-md); margin-bottom: var(--bb-md); }
.bb-callout p { margin: 0; color: var(--bb-text); }

/* =====================================================================
   MOTION
   ===================================================================== */
@keyframes bb-float { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(40px, -50px) scale(1.06); } 66% { transform: translate(-30px, 30px) scale(.96); } }
@keyframes bb-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes bb-fade-up { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }
@keyframes bb-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(.85); } }
@keyframes bb-bar { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.76); } }
@keyframes bb-rot { to { transform: rotate(360deg); } }
@keyframes bb-spin { to { transform: rotate(360deg); } }
@keyframes bb-spin-rev { to { transform: rotate(-360deg); } }
@keyframes bb-dash { to { stroke-dashoffset: -13; } }
@keyframes bb-draw { 0% { stroke-dashoffset: 320; } 55% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -320; } }

/* Content is visible by default; hidden for the reveal only once JS confirms */
.bb-reveal { opacity: 1; }
.bb-js .bb-reveal { opacity: 0; }
.bb-js .bb-reveal.bb-in { animation: bb-fade-up .7s cubic-bezier(.22, 1, .36, 1) forwards; }

@media (prefers-reduced-motion: reduce) {
    .bb-orb, .bb-marquee-track, .bb-orbit, .bb-omark > span, .bb-dash-chart i, .bb-minichart i, .bb-pulse-line, .bb-flow-arrow line { animation: none !important; }
    .bb-js .bb-reveal { opacity: 1; animation: none; }
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 1240px) {
    .bb-orbit { display: none; }
}
@media (max-width: 1024px) {
    .bb-megamenu { display: none; }
    .bb-split2 { grid-template-columns: 1fr; }
    .bb-domains { grid-template-columns: repeat(2, 1fr); }
    .bb-cust { grid-template-columns: 1fr; }
    .bb-grid-4 { grid-template-columns: repeat(2, 1fr); }
    .bb-grid-3 { grid-template-columns: repeat(2, 1fr); }
    .bb-steps { grid-template-columns: repeat(2, 1fr); }
    .bb-steps::before { display: none; }
    .bb-split { grid-template-columns: 1fr; gap: var(--bb-xl); }
    .bb-tabs { grid-template-columns: 1fr; }
    .bb-footer-grid { grid-template-columns: 1fr 1fr; gap: var(--bb-lg); }
    .bb-doc-layout { grid-template-columns: 1fr; }
    .bb-doc-nav { position: static; }
    .bb-cap-list { grid-template-columns: 1fr 1fr; }
    .bb-hero-inner { grid-template-columns: 1fr; gap: var(--bb-2xl); text-align: center; }
    .bb-hero-copy { text-align: center; }
    .bb-hero-desc { margin-left: auto; margin-right: auto; }
    .bb-hero-btns { justify-content: center; }
    .bb-hero-visual { max-width: 560px; margin: 0 auto; width: 100%; }
    .bb-bento { grid-template-columns: repeat(2, 1fr); }
    .bb-t-2x2 { grid-column: span 2; grid-row: span 1; }
    .bb-flow { grid-template-columns: 1fr; gap: .4rem; }
    .bb-flow-arrow svg { width: 44px; height: 44px; transform: rotate(90deg); margin: 0 auto; }
}
@media (max-width: 760px) {
    /* Single-pager: the section links are redundant on mobile, where the page is one scroll. */
    .bb-nav-menu, .bb-nav-actions .bb-login { display: none; }
    .bb-container { padding: 0 1.15rem; }
    .bb-grid-4, .bb-grid-3, .bb-steps, .bb-form-grid, .bb-footer-grid, .bb-cap-list, .bb-bento, .bb-domains { grid-template-columns: 1fr; }
    .bb-t-2x2, .bb-t-2x1 { grid-column: span 1; }
    .bb-hero { padding: 7.2rem 0 var(--bb-2xl); }
    .bb-hero-statbar { grid-template-columns: repeat(2, 1fr); gap: var(--bb-lg); }
    #bb-studio { width: calc(100vw - 24px); right: 12px; }
    .bb-footer-bottom { flex-direction: column; text-align: center; }
    .bb-quote-glyph { font-size: 4rem; }

    /* Mobile length control. Tighten the rhythm and drop decorative visuals that add
       height without adding meaning on a phone. */
    :root { --bb-2xl: 2.75rem; --bb-3xl: 3.25rem; }
    .bb-section { padding: var(--bb-3xl) 0; }
    .bb-sechead { margin-bottom: var(--bb-xl); }
    .bb-tile { padding: 1.15rem; }
    .bb-tile .bb-mini { display: none; }
    .bb-panel { padding: var(--bb-lg); }
    .bb-cust-card { padding: var(--bb-lg); }
    .bb-logowall-grid { gap: .9rem 1.8rem; }
    .bbx .bb-logowall-item img { height: 30px; max-width: 124px; }
    .bb-marquee-group { gap: 2rem; padding-right: 2rem; }
    .bb-marquee-track { gap: .6rem; }

    /* Cards: less chrome per card so a six-card grid is not six full screens. */
    .bb-card { padding: var(--bb-md); }
    .bb-card-icon { width: 42px; height: 42px; margin-bottom: .8rem; }
    .bb-card-icon svg { width: 21px; height: 21px; }
    .bb-grid { gap: .75rem; }

    /* Footer: keep the link columns paired rather than one long ladder. */
    .bb-footer { padding: var(--bb-2xl) 0 var(--bb-md); }
    .bb-footer-grid { grid-template-columns: 1fr 1fr; gap: var(--bb-lg) var(--bb-md); margin-bottom: var(--bb-lg); }
    .bb-footer-main { grid-column: 1 / -1; max-width: none; }
    .bb-footer ul li { margin-bottom: .5rem; }
    .bb-subscribe { padding: var(--bb-md); gap: var(--bb-md); }

    /* Flow diagram: the connector arrows are decorative once the panels stack. */
    .bb-flow-arrow { display: none; }
    .bb-flow { gap: .6rem; }
    .bb-feature-list li { margin-bottom: var(--bb-sm); }

    /* Buttons default to nowrap, which clips long labels on a narrow screen.
       Let them wrap and stay inside the viewport instead. */
    .bb-btn { white-space: normal; max-width: 100%; text-align: center; }
}