:root {
            /* Typography */
            --font-primary: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            --bba-blue: #003A70;
            /* Sophisticated BBA Logo Blue */
            --bba-gold: #D4AF37;
            /* Sophisticated BBA Logo Gold */
            --font-fallback: "Helvetica Neue", Helvetica, Arial, sans-serif;
            --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

            /* Colors */
            --color-white: #ffffff;
            --color-black: #000000;
            --color-primary-text: #1d1d1f;
            --color-secondary-text: #86868b;
            --color-accent-blue: #0066cc;
            --color-accent-teal: #14b8a6;
            --color-accent-orange: #f97316;

            --color-surface-light: #f5f5f7;
            --color-surface-hover: #e8e8ed;
            --color-surface-dark: #1c1c1e;

            /* Glow & Effects */
            --glow-teal: rgba(20, 184, 166, 0.4);
            --glow-orange: rgba(249, 115, 22, 0.4);
            --glow-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
            --card-shadow: 0 8px 32px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.05);

            /* Layout */
            --container-max-width: 1200px;
        }

        body {
            background-color: var(--color-white);
            color: var(--color-primary-text);
            font-family: var(--font-primary);
            overflow-x: hidden;
            margin: 0;
            padding: 0;
            scroll-behavior: smooth;
        }

        /* Ambient Backgrounds */
        .ambient-light,
        .ambient-light-2,
        .ambient-light-3 {
            position: fixed;
            border-radius: 50%;
            filter: blur(100px);
            z-index: 0;
            pointer-events: none;
            animation: ambientFloat 15s infinite alternate ease-in-out;
            opacity: 0.6;
        }

        .ambient-light {
            top: -10%;
            left: 0;
            width: 600px;
            height: 600px;
            background: radial-gradient(circle, rgba(20, 184, 166, 0.08), transparent 70%);
        }

        .ambient-light-2 {
            bottom: -10%;
            right: 10%;
            width: 700px;
            height: 700px;
            background: radial-gradient(circle, rgba(249, 115, 22, 0.05), transparent 70%);
            animation-delay: -5s;
        }

        .ambient-light-3 {
            top: 40%;
            left: 30%;
            width: 500px;
            height: 500px;
            background: radial-gradient(circle, rgba(0, 102, 204, 0.05), transparent 70%);
            animation-duration: 20s;
        }

        @keyframes ambientFloat {
            0% {
                transform: translate(0, 0) scale(1);
            }

            100% {
                transform: translate(100px, -50px) scale(1.1);
            }
        }



        /* Container */
        .ds-container {
            max-width: var(--container-max-width);
            margin: 0 auto;
            padding: 100px 24px;
            position: relative;
            z-index: 10;
        }

        /* Typography */
        .ds-title {
            font-size: clamp(2.4rem, 4.5vw, 3.8rem);
            line-height: 1.1;
            font-weight: 700;
            letter-spacing: -0.015em;
            margin-bottom: 18px;
        }

        .text-transparent-bg {
            background: linear-gradient(135deg, #000 0%, #333 40%, var(--color-accent-teal) 80%, var(--color-accent-blue) 100%);
            background-size: 200% auto;
            color: transparent;
            -webkit-background-clip: text;
            background-clip: text;
            animation: gradientShift 6s ease infinite;
        }

        @keyframes gradientShift {
            0% {
                background-position: 0% 50%;
            }

            50% {
                background-position: 100% 50%;
            }

            100% {
                background-position: 0% 50%;
            }
        }

        .ds-headline {
            font-size: 48px;
            font-weight: 600;
            letter-spacing: -0.015em;
            line-height: 1.1;
            margin-bottom: 16px;
        }

        .ds-subhead {
            font-size: 24px;
            font-weight: 400;
            line-height: 1.3;
            color: var(--color-secondary-text);
            margin-bottom: 32px;
        }

        .ds-body-lg {
            font-size: 19px;
            line-height: 1.4;
            color: var(--color-primary-text);
        }

        .ds-body {
            font-size: 17px;
            line-height: 1.47;
            color: var(--color-primary-text);
        }

        .ds-caption {
            font-size: 12px;
            line-height: 1.3;
            color: var(--color-secondary-text);
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        /* Entry Animations */
        .slide-up-fade {
            opacity: 0;
            transform: translateY(30px);
            filter: blur(8px);
            transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
        }

        .slide-up-fade.in-view {
            opacity: 1;
            transform: translateY(0);
            filter: blur(0);
        }

        /* Glass & Glow Cards */
        .glow-card {
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
            border-radius: 24px;
            padding: 40px;
            box-shadow: var(--card-shadow);
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            transform-style: preserve-3d;
            border: 1px solid rgba(255, 255, 255, 0.5);
        }

        .glow-card:hover {
            transform: translateY(-8px) scale(1.02);
            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.02), 0 0 40px var(--glow-teal);
        }

        /* Buttons */
        .ds-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 14px 28px;
            font-size: 15px;
            font-weight: 600;
            border-radius: 980px;
            text-decoration: none;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .ds-btn-primary {
            background-color: var(--color-primary-text);
            color: var(--color-white);
        }

        .ds-btn-primary:hover {
            background-color: #000;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
            transform: scale(1.03);
        }

        .ds-btn-glow {
            background: linear-gradient(135deg, var(--color-accent-teal), #06b6d4);
            color: var(--color-white);
            border: none;
        }

        .ds-btn-glow:hover {
            transform: translateY(-2px) scale(1.05);
            box-shadow: 0 10px 30px var(--glow-teal);
        }

        .ds-btn-outline {
            background: transparent;
            color: var(--color-primary-text);
            border: 1px solid var(--color-primary-text);
        }

        .ds-btn-outline:hover {
            background: var(--color-primary-text);
            color: var(--color-white);
        }

        /* Grid Layout */
        .ds-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 32px;
        }

        /* Section Styling */
        .ds-section-divider {
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.1), transparent);
            margin: 80px 0;
        }

        /* Inputs */
        .ds-input {
            background: var(--color-white);
            border: 1px solid #d2d2d7;
            border-radius: 12px;
            padding: 16px 20px;
            font-size: 17px;
            width: 100%;
            outline: none;
            box-sizing: border-box;
            transition: all 0.3s ease;
        }

        .ds-input:focus {
            border-color: var(--color-accent-teal);
            box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.15);
            transform: translateY(-2px);
        }

        /* Badges */
        .ds-badge {
            display: inline-flex;
            align-items: center;
            padding: 6px 14px;
            border-radius: 999px;
            font-size: 13px;
            font-weight: 500;
            background: rgba(20, 184, 166, 0.1);
            color: var(--color-accent-teal);
            border: 1px solid rgba(20, 184, 166, 0.2);
        }

        /* Modals */
        .ds-modal-preview {
            position: relative;
            height: 250px;
            background: var(--color-surface-light);
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            border: 1px solid rgba(0, 0, 0, 0.05);
        }

        .ds-modal {
            background: rgba(255, 255, 255, 0.85);
            backdrop-filter: blur(40px);
            border-radius: 24px;
            padding: 32px;
            width: 340px;
            box-shadow: 0 25px 80px rgba(0, 0, 0, 0.15);
            transform: scale(0.95);
            opacity: 0.8;
            transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .ds-modal-preview:hover .ds-modal {
            transform: scale(1);
            opacity: 1;
        }

        /* Tooltip */
        .ds-tooltip-wrapper {
            position: relative;
            display: inline-block;
        }

        .ds-tooltip {
            position: absolute;
            top: -45px;
            left: 50%;
            transform: translateX(-50%) translateY(10px);
            background: var(--color-surface-dark);
            color: var(--color-white);
            padding: 8px 16px;
            border-radius: 8px;
            font-size: 13px;
            font-weight: 500;
            opacity: 0;
            pointer-events: none;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            white-space: nowrap;
        }

        .ds-tooltip::after {
            content: '';
            position: absolute;
            bottom: -6px;
            left: 50%;
            transform: translateX(-50%);
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-top: 6px solid var(--color-surface-dark);
        }

        .ds-tooltip-wrapper:hover .ds-tooltip {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }

        /* Navbar Preview */
        .ds-navbar {
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: saturate(180%) blur(20px);
            -webkit-backdrop-filter: saturate(180%) blur(20px);
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
            padding: 16px 24px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-radius: 100px;
            margin: 20px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
        }

        /* Color Swatch */
        .color-swatch {
            width: 100%;
            height: 120px;
            border-radius: 16px;
            margin-bottom: 16px;
            box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
            transition: transform 0.3s ease;
        }

        .color-card:hover .color-swatch {
            transform: scale(1.05);
        }

        /* BBA HERO STYLES (IMPORTED FROM HERO4) */
        .bba-hero {
            position: relative;
            min-height: 100vh;
            display: flex;
            align-items: flex-end;
            justify-content: flex-start;
            overflow: hidden;
            padding: 0 6% 48px 6%;
        }

        .bba-hero__video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 0;
            transform: translateZ(0);
            backface-visibility: hidden;
            will-change: transform;
            pointer-events: none;
        }

        .bba-hero__overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.2) 100%);
            z-index: 1;
        }

        .bba-hero__header {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            padding: 48px 6%;
            box-sizing: border-box;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            z-index: 10;
            animation: bbaHeaderFadeIn 1.5s cubic-bezier(0.16, 1, 0.3, 1) 0.4s backwards;
        }

        @keyframes bbaHeaderFadeIn {
            0% {
                opacity: 0;
                transform: translateY(-10px);
            }

            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .bba-hero__nav {
            display: flex;
            gap: 48px;
            align-items: center;
        }

        .bba-hero__nav-link {
            font-size: 13px;
            font-weight: 600;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.85);
            text-decoration: none;
            position: relative;
            padding: 8px 0;
            transition: all 0.4s ease;
            text-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
        }

        .bba-hero__nav-link::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 2px;
            background: #D4AF37;
            box-shadow: 0 0 14px rgba(212, 175, 55, 0.9);
            transform: scaleX(0);
            transform-origin: right;
            transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
        }

        .bba-hero__nav-link:hover {
            color: #D4AF37;
            text-shadow: 0 0 20px rgba(212, 175, 55, 0.5), 0 4px 14px rgba(0, 0, 0, 0.8);
        }

        .bba-hero__nav-link:hover::after {
            transform: scaleX(1);
            transform-origin: left;
        }

        .bba-hero__content {
            position: relative;
            z-index: 2;
            max-width: 1120px;
            text-align: left;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 24px;
        }

        .bba-hero__headline {
            max-width: 100%;
            font-size: clamp(30px, 3vw, 42px);
            font-weight: 700;
            line-height: 1.06;
            letter-spacing: -0.012em;
            margin: 0;
            color: rgba(255, 255, 255, 0.95);
            white-space: normal;
            word-break: keep-all;
        }

        .bba-hero__subheadline {
            max-width: fit-content;
            margin: 0;
            display: inline-block;
            background-color: var(--bba-blue);
            color: #ffffff;
            padding: 16px 36px;
            border-radius: 999px;
            font-size: clamp(15px, 1.3vw, 18px);
            font-weight: 500;
            line-height: 1.5;
            letter-spacing: 0.01em;
            border: 1px solid transparent;
            position: relative;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
            box-shadow: 0 4px 20px rgba(0, 58, 112, 0.4);
            cursor: default;
        }

        .bba-hero__subheadline:hover {
            background-color: #002850;
            border: 1px solid var(--bba-gold);
            box-shadow: 0 8px 30px rgba(212, 175, 55, 0.25), 0 0 15px rgba(212, 175, 55, 0.15) inset;
            color: var(--bba-gold);
            transform: translateY(-2px);
        }

        .bba-hero__subheadline::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg,
                    transparent,
                    rgba(212, 175, 55, 0.25),
                    transparent);
            transition: none;
            pointer-events: none;
        }

        .bba-hero__subheadline:hover::before {
            animation: goldShine 0.8s ease-in-out forwards;
        }

        .bba-hero__button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background-color: var(--bba-blue);
            color: #ffffff;
            padding: 14px 32px;
            border-radius: 999px;
            font-size: 16px;
            font-weight: 600;
            text-decoration: none;
            border: 1px solid transparent;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
            box-shadow: 0 4px 20px rgba(0, 58, 112, 0.4);
        }

        .bba-hero__button svg {
            width: 18px;
            height: 18px;
            margin-left: 8px;
            fill: none;
            stroke: currentColor;
            stroke-width: 2.5;
            stroke-linecap: round;
            stroke-linejoin: round;
            transition: all 0.4s ease;
        }

        .bba-hero__button:hover {
            background-color: #002850;
            border: 1px solid var(--bba-gold);
            box-shadow: 0 8px 30px rgba(212, 175, 55, 0.25), 0 0 15px rgba(212, 175, 55, 0.15) inset;
            color: var(--bba-gold);
            transform: translateY(-2px);
        }

        .bba-hero__button:hover svg {
            stroke: var(--bba-gold);
            transform: translateX(4px);
        }

        .bba-hero__button::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg,
                    transparent,
                    rgba(212, 175, 55, 0.25),
                    transparent);
            transition: none;
        }

        .bba-hero__button:hover::before {
            animation: goldShine 0.8s ease-in-out forwards;
        }

        @keyframes goldShine {
            0% {
                left: -100%;
            }

            100% {
                left: 100%;
            }
        }

        @media (max-width: 768px) {
            .bba-hero {
                padding: 0 24px 40px 24px;
            }

            .bba-hero__header {
                padding: 32px 24px;
                justify-content: center;
            }

            .bba-hero__nav {
                gap: 24px;
                justify-content: center;
                flex-wrap: wrap;
            }

            .bba-hero__nav-link {
                font-size: 11px;
                letter-spacing: 0.1em;
            }

            .bba-hero__content {
                max-width: 100%;
            }

            .bba-hero__headline {
                font-size: clamp(24px, 6.5vw, 32px);
                max-width: 100%;
            }

            .bba-hero__subheadline {
                max-width: 100%;
                font-size: 16px;
                line-height: 1.55;
            }
        }

        /* =========================================
       SECTION 02: BBA DARK MODE DASHBOARD UI
       ========================================= */

        .bba-section-02 {
            background: linear-gradient(180deg, #f8f6f1 0%, #ffffff 100%);
            color: #1d1d1f;
            padding: 36px 18px 122px 18px;
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            z-index: 5;
            border-top: 1px solid rgba(212, 175, 55, 0.18);
        }

        /* Subtle glow at the top to blend with video */
        .bba-section-02::before {
            content: '';
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 80%;
            height: 2px;
            background: radial-gradient(circle, rgba(212, 175, 55, 0.28) 0%, rgba(212, 175, 55, 0.08) 42%, transparent 78%);
            opacity: 0.55;
            filter: blur(10px);
        }

        .bba-sec2-container {
            max-width: 1320px;
            width: 100%;
            text-align: left;
            display: flex;
            flex-direction: column;
            position: relative;
        }

        /* Removing watermark logic per user request */

        .bba-sec2-intro {
            position: relative;
            z-index: 1;
            margin-bottom: 40px;
            width: 100%;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 80px;
            align-items: center;
        }

        .bba-sec2-intro-image-wrapper {
            width: 100%;
            height: 520px;
            border-radius: 12px;
            overflow: hidden;
            display: flex;
            background: transparent;
        }

        .bba-sec2-intro-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            display: block;
        }

        .bba-sec2-intro-copy {
            max-width: 640px;
        }

        .bba-sec2-headline {
            font-size: clamp(36px, 4.5vw, 72px);
            font-weight: 300;
            line-height: 1.15;
            letter-spacing: -0.025em;
            color: #003A70;
            margin-bottom: 24px;
        }

        .bba-sec2-headline strong {
            font-weight: 700;
            color: #003A70;
            background: none;
            -webkit-text-fill-color: initial;
        }

        .bba-sec2-opening {
            font-size: clamp(18px, 2vw, 20px);
            font-weight: 400;
            color: #5d6673;
            line-height: 1.6;
            max-width: 600px;
        }

        .bba-sec2-signal-panel {
            position: relative;
            min-height: 100%;
            padding: 30px 30px 28px;
            border-radius: 28px;
            border: 1px solid rgba(15, 55, 104, 0.1);
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 244, 236, 0.94) 100%);
            box-shadow: 0 24px 60px rgba(15, 32, 56, 0.12);
            overflow: hidden;
        }

        .bba-sec2-signal-panel::before {
            content: '';
            position: absolute;
            inset: 0;
            background:
                radial-gradient(circle at top right, rgba(212, 175, 55, 0.12), transparent 34%),
                radial-gradient(circle at bottom left, rgba(15, 55, 104, 0.08), transparent 40%);
            pointer-events: none;
        }

        .bba-sec2-panel-kicker {
            position: relative;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 20px;
            font-size: 14px;
            font-weight: 700;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: rgba(15, 55, 104, 0.52);
            transform-origin: left center;
            animation: bbaKickerPulse 3s ease-in-out infinite;
        }

        @keyframes bbaKickerPulse {

            0%,
            100% {
                opacity: 0.8;
                transform: scale(1);
                text-shadow: 0 0 4px rgba(15, 55, 104, 0.0);
            }

            50% {
                opacity: 1;
                text-shadow: 0 0 18px rgba(15, 55, 104, 0.5);
                transform: scale(1.03);
            }
        }

        .bba-sec2-panel-kicker::before {
            content: '';
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #d4af37;
            animation: bbaKickerDotPulse 3s ease-in-out infinite;
        }

        @keyframes bbaKickerDotPulse {

            0%,
            100% {
                box-shadow: 0 0 10px rgba(212, 175, 55, 0.4);
            }

            50% {
                box-shadow: 0 0 28px rgba(212, 175, 55, 0.95);
            }
        }

        .bba-sec2-panel-headline {
            position: relative;
            margin: 0 0 22px;
            font-size: 52px;
            line-height: 1.2;
            color: #132742;
        }

        .bba-sec2-panel-metrics {
            position: relative;
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 12px;
            margin-bottom: 22px;
        }

        .bba-sec2-metric {
            padding: 14px 14px 16px;
            border-radius: 18px;
            background: rgba(248, 246, 241, 0.92);
            border: 1px solid rgba(15, 55, 104, 0.08);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
        }

        .bba-sec2-metric-value {
            display: block;
            margin-bottom: 6px;
            font-size: 26px;
            font-weight: 600;
            color: #0f3768;
        }

        .bba-sec2-metric-label {
            display: block;
            font-size: 14px;
            font-weight: 600;
            line-height: 1.5;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: rgba(29, 29, 31, 0.85);
        }

        .bba-sec2-alert-list {
            position: relative;
            display: grid;
            gap: 12px;
            margin: 0 0 24px;
            padding: 0;
            list-style: none;
        }

        .bba-sec2-alert-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            padding: 14px 16px;
            border-radius: 18px;
            background: rgba(255, 255, 255, 0.84);
            border: 1px solid rgba(15, 55, 104, 0.08);
            box-shadow: 0 10px 24px rgba(15, 32, 56, 0.05);
        }

        .bba-sec2-alert-copy {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .bba-sec2-alert-title {
            font-size: 20px;
            font-weight: 600;
            color: #16263f;
        }

        .bba-sec2-alert-text {
            font-size: 16px;
            line-height: 1.55;
            color: #66707c;
        }

        .bba-sec2-alert-state {
            flex-shrink: 0;
            padding: 8px 14px;
            border-radius: 999px;
            font-size: 13px;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            animation: bbaAlertBreathe 3.5s ease-in-out infinite;
            --alert-glow: transparent;
        }

        .bba-sec2-alert-state.is-critico {
            color: #b3261e;
            background: rgba(179, 38, 30, 0.06);
            border: 1px solid rgba(179, 38, 30, 0.15);
            --alert-glow: rgba(179, 38, 30, 0.48);
        }

        .bba-sec2-alert-state.is-alerta {
            color: #d97706;
            background: rgba(217, 119, 6, 0.06);
            border: 1px solid rgba(217, 119, 6, 0.15);
            --alert-glow: rgba(217, 119, 6, 0.48);
        }

        .bba-sec2-alert-state.is-latente {
            color: #8f6511;
            background: rgba(212, 175, 55, 0.08);
            /* slightly lower opacity to be subtle */
            border: 1px solid rgba(180, 138, 44, 0.12);
            --alert-glow: rgba(212, 175, 55, 0.4);
        }

        @keyframes bbaAlertBreathe {

            0%,
            100% {
                box-shadow: 0 0 4px var(--alert-glow);
            }

            50% {
                box-shadow: 0 0 22px var(--alert-glow);
            }
        }

        .bba-sec2-panel-footer {
            position: relative;
            padding-top: 18px;
            border-top: 1px solid rgba(15, 55, 104, 0.08);
            font-size: 18px;
            font-weight: 400;
            line-height: 1.6;
            color: #7b8595;
        }

        .bba-sec2-transition-text {
            max-width: 1100px;
            margin: 0 auto 32px auto;
            padding: 48px 40px;
            border-radius: 24px;
            background: #EAE5D6;
            border: 1px solid rgba(27, 47, 75, 0.10);
            border-top: 3px solid rgba(212, 175, 55, 0.95);
            box-shadow: 0 16px 40px rgba(15, 32, 56, 0.05), 0 6px 16px rgba(15, 32, 56, 0.03);
            text-align: center;
            position: relative;
            z-index: 1;
            font-size: clamp(24px, 2.8vw, 32px);
            font-weight: 600;
            line-height: 1.55;
            color: #1B2F4B;
            letter-spacing: -0.012em;
        }

        .bba-sec2-transition-text span {
            color: #002850;
            font-weight: 700;
        }

        .bba-sec2-closing-block {
            background:
                radial-gradient(circle at 18% 24%, rgba(0, 102, 204, 0.22), transparent 28%),
                radial-gradient(circle at 76% 16%, rgba(212, 175, 55, 0.18), transparent 26%),
                linear-gradient(135deg, rgba(6, 16, 34, 0.98) 0%, rgba(8, 8, 8, 0.98) 38%, rgba(10, 10, 10, 0.98) 100%);
            color: #ffffff;
            padding: 92px 72px 112px 72px;
            border-radius: 32px 32px 44px 44px;
            max-width: none;
            width: 100vw;
            margin-top: 0;
            margin-bottom: -88px;
            margin-left: -50vw;
            margin-right: -50vw;
            text-align: center;
            border: 1px solid rgba(255, 255, 255, 0.10);
            box-shadow: 0 42px 110px rgba(0, 0, 0, 0.82), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
            position: relative;
            left: 50%;
            right: 50%;
            overflow: hidden;
            transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.6s ease;
            z-index: 4;
        }

        .bba-sec2-closing-block:hover {
            transform: translateY(-4px);
            border-color: rgba(255, 255, 255, 0.15);
        }

        /* Radar Sweep Effect inside final block */
        .bba-closing-aura {
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: conic-gradient(from 0deg, transparent 58%, rgba(0, 102, 204, 0.30) 86%, rgba(212, 175, 55, 0.34) 100%);
            animation: aurasweep 9s infinite linear;
            opacity: 0.94;
            pointer-events: none;
            z-index: 0;
            will-change: transform;
            /* Hardware accelerate animation */
        }

        @keyframes aurasweep {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        @keyframes proofImageReveal {
            0% {
                opacity: 0;
                transform: scale(1.12) translate3d(18px, 0, 0);
                filter: saturate(0.9) blur(8px);
            }

            100% {
                opacity: 1;
                transform: scale(1) translate3d(0, 0, 0);
                filter: saturate(1) blur(0);
            }
        }

        @keyframes proofSheen {
            0% {
                opacity: 0;
                transform: translateX(-140%) skewX(-18deg);
            }

            18% {
                opacity: 0.42;
            }

            100% {
                opacity: 0;
                transform: translateX(200%) skewX(-18deg);
            }
        }

        @keyframes bbaCorePulse {

            0%,
            100% {
                box-shadow: 0 32px 78px rgba(8, 17, 32, 0.42), 0 0 0 1px rgba(212, 175, 55, 0.10), 0 0 34px rgba(212, 175, 55, 0.10);
                transform: translate(-50%, -50%) scale(1);
            }

            50% {
                box-shadow: 0 42px 104px rgba(8, 17, 32, 0.52), 0 0 56px rgba(212, 175, 55, 0.28), 0 0 0 1px rgba(212, 175, 55, 0.22);
                transform: translate(-50%, -50%) scale(1.022);
            }
        }

        @keyframes bbaCoreGoldSweep {
            0% {
                opacity: 0;
                transform: translateX(-155%) skewX(-20deg);
            }

            10% {
                opacity: 0.12;
            }

            28% {
                opacity: 0.46;
            }

            52% {
                opacity: 0.14;
            }

            100% {
                opacity: 0;
                transform: translateX(235%) skewX(-20deg);
            }
        }

        @keyframes bbaCoreAura {

            0%,
            100% {
                opacity: 0.56;
                transform: scale(1);
            }

            50% {
                opacity: 0.9;
                transform: scale(1.08);
            }
        }

        /* Center dot */
        .bba-sec2-closing-block::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 1px;
            height: 1px;
            box-shadow: 0 0 92px 46px rgba(0, 102, 204, 0.38), 0 0 48px 16px rgba(212, 175, 55, 0.18);
            border-radius: 50%;
            z-index: 0;
        }

        .bba-sec2-closing-block::after {
            content: '';
            position: absolute;
            left: 50%;
            bottom: -1px;
            width: min(1140px, calc(100% - 48px));
            height: 210px;
            transform: translateX(-50%);
            border-radius: 0 0 42px 42px;
            background:
                radial-gradient(ellipse at center top,
                    rgba(212, 175, 55, 0.16) 0%,
                    rgba(0, 58, 112, 0.10) 30%,
                    transparent 65%),
                linear-gradient(180deg,
                    rgba(255, 255, 255, 0.05) 0%,
                    rgba(246, 242, 234, 0.85) 80%,
                    rgba(246, 242, 234, 1) 100%);
            pointer-events: none;
            z-index: 0;
        }

        .bba-closing-content {
            position: relative;
            z-index: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .bba-emphasis-panel {
            font-weight: 300;
            color: rgba(255, 255, 255, 0.95);
            font-size: clamp(28px, 3.2vw, 42px);
            margin-bottom: 18px;
            display: block;
            letter-spacing: -0.02em;
            text-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
        }

        .bba-sec2-closing-block p {
            font-size: clamp(20px, 2vw, 28px);
            font-weight: 500;
            line-height: 1.45;
            max-width: 820px;
            margin: 0;
            text-align: center;
            letter-spacing: -0.01em;

            /* BBA Gold Base */
            color: #D4AF37;

            /* Dynamic Gold Shimmer Effect */
            background: linear-gradient(110deg,
                    #A28224 0%,
                    #D4AF37 35%,
                    #FFF8D6 50%,
                    #D4AF37 65%,
                    #A28224 100%);
            background-size: 250% auto;
            color: transparent;
            -webkit-background-clip: text;
            background-clip: text;

            /* Structural contrast & BBA Gold Aura */
            filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 24px rgba(212, 175, 55, 0.4));

            /* The 'Raio-X' Button Style Shine translated to Text */
            animation: bbaTextGoldShine 6s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
        }

        @keyframes bbaTextGoldShine {
            0% {
                background-position: 250% center;
            }

            100% {
                background-position: -50% center;
            }
        }

        /* Button logic now matches the hero button exactly */

        /* Cinematic Scroll Reveal Animations */
        .scroll-reveal {
            opacity: 0;
            transform: translateY(30px);
            /* filter: blur() removed here because animating blur during scroll is the #1 cause of fps drops */
            transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .scroll-reveal.in-view {
            opacity: 1;
            transform: translateY(0);
        }

        @media (max-width: 992px) {
            .bba-creative-grid {
                grid-template-columns: 1fr 1fr;
            }
        }

        @media (max-width: 768px) {
            .bba-section-02 {
                padding: 60px 24px 100px 24px;
            }

            .bba-sec2-intro {
                grid-template-columns: 1fr;
                gap: 24px;
            }

            .bba-sec2-panel-metrics {
                grid-template-columns: 1fr;
            }

            .bba-sec2-closing-block {
                padding: 58px 24px 72px 24px;
                margin-bottom: -44px;
                border-radius: 24px 24px 30px 30px;
            }

            .bba-sec2-headline {
                font-size: 40px;
            }
        }

        /* =========================================
       SECTION 03: BBA INTEGRATED ECOSYSTEM
       ========================================= */

        .bba-eco-root {
            position: relative;
            background-color: #030811;
            /* Deep navy fallback */
            color: #ffffff;
            margin-top: -100px;
            padding: 48px 24px 18px 24px;
            overflow: hidden;
            z-index: 10;
        }

        .bba-eco-root::before {
            content: '';
            position: absolute;
            inset: 30px;
            border: 1px solid rgba(18, 24, 36, 0.05);
            border-top-color: rgba(18, 24, 36, 0);
            pointer-events: none;
            z-index: 0;
        }

        .bba-eco-root::after {
            content: '';
            position: absolute;
            inset: 0;
            background-image:
                linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
            background-size: 84px 84px;
            mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 0.6), transparent 88%);
            pointer-events: none;
            z-index: 1;
            /* Above video */
        }

        /* ==============================================================
           CINEMATIC FULL-WIDTH VIDEO BACKGROUND
           ============================================================== */
        .bba-eco-video-bg {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
            pointer-events: none;
            overflow: hidden;
        }

        .bba-eco-video-container {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            opacity: 0.8;
            filter: contrast(1.15) brightness(0.8) saturate(1.8) hue-rotate(10deg);
        }

        .bba-eco-video-container video {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .bba-eco-video-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(to right,
                    rgba(10, 15, 25, 0.95),
                    rgba(10, 15, 25, 0.85),
                    rgba(10, 15, 25, 0.70));
            z-index: 1;
        }

        .bba-eco-shell {
            position: relative;
            max-width: 1320px;
            margin: 0 auto;
            padding-top: 0px;
            z-index: 1;
            display: grid;
            grid-template-columns: minmax(0, 1.24fr) minmax(0, 0.76fr);
            gap: 34px;
            align-items: start;
        }

        .bba-eco-visual {
            position: sticky;
            top: 0;
            margin-top: 0px;
            min-height: 1140px;
            border-radius: 34px;
            padding: 34px 34px 30px 34px;
            background:
                radial-gradient(circle at 22% 16%, rgba(212, 175, 55, 0.24), transparent 22%),
                radial-gradient(circle at 82% 22%, rgba(0, 58, 112, 0.18), transparent 24%),
                radial-gradient(circle at 74% 78%, rgba(0, 58, 112, 0.15), transparent 26%),
                linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(248, 246, 241, 0.96) 100%);
            border: 1px solid rgba(12, 22, 36, 0.08);
            box-shadow: 0 36px 90px rgba(15, 24, 35, 0.10);
            overflow: visible;
        }

        .bba-eco-visual::before {
            content: '';
            position: absolute;
            inset: 16px;
            border-radius: 24px;
            border: 1px solid rgba(12, 22, 36, 0.05);
            pointer-events: none;
        }

        .bba-eco-visual::after {
            content: none;
        }

        .bba-eco-visual-kicker {
            position: relative;
            z-index: 2;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            margin-bottom: 18px;
        }

        .bba-eco-visual-label,
        .bba-eco-badge span,
        .bba-eco-stat-label,
        .bba-eco-proof-label,
        .bba-eco-card-index,
        .bba-eco-list-label {
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.14em;
            text-transform: uppercase;
        }

        .bba-eco-visual-label {
            color: #70737b;
        }

        .bba-eco-visual-chip {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 10px 14px;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.74);
            border: 1px solid rgba(12, 22, 36, 0.08);
            color: #49505b;
            box-shadow: 0 10px 20px rgba(15, 24, 35, 0.05);
        }

        .bba-eco-visual-chip::before {
            content: '';
            width: 8px;
            height: 8px;
            border-radius: 999px;
            background: linear-gradient(135deg, var(--bba-gold), var(--bba-blue));
            box-shadow: 0 0 14px rgba(0, 58, 112, 0.25);
        }

        .bba-eco-orbit-frame {
            position: relative;
            height: 900px;
            margin: 12px 0 32px 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .bba-eco-orbit-frame::before,
        .bba-eco-orbit-frame::after {
            content: '';
            position: absolute;
            border-radius: 999px;
            border: 1px dashed rgba(0, 58, 112, 0.14);
            pointer-events: none;
        }

        .bba-eco-orbit-frame::before {
            width: 620px;
            height: 620px;
        }

        .bba-eco-orbit-frame::after {
            width: 470px;
            height: 470px;
            border-color: rgba(212, 175, 55, 0.18);
        }

        .bba-orbit-center {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            transform: translate(-50%, -50%);
            z-index: 0;
            pointer-events: none;
        }

        .bba-eco-core {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 248px;
            min-height: 320px;
            transform: translate(-50%, -50%);
            border-radius: 34px;
            padding: 24px 22px;
            background:
                radial-gradient(circle at top left, rgba(212, 175, 55, 0.28), transparent 46%),
                radial-gradient(circle at 82% 18%, rgba(212, 175, 55, 0.14), transparent 28%),
                linear-gradient(180deg, #0b1730 0%, #10203f 58%, #0d1830 100%);
            color: #ffffff;
            box-shadow: 0 32px 78px rgba(8, 17, 32, 0.42);
            border: 1px solid rgba(212, 175, 55, 0.18);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            pointer-events: auto;
            overflow: hidden;
            isolation: isolate;
            animation: bbaCorePulse 5.2s ease-in-out infinite;
        }

        .bba-eco-core::before {
            content: '';
            position: absolute;
            inset: 11px;
            border-radius: 26px;
            border: 1px solid rgba(255, 255, 255, 0.12);
            pointer-events: none;
        }

        .bba-eco-core::after {
            content: '';
            position: absolute;
            inset: -14% auto -14% -38%;
            width: 52%;
            background: linear-gradient(90deg, transparent 0%, rgba(212, 175, 55, 0.46) 43%, rgba(255, 255, 255, 0.36) 50%, rgba(212, 175, 55, 0.24) 58%, transparent 100%);
            mix-blend-mode: screen;
            opacity: 0;
            pointer-events: none;
            z-index: 0;
            animation: bbaCoreGoldSweep 5.4s cubic-bezier(0.22, 0.72, 0.2, 1) infinite;
            animation-delay: 0.4s;
        }

        .bba-eco-core-top::before {
            content: '';
            position: absolute;
            inset: -44px -34px auto -24px;
            height: 138px;
            background: radial-gradient(circle at 28% 42%, rgba(212, 175, 55, 0.36), transparent 58%);
            filter: blur(22px);
            opacity: 0.62;
            z-index: 0;
            pointer-events: none;
            animation: bbaCoreAura 4.8s ease-in-out infinite;
        }

        .bba-eco-core-top {
            position: relative;
            z-index: 1;
            display: block;
        }

        .bba-eco-core-mark {
            display: block;
            font-size: 11px;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.82);
        }

        .bba-eco-core-title {
            position: relative;
            z-index: 1;
            margin: 16px 0 14px 0;
            font-size: 34px;
            line-height: 1.02;
            letter-spacing: -0.04em;
            max-width: none;
            text-wrap: balance;
        }

        .bba-eco-core-copy {
            position: relative;
            z-index: 1;
            margin: 0;
            font-size: 14px;
            line-height: 1.62;
            color: rgba(255, 255, 255, 0.82);
            max-width: none;
        }

        .bba-eco-core-footer {
            position: relative;
            z-index: 1;
            margin-top: 20px;
            padding-top: 8px;
            border-top: 1px solid rgba(255, 255, 255, 0.10);
            font-size: 12px;
            line-height: 1.65;
            color: rgba(255, 255, 255, 0.72);
        }

        @media (prefers-reduced-motion: reduce) {

            .bba-eco-core,
            .bba-eco-core::after,
            .bba-eco-core-top::before {
                animation: none;
            }
        }

        .bba-orbit-ring {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            will-change: transform;
            transform-origin: 50% 50%;
            z-index: 2;
        }

        .bba-eco-connectors {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            pointer-events: none;
            overflow: visible;
        }

        .bba-eco-connectors path {
            fill: none;
            stroke: rgba(0, 58, 112, 0.18);
            stroke-width: 1.2;
            stroke-dasharray: 6 8;
            stroke-linecap: round;
            marker-end: url(#bba-eco-arrow);
        }

        .bba-orbit-positioner {
            position: absolute;
            left: 0;
            top: 0;
            transform: translate(-50%, -50%);
        }

        .bba-orbit-item {
            width: 112px;
            min-height: 186px;
            padding: 7px;
            border-radius: 26px;
            background: rgba(255, 255, 255, 0.92);
            border: 1px solid var(--eco-card-border, rgba(13, 23, 37, 0.08));
            box-shadow: 0 18px 36px rgba(15, 24, 35, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.55) inset;
            display: flex;
            align-items: stretch;
            justify-content: stretch;
            pointer-events: auto;
            transition: box-shadow 0.35s ease, border-color 0.35s ease, background-color 0.35s ease;
            overflow: hidden;
        }

        .bba-orbit-item:hover {
            border-color: var(--eco-card-border-hover, rgba(0, 58, 112, 0.18));
            box-shadow: 0 24px 44px rgba(15, 24, 35, 0.13), 0 0 0 1px rgba(255, 255, 255, 0.65) inset;
        }

        .bba-orbit-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 5px;
            background: var(--eco-card-accent, linear-gradient(90deg, rgba(0, 58, 112, 0.7), rgba(212, 175, 55, 0.7)));
            opacity: 0.95;
        }

        .bba-orbit-item::after {
            content: '';
            position: absolute;
            top: 14px;
            right: 14px;
            width: 28px;
            height: 28px;
            border-radius: 12px;
            background: var(--eco-card-bubble, rgba(255, 255, 255, 0.65));
            border: 1px solid rgba(255, 255, 255, 0.55);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
            opacity: 0.92;
        }

        .bba-squicle-inner {
            width: 100%;
            border-radius: 24px;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: flex-start;
            gap: 8px;
            padding: 12px 10px 10px 10px;
            background: var(--eco-card-bg, linear-gradient(180deg, #ffffff 0%, #f6f4ef 100%));
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
            transition: transform 0.35s ease, box-shadow 0.35s ease;
            min-height: 172px;
        }

        .bba-orbit-item:hover .bba-squicle-inner {
            transform: translateY(-2px);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 12px 22px rgba(255, 255, 255, 0.16);
        }

        .bba-squicle-head {
            display: flex;
            align-items: flex-start;
            justify-content: flex-start;
            width: 100%;
            padding-right: 28px;
        }

        .bba-squicle-kicker {
            font-size: 9.5px;
            font-weight: 700;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: var(--eco-card-kicker, #7a7e86);
        }

        .bba-squicle-label {
            font-size: 18px;
            font-weight: 700;
            letter-spacing: -0.03em;
            color: #151b24;
            line-height: 1.05;
            max-width: 8.5ch;
        }

        .bba-squicle-copy {
            font-size: 12.5px;
            line-height: 1.54;
            color: #545a63;
            max-width: 9ch;
        }

        .bba-squicle-figure {
            width: 100%;
            height: 38px;
            border-radius: 12px;
            border: 1px solid var(--eco-card-figure-border, rgba(13, 23, 37, 0.08));
            background: var(--eco-card-figure-bg, rgba(255, 255, 255, 0.58));
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            margin-top: 2px;
        }

        .bba-squicle-figure svg {
            width: calc(100% - 12px);
            height: 28px;
        }

        .bba-orbit-item.tone-core {
            --eco-card-border: rgba(0, 58, 112, 0.24);
            --eco-card-border-hover: rgba(0, 58, 112, 0.36);
            --eco-card-bg: linear-gradient(180deg, #ffffff 0%, #dcebff 100%);
            --eco-card-accent: linear-gradient(90deg, #003A70 0%, #77B2F2 100%);
            --eco-card-kicker: #3d628b;
            --eco-card-bubble: linear-gradient(180deg, rgba(93, 155, 222, 0.42) 0%, rgba(255, 255, 255, 0.78) 100%);
            --eco-card-figure-bg: linear-gradient(180deg, rgba(0, 58, 112, 0.18) 0%, rgba(212, 175, 55, 0.18) 100%);
            --eco-card-figure-border: rgba(0, 58, 112, 0.18);
        }

        .bba-orbit-item.tone-finance {
            --eco-card-border: rgba(212, 175, 55, 0.28);
            --eco-card-border-hover: rgba(212, 175, 55, 0.40);
            --eco-card-bg: linear-gradient(180deg, #fffef8 0%, #f8efd0 100%);
            --eco-card-accent: linear-gradient(90deg, #C79D28 0%, #F0D27B 100%);
            --eco-card-kicker: #a88728;
            --eco-card-bubble: linear-gradient(180deg, rgba(240, 210, 123, 0.52) 0%, rgba(255, 255, 255, 0.82) 100%);
            --eco-card-figure-bg: linear-gradient(180deg, rgba(212, 175, 55, 0.18) 0%, rgba(240, 210, 123, 0.18) 100%);
            --eco-card-figure-border: rgba(212, 175, 55, 0.20);
        }

        .bba-orbit-item.tone-integrity {
            --eco-card-border: rgba(71, 78, 98, 0.24);
            --eco-card-border-hover: rgba(71, 78, 98, 0.34);
            --eco-card-bg: linear-gradient(180deg, #ffffff 0%, #eaedf7 100%);
            --eco-card-accent: linear-gradient(90deg, #4A5468 0%, #C6CFDD 100%);
            --eco-card-kicker: #596172;
            --eco-card-bubble: linear-gradient(180deg, rgba(157, 168, 188, 0.42) 0%, rgba(255, 255, 255, 0.78) 100%);
            --eco-card-figure-bg: linear-gradient(180deg, rgba(93, 103, 124, 0.17) 0%, rgba(212, 175, 55, 0.15) 100%);
            --eco-card-figure-border: rgba(93, 103, 124, 0.17);
        }

        .bba-orbit-item.tone-value {
            --eco-card-border: rgba(21, 135, 103, 0.24);
            --eco-card-border-hover: rgba(21, 135, 103, 0.36);
            --eco-card-bg: linear-gradient(180deg, #ffffff 0%, #dcf8ea 100%);
            --eco-card-accent: linear-gradient(90deg, #0E7F63 0%, #7CDEAA 100%);
            --eco-card-kicker: #208467;
            --eco-card-bubble: linear-gradient(180deg, rgba(124, 222, 170, 0.46) 0%, rgba(255, 255, 255, 0.78) 100%);
            --eco-card-figure-bg: linear-gradient(180deg, rgba(24, 140, 108, 0.18) 0%, rgba(212, 175, 55, 0.16) 100%);
            --eco-card-figure-border: rgba(24, 140, 108, 0.18);
        }

        .bba-orbit-item.tone-tech {
            --eco-card-border: rgba(71, 92, 198, 0.24);
            --eco-card-border-hover: rgba(71, 92, 198, 0.36);
            --eco-card-bg: linear-gradient(180deg, #ffffff 0%, #e3e9ff 100%);
            --eco-card-accent: linear-gradient(90deg, #4154B8 0%, #82C9FF 100%);
            --eco-card-kicker: #4b5db7;
            --eco-card-bubble: linear-gradient(180deg, rgba(130, 201, 255, 0.46) 0%, rgba(255, 255, 255, 0.80) 100%);
            --eco-card-figure-bg: linear-gradient(180deg, rgba(71, 92, 198, 0.18) 0%, rgba(115, 191, 255, 0.18) 100%);
            --eco-card-figure-border: rgba(71, 92, 198, 0.18);
        }

        .bba-orbit-item.tone-people {
            --eco-card-border: rgba(180, 102, 80, 0.24);
            --eco-card-border-hover: rgba(180, 102, 80, 0.36);
            --eco-card-bg: linear-gradient(180deg, #fffdfa 0%, #f9e4da 100%);
            --eco-card-accent: linear-gradient(90deg, #A35A44 0%, #EDC0AA 100%);
            --eco-card-kicker: #a1624d;
            --eco-card-bubble: linear-gradient(180deg, rgba(237, 192, 170, 0.48) 0%, rgba(255, 255, 255, 0.80) 100%);
            --eco-card-figure-bg: linear-gradient(180deg, rgba(180, 102, 80, 0.18) 0%, rgba(228, 183, 162, 0.18) 100%);
            --eco-card-figure-border: rgba(180, 102, 80, 0.18);
        }

        .bba-orbit-item.tone-esg {
            --eco-card-border: rgba(69, 137, 78, 0.24);
            --eco-card-border-hover: rgba(69, 137, 78, 0.36);
            --eco-card-bg: linear-gradient(180deg, #fbfff8 0%, #def5d5 100%);
            --eco-card-accent: linear-gradient(90deg, #3F8751 0%, #97E09D 100%);
            --eco-card-kicker: #4b8f5a;
            --eco-card-bubble: linear-gradient(180deg, rgba(151, 224, 157, 0.50) 0%, rgba(255, 255, 255, 0.80) 100%);
            --eco-card-figure-bg: linear-gradient(180deg, rgba(69, 137, 78, 0.18) 0%, rgba(131, 194, 131, 0.18) 100%);
            --eco-card-figure-border: rgba(69, 137, 78, 0.18);
        }

        .bba-orbit-item.tone-institute {
            --eco-card-border: rgba(170, 92, 120, 0.24);
            --eco-card-border-hover: rgba(170, 92, 120, 0.36);
            --eco-card-bg: linear-gradient(180deg, #fffafb 0%, #f8e4ea 100%);
            --eco-card-accent: linear-gradient(90deg, #B35B79 0%, #E5A1B7 100%);
            --eco-card-kicker: #a05f75;
            --eco-card-bubble: linear-gradient(180deg, rgba(229, 161, 183, 0.48) 0%, rgba(255, 255, 255, 0.80) 100%);
            --eco-card-figure-bg: linear-gradient(180deg, rgba(179, 91, 121, 0.18) 0%, rgba(229, 161, 183, 0.18) 100%);
            --eco-card-figure-border: rgba(179, 91, 121, 0.20);
        }

        .bba-eco-visual-footer {
            position: relative;
            z-index: 2;
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 12px;
        }

        .bba-eco-stat {
            padding: 16px 14px;
            border-radius: 18px;
            background: rgba(255, 255, 255, 0.72);
            border: 1px solid rgba(15, 23, 35, 0.07);
            box-shadow: 0 10px 24px rgba(15, 24, 35, 0.05);
        }

        .bba-eco-stat-value {
            display: block;
            font-size: 24px;
            line-height: 1;
            letter-spacing: -0.05em;
            color: var(--bba-blue);
            margin-bottom: 8px;
        }

        .bba-eco-stat-label {
            color: #70737b;
            margin-bottom: 8px;
            display: block;
        }

        .bba-eco-stat-copy {
            font-size: 13px;
            line-height: 1.55;
            color: #555b65;
        }

        .bba-eco-content {
            position: relative;
            display: flex;
            flex-direction: column;
            gap: 18px;
            padding-top: 0px;
            margin-top: 0;
        }

        .bba-eco-badge {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 10px 18px;
            border-radius: 999px;
            border: 1px solid rgba(212, 175, 55, 0.34);
            background: rgba(255, 255, 255, 0.72);
            box-shadow: 0 10px 24px rgba(95, 76, 26, 0.06);
            width: fit-content;
        }

        .bba-eco-badge svg {
            width: 14px;
            height: 14px;
            stroke: var(--bba-gold);
            stroke-width: 2.5;
        }

        .bba-eco-main-title {
            color: #ffffff;
            font-size: clamp(2.3rem, 3.8vw, 4rem);
            font-weight: 400;
            line-height: 0.98;
            letter-spacing: -0.055em;
            margin: 0;
            max-width: 11ch;
        }

        .bba-eco-main-title strong {
            font-weight: 700;
            background: linear-gradient(90deg, #ffffff, #dcebff);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            color: transparent;
        }

        .bba-eco-main-desc {
            font-size: 15px;
            line-height: 1.56;
            color: rgba(255, 255, 255, 0.75);
            margin: 0;
            max-width: 44ch;
        }

        .bba-eco-proof {
            display: grid;
            grid-template-columns: 142px 1fr;
            gap: 16px;
            align-items: stretch;
            padding: 18px;
            border-radius: 28px;
            background: rgba(255, 255, 255, 0.72);
            border: 1px solid rgba(15, 23, 35, 0.07);
            box-shadow: 0 18px 40px rgba(15, 24, 35, 0.05);
        }

        .bba-eco-proof-side {
            display: grid;
            align-content: space-between;
            gap: 16px;
            padding-right: 18px;
            border-right: 1px solid rgba(15, 23, 35, 0.08);
        }

        .bba-eco-proof-number {
            font-size: 42px;
            line-height: 0.92;
            letter-spacing: -0.06em;
            color: var(--bba-blue);
        }

        .bba-eco-proof-label {
            color: #73777f;
        }

        .bba-eco-proof-copy {
            font-size: 13px;
            line-height: 1.55;
            color: #555b65;
        }

        .bba-eco-proof-visual {
            position: relative;
            min-height: 240px;
            border-radius: 22px;
            overflow: hidden;
            background: linear-gradient(135deg, rgba(0, 58, 112, 0.08) 0%, rgba(0, 58, 112, 0.02) 100%);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
            isolation: isolate;
        }

        .bba-eco-proof-visual::before {
            content: '';
            position: absolute;
            inset: 0;
            background:
                linear-gradient(135deg, rgba(7, 16, 31, 0.12) 0%, rgba(7, 16, 31, 0.34) 100%),
                radial-gradient(circle at top right, rgba(212, 175, 55, 0.24), transparent 44%);
            z-index: 2;
            pointer-events: none;
        }

        .bba-eco-proof-visual::after {
            content: '';
            position: absolute;
            inset: -12% auto -12% -32%;
            width: 42%;
            background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.42) 48%, transparent 100%);
            mix-blend-mode: screen;
            opacity: 0;
            z-index: 3;
            pointer-events: none;
        }

        .bba-eco-proof-visual-image {
            position: absolute;
            inset: -2%;
            background: url('https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?auto=format&fit=crop&w=1400&q=80') 62% center / cover no-repeat;
            transform: scale(1.12) translate3d(18px, 0, 0);
            transform-origin: 62% 50%;
            opacity: 0;
            filter: saturate(0.9) blur(8px);
            will-change: transform, opacity, filter;
        }

        .slide-up-fade.in-view .bba-eco-proof-visual-image {
            animation: proofImageReveal 1.25s cubic-bezier(0.16, 0.84, 0.2, 1) 0.12s forwards;
        }

        .slide-up-fade.in-view .bba-eco-proof-visual::after {
            animation: proofSheen 1.7s cubic-bezier(0.2, 0.75, 0.2, 1) 0.55s 1;
        }

        @media (prefers-reduced-motion: reduce) {
            .bba-eco-proof-visual-image {
                opacity: 1;
                transform: none;
                filter: none;
            }

            .slide-up-fade.in-view .bba-eco-proof-visual-image,
            .slide-up-fade.in-view .bba-eco-proof-visual::after {
                animation: none;
            }
        }

        .bba-eco-proof-list {
            display: grid;
            gap: 14px;
        }

        .bba-eco-proof-item {
            display: grid;
            grid-template-columns: 34px 1fr;
            gap: 14px;
            align-items: start;
        }

        .bba-eco-proof-icon {
            width: 34px;
            height: 34px;
            border-radius: 12px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: rgba(0, 58, 112, 0.06);
            color: var(--bba-blue);
            border: 1px solid rgba(0, 58, 112, 0.08);
        }

        .bba-eco-proof-icon svg {
            width: 18px;
            height: 18px;
            stroke-width: 1.9;
        }

        .bba-eco-proof-text strong {
            display: block;
            font-size: 13px;
            line-height: 1.3;
            color: #151b24;
            margin-bottom: 4px;
        }

        .bba-eco-proof-text span {
            font-size: 12px;
            line-height: 1.5;
            color: #5f646d;
        }

        .bba-eco-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 16px;
        }

        .bba-eco-grid-3 {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 16px;
        }

        .bba-eco-card {
            position: relative;
            border-radius: 26px;
            background: rgba(255, 255, 255, 0.78);
            border: 1px solid rgba(15, 23, 35, 0.08);
            padding: 20px 18px 18px 18px;
            display: grid;
            gap: 16px;
            overflow: hidden;
            box-shadow: 0 16px 36px rgba(15, 24, 35, 0.05);
            transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
        }

        .bba-eco-card:hover {
            transform: translateY(-4px);
            border-color: rgba(0, 58, 112, 0.16);
            box-shadow: 0 22px 50px rgba(0, 58, 112, 0.08);
        }

        .bba-eco-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 78px;
            height: 3px;
            background: linear-gradient(90deg, var(--bba-gold), rgba(0, 58, 112, 0.8));
        }

        .bba-eco-card-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 14px;
        }

        .bba-eco-card-index {
            color: #70737b;
        }

        .bba-eco-card-icon {
            width: 48px;
            height: 48px;
            border-radius: 16px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(180deg, #fbfaf7 0%, #eef3f8 100%);
            border: 1px solid rgba(15, 23, 35, 0.06);
            color: var(--bba-blue);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
        }

        .bba-eco-card-icon svg {
            width: 24px;
            height: 24px;
            stroke-width: 1.8;
        }

        .bba-eco-card-title {
            margin: 0;
            font-size: 18px;
            line-height: 1.04;
            letter-spacing: -0.04em;
            color: #121924;
        }

        .bba-eco-card-desc {
            margin: 0;
            font-size: 13px;
            line-height: 1.56;
            color: #575c65;
        }

        .bba-eco-card-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        .bba-eco-card-tag {
            font-size: 11px;
            padding: 8px 12px;
            background: rgba(0, 58, 112, 0.045);
            border: 1px solid rgba(0, 58, 112, 0.08);
            color: #4e5865;
            font-weight: 700;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            border-radius: 999px;
        }

        .bba-eco-list-panel {
            display: grid;
            gap: 16px;
            padding: 20px 22px;
            border-radius: 28px;
            background: linear-gradient(180deg, rgba(11, 23, 48, 0.96) 0%, rgba(14, 28, 54, 0.98) 100%);
            color: #ffffff;
            border: 1px solid rgba(255, 255, 255, 0.08);
            box-shadow: 0 28px 70px rgba(9, 18, 34, 0.24);
        }

        .bba-eco-list-label {
            color: rgba(255, 255, 255, 0.64);
        }

        .bba-eco-list-title {
            margin: 0;
            font-size: 22px;
            line-height: 1.06;
            letter-spacing: -0.04em;
            max-width: 15ch;
        }

        .bba-eco-list-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 12px 18px;
            padding-top: 6px;
        }

        .bba-eco-list-item {
            display: flex;
            gap: 10px;
            align-items: flex-start;
            font-size: 12px;
            line-height: 1.5;
            color: rgba(255, 255, 255, 0.78);
        }

        .bba-eco-list-item::before {
            content: '';
            width: 9px;
            height: 9px;
            border-radius: 999px;
            background: linear-gradient(135deg, var(--bba-gold), #ffe08a);
            box-shadow: 0 0 16px rgba(212, 175, 55, 0.35);
            margin-top: 7px;
            flex: 0 0 auto;
        }

        .bba-eco-hero-cta {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 56px;
            padding: 0 30px;
            border-radius: 999px;
            background: var(--color-primary-text);
            color: #fff;
            font-size: 15px;
            font-weight: 600;
            text-decoration: none;
            transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
            box-shadow: 0 18px 36px rgba(15, 24, 35, 0.14);
            width: fit-content;
        }

        .bba-eco-hero-cta:hover {
            background-color: var(--bba-blue);
            transform: translateY(-2px);
            box-shadow: 0 22px 42px rgba(0, 58, 112, 0.18);
        }

        @media (max-width: 1180px) {
            .bba-eco-shell {
                grid-template-columns: 1fr;
            }

            .bba-eco-visual {
                position: relative;
                top: auto;
                margin-top: -72px;
                min-height: 1040px;
            }

            .bba-eco-main-title {
                max-width: 12ch;
            }
        }

        @media (max-width: 820px) {
            .bba-eco-root {
                margin-top: -78px;
                padding: 64px 18px 110px 18px;
            }

            .bba-eco-root::before {
                inset: 18px;
            }

            .bba-eco-shell {
                margin-top: -48px;
            }

            .bba-eco-visual {
                margin-top: -56px;
                min-height: 920px;
                padding: 24px;
            }

            .bba-eco-orbit-frame {
                height: 760px;
            }

            .bba-eco-orbit-frame::before {
                width: 560px;
                height: 560px;
            }

            .bba-eco-orbit-frame::after {
                width: 420px;
                height: 420px;
            }

            .bba-eco-core {
                width: 206px;
                min-height: 286px;
            }

            .bba-eco-core-title {
                font-size: 32px;
            }

            .bba-orbit-item {
                width: 96px;
                min-height: 164px;
            }

            .bba-squicle-label {
                font-size: 14px;
            }

            .bba-squicle-copy {
                font-size: 10px;
            }

            .bba-squicle-figure {
                height: 34px;
            }

            .bba-eco-visual-footer,
            .bba-eco-grid,
            .bba-eco-grid-3,
            .bba-eco-list-grid {
                grid-template-columns: 1fr;
            }

            .bba-eco-proof {
                grid-template-columns: 1fr;
            }

            .bba-eco-proof-side {
                border-right: 0;
                border-bottom: 1px solid rgba(15, 23, 35, 0.08);
                padding-right: 0;
                padding-bottom: 18px;
            }

            .bba-eco-proof-visual {
                min-height: 220px;
            }
        }

        @media (max-width: 640px) {
            .bba-eco-main-title {
                font-size: 42px;
            }

            .bba-eco-main-desc {
                font-size: 18px;
            }

            .bba-eco-visual {
                min-height: auto;
            }

            .bba-eco-orbit-frame {
                height: 360px;
                margin-bottom: 20px;
            }

            .bba-eco-orbit-frame::before,
            .bba-eco-orbit-frame::after,
            .bba-orbit-ring {
                display: none;
            }

            .bba-orbit-center {
                position: relative;
                top: auto;
                left: auto;
                width: auto;
                height: auto;
                transform: none;
            }

            .bba-eco-core {
                position: relative;
                top: auto;
                left: auto;
                transform: none;
                width: 100%;
                min-height: auto;
            }

            .bba-eco-proof,
            .bba-eco-card,
            .bba-eco-list-panel {
                padding-left: 20px;
                padding-right: 20px;
            }

            .bba-eco-card-title {
                font-size: 22px;
            }
        }


        /* ==============================================================
   STRATEGIC RESULT BLOCK (RIGHT COLUMN)
   ============================================================== */
        .bba-eco-result-block {
            position: relative;
            min-height: 560px;
            border-radius: 26px;
            background:
                radial-gradient(circle at 80% 20%, rgba(0, 58, 112, 0.08), transparent 40%),
                radial-gradient(circle at 20% 90%, rgba(212, 175, 55, 0.12), transparent 45%),
                linear-gradient(135deg, #ffffff 0%, #f4f2ee 100%);
            border: 1px solid rgba(0, 58, 112, 0.06);
            box-shadow: 0 16px 48px rgba(15, 24, 35, 0.04), inset 0 1px 0 rgba(255, 255, 255, 1);
            margin-top: 24px;
            padding: 48px 36px;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            overflow: hidden;
            isolation: isolate;
        }

        /* Subtle glowing background mesh */
        .bba-eco-result-block::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle at 70% 30%, rgba(212, 175, 55, 0.06), transparent 50%),
                radial-gradient(circle at 30% 80%, rgba(0, 58, 112, 0.04), transparent 50%);
            z-index: 0;
            pointer-events: none;
        }

        /* The vertical connection line */
        .bba-result-path {
            position: absolute;
            top: 61px;
            height: 380px;
            left: 38px;
            width: 2px;
            background: linear-gradient(180deg, rgba(0, 58, 112, 0.1), rgba(212, 175, 55, 0.5), rgba(0, 58, 112, 0.8));
            z-index: 1;
            border-radius: 2px;
        }

        /* The moving energy droplet along the path */
        .bba-result-droplet {
            position: absolute;
            top: -40px;
            left: -2px;
            width: 6px;
            height: 48px;
            background: linear-gradient(180deg, transparent, var(--bba-blue), transparent);
            border-radius: 4px;
            animation: droplet-flow 4s cubic-bezier(0.25, 1, 0.5, 1) infinite;
            filter: blur(1px);
        }

        @keyframes droplet-flow {
            0% {
                top: -40px;
                opacity: 0;
            }

            10% {
                opacity: 1;
            }

            80% {
                opacity: 1;
            }

            100% {
                top: 100%;
                opacity: 0;
            }
        }

        .bba-result-nodes {
            position: relative;
            z-index: 2;
            display: flex;
            flex-direction: column;
            gap: 28px;
        }

        .bba-result-node {
            display: flex;
            align-items: flex-start;
            gap: 24px;
            position: relative;
            transition: transform 0.3s ease;
        }

        .bba-result-node:hover {
            transform: translateX(4px);
        }

        .bba-result-dot {
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background: #fff;
            border: 3px solid var(--bba-blue);
            box-shadow: 0 0 0 4px rgba(0, 58, 112, 0.05);
            flex-shrink: 0;
            margin-top: 6px;
            transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
            position: relative;
            z-index: 2;
        }

        /* Stronger node dot animation for stations 01, 02, 03 */
        @keyframes dotPulseSync {

            0%,
            100% {
                transform: scale(1);
                box-shadow: 0 0 0 4px rgba(0, 58, 112, 0.05);
                border-color: var(--bba-blue);
                background: #fff;
            }

            50% {
                transform: scale(1.4);
                box-shadow: 0 0 0 8px rgba(0, 58, 112, 0.2), 0 0 16px rgba(0, 58, 112, 0.4);
                border-color: var(--bba-blue);
                background: var(--bba-blue);
            }
        }

        .bba-result-node:nth-child(1) .bba-result-dot {
            animation: dotPulseSync 4s infinite 0.4s;
        }

        .bba-result-node:nth-child(2) .bba-result-dot {
            animation: dotPulseSync 4s infinite 1.2s;
        }

        .bba-result-node:nth-child(3) .bba-result-dot {
            animation: dotPulseSync 4s infinite 2.0s;
        }

        /* Node 04 persistent stronger emphasis climax */
        .bba-result-node:nth-child(4) .bba-result-dot {
            border-color: var(--bba-gold);
            background: #fff;
            box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.15);
            transform: scale(1.1);
            animation: dotClimaxPulse 4s infinite 2.8s;
        }

        @keyframes dotClimaxPulse {

            0%,
            100% {
                transform: scale(1.1);
                box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.15);
                border-color: var(--bba-gold);
                background: #fff;
            }

            50% {
                transform: scale(1.6);
                box-shadow: 0 0 24px rgba(212, 175, 55, 0.6), 0 0 0 8px rgba(212, 175, 55, 0.25);
                border-color: var(--bba-gold);
                background: var(--bba-blue);
            }
        }

        .bba-result-content {
            display: flex;
            flex-direction: column;
            gap: 4px;
            background: rgba(255, 255, 255, 0.64);
            padding: 12px 18px;
            border-radius: 12px;
            border: 1px solid rgba(0, 0, 0, 0.03);
            width: 100%;
            transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
            position: relative;
            z-index: 1;
        }

        @keyframes cardLightUp1 {

            0%,
            100% {
                background: rgba(255, 255, 255, 0.64);
                border-color: rgba(0, 0, 0, 0.03);
                transform: scale(1);
                box-shadow: none;
            }

            50% {
                background: linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(242, 247, 252, 1));
                border-color: rgba(0, 58, 112, 0.2);
                box-shadow: 0 12px 32px rgba(0, 58, 112, 0.08);
                transform: scale(1.025);
            }
        }

        @keyframes cardLightUp2 {

            0%,
            100% {
                background: rgba(255, 255, 255, 0.64);
                border-color: rgba(0, 0, 0, 0.03);
                transform: scale(1);
                box-shadow: none;
            }

            50% {
                background: linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(248, 249, 250, 1));
                border-color: rgba(0, 0, 0, 0.12);
                box-shadow: 0 12px 32px rgba(15, 24, 35, 0.06);
                transform: scale(1.025);
            }
        }

        @keyframes cardLightUp3 {

            0%,
            100% {
                background: rgba(255, 255, 255, 0.64);
                border-color: rgba(0, 0, 0, 0.03);
                transform: scale(1);
                box-shadow: none;
            }

            50% {
                background: linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(253, 251, 244, 1));
                border-color: rgba(212, 175, 55, 0.3);
                box-shadow: 0 12px 32px rgba(212, 175, 55, 0.08);
                transform: scale(1.025);
            }
        }

        .bba-result-node:nth-child(1) .bba-result-content {
            animation: cardLightUp1 4s infinite 0.4s;
        }

        .bba-result-node:nth-child(2) .bba-result-content {
            animation: cardLightUp2 4s infinite 1.2s;
        }

        .bba-result-node:nth-child(3) .bba-result-content {
            animation: cardLightUp3 4s infinite 2.0s;
        }

        /* Node 04 persistent strong emphasis */
        .bba-result-node:nth-child(4) .bba-result-content {
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.75), rgba(250, 247, 238, 0.75));
            border: 1px solid rgba(212, 175, 55, 0.15);
            box-shadow: 0 4px 16px rgba(0, 58, 112, 0.03);
            animation: cardClimaxLightUp 4s infinite 2.8s;
        }

        @keyframes cardClimaxLightUp {

            0%,
            100% {
                background: linear-gradient(135deg, rgba(255, 255, 255, 0.75), rgba(250, 247, 238, 0.75));
                border-color: rgba(212, 175, 55, 0.15);
                box-shadow: 0 4px 16px rgba(0, 58, 112, 0.03);
                transform: scale(1);
            }

            50% {
                background: linear-gradient(135deg, rgba(255, 255, 255, 1), #fffcf4);
                border-color: rgba(212, 175, 55, 0.6);
                box-shadow: 0 18px 56px rgba(212, 175, 55, 0.18), inset 0 0 0 1px rgba(212, 175, 55, 0.1);
                transform: scale(1.035);
            }
        }

        .bba-result-node:hover .bba-result-content {
            background: rgba(255, 255, 255, 0.95) !important;
            border-color: rgba(0, 58, 112, 0.15) !important;
            transform: scale(1.02) !important;
        }

        .bba-result-step {
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.12em;
            color: #737A86;
        }

        .bba-result-node:nth-child(4) .bba-result-step {
            color: var(--bba-gold);
        }

        .bba-result-title {
            font-size: 17px;
            font-weight: 700;
            color: #121924;
            letter-spacing: -0.02em;
            margin: 0;
            line-height: 1.2;
        }

        .bba-result-node:nth-child(4) .bba-result-title {
            color: var(--bba-blue);
        }

        .bba-result-desc {
            font-size: 13px;
            color: #5F6775;
            line-height: 1.45;
            margin: 0;
        }

        @media (max-width: 820px) {
            .bba-eco-result-block {
                min-height: auto;
                padding: 32px 24px;
                margin-bottom: 24px;
            }

            .bba-result-path {
                left: 30px;
                top: 45px;
                height: 396px;
            }
        }

        /* ==============================================================
   LAYOUT CORRECTION: REPOSITION CARDS 05, 06, 07 UNDER VISUAL 
   ============================================================== */
        @media (min-width: 1181px) {
            .bba-eco-visual {
                grid-column: 1;
                grid-row: 1;
                margin-top: 0;
                ;
            }

            .bba-eco-grid-3 {
                grid-column: 1;
                grid-row: 2;
                align-self: start;
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 16px;
                margin-bottom: 72px;
            }

            .bba-eco-content {
                grid-column: 2;
                grid-row: 1 / span 2;
                margin-top: 0;
            }
        }

        /* =========================================
   SECTION 03 — BBA ECOSYSTEM MARQUEE (AURA STYLE)
   ========================================= */
        .bba-eco-root {
            position: relative;
        }

        .bba-eco-marquee-band {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            /* Sit at the bottom of Section 03 */
            z-index: 3;
            padding: 32px 0 28px 0;
            background: rgba(2, 5, 12, 0.5);
            /* Dark transparent background */
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-top: 1px solid rgba(255, 255, 255, 0.04);
            border-bottom: 1px solid rgba(255, 255, 255, 0.04);
            overflow: hidden;
        }

        .bba-eco-marquee-micro {
            text-align: center;
            font-size: 11px;
            font-weight: 500;
            letter-spacing: 0.25em;
            text-transform: uppercase;
            color: rgba(139, 181, 228, 0.7);
            /* BBA blue */
            margin-bottom: 24px;
            position: relative;
            z-index: 5;
            text-shadow: 0 0 16px rgba(139, 181, 228, 0.3);
        }

        .bba-eco-marquee-viewport {
            position: relative;
            display: flex;
            width: 100%;
        }

        .bba-eco-marquee-fade-left,
        .bba-eco-marquee-fade-right {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 250px;
            z-index: 4;
            pointer-events: none;
        }

        .bba-eco-marquee-fade-left {
            left: 0;
            background: linear-gradient(to right, rgba(2, 5, 12, 1) 0%, transparent 100%);
        }

        .bba-eco-marquee-fade-right {
            right: 0;
            background: linear-gradient(to left, rgba(2, 5, 12, 1) 0%, transparent 100%);
        }

        .bba-eco-marquee-track {
            display: flex;
            width: max-content;
            animation: bbaEcoMarqueeLoop 45s linear infinite;
            /* Smooth glide */
            transform: translateZ(0);
            will-change: transform;
        }

        /* Pauses track when user interacts with ANYTHING inside */
        .bba-eco-marquee-viewport:hover .bba-eco-marquee-track {
            animation-play-state: paused;
        }

        .bba-eco-marquee-group {
            display: flex;
            align-items: center;
        }

        .bba-eco-marquee-item {
            display: inline-flex;
            align-items: center;
            gap: 14px;
            font-size: 16px;
            font-weight: 300;
            letter-spacing: 0.03em;
            color: rgba(255, 255, 255, 0.7);
            /* Improved base visibility */
            white-space: nowrap;
            cursor: pointer;
            transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
            position: relative;
            padding: 12px 20px;
            /* give it a breathable hover area */
            border-radius: 8px;
            /* nice soft rounded borders for hover */
        }

        /* Basic Icon Style */
        .bba-eco-marquee-item svg {
            width: 20px;
            height: 20px;
            stroke: rgba(139, 181, 228, 0.8);
            /* Stronger base blue */
            transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
        }

        /* High-end separator styling */
        .bba-eco-marquee-sep {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 72px;
            /* acts as the spacing between items */
            transition: all 0.5s ease;
        }

        /* Dimming others when ONE of the items is hovered. */
        /* Notice opacity is 0.45 now - clearly visible but out of focus */
        .bba-eco-marquee-track:hover .bba-eco-marquee-item {
            opacity: 0.45;
            transform: scale(0.96);
        }

        .bba-eco-marquee-track:hover .bba-eco-marquee-sep {
            opacity: 0.2;
        }

        /* Spotlight ONLY the hovered item */
        .bba-eco-marquee-track .bba-eco-marquee-item:hover {
            opacity: 1;
            color: #ffffff;
            transform: scale(1.08);
            /* pops out */

            /* Highly premium glowing pill background */
            background: radial-gradient(120% 120% at 50% 50%, rgba(212, 175, 55, 0.08) 0%, transparent 100%);
            box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.15), 0 12px 32px rgba(0, 0, 0, 0.6);
        }

        /* The SVG Icon pops with Gold and spins up slightly */
        .bba-eco-marquee-item:hover svg {
            stroke: #D4AF37;
            /* BBA Gold */
            filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.6));
            transform: scale(1.2) translateY(-2px);
        }

        @keyframes bbaEcoMarqueeLoop {
            0% {
                transform: translate3d(0, 0, 0);
            }

            100% {
                transform: translate3d(-50%, 0, 0);
            }
        }

        @media (max-width: 820px) {
            .bba-eco-marquee-band {
                padding: 24px 0;
            }

            .bba-eco-marquee-micro {
                font-size: 9px;
                margin-bottom: 16px;
            }

            .bba-eco-marquee-item {
                font-size: 13px;
                padding: 8px 12px;
            }

            .bba-eco-marquee-sep {
                width: 48px;
            }

            .bba-eco-marquee-fade-left,
            .bba-eco-marquee-fade-right {
                width: 80px;
            }
        }

        /* =========================================
   SECTION 03 — LEFT INTEL CHART PANEL
   ========================================= */
        .bba-intel-panel {
            grid-column: 1 / -1;
            /* Spans full width of the cards grid */
            background: #02050A;
            border: 1px solid rgba(139, 181, 228, 0.15);
            border-radius: 16px;
            padding: 40px;
            margin-top: 24px;
            position: relative;
            overflow: hidden;
            box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
        }

        .bba-intel-panel::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at top right, rgba(139, 181, 228, 0.06), transparent 70%);
            pointer-events: none;
        }

        .bba-intel-kicker {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.15em;
            color: #8BB5E4;
            margin-bottom: 24px;
        }

        .bba-intel-kicker::before {
            content: '';
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #8BB5E4;
            box-shadow: 0 0 8px #8BB5E4;
        }

        .bba-intel-title {
            font-size: 28px;
            font-weight: 300;
            color: #FFF;
            line-height: 1.2;
            letter-spacing: -0.02em;
            margin-bottom: 40px;
        }

        .bba-intel-title strong {
            font-weight: 600;
        }

        /* The Chart Area */
        .bba-intel-chart {
            display: flex;
            align-items: flex-end;
            justify-content: center;
            gap: 8px;
            /* Tighter spacing for a unified flow */
            height: 130px;
            margin-bottom: 24px;
            padding-bottom: 0px;
            border-bottom: 1px solid rgba(139, 181, 228, 0.1);
            position: relative;
            padding-top: 16px;
        }

        .bba-intel-bar-group {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            align-items: center;
            height: 100%;
            position: relative;
            cursor: default;
        }

        .bba-intel-bar-wrapper {
            flex-grow: 1;
            width: 100%;
            display: flex;
            align-items: flex-end;
            justify-content: center;
        }

        .bba-intel-bar {
            width: 100%;
            max-width: 52px;
            border-radius: 6px 6px 0 0;
            transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
            transform-origin: bottom;
            opacity: 0.9;
            will-change: height;
        }

        /* Gradient and shadow aesthetics matching the reference */
        .bba-intel-bar.bar-1 {
            background: linear-gradient(180deg, rgba(139, 181, 228, 0.7) 0%, rgba(0, 58, 112, 0.3) 100%);
            box-shadow: 0 0 10px rgba(139, 181, 228, 0.1);
            animation: bbaMetricsBar1 2.6s ease-in-out infinite;
        }

        .bba-intel-bar.bar-2 {
            background: linear-gradient(180deg, rgba(139, 181, 228, 0.6) 0%, rgba(0, 58, 112, 0.25) 100%);
            box-shadow: 0 0 10px rgba(139, 181, 228, 0.1);
            animation: bbaMetricsBar2 3s ease-in-out infinite;
        }

        .bba-intel-bar.bar-3 {
            /* Core performance bar */
            background: linear-gradient(180deg, rgba(180, 215, 255, 1) 0%, rgba(139, 181, 228, 0.85) 40%, rgba(0, 58, 112, 0.4) 100%);
            box-shadow: 0 0 18px rgba(139, 181, 228, 0.25), inset 0 2px 4px rgba(255, 255, 255, 0.15);
            animation: bbaMetricsBar3 2.4s ease-in-out infinite;
            opacity: 1;
        }

        .bba-intel-bar.bar-4 {
            background: linear-gradient(180deg, rgba(139, 181, 228, 0.65) 0%, rgba(0, 58, 112, 0.28) 100%);
            box-shadow: 0 0 10px rgba(139, 181, 228, 0.1);
            animation: bbaMetricsBar4 2.8s ease-in-out infinite;
        }

        .bba-intel-bar.bar-5 {
            background: linear-gradient(180deg, rgba(139, 181, 228, 0.5) 0%, rgba(0, 58, 112, 0.2) 100%);
            box-shadow: 0 0 10px rgba(139, 181, 228, 0.1);
            animation: bbaMetricsBar5 3.2s ease-in-out infinite;
        }

        /* Hover interactions */
        .bba-intel-bar-group:hover .bba-intel-bar {
            filter: brightness(1.25);
            box-shadow: 0 0 24px rgba(139, 181, 228, 0.4), inset 0 2px 6px rgba(255, 255, 255, 0.3);
            opacity: 1;
        }

        @keyframes bbaMetricsBar1 {

            0%,
            100% {
                height: 25%;
            }

            50% {
                height: 60%;
            }
        }

        @keyframes bbaMetricsBar2 {

            0%,
            100% {
                height: 50%;
            }

            50% {
                height: 75%;
            }
        }

        @keyframes bbaMetricsBar3 {

            0%,
            100% {
                height: 65%;
            }

            50% {
                height: 100%;
            }
        }

        @keyframes bbaMetricsBar4 {

            0%,
            100% {
                height: 40%;
            }

            50% {
                height: 70%;
            }
        }

        @keyframes bbaMetricsBar5 {

            0%,
            100% {
                height: 60%;
            }

            50% {
                height: 80%;
            }
        }

        .bba-intel-bar-label {
            margin-top: 12px;
            padding-bottom: 8px;
            font-size: 11px;
            color: rgba(139, 181, 228, 0.6);
            text-transform: uppercase;
            letter-spacing: 0.1em;
            font-weight: 500;
            text-align: center;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            width: 100%;
            transition: all 0.3s ease;
        }

        .bba-intel-bar-group:hover .bba-intel-bar-label {
            color: #FFF;
            text-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
        }

        .bba-intel-footer {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 24px;
        }

        .bba-intel-desc {
            font-size: 13px;
            color: rgba(255, 255, 255, 0.7);
            line-height: 1.6;
            max-width: 380px;
            margin: 0;
        }

        .bba-intel-metric {
            font-size: 11px;
            color: #8BB5E4;
            font-weight: 600;
            line-height: 1.4;
            text-align: right;
            margin-top: 4px;
        }

        @media (max-width: 600px) {
            .bba-intel-panel {
                padding: 24px;
            }

            .bba-intel-title {
                font-size: 22px;
            }

            .bba-intel-footer {
                flex-direction: column;
                gap: 12px;
            }

            .bba-intel-metric {
                text-align: left;
            }

            .bba-intel-bar-label {
                font-size: 9px;
            }

            .bba-intel-bar {
                max-width: 32px;
            }
        }

        /* =========================================
           SECTION 04: BBA EXECUTIVE FINALE
           ========================================= */
        .bba-finale {
            position: relative;
            padding: 32px 24px 46px;
            color: #0d1830;
            background:
                radial-gradient(circle at 12% 18%, rgba(212, 175, 55, 0.18), transparent 24%),
                radial-gradient(circle at 88% 14%, rgba(11, 47, 99, 0.14), transparent 28%),
                linear-gradient(180deg, #f7f3eb 0%, #f2ede4 52%, #ece6dc 100%);
            overflow: hidden;
        }

        .bba-finale::before {
            content: '';
            position: absolute;
            inset: 22px;
            border: 1px solid rgba(13, 44, 90, 0.08);
            border-radius: 34px;
            pointer-events: none;
        }

        .bba-finale::after {
            content: '';
            position: absolute;
            inset: 0;
            background:
                linear-gradient(rgba(13, 44, 90, 0.025) 1px, transparent 1px),
                linear-gradient(90deg, rgba(13, 44, 90, 0.025) 1px, transparent 1px);
            background-size: 92px 92px;
            mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 0.88), transparent 88%);
            pointer-events: none;
            opacity: 0.48;
        }

        .bba-finale__shell,
        .bba-finale__footer {
            position: relative;
            z-index: 1;
            max-width: 1320px;
            margin: 0 auto;
        }

        .bba-finale__shell {
            display: flex;
            flex-direction: column;
            gap: 56px;
            align-items: center;
            width: 100%;
        }

        .bba-finale__intro {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            gap: 24px;
            padding-top: 0;
            max-width: 860px;
        }

        .bba-finale__eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            font-size: clamp(18px, 1.8vw, 24px);
            font-weight: 700;
            letter-spacing: 0.22em;
            text-transform: uppercase;
            color: rgba(0, 58, 112, 0.78);
            margin-bottom: 16px;
        }

        .bba-finale__eyebrow::before {
            content: '';
            width: 42px;
            height: 1px;
            background: linear-gradient(90deg, rgba(212, 175, 55, 0.9), rgba(139, 181, 228, 0.18));
        }

        .bba-finale__title {
            margin: 0;
            max-width: 100%;
            font-size: clamp(42px, 5vw, 74px);
            font-weight: 300;
            line-height: 0.94;
            letter-spacing: -0.045em;
            color: #0b2f63;
        }

        .bba-finale__title strong {
            font-weight: 600;
            color: #003a70;
        }

        .bba-finale__lead {
            margin: 0;
            max-width: 72ch;
            font-size: clamp(17px, 1.75vw, 20px);
            line-height: 1.78;
            color: rgba(11, 47, 99, 0.74);
        }

        .bba-finale__actions {
            display: flex;
            flex-wrap: wrap;
            gap: 14px;
            align-items: center;
            justify-content: center;
        }

        .bba-finale__intel-strip {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 12px;
        }

        .bba-finale__intel-item {
            padding: 16px 18px;
            border-radius: 20px;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(248, 243, 235, 0.92));
            border: 1px solid rgba(13, 44, 90, 0.08);
            box-shadow: 0 14px 34px rgba(13, 44, 90, 0.06);
        }

        .bba-finale__intel-label {
            display: block;
            margin-bottom: 8px;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: rgba(212, 175, 55, 0.88);
        }

        .bba-finale__intel-value {
            margin: 0;
            font-size: 18px;
            font-weight: 500;
            line-height: 1.28;
            color: #0d2c5a;
        }

        .bba-finale__ghost {
            min-height: 56px;
            padding: 0 28px;
            border-radius: 999px;
            border: 1px solid rgba(0, 58, 112, 0.10);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            font-size: 14px;
            font-weight: 600;
            color: #003a70;
            background: rgba(255, 255, 255, 0.72);
            box-shadow: 0 14px 34px rgba(0, 58, 112, 0.08);
            transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
        }

        .bba-finale__ghost:hover {
            transform: translateY(-2px);
            border-color: rgba(0, 58, 112, 0.18);
            background: rgba(255, 255, 255, 0.92);
        }

        .bba-finale__microcopy {
            font-size: 12px;
            line-height: 1.7;
            color: rgba(0, 58, 112, 0.56);
        }

        .bba-finale__proof-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 14px;
        }

        .bba-finale__proof-card {
            padding: 24px 22px 22px;
            border-radius: 24px;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(250, 247, 241, 0.92) 100%);
            border: 1px solid rgba(13, 44, 90, 0.08);
            box-shadow: 0 18px 44px rgba(13, 44, 90, 0.06);
        }

        .bba-finale__proof-index {
            display: inline-flex;
            margin-bottom: 18px;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: rgba(212, 175, 55, 0.9);
        }

        .bba-finale__proof-title {
            margin: 0 0 10px;
            font-size: 18px;
            font-weight: 500;
            line-height: 1.2;
            color: #0d2c5a;
        }

        .bba-finale__proof-copy {
            margin: 0;
            font-size: 14px;
            line-height: 1.7;
            color: rgba(13, 44, 90, 0.64);
        }

        .bba-finale__board {
            position: relative;
            padding: 24px;
            width: 100%;
            border-radius: 34px;
            background:
                radial-gradient(circle at top left, rgba(212, 175, 55, 0.14), transparent 26%),
                linear-gradient(180deg, #09101a 0%, #0c1520 46%, #111c28 100%);
            border: 1px solid rgba(255, 255, 255, 0.08);
            box-shadow: 0 36px 90px rgba(8, 12, 18, 0.34);
            overflow: hidden;
        }

        .bba-finale__board::before {
            content: '';
            position: absolute;
            inset: 14px;
            border-radius: 26px;
            border: 1px solid rgba(255, 255, 255, 0.06);
            pointer-events: none;
        }

        .bba-finale__board-media {
            position: relative;
            min-height: 720px;
            width: 100%;
            border-radius: 28px;
            overflow: hidden;
            isolation: isolate;
            border: 1px solid rgba(255, 255, 255, 0.08);
            box-shadow:
                0 24px 54px rgba(0, 0, 0, 0.26),
                inset 0 1px 0 rgba(255, 255, 255, 0.06);
            background: #07111d;
        }

        .bba-finale__board-video {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: 62% center;
            filter: saturate(0.84) contrast(1.08) brightness(0.72);
        }

        .bba-finale__board-media::before {
            content: '';
            position: absolute;
            inset: 0;
            z-index: 0;
            background:
                linear-gradient(90deg, rgba(3, 8, 17, 0.92) 0%, rgba(3, 8, 17, 0.78) 34%, rgba(3, 8, 17, 0.48) 64%, rgba(3, 8, 17, 0.24) 100%),
                linear-gradient(180deg, rgba(6, 11, 19, 0.14), rgba(6, 11, 19, 0.08) 28%, rgba(6, 11, 19, 0.48) 100%),
                radial-gradient(circle at 84% 16%, rgba(212, 175, 55, 0.14), transparent 30%);
        }

        .bba-finale__board-media::after {
            content: '';
            position: absolute;
            inset: 0;
            z-index: 1;
            background:
                linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 18%, rgba(7, 16, 27, 0.18) 54%, rgba(7, 16, 27, 0.4) 100%),
                radial-gradient(circle at 76% 18%, rgba(255, 255, 255, 0.07), transparent 18%);
            pointer-events: none;
        }

        .bba-finale__media-panel {
            position: absolute;
            left: 22px;
            right: 22px;
            bottom: 20px;
            z-index: 2;
            display: flex;
            align-items: end;
            justify-content: space-between;
            gap: 18px;
        }

        .bba-finale-eyebrow {
            position: absolute;
            bottom: 40px;
            left: 40px;
            display: inline-flex;
            align-items: center;
            gap: 12px;
            font-size: 13px;
            font-weight: 600;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: rgba(247, 241, 231, 0.9);
            text-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
            z-index: 3;
        }

        .bba-finale-eyebrow::before {
            content: '';
            width: 24px;
            height: 1px;
            background: linear-gradient(90deg, rgba(212, 175, 55, 0.95), rgba(212, 175, 55, 0.1));
            box-shadow: 0 0 12px rgba(212, 175, 55, 0.4);
        }

        .bba-finale__media-controls {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            align-self: flex-end;
        }

        .bba-finale__media-control {
            min-height: 46px;
            padding: 0 18px;
            border-radius: 999px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            background: rgba(8, 14, 23, 0.54);
            border: 1px solid rgba(255, 255, 255, 0.08);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            color: #f7f1e7;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.14em;
            text-transform: uppercase;
        }

        .bba-finale__media-control svg {
            width: 16px;
            height: 16px;
            stroke: currentColor;
            stroke-width: 1.8;
            fill: none;
        }

        .bba-finale__media-control--button {
            cursor: pointer;
            transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease;
        }

        .bba-finale__media-control--button:hover {
            transform: translateY(-1px);
            background: rgba(14, 24, 38, 0.72);
            border-color: rgba(212, 175, 55, 0.28);
        }

        .bba-finale__media-watermark {
            position: absolute;
            right: 22px;
            top: 18px;
            z-index: 2;
            width: clamp(94px, 15%, 122px);
            aspect-ratio: 1 / 1;
            background: url('../../media/bba_logo_fundo_vazio.png') center/contain no-repeat;
            opacity: 0.06;
            mix-blend-mode: screen;
            filter: saturate(0.78) brightness(0.9) blur(0.3px);
            transform: translateZ(0);
            pointer-events: none;
        }

        .bba-finale__media-watermark::after {
            content: '';
            position: absolute;
            inset: 12% 8% 8% 12%;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(212, 175, 55, 0.08), transparent 66%);
            filter: blur(10px);
            opacity: 0.7;
        }

        .bba-finale__footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 24px;
            margin-top: 34px;
            padding: 28px 30px;
            border-radius: 28px;
            background: rgba(255, 255, 255, 0.96);
            border: 1px solid rgba(16, 24, 36, 0.08);
            box-shadow: 0 28px 60px rgba(0, 0, 0, 0.18);
        }

        .bba-finale__brand {
            display: flex;
            align-items: center;
            gap: 18px;
            position: relative;
            padding: 14px 18px;
            border-radius: 22px;
        }

        .bba-finale__brand::before {
            content: '';
            position: absolute;
            left: 10px;
            top: 50%;
            width: 120px;
            height: 120px;
            transform: translateY(-50%);
            background: radial-gradient(circle, rgba(212, 175, 55, 0.34) 0%, rgba(212, 175, 55, 0.12) 38%, transparent 72%);
            filter: blur(12px);
            pointer-events: none;
        }

        .bba-finale__brand-logo {
            width: 160px;
            max-width: 100%;
            display: block;
            object-fit: contain;
            filter: drop-shadow(0 10px 26px rgba(0, 0, 0, 0.24));
            position: relative;
            z-index: 1;
        }

        .bba-finale__brand-copy {
            margin: 0;
            max-width: 40ch;
            font-size: 14px;
            line-height: 1.7;
            color: rgba(16, 24, 36, 0.66);
            position: relative;
            z-index: 1;
        }

        .bba-finale__footer-nav {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-end;
            gap: 10px;
        }

        .bba-finale__socials {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 12px;
            padding-left: 24px;
            margin-top: -38px;
            z-index: 10;
        }

        .bba-finale__social-link {
            width: 42px;
            height: 42px;
            border-radius: 999px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: #0f1722;
            background: rgba(15, 23, 34, 0.04);
            border: 1px solid rgba(16, 24, 36, 0.08);
            transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease;
        }

        .bba-finale__social-link.is-linkedin {
            background: #0a66c2;
            border-color: #0a66c2;
            color: #0d2c5a;
            box-shadow: 0 14px 28px rgba(10, 102, 194, 0.22);
        }

        .bba-finale__social-link.is-instagram {
            background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
            border-color: rgba(214, 36, 159, 0.32);
            color: #ffffff;
            box-shadow: 0 14px 28px rgba(214, 36, 159, 0.18);
        }

        .bba-finale__social-link:hover {
            transform: translateY(-2px);
            background: rgba(212, 175, 55, 0.12);
            border-color: rgba(212, 175, 55, 0.22);
        }

        .bba-finale__social-link.is-linkedin:hover,
        .bba-finale__social-link.is-instagram:hover {
            filter: saturate(1.04) brightness(1.02);
            border-color: transparent;
        }

        .bba-finale__social-link svg {
            width: 18px;
            height: 18px;
        }

        .bba-finale__footer-pill {
            padding: 10px 14px;
            border-radius: 999px;
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: rgba(16, 24, 36, 0.72);
            background: rgba(15, 23, 34, 0.04);
            border: 1px solid rgba(16, 24, 36, 0.08);
        }

        @media (max-width: 1180px) {
            .bba-finale__shell {
                grid-template-columns: 1fr;
            }

            .bba-finale__title {
                max-width: 14ch;
            }

            .bba-finale__board-media {
                min-height: 460px;
            }
        }

        @media (max-width: 820px) {
            .bba-finale {
                padding: 24px 18px 32px;
            }

            .bba-finale::before {
                inset: 12px;
                border-radius: 24px;
            }

            .bba-finale__proof-grid {
                grid-template-columns: 1fr;
            }

            .bba-finale__intel-strip {
                grid-template-columns: 1fr;
            }

            .bba-finale__board,
            .bba-finale__proof-card {
                border-radius: 24px;
            }

            .bba-finale__board-media {
                min-height: 380px;
            }

            .bba-finale__media-panel {
                left: 18px;
                right: 18px;
                bottom: 18px;
                align-items: stretch;
                flex-direction: column;
            }

            .bba-finale__footer {
                flex-direction: column;
                align-items: flex-start;
            }

            .bba-finale__footer-nav {
                justify-content: flex-start;
            }
        }

        @media (max-width: 600px) {
            .bba-finale__actions {
                flex-direction: column;
                align-items: stretch;
            }

            .bba-finale__ghost,
            .bba-finale .bba-hero__button {
                width: 100%;
            }

            .bba-finale__sequence-step {
                grid-template-columns: 1fr;
            }

            .bba-finale__step-number {
                width: 52px;
                height: 52px;
            }

            .bba-finale__brand {
                flex-direction: column;
                align-items: flex-start;
            }

            .bba-finale__media-watermark {
                width: 92px;
                right: 16px;
                top: 14px;
                opacity: 0.06;
            }
        }