@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

        :root {
            --bg-base: #050505 !important;
            --bg-sidebar: #080808;
            --bg-card: linear-gradient(180deg, #0f0f11 0%, #09090a 100%) !important;
            --border-glow: rgba(255, 255, 255, 0.05) !important;
            --border-active: #ffffff !important;
            --text-main: #ffffff !important; 
            --text-muted: #6b7280 !important; 
            --accent-green: #ffffff !important; 
            --sidebar-width: 310px;
        }

        html body {
            background: #030305 !important;
            margin: 0 !important;
        }

        html body main {
            background: #030305 !important;
            margin: 0 !important;
            padding: 0 !important;
        }

        html body .content-container > header + div {
            margin-top: 16px !important;
            margin-bottom: 56px !important;
            padding: 28px !important;
            background: rgba(10, 10, 12, 0.68) !important;
            border: 1px solid rgba(255, 255, 255, 0.05) !important;
            border-radius: 14px !important;
        }

        html body .central-floating-dock {
            display: flex !important;
            flex-direction: row !important;
            flex-wrap: nowrap !important;
            overflow-x: auto !important;
            overflow-y: hidden !important;
            scrollbar-width: none !important;
            gap: 12px !important;
            padding: 16px 0 !important;
            width: 100% !important;
            max-width: 100% !important;
            margin: 30px auto !important;
            border: 0 !important;
            background: transparent !important;
        }

        html body .central-floating-dock .theme-item,
        html body .central-floating-dock .theme-btn {
            display: inline-flex !important;
            flex: 0 0 auto !important;
            white-space: nowrap !important;
            padding: 10px 20px !important;
            border-radius: 20px !important;
            border: 1px solid rgba(255, 255, 255, 0.03) !important;
            background: rgba(255, 255, 255, 0.01) !important;
            color: #4b5563 !important;
            font-family: 'JetBrains Mono', monospace !important;
            font-size: 11px !important;
        }

        html body .central-floating-dock .theme-item:hover,
        html body .central-floating-dock .theme-item.active,
        html body .central-floating-dock .theme-btn:hover,
        html body .central-floating-dock .theme-btn.active {
            color: #ffffff !important;
            background: rgba(255, 255, 255, 0.05) !important;
            border-color: rgba(255, 255, 255, 0.15) !important;
            text-shadow: 0 0 10px rgba(255, 255, 255, 0.12) !important;
        }

        html body main .content-container .bento-card {
            background: rgba(10, 10, 12, 0.45) !important;
            backdrop-filter: blur(20px) saturate(180%) !important;
            -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
            border: 1px solid rgba(255, 255, 255, 0.04) !important;
            padding: 24px !important;
            border-radius: 14px !important;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5) !important;
        }

        /* Absolute final calibration layer. */
        

        /* Final constitutional calibration overrides. */
        

        /* Final calibration: quiet pricing wires with contact-only activation. */
        html body main #screen-payment .pricing-card {
            border: 1px solid rgba(255, 255, 255, 0.03) !important;
            background: rgba(10, 10, 12, 0.45) !important;
            transition: border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
        }

        html body main #screen-payment .pricing-card:hover {
            border-color: rgba(255, 255, 255, 0.15) !important;
        }

        /* Row 2: the five master fleet tabs run left-aligned, single line, upscaled. */
        html body main #screen-command #sidebar-categories.central-floating-dock {
            display: flex !important;
            flex-direction: row !important;
            flex-wrap: nowrap !important;
            justify-content: flex-start !important;
            gap: 10px !important;
            width: 100% !important;
            max-width: none !important;
            margin: 0 !important;
            overflow-x: auto !important;
        }

        html body main #screen-command #sidebar-categories.central-floating-dock > .theme-btn,
        html body main #screen-command #sidebar-categories.central-floating-dock > .theme-item {
            flex: 0 0 auto !important;
            padding: 14px 26px !important;
            white-space: nowrap !important;
            font-size: 14px !important;
            font-weight: 500 !important;
            letter-spacing: 0.06em !important;
            text-transform: uppercase !important;
            border-radius: 10px !important;
        }

        /* Below desktop width, let the nav row scroll horizontally instead of overflowing the page. */
        @media (max-width: 900px) {
            html body main #screen-command #sidebar-categories.central-floating-dock {
                max-width: 100vw !important;
                overflow-x: auto !important;
                justify-content: flex-start !important;
                -webkit-overflow-scrolling: touch !important;
                scrollbar-width: none !important;
            }
        }

        /* Final telemetry console override. */
        html body main #screen-command .telemetry-console {
            background: transparent !important;
            border: none !important;
            border-radius: 0 !important;
            box-shadow: none !important;
            box-sizing: border-box !important;
            overflow: visible !important;
            width: 100% !important;
            min-width: 0 !important;
            padding: 0 !important;
        }

        /* Last-resort cascade lock for the final legacy declarations. */
        html body main .content-container .bento-card {
            background: rgba(10, 10, 12, 0.5) !important;
            backdrop-filter: blur(20px) saturate(180%) !important;
            -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
            border: 1px solid rgba(255, 255, 255, 0.04) !important;
            border-radius: 14px !important;
        }

        /* Final cascade lock for the editorial card and capsule tokens. */
        

        /* Final editorial tokens: keep legacy cascade layers from overriding the system. */
        html body main .content-container .bento-card,
        html body main .content-container .simulation-lab-grid,
        html body main .content-container .pricing-card {
            background: rgba(10, 10, 12, 0.5) !important;
            backdrop-filter: blur(20px) saturate(180%) !important;
            -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
            border: 1px solid rgba(255, 255, 255, 0.04) !important;
            border-radius: 14px !important;
            transition: border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
            box-sizing: border-box !important;
        }

        html body main .central-floating-dock .theme-item {
            color: #94a3b8 !important;
            background: rgba(10, 10, 12, 0.5) !important;
            border: 1px solid rgba(255, 255, 255, 0.04) !important;
            border-radius: 24px !important;
            font-family: 'JetBrains Mono', monospace !important;
            font-variant-numeric: normal !important;
            white-space: nowrap !important;
        }

        html body main .central-floating-dock .theme-item.active,
        html body main .central-floating-dock .theme-item:hover {
            color: #ffffff !important;
            background: rgba(255, 255, 255, 0.06) !important;
            border-color: rgba(255, 255, 255, 0.16) !important;
        }

        

        #screen-command .simulation-lab-grid {
            display: grid !important;
            grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) !important;
            gap: 18px !important;
            width: 100% !important;
            margin: 8px 0 24px !important;
            /* 🖼️ Photo commune derrière le bloc manifeste ET les bento cards : posée en
               background-image pur (aucun nouvel élément, aucun z-index/stacking touché)
               sur le conteneur grid partagé des deux colonnes. Le voile sombre est fait
               via un gradient "plat" superposé dans la même déclaration background, au-dessus
               de l'image — volontairement net (pas de blur), mais assez sombre pour que le
               texte réel des deux colonnes reste parfaitement lisible par-dessus. */
            background:
                linear-gradient(rgba(6, 9, 15, 0.72), rgba(6, 9, 15, 0.72)),
                url('https://images.unsplash.com/photo-1720962158789-9389a4f399da?auto=format&fit=crop&w=1400&q=70') center center / cover no-repeat !important;
            border-radius: 14px !important;
        }

        .simulation-lab-summary,
        .live-blueprint-viewport {
            min-width: 0 !important;
            box-sizing: border-box !important;
            background: rgba(8, 9, 12, 0.72) !important;
            border: 1px solid rgba(255, 255, 255, 0.04) !important;
            border-radius: 12px !important;
            padding: 22px !important;
            /* Pas de flou ici : Steve veut la photo nette derrière les blocs, pas "givrée".
               Le fond est plus opaque (0.72) qu'avant pour garder le texte bien lisible
               par-dessus une photo nette (le flou servait aussi à estomper le détail).
               Les bento-cards imbriquées dans .live-blueprint-viewport ont leur propre
               backdrop-filter + background (règle globale .bento-card plus haut) qu'on
               neutralise/assombrit aussi juste en dessous, pour rester cohérent. */
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
        }

        #screen-command .live-blueprint-viewport .bento-card {
            background: rgba(7, 8, 11, 0.86) !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
        }

        /* 🖼️ Même traitement "photo nette + voile sombre" que page 1, appliqué aux
           2 autres pages pour que le site entier ait une image de fond cohérente :
           page 2 (robot category matrix) = rack serveur sombre, page 3 (paiement)
           = circuit imprimé macro. Même logique : background-image posée sur le
           conteneur partagé des colonnes de contenu, voile plat superposé dans la
           même déclaration, puis les cartes imbriquées sont démunies de leur flou
           et assombries pour rester lisibles par-dessus. */
        #screen-playground .bb-horizontal-slide-inner {
            background:
                linear-gradient(rgba(6, 9, 15, 0.74), rgba(6, 9, 15, 0.74)),
                url('https://images.unsplash.com/photo-1639066648921-82d4500abf1a?auto=format&fit=crop&w=1400&q=70') center center / cover no-repeat !important;
            border-radius: 14px !important;
        }

        #screen-playground .bb-endpoint-reference {
            background: rgba(8, 9, 12, 0.8) !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
        }

        #screen-playground .bb-live-test,
        #screen-playground .bb-slide-tag-detail {
            background: rgba(8, 9, 12, 0.68) !important;
        }

        #screen-playground .bb-horizontal-slide-targets li {
            background: rgba(8, 9, 12, 0.6) !important;
        }

        #screen-payment .bb-pricing-grid {
            background:
                linear-gradient(rgba(6, 9, 15, 0.74), rgba(6, 9, 15, 0.74)),
                url('https://images.unsplash.com/photo-1582139329536-e7284fece509?auto=format&fit=crop&w=1400&q=70') center center / cover no-repeat !important;
            border-radius: 14px !important;
            padding: 24px !important;
        }

        #screen-payment .bb-pricing-card {
            background: rgba(8, 9, 12, 0.82) !important;
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
        }

        .simulation-lab-summary { display: flex !important; flex-direction: column !important; justify-content: flex-start !important; }

        .bb-manifesto-block {
            display: flex !important;
            flex-direction: column !important;
            gap: 14px !important;
            margin-bottom: 18px !important;
        }
        .bb-manifesto-hero {
            font-family: 'Inter', sans-serif !important;
            font-size: 42px !important;
            font-weight: 800 !important;
            letter-spacing: -0.03em !important;
            color: #ffffff !important;
            line-height: 1.1 !important;
            margin: 0 0 32px !important;
            text-transform: uppercase !important;
        }
        .bb-manifesto-before,
        .bb-manifesto-after {
            display: flex !important;
            flex-direction: column !important;
        }
        .bb-manifesto-label {
            display: block !important;
            font-size: 11px !important;
            font-family: 'JetBrains Mono', monospace !important;
            letter-spacing: 0.08em !important;
            margin-bottom: 8px !important;
        }
        .bb-manifesto-before .bb-manifesto-label { color: #ef4444 !important; }
        .bb-manifesto-after .bb-manifesto-label { color: #ffffff !important; }
        .bb-manifesto-before p {
            font-family: 'Inter', sans-serif !important;
            font-size: 13.5px !important;
            font-weight: 300 !important;
            line-height: 1.6 !important;
            color: #94a3b8 !important;
            opacity: 0.8 !important;
            margin: 0 0 24px !important;
        }
        .bb-manifesto-after p {
            font-family: 'Inter', sans-serif !important;
            font-size: 13.5px !important;
            font-weight: 300 !important;
            line-height: 1.6 !important;
            color: #ffffff !important;
            margin: 0 !important;
        }
        @media (max-width: 900px) {
            .bb-manifesto-hero { font-size: 30px !important; }
        }

        .live-blueprint-viewport { overflow: hidden !important; font-family: 'JetBrains Mono', monospace !important; }
        @media (max-width: 700px) { #screen-command .simulation-lab-grid { grid-template-columns: 1fr !important; } }

        /* ============================================================
           SECTION 1 HEADER — 2-TIER STACKED LAYOUT (sterilized/consolidated)
           Row 1 (.bb-header-top-line): brand mark <-> Access Ingress capsule
           Row 2 (.bb-header-navigation-line): 5 domain nav buttons, single row
           ============================================================ */

        #screen-command #hero-content > .bb-header-top-line {
            display: flex !important;
            flex-direction: row !important;
            align-items: center !important;
            justify-content: space-between !important;
            position: static !important;
            width: 100% !important;
            max-width: none !important;
            margin: 0 !important;
            padding: 24px 32px !important;
            gap: 24px !important;
            box-sizing: border-box !important;
            z-index: 100 !important;
        }

        #screen-command #hero-content > .bb-header-navigation-line {
            display: flex !important;
            width: 100% !important;
            max-width: none !important;
            margin: 24px 0 0 !important;
            padding: 0 32px !important;
            box-sizing: border-box !important;
        }

        #screen-command #hero-content > .sidebar-header {
            display: flex !important;
            align-items: center !important;
            justify-content: flex-start !important;
            position: static !important;
            width: auto !important;
            height: 44px !important;
            min-height: 44px !important;
            flex: 0 0 auto !important;
            margin: 0 !important;
            padding: 0 !important;
            box-sizing: border-box !important;
            z-index: 100 !important;
            pointer-events: auto !important;
        }

        /* Terminal oval ingress geometry — sterilized to borderless minimal tracking entry (2026 elite minimalism). */
        /* Playful live-status badge — replaces the old ingress box in the hero's top-right corner. */
        #screen-command #hero-content > .bb-header-top-line > #header-live-badge {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            flex: 0 0 auto !important;
            width: 44px !important;
            height: 44px !important;
            padding: 0 !important;
            border-radius: 0 !important;
            background: transparent !important;
            border: none !important;
            font-family: 'JetBrains Mono', monospace !important;
            box-shadow: none !important;
        }

        /* Scoped to the button itself (not the wrapper) so hovering the open
           dropdown menu — a sibling inside the same wrapper — never dims it. */
        #screen-command #hero-content > .bb-header-top-line > #header-live-badge > #bb-nav-menu-btn {
            transition: opacity 0.2s ease !important;
        }

        #screen-command #hero-content > .bb-header-top-line > #header-live-badge > #bb-nav-menu-btn:hover {
            opacity: 0.75 !important;
        }

        .bb-hamburger-line {
            display: block !important;
            width: 18px !important;
            height: 2px !important;
            border-radius: 2px !important;
            background: #00d2ff !important;
            transition: transform 0.2s ease, opacity 0.2s ease !important;
        }

        /* Dropdown panel: every resource + legal link on the site, one click away
           from anywhere. Hidden by default, revealed via .is-open (toggled in JS). */
        .bb-nav-menu {
            position: absolute !important;
            top: calc(100% + 10px) !important;
            right: 0 !important;
            min-width: 220px !important;
            display: flex !important;
            flex-direction: column !important;
            padding: 10px !important;
            border-radius: 10px !important;
            background: linear-gradient(180deg, #0f0f11 0%, #09090a 100%) !important;
            border: 1px solid rgba(255, 255, 255, 0.08) !important;
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6) !important;
            font-family: 'JetBrains Mono', monospace !important;
            font-size: 12.5px !important;
            z-index: 500 !important;
            opacity: 0 !important;
            visibility: hidden !important;
            transform: translateY(-6px) !important;
            transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s !important;
        }

        .bb-nav-menu.is-open {
            opacity: 1 !important;
            visibility: visible !important;
            transform: translateY(0) !important;
        }

        .bb-nav-menu a {
            color: #e2e8f0 !important;
            text-decoration: none !important;
            padding: 9px 12px !important;
            border-radius: 6px !important;
            white-space: nowrap !important;
            transition: background 0.15s ease, color 0.15s ease !important;
        }

        .bb-nav-menu a:hover {
            background: rgba(0, 210, 255, 0.1) !important;
            color: #00d2ff !important;
        }

        .bb-nav-menu-divider {
            height: 1px !important;
            margin: 6px 4px !important;
            background: rgba(255, 255, 255, 0.08) !important;
        }

        /* Category picker on the SOLO CORE pricing card — same dark gradient,
           border and monospace font as the hamburger menu (.bb-nav-menu) so the
           closed box AND the native options list both match the rest of the
           site instead of falling back to the OS's light default. */
        .bb-category-select {
            width: 100% !important;
            background: linear-gradient(180deg, #0f0f11 0%, #09090a 100%) !important;
            border: 1px solid rgba(255, 255, 255, 0.08) !important;
            color: #e2e8f0 !important;
            font-family: 'JetBrains Mono', monospace !important;
            font-size: 13px !important;
            padding: 10px !important;
            border-radius: 6px !important;
            margin-bottom: 12px !important;
            box-sizing: border-box !important;
        }

        .bb-category-select option {
            background: #0f0f11 !important;
            color: #e2e8f0 !important;
            font-family: 'JetBrains Mono', monospace !important;
        }

        .bb-live-dot {
            display: inline-block !important;
            width: 8px !important;
            height: 8px !important;
            border-radius: 50% !important;
            background: #00ff88 !important;
            box-shadow: 0 0 0 0 rgba(0, 255, 136, 0.7) !important;
            animation: bb-live-pulse 1.8s ease-out infinite !important;
        }

        @keyframes bb-live-pulse {
            0% { 
                box-shadow: 0 0 0 0 rgba(0, 255, 136, 0.7);
                transform: scale(1);
            }
            50% {
                box-shadow: 0 0 0 6px rgba(0, 255, 136, 0.3);
                transform: scale(1.1);
            }
            100% { 
                box-shadow: 0 0 0 12px rgba(0, 255, 136, 0); 
                transform: scale(1);
            }
        }

        @keyframes bb-badge-glow {
            0%, 100% { 
                box-shadow: 0 0 20px rgba(0, 210, 255, 0.15);
                border-color: rgba(0, 210, 255, 0.35);
            }
            50% { 
                box-shadow: 0 0 30px rgba(0, 210, 255, 0.35);
                border-color: rgba(0, 210, 255, 0.6);
            }
        }

        /* License verification widget now lives on page 3 (payment page), just above the pricing grid. */
        #screen-payment #cash-content > #license-ingress {
            max-width: 100% !important;
            width: 100% !important;
            margin: 0 auto 36px !important;
            padding: 16px 24px !important;
            border-radius: 12px !important;
            background: rgba(255, 255, 255, 0.015) !important;
            border: 1px solid rgba(255, 255, 255, 0.05) !important;
            box-sizing: border-box !important;
        }

        #screen-payment #cash-content > #license-ingress #license-input {
            width: 140px !important;
            padding: 4px 0px !important;
            font-size: 13px !important;
        }

        #screen-payment #cash-content > #license-ingress button[onclick="verifyLicenseKey()"] {
            padding: 6px 16px !important;
            font-size: 10px !important;
        }

        @media (max-width: 700px) {
            /* Pull the logo (and hamburger) closer to both screen edges on phones —
               the desktop 32px side padding here, stacked with .sidebar-header's own
               left padding below, was pushing the wordmark ~66px in from the edge,
               leaving an oversized empty gutter on a ~375-430px viewport. */
            #screen-command #hero-content > .bb-header-top-line {
                flex-wrap: nowrap !important;
                gap: 12px !important;
                padding-left: 8px !important;
                padding-right: 8px !important;
            }

            #screen-payment #cash-content > #license-ingress {
                flex-direction: column !important;
                text-align: center !important;
            }
        }

        #screen-command #hero-content .bb-executive-header > div:first-child {
            width: 44px !important;
            height: 44px !important;
            flex: 0 0 44px !important;
            border-radius: 8px !important;
            border: 1px solid #00d2ff !important;
            box-sizing: border-box !important;
        }

        #screen-command #hero-content .bb-executive-header > div:first-child span {
            font-size: 16px !important;
            color: #00d2ff !important;
        }

        #screen-command #hero-content .bb-executive-header > div:last-child {
            font-size: 22px !important;
            font-weight: 700 !important;
            color: #ffffff !important;
            letter-spacing: 0.22em !important;
        }

        /* Shrink the wordmark on phones so the hamburger button stays on the
           same row instead of wrapping onto its own line, which was leaving a
           dead gap above the fold before the hero heading appeared. Placed
           after the base rule above (same selector) so it wins in the cascade. */
        @media (max-width: 700px) {
            #screen-command #hero-content .bb-executive-header > div:last-child {
                font-size: 15px !important;
                letter-spacing: 0.1em !important;
            }
        }

        /* Upscaled master division tabs. */
        html body #screen-command #sidebar-categories > .theme-btn {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            flex: 0 0 auto !important;
            white-space: nowrap !important;
            font-family: 'JetBrains Mono', monospace !important;
            font-size: 14px !important;
            font-weight: 500 !important;
            letter-spacing: 0.06em !important;
            text-transform: uppercase !important;
            padding: 14px 26px !important;
            border-radius: 10px !important;
            color: #475569 !important;
        }

        html body #screen-command #sidebar-categories > .theme-btn.active,
        html body #screen-command #sidebar-categories > .theme-btn:hover {
            color: #ffffff !important;
        }

        html body #screen-command .robot-main-title {
            font-family: 'JetBrains Mono', monospace !important;
            font-size: 13px !important;
            font-weight: 500 !important;
            letter-spacing: 0.05em !important;
            color: #ffffff !important;
            line-height: 1.4 !important;
            margin: 0 0 8px !important;
            text-shadow: none !important;
        }

        html body #screen-command .robot-main-desc {
            font-family: 'JetBrains Mono', monospace !important;
            font-size: 11px !important;
            color: #64748b !important;
            line-height: 1.5 !important;
            margin: 0 0 24px !important;
            max-width: 100% !important;
        }

        /* Row 2: the 5 master divisions run unhindered on a single line, no wrapping. */
        #screen-command #sidebar-categories {
            display: flex !important;
            flex-direction: row !important;
            flex-wrap: nowrap !important;
            overflow-x: auto !important;
            overflow-y: visible !important;
            justify-content: flex-start !important;
            align-items: center !important;
            width: 100% !important;
            gap: 16px !important;
        }

        #screen-command #sidebar-categories .theme-btn {
            flex: 0 0 auto !important;
            white-space: nowrap !important;
        }

        #screen-command #hero-content > .bb-header-top-line .bb-executive-header {
            position: static !important;
            width: auto !important;
            height: 44px !important;
            min-height: 44px !important;
            max-width: none !important;
            flex: 0 0 auto !important;
            margin: 0 !important;
            padding: 0 !important;
            pointer-events: auto !important;
            top: auto !important;
            left: auto !important;
            display: flex !important;
            align-items: center !important;
            justify-content: flex-start !important;
            box-sizing: border-box !important;
            z-index: 100 !important;
        }

        

        @media (max-width: 700px) {
            

            

            
        }

        /* Two-tier fleet cockpit: master workspaces above the 100-node capsule rail. */
        

        /* Apple/Stripe story-scroll composition */
        

        body > aside {
            display: none !important;
        }

        body > main {
            width: 100% !important;
            height: auto !important;
            min-height: 100% !important;
            margin: 0 !important;
            padding: 0 !important;
            overflow: visible !important;
            background: #050505 !important;
        }

        

        .screen-content {
            width: 100% !important;
            max-height: 100% !important;
            overflow: auto !important;
            scrollbar-width: none !important;
        }

        .screen-content::-webkit-scrollbar {
            display: none !important;
            width: 0 !important;
            height: 0 !important;
        }

        /* ---- SECTION 2 // PLAYGROUND MATRIX — 5-panel horizontal industry slider ---- */
        #screen-playground.screen-section {
            padding: 0 !important;
            overflow: visible !important;
            display: block !important;
        }

        .bb-horizontal-snap-track {
            display: flex !important;
            flex-direction: row !important;
            flex-wrap: nowrap !important;
            width: 100vw !important;
            min-height: 100vh !important;
            height: auto !important;
            overflow-x: auto !important;
            overflow-y: visible !important;
            scroll-snap-type: x proximity !important;
            scroll-behavior: smooth !important;
            scrollbar-width: none !important;
            -webkit-overflow-scrolling: touch !important;
            overscroll-behavior-x: contain !important;
            overscroll-behavior-y: auto !important;
        }

        /* Mobile: faster scroll without smooth animation */
        @media (max-width: 768px) {
            .bb-horizontal-snap-track {
                scroll-behavior: auto !important;
            }
        }

        .bb-horizontal-snap-track::-webkit-scrollbar {
            display: none !important;
            width: 0 !important;
            height: 0 !important;
        }

        .bb-horizontal-slide {
            width: 100vw !important;
            min-height: 100vh !important;
            height: auto !important;
            flex-shrink: 0 !important;
            scroll-snap-align: start !important;
            scroll-snap-stop: none !important;
            display: flex !important;
            justify-content: center !important;
            align-items: flex-start !important;
            box-sizing: border-box !important;
            padding: 80px 40px 40px 40px !important;
            position: relative !important;
            background: transparent !important;
            overflow: hidden !important;
        }

        /* Visual scroll indicator: shows user can scroll horizontally BETWEEN CATEGORIES */
        .bb-horizontal-slide::after {
            content: '← SWIPE CATEGORIES →' !important;
            position: absolute !important;
            bottom: 32px !important;
            left: 50% !important;
            transform: translateX(-50%) !important;
            font-family: 'JetBrains Mono', monospace !important;
            font-size: 11px !important;
            letter-spacing: 0.08em !important;
            color: rgba(255, 255, 255, 0.25) !important;
            text-transform: uppercase !important;
            white-space: nowrap !important;
            pointer-events: none !important;
            animation: bb-pulse-indicator 2s ease-in-out infinite !important;
        }

        @keyframes bb-pulse-indicator {
            0%, 100% { opacity: 0.25; }
            50% { opacity: 0.6; }
        }

        /* Centered 1200px content rail — matches .screen-content used on pages 1 & 3
           so the carousel no longer looks off-center relative to the rest of the site. */
        .bb-horizontal-slide-inner {
            width: 100% !important;
            max-width: 100% !important;
            margin: 0 auto !important;
            display: flex !important;
            flex-direction: row !important;
            align-items: flex-start !important;
            gap: 64px !important;
            box-sizing: border-box !important;
            padding: 40px 0 !important;
        }

        /* Mobile optimization: reduce heights and padding */
        @media (max-width: 600px) {
            .bb-horizontal-slide-inner {
                min-height: auto !important;
                padding: 20px 0 !important;
                gap: 32px !important;
            }

            .bb-horizontal-slide {
                padding: 16px 12px !important;
            }

            .bb-horizontal-slide-copy {
                gap: 12px !important;
            }

            .bb-horizontal-slide-copy h2 {
                font-size: 24px !important;
                line-height: 1.2 !important;
            }

            .bb-horizontal-slide-subtitle {
                font-size: 12px !important;
            }

            .bb-horizontal-slide-copy p {
                font-size: 13px !important;
                line-height: 1.4 !important;
            }
        }

        .bb-horizontal-slide-copy {
            flex: 0 0 44% !important;
            max-width: 44% !important;
            display: flex !important;
            flex-direction: column !important;
            gap: 28px !important;
            font-family: 'JetBrains Mono', monospace !important;
        }

        .bb-horizontal-slide-kicker {
            font-size: 14px !important;
            letter-spacing: 0.15em !important;
            color: #00d2ff !important;
            text-transform: uppercase !important;
            font-weight: 700 !important;
            text-shadow: 0 0 10px rgba(0, 210, 255, 0.3) !important;
        }

        .bb-horizontal-slide-copy h2 {
            font-size: 44px !important;
            line-height: 1.15 !important;
            color: #ffffff !important;
            font-weight: 800 !important;
            margin: 0 !important;
            letter-spacing: -0.02em !important;
            font-family: Inter, sans-serif !important;
        }

        .bb-horizontal-slide-subtitle {
            font-size: 20px !important;
            line-height: 1.7 !important;
            color: #cbd5e1 !important;
            font-weight: 500 !important;
            letter-spacing: 0.01em !important;
            font-family: Inter, sans-serif !important;
            margin-top: -8px !important;
        }

        .bb-horizontal-slide-copy p {
            font-size: 18px !important;
            line-height: 1.85 !important;
            color: #a0aec0 !important;
            margin: 0 !important;
            font-family: Inter, sans-serif !important;
        }

        /* Truthful "spec strip": a compact readout of real, verifiable facts about
           each robot category (endpoint count, protocol, guarantee) — fills the
           vertical rhythm of the copy column with substance instead of fake stats. */
        .bb-slide-specs {
            display: flex !important;
            flex-wrap: wrap !important;
            gap: 0 !important;
            margin: 12px 0 0 0 !important;
            padding: 20px 0 !important;
            border-top: 1px solid rgba(0, 210, 255, 0.15) !important;
            border-bottom: 1px solid rgba(0, 210, 255, 0.15) !important;
        }

        .bb-slide-spec-item {
            flex: 1 1 0 !important;
            display: flex !important;
            flex-direction: column !important;
            gap: 6px !important;
            padding: 0 20px !important;
            border-left: 1px solid rgba(0, 210, 255, 0.15) !important;
        }

        .bb-slide-spec-item:first-child {
            padding-left: 0 !important;
            border-left: none !important;
        }

        .bb-slide-spec-value {
            font-size: 20px !important;
            font-weight: 800 !important;
            color: #00d2ff !important;
            font-family: 'JetBrains Mono', monospace !important;
            letter-spacing: -0.01em !important;
        }

        .bb-slide-spec-label {
            font-size: 12px !important;
            letter-spacing: 0.12em !important;
            color: #cbd5e1 !important;
            text-transform: uppercase !important;
            font-family: 'JetBrains Mono', monospace !important;
            font-weight: 500 !important;
        }

        /* Code snippet styling — charte "robot humanoïde" : carrosserie glacée noir
           profond / blanc, à très haut contraste (comme les panneaux noirs/blancs
           brillants d'un robot), avec un unique accent cyan/teal lumineux pour le
           mot-clé (écho du logo "T" qui brille sur le visage des robots), plutôt
           qu'un dégradé de gris terne. */
        .bb-code-snippet {
            position: relative !important;
            background:
                radial-gradient(ellipse 70% 50% at 15% -10%, rgba(255, 255, 255, 0.14), transparent 60%),
                linear-gradient(150deg, #000000 0%, #0a0b0d 55%, #000000 100%) !important;
            border: 1px solid rgba(255, 255, 255, 0.22) !important;
            border-top-color: rgba(255, 255, 255, 0.4) !important;
            border-radius: 8px !important;
            padding: 20px !important;
            margin: 24px 0 0 0 !important;
            font-family: 'JetBrains Mono', monospace !important;
            font-size: 13.5px !important;
            line-height: 1.7 !important;
            overflow-x: auto !important;
            color: #e5e7eb !important;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -1px 0 rgba(0, 0, 0, 0.7), 0 4px 12px rgba(0, 0, 0, 0.5) !important;
        }

        .bb-code-snippet code {
            color: #f1f2f4 !important;
            font-weight: 500 !important;
        }

        .bb-code-snippet .keyword {
            color: #2dd4da !important;
            font-weight: 700 !important;
            text-shadow: 0 0 8px rgba(45, 212, 218, 0.55) !important;
        }

        .bb-code-snippet .string {
            color: #c4c8cc !important;
        }

        .bb-code-snippet .comment {
            color: #6b7076 !important;
        }

        .bb-horizontal-slide-targets {
            list-style: none !important;
            display: grid !important;
            grid-template-columns: repeat(2, 1fr) !important;
            gap: 16px !important;
            margin: 16px 0 0 0 !important;
            padding: 0 !important;
        }

        .bb-horizontal-slide-targets li {
            font-size: 14px !important;
            letter-spacing: 0.08em !important;
            color: #e2e8f0 !important;
            background: rgba(255, 255, 255, 0.03) !important;
            border: 1px solid rgba(255, 255, 255, 0.08) !important;
            padding: 16px 20px !important;
            border-radius: 10px !important;
            text-align: center !important;
            cursor: pointer !important;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
            font-weight: 600 !important;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
        }

        .bb-horizontal-slide-targets li:hover,
        .bb-horizontal-slide-targets li.is-hover-active {
            background: rgba(0, 210, 255, 0.06) !important;
            border-color: rgba(0, 210, 255, 0.4) !important;
            transform: translateY(-3px) !important;
            box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 210, 255, 0.15) !important;
            color: #00d2ff !important;
        }

        /* Persists after click (independent of hover) so the visitor can see which
           robot the live-test widget below is currently wired to. Uses the same
           cyan accent as the rest of the page instead of a clashing green. */
        .bb-horizontal-slide-targets li.is-selected {
            background: rgba(0, 210, 255, 0.1) !important;
            border-color: rgba(0, 210, 255, 0.7) !important;
            box-shadow: inset 0 0 0 1px rgba(0, 210, 255, 0.4) !important;
        }

        .bb-horizontal-slide-targets li.is-selected::after {
            content: '● ACTIVE' !important;
            display: block !important;
            font-size: 9px !important;
            letter-spacing: 0.1em !important;
            color: #00d2ff !important;
            margin-top: 4px !important;
        }

        .bb-horizontal-slide-mock {
            flex: 0 0 58% !important;
            max-width: 58% !important;
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            justify-content: flex-start !important;
            gap: 20px !important;
            background: transparent !important;
            border: none !important;
        }

        /* Static reference card mirroring the "+ WHAT IT DOES / + HOW TO INTEGRATE"
           bento-cards from page 1 (screen-command), so the category slides read as
           the same product rather than a plainer, unrelated layout. */
        .bb-endpoint-reference {
            width: 100% !important;
            max-width: 620px !important;
            box-sizing: border-box !important;
            padding: 24px 28px !important;
            border: 1px solid rgba(255, 255, 255, 0.06) !important;
            border-radius: 14px !important;
            background: rgba(10, 10, 12, 0.5) !important;
            backdrop-filter: blur(20px) saturate(180%) !important;
            -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
            font-family: 'JetBrains Mono', monospace !important;
        }

        .bb-endpoint-ref-title {
            font-size: 13px !important;
            font-weight: 700 !important;
            color: #ffffff !important;
            text-transform: uppercase !important;
            letter-spacing: 0.5px !important;
            margin: 0 0 18px 0 !important;
        }

        .bb-endpoint-ref-list {
            display: flex !important;
            flex-direction: column !important;
            gap: 16px !important;
        }

        .bb-endpoint-ref-row {
            padding-top: 16px !important;
            border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
        }

        .bb-endpoint-ref-row:first-child {
            padding-top: 0 !important;
            border-top: none !important;
        }

        .bb-endpoint-ref-top {
            display: flex !important;
            align-items: baseline !important;
            justify-content: space-between !important;
            gap: 12px !important;
            flex-wrap: wrap !important;
        }

        .bb-endpoint-ref-name {
            font-size: 13px !important;
            font-weight: 700 !important;
            color: #ffffff !important;
            letter-spacing: 0.02em !important;
        }

        .bb-endpoint-ref-path {
            font-size: 11px !important;
            color: #00d2ff !important;
        }

        .bb-endpoint-ref-desc {
            font-size: 12.5px !important;
            line-height: 1.6 !important;
            color: #94a3b8 !important;
            margin: 6px 0 0 0 !important;
            font-family: Inter, sans-serif !important;
        }

        /* Reveal panel: reserves fixed vertical space below the mockup card so
           hovering a robot tag on the left can "activate" a live explanation here
           without shifting the layout — replaces the previous dead hover state. */
        .bb-slide-tag-detail {
            width: 100% !important;
            max-width: 620px !important;
            min-height: 86px !important;
            box-sizing: border-box !important;
            padding: 18px 24px !important;
            border: 1px solid rgba(255, 255, 255, 0.06) !important;
            border-radius: 10px !important;
            display: flex !important;
            flex-direction: column !important;
            justify-content: center !important;
            gap: 8px !important;
            font-family: 'JetBrains Mono', monospace !important;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
            background: rgba(255, 255, 255, 0.02) !important;
        }

        .bb-slide-tag-detail-placeholder {
            font-size: 12px !important;
            letter-spacing: 0.08em !important;
            color: #94a3b8 !important;
            text-transform: uppercase !important;
            font-weight: 500 !important;
        }

        .bb-slide-tag-detail-name,
        .bb-slide-tag-detail-copy {
            display: none !important;
            opacity: 0 !important;
            transform: translateY(4px) !important;
            transition: opacity 0.25s ease, transform 0.25s ease !important;
        }

        .bb-slide-tag-detail-name {
            font-size: 14px !important;
            font-weight: 800 !important;
            letter-spacing: 0.08em !important;
            color: #00d2ff !important;
            text-transform: uppercase !important;
        }

        .bb-slide-tag-detail-copy {
            font-size: 14px !important;
            line-height: 1.7 !important;
            color: #cbd5e1 !important;
            font-family: 'Inter', sans-serif !important;
        }

        .bb-slide-tag-detail.is-active {
            border: 1px solid rgba(0, 210, 255, 0.3) !important;
            background: rgba(255, 255, 255, 0.03) !important;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
        }

        .bb-slide-tag-detail.is-active .bb-slide-tag-detail-placeholder {
            display: none !important;
        }

        .bb-slide-tag-detail.is-active .bb-slide-tag-detail-name,
        .bb-slide-tag-detail.is-active .bb-slide-tag-detail-copy {
            display: block !important;
            opacity: 1 !important;
            transform: translateY(0) !important;
        }

        /* 🧪 LIVE TEST WIDGET — lets a visitor call the real endpoint with their own
           data (via the public rate-limited demo key) and see the actual JSON response,
           right below the "hover a robot" panel. Same dark/cyan/monospace language as
           the rest of the slide so it reads as part of the page, not a bolted-on tool. */
        .bb-live-test {
            width: 100% !important;
            max-width: 620px !important;
            box-sizing: border-box !important;
            padding: 20px 24px !important;
            border: 1px solid rgba(255, 255, 255, 0.06) !important;
            border-radius: 10px !important;
            background: rgba(255, 255, 255, 0.02) !important;
            font-family: 'JetBrains Mono', monospace !important;
        }

        .bb-live-test-header {
            display: flex !important;
            align-items: center !important;
            justify-content: space-between !important;
            margin-bottom: 14px !important;
        }

        .bb-live-test-title {
            font-size: 12px !important;
            letter-spacing: 0.1em !important;
            color: #00d2ff !important;
            text-transform: uppercase !important;
            font-weight: 700 !important;
        }

        .bb-live-test-endpoint {
            font-size: 11px !important;
            color: #94a3b8 !important;
        }

        .bb-live-test-fields {
            display: flex !important;
            flex-direction: column !important;
            gap: 10px !important;
        }

        .bb-live-test-field label {
            display: block !important;
            font-size: 10.5px !important;
            letter-spacing: 0.08em !important;
            color: #94a3b8 !important;
            text-transform: uppercase !important;
            margin-bottom: 5px !important;
        }

        .bb-live-test-field input,
        .bb-live-test-field textarea,
        .bb-live-test-field select {
            width: 100% !important;
            box-sizing: border-box !important;
            background: rgba(0, 0, 0, 0.5) !important;
            border: 1.5px solid rgba(0, 210, 255, 0.2) !important;
            border-radius: 6px !important;
            padding: 10px 12px !important;
            color: #ffffff !important;
            font-family: 'JetBrains Mono', monospace !important;
            font-size: 12.5px !important;
            resize: vertical !important;
        }

        .bb-live-test-field input:focus,
        .bb-live-test-field textarea:focus,
        .bb-live-test-field select:focus {
            outline: none !important;
            border-color: rgba(0, 210, 255, 0.6) !important;
        }

        .bb-live-test-field-row {
            display: grid !important;
            grid-template-columns: 1fr 1fr !important;
            gap: 10px !important;
        }

        .bb-live-test-run {
            width: 100% !important;
            margin-top: 14px !important;
            padding: 12px !important;
            background: rgba(0, 210, 255, 0.12) !important;
            border: 1.5px solid rgba(0, 210, 255, 0.4) !important;
            border-radius: 6px !important;
            color: #00d2ff !important;
            font-family: 'JetBrains Mono', monospace !important;
            font-size: 12px !important;
            font-weight: 700 !important;
            letter-spacing: 0.08em !important;
            text-transform: uppercase !important;
            cursor: pointer !important;
            transition: all 0.25s ease !important;
        }

        .bb-live-test-run:hover:not(:disabled) {
            background: rgba(0, 210, 255, 0.22) !important;
            box-shadow: 0 0 20px rgba(0, 210, 255, 0.25) !important;
        }

        .bb-live-test-run:disabled {
            opacity: 0.5 !important;
            cursor: wait !important;
        }

        .bb-live-test-output {
            margin-top: 14px !important;
            background: rgba(0, 0, 0, 0.6) !important;
            border: 1px solid rgba(255, 255, 255, 0.08) !important;
            border-radius: 6px !important;
            padding: 14px !important;
            font-size: 12px !important;
            line-height: 1.6 !important;
            color: #cbd5e1 !important;
            max-height: 220px !important;
            overflow: auto !important;
            white-space: pre-wrap !important;
            word-break: break-word !important;
            display: none !important;
        }

        .bb-live-test-output.is-visible {
            display: block !important;
        }

        .bb-live-test-output.is-success {
            border-color: rgba(0, 255, 136, 0.3) !important;
        }

        .bb-live-test-output.is-error {
            border-color: rgba(239, 68, 68, 0.4) !important;
            color: #f87171 !important;
        }

        .bb-live-test-quota {
            font-size: 10.5px !important;
            color: #94a3b8 !important;
            margin-top: 8px !important;
        }


        @media (max-width: 900px) {
            .bb-horizontal-slide {
                padding: 32px 24px !important;
            }

            .bb-horizontal-slide-inner {
                flex-direction: column !important;
                justify-content: flex-start !important;
                align-items: center !important;
                gap: 32px !important;
                min-height: auto !important;
                padding: 40px 0 !important;
            }

            .bb-horizontal-slide-copy,
            .bb-horizontal-slide-mock {
                flex: 0 0 auto !important;
                max-width: 100% !important;
                height: auto !important;
            }

            .bb-slide-specs {
                padding: 14px 0 !important;
            }

            .bb-slide-spec-item {
                padding: 0 12px !important;
            }
        }

        /* 📱 Put "Hover or tap a robot" right under the 4-robot list on phones.
           On tablets/desktop, .bb-horizontal-slide-copy (text) and -mock (endpoint
           card + reveal panel) sit side-by-side, so the reveal panel is always
           next to the robot grid. Once the ≤900px rule above stacks them into a
           single column, the reveal panel used to land dead last — after the
           whole copy block AND the endpoint reference card — forcing a scroll
           just to see what a tapped robot does. display:contents flattens both
           wrapper divs into the same flex column as .bb-horizontal-slide-inner,
           so `order` can reshuffle just the 3 "mock" children: the reveal panel
           now renders right after the robot grid (untouched, default order:0),
           then the reference card, then the live-test widget.
           Breakpoint matches the ≤900px stacking rule above (not 600px) —
           anything narrower than 900px is already a single stacked column
           (e.g. phones in landscape at 667–844px), so the reorder must apply
           there too or the reveal panel buries itself off-screen again. */
        @media (max-width: 900px) {
            .bb-horizontal-slide-inner {
                align-items: stretch !important;
                gap: 20px !important;
            }

            .bb-horizontal-slide-copy,
            .bb-horizontal-slide-mock {
                display: contents !important;
            }

            .bb-slide-tag-detail {
                order: 1 !important;
            }

            .bb-endpoint-reference {
                order: 2 !important;
            }

            .bb-live-test {
                order: 3 !important;
            }

            /* The existing "← SWIPE ←" hint (.bb-horizontal-slide::after, further
               below) only becomes visible after scrolling through this whole
               ~2400px-tall stacked column — by then a visitor is more likely to
               keep scrolling vertically into page 3 than to swipe sideways. Echo
               the same hint right under the kicker too, so it's on-screen the
               instant a category slide opens, before any scrolling happens. */
            .bb-horizontal-slide-kicker::after {
                content: '← swipe for next category →' !important;
                display: block !important;
                margin-top: 6px !important;
                font-size: 10px !important;
                letter-spacing: 0.08em !important;
                color: rgba(255, 255, 255, 0.4) !important;
                text-transform: none !important;
                font-weight: 500 !important;
                text-shadow: none !important;
                animation: bb-pulse-indicator 2s ease-in-out infinite !important;
            }
        }

        #hero-content {
            display: flex !important;
            flex-direction: column !important;
            justify-content: center !important;
            gap: 28px !important;
        }

        #hero-content .sidebar-header {
            margin: 0 !important;
            border: 0 !important;
            background: transparent !important;
        }

        #hero-content > header,
        #hero-content > div:not(.sidebar-header):not(.bb-header-top-line):not(.bb-header-navigation-line) {
            width: min(760px, 100%) !important;
            margin-left: auto !important;
            margin-right: auto !important;
        }

        #hero-content > header + div {
            margin-bottom: 0 !important;
        }

        #cockpit-content {
            display: flex !important;
            flex-direction: column !important;
            justify-content: center !important;
            gap: 18px !important;
        }

        #cockpit-content > .central-floating-dock {
            margin: 0 auto !important;
        }

        #cockpit-content .robot-display-section {
            display: flex !important;
            flex-direction: column !important;
            justify-content: center !important;
            min-height: 0 !important;
            margin: 0 !important;
        }

        #cockpit-content .bento-grid {
            margin-bottom: 0 !important;
        }

        #cash-content {
            justify-content: center !important;
            gap: 28px !important;
        }

        #cash-content .stripe-section {
            width: 100% !important;
            padding-top: 0 !important;
            border-top: 0 !important;
        }

        #cash-content footer {
            margin-top: 0 !important;
        }

        @media (max-height: 760px) {
            .screen-section {
                padding-top: 24px !important;
                padding-bottom: 24px !important;
            }

            #cockpit-content .bento-card {
                padding: 16px !important;
            }
        }

        /* Architectural ambient layer for the three story-scroll frames.
           NOTE: was height:100vh + overflow:hidden, which SILENTLY CLIPS any section
           whose content is taller than one viewport (no scrollbar, no way to reach the
           clipped part — feels like scrolling is "stuck"/broken). Sections now size to
           their own content (min-height keeps the full-bleed one-screen feel on short
           pages) and overflow is visible so the page just keeps flowing/scrolling. */
        .screen-section {
            width: 100vw !important;
            min-height: 100vh !important;
            height: auto !important;
            scroll-snap-align: start !important;
            scroll-snap-stop: none !important;
            display: flex !important;
            flex-direction: column !important;
            justify-content: flex-start !important;
            align-items: center !important;
            box-sizing: border-box !important;
            position: relative !important;
            padding: 40px !important;
            overflow: visible !important;
            background-image: linear-gradient(rgba(255, 255, 255, 0.01) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.01) 1px, transparent 1px) !important;
            background-size: 100px 100px !important;
            background-position: center center !important;
        }

        #screen-hero {
            background-image:
                radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.025) 0%, transparent 60%),
                linear-gradient(rgba(255, 255, 255, 0.01) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.01) 1px, transparent 1px) !important;
        }

        #screen-cockpit {
            background-image:
                radial-gradient(circle at 20% 40%, rgba(255, 255, 255, 0.02) 0%, transparent 50%),
                linear-gradient(rgba(255, 255, 255, 0.01) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.01) 1px, transparent 1px) !important;
        }

        #screen-cash {
            background-image:
                radial-gradient(circle at 50% 90%, rgba(255, 255, 255, 0.03) 0%, transparent 55%),
                linear-gradient(rgba(255, 255, 255, 0.01) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.01) 1px, transparent 1px) !important;
        }

        /* Linear-inspired two-page command and payment architecture.
           NOTE: html and body must NOT both carry height:100% + overflow-y:scroll —
           that creates two nested scroll containers (documentElement AND body each
           scrollable) and the trackpad/wheel/scrollbar ends up fighting between the
           two, which reads as the page being "stuck"/blocked. Only html scrolls; body
           flows naturally to its content height. */
        html {
            height: 100% !important;
            margin: 0 !important;
            padding: 0 !important;
            scroll-behavior: smooth !important;
            scroll-snap-type: none !important;
            overflow-y: scroll !important;
            overflow-x: hidden !important;
            background: #050505 !important;
            overscroll-behavior: none !important;
            -webkit-overflow-scrolling: touch !important;
        }

        body {
            min-height: 100% !important;
            margin: 0 !important;
            padding: 0 !important;
            overflow: visible !important;
            background: #050505 !important;
        }

        #screen-command {
            background-image:
                radial-gradient(circle at 50% 22%, rgba(255, 255, 255, 0.025) 0%, transparent 58%),
                linear-gradient(rgba(255, 255, 255, 0.01) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.01) 1px, transparent 1px) !important;
            background-size: auto, 100px 100px, 100px 100px !important;
            background-position: center, center, center !important;
        }

        #screen-payment {
            background-image:
                radial-gradient(circle at 50% 85%, rgba(255, 255, 255, 0.03) 0%, transparent 55%),
                linear-gradient(rgba(255, 255, 255, 0.01) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.01) 1px, transparent 1px) !important;
            background-size: auto, 100px 100px, 100px 100px !important;
            background-position: center, center, center !important;
        }

        #screen-command .screen-content,
        #screen-payment .screen-content {
            box-sizing: border-box !important;
            font-family: Inter, sans-serif !important;
        }

        #screen-command .screen-content {
            display: flex !important;
            flex-direction: column !important;
            justify-content: safe center !important;
            gap: 14px !important;
        }

        #screen-command .central-floating-dock,
        #screen-command .robot-display-section {
            flex: 0 0 auto !important;
        }

        #screen-command .robot-display-section {
            min-height: 0 !important;
        }

        #screen-command .bento-card,
        #screen-payment .card-plan {
            background: rgba(10, 10, 12, 0.5) !important;
            backdrop-filter: blur(20px) saturate(180%) !important;
            -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
            border: 1px solid rgba(255, 255, 255, 0.04) !important;
            border-radius: 14px !important;
            transition: border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
        }

        #screen-payment .screen-content {
            display: flex !important;
            flex-direction: column !important;
            justify-content: safe center !important;
            align-items: center !important;
            gap: 22px !important;
            overflow: auto !important;
        }

        #screen-payment .stripe-section,
        #screen-payment footer {
            width: 100% !important;
            max-width: 100% !important;
        }

        #screen-command .theme-item,
        #screen-command .theme-btn,
        #screen-command [id^="feature-"],
        #screen-command .value-label,
        #screen-command .pipe-badge,
        #screen-payment footer {
            font-family: 'JetBrains Mono', monospace !important;
        }

        #screen-command p,
        #screen-payment p {
            font-family: Inter, sans-serif !important;
        }

        @media (max-width: 700px) {
            .screen-section {
                padding: 24px 18px !important;
            }

            #screen-command .screen-content {
                justify-content: flex-start !important;
                padding: 12px 0 !important;
            }

            #screen-payment .screen-content {
                justify-content: flex-start !important;
                padding: 20px 0 !important;
            }
        }

        /* The emblem is the sole permitted chromatic brand signal. */
        .bb-executive-header > div:first-child {
            border-color: #00d2ff !important;
            box-shadow: 0 0 20px rgba(0, 210, 255, 0.25) !important;
        }

        .bb-executive-header > div:first-child span {
            color: #00d2ff !important;
        }

        /* Final luxury composition cascade. */
        

        @media (max-width: 700px) {
            

            

            
        }

        /* Spacious hero composition and frosted obsidian surface system. */
        

        .content-container > header {
            margin-bottom: 8px !important;
        }

        .content-container > header + div {
            margin-top: 16px !important;
            margin-bottom: 56px !important;
            padding: 28px !important;
            background: rgba(10, 10, 12, 0.68) !important;
            border: 1px solid rgba(255, 255, 255, 0.05) !important;
            border-radius: 14px !important;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.38) !important;
        }

        .central-floating-dock .theme-item:hover,
        .central-floating-dock .theme-item.active,
        .central-floating-dock .theme-btn:hover,
        .central-floating-dock .theme-btn.active {
            color: #ffffff !important;
            background: rgba(255, 255, 255, 0.05) !important;
            border-color: rgba(255, 255, 255, 0.15) !important;
            text-shadow: 0 0 10px rgba(255, 255, 255, 0.12) !important;
        }

        

        @media (max-width: 700px) {
            main {
                padding: 48px 20px 72px !important;
            }

            .content-container > header + div {
                margin-bottom: 36px !important;
                padding: 20px !important;
            }

            .bento-grid {
                grid-template-columns: 1fr !important;
            }
        }

        /* Central floating division dock below the ingress panel. */
        

        .central-floating-dock {
            max-width: 100% !important;
            margin: 30px auto !important;
            padding: 16px 0 !important;
            gap: 12px !important;
            border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
            display: flex !important;
            flex-direction: row !important;
            flex-wrap: nowrap !important;
            overflow-x: auto !important;
            overflow-y: hidden !important;
            scrollbar-width: none !important;
            width: 100% !important;
            border: 1px solid rgba(255, 255, 255, 0.05) !important;
            background: rgba(15, 15, 17, 0.72) !important;
            flex: 0 0 auto !important;
            align-items: center !important;
            -webkit-overflow-scrolling: touch !important;
            box-sizing: border-box !important;
            border-radius: 10px !important;
        }

        .central-floating-dock::-webkit-scrollbar {
            display: none !important;
            width: 0 !important;
            height: 0 !important;
        }

        .central-floating-dock .theme-item,
        .central-floating-dock .theme-btn {
            display: inline-flex !important;
            flex: 0 0 auto !important;
            white-space: nowrap !important;
            padding: 10px 20px !important;
            border-radius: 20px !important;
            border: 1px solid rgba(255, 255, 255, 0.03) !important;
            background: rgba(255, 255, 255, 0.01) !important;
            color: #6b7280 !important;
            font-family: 'JetBrains Mono', monospace !important;
            font-size: 11px !important;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
            min-width: max-content !important;
        }

        .central-floating-dock .theme-item.active,
        .central-floating-dock .theme-btn.active {
            color: #ffffff !important;
            background: rgba(255, 255, 255, 0.05) !important;
            border-color: rgba(255, 255, 255, 0.18) !important;
        }

        .sidebar-title { 
            font-size: 18px; font-weight: 900; margin: 0; letter-spacing: -0.5px; 
            color: #f1f5f9; text-shadow: 0 0 14px rgba(255, 255, 255, 0.12);
        }
        .theme-list::-webkit-scrollbar { width: 3px; }
        .theme-list::-webkit-scrollbar-thumb { background: var(--border-glow); border-radius: 2px; }

        .theme-btn:hover { background-color: rgba(255, 255, 255, 0.04); color: var(--text-main); }
        .theme-btn.active {
            background: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0%, transparent 100%);
            color: var(--accent-green) !important; font-weight: 700; border-left: 3px solid var(--accent-green); padding-left: 20px;
        }

        main::-webkit-scrollbar { width: 3px; }
        main::-webkit-scrollbar-thumb { background: var(--border-glow); }

        header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-glow); padding-bottom: 24px; margin-bottom: 40px; }
        h1 {
            font-size: 24px; font-weight: 900; color: #f1f5f9; margin: 0; text-transform: uppercase; letter-spacing: -0.5px;
            background: linear-gradient(to right, #ffffff 20%, #9ca3af 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
        }

        .robots-nav { display: flex; gap: 12px; margin-bottom: 40px; border-bottom: 1px solid var(--border-glow); padding-bottom: 20px; overflow-x: auto; }
        .robot-tab {
            background: rgba(59, 130, 246, 0.03); border: 1px solid var(--border-glow); color: var(--text-muted);
            padding: 12px 24px; text-align: center; font-size: 12px; font-family: monospace; cursor: pointer;
            border-radius: 8px; outline: none; white-space: nowrap; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .robot-tab:hover { border-color: rgba(255, 255, 255, 0.35); color: var(--text-main); background: rgba(255, 255, 255, 0.03); }
        .robot-tab.active { background: rgba(255, 255, 255, 0.04); border-color: var(--accent-green); color: var(--accent-green); font-weight: 700; box-shadow: 0 0 18px rgba(255, 255, 255, 0.10); }

        .robot-main-title { font-size: 42px; font-weight: 900; color: #ffffff; margin: 0 0 45px 0; line-height: 1.15; letter-spacing: -1.5px; text-shadow: 0 0 12px rgba(255, 255, 255, 0.12); }
        .robot-main-desc { display: none; }

        .bento-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
            gap: 24px !important;
            display: grid;
            margin-bottom: 50px;
        }
        .bento-card:hover { border-color: rgba(255, 255, 255, 0.35); box-shadow: 0 0 30px rgba(255, 255, 255, 0.05); transform: translateY(-2px); }
        .bento-card h3 { font-size: 13px; font-weight: 700; color: #ffffff; margin: 0 0 14px 0; text-transform: uppercase; font-family: monospace; letter-spacing: 0.5px; display: flex; align-items: center; gap: 10px; }
        .bento-card h3 span { color: var(--accent-green); text-shadow: 0 0 12px rgba(255, 255, 255, 0.12); }
        .bento-card p { font-size: 13px; color: #94a3b8; margin: 0; line-height: 1.6; }
        .stripe-section { border-top: 1px solid var(--border-glow); padding-top: 40px; }

        .buy-btn {
            background-color: transparent; color: var(--accent-green); border: 1px solid rgba(255, 255, 255, 0.45);
            padding: 12px 24px; font-size: 11px; font-weight: 800; border-radius: 6px; cursor: pointer;
            text-transform: uppercase; font-family: monospace; outline: none; transition: all 0.2s ease;
        }
        .buy-btn:hover { background-color: rgba(255, 255, 255, 0.05); border-color: var(--accent-green); transform: scale(1.02); box-shadow: 0 0 18px rgba(255, 255, 255, 0.12); }
        .buy-btn.laser-btn {
            background-color: var(--accent-green); color: #000000; border: none; font-weight: 900;
            box-shadow: 0 0 18px rgba(255, 255, 255, 0.10);
        }
        .buy-btn.laser-btn:hover { background-color: #ffffff; box-shadow: 0 0 18px rgba(255, 255, 255, 0.10); }

        body,
        main,
        aside,
        header,
        p,
        .content-container,
        .robot-main-desc,
        .bento-card p {
            font-family: 'Inter', -apple-system, sans-serif;
        }

        h1,
        h2,
        h3,
        h4,
        .sidebar-title,
        .theme-btn,
        .robot-tab,
        .buy-btn,
        input,
        textarea,
        button {
            font-family: 'JetBrains Mono', monospace !important;
        }

        h1,
        h2,
        h3,
        h4,
        .sidebar-title,
        .robot-tab,
        .buy-btn,
        input,
        textarea,
        button {
            letter-spacing: 0.05em !important;
        }

        .robot-main-desc,
        .bento-card p {
            font-weight: 300;
        }

        .theme-btn,
        .robot-tab,
        .buy-btn,
        input,
        textarea,
        button {
            font-weight: 500;
        }

        .bento-card,
        .card-plan,
        .bento-news-card,
        .feature-mini-card {
            border-radius: 12px !important;
            border: 1px solid rgba(255, 255, 255, 0.07) !important;
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4) !important;
        }

        .feature-mini-card {
            border: 1px solid rgba(255, 255, 255, 0.04) !important;
            background: rgba(0, 0, 0, 0.2) !important;
        }

        .buy-btn:not(.laser-btn) {
            background: rgba(255, 255, 255, 0.03) !important;
            border: 1px solid rgba(255, 255, 255, 0.1) !important;
            color: #ffffff !important;
            border-radius: 6px !important;
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
        }

        .buy-btn:not(.laser-btn):hover {
            border-color: rgba(255, 255, 255, 0.35) !important;
            background: rgba(255, 255, 255, 0.06) !important;
        }

        .legal-drawer {
            width: 100%;
            max-height: 0;
            overflow: hidden;
            box-sizing: border-box;
            padding: 0 24px;
            margin: 0 auto;
            background: #090d16;
            border: 1px solid transparent;
            border-radius: 12px;
            color: #f1f5f9;
            opacity: 0;
            transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s ease, opacity 0.2s ease, border-color 0.3s ease;
        }

        .legal-drawer.is-open {
            max-height: 1200px;
            padding: 24px;
            margin: 0 auto 24px;
            border-color: rgba(255, 255, 255, 0.07);
            opacity: 1;
        }

        .legal-drawer h2,
        .legal-drawer h4 {
            color: #ffffff;
            font-family: 'JetBrains Mono', monospace !important;
        }

        .legal-drawer h2 {
            margin-top: 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.07);
            padding-bottom: 10px;
        }

        .legal-drawer p {
            color: #94a3b8;
            font-family: 'Inter', -apple-system, sans-serif;
            font-weight: 300;
            line-height: 1.6;
        }

        .legal-drawer h4 {
            margin: 24px 0 8px;
            color: #ffffff;
            font-size: 12px;
            letter-spacing: 0.05em;
        }

        .legal-drawer .legal-meta {
            color: #64748b;
            font-size: 11px;
            letter-spacing: 0.04em;
            margin: -2px 0 24px;
        }

        .legal-drawer ul {
            margin: 10px 0 22px;
            padding-left: 24px;
            color: #94a3b8;
            font-family: 'Inter', -apple-system, sans-serif;
            line-height: 1.7;
        }

        .legal-drawer li {
            margin: 8px 0;
        }

        .legal-drawer code,
        .legal-drawer pre {
            color: #ffffff;
            font-family: 'JetBrains Mono', monospace;
        }

        .legal-drawer code {
            font-size: 0.92em;
        }

        .legal-drawer pre {
            overflow-x: auto;
            margin: 16px 0 24px;
            padding: 16px;
            background: rgba(0, 0, 0, 0.28);
            border: 1px solid rgba(255, 255, 255, 0.04);
            border-radius: 8px;
            color: #cbd5e1;
            line-height: 1.6;
        }

        

        main input,
        main textarea {
            background: #010204 !important;
            border: 1px solid rgba(255, 255, 255, 0.08) !important;
            border-radius: 8px !important;
            color: #ffffff !important;
            padding: 16px !important;
            transition: border-color 0.3s ease !important;
        }

        

        .theme-btn {
            width: auto !important;
            background: transparent;
            border: none;
            color: var(--text-muted);
            padding: 14px 16px;
            text-align: left;
            font-size: 14px;
            cursor: pointer;
            outline: none;
            border-radius: 8px;
            margin-bottom: 0 !important;
            display: flex;
            flex-direction: row !important;
            box-sizing: border-box;
            transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
            flex: 0 1 auto !important;
        }

        .linear-logo-container {
            width: 32px;
            height: 32px;
            min-width: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 0 !important;
            margin-right: 40px !important;
        }

        .content-container {
            gap: 40px !important;
            display: flex !important;
            width: 100% !important;
            max-width: 100% !important;
            margin: 0 !important;
            flex-direction: column !important;
        }

        .pricing-grid {
            gap: 32px !important;
        }

        .theme-item {
            padding: 14px 26px !important;
            border-radius: 10px !important;
            border: 1px solid rgba(255, 255, 255, 0.03) !important;
            background: rgba(255, 255, 255, 0.01) !important;
            color: #94a3b8 !important;
            font-family: 'JetBrains Mono', monospace !important;
            font-size: 14px !important;
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
        }

        .theme-item:hover,
        .theme-item.active {
            color: #ffffff !important;
            background: rgba(255, 255, 255, 0.06) !important;
            border-color: rgba(255, 255, 255, 0.2) !important;
            text-shadow: 0 0 8px rgba(255, 255, 255, 0.2) !important;
        }

        .bento-card::before,
        .bento-card::after,
        .card-plan::before,
        .card-plan::after,
        .bento-news-card::before,
        .bento-news-card::after {
            content: "+";
            position: absolute;
            top: 10px;
            color: #1e293b;
            font-family: 'JetBrains Mono', monospace;
            font-size: 10px;
            line-height: 1;
            pointer-events: none;
        }

        .bento-card::before,
        .card-plan::before,
        .bento-news-card::before {
            left: 12px;
        }

        .bento-card::after,
        .card-plan::after,
        .bento-news-card::after {
            right: 12px;
        }

        .bento-card p,
        .card-plan p,
        .bento-news-card p {
            color: #94a3b8 !important;
            font-weight: 300 !important;
            line-height: 1.75 !important;
        }

        .robot-tab,
        .theme-btn,
        #license-input,
        code,
        pre {
            text-shadow: 0 0 12px rgba(255, 255, 255, 0.15) !important;
        }

        body {
            display: flex !important;
            background-color: #03050d !important;
            color: var(--text-main);
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            flex-direction: column !important;
            min-height: 100vh !important;
            background-image: none !important;
        }

        main {
            padding: 60px 40px !important;
            flex: none !important;
            box-sizing: border-box !important;
            z-index: 10;
            background: #03050d !important;
            margin-top: 0 !important;
            height: auto !important;
            width: 100% !important;
            background-image: none !important;
        }

        .blueprint-header {
            position: relative;
            z-index: 1;
            margin-bottom: 12px;
            color: #ffffff;
            font-size: 10px;
            font-weight: 600;
        }

        .blueprint-status {
            position: relative;
            z-index: 1;
            margin-bottom: 12px;
            color: #f1f5f9;
            font-size: 10px;
            font-weight: 400;
            letter-spacing: 0.08em;
            text-shadow: 0 0 8px rgba(255, 255, 255, 0.2);
        }

        .blueprint-grid {
            position: relative;
            z-index: 1;
            display: grid;
            gap: 6px;
        }

        .blueprint-grid span {
            display: block;
            color: #cbd5e1;
        }

        .blueprint-stream {
            position: absolute;
            top: 0;
            bottom: 0;
            left: -20%;
            width: 20%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16), transparent);
            animation: blueprint-stream-pulse 1.2s linear infinite;
            pointer-events: none;
        }

        @keyframes blueprint-stream-pulse {
            from { transform: translateX(0); }
            to { transform: translateX(700%); }
        }

        .bento-card {
            background: #09090a !important;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.03) !important;
            padding: 20px !important;
            border-radius: 14px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
            background-color: var(--bg-card);
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            color: #94a3b8;
        }

        .bento-card > p,
        .bento-card .feature-main-value,
        .bento-card .blueprint-grid,
        .bento-card .flux-status {
            font-family: 'Inter', -apple-system, sans-serif !important;
            font-weight: 300 !important;
            color: #94a3b8 !important;
        }

        .bento-card .feature-main-value {
            margin: 0 0 18px;
            font-size: 16px;
            font-weight: 600 !important;
            line-height: 1.55 !important;
            color: #ffffff !important;
        }

        .bento-card > [id^="feature-content-"] {
            min-height: 0 !important;
        }

        .bento-card .value-label {
            display: block;
            margin-top: 18px;
            margin-bottom: 8px;
            color: #ffffff;
            font-family: 'JetBrains Mono', monospace;
            font-size: 9px;
            font-weight: 600;
            letter-spacing: 0.05em;
            opacity: 0.72;
            text-transform: uppercase;
        }

        .bento-card .feature-benefits {
            display: grid;
            gap: 10px;
            margin: 0 0 6px;
            padding: 0;
            list-style: none;
            color: #94a3b8;
            font-family: 'Inter', -apple-system, sans-serif;
            font-size: 13px;
            font-weight: 300;
            line-height: 1.8;
        }

        .bento-card::before,
        .bento-card::after {
            color: #ffffff !important;
            text-shadow: 0 0 12px rgba(255, 255, 255, 0.6) !important;
        }

        @keyframes compliance-pulse {
            0%, 100% { text-shadow: 0 0 3px rgba(255, 255, 255, 0.18); }
            50% { text-shadow: 0 0 12px rgba(255, 255, 255, 0.5); }
        }

        .flux-header {
            margin-bottom: 18px;
            color: #ffffff;
            font-size: 10px;
            letter-spacing: 0.04em;
        }

        .flux-track {
            display: flex;
            align-items: center;
            margin: 8px 0 18px;
        }

        .flux-node {
            color: #ffffff;
            font-size: 12px;
            text-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
        }

        .flux-line {
            flex: 1;
            border-top: 1px dotted rgba(255, 255, 255, 0.38);
        }

        .flux-status {
            display: flex;
            flex-wrap: wrap;
            gap: 8px 16px;
            font-family: 'Inter', -apple-system, sans-serif !important;
            font-size: 10px;
        }

        .flux-status span {
            padding: 8px 10px;
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 5px;
            background: rgba(255, 255, 255, 0.02);
        }

        .visual-blueprint-pipe,
        .volatile-radar {
            position: relative;
            width: 100%;
            box-sizing: border-box;
            margin-top: 18px;
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 8px;
            background: rgba(1, 2, 6, 0.58);
            overflow: hidden;
        }

        .visual-blueprint-pipe {
            display: flex;
            align-items: center;
            min-height: 58px;
            padding: 12px;
            gap: 8px;
            font-family: 'JetBrains Mono', monospace;
            font-size: 9px;
        }

        .pipe-badge {
            flex: 0 0 auto;
            padding: 7px 8px;
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: 4px;
            background: rgba(255, 255, 255, 0.02);
            color: #94a3b8;
            white-space: nowrap;
        }

        .pipe-engine {
            color: #ffffff;
            border-color: rgba(255, 255, 255, 0.2);
        }

        .pipe-connector {
            position: relative;
            flex: 1 1 auto;
            min-width: 18px;
            height: 1px;
            background: rgba(255, 255, 255, 0.18);
        }

        .pipe-connector::after {
            content: ">";
            position: absolute;
            right: -2px;
            top: -6px;
            color: rgba(255, 255, 255, 0.4);
        }

        .pipe-particle {
            position: absolute;
            top: 50%;
            left: 0;
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background: #ffffff;
            box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
            transform: translate(-50%, -50%);
            animation: pipe-particle-travel 1.8s linear infinite;
        }

        .pipe-connector:nth-of-type(4) .pipe-particle {
            animation-delay: 0.9s;
        }

        @keyframes pipe-particle-travel {
            0% { left: 0; opacity: 0; }
            12% { opacity: 1; }
            48% { opacity: 1; }
            58% { opacity: 0.45; box-shadow: 0 0 14px rgba(255, 255, 255, 0.95); }
            100% { left: 100%; opacity: 0; }
        }

        .volatile-radar {
            display: grid;
            place-items: center;
            min-height: 150px;
            background:
                linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
                rgba(1, 2, 6, 0.58);
            background-size: 16px 16px;
        }

        .radar-ring {
            position: absolute;
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 50%;
            animation: volatilePurge 3s ease-in-out infinite;
        }

        .radar-ring-outer {
            width: 108px;
            height: 108px;
        }

        .radar-ring-inner {
            width: 62px;
            height: 62px;
            animation-delay: 0.18s;
        }

        .radar-core {
            position: relative;
            z-index: 1;
            color: #ffffff;
            font-family: 'JetBrains Mono', monospace;
            font-size: 9px;
            letter-spacing: 0.08em;
            text-shadow: 0 0 8px rgba(255, 255, 255, 0.35);
        }

        .radar-marker {
            position: absolute;
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.6);
            box-shadow: 0 0 8px rgba(255, 255, 255, 0.35);
        }

        .radar-marker-top { top: 18px; }
        .radar-marker-right { right: 20%; }
        .radar-marker-bottom { bottom: 18px; }

        @keyframes volatilePurge {
            0%, 100% { opacity: 0.9; transform: scale(1); }
            48% { opacity: 0.08; transform: scale(0.72); }
            62% { opacity: 0; transform: scale(0.62); }
            82% { opacity: 0.5; transform: scale(0.92); }
        }

        @media (max-width: 700px) {.bento-grid {
                grid-template-columns: 1fr !important;
            }
        }

        /* Executive command dock: keep the brand isolated above one horizontal division row. */
        aside {
            height: 80px !important;
            min-height: 0 !important;
            margin-top: 0 !important;
            width: 100% !important;
            min-width: 0 !important;
            max-width: none !important;
            background-color: transparent !important;
            backdrop-filter: blur(20px) !important;
            -webkit-backdrop-filter: blur(20px) !important;
            border-right: none !important;
            display: flex !important;
            flex-direction: column !important;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25) !important;
            z-index: 50;
            box-sizing: border-box !important;
            max-height: none !important;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
            flex-wrap: nowrap !important;
            gap: 0 !important;
            padding: 0 !important;
            background: rgba(3, 5, 13, 0.5) !important;
            overflow: hidden !important;
            scrollbar-width: none !important;
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
        }

        aside::-webkit-scrollbar,
        .theme-list::-webkit-scrollbar {
            display: none !important;
            width: 0 !important;
            height: 0 !important;
        }

        .sidebar-header {
            padding: 12px 24px !important;
            border-bottom: none !important;
            background: transparent !important;
            display: flex !important;
            align-items: center !important;
            gap: 12px;
            justify-content: flex-start !important;
            width: 100% !important;
            height: 40px !important;
            box-sizing: border-box !important;
        }

        .theme-list {
            flex: 0 0 auto !important;
            overflow-y: hidden !important;
            padding: 0 24px !important;
            display: flex !important;
            flex-direction: row !important;
            flex-wrap: nowrap !important;
            gap: 12px !important;
            align-items: center !important;
            width: 100% !important;
            max-width: 100% !important;
            overflow-x: auto !important;
            box-sizing: border-box !important;
            scrollbar-width: none !important;
            -webkit-overflow-scrolling: touch !important;
            height: 40px !important;
        }

        .theme-item:hover,
        .theme-btn:hover {
            color: #ffffff !important;
            background: #090d16 !important;
            border-color: rgba(255, 255, 255, 0.25) !important;
            text-shadow: 0 0 10px rgba(255, 255, 255, 0.3) !important;
        }

        /* Mobile dropdown select for category navigation */
        .mobile-category-select {
            width: 100% !important;
            max-width: none !important;
            padding: 12px 16px !important;
            margin: 0 !important;
            background: rgba(255, 255, 255, 0.05) !important;
            border: 1px solid rgba(255, 255, 255, 0.1) !important;
            color: #ffffff !important;
            font-family: 'JetBrains Mono', monospace !important;
            font-size: 12px !important;
            letter-spacing: 0.05em !important;
            text-transform: uppercase !important;
            border-radius: 6px !important;
            cursor: pointer !important;
            appearance: none !important;
            -webkit-appearance: none !important;
            -moz-appearance: none !important;
            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='%2300d2ff' stroke-width='2'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
            background-repeat: no-repeat !important;
            background-position: right 8px center !important;
            background-size: 20px !important;
            padding-right: 32px !important;
            transition: background-color 0.2s ease, border-color 0.2s ease !important;
        }

        .mobile-category-select:hover {
            background-color: rgba(255, 255, 255, 0.08) !important;
            border-color: rgba(255, 255, 255, 0.2) !important;
        }

        .mobile-category-select:focus {
            outline: none !important;
            background-color: rgba(255, 255, 255, 0.1) !important;
            border-color: #00d2ff !important;
            box-shadow: 0 0 8px rgba(0, 210, 255, 0.2) !important;
        }

        .mobile-category-select option {
            background: #0a0d16 !important;
            color: #ffffff !important;
            padding: 8px !important;
        }

        /* Obsidian and matte titanium finish */
        body,
        main {
            background: #050505 !important;
            margin: 0 !important;
            padding: 0 !important;
            background-image: none !important;
            color: #ffffff !important;
        }

        aside,
        .sidebar-header {
            background: #080808 !important;
            border-color: rgba(255, 255, 255, 0.05) !important;
        }

        .bento-card,
        .card-plan,
        .bento-news-card {
            padding: 32px !important;
            border: 1px solid rgba(255, 255, 255, 0.05) !important;
            background: linear-gradient(180deg, #0f0f11 0%, #09090a 100%) !important;
            transition: border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease !important;
            position: relative;
            overflow: hidden;
            border-color: rgba(255, 255, 255, 0.05) !important;
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.55) !important;
        }

        .bento-card:hover,
        .card-plan:hover,
        .bento-news-card:hover {
            border-color: rgba(255, 255, 255, 0.15) !important;
            box-shadow: 0 0 40px rgba(255, 255, 255, 0.025) !important;
        }

        h1,
        h2,
        h3,
        h4,
        .bb-executive-header,
        .sidebar-title,
        .robot-main-title,
        .bento-card .feature-main-value {
            color: #ffffff !important;
            text-shadow: none !important;
        }

        .theme-item,
        .theme-btn {
            padding: 10px 18px !important;
            border-radius: 8px !important;
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
            color: #6b7280 !important;
            display: inline-flex !important;
            flex: 0 0 auto !important;
            align-items: center !important;
            width: auto !important;
            min-width: max-content !important;
            white-space: nowrap !important;
            margin: 0 !important;
            border: 1px solid rgba(255, 255, 255, 0.04) !important;
            background: transparent !important;
            font-family: 'JetBrains Mono', monospace !important;
            font-size: 11px !important;
            letter-spacing: 0.03em !important;
            cursor: pointer !important;
            border-color: transparent !important;
            text-shadow: none !important;
        }

        .theme-item:hover,
        .theme-item.active,
        .theme-btn:hover,
        .theme-btn.active {
            color: #ffffff !important;
            background: #0f0f11 !important;
            border-color: rgba(255, 255, 255, 0.15) !important;
            text-shadow: none !important;
        }

        .robot-main-desc,
        .bento-card,
        .bento-card p,
        .bento-card .feature-benefits {
            color: #9ca3af !important;
        }

        .bento-card .value-label,
        .bento-card::before,
        .bento-card::after,
        .pipe-engine,
        .flux-header,
        .blueprint-header,
        .bb-executive-header span {
            color: #ffffff !important;
            text-shadow: none !important;
        }

        .bento-card::before,
        .bento-card::after,
        .bb-executive-header span,
        .pipe-badge,
        .flux-status span {
            border-color: rgba(255, 255, 255, 0.15) !important;
        }

        main input,
        main textarea,
        #license-input,
        .visual-blueprint-pipe {
            background: #000000 !important;
            border-color: rgba(255, 255, 255, 0.08) !important;
            color: #ffffff !important;
        }

        main input::placeholder,
        main textarea::placeholder {
            color: #6b7280 !important;
        }

        main input:focus,
        main textarea:focus {
            border-color: rgba(255, 255, 255, 0.25) !important;
            outline: none;
        }

        main button[onclick="verifyLicenseKey()"],
        .buy-btn.laser-btn {
            background: #ffffff !important;
            color: #000000 !important;
            border-radius: 8px !important;
            padding: 12px 24px !important;
            font-weight: 600 !important;
            transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease !important;
            border-color: #ffffff !important;
            box-shadow: none !important;
        }

        main button[onclick="verifyLicenseKey()"]:hover,
        .buy-btn.laser-btn:hover {
            border-color: rgba(255, 255, 255, 0.35) !important;
            box-shadow: 0 4px 20px rgba(255, 255, 255, 0.16) !important;
            filter: brightness(1.05);
            transform: translateY(-1px) !important;
            background: #d1d5db !important;
            color: #000000 !important;
        }/* Editorial card system shared across both snap screens. */
        html body .bento-card,
        html body .simulation-lab-grid,
        html body .pricing-card {
           background: rgba(10, 10, 12, 0.5) !important;
           backdrop-filter: blur(20px) saturate(180%) !important;
           -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
           border: 1px solid rgba(255, 255, 255, 0.04) !important;
           border-radius: 14px !important;
           transition: border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
           box-sizing: border-box !important;
        }

        html body .simulation-lab-summary,
        html body .live-blueprint-viewport {
           background: transparent !important;
           border-radius: 0 !important;
           transition: none !important;
        }

        html body .theme-item {
           color: #94a3b8 !important;
           background: rgba(10, 10, 12, 0.5) !important;
           border: 1px solid rgba(255, 255, 255, 0.04) !important;
           border-radius: 24px !important;
           font-family: 'JetBrains Mono', monospace !important;
           font-variant-numeric: normal !important;
           white-space: nowrap !important;
           transition: color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                       background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                       border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
        }

        html body .theme-item:hover,
        html body .theme-item.active {
           color: #ffffff !important;
           background: rgba(255, 255, 255, 0.06) !important;
           border-color: rgba(255, 255, 255, 0.16) !important;
        }

        /* Keep legal/API snippets inside their card without horizontal page overflow. */
        html body .legal-drawer pre,
        html body .legal-drawer code {
           box-sizing: border-box !important;
           max-width: 100% !important;
           min-width: 0 !important;
           overflow-wrap: anywhere !important;
       }

        html body .legal-drawer pre {
            box-sizing: border-box !important;
            width: 100% !important;
            max-width: 100% !important;
            min-width: 0 !important;
            padding: 14px 16px !important;
            margin-left: 0 !important;
            margin-right: 0 !important;
            overflow-x: auto !important;
            overflow-y: hidden !important;
            white-space: pre-wrap !important;
            overflow-wrap: anywhere !important;
            word-break: break-word !important;
        }

        html body .legal-drawer code {
            box-sizing: border-box !important;
            max-width: 100% !important;
            min-width: 0 !important;
            white-space: pre-wrap !important;
            overflow-wrap: anywhere !important;
        }

        /* Section 2 editorial showcase — replaced by a compact "getting started" strip. */
        #screen-payment .bb-trust-row {
           display: flex !important;
           justify-content: space-between !important;
           gap: 24px !important;
           width: 100% !important;
           max-width: 100% !important;
           margin: 0 auto 28px !important;
           padding: 0 !important;
           box-sizing: border-box !important;
        }

        #screen-payment .bb-trust-badge {
           flex: 1 1 0 !important;
           min-width: 0 !important;
           display: flex !important;
           flex-direction: column !important;
           gap: 10px !important;
           padding: 26px 24px !important;
           box-sizing: border-box !important;
           background: linear-gradient(180deg, rgba(255, 255, 255, 0.025) 0%, rgba(255, 255, 255, 0.01) 100%) !important;
           border: 1px solid rgba(255, 255, 255, 0.06) !important;
           border-radius: 14px !important;
           transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease, box-shadow 0.25s ease !important;
        }

        #screen-payment .bb-trust-badge:hover {
           transform: translateY(-4px) !important;
           border-color: rgba(0, 210, 255, 0.3) !important;
           box-shadow: 0 12px 32px rgba(0, 210, 255, 0.08) !important;
        }

        .bb-trust-icon {
           display: inline-flex !important;
           align-items: center !important;
           justify-content: center !important;
           width: 40px !important;
           height: 40px !important;
           font-size: 18px !important;
           border-radius: 10px !important;
           background: rgba(0, 210, 255, 0.06) !important;
           border: 1px solid rgba(0, 210, 255, 0.2) !important;
        }

        .bb-trust-title {
           color: #ffffff !important;
           font-family: 'JetBrains Mono', monospace !important;
           font-size: 12px !important;
           font-weight: 600 !important;
           letter-spacing: 0.05em !important;
           line-height: 1.5 !important;
        }

        .bb-trust-copy {
           color: #64748b !important;
           font-family: Inter, sans-serif !important;
           font-size: 12px !important;
           font-weight: 300 !important;
           line-height: 1.6 !important;
        }/* Compact "getting started" strip {
           display: flex !important;
           align-items: center !important;
           justify-content: center !important;
           gap: 18px !important;
           width: 100% !important;
           max-width: 100% !important;
           margin: 0 auto 48px !important;
           padding: 18px 28px !important;
           box-sizing: border-box !important;
           background: rgba(255, 255, 255, 0.015) !important;
           border: 1px solid rgba(255, 255, 255, 0.05) !important;
           border-radius: 12px !important;
           font-family: 'JetBrains Mono', monospace !important;
        }

        @media (max-width: 760px) {
           #screen-payment .bb-trust-row {
               flex-direction: column !important;
               gap: 16px !important;
               margin-bottom: 24px !important;
           }
        }

        /* Ground the legal footer to the Section 2 viewport edge. */
        

        

        /* Section 2 natural reading order: pricing, bento telemetry, legal baseline. */
        html body main #screen-payment {
           height: auto !important;
           min-height: 100vh !important;
           padding-bottom: 40px !important;
           box-sizing: border-box !important;
           overflow: visible !important;
           display: flex !important;
           flex-direction: column !important;
           justify-content: space-between !important;
       }

        html body main #screen-payment .screen-content {
            height: auto !important;
            max-height: none !important;
            overflow: visible !important;
            box-sizing: border-box !important;
            display: flex !important;
            flex-direction: column !important;
            justify-content: flex-start !important;
            align-items: center !important;
            width: 100% !important;
            min-height: 0 !important;
        }

        html body main #screen-payment .stripe-section {
           order: 1 !important;
           width: 100% !important;
           max-width: 100% !important;
           margin: 0 auto !important;
           padding-bottom: 120px !important;
        }

        /* FAQ sits right after the pricing grid (same order value; flex items with
           a tied order render in source/appendChild order, and stripe is always
           appended before faq in composeScreenSections()) and before the license
           verification widget. */
        html body main #screen-payment #cash-content > #pricing-faq {
           order: 1 !important;
           width: 100% !important;
           max-width: 100% !important;
           margin: 0 auto !important;
        }

        /* License verification widget renders after the pricing cards — most visitors don't have a key yet. */
        html body main #screen-payment #cash-content > #license-ingress {
           order: 2 !important;
        }

        html body main #screen-payment footer {
           position: relative !important;
           top: auto !important;
           bottom: auto !important;
           left: auto !important;
           right: auto !important;
           margin: auto auto 0 !important;
           width: 100% !important;
           max-width: 100% !important;
           padding: 20px 0 !important;
           box-sizing: border-box !important;
           z-index: 100 !important;
           display: flex !important;
           justify-content: space-between !important;
           align-items: center !important;
           border-top: 1px solid rgba(255, 255, 255, 0.03) !important;
           order: 2 !important;
           inset: auto !important;
           clear: both !important;
       }

        html body main #screen-payment #cash-content {
           min-height: 100% !important;
           display: flex !important;
           flex-direction: column !important;
        }

        html body main #screen-payment #cash-content > footer {
           order: 999 !important;
           flex: 0 0 auto !important;
           align-self: stretch !important;
        }

        @media (max-width: 600px) {
            html body main #screen-payment footer {
               flex-direction: column !important;
               align-items: flex-start !important;
               gap: 12px !important;
            }

            html body main #screen-payment footer > div:last-child {
               display: flex !important;
               flex-wrap: wrap !important;
               gap: 8px 16px !important;
            }

            html body main #screen-payment footer a {
               margin-left: 0 !important;
            }
        }

        /* Final cascade guard for legacy neon declarations. */
        

        .theme-item.active,
        .theme-btn.active {
            color: #ffffff !important;
            background: #090d16 !important;
            border-color: rgba(255, 255, 255, 0.25) !important;
            text-shadow: 0 0 10px rgba(255, 255, 255, 0.3) !important;

            .visual-blueprint-pipe {
                flex-wrap: wrap;
            }

            .pipe-connector {
                min-width: 32px;
            }
        }

        .theme-item.active,
        .theme-btn.active,
        .theme-item:hover,
        .theme-btn:hover {
            color: #ffffff !important;
            background: #0f0f11 !important;
            border-color: rgba(255, 255, 255, 0.15) !important;
            text-shadow: none !important;
        }

        .content-container .bento-card {
            padding: 20px !important;
            background: rgba(10, 10, 12, 0.5) !important;
            backdrop-filter: blur(20px) saturate(180%) !important;
            -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
            border: 1px solid rgba(255, 255, 255, 0.04) !important;
            border-radius: 14px !important;
            transition: border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
        }

        .content-container .bento-card > [id^="feature-content-"] {
            min-height: 0 !important;
        }/* Absolute final calibration layer: pricing,
        ROI,
        and integration balance. */
        html body main #screen-payment .pricing-card {
            border: 1px solid rgba(255, 255, 255, 0.03) !important;
            background: rgba(10, 10, 12, 0.45) !important;
            transition: border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
        }

        html body main #screen-payment .pricing-card:hover {
            border-color: rgba(255, 255, 255, 0.15) !important;
        }

