/* --- GLOBAL SETTINGS --- */
        body { 
            font-feature-settings: "cv11", "ss01"; 
            -webkit-font-smoothing: antialiased; 
        }
        
        /* --- SECTION 1: HERO UTILITIES --- */
        /* Cinematic Gradient Overlay matching #02121C */
        .hero-gradient {
            background: linear-gradient(
                90deg, 
                #02121C 0%, 
                #02121C 45%, 
                rgba(2, 18, 28, 0.85) 60%, 
                rgba(2, 18, 28, 0.2) 100%
            );
        }
        @media (max-width: 768px) {
            .hero-gradient {
                background: linear-gradient(
                    180deg, 
                    rgba(2, 18, 28, 0.3) 0%, 
                    #02121C 60%
                );
            }
        }

        /* Premium Button Hover */
        .btn-premium {
            position: relative;
            overflow: hidden;
            transition: all 0.5s ease;
        }
        .btn-premium::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
            transition: left 0.5s ease;
        }
        .btn-premium:hover::before {
            left: 100%;
        }

        /* --- SECTION 2: PLAYBOOK UTILITIES --- */
        .eyebrow {
            font-size: 0.9rem;
            font-weight: 600;
            color: #005FD8;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            margin-bottom: 0.75rem;
        }

        .playbook-card {
            position: relative;
            isolation: isolate;
        }
        .playbook-card::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 0%;
            height: 4px;
            background-color: #005FD8;
            transition: width 0.4s ease;
            z-index: 20;
        }
        .playbook-card:hover::after { width: 100%; }

        .group:hover .zoom-image { transform: scale(1.08); }

        /* Gradient Overlay for Text Readability */
        .card-gradient {
            background: linear-gradient(to top, #051C2C 10%, rgba(5, 28, 44, 0.6) 50%, rgba(5, 28, 44, 0.2) 100%);
        }

        /* --- SECTION 3: MISSION/IMPACT GRID --- */
        .bento-grid {
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            gap: 1px; 
            background-color: #CBD5E1;
            border: 1px solid #CBD5E1;
        }

        .bento-item {
            background-color: #ffffff;
            position: relative;
            overflow: hidden;
            transition: all 0.3s ease;
        }
        .bento-item:hover {
            background-color: #F8FAFC;
            z-index: 10;
        }
        .bento-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 4px;
            height: 0%;
            background: #005FD8;
            transition: height 0.3s ease;
            z-index: 20;
        }
        .bento-item:hover::before { height: 100%; }

        .icon-box {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 56px;
            height: 56px;
            background-color: #F1F5F9;
            border-radius: 50%;
            margin-bottom: 1.5rem;
            color: #051C2C;
            font-size: 1.25rem;
            transition: all 0.3s ease;
        }
        .bento-item:hover .icon-box {
            background-color: #005FD8;
            color: #ffffff;
            transform: scale(1.05);
        }

        .btn-modern {
            position: relative;
            padding-bottom: 4px;
            color: #051C2C;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            font-size: 0.9rem;
            font-weight: 700;
            transition: color 0.3s;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }
        .btn-modern::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 2px;
            background-color: #005FD8;
            transform: scaleX(0.3);
            transform-origin: left;
            transition: transform 0.3s;
        }
        .btn-modern:hover::after { transform: scaleX(1); }
        .btn-modern:hover { color: #005FD8; }

        .image-overlay-gradient {
            background: linear-gradient(to bottom, transparent 20%, rgba(5, 28, 44, 0.9) 100%);
        }
        
        .stat-card { transition: background-color 0.3s ease; }
        .stat-card:hover { background-color: #F0F9FF; }