:root {
    color-scheme: dark;
    --bp-bg: #050816;
    --bp-bg-secondary: #090e20;
    --bp-surface: #10172b;
    --bp-surface-raised: #151d35;
    --bp-primary: #7c3aed;
    --bp-primary-hover: #6d28d9;
    --bp-accent: #a855f7;
    --bp-blue: #2563eb;
    --bp-text: #f8fafc;
    --bp-text-muted: #a7b1c5;
    --bp-border: #26304a;
    --bp-success: #22c55e;
    --bp-warning: #f59e0b;
    --bp-error: #ef4444;
    --bp-space-1: 4px;
    --bp-space-2: 8px;
    --bp-space-3: 12px;
    --bp-space-4: 16px;
    --bp-space-5: 20px;
    --bp-space-6: 24px;
    --bp-space-8: 32px;
    --bp-motion-fast: 160ms;
    --bp-motion-normal: 200ms;
    --bp-z-header: 30;
    --bp-z-bottom-nav: 35;
    --bp-z-overlay: 39;
    --bp-z-modal: 40;
    --bp-z-toast: 100;
    --bp-gradient: linear-gradient(115deg, #7c3aed 0%, #9333ea 48%, #4f46e5 100%);
    --bp-radius-card: 18px;
    --bp-radius-control: 12px;
    --bp-shadow: 0 24px 70px rgb(0 0 0 / 24%);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    font-variant-numeric: tabular-nums;
}

/* Compact live-service configuration (native Blade + progressive enhancement). */
.bp-quick-order { max-width: 1180px; margin-inline: auto; }
.bp-quick-order__heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.bp-quick-order__heading h1 { margin: 7px 0 5px; font-size: clamp(27px, 3vw, 36px); line-height: 1.1; letter-spacing: -.045em; }
.bp-quick-order__heading p { margin: 0; color: var(--bp-text-muted); font-size: 12px; }
.bp-quick-order__trust { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid rgb(34 197 94 / 22%); border-radius: 999px; color: #bbf7d0; background: rgb(34 197 94 / 7%); font-size: 10px; font-weight: 650; }
.bp-quick-order__trust i, .bp-live-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--bp-success); box-shadow: 0 0 9px rgb(34 197 94 / 42%); }
.bp-platform-selector { display: flex; overflow-x: auto; gap: 8px; padding: 0 0 12px; scrollbar-width: thin; scrollbar-color: #35405e transparent; }
.bp-platform-tab { display: inline-flex; flex: 0 0 auto; min-height: 46px; align-items: center; gap: 9px; padding: 6px 13px 6px 7px; border: 1px solid var(--bp-border); border-radius: 12px; color: #c5cde0; background: #0d1427; font-size: 11px; font-weight: 620; transition: border-color var(--bp-motion-normal) ease, background var(--bp-motion-normal) ease, color var(--bp-motion-normal) ease; }
.bp-platform-tab .bp-platform-mark { width: 32px; height: 32px; flex-basis: 32px; border-radius: 9px; font-size: 13px; }
.bp-platform-tab:hover, .bp-platform-tab.is-active { border-color: #8b5cf6; color: #fff; background: linear-gradient(125deg, rgb(124 58 237 / 20%), #111a31); }
.bp-platform-tab.is-unavailable { opacity: .58; }
.bp-quick-order__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .72fr); align-items: start; gap: 16px; }
.bp-quick-order__form { display: grid; gap: 12px; min-width: 0; }
.bp-config-card, .bp-live-preview, .bp-price-summary { min-width: 0; padding: 18px; border: 1px solid rgb(53 65 94 / 76%); border-radius: 16px; background: linear-gradient(145deg, rgb(17 25 46 / 96%), rgb(10 16 31 / 98%)); box-shadow: 0 12px 32px rgb(0 0 0 / 12%); }
.bp-config-step { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 14px; }
.bp-config-step > span { display: grid; width: 29px; height: 29px; flex: 0 0 29px; place-items: center; border: 1px solid rgb(167 139 250 / 30%); border-radius: 9px; color: #ddd6fe; background: rgb(124 58 237 / 14%); font-size: 10px; font-weight: 750; }
.bp-config-step h2 { margin: 1px 0 2px; font-size: 14px; letter-spacing: -.02em; }
.bp-config-step p { margin: 0; color: #929db4; font-size: 10px; line-height: 1.5; }
.bp-config-card .bp-shop-field select, .bp-config-card .bp-shop-field input { width: 100%; min-width: 0; min-height: 46px; padding: 0 13px; border: 1px solid #303b58; border-radius: 10px; color: var(--bp-text); background: #090e1e; font: inherit; font-size: 12px; }
.bp-config-card .bp-shop-field input:focus, .bp-config-card .bp-shop-field select:focus { border-color: #8b5cf6; box-shadow: 0 0 0 3px rgb(139 92 246 / 14%); }
.bp-service-detail { margin: 10px 0 0; color: #9ca8bd; font-size: 10px; line-height: 1.55; }
.bp-service-bounds { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 13px; padding-top: 11px; border-top: 1px solid rgb(53 65 94 / 58%); color: #8f9ab0; font-size: 9px; }
.bp-service-bounds strong { color: #e2e8f0; font-weight: 650; }
.bp-field-hint { min-height: 13px; margin: 7px 0 0; color: #8e9ab1; font-size: 9px; line-height: 1.45; }
.bp-quantity-control { display: grid; grid-template-columns: 46px minmax(100px, 180px) 46px; justify-content: start; gap: 8px; }
.bp-quantity-control > button { min-height: 46px; border: 1px solid #36415f; border-radius: 11px; color: #e9ddff; background: #151d34; font-size: 21px; cursor: pointer; transition: background var(--bp-motion-fast) ease, border-color var(--bp-motion-fast) ease; }
.bp-quantity-control > button:hover { border-color: #8b5cf6; background: #231743; }
.bp-quantity-control input { width: 100%; min-height: 46px; border: 1px solid #36415f; border-radius: 11px; color: white; background: #080d1c; text-align: center; font-size: 16px; font-weight: 700; }
.bp-quantity-presets { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.bp-quantity-presets button { min-width: 57px; min-height: 34px; padding-inline: 11px; border: 1px solid #303b58; border-radius: 9px; color: #c6cee0; background: #0b1121; font-size: 10px; cursor: pointer; }
.bp-quantity-presets button:hover { border-color: #7653bd; color: #fff; }
.bp-duration-unavailable { display: flex; gap: 9px; margin: 0; padding: 12px 14px; border: 1px solid rgb(245 158 11 / 18%); border-radius: 12px; color: #c9bd9f; background: rgb(245 158 11 / 5%); font-size: 10px; line-height: 1.55; }
.bp-duration-unavailable > span { color: #fcd34d; }
.bp-quick-order__side { position: sticky; top: 90px; display: grid; gap: 12px; min-width: 0; }
.bp-live-preview { padding: 13px; }
.bp-live-preview__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 2px 11px; }
.bp-live-preview__top .bp-eyebrow { font-size: 9px; }
.bp-live-status { display: inline-flex; align-items: center; gap: 6px; color: #aab5c9; font-size: 9px; }
.bp-live-status i { width: 6px; height: 6px; background: #73809a; box-shadow: none; }
.bp-live-player { position: relative; overflow: hidden; aspect-ratio: 16 / 9; display: grid; place-items: center; border: 1px solid #29344f; border-radius: 11px; background: #050812; }
.bp-live-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.bp-live-player__placeholder { display: grid; max-width: 260px; justify-items: center; gap: 6px; padding: 16px; color: #e5eaf4; text-align: center; }
.bp-live-player__placeholder > span { display: grid; width: 38px; height: 38px; place-items: center; margin-bottom: 3px; border-radius: 12px; color: #ddd6fe; background: rgb(124 58 237 / 17%); }
.bp-live-player__placeholder strong { font-size: 11px; }
.bp-live-player__placeholder small { color: #8894aa; font-size: 9px; line-height: 1.5; }
.bp-live-player__placeholder a, .bp-live-player > a { color: #c4b5fd; font-size: 10px; text-decoration: underline; }
.bp-player-skeleton { position: absolute; z-index: 1; inset: 0; background: linear-gradient(100deg, #0b1121 25%, #1a2340 40%, #0b1121 60%); background-size: 220% 100%; animation: bp-skeleton 1.2s ease-in-out infinite; pointer-events: none; }
.bp-live-metadata { display: flex; justify-content: space-between; gap: 9px; padding: 9px 2px 1px; color: #8995ad; font-size: 9px; }
.bp-price-summary h2 { margin: 5px 0 15px; font-size: 17px; }
.bp-summary-row, .bp-summary-total { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid rgb(53 65 94 / 52%); color: #98a4b9; font-size: 10px; }
.bp-summary-row strong { max-width: 64%; color: #e4e9f3; font-size: 10px; text-align: right; overflow-wrap: anywhere; }
.bp-summary-total { align-items: center; margin-top: 4px; padding: 13px 0; border-bottom: 0; color: #dce2ee; font-size: 11px; font-weight: 650; }
.bp-summary-total strong { color: #fff; font-size: 22px; letter-spacing: -.035em; }
.bp-summary-note { margin: 0 0 13px; color: #8793aa; font-size: 9px; line-height: 1.5; }
.bp-price-summary form .bp-button { width: 100%; min-height: 48px; }
.bp-quick-order__footnote { display: flex; gap: 10px; margin-top: 13px; padding: 12px 15px; border: 1px solid rgb(37 99 235 / 18%); border-radius: 12px; color: #98a8c2; background: rgb(37 99 235 / 5%); font-size: 9px; line-height: 1.55; }
.bp-quick-order__footnote strong { flex: 0 0 auto; color: #bfdbfe; }
@keyframes bp-skeleton { to { background-position-x: -220%; } }
@media (max-width: 850px) { .bp-quick-order__grid { grid-template-columns: minmax(0, 1fr) minmax(280px, .85fr); gap: 11px; }.bp-config-card { padding: 15px; }.bp-quick-order__side { top: 76px; } }
@media (max-width: 700px) { .bp-quick-order__heading { align-items: flex-start; flex-direction: column; gap: 10px; }.bp-quick-order__grid { grid-template-columns: 1fr; }.bp-quick-order__side { position: static; }.bp-price-summary { order: -1; }.bp-live-preview { order: 1; }.bp-config-card { padding: 16px; }.bp-quick-order__footnote { margin-bottom: 8px; } }
@media (max-width: 420px) { .bp-platform-tab { min-height: 44px; padding-right: 10px; font-size: 10px; }.bp-platform-tab .bp-platform-mark { width: 29px; height: 29px; flex-basis: 29px; }.bp-quick-order__heading h1 { font-size: 27px; }.bp-summary-total strong { font-size: 20px; } }
.bp-order-timeline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 0 16px; padding: 15px; border: 1px solid var(--bp-border); border-radius: 15px; background: #0c1325; }
.bp-order-timeline__step { display: grid; justify-items: center; gap: 7px; color: #74819a; text-align: center; font-size: 10px; }
.bp-order-timeline__step > span { display: grid; width: 27px; height: 27px; place-items: center; border: 1px solid #36415b; border-radius: 50%; background: #111a30; font-size: 12px; }
.bp-order-timeline__step.is-done { color: #d8ccff; }.bp-order-timeline__step.is-done > span { border-color: #7c3aed; color: white; background: #5b21b6; }
.bp-order-event { display: flex; flex-wrap: wrap; gap: 5px 12px; padding: 9px 0; border-bottom: 1px solid rgb(53 65 94 / 50%); color: #b6c0d1; font-size: 11px; }.bp-order-event time { color: #8793aa; }
@media (prefers-reduced-motion: reduce) { .bp-player-skeleton { animation: none; } }

@font-face { font-family: Inter; src: url('/fonts/Inter.var.woff2') format('woff2'); font-style: normal; font-weight: 100 900; font-display: swap; }
* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; scroll-padding-top: 90px; background: var(--bp-bg); }
body.bp-body { min-width: 320px; min-height: 100vh; margin: 0; overflow-x: clip; color: var(--bp-text); background: radial-gradient(ellipse at 50% -30%, rgb(79 70 229 / 16%), transparent 55%), var(--bp-bg); font-size: 14px; line-height: 1.55; padding-bottom: env(safe-area-inset-bottom); }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button, a, summary { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid #a78bfa; outline-offset: 3px; }
.bp-container { width: min(100% - 64px, 1280px); margin-inline: auto; }
.bp-skip-link { position: fixed; z-index: 100; top: 8px; left: 8px; padding: 10px 14px; transform: translateY(-160%); border-radius: 10px; color: #fff; background: var(--bp-primary); }
.bp-skip-link:focus { transform: translateY(0); }
.bp-header { position: sticky; z-index: 30; top: 0; border-bottom: 1px solid rgb(38 48 74 / 75%); background: rgb(5 8 22 / 88%); backdrop-filter: blur(18px); }
.bp-header__inner { display: flex; min-height: 76px; align-items: center; justify-content: space-between; gap: 28px; }
.bp-brand { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 10px; }
.bp-brand__mark { display: flex; width: 38px; height: 38px; align-items: center; justify-content: center; gap: 3px; border: 1px solid rgb(168 85 247 / 42%); border-radius: 12px; background: linear-gradient(145deg, rgb(124 58 237 / 24%), rgb(37 99 235 / 15%)); }
.bp-brand__mark i { width: 3px; border-radius: 9px; background: #c4b5fd; box-shadow: 0 0 10px rgb(168 85 247 / 50%); }
.bp-brand__mark i:nth-child(1) { height: 10px; }.bp-brand__mark i:nth-child(2) { height: 18px; }.bp-brand__mark i:nth-child(3) { height: 13px; }
.bp-brand__copy { display: grid; gap: 0; line-height: 1.1; }.bp-brand__copy strong { font-size: 17px; font-weight: 750; letter-spacing: -.04em; }.bp-brand__copy small { margin-top: 5px; color: var(--bp-text-muted); font-size: 8px; font-weight: 700; letter-spacing: .13em; }
.bp-desktop-nav { display: flex; height: 76px; align-items: center; gap: clamp(15px, 2vw, 28px); }
.bp-desktop-nav > a, .bp-platform-menu > summary { display: inline-flex; min-height: 44px; align-items: center; gap: 5px; color: var(--bp-text-muted); font-size: 13px; font-weight: 550; transition: color 180ms ease; }
.bp-desktop-nav > a:hover, .bp-desktop-nav > a[aria-current="page"], .bp-platform-menu[open] > summary { color: var(--bp-text); }
.bp-platform-menu { position: relative; }.bp-platform-menu summary, .bp-drawer details summary { cursor: pointer; list-style: none; }.bp-platform-menu summary::-webkit-details-marker, .bp-drawer summary::-webkit-details-marker { display: none; }
.bp-platform-menu summary svg, .bp-drawer summary svg { width: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; transition: transform 180ms ease; }.bp-platform-menu[open] summary svg, .bp-drawer details[open] summary svg { transform: rotate(180deg); }
.bp-platform-menu__panel { position: absolute; top: calc(100% - 2px); left: -16px; display: grid; width: 230px; padding: 8px; border: 1px solid var(--bp-border); border-radius: 14px; background: var(--bp-surface); box-shadow: var(--bp-shadow); }
.bp-platform-menu__panel a { padding: 10px 12px; border-radius: 9px; color: var(--bp-text-muted); font-size: 13px; }.bp-platform-menu__panel a:hover { color: var(--bp-text); background: var(--bp-surface-raised); }
.bp-header__actions { display: flex; flex: 0 0 auto; align-items: center; gap: 10px; }
.bp-icon-button { position: relative; display: inline-grid; width: 44px; height: 44px; place-items: center; border: 1px solid transparent; border-radius: 12px; color: var(--bp-text); background: transparent; cursor: pointer; }
.bp-icon-button:hover { border-color: var(--bp-border); background: var(--bp-surface); }.bp-icon-button svg, .bp-bottom-nav svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.bp-cart-count { position: absolute; top: 2px; right: 0; display: grid; min-width: 18px; height: 18px; place-items: center; padding-inline: 4px; border: 2px solid var(--bp-bg); border-radius: 999px; color: white; background: var(--bp-primary); font-size: 10px; font-weight: 700; }
.bp-button { display: inline-flex; min-height: 46px; align-items: center; justify-content: center; gap: 8px; padding: 0 18px; border: 1px solid transparent; border-radius: var(--bp-radius-control); color: var(--bp-text); font-size: 13px; font-weight: 650; cursor: pointer; transition: transform 160ms ease, background 160ms ease, border-color 160ms ease, box-shadow 160ms ease; }
.bp-button:hover { transform: translateY(-1px); }.bp-button:active { transform: scale(.98); }.bp-button--primary { background: var(--bp-gradient); box-shadow: 0 8px 24px rgb(124 58 237 / 19%); }.bp-button--primary:hover { box-shadow: 0 10px 28px rgb(124 58 237 / 30%); }.bp-button--secondary { border-color: var(--bp-border); background: var(--bp-surface-raised); }.bp-button--secondary:hover, .bp-button--quiet:hover { border-color: #4b5674; background: #1a2340; }.bp-button--quiet { min-height: 42px; border-color: var(--bp-border); background: transparent; }
.bp-menu-trigger { display: none; }
.bp-button--primary { background-size: 170% 100%; background-position: left center; transition: transform 200ms ease, background-position 220ms ease, border-color 200ms ease, box-shadow 220ms ease, filter 200ms ease; }.bp-button--primary:hover { transform: translateY(-2px); background-position: right center; box-shadow: 0 12px 30px rgb(124 58 237 / 31%), inset 0 1px 0 rgb(255 255 255 / 13%); filter: saturate(1.06); }.bp-button:active { transform: scale(.98); }.bp-button:disabled, .bp-button[aria-disabled="true"] { opacity: .52; cursor: not-allowed; pointer-events: none; }.bp-button.is-loading { position: relative; color: transparent !important; pointer-events: none; }.bp-button.is-loading::after { position: absolute; width: 17px; height: 17px; border: 2px solid rgb(255 255 255 / 42%); border-top-color: white; border-radius: 50%; content: ""; animation: bp-spin 700ms linear infinite; }.bp-button.is-success { border-color: rgb(34 197 94 / 35%); background: linear-gradient(110deg, #15803d, #16a34a); }.bp-button.is-error { border-color: rgb(239 68 68 / 40%); box-shadow: 0 0 0 3px rgb(239 68 68 / 10%); }
@keyframes bp-spin { to { transform: rotate(360deg); } }
.bp-main { min-height: 56vh; padding-block: 70px 92px; }
.bp-preview-card { position: relative; overflow: hidden; padding: clamp(28px, 5vw, 64px); border: 1px solid var(--bp-border); border-radius: 24px; background: radial-gradient(ellipse at 83% 15%, rgb(124 58 237 / 22%), transparent 40%), linear-gradient(135deg, var(--bp-surface), #0b1125 72%); box-shadow: var(--bp-shadow); }
.bp-preview-card::after { position: absolute; top: -120px; right: 9%; width: 250px; height: 250px; border: 1px solid rgb(168 85 247 / 20%); border-radius: 50%; content: ""; box-shadow: 0 0 0 28px rgb(168 85 247 / 3%), 0 0 0 58px rgb(168 85 247 / 2%); pointer-events: none; }
.bp-eyebrow { display: inline-flex; align-items: center; gap: 9px; color: #c4b5fd; font-size: 11px; font-weight: 750; letter-spacing: .12em; }.bp-status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--bp-success); box-shadow: 0 0 12px rgb(34 197 94 / 55%); }
.bp-preview-card h1 { max-width: 720px; margin: 19px 0 14px; font-size: clamp(36px, 5vw, 58px); line-height: 1.06; letter-spacing: -.055em; }.bp-preview-card p { max-width: 650px; margin: 0; color: var(--bp-text-muted); font-size: 16px; }.bp-preview-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.bp-preview-section { margin-top: 58px; }.bp-preview-section h2, .bp-sample-card h2 { margin: 8px 0 18px; font-size: 23px; letter-spacing: -.035em; }.bp-platform-chips { display: flex; flex-wrap: wrap; gap: 10px; }.bp-platform-chips span { display: inline-flex; min-height: 42px; align-items: center; padding: 0 15px; border: 1px solid var(--bp-border); border-radius: 12px; color: var(--bp-text-muted); background: var(--bp-surface); font-weight: 600; }
.bp-component-samples { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }.bp-sample-card { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; padding: 24px; border: 1px solid var(--bp-border); border-radius: var(--bp-radius-card); background: linear-gradient(145deg, var(--bp-surface), #0b1121); }.bp-sample-card p { margin: 0 0 18px; color: var(--bp-text-muted); }.bp-sample-icon { display: grid; width: 42px; height: 42px; place-items: center; margin-bottom: 20px; border-radius: 13px; color: #d8b4fe; background: rgb(124 58 237 / 18%); font-size: 22px; }.bp-badge { display: inline-flex; min-height: 28px; align-items: center; padding: 0 10px; border: 1px solid rgb(245 158 11 / 28%); border-radius: 999px; color: #fcd34d; background: rgb(245 158 11 / 9%); font-size: 11px; font-weight: 650; }.bp-field-label { margin: 2px 0 7px; color: var(--bp-text-muted); font-size: 12px; font-weight: 600; }.bp-input { width: 100%; min-height: 48px; margin-bottom: 14px; padding: 0 14px; border: 1px solid var(--bp-border); border-radius: var(--bp-radius-control); color: var(--bp-text); background: #090e20; }.bp-input::placeholder { color: #77829b; }.bp-sample-card .bp-button { margin-top: auto; }
.bp-preview-note { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 28px; padding: 16px 18px; border: 1px solid rgb(37 99 235 / 25%); border-radius: 13px; color: var(--bp-text-muted); background: rgb(37 99 235 / 7%); font-size: 12px; }.bp-preview-note strong { color: #bfdbfe; }
.bp-footer { padding: 48px 0 max(24px, env(safe-area-inset-bottom)); border-top: 1px solid var(--bp-border); background: #070b18; }.bp-footer__grid { display: grid; grid-template-columns: 1.7fr repeat(3, 1fr); gap: 34px; }.bp-footer__brand p { max-width: 270px; margin: 16px 0 0; color: var(--bp-text-muted); font-size: 13px; }.bp-footer__grid h2 { margin: 2px 0 14px; font-size: 13px; }.bp-footer__grid > div:not(:first-child) { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }.bp-footer__grid > div > a:not(.bp-brand) { color: var(--bp-text-muted); font-size: 12px; }.bp-footer__grid > div > a:not(.bp-brand):hover { color: var(--bp-text); }.bp-footer__bottom { display: flex; justify-content: space-between; gap: 12px; margin-top: 36px; padding-top: 19px; border-top: 1px solid rgb(38 48 74 / 70%); color: #8490a8; font-size: 11px; }
.bp-drawer-backdrop[hidden] { display: none; }.bp-drawer-backdrop { position: fixed; z-index: 39; inset: 0; background: rgb(1 3 12 / 70%); backdrop-filter: blur(3px); }.bp-drawer { position: fixed; z-index: 40; inset: 0 0 0 auto; display: flex; width: min(88vw, 380px); flex-direction: column; padding: max(20px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom)); transform: translateX(105%); border-left: 1px solid var(--bp-border); background: var(--bp-bg-secondary); transition: transform 220ms ease; }.bp-drawer.is-open { transform: translateX(0); }.bp-drawer__top { display: flex; align-items: center; justify-content: space-between; padding-bottom: 20px; border-bottom: 1px solid var(--bp-border); }.bp-drawer__nav { display: flex; overflow-y: auto; flex-direction: column; gap: 3px; padding-top: 14px; }.bp-drawer__nav > a, .bp-drawer__nav > details > summary { display: flex; min-height: 48px; align-items: center; justify-content: space-between; padding: 0 12px; border-radius: 11px; color: var(--bp-text); font-weight: 550; }.bp-drawer__nav > a:hover, .bp-drawer__nav > details[open] > summary { background: var(--bp-surface); }.bp-drawer__platforms { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 4px 8px 12px; }.bp-drawer__platforms a { padding: 10px 8px; border-radius: 8px; color: var(--bp-text-muted); font-size: 12px; }.bp-drawer__platforms a:hover { color: var(--bp-text); background: var(--bp-surface); }.bp-menu-open { overflow: hidden; }
.bp-bottom-nav { display: none; }
.bp-toast-region { position: fixed; z-index: 100; top: calc(18px + env(safe-area-inset-top)); right: 18px; display: grid; width: min(390px, calc(100vw - 36px)); gap: 9px; pointer-events: none; }.bp-toast { display: grid; grid-template-columns: 28px 1fr 30px; align-items: center; gap: 10px; padding: 12px; transform: translateY(-8px); border: 1px solid var(--bp-border); border-radius: 13px; opacity: 0; background: rgb(15 22 41 / 97%); box-shadow: 0 18px 45px rgb(0 0 0 / 36%); backdrop-filter: blur(14px); transition: transform 200ms ease, opacity 200ms ease; pointer-events: auto; }.bp-toast.is-visible { transform: translateY(0); opacity: 1; }.bp-toast.is-leaving { transform: translateY(-5px); opacity: 0; }.bp-toast__icon { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 50%; color: #bfdbfe; background: rgb(37 99 235 / 16%); font-size: 13px; font-weight: 800; }.bp-toast--success .bp-toast__icon { color: #86efac; background: rgb(34 197 94 / 14%); }.bp-toast--error .bp-toast__icon { color: #fca5a5; background: rgb(239 68 68 / 14%); }.bp-toast__message { color: #e5eaf4; font-size: 12px; line-height: 1.45; }.bp-toast__close { display: grid; width: 30px; height: 30px; place-items: center; border: 0; border-radius: 8px; color: #9ba6bb; background: transparent; font-size: 19px; cursor: pointer; }.bp-toast__close:hover { color: white; background: #202a43; }

@media (max-width: 1100px) {
    .bp-container { width: min(100% - 48px, 1280px); }.bp-header__inner { gap: 16px; }.bp-desktop-nav { gap: 15px; }.bp-desktop-nav > a, .bp-platform-menu > summary { font-size: 12px; }.bp-header__actions { gap: 5px; }
}
@media (max-width: 900px) {
    .bp-container { width: min(100% - 40px, 1280px); }.bp-desktop-nav, .bp-login { display: none; }.bp-header__inner { min-height: 66px; }.bp-menu-trigger { display: inline-grid; }.bp-main { padding-top: 44px; }.bp-footer__grid { grid-template-columns: 1.5fr 1fr 1fr; }.bp-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
    html { scroll-padding-top: 76px; }.bp-container { width: calc(100% - 32px); }.bp-header__inner { min-height: 60px; }.bp-brand__mark { width: 35px; height: 35px; }.bp-brand__copy strong { font-size: 16px; }.bp-main { min-height: 55vh; padding-block: 28px 38px; }.bp-preview-card { padding: 27px 21px 24px; border-radius: 19px; }.bp-preview-card::after { top: -170px; right: -90px; }.bp-preview-card h1 { max-width: 420px; margin-top: 17px; font-size: clamp(34px, 9vw, 42px); }.bp-preview-card p { font-size: 14px; }.bp-preview-actions { display: grid; grid-template-columns: 1fr; margin-top: 22px; }.bp-preview-actions .bp-button { width: 100%; }.bp-preview-section { margin-top: 39px; }.bp-preview-section h2, .bp-sample-card h2 { font-size: 20px; }.bp-platform-chips { gap: 8px; }.bp-platform-chips span { min-height: 38px; padding-inline: 11px; font-size: 12px; }.bp-component-samples { grid-template-columns: 1fr; gap: 12px; }.bp-sample-card { padding: 20px; }.bp-preview-note { font-size: 11px; }.bp-footer { padding-top: 32px; padding-bottom: calc(90px + env(safe-area-inset-bottom)); }.bp-footer__grid { grid-template-columns: 1fr 1fr; gap: 28px 18px; }.bp-footer__brand { grid-column: 1 / -1; }.bp-footer__bottom { flex-direction: column; margin-top: 28px; font-size: 10px; }
    .bp-bottom-nav { position: fixed; z-index: 35; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 7px 8px calc(7px + env(safe-area-inset-bottom)); border-top: 1px solid var(--bp-border); background: rgb(9 14 32 / 96%); backdrop-filter: blur(18px); }.bp-bottom-nav a { display: flex; min-width: 0; min-height: 52px; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border-radius: 10px; color: #8e9ab2; font-size: 10px; font-weight: 600; }.bp-bottom-nav a[aria-current="page"] { color: #c4b5fd; }.bp-bottom-nav a[aria-current="page"] svg { color: #a78bfa; }.bp-bottom-nav svg { width: 19px; height: 19px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }

/* BotPulse home */
.bp-main:has(.bp-hero) { padding-top: 46px; padding-bottom: 96px; }
.bp-hero { display: grid; min-height: 520px; grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); align-items: center; gap: 28px; }
.bp-hero__copy { position: relative; z-index: 1; padding-block: 22px; }
.bp-hero__copy h1 { max-width: 690px; margin: 19px 0 17px; font-size: clamp(43px, 5.2vw, 66px); font-weight: 750; line-height: 1.045; letter-spacing: -.058em; }
.bp-hero__copy h1 span { color: #c4b5fd; background: linear-gradient(105deg, #c4b5fd 0%, #a78bfa 50%, #93c5fd 100%); background-clip: text; -webkit-text-fill-color: transparent; }
.bp-hero__copy > p { max-width: 570px; margin: 0; color: var(--bp-text-muted); font-size: 16px; line-height: 1.75; }
.bp-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 27px; }.bp-hero__actions .bp-button { min-height: 50px; padding-inline: 20px; }.bp-hero__actions svg, .bp-final-cta__actions svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.bp-hero__note { display: flex; align-items: center; gap: 8px; margin-top: 22px; color: #929db5; font-size: 12px; }.bp-hero__note span { color: #a78bfa; }
.bp-hero__visual { position: relative; min-width: 0; align-self: stretch; display: grid; min-height: 460px; place-items: center; }.bp-hero__visual-glow { position: absolute; inset: 15% 3% 8%; border-radius: 50%; background: radial-gradient(ellipse, rgb(124 58 237 / 21%), rgb(37 99 235 / 8%) 45%, transparent 72%); filter: blur(14px); }.bp-hero__visual > img { position: relative; z-index: 1; display: block; width: 100%; max-height: 510px; object-fit: contain; filter: drop-shadow(0 24px 42px rgb(0 0 0 / 24%)); }
.bp-float-card { position: absolute; z-index: 2; display: flex; align-items: center; gap: 11px; padding: 12px 15px; border: 1px solid rgb(148 163 194 / 24%); border-radius: 14px; background: rgb(13 20 40 / 88%); box-shadow: 0 18px 40px rgb(0 0 0 / 28%); backdrop-filter: blur(14px); }.bp-float-card--top { top: 16%; right: -2%; }.bp-float-card--bottom { bottom: 13%; left: -3%; }.bp-float-card > span:last-child { display: grid; gap: 2px; }.bp-float-card strong { font-size: 12px; }.bp-float-card small { color: var(--bp-text-muted); font-size: 10px; }.bp-float-icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; font-size: 23px; }.bp-float-icon--purple { color: #ddd6fe; background: rgb(124 58 237 / 23%); }.bp-live-indicator { width: 9px; height: 9px; border-radius: 50%; background: var(--bp-success); box-shadow: 0 0 13px rgb(34 197 94 / 55%); }
.bp-section { margin-top: 102px; }.bp-section-heading { max-width: 720px; margin-bottom: 30px; }.bp-section-heading h2, .bp-faq-intro h2 { margin: 10px 0 12px; font-size: clamp(27px, 3.2vw, 38px); font-weight: 700; line-height: 1.13; letter-spacing: -.045em; }.bp-section-heading p, .bp-faq-intro p { max-width: 660px; margin: 0; color: var(--bp-text-muted); font-size: 14px; line-height: 1.7; }.bp-section-heading--row { display: flex; max-width: none; align-items: end; justify-content: space-between; gap: 24px; }.bp-section-heading--row h2 { margin-bottom: 0; }.bp-section-heading--center { margin-inline: auto; text-align: center; }.bp-section-heading--center p { margin-inline: auto; }
.bp-text-link { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 8px; color: #c4b5fd; font-size: 13px; font-weight: 650; }.bp-text-link:hover { color: #e9d5ff; }.bp-text-link span { font-size: 18px; transition: transform 160ms ease; }.bp-text-link:hover span { transform: translateX(3px); }
.bp-platform-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }.bp-platform-card { position: relative; display: flex; min-width: 0; min-height: 92px; align-items: center; gap: 12px; padding: 15px; border: 1px solid var(--bp-border); border-radius: 16px; background: linear-gradient(145deg, rgb(16 23 43 / 90%), rgb(12 18 34 / 90%)); transition: transform 180ms ease, border-color 180ms ease, background 180ms ease; }.bp-platform-card:hover { transform: translateY(-3px); border-color: rgb(167 139 250 / 57%); background: linear-gradient(145deg, #151d35, #11182d); }.bp-platform-mark { display: grid; width: 42px; height: 42px; flex: 0 0 42px; place-items: center; border: 1px solid currentColor; border-radius: 13px; font-size: 18px; font-weight: 800; }.bp-platform-mark--twitch { color: #c4b5fd; background: rgb(145 70 255 / 13%); }.bp-platform-mark--youtube { color: #fca5a5; background: rgb(255 0 0 / 10%); }.bp-platform-mark--kick { color: #86efac; background: rgb(83 252 24 / 9%); }.bp-platform-mark--facebook { color: #93c5fd; background: rgb(24 119 242 / 13%); }.bp-platform-mark--tiktok { color: #f9a8d4; background: rgb(238 29 82 / 10%); }.bp-platform-mark--trovo { color: #86efac; background: rgb(34 197 94 / 10%); }.bp-platform-mark--nimo { color: #fdba74; background: rgb(249 115 22 / 10%); }.bp-platform-mark--rumble { color: #bef264; background: rgb(132 204 22 / 10%); }.bp-platform-mark--other { color: #cbd5e1; background: rgb(148 163 184 / 10%); }.bp-platform-card__name { min-width: 0; color: #e6eaf4; font-size: 12px; font-weight: 650; line-height: 1.3; }.bp-platform-card__arrow { width: 15px; height: 15px; flex: 0 0 auto; margin-left: auto; fill: none; stroke: #7f8aa3; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; transition: transform 180ms ease, stroke 180ms ease; }.bp-platform-card:hover .bp-platform-card__arrow { transform: translateX(3px); stroke: #c4b5fd; }
.bp-services-section { position: relative; }.bp-service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }.bp-service-card { display: flex; min-width: 0; min-height: 290px; flex-direction: column; padding: 23px; border: 1px solid var(--bp-border); border-radius: var(--bp-radius-card); background: linear-gradient(150deg, #121a30, #0d1325 78%); transition: transform 180ms ease, border-color 180ms ease; }.bp-service-card:hover { transform: translateY(-3px); border-color: #414c6e; }.bp-service-icon { display: grid; width: 46px; height: 46px; place-items: center; margin-bottom: 19px; border: 1px solid transparent; border-radius: 14px; }.bp-service-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }.bp-service-icon--purple { color: #c4b5fd; border-color: rgb(124 58 237 / 28%); background: rgb(124 58 237 / 13%); }.bp-service-icon--blue { color: #93c5fd; border-color: rgb(37 99 235 / 28%); background: rgb(37 99 235 / 13%); }.bp-service-icon--green { color: #86efac; border-color: rgb(34 197 94 / 25%); background: rgb(34 197 94 / 10%); }.bp-service-card__category { color: #a7b1c5; font-size: 10px; font-weight: 750; letter-spacing: .1em; }.bp-service-card h3 { margin: 8px 0 9px; font-size: 17px; line-height: 1.3; letter-spacing: -.02em; }.bp-service-card p { margin: 0 0 22px; color: var(--bp-text-muted); font-size: 12px; line-height: 1.7; }.bp-service-card__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 11px; margin-top: auto; padding-top: 14px; border-top: 1px solid rgb(38 48 74 / 75%); }.bp-availability { display: inline-flex; align-items: center; gap: 6px; color: #d6c4ff; font-size: 10px; font-weight: 600; }.bp-availability i { width: 6px; height: 6px; border-radius: 50%; background: var(--bp-warning); }.bp-service-card__bottom > a { display: inline-flex; align-items: center; gap: 6px; color: #c4b5fd; font-size: 11px; font-weight: 700; }.bp-service-card__bottom > a:hover { color: white; }.bp-service-card__bottom > a span { font-size: 16px; }.bp-catalog-disclaimer { display: flex; align-items: flex-start; gap: 8px; margin: 18px 0 0; color: #8995ad; font-size: 11px; line-height: 1.6; }.bp-catalog-disclaimer svg { width: 17px; height: 17px; flex: 0 0 auto; fill: none; stroke: #a7b1c5; stroke-width: 1.5; }
.bp-how-section { padding: 64px 42px 58px; border: 1px solid rgb(38 48 74 / 80%); border-radius: 24px; background: radial-gradient(ellipse at 50% 0, rgb(79 70 229 / 10%), transparent 65%), linear-gradient(145deg, #0c1225, #090e1d); }.bp-how-section .bp-section-heading { margin-bottom: 35px; }.bp-steps-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }.bp-step-card { position: relative; min-width: 0; padding: 22px 21px 20px; border: 1px solid rgb(45 56 84 / 75%); border-radius: 17px; background: rgb(16 23 43 / 74%); }.bp-step-number { position: absolute; top: 17px; right: 18px; color: #76819b; font-size: 11px; font-weight: 750; letter-spacing: .1em; }.bp-step-icon { display: grid; width: 45px; height: 45px; place-items: center; margin-bottom: 20px; border: 1px solid rgb(124 58 237 / 27%); border-radius: 14px; color: #c4b5fd; background: rgb(124 58 237 / 13%); }.bp-step-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }.bp-step-card h3 { margin: 0 0 8px; font-size: 15px; }.bp-step-card p { margin: 0; color: var(--bp-text-muted); font-size: 12px; line-height: 1.65; }
.bp-benefits-section { margin-top: 50px; padding: 25px 22px; border: 1px solid var(--bp-border); border-radius: 18px; background: rgb(14 20 37 / 70%); }.bp-benefits-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }.bp-benefit { display: flex; min-width: 0; align-items: flex-start; gap: 11px; }.bp-benefit > span { display: grid; width: 36px; height: 36px; flex: 0 0 36px; place-items: center; border-radius: 11px; color: #c4b5fd; background: rgb(124 58 237 / 14%); }.bp-benefit svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }.bp-benefit > div { display: grid; gap: 4px; }.bp-benefit strong { font-size: 11px; }.bp-benefit small { color: var(--bp-text-muted); font-size: 10px; line-height: 1.5; }
.bp-faq-section { display: grid; grid-template-columns: minmax(220px, .75fr) minmax(0, 1.25fr); align-items: start; gap: 70px; }.bp-faq-intro { position: sticky; top: 110px; }.bp-faq-intro h2 { margin-top: 13px; font-size: clamp(28px, 3vw, 36px); }.bp-faq-intro p { margin-bottom: 20px; font-size: 13px; }.bp-faq-list { border-top: 1px solid var(--bp-border); }.bp-faq-list details { border-bottom: 1px solid var(--bp-border); }.bp-faq-list summary { position: relative; display: flex; min-height: 65px; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 2px; color: #e7eaf2; font-size: 13px; font-weight: 620; cursor: pointer; list-style: none; }.bp-faq-list summary::-webkit-details-marker { display: none; }.bp-faq-list summary > span { position: relative; width: 24px; height: 24px; flex: 0 0 24px; border: 1px solid var(--bp-border); border-radius: 50%; }.bp-faq-list summary > span::before, .bp-faq-list summary > span::after { position: absolute; top: 10px; left: 6px; width: 10px; height: 1.5px; border-radius: 2px; background: #c4b5fd; content: ""; transition: transform 160ms ease; }.bp-faq-list summary > span::after { transform: rotate(90deg); }.bp-faq-list details[open] summary > span::after { transform: rotate(0); }.bp-faq-list details p { max-width: 620px; margin: -1px 38px 20px 2px; color: var(--bp-text-muted); font-size: 12px; line-height: 1.75; }
.bp-final-cta { position: relative; display: flex; min-height: 310px; overflow: hidden; align-items: center; margin-top: 98px; padding: 48px clamp(26px, 5vw, 64px); border: 1px solid rgb(140 110 220 / 34%); border-radius: 25px; background: radial-gradient(ellipse at 90% 10%, rgb(124 58 237 / 27%), transparent 43%), radial-gradient(ellipse at 68% 100%, rgb(37 99 235 / 16%), transparent 50%), linear-gradient(112deg, #14162f, #10162c 54%, #11152c); }.bp-final-cta__content { position: relative; z-index: 2; max-width: 670px; }.bp-final-cta h2 { max-width: 610px; margin: 12px 0 10px; font-size: clamp(29px, 3.6vw, 43px); line-height: 1.1; letter-spacing: -.045em; }.bp-final-cta__content > p { max-width: 570px; margin: 0; color: var(--bp-text-muted); font-size: 13px; line-height: 1.7; }.bp-final-cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 22px; }.bp-cta-support { display: grid; gap: 2px; color: #8995ad; font-size: 10px; }.bp-cta-support span { color: #e4ddff; font-size: 11px; font-weight: 650; }.bp-final-cta__orb { position: absolute; top: 50%; right: 9%; display: grid; width: 170px; height: 170px; place-items: center; transform: translateY(-50%); border: 1px solid rgb(196 181 253 / 29%); border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgb(167 139 250 / 30%), rgb(124 58 237 / 8%) 64%, transparent 70%); box-shadow: 0 0 0 22px rgb(167 139 250 / 4%), 0 0 0 48px rgb(167 139 250 / 3%), inset 0 0 45px rgb(167 139 250 / 10%); }.bp-final-cta__orb svg { width: 72px; height: 72px; overflow: visible; fill: none; stroke: #d8b4fe; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.2; }.bp-final-cta__art { position: absolute; right: 0; bottom: 0; width: 44%; height: 100%; opacity: .36; pointer-events: none; }.bp-final-cta__art span { position: absolute; right: 7%; bottom: -130px; width: 240px; height: 350px; transform: rotate(38deg); border: 1px solid rgb(167 139 250 / 33%); border-radius: 50%; }.bp-final-cta__art span:nth-child(2) { right: 30%; bottom: -170px; transform: rotate(-28deg); }.bp-final-cta__art span:nth-child(3) { right: -5%; bottom: -190px; width: 360px; transform: rotate(18deg); }

@media (max-width: 1100px) {
    .bp-hero { min-height: 450px; gap: 12px; }.bp-hero__copy h1 { font-size: clamp(42px, 5.6vw, 58px); }.bp-hero__visual { min-height: 400px; }.bp-platform-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }.bp-platform-card { min-height: 80px; }.bp-service-card { padding: 20px; }.bp-benefits-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; }.bp-faq-section { gap: 38px; }.bp-final-cta__orb { right: 6%; width: 140px; height: 140px; }
}
@media (max-width: 900px) {
    .bp-main:has(.bp-hero) { padding-top: 24px; }.bp-hero { min-height: 0; grid-template-columns: 1fr 1fr; gap: 8px; }.bp-hero__copy h1 { font-size: clamp(38px, 5.8vw, 52px); }.bp-hero__copy > p { font-size: 14px; }.bp-hero__visual { min-height: 360px; }.bp-float-card--top { right: -3%; }.bp-float-card--bottom { bottom: 10%; left: -4%; }.bp-section { margin-top: 72px; }.bp-service-grid { gap: 12px; }.bp-service-card { min-height: 300px; }.bp-service-card__bottom { align-items: flex-start; flex-direction: column; }.bp-how-section { padding: 44px 24px; }.bp-steps-grid { gap: 12px; }.bp-step-card { padding: 18px 15px; }.bp-faq-section { grid-template-columns: minmax(190px, .7fr) minmax(0, 1.3fr); gap: 26px; }.bp-final-cta { min-height: 290px; margin-top: 72px; }.bp-final-cta__orb { right: 4%; width: 120px; height: 120px; opacity: .75; }
}
@media (max-width: 650px) {
    .bp-main:has(.bp-hero) { padding-top: 15px; padding-bottom: 72px; }.bp-hero { grid-template-columns: 1fr; gap: 0; }.bp-hero__copy { padding: 20px 1px 0; }.bp-hero__copy h1 { max-width: 530px; margin: 15px 0 12px; font-size: clamp(35px, 9vw, 43px); letter-spacing: -.052em; }.bp-hero__copy > p { max-width: 530px; font-size: 13px; line-height: 1.65; }.bp-hero__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 19px; }.bp-hero__actions .bp-button { min-height: 46px; padding-inline: 9px; font-size: 12px; }.bp-hero__note { margin-top: 15px; font-size: 10px; }.bp-hero__visual { min-height: 0; height: auto; margin: 2px -8px 0; }.bp-hero__visual > img { width: 100%; max-height: none; }.bp-float-card { gap: 8px; padding: 9px 10px; border-radius: 12px; }.bp-float-card--top { top: 13%; right: 0; }.bp-float-card--bottom { bottom: 9%; left: 0; }.bp-float-icon { width: 29px; height: 29px; }.bp-float-card strong { font-size: 10px; }.bp-float-card small { font-size: 9px; }.bp-section { margin-top: 58px; }.bp-section-heading { margin-bottom: 21px; }.bp-section-heading h2, .bp-faq-intro h2 { font-size: 27px; }.bp-section-heading p, .bp-faq-intro p { font-size: 12px; }.bp-section-heading--row { align-items: flex-end; gap: 10px; }.bp-section-heading--row h2 { max-width: 360px; }.bp-section-heading--row .bp-text-link { font-size: 10px; }.bp-platform-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }.bp-platform-card { min-height: 67px; gap: 9px; padding: 10px; border-radius: 13px; }.bp-platform-mark { width: 35px; height: 35px; flex-basis: 35px; border-radius: 11px; font-size: 15px; }.bp-platform-card__name { font-size: 10px; }.bp-platform-card__arrow { width: 13px; height: 13px; }.bp-platform-card:last-child { grid-column: 1 / -1; }.bp-service-grid { grid-template-columns: 1fr; gap: 10px; }.bp-service-card { min-height: auto; padding: 19px; }.bp-service-icon { width: 41px; height: 41px; margin-bottom: 14px; }.bp-service-card h3 { font-size: 16px; }.bp-service-card p { margin-bottom: 17px; font-size: 11px; }.bp-service-card__bottom { align-items: center; flex-direction: row; }.bp-how-section { margin-top: 58px; padding: 33px 16px 17px; border-radius: 19px; }.bp-how-section .bp-section-heading { margin-bottom: 22px; }.bp-steps-grid { grid-template-columns: 1fr; gap: 9px; }.bp-step-card { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 13px; padding: 14px; }.bp-step-icon { grid-row: span 2; width: 42px; height: 42px; margin: 0; }.bp-step-card h3 { align-self: end; margin: 0 0 3px; font-size: 13px; }.bp-step-card p { font-size: 11px; }.bp-step-number { top: 13px; right: 13px; font-size: 9px; }.bp-benefits-section { margin-top: 25px; padding: 19px 15px; }.bp-benefits-grid { grid-template-columns: 1fr 1fr; gap: 18px 12px; }.bp-benefit { gap: 8px; }.bp-benefit > span { width: 31px; height: 31px; flex-basis: 31px; }.bp-benefit svg { width: 16px; height: 16px; }.bp-benefit strong { font-size: 10px; }.bp-benefit small { font-size: 9px; }.bp-faq-section { grid-template-columns: 1fr; gap: 18px; }.bp-faq-intro { position: static; }.bp-faq-intro h2 { max-width: 370px; }.bp-faq-intro p { margin-bottom: 12px; }.bp-faq-list summary { min-height: 59px; font-size: 12px; }.bp-faq-list details p { margin-right: 26px; font-size: 11px; }.bp-final-cta { min-height: 0; flex-direction: column; align-items: flex-start; margin-top: 59px; padding: 28px 20px; border-radius: 19px; }.bp-final-cta__content { max-width: none; }.bp-final-cta h2 { max-width: 420px; font-size: 29px; }.bp-final-cta__content > p { font-size: 12px; }.bp-final-cta__actions { align-items: flex-start; flex-direction: column; gap: 14px; margin-top: 19px; }.bp-final-cta__actions .bp-button { min-height: 45px; }.bp-final-cta__orb { top: auto; right: -28px; bottom: -52px; width: 118px; height: 118px; transform: none; opacity: .38; }.bp-final-cta__orb svg { width: 50px; height: 50px; }.bp-final-cta__art { width: 70%; opacity: .2; }
}
@media (max-width: 360px) {
    .bp-hero__copy h1 { font-size: 34px; }.bp-eyebrow { font-size: 9px; }.bp-platform-card { padding-inline: 8px; }.bp-platform-card__name { font-size: 9px; }.bp-benefits-grid { grid-template-columns: 1fr; }.bp-final-cta h2 { font-size: 26px; }
}

/* Platform directory, searchable live catalog and service details */
.bp-breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-bottom: 27px; color: #79859d; font-size: 11px; }.bp-breadcrumbs a:hover { color: #d8b4fe; }.bp-breadcrumbs [aria-current="page"] { color: #c9d1e1; }
.bp-catalog-heading { max-width: 760px; margin: 0 auto 36px; text-align: center; }.bp-catalog-heading h1 { margin: 12px 0 12px; font-size: clamp(34px, 5vw, 52px); line-height: 1.08; letter-spacing: -.05em; }.bp-catalog-heading p { max-width: 680px; margin: 0 auto; color: var(--bp-text-muted); font-size: 14px; line-height: 1.7; }
.bp-platform-directory { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }.bp-directory-card { display: flex; min-width: 0; min-height: 88px; align-items: center; gap: 13px; padding: 16px; border: 1px solid var(--bp-border); border-radius: 16px; background: linear-gradient(145deg, #121a30, #0c1224); transition: transform 180ms ease, border-color 180ms ease; }.bp-directory-card:hover { transform: translateY(-2px); border-color: #65529c; }.bp-directory-card__body { display: grid; min-width: 0; gap: 5px; }.bp-directory-card__body strong { font-size: 13px; }.bp-directory-card__body small { color: var(--bp-text-muted); font-size: 10px; line-height: 1.4; }.bp-directory-card > svg { width: 17px; height: 17px; flex: 0 0 auto; margin-left: auto; fill: none; stroke: #8c97ad; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }
.bp-platform-hero { display: flex; align-items: flex-start; gap: 21px; margin: 5px 0 48px; padding: 30px; border: 1px solid var(--bp-border); border-radius: 20px; background: radial-gradient(ellipse at 95% 0, rgb(124 58 237 / 17%), transparent 48%), linear-gradient(140deg, #11192f, #0b1121); }.bp-platform-hero > .bp-platform-mark { width: 58px; height: 58px; flex-basis: 58px; border-radius: 17px; font-size: 23px; }.bp-platform-hero h1 { margin: 6px 0 8px; font-size: clamp(30px, 4vw, 42px); letter-spacing: -.045em; }.bp-platform-hero p { max-width: 760px; margin: 0; color: var(--bp-text-muted); font-size: 13px; line-height: 1.7; }
.bp-catalog-area { margin-top: 34px; }.bp-catalog-area__heading { display: flex; align-items: end; justify-content: space-between; gap: 15px; margin-bottom: 19px; }.bp-catalog-area__heading h2 { margin: 6px 0 0; font-size: 22px; letter-spacing: -.03em; }.bp-results-count { flex: 0 0 auto; color: var(--bp-text-muted); font-size: 11px; }
.bp-filter-panel { display: grid; grid-template-columns: minmax(200px, 1.6fr) repeat(3, minmax(125px, .78fr)) auto; align-items: end; gap: 10px; margin-bottom: 24px; padding: 15px; border: 1px solid var(--bp-border); border-radius: 16px; background: rgb(14 20 37 / 86%); }.bp-filter-panel--platform { grid-template-columns: minmax(210px, 1.6fr) repeat(2, minmax(130px, .8fr)) auto auto; }.bp-search-field, .bp-filter-control { display: grid; min-width: 0; gap: 6px; }.bp-search-field { position: relative; }.bp-search-field > svg { position: absolute; top: 34px; left: 13px; width: 17px; height: 17px; fill: none; stroke: #8d99b1; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; pointer-events: none; }.bp-search-field input, .bp-filter-control select { width: 100%; min-width: 0; height: 44px; padding: 0 12px; border: 1px solid #303b58; border-radius: 10px; outline: none; color: var(--bp-text); background: #090e1e; font-size: 11px; }.bp-search-field input { padding-left: 38px; }.bp-search-field input::placeholder { color: #78839a; }.bp-filter-control > span { color: #9ca7bc; font-size: 10px; font-weight: 600; }.bp-filter-control select:disabled { opacity: .55; }.bp-filter-panel .bp-button { min-height: 44px; padding-inline: 14px; white-space: nowrap; font-size: 11px; }.bp-filter-actions { display: flex; align-items: center; gap: 10px; }.bp-filter-reset { color: #bdc6d7; font-size: 10px; font-weight: 600; white-space: nowrap; }.bp-filter-reset:hover { color: white; }
.bp-catalog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }.bp-catalog-card { display: flex; min-width: 0; min-height: 230px; flex-direction: column; padding: 18px; border: 1px solid var(--bp-border); border-radius: 17px; background: linear-gradient(148deg, #121a30, #0b1121); transition: transform 180ms ease, border-color 180ms ease; }.bp-catalog-card:hover { transform: translateY(-2px); border-color: #454f70; }.bp-catalog-card__top { display: flex; min-width: 0; align-items: center; gap: 8px; }.bp-catalog-card__mark { display: grid; width: 33px; height: 33px; flex: 0 0 33px; place-items: center; border: 1px solid currentColor; border-radius: 10px; font-size: 14px; font-weight: 800; }.bp-catalog-card__platform { overflow: hidden; color: #d6dced; font-size: 10px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }.bp-catalog-card__category { overflow: hidden; max-width: 50%; margin-left: auto; padding: 5px 8px; border: 1px solid rgb(167 139 250 / 23%); border-radius: 999px; color: #c4b5fd; background: rgb(124 58 237 / 9%); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }.bp-catalog-card h2 { margin: 15px 0 7px; font-size: 15px; line-height: 1.35; letter-spacing: -.02em; }.bp-catalog-card h2 a:hover { color: #d8b4fe; }.bp-catalog-card > p { display: -webkit-box; overflow: hidden; margin: 0 0 18px; color: var(--bp-text-muted); font-size: 11px; line-height: 1.6; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }.bp-catalog-card__bottom { display: flex; align-items: end; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 13px; border-top: 1px solid rgb(38 48 74 / 72%); }.bp-price-block { display: grid; gap: 3px; }.bp-price-block strong { color: #f4f5fb; font-size: 13px; }.bp-price-block small { color: #8d99b1; font-size: 9px; }.bp-catalog-card__bottom .bp-button { min-height: 36px; padding-inline: 10px; font-size: 10px; }.bp-catalog-card__bottom .bp-button span { font-size: 15px; }
.bp-catalog-empty { display: grid; justify-items: center; padding: 54px 20px; border: 1px dashed #35405d; border-radius: 18px; background: rgb(15 22 41 / 55%); text-align: center; }.bp-empty-icon { display: grid; width: 52px; height: 52px; place-items: center; border: 1px solid rgb(167 139 250 / 25%); border-radius: 17px; color: #c4b5fd; background: rgb(124 58 237 / 12%); font-size: 30px; }.bp-catalog-empty h3 { margin: 16px 0 7px; font-size: 17px; }.bp-catalog-empty p { max-width: 540px; margin: 0 0 18px; color: var(--bp-text-muted); font-size: 12px; line-height: 1.7; }.bp-catalog-empty .bp-button { min-height: 40px; font-size: 11px; }.bp-pagination { display: flex; justify-content: center; margin-top: 25px; color: var(--bp-text-muted); }.bp-pagination nav { display: flex; align-items: center; gap: 4px; }.bp-pagination nav > div:first-child { display: none; }.bp-pagination nav a, .bp-pagination nav span { display: inline-flex; min-width: 36px; height: 36px; align-items: center; justify-content: center; padding-inline: 9px; border: 1px solid var(--bp-border); border-radius: 9px; color: #cbd5e1; background: #10172b; font-size: 11px; }.bp-pagination nav a:hover { border-color: #7c3aed; color: white; }.bp-pagination nav span[aria-current="page"] { border-color: #7c3aed; color: white; background: #3b236e; }.bp-pagination svg { width: 15px; height: 15px; }.bp-catalog-area + .bp-catalog-disclaimer { margin-top: 22px; }
.bp-home-catalog-empty { justify-items: start; padding: 28px; text-align: left; }.bp-home-catalog-empty p { max-width: 700px; }.bp-service-catalog-link { display: flex; justify-content: flex-end; margin-top: 15px; }.bp-service-catalog-link .bp-button { min-height: 40px; font-size: 11px; }
.bp-platform-notice { display: flex; flex-direction: column; gap: 5px; margin-top: 22px; padding: 16px 18px; border: 1px solid rgb(245 158 11 / 22%); border-radius: 13px; background: rgb(245 158 11 / 5%); }.bp-platform-notice strong { color: #fcd34d; font-size: 11px; }.bp-platform-notice span { color: var(--bp-text-muted); font-size: 11px; line-height: 1.65; }.bp-catalog-bottom-link { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 18px; }
.bp-detail-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(240px, .75fr); align-items: start; gap: 18px; }.bp-detail-card, .bp-detail-aside { min-width: 0; padding: 26px; border: 1px solid var(--bp-border); border-radius: 19px; background: linear-gradient(145deg, #121a30, #0b1121); }.bp-detail-card > .bp-eyebrow { display: block; margin-top: 29px; }.bp-detail-card h1 { margin: 8px 0 12px; font-size: clamp(28px, 4vw, 40px); line-height: 1.1; letter-spacing: -.045em; }.bp-detail-description { color: var(--bp-text-muted); font-size: 13px; line-height: 1.75; }.bp-detail-platform { color: #d4c5ff; font-size: 11px; font-weight: 650; }.bp-detail-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; overflow: hidden; margin-top: 25px; border: 1px solid var(--bp-border); border-radius: 13px; background: var(--bp-border); }.bp-detail-facts > div { display: grid; gap: 5px; padding: 15px; background: #0c1224; }.bp-detail-facts > div > span { color: #8f9ab1; font-size: 10px; }.bp-detail-facts strong { font-size: 12px; }.bp-detail-facts small { color: #8f9ab1; font-size: 9px; }.bp-detail-card .bp-platform-notice { margin-top: 19px; }.bp-detail-aside { position: sticky; top: 100px; }.bp-detail-aside h2 { margin: 11px 0 8px; font-size: 20px; line-height: 1.25; }.bp-detail-aside p { margin: 0 0 18px; color: var(--bp-text-muted); font-size: 12px; line-height: 1.65; }.bp-detail-aside .bp-button { width: 100%; min-height: 43px; }.bp-detail-faq { display: block; margin-top: 14px; color: #c4b5fd; font-size: 11px; text-align: center; }
.bp-platform-faq { display: grid; grid-template-columns: minmax(220px, .75fr) minmax(0, 1.25fr); gap: 38px; margin-top: 42px; }.bp-platform-faq h2 { margin: 10px 0 0; font-size: 23px; line-height: 1.2; letter-spacing: -.035em; }

/* Browser-only cart and non-transactional checkout demonstration */
.bp-add-form { display: grid; gap: 13px; margin-top: 18px; }.bp-shop-field { display: grid; min-width: 0; gap: 7px; }.bp-shop-field > span { color: #c3cde0; font-size: 11px; font-weight: 650; }.bp-shop-field input { width: 100%; min-width: 0; min-height: 44px; padding: 10px 12px; border: 1px solid #303b58; border-radius: 10px; outline: none; color: var(--bp-text); background: #090e1e; font: inherit; font-size: 12px; }.bp-shop-field input:focus { border-color: #8b5cf6; box-shadow: 0 0 0 3px rgb(139 92 246 / 14%); }.bp-add-form .bp-button { width: 100%; min-height: 44px; }.bp-shop-message { min-height: 16px; margin: 0; color: #c4b5fd; font-size: 10px; line-height: 1.5; }.bp-cart-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, .38fr); align-items: start; gap: 17px; }.bp-cart-items { display: grid; gap: 10px; min-width: 0; }.bp-cart-line { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 16px; padding: 18px; border: 1px solid var(--bp-border); border-radius: 15px; background: linear-gradient(145deg, #121a30, #0b1121); }.bp-cart-line__details { display: grid; min-width: 0; gap: 6px; }.bp-cart-line__details .bp-eyebrow { font-size: 9px; }.bp-cart-line__details h2 { overflow-wrap: anywhere; margin: 0; font-size: 14px; }.bp-cart-line__details h2 a:hover { color: #d8b4fe; }.bp-cart-line__target { overflow: hidden; max-width: 100%; color: #98a4bb; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.bp-cart-line__controls { display: grid; flex: 0 0 auto; justify-items: end; gap: 7px; color: #aab4c7; font-size: 10px; }.bp-cart-line__controls strong { color: white; font-size: 11px; }.bp-remove-item { padding: 4px 0; border: 0; color: #fca5a5; background: transparent; font: inherit; cursor: pointer; }.bp-remove-item:hover { color: white; }.bp-cart-summary, .bp-checkout-panel { min-width: 0; padding: 22px; border: 1px solid var(--bp-border); border-radius: 17px; background: linear-gradient(145deg, #121a30, #0b1121); }.bp-cart-summary h2 { margin: 8px 0 18px; font-size: 17px; }.bp-cart-total { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 0; border-top: 1px solid var(--bp-border); border-bottom: 1px solid var(--bp-border); color: #aab4c7; font-size: 11px; }.bp-cart-total strong { color: white; font-size: 15px; }.bp-cart-summary > p { color: var(--bp-text-muted); font-size: 10px; line-height: 1.6; }.bp-cart-summary .bp-button { width: 100%; min-height: 43px; margin-top: 9px; font-size: 11px; }.bp-cart-summary .bp-detail-faq { display: block; }.bp-shop-disclaimer { margin-top: 22px; padding: 14px 16px; border: 1px solid rgb(245 158 11 / 22%); border-radius: 12px; color: #c5bda7; background: rgb(245 158 11 / 5%); font-size: 10px; line-height: 1.6; }.bp-shop-loading { padding: 22px; color: var(--bp-text-muted); font-size: 12px; }.bp-cart-items .bp-catalog-empty { padding: 36px 18px; }.bp-cart-items .bp-catalog-empty h2 { margin: 13px 0 6px; font-size: 16px; }.bp-cart-items .bp-catalog-empty p { font-size: 11px; }.bp-cart-items .bp-catalog-empty .bp-button { min-height: 39px; }
.bp-checkout-panel { max-width: 850px; margin-inline: auto; }.bp-checkout-panel__title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }.bp-checkout-panel__title h2 { margin: 5px 0 0; font-size: 20px; }.bp-checkout-panel > [data-bp-checkout-items] { display: grid; gap: 9px; }.bp-checkout-panel .bp-cart-line { padding: 14px; }.bp-checkout-total { margin-top: 14px; }.bp-checkout-notice { display: grid; gap: 5px; margin: 17px 0; padding: 15px; border: 1px solid rgb(245 158 11 / 25%); border-radius: 12px; background: rgb(245 158 11 / 6%); }.bp-checkout-notice strong { color: #fcd34d; font-size: 11px; }.bp-checkout-notice span { color: #c5bda7; font-size: 10px; line-height: 1.65; }.bp-checkout-panel > .bp-button { min-height: 44px; font-size: 11px; }.bp-checkout-panel > .bp-button[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.bp-payment-state { display: grid; max-width: 700px; justify-items: center; margin: 16px auto 28px; padding: 38px 28px; border: 1px solid var(--bp-border); border-radius: 20px; background: radial-gradient(ellipse at 50% 0, rgb(124 58 237 / 13%), transparent 55%), #0d1428; text-align: center; }.bp-payment-state__icon { display: grid; width: 52px; height: 52px; place-items: center; margin-bottom: 16px; border: 1px solid rgb(245 158 11 / 30%); border-radius: 16px; color: #fcd34d; background: rgb(245 158 11 / 9%); font-size: 25px; font-weight: 750; }.bp-payment-state__icon--neutral { border-color: rgb(167 139 250 / 27%); color: #c4b5fd; background: rgb(124 58 237 / 10%); }.bp-payment-state h1, .bp-payment-state h2 { max-width: 560px; margin: 9px 0; font-size: clamp(24px, 4vw, 32px); line-height: 1.15; letter-spacing: -.04em; }.bp-payment-state > p { max-width: 560px; margin: 0 0 16px; color: var(--bp-text-muted); font-size: 12px; line-height: 1.7; }.bp-payment-state .bp-checkout-notice { width: 100%; margin: 8px 0 18px; text-align: left; }.bp-payment-state > .bp-button { min-height: 42px; font-size: 11px; }.bp-payment-state__actions { display: grid; justify-items: center; gap: 6px; }.bp-status-steps { display: grid; width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 13px 0 20px; }.bp-status-steps > div { display: grid; justify-items: center; gap: 5px; padding: 13px 8px; border: 1px solid var(--bp-border); border-radius: 12px; background: rgb(8 13 28 / 65%); }.bp-status-steps > div > span { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 50%; color: #c4b5fd; background: rgb(124 58 237 / 15%); font-size: 11px; font-weight: 700; }.bp-status-steps strong { font-size: 10px; }.bp-status-steps small { color: #9ba6ba; font-size: 9px; }.bp-receipt-demo { max-width: 700px; margin: 0 auto; padding: 23px; border: 1px solid var(--bp-border); border-radius: 17px; background: #0d1428; }.bp-receipt-demo h2 { margin: 7px 0; font-size: 18px; }.bp-receipt-demo > p:not(.bp-shop-message) { color: var(--bp-text-muted); font-size: 11px; line-height: 1.65; }.bp-receipt-demo .bp-shop-field { margin-top: 17px; }.bp-receipt-preview { display: block; max-width: min(100%, 420px); max-height: 360px; margin-top: 14px; border: 1px solid var(--bp-border); border-radius: 12px; object-fit: contain; }.bp-receipt-demo > .bp-button { min-height: 37px; margin-top: 12px; font-size: 10px; }

/* Account, authentication and notification screens (visual demo only) */
.bp-auth-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, .82fr); align-items: center; gap: clamp(28px, 7vw, 90px); max-width: 1000px; margin: 14px auto 44px; }.bp-auth-layout--single { display: flex; justify-content: center; }.bp-auth-intro h1 { max-width: 480px; margin: 12px 0; font-size: clamp(38px, 5vw, 56px); line-height: 1.02; letter-spacing: -.055em; }.bp-auth-intro > p { max-width: 450px; color: var(--bp-text-muted); font-size: 13px; line-height: 1.75; }.bp-auth-badge { display: inline-flex; align-items: center; gap: 9px; margin-top: 17px; padding: 10px 12px; border: 1px solid rgb(167 139 250 / 23%); border-radius: 11px; color: #d6c8ff; background: rgb(124 58 237 / 8%); font-size: 10px; }.bp-auth-badge span { display: grid; width: 18px; height: 18px; place-items: center; border-radius: 50%; color: #0d1428; background: #c4b5fd; font-weight: 800; }.bp-auth-card { width: 100%; max-width: 450px; padding: 28px; border: 1px solid var(--bp-border); border-radius: 20px; background: linear-gradient(145deg, #121a30, #0b1121); box-shadow: 0 24px 70px rgb(0 0 0 / 16%); }.bp-auth-card h1, .bp-auth-card h2 { margin: 9px 0 6px; font-size: 25px; letter-spacing: -.035em; }.bp-auth-card > p { margin: 0 0 19px; color: var(--bp-text-muted); font-size: 11px; line-height: 1.6; }.bp-auth-card form { display: grid; gap: 14px; }.bp-auth-card form .bp-button { min-height: 44px; margin-top: 3px; }.bp-auth-form-links { display: flex; justify-content: flex-end; margin-top: -6px; }.bp-auth-form-links a, .bp-auth-switch a { color: #c4b5fd; font-size: 10px; font-weight: 650; }.bp-auth-switch { margin: 17px 0 0 !important; padding-top: 15px; border-top: 1px solid var(--bp-border); text-align: center; }
.bp-account-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin: 7px 0 22px; }.bp-account-heading h1 { margin: 7px 0 5px; font-size: clamp(30px, 4vw, 42px); letter-spacing: -.045em; }.bp-account-heading p { margin: 0; color: var(--bp-text-muted); font-size: 12px; line-height: 1.6; }.bp-demo-pill { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 8px; padding: 9px 11px; border: 1px solid rgb(245 158 11 / 24%); border-radius: 999px; color: #fcd34d; background: rgb(245 158 11 / 6%); font-size: 9px; font-weight: 650; }.bp-demo-pill i { width: 7px; height: 7px; border-radius: 50%; background: #f59e0b; box-shadow: 0 0 10px rgb(245 158 11 / 55%); }.bp-account-nav { display: flex; overflow-x: auto; gap: 5px; margin-bottom: 18px; padding: 5px; border: 1px solid var(--bp-border); border-radius: 13px; background: #0c1224; scrollbar-width: thin; }.bp-account-nav a { flex: 0 0 auto; padding: 10px 14px; border-radius: 9px; color: #aab4c7; font-size: 10px; font-weight: 650; }.bp-account-nav a[aria-current="page"] { color: #e9ddff; background: rgb(124 58 237 / 19%); }.bp-account-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }.bp-account-stats article { display: grid; gap: 6px; padding: 18px; border: 1px solid var(--bp-border); border-radius: 14px; background: linear-gradient(145deg, #121a30, #0b1121); }.bp-account-stats article > span { color: #aab4c7; font-size: 10px; }.bp-account-stats article strong { font-size: 23px; }.bp-account-stats article small { color: #818da5; font-size: 9px; }.bp-account-panel { min-width: 0; padding: 21px; border: 1px solid var(--bp-border); border-radius: 16px; background: #0d1428; }.bp-account-panel__heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 15px; }.bp-account-panel__heading h2, .bp-profile-panel h2 { margin: 6px 0 0; font-size: 19px; }.bp-account-panel__heading .bp-text-link { font-size: 10px; }.bp-account-empty { display: grid; justify-items: center; padding: 33px 17px; border: 1px dashed #35405d; border-radius: 13px; text-align: center; }.bp-account-empty .bp-empty-icon { width: 44px; height: 44px; border-radius: 14px; font-size: 24px; }.bp-account-empty h3 { margin: 12px 0 5px; font-size: 14px; }.bp-account-empty p { max-width: 510px; margin: 0 0 14px; color: var(--bp-text-muted); font-size: 10px; line-height: 1.65; }.bp-account-empty .bp-button { min-height: 37px; font-size: 10px; }.bp-order-detail-demo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; overflow: hidden; max-width: 850px; margin: 12px auto; border: 1px solid var(--bp-border); border-radius: 16px; background: var(--bp-border); }.bp-order-detail-demo > div { display: grid; gap: 7px; padding: 17px; background: #0d1428; }.bp-order-detail-demo > div span, .bp-profile-fields > div span { color: #8995ad; font-size: 10px; }.bp-order-detail-demo > div strong, .bp-profile-fields > div strong { overflow-wrap: anywhere; color: #e6eaf2; font-size: 12px; }.bp-order-detail-demo > p { grid-column: 1 / -1; margin: 0; padding: 16px; color: #c5bda7; background: rgb(245 158 11 / 5%); font-size: 10px; line-height: 1.6; }.bp-order-detail-demo > .bp-button { grid-column: 1 / -1; justify-self: center; margin: 12px; min-height: 39px; font-size: 10px; }.bp-profile-panel { max-width: 780px; margin-inline: auto; }.bp-profile-panel > p { color: var(--bp-text-muted); font-size: 11px; line-height: 1.6; }.bp-profile-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; overflow: hidden; margin: 19px 0; border: 1px solid var(--bp-border); border-radius: 12px; background: var(--bp-border); }.bp-profile-fields > div { display: grid; gap: 6px; padding: 15px; background: #0b1121; }.bp-profile-panel > .bp-button { min-height: 39px; font-size: 10px; }

/* Help center, non-submitting contact, legal placeholders and error states */
.bp-help-heading { max-width: 760px; margin-bottom: 34px; }.bp-help-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }.bp-help-card { display: grid; align-content: start; min-height: 220px; padding: 21px; border: 1px solid var(--bp-border); border-radius: 16px; background: linear-gradient(145deg, #121a30, #0b1121); transition: transform 180ms ease, border-color 180ms ease; }.bp-help-card:hover { transform: translateY(-2px); border-color: #65529c; }.bp-help-card > span { display: grid; width: 38px; height: 38px; place-items: center; margin-bottom: 18px; border: 1px solid rgb(167 139 250 / 25%); border-radius: 12px; color: #c4b5fd; background: rgb(124 58 237 / 10%); font-size: 17px; }.bp-help-card strong { font-size: 14px; }.bp-help-card small { min-height: 40px; margin-top: 7px; color: var(--bp-text-muted); font-size: 10px; line-height: 1.6; }.bp-help-card b { display: flex; align-items: center; gap: 7px; margin-top: auto; padding-top: 14px; color: #d6c8ff; font-size: 10px; }.bp-help-card b i { font-size: 15px; font-style: normal; }.bp-help-notice { display: grid; gap: 5px; margin-top: 18px; padding: 15px 17px; border: 1px solid rgb(245 158 11 / 22%); border-radius: 12px; background: rgb(245 158 11 / 5%); }.bp-help-notice strong { color: #fcd34d; font-size: 10px; }.bp-help-notice span { color: #c5bda7; font-size: 10px; line-height: 1.65; }.bp-faq-page-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, .42fr); align-items: start; gap: 22px; }.bp-faq-list--page { display: grid; gap: 8px; }.bp-faq-list--page details { padding: 16px 17px; border: 1px solid var(--bp-border); border-radius: 12px; background: #0d1428; }.bp-faq-list--page summary { font-size: 12px; }.bp-faq-list--page details p { margin: 11px 0 0; color: var(--bp-text-muted); font-size: 11px; line-height: 1.7; }.bp-faq-side { position: sticky; top: 100px; padding: 20px; border: 1px solid var(--bp-border); border-radius: 15px; background: linear-gradient(145deg, #121a30, #0b1121); }.bp-faq-side h2 { margin: 8px 0; font-size: 18px; }.bp-faq-side p { color: var(--bp-text-muted); font-size: 10px; line-height: 1.65; }.bp-faq-side > .bp-button { width: 100%; min-height: 40px; font-size: 10px; }.bp-contact-layout { display: grid; grid-template-columns: minmax(0, .85fr) minmax(320px, 1fr); gap: 18px; max-width: 950px; margin: 0 auto; }.bp-contact-info, .bp-contact-form { min-width: 0; padding: 24px; border: 1px solid var(--bp-border); border-radius: 17px; background: linear-gradient(145deg, #121a30, #0b1121); }.bp-contact-info__icon { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid rgb(167 139 250 / 25%); border-radius: 13px; color: #c4b5fd; background: rgb(124 58 237 / 10%); font-weight: 800; }.bp-contact-info h2, .bp-contact-form h2 { margin: 14px 0 8px; font-size: 20px; }.bp-contact-info > p { color: var(--bp-text-muted); font-size: 11px; line-height: 1.7; }.bp-contact-info .bp-help-notice { margin: 18px 0; }.bp-contact-info > .bp-text-link { font-size: 10px; }.bp-contact-form { display: grid; align-content: start; gap: 12px; }.bp-contact-form h2 { margin: -5px 0 2px; }.bp-contact-form textarea { width: 100%; min-width: 0; padding: 11px 12px; resize: vertical; border: 1px solid #303b58; border-radius: 10px; outline: none; color: var(--bp-text); background: #090e1e; font: inherit; font-size: 12px; }.bp-contact-form textarea:focus { border-color: #8b5cf6; box-shadow: 0 0 0 3px rgb(139 92 246 / 14%); }.bp-contact-form .bp-button { min-height: 42px; }.bp-policy-heading { max-width: 800px; margin: 7px auto 24px; }.bp-policy-heading h1 { margin: 8px 0 4px; font-size: clamp(32px, 5vw, 46px); letter-spacing: -.05em; }.bp-policy-heading p { margin: 0; color: var(--bp-text-muted); font-size: 12px; }.bp-policy-document { max-width: 850px; margin: 0 auto 30px; padding: clamp(20px, 4vw, 36px); border: 1px solid var(--bp-border); border-radius: 18px; background: #0d1428; }.bp-policy-alert { display: grid; gap: 6px; margin-bottom: 26px; padding: 15px; border: 1px solid rgb(245 158 11 / 24%); border-radius: 12px; background: rgb(245 158 11 / 5%); }.bp-policy-alert strong { color: #fcd34d; font-size: 11px; }.bp-policy-alert span { color: #c5bda7; font-size: 10px; line-height: 1.7; }.bp-policy-document h2 { margin: 23px 0 7px; font-size: 15px; }.bp-policy-document p { margin: 0; color: #aeb8ca; font-size: 11px; line-height: 1.8; }.bp-policy-links { display: flex; flex-wrap: wrap; gap: 17px; margin-top: 27px; padding-top: 16px; border-top: 1px solid var(--bp-border); }.bp-policy-links a { color: #c4b5fd; font-size: 10px; font-weight: 650; }.bp-error-state { display: grid; max-width: 650px; justify-items: center; margin: 12px auto 30px; padding: 38px 25px; border: 1px solid var(--bp-border); border-radius: 19px; background: radial-gradient(ellipse at 50% 0, rgb(124 58 237 / 13%), transparent 55%), #0d1428; text-align: center; }.bp-error-code { color: rgb(196 181 253 / 25%); font-size: clamp(65px, 14vw, 112px); font-weight: 850; line-height: .95; letter-spacing: -.08em; }.bp-error-state > .bp-eyebrow { margin-top: 17px; }.bp-error-state h1 { margin: 8px 0; font-size: clamp(25px, 4vw, 34px); letter-spacing: -.04em; }.bp-error-state > p { max-width: 500px; color: var(--bp-text-muted); font-size: 12px; line-height: 1.7; }.bp-error-next { display: grid; gap: 5px; width: 100%; margin: 9px 0 17px; padding: 14px; border: 1px solid var(--bp-border); border-radius: 11px; text-align: left; }.bp-error-next strong { color: #d6c8ff; font-size: 10px; }.bp-error-next span { color: #aeb8ca; font-size: 10px; line-height: 1.6; }.bp-error-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; }.bp-error-actions .bp-button { min-height: 40px; font-size: 10px; }.bp-error-state > small { margin-top: 17px; color: #818da5; font-size: 9px; }
.sr-only { position: absolute; overflow: hidden; width: 1px; height: 1px; clip: rect(0, 0, 0, 0); white-space: nowrap; clip-path: inset(50%); }
@media (max-width: 1050px) { .bp-filter-panel { grid-template-columns: repeat(3, minmax(0, 1fr)); }.bp-search-field { grid-column: span 2; }.bp-filter-actions { align-self: end; }.bp-filter-panel--platform { grid-template-columns: repeat(2, minmax(0, 1fr)); }.bp-filter-panel--platform .bp-search-field { grid-column: span 2; }.bp-catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.bp-platform-directory { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 650px) { .bp-breadcrumbs { margin-bottom: 18px; font-size: 10px; }.bp-catalog-heading { margin-bottom: 25px; text-align: left; }.bp-catalog-heading h1 { font-size: 34px; }.bp-catalog-heading p { font-size: 12px; }.bp-platform-directory { grid-template-columns: 1fr; gap: 9px; }.bp-directory-card { min-height: 75px; }.bp-platform-hero { gap: 14px; margin-bottom: 33px; padding: 20px; }.bp-platform-hero > .bp-platform-mark { width: 48px; height: 48px; flex-basis: 48px; border-radius: 14px; font-size: 18px; }.bp-platform-hero h1 { font-size: 29px; }.bp-platform-hero p { font-size: 11px; }.bp-catalog-area { margin-top: 23px; }.bp-catalog-area__heading { align-items: flex-end; }.bp-catalog-area__heading h2 { font-size: 18px; }.bp-filter-panel, .bp-filter-panel--platform { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; padding: 12px; }.bp-filter-panel .bp-search-field, .bp-filter-panel--platform .bp-search-field { grid-column: 1 / -1; }.bp-filter-panel .bp-filter-control { min-width: 0; }.bp-filter-panel .bp-button { min-height: 42px; }.bp-filter-actions { grid-column: 1 / -1; }.bp-filter-actions .bp-button { flex: 1; }.bp-filter-reset { padding: 10px; }.bp-catalog-grid { grid-template-columns: 1fr; gap: 10px; }.bp-catalog-card { min-height: 205px; padding: 16px; }.bp-catalog-empty { padding: 40px 18px; }.bp-catalog-empty h3 { font-size: 15px; }.bp-catalog-empty p { font-size: 11px; }.bp-detail-layout { grid-template-columns: 1fr; gap: 12px; }.bp-detail-card, .bp-detail-aside { padding: 20px; }.bp-detail-aside { position: static; }.bp-detail-card h1 { font-size: 30px; }.bp-detail-description { font-size: 12px; }.bp-detail-facts > div { padding: 12px; }.bp-catalog-bottom-link { flex-direction: column; }.bp-pagination nav a, .bp-pagination nav span { min-width: 32px; height: 32px; padding-inline: 6px; }.bp-platform-faq { grid-template-columns: 1fr; gap: 15px; }.bp-platform-faq h2 { font-size: 20px; }.bp-cart-layout { grid-template-columns: 1fr; }.bp-cart-summary { order: -1; }.bp-cart-line { align-items: flex-start; gap: 10px; padding: 14px; }.bp-cart-line__controls { max-width: 43%; text-align: right; }.bp-cart-line__target { max-width: 58vw; }.bp-shop-heading { margin-bottom: 21px; }.bp-checkout-panel { padding: 16px; }.bp-payment-state { padding: 29px 18px; }.bp-status-steps { gap: 5px; }.bp-status-steps > div { padding: 11px 4px; }.bp-status-steps strong { font-size: 9px; }.bp-status-steps small { font-size: 8px; }.bp-receipt-demo { padding: 18px; } }
@media (max-width: 650px) { .bp-auth-layout { grid-template-columns: 1fr; gap: 18px; margin-top: 4px; }.bp-auth-intro { text-align: center; }.bp-auth-intro h1 { margin-inline: auto; font-size: 38px; }.bp-auth-intro > p { margin-inline: auto; font-size: 11px; }.bp-auth-badge { margin-top: 8px; }.bp-auth-card { max-width: none; padding: 21px; }.bp-account-heading { align-items: flex-start; flex-direction: column; }.bp-account-heading h1 { font-size: 32px; }.bp-demo-pill { align-self: flex-start; }.bp-account-nav { margin-inline: -2px; }.bp-account-nav a { padding-inline: 11px; }.bp-account-stats { grid-template-columns: 1fr; gap: 8px; }.bp-account-stats article { grid-template-columns: 1fr auto; align-items: center; padding: 13px; }.bp-account-stats article > span { grid-column: 1; }.bp-account-stats article strong { grid-column: 2; grid-row: 1 / span 2; }.bp-account-stats article small { grid-column: 1; }.bp-account-panel { padding: 15px; }.bp-account-panel__heading { align-items: flex-start; }.bp-account-panel__heading h2 { font-size: 17px; }.bp-account-empty { padding: 27px 12px; }.bp-order-detail-demo { grid-template-columns: 1fr; }.bp-order-detail-demo > p, .bp-order-detail-demo > .bp-button { grid-column: 1; }.bp-profile-fields { grid-template-columns: 1fr; } }
@media (max-width: 650px) { .bp-help-heading { margin-bottom: 23px; }.bp-help-grid { grid-template-columns: 1fr; gap: 9px; }.bp-help-card { min-height: 175px; padding: 17px; }.bp-faq-page-layout { grid-template-columns: 1fr; gap: 13px; }.bp-faq-side { position: static; }.bp-contact-layout { grid-template-columns: 1fr; gap: 11px; }.bp-contact-info, .bp-contact-form { padding: 19px; }.bp-policy-document { padding: 19px; }.bp-policy-heading h1 { font-size: 34px; }.bp-error-state { padding: 30px 17px; }.bp-error-actions { width: 100%; flex-direction: column; }.bp-error-actions .bp-button { width: 100%; } }
@media (max-width: 360px) { .bp-container { width: calc(100% - 24px); }.bp-hero__actions { grid-template-columns: 1fr; }.bp-hero__actions .bp-button { min-height: 44px; }.bp-account-nav a { padding-inline: 9px; font-size: 9px; }.bp-filter-panel, .bp-filter-panel--platform { padding: 9px; }.bp-cart-line { padding: 11px; }.bp-error-state { padding-inline: 13px; }.bp-footer__grid { column-gap: 12px; } }
.bp-empty-icon svg, .bp-help-card > span svg, .bp-payment-state__icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }.bp-empty-icon svg { width: 25px; height: 25px; }.bp-hero__note > span { display: inline-grid; width: 16px; height: 16px; place-items: center; }.bp-hero__note svg { width: 15px; height: 15px; fill: none; stroke: #a78bfa; stroke-linejoin: round; stroke-width: 1.3; }.bp-help-card > span svg { width: 20px; height: 20px; }.bp-payment-state__icon svg { width: 24px; height: 24px; }.bp-platform-menu__panel { transform-origin: top left; animation: bp-dropdown-in 150ms ease-out both; }.bp-drawer-backdrop { animation: bp-backdrop-in 170ms ease-out both; }.bp-directory-card, .bp-catalog-card, .bp-help-card, .bp-account-stats article, .bp-service-card { transition-duration: 200ms; }.bp-contact-form select { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid #303b58; border-radius: 10px; color: var(--bp-text); background: #090e1e; font: inherit; font-size: 12px; }.bp-contact-form textarea:focus, .bp-contact-form select:focus { border-color: #8b5cf6; box-shadow: 0 0 0 3px rgb(139 92 246 / 14%); }.bp-steps-grid--page { max-width: 1080px; margin: 0 auto; }.bp-steps-grid--page .bp-step-card h2 { margin: 0 0 8px; font-size: 16px; }.bp-help-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 22px; }.bp-pricing-state { display: grid; max-width: 650px; justify-items: center; gap: 8px; margin: 0 auto; padding: 35px 24px; border: 1px solid var(--bp-border); border-radius: 18px; background: radial-gradient(ellipse at 50% 0, rgb(124 58 237 / 12%), transparent 65%), #0d1428; text-align: center; }.bp-pricing-state h2 { max-width: 480px; margin: 7px 0 0; font-size: 22px; line-height: 1.25; }.bp-pricing-state p { max-width: 490px; margin: 0 0 10px; color: var(--bp-text-muted); font-size: 12px; line-height: 1.7; }.bp-pricing-state .bp-button { min-height: 42px; }
@keyframes bp-dropdown-in { from { transform: translateY(-4px) scale(.99); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } } @keyframes bp-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
/* Responsive hero picture: generated crops are opted into only after all approved files exist. */
.bp-hero__visual > picture { position: relative; z-index: 1; display: block; width: 100%; }
.bp-hero__visual > picture img { position: relative; display: block; width: 100%; max-height: 510px; margin-inline: auto; object-fit: contain; filter: drop-shadow(0 24px 42px rgb(0 0 0 / 24%)); }
.bp-hero__visual > .bp-hero__picture--photo { overflow: hidden; aspect-ratio: 4 / 3; align-self: center; border: 1px solid rgb(148 163 194 / 24%); border-radius: 22px; background: #090e20; box-shadow: 0 24px 60px rgb(0 0 0 / 28%); }
.bp-hero__visual > .bp-hero__picture--photo img { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; margin: 0; object-fit: cover; object-position: 76% 50%; filter: none; animation: bp-hero-image-in 240ms ease-out both; }
@keyframes bp-hero-image-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 650px) { .bp-hero__visual > picture img { max-height: none; } }
@media (max-width: 650px) { .bp-hero__visual > .bp-hero__picture--photo { width: 100%; aspect-ratio: 4 / 3; border-radius: 18px; }.bp-hero__visual > .bp-hero__picture--photo img { object-position: 76% 48%; } }
@media (max-width: 900px) and (min-width: 768px) { .bp-hero__visual > .bp-hero__picture--photo img { object-position: 77% 50%; } }
@media (max-width: 767px) { .bp-hero { grid-template-columns: 1fr; gap: 0; }.bp-hero__copy h1 { max-width: 600px; font-size: clamp(36px, 8vw, 46px); }.bp-hero__visual { min-height: 0; height: auto; margin: 8px 0 0; }.bp-hero__visual > .bp-hero__picture--photo { width: 100%; aspect-ratio: 4 / 3; border-radius: 18px; }.bp-hero__visual > .bp-hero__picture--photo img { object-position: 76% 48%; } }
.bp-eyebrow { font-size: 12px; }.bp-catalog-card__platform { font-size: 11px; }.bp-catalog-card__category { font-size: 10px; }.bp-catalog-card > p { font-size: 12px; }.bp-catalog-card__bottom .bp-button { min-height: 40px; font-size: 12px; }.bp-filter-control > span { font-size: 11px; }.bp-search-field input, .bp-filter-control select { font-size: 12px; }.bp-shop-field > span { font-size: 12px; }.bp-shop-message { font-size: 11px; }.bp-detail-facts > div > span { font-size: 11px; }.bp-policy-document p { font-size: 12px; }.bp-footer__grid > div > a:not(.bp-brand) { font-size: 12px; }.bp-contact-info__icon { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid rgb(167 139 250 / 25%); border-radius: 13px; color: #c4b5fd; background: rgb(124 58 237 / 10%); }.bp-contact-info__icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.bp-remove-item.is-loading { position: relative; min-width: 22px; min-height: 22px; color: transparent; }.bp-remove-item.is-loading::after { position: absolute; inset: 2px; width: 14px; height: 14px; margin: auto; border: 2px solid rgb(196 181 253 / 35%); border-top-color: #c4b5fd; border-radius: 50%; content: ""; animation: bp-spin 700ms linear infinite; }.bp-cart-line__controls input[type="number"] { width: 88px; min-height: 34px; padding: 6px 8px; border: 1px solid var(--bp-border); border-radius: 9px; color: var(--bp-text); background: #090e1e; font: inherit; }
.bp-payment-methods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 20px 0; }.bp-payment-choice { display: grid; grid-template-columns: 44px 1fr 22px; gap: 12px; align-items: center; min-height: 82px; padding: 14px; border: 1px solid rgb(148 163 194 / 22%); border-radius: 16px; color: #e8eaf4; background: linear-gradient(145deg, #10162a, #0b1020); text-align: left; cursor: pointer; transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease, background 200ms ease; }.bp-payment-choice:hover { transform: translateY(-1px); border-color: rgb(167 139 250 / 50%); }.bp-payment-choice.is-selected { border-color: #8b5cf6; background: linear-gradient(145deg, rgb(124 58 237 / 17%), #0d1325); box-shadow: 0 0 0 3px rgb(124 58 237 / 16%); }.bp-payment-choice__icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 13px; color: #ddd6fe; background: rgb(124 58 237 / 20%); font-size: 21px; }.bp-payment-choice strong, .bp-payment-choice small { display: block; }.bp-payment-choice small { margin-top: 4px; color: #9ba4bc; font-size: 12px; }.bp-payment-choice__check { display: grid; width: 20px; height: 20px; place-items: center; border: 1px solid rgb(148 163 194 / 30%); border-radius: 50%; color: transparent; font-size: 12px; }.bp-payment-choice.is-selected .bp-payment-choice__check { border-color: #8b5cf6; color: white; background: #7c3aed; }
.bp-pix-panel { max-width: 900px; margin-inline: auto; }.bp-pix-summary { display: grid; justify-items: center; gap: 8px; padding: 12px 0 24px; }.bp-pix-summary > strong { color: #f5f3ff; font-size: clamp(30px, 7vw, 42px); letter-spacing: -.04em; }.bp-payment-status { color: #c4b5fd; font-weight: 650; }.bp-pix-content { display: grid; grid-template-columns: minmax(230px, 280px) 1fr; gap: 30px; align-items: center; padding: 24px; border: 1px solid rgb(148 163 194 / 18%); border-radius: 18px; background: rgb(9 14 30 / 65%); }.bp-pix-qr { display: grid; aspect-ratio: 1; place-items: center; padding: 12px; border-radius: 15px; background: #fff; }.bp-pix-qr img { width: 100%; height: auto; image-rendering: pixelated; }.bp-pix-instructions h2 { margin: 0 0 8px; }.bp-pix-instructions > p { color: #aab2c7; }.bp-pix-instructions textarea { width: 100%; resize: vertical; color: #e8eaf4; background: #080d1c; }.bp-pix-expiry { font-size: 13px; }.bp-payment-success { display: grid; justify-items: center; gap: 12px; padding: 32px 16px; text-align: center; }.bp-payment-success > span { display: grid; width: 58px; height: 58px; place-items: center; border-radius: 50%; color: white; background: #16a34a; font-size: 30px; animation: bp-success-pop 260ms ease-out both; }.bp-wallet-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 22px 0; }.bp-wallet-card { display: grid; gap: 9px; padding: 20px; border: 1px solid rgb(148 163 194 / 18%); border-radius: 17px; background: linear-gradient(145deg, #11182c, #0a1020); }.bp-wallet-card > span { color: #aab2c7; font-size: 13px; }.bp-wallet-card > strong { font-size: clamp(22px, 4vw, 30px); }.bp-wallet-card > a { color: #c4b5fd; font-size: 13px; }.bp-wallet-card--primary { border-color: rgb(139 92 246 / 42%); background: radial-gradient(ellipse at 10% 0%, rgb(124 58 237 / 22%), transparent 65%), linear-gradient(145deg, #11182c, #0a1020); }.bp-wallet-amount--credit { color: #86efac; }.bp-wallet-amount--debit { color: #fca5a5; }
@keyframes bp-success-pop { from { opacity: 0; transform: scale(.72); } to { opacity: 1; transform: scale(1); } }
@media (max-width: 650px) { .bp-payment-methods, .bp-wallet-grid { grid-template-columns: 1fr; }.bp-pix-content { grid-template-columns: 1fr; gap: 18px; padding: 16px; }.bp-pix-qr { width: min(100%, 280px); justify-self: center; } }