/* Final single-line guarantee for the 5 master division tabs (overrides legacy wrap declaration). */
html body main #screen-command #sidebar-categories {
    flex-wrap: nowrap !important;
}

/* 🧭 Repère de transition page 1 → page 2 : habille l'espace vide en bas de
   #screen-command et annonce à la fois le scroll vertical vers la page suivante
   et le défilement horizontal une fois à l'intérieur de la matrice de robots. */
.bb-section-transition-cue {
    position: absolute !important;
    left: 50% !important;
    bottom: 22px !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
    font-family: 'JetBrains Mono', monospace !important;
    pointer-events: none !important;
    z-index: 2 !important;
    opacity: 0.85 !important;
}

.bb-transition-line {
    width: 1px !important;
    height: 34px !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.35) 100%) !important;
}

.bb-transition-label {
    font-size: 10px !important;
    letter-spacing: 0.18em !important;
    color: rgba(255, 255, 255, 0.55) !important;
    text-transform: uppercase !important;
}

.bb-transition-chevrons {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    line-height: 0.6 !important;
    color: var(--accent-green) !important;
    font-size: 18px !important;
}

.bb-transition-chevrons span {
    display: block !important;
    animation: bb-chevron-bounce 1.6s ease-in-out infinite !important;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.25) !important;
}

