body {
            font-family: 'Manrope', sans-serif;
            background: #0b1320;
            color: #e5e7eb;
            overflow-x: hidden;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale
        }

        .navbar {
            background: rgba(5, 12, 25, .92) !important;
            backdrop-filter: blur(12px)
        }

        .navbar-brand {
            font-weight: 800;
            color: #f59e0b !important
        }

        .hero {
            height: 100vh;
            background: linear-gradient(rgba(15, 23, 42, .28), rgba(15, 23, 42, .38)), url('https://images.unsplash.com/photo-1516937941344-00b4e0337589?q=80&w=2400&auto=format&fit=crop') center/cover;
            display: flex;
            align-items: center;
            text-align: center
        }

        .hero h1 {
            font-size: clamp(3rem, 6vw, 5.5rem);
            font-weight: 800;
            color: #fff;
            text-shadow: 0 4px 18px rgba(0, 0, 0, .35);
            letter-spacing: -1.5px;
            line-height: 1.1
        }

        .hero p {
            max-width: 850px;
            margin: auto;
            color: #f3f4f6;
            text-shadow: 0 2px 10px rgba(0, 0, 0, .25)
        }

        .btn-premium {
            background: linear-gradient(135deg, #f59e0b, #ea580c);
            border: none;
            color: #fff;
            padding: 14px 34px;
            border-radius: 50px;
            font-weight: 600
        }

        .section-title {
            font-size: 2.5rem;
            font-weight: 800;
            color: #fff;
            margin-bottom: 20px;
            letter-spacing: -0.8px
        }

        .glass-card {
            background: rgba(255, 255, 255, .05);
            border: 1px solid rgba(255, 255, 255, .08);
            backdrop-filter: blur(10px);
            border-radius: 24px;
            padding: 30px;
            transition: .4s;
            height: 100%
        }

        .glass-card:hover {
            transform: translateY(-8px)
        }

        .associate-logo {
            height: 90px;
            object-fit: contain;
            /* filter: grayscale(100%); */
            opacity: .9
        }

        .leader-img {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            object-fit: cover;
            border: 4px solid #f59e0b
        }

        .dark-section {
            background: #111827
        }

        .contact-card {
            background: linear-gradient(145deg, #111827, #1f2937);
            border-radius: 24px;
            padding: 30px;
            height: 100%
        }

        footer {
            background: #050c19;
            padding: 20px;
            text-align: center
        }

        .hero-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(255, 255, 255, .08), rgba(15, 23, 42, .12));
            z-index: 1
        }

        .floating-glow {
            position: absolute;
            border-radius: 50%;
            filter: blur(100px);
            opacity: .28;
            mix-blend-mode: screen;
            animation: softFloat 10s ease-in-out infinite alternate
        }

        .glow-1 {
            width: 320px;
            height: 320px;
            background: radial-gradient(circle, #f59e0b, transparent 70%);
            top: 12%;
            left: 8%;
            animation-delay: 0s
        }

        .glow-2 {
            width: 360px;
            height: 360px;
            background: radial-gradient(circle, #38bdf8, transparent 70%);
            bottom: 8%;
            right: 8%;
            animation-delay: 2s
        }

        .animate-title {
            animation: fadeUp 1.2s ease forwards
        }

        .animate-subtitle {
            animation: fadeUp 1.8s ease forwards
        }

        @keyframes fadeUp {
            from {
                opacity: 0;
                transform: translateY(30px)
            }

            to {
                opacity: 1;
                transform: translateY(0)
            }
        }

        @keyframes softFloat {
            0% {
                transform: translate3d(0, 0, 0) scale(1)
            }

            25% {
                transform: translate3d(15px, -12px, 0) scale(1.03)
            }

            50% {
                transform: translate3d(-10px, 8px, 0) scale(1.06)
            }

            75% {
                transform: translate3d(12px, -8px, 0) scale(1.02)
            }

            100% {
                transform: translate3d(-8px, 12px, 0) scale(1)
            }
        }

        50% {
            transform: translateY(-20px)
        }
        }

        html {
            scroll-behavior: smooth
        }

        .hero::before {
            content: '';
            position: absolute;
            width: 120%;
            height: 120%;
            background: radial-gradient(circle, rgba(245, 158, 11, .08), transparent 60%);
            animation: moveBg 14s ease-in-out infinite alternate;
            top: -10%;
            left: -10%;
            z-index: 0
        }

        .glass-card,
        .contact-card {
            opacity: 0;
            transform: translateY(40px);
            animation: fadeInUp .9s ease forwards
        }

        .glass-card:nth-child(2) {
            animation-delay: .2s
        }

        .glass-card:nth-child(3) {
            animation-delay: .4s
        }

        .btn-premium {
            transition: all .4s ease
        }

        .btn-premium:hover {
            transform: translateY(-4px) scale(1.04)
        }

        @keyframes moveBg {
            0% {
                transform: translateX(-20px) translateY(0)
            }

            100% {
                transform: translateX(20px) translateY(-15px)
            }
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(40px)
            }

            to {
                opacity: 1;
                transform: translateY(0)
            }
        }

        .hero-pulse {
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at center, rgba(245, 158, 11, .10), transparent 55%);
            animation: pulseGlow 8s ease-in-out infinite;
            z-index: 1
        }

        @keyframes pulseGlow {

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

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

        @media (max-width:768px) {
            .hero {
                height: auto;
                min-height: 100vh;
                padding: 110px 0 70px;
                background-position: center center
            }

            .hero h1 {
                font-size: 2.2rem;
                line-height: 1.2;
                padding: 0 10px
            }

            .hero p {
                font-size: 1rem;
                padding: 0 14px;
                margin-bottom: 28px
            }

            .btn-premium,
            .btn-outline-light {
                width: 100%;
                max-width: 280px;
                padding: 14px 18px
            }

            .navbar-brand {
                font-size: 1.2rem
            }

            .navbar-collapse {
                background: rgba(5, 12, 25, .98);
                padding: 16px;
                border-radius: 16px;
                margin-top: 10px
            }

            .section-title {
                font-size: 2rem
            }

            .glass-card,
            .contact-card {
                padding: 22px;
                border-radius: 18px
            }

            .leader-img {
                width: 120px;
                height: 120px
            }

            #associates .col-6,
            #leadership .col-md-4,
            #contact .col-md-4 {
                width: 100%
            }

            body {
                overflow-x: hidden
            }
        }