.bb-transition-chevrons span:nth-child(2) { animation-delay: 0.2s !important; opacity: 0.5 !important; }

@keyframes bb-chevron-bounce {
    0%, 100% { transform: translateY(0); opacity: 0.35; }
    50% { transform: translateY(5px); opacity: 1; }
}

/* 🟢 Indicateur de progression à 3 points : évoque les 3 catégories de robots
   à venir (01/02/03) et s'anime en séquence pour suggérer un défilement continu. */
.bb-transition-progress {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-top: 4px !important;
}

.bb-transition-dot {
    width: 4px !important;
    height: 4px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.25) !important;
    animation: bb-dot-pulse 1.8s ease-in-out infinite !important;
}

.bb-transition-dot:nth-child(2) { animation-delay: 0.25s !important; }
.bb-transition-dot:nth-child(3) { animation-delay: 0.5s !important; }

@keyframes bb-dot-pulse {
    0%, 100% { background: rgba(255, 255, 255, 0.25); transform: scale(1); box-shadow: none; }
    50% { background: var(--accent-green); transform: scale(1.5); box-shadow: 0 0 6px var(--accent-green); }
}

.bb-transition-swipe {
    font-size: 9.5px !important;
    letter-spacing: 0.16em !important;
    color: rgba(255, 255, 255, 0.4) !important;
    text-transform: uppercase !important;
    margin-top: 2px !important;
    animation: bb-swipe-pulse 2.4s ease-in-out infinite !important;
}

@keyframes bb-swipe-pulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.75; }
}

@media (max-width: 700px) {
    .bb-section-transition-cue { display: none !important; }
}

/* 🖥️ HABILLAGE GÉOMÉTRIQUE D'AMBIANCE // formes en pointillé façon schéma technique,
   très subtiles, purement décoratives (pointer-events:none) et posées en arrière-plan
   de chaque section pleine page. N'affecte ni la grille ni les flex existants : tout
   passe par des pseudo-éléments ::before/::after positionnés en absolu derrière le
   contenu réel (voir règles position/z-index ci-dessous qui remontent le contenu). */
.screen-section {
    isolation: isolate !important;
}

.screen-section::before,
.screen-section::after {
    content: '' !important;
    position: absolute !important;
    z-index: 0 !important;
    pointer-events: none !important;
    border: 1px dashed rgba(0, 210, 255, 0.14) !important;
    opacity: 0.85 !important;
}

/* Grand cercle en pointillé, rotation lente — évoque un scan / radar de traitement.
   Vitesse doublée (90s → 42s) et teinte cyan de la marque (au lieu du blanc neutre)
   pour que le mouvement d'arrière-plan se remarque réellement pendant une visite
   typique, sans devenir une distraction. */
.screen-section::before {
    width: 620px !important;
    height: 620px !important;
    border-radius: 50% !important;
    top: -180px !important;
    right: -220px !important;
    animation: bb-geo-spin 42s linear infinite !important;
}

/* Carré pivoté (losange) en pointillé, rotation inverse plus lente — casse la
   symétrie du cercle et renforce l'effet "traitement informatique" en arrière-plan. */
.screen-section::after {
    width: 420px !important;
    height: 420px !important;
    bottom: -160px !important;
    left: -140px !important;
    transform: rotate(45deg) !important;
    animation: bb-geo-spin-reverse 58s linear infinite !important;
}

@keyframes bb-geo-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes bb-geo-spin-reverse {
    from { transform: rotate(45deg); }
    to { transform: rotate(-315deg); }
}

/* Légère variation de position/teinte par section pour éviter un effet "copié-collé"
   trop identique entre les 3 pages tout en gardant la même famille visuelle. */
#screen-playground::before { top: -260px !important; right: -260px !important; border-color: rgba(0, 255, 136, 0.12) !important; }
#screen-payment::after { border-color: rgba(0, 210, 255, 0.1) !important; }

/* The pricing/payment page (page 3) is much shorter than a full viewport once
   the API playground block was removed — forcing min-height:100vh here left a
   large dead band of background below the footer with nothing in it. Page 1 and
   2 are close enough to a full screen that they don't need this override.
   Also: overflow must stay hidden specifically here (unlike the other two
   sections, which need overflow:visible so their taller-than-viewport real
   content isn't clipped) because #screen-payment is the LAST section — the
   decorative ::after pseudo-element (a 420px square rotated 45°, anchored with
   bottom:-160px) bleeds ~250px below the section with nothing after it to
   visually absorb that bleed, which was inflating the whole page's scroll
   height and showing up as dead empty space at the very bottom. */
#screen-payment.screen-section {
    min-height: auto !important;
    overflow: hidden !important;
}

/* Petits repères d'angle façon "viseur / scan de traitement", aux 4 coins de chaque
   section. Purement cosmétique, très discret (opacité faible), sans texte ajouté. */
.screen-section .bb-scan-corner {
    position: absolute !important;
    z-index: 0 !important;
    width: 22px !important;
    height: 22px !important;
    pointer-events: none !important;
    opacity: 0.35 !important;
}

.bb-scan-corner--tl { top: 28px !important; left: 28px !important; border-top: 1px solid rgba(255, 255, 255, 0.18) !important; border-left: 1px solid rgba(255, 255, 255, 0.18) !important; }
.bb-scan-corner--br { bottom: 28px !important; right: 28px !important; border-bottom: 1px solid rgba(255, 255, 255, 0.18) !important; border-right: 1px solid rgba(255, 255, 255, 0.18) !important; }

/* Remonte le contenu réel de chaque section au-dessus de la couche décorative
   (les pseudo-éléments ci-dessus sont en z-index:0, le contenu passe à z-index:1). */
#screen-command > .screen-content,
#screen-playground > .bb-horizontal-snap-track,
#screen-payment > .screen-content {
    position: relative !important;
    z-index: 1 !important;
}

@media (prefers-reduced-motion: reduce) {
    .screen-section::before,
    .screen-section::after {
        animation: none !important;
    }
}

/* Keep the slow-spinning dashed shapes on mobile too (they were fully hidden
   before, making the mobile background feel static/flat compared to desktop),
   just scaled down so they read as a corner accent instead of dwarfing a
   375-430px viewport. `html { overflow-x: hidden }` already clips any bleed
   from the negative top/right/bottom/left offsets, so this can't cause a
   horizontal scrollbar. Scan corners stay hidden — purely static/cosmetic,
   not part of the "dynamic background" ask, and crowd the edges on small screens. */
@media (max-width: 700px) {
    .screen-section::before {
        width: 300px !important;
        height: 300px !important;
        top: -90px !important;
        right: -110px !important;
    }

    .screen-section::after {
        width: 200px !important;
        height: 200px !important;
        bottom: -70px !important;
        left: -70px !important;
    }

    #screen-playground::before {
        top: -120px !important;
        right: -120px !important;
    }

    .screen-section .bb-scan-corner {
        display: none !important;
    }
}

/* 💳 PRICING GRID — modern bento-style pricing cards replacing the old
   wide "stripe" plan boxes, matching the compact card language used on
   the rest of the site (screen-command / screen-playground). */
.bb-pricing-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
}

.bb-pricing-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 28px !important;
}

.bb-pricing-card--featured {
    position: relative;
    border-color: rgba(0, 255, 136, 0.25) !important;
}

.bb-pricing-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    background: #00ff88;
    color: #000000;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 20px;
    box-shadow: 0 4px 14px rgba(0, 255, 136, 0.35);
    white-space: nowrap;
    z-index: 2;
}

.bb-pricing-card-header {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bb-pricing-name {
    font-size: 15px;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    text-transform: uppercase;
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: 0.5px;
}

.bb-pricing-audience {
    font-size: 11px;
    color: var(--accent-green);
    font-family: 'JetBrains Mono', monospace;
    opacity: 0.8;
}

.bb-pricing-desc {
    font-size: 12px;
    color: #94a3b8;
    line-height: 1.5;
    margin: 0;
}

.bb-pricing-features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-family: 'JetBrains Mono', monospace;
    flex: 1 1 auto;
}

.bb-pricing-features li {
    font-size: 11px;
    color: #94a3b8;
    line-height: 1.5;
}

.bb-pricing-features--highlight li {
    color: #ffffff;
    font-weight: 700;
}

.bb-pricing-action {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.bb-pricing-price-wrapper {
    display: flex;
    flex-direction: column;
}

.bb-pricing-price {
    font-size: 26px;
    font-weight: 900;
    color: var(--accent-green);
    font-family: 'JetBrains Mono', monospace;
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.12);
}

.bb-pricing-term {
    font-size: 9px;
    color: var(--text-muted);
    font-family: 'JetBrains Mono', monospace;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bb-pricing-btn {
    text-decoration: none;
    display: inline-block;
    text-align: center;
    line-height: 50px;
    width: 100%;
    border: none;
    cursor: pointer;
}

.bb-pricing-savings-badge {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.05em;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 4px 10px;
    border-radius: 4px;
    display: inline-block;
    align-self: flex-start;
}

@media (max-width: 760px) {
    .bb-pricing-grid {
        grid-template-columns: 1fr;
    }
}

/* ❓ Pricing FAQ — same 1200px rail and bento-card language as the pricing grid
   right above it, so it reads as one continuous "decision" block. */
.bb-faq-block {
    width: 100%;
    max-width: 1200px;
    margin: 40px auto 0;
    box-sizing: border-box;
}

.bb-faq-title {
    font-size: 13px;
    font-weight: 700;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: 'JetBrains Mono', monospace;
    margin: 0 0 20px 0;
}

.bb-faq-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.bb-faq-item {
    background: #09090a;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 14px;
    padding: 22px 24px;
    box-sizing: border-box;
}

.bb-faq-q {
    display: block;
    font-size: 13.5px;
    font-weight: 700;
    color: #ffffff;
    font-family: 'JetBrains Mono', monospace;
    line-height: 1.5;
    margin-bottom: 10px;
}

.bb-faq-a {
    font-size: 13px;
    color: #94a3b8;
    line-height: 1.65;
    margin: 0;
    font-family: Inter, sans-serif;
}

.bb-faq-a a {
    color: #00d2ff;
    text-decoration: none;
}

.bb-faq-a a:hover {
    text-decoration: underline;
}

@media (max-width: 760px) {
    .bb-faq-grid {
        grid-template-columns: 1fr;
    }
}

/* 📱 MOBILE RESPONSIVE FIXES — logo positioning and scroll indicator tweaks */
@media (max-width: 768px) {
    aside {
        height: auto !important;
    }

    /* The 3 category tabs (now the exact same pill buttons as desktop — see
       initializeApp() in index.html, no more separate mobile <select>) overflow
       a phone's width and rely on horizontal scroll. Fade the right edge so it
       reads as "more tabs this way" instead of a hard, easy-to-miss clip. */
    #screen-command #sidebar-categories {
        mask-image: linear-gradient(to right, #000 85%, transparent 100%) !important;
        -webkit-mask-image: linear-gradient(to right, #000 85%, transparent 100%) !important;
    }

    .sidebar-header {
        padding: 12px 16px 12px 6px !important;
        justify-content: flex-start !important;
    }

    .bb-executive-header {
        padding: 12px 0 !important;
    }

    /* Adapt theme-list for mobile dropdown */
    .theme-list {
        height: auto !important;
        padding: 12px 16px !important;
    }

    /* NOTE: this used to clear an 80px-tall FIXED `aside` top bar. That aside is
       now permanently hidden (`body > aside { display: none }` — its content is
       moved into the in-flow #hero-content header via composeScreenSections()),
       so the 80px reserved here was pure dead black space above the fold on
       mobile, with no logo/grid-background showing through it. */
    html body main {
        padding-top: 0 !important;
    }

    /* NOTE: used to hide the "SWIPE" indicator below 480px — but that's nearly
       every real phone in portrait (iPhone SE/12/13/14, Pixel, Galaxy all sit
       between 360-430px), so it was silently killing the one hint that tells
       mobile visitors they can swipe between the 01/02/03 categories. Removed
       so the shorter "← SWIPE ←" text (set below, max-width:600px) stays visible. */
}

/* Show scroll indicator on mobile with short text */
@media (max-width: 600px) {
    .bb-horizontal-slide::after {
        content: '← SWIPE ←' !important;
        font-size: 10px !important;
        bottom: 16px !important;
    }
}

/* 📱 LANDSCAPE MODE FIXES — optimize transitions and scroll for mobile landscape */
@media (max-height: 500px) and (orientation: landscape) {
    html, body {
        scroll-behavior: auto !important;
    }

    /* Reduce vertical space used in landscape */
    .bb-horizontal-snap-track {
        min-height: auto !important;
    }

    .bb-horizontal-slide {
        min-height: 100vh !important;
        padding: 20px !important;
    }

    /* Reduce padding in copy sections */
    .bb-horizontal-slide-inner {
        gap: 32px !important;
        align-items: flex-start !important;
        min-height: auto !important;
        padding: 20px 0 !important;
    }

    .bb-horizontal-slide-copy {
        gap: 12px !important;
    }

    .bb-horizontal-slide-copy h2 {
        font-size: 36px !important;
        line-height: 1.1 !important;
    }

    .bb-horizontal-slide-subtitle {
        font-size: 13px !important;
    }

    .bb-horizontal-slide-copy p {
        font-size: 14px !important;
        line-height: 1.5 !important;
    }

    /* Hide scroll indicator in landscape to save space */
    .bb-horizontal-slide::after {
        display: none !important;
    }

    /* Improve scroll-snap behavior for transitions */
    .screen-section {
        scroll-snap-align: start !important;
        scroll-snap-stop: none !important;
    }

    /* Faster transitions between pages in landscape */
    * {
        scroll-behavior: auto !important;
    }
}