:root {
            --gold: #fbc02d;
            --navy-dark: #0d172a;
            --navy-light: #1c355e;
            --primary-blue: #1a237e;
        }

        body { font-family: 'Poppins', sans-serif; background-color: #fcfcfc; }

        /* --- Updated Hero Section with your requested Animation --- */
        .hero { 
            background: radial-gradient(circle at center, var(--navy-light) 0%, var(--navy-dark) 100%);
            padding: 120px 0 100px; 
            color: white; 
            border-bottom: 6px solid var(--gold);
            text-align: center;
        }

        .hero-logo { 
            padding:10px;
            max-width: 320px; 
            border-radius: 50%; /* Rounded for logo look */
            border: 4px solid var(--gold);
            background: white;
            filter: drop-shadow(0 0 25px rgba(251, 192, 45, 0.4)); 
            animation: float 3s ease-in-out infinite; 
            margin-bottom: 30px;
        }

        @keyframes float { 
            0% { transform: translateY(0px); } 
            50% { transform: translateY(-20px); } 
            100% { transform: translateY(0px); } 
        }
        
        .hero-title { 
            font-family: 'Montserrat', sans-serif; 
            font-size: 3.5rem; 
            font-weight: 800;
            line-height: 1.2; 
            margin-bottom: 25px; 
            letter-spacing: -1px;
        }

        .btn-install { 
            background: var(--gold); 
            color: var(--navy-dark); 
            border: none; 
            font-weight: 800; 
            padding: 18px 50px; 
            border-radius: 12px; 
            font-size: 1.3rem; 
            text-transform: uppercase;
            transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            box-shadow: 0 10px 20px rgba(0,0,0,0.2);
        }

        .btn-install:hover {
            transform: scale(1.08);
            background: white;
            color: var(--navy-dark);
            box-shadow: 0 15px 30px rgba(251, 192, 45, 0.4);
        }

        /* --- Navbar --- */
        .navbar { background: rgba(13, 23, 42, 0.95); backdrop-filter: blur(10px); }
        .nav-link { font-weight: 600; color: white !important; text-transform: uppercase; font-size: 0.9rem; }

        /* --- Sections --- */
        .section-padding { padding: 80px 0; }
        .feature-card {
            background: white; padding: 40px; border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.05); transition: 0.3s;
            height: 100%; border: 1px solid #eee;
        }
        .feature-card:hover { transform: translateY(-10px); }
        .icon-box { font-size: 3rem; color: var(--primary-blue); margin-bottom: 20px; }

        .reward-table { border-radius: 15px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
        
        footer { background: var(--navy-dark); color: white; padding: 60px 0 30px; }
          /* --- Header Section --- */
        .about-header {
            background: radial-gradient(circle at center, var(--navy-light) 0%, var(--navy-dark) 100%);
            padding: 120px 0 80px;
            color: white;
            text-align: center;
            border-bottom: 6px solid var(--gold);
        }

        .header-title {
            font-family: 'Montserrat';
            font-size: 3.5rem;
            font-weight: 800;
            text-transform: uppercase;
        }

        /* --- Story Section --- */
        .story-section { padding: 100px 0; }
        .logo-box {
            background: white;
            padding: 20px;
            border-radius: 50%;
            box-shadow: 0 0 50px rgba(251, 192, 45, 0.2);
            display: inline-block;
            animation: float 4s ease-in-out infinite;
        }
        @keyframes float { 0% { transform: translateY(0); } 50% { transform: translateY(-15px); } 100% { transform: translateY(0); } }

        /* --- Vision Cards --- */
        .vision-card {
            border: none;
            border-radius: 20px;
            padding: 40px;
            background: #f8f9fa;
            transition: 0.3s;
            height: 100%;
        }
        .vision-card:hover {
            background: var(--navy-dark);
            color: white;
            transform: translateY(-10px);
        }
        .vision-card i {
            font-size: 3rem;
            color: var(--gold);
            margin-bottom: 20px;
        }

        /* --- Stats Section --- */
        .stats-bar {
            background: var(--gold);
            padding: 50px 0;
            margin-top: 50px;
        }
        .stat-item h2 { font-family: 'Montserrat'; font-weight: 800; color: var(--navy-dark); }

        /* --- Custom Branding Section --- */
        .branding-highlight {
            background: #fff9e6;
            padding: 80px 0;
            border-radius: 50px;
            margin: 50px 0;
        }
          .fixed-top{
            height: 50px;
        }
         /* ==========================================================
           RESPONSIVE BRAND TOP BAR (PC + Mobile, Professional Colors)
           ========================================================== */
        .brand-top-bar {
            background: #ffffff;
            border-radius: 12px;
            padding: 15px 20px;
            margin-bottom: 5px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.04);
            position: sticky;
            top: 5px; /* Upar ka gap kam kiya */
            z-index: 1000;
        }
        .btb-search-row { display: flex; gap: 15px; align-items: center; margin-bottom: 15px; }
        .btb-search-box {
            flex-grow: 1; background: #f0f2f5; border-radius: 50px; padding: 10px 20px;
            display: flex; align-items: center; color: #65676b; transition: all 0.3s ease;
        }
        .btb-search-box:focus-within { background: #e4e6e9; box-shadow: 0 0 0 2px rgba(25, 152, 240, 0.2); }
        .btb-search-box i { font-size: 1.1rem; }
        .btb-search-box input { border: none; background: transparent; color: #1a1a1a; width: 100%; outline: none; margin-left: 10px; font-size: 0.95rem; }
        
        /* 1. PC/Desktop के लिए डिफ़ॉल्ट बटन स्टाइल (अगर आपके पास पहले से है तो इसे छोड़ सकते हैं) */
        .btb-btn-create {
            background: linear-gradient(135deg, #1998f0, #2ebfec);
            color: #fff;
            border: none;
            padding: 8px 20px;
            border-radius: 20px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            gap: 5px;
            z-index: 999;
        }

      
     /* MOBILE MAGIC: !important लगाकर बटन को जबरदस्ती नीचे फिक्स करना */
        @media (max-width: 768px) {
            .btb-btn-create {
                position: fixed !important;      
                bottom: 30px !important;         
                right: 20px !important;          
                width: 60px !important;          
                height: 60px !important;         
                border-radius: 50% !important;   
                padding: 0 !important;           
                display: flex !important;
                justify-content: center !important;
                align-items: center !important;
                box-shadow: 0 5px 15px rgba(25, 152, 240, 0.5) !important; 
                z-index: 999999 !important; /* एकदम टॉप पर रखने के लिए */
            }
            
            /* 'Create' टेक्स्ट को हर हाल में छुपाना */
            .btb-btn-create span {
                display: none !important;
            }
            
            /* '+' आइकॉन को बीच में सेट करना */
            .btb-btn-create i {
                font-size: 2rem !important;
                margin: 0 !important;
            }
        }
        .btb-btn-create:hover { transform: translateY(-2px); color: #fff; }
        
        /* UPDATE 3: Profile Hover Menu Dropdown CSS */
        .profile-dropdown-container { position: relative; display: inline-block; cursor: pointer; }
        .btb-profile-img { width: 45px; height: 45px; border-radius: 50%; object-fit: cover; border: 2px solid #e0e0e0; transition: border 0.3s; }
        .profile-dropdown-container:hover .btb-profile-img { border-color: #1998f0; }
        
        /* ड्रॉपडाउन को डिफ़ॉल्ट रूप से छुपा कर रखें */
        .profile-dropdown-menu {
            position: absolute;
            top: 55px; /* हेडर की ऊंचाई के हिसाब से एडजस्ट करें */
            right: 0;
            background: #ffffff;
            border-radius: 10px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.15);
            min-width: 160px;
            z-index: 999;
            
            /* छुपने और दिखने का एनिमेशन */
            opacity: 0;
            visibility: hidden;
            transform: translateY(10px);
            transition: all 0.3s ease;
        }

        /* 1. सिर्फ PC (Mouse) के लिए: Hover करने पर मेनू दिखाना */
        @media (hover: hover) and (pointer: fine) {
            .profile-dropdown-container:hover .profile-dropdown-menu {
                opacity: 1;
                visibility: visible;
                transform: translateY(0);
            }
        }

        /* 2. सिर्फ Mobile (Touch) के लिए: JS के ज़रिए .show क्लास लगने पर मेनू दिखाना */
        .profile-dropdown-menu.show {
            opacity: 1 !important;
            visibility: visible !important;
            transform: translateY(0) !important;
        }

        /* ड्रॉपडाउन लिंक्स की डिजाइन */
        .profile-dropdown-menu a {
            display: block;
            padding: 12px 15px;
            color: #333;
            text-decoration: none;
            font-size: 0.95rem;
            font-weight: 600;
            border-bottom: 1px solid #f0f0f0;
            transition: background 0.2s;
        }
        .profile-dropdown-menu a:last-child { border-bottom: none; }
        .profile-dropdown-menu a:hover { background: #f8f9fa; color: #1998f0; }
        .btb-profile-img { cursor: pointer; }
              /* UPDATE 4: Flex Wrap lagaya taaki pills next line me jayein, screen ke bahar nahi */
        .btb-pills-row { 
            display: flex; gap: 10px; flex-wrap: wrap; /* Ye line sabse important h multi-line ke liye */
            padding-bottom: 5px; 
        }
        .btb-pill {
            background: #ffffff; border: 1px solid #dcdcdc; border-radius: 50px; padding: 8px 18px; font-size: 0.9rem; color: #444; font-weight: 600; cursor: pointer; white-space: nowrap; transition: all 0.2s; display: flex; align-items: center; gap: 6px;
        }
        .btb-pill.active { background: #1998f0; color: #fff; border-color: #1998f0; box-shadow: 0 4px 8px rgba(25, 152, 240, 0.2); }
        .btb-pill:hover:not(.active) { background: #f0f2f5; }
        .btb-pill:active { transform: scale(0.95); }

        /* Mobile specific adjustments */
        @media (max-width: 768px) {
            .brand-top-bar { border-radius: 0; margin: -5px -15px 15px -15px; top: 0; padding: 12px 15px; box-shadow: 0 2px 10px rgba(0,0,0,0.08); }
            .btb-search-row { gap: 10px; margin-bottom: 12px; }
            .btb-search-box { padding: 8px 15px; }
            .btb-btn-create { padding: 8px 15px; font-size: 0.85rem; }
            .btb-profile-img { width: 38px; height: 38px; }
            .btb-pill { padding: 6px 15px; font-size: 0.85rem; }
        }
        /* NAYA CSS: Dono sticky bars ko alag-alag jagah set karna */
        #main-header-bar {
            position: sticky;
            top: 5px;
            z-index: 1005; /* Isko sabse upar rakhna hai */
        }
        
        #category-pills-bar {
            position: sticky;
            top: 50px; /* PC par header ke theek niche chipkega */
            z-index: 1004;
        }

        @media (max-width: 768px) {
            #main-header-bar {
                top: 0; /* Mobile par ekdum upar */
            }
            #category-pills-bar {
                top: 50px; /* Mobile par header ki height ke hisaab se theek niche */
                margin-top: 0;
            }
        }
 
        /* 2. NAYA CSS: Sleek, Clean & Premium Brand Name */
        .header-brand-name {
            display: flex;
            align-items: center;
            height: 42px; /* सर्च बार की परफेक्ट ऊंचाई */
            margin-right: 5px;

            /* फॉन्ट स्टाइल - Netflix जैसा मॉडर्न, शार्प और क्लीन */
            font-family: 'Montserrat', 'Helvetica Neue', Helvetica, sans-serif;
            font-size: 1.95rem;
            font-weight: 500; /* 900 (Black) हटाकर 700 (Bold) कर दिया ताकि ज्यादा मोटा न लगे */
            letter-spacing: -0.5px; /* अक्षरों को थोड़ा पास किया ताकि सॉलिड लगे */
            text-decoration: none;
            white-space: nowrap;
            color: #fbc02d !important;

            

        }

        .header-brand-name:hover {
            filter: drop-shadow(2px 3px 3px rgba(11, 33, 84, 0.8));
            opacity: 0.95;
        }

        /* मोबाइल के लिए स्लीक सेटिंग */
        @media (max-width: 768px) {
            .header-brand-name { 
                font-size: 1.25rem; /* मोबाइल पर सर्च बार को जगह देने के लिए एकदम सही साइज़ */
                height: 38px;
                margin-right: 2px;
                letter-spacing: 0px;
            }
        }
        /* एकदम स्लीक और चमकदार टॉप लोडिंग बार */
    .fame-loader-wrapper {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 3px; /* एकदम पतली प्रीमियम लाइन */
        z-index: 9999999; /* हेडर से भी ऊपर */
        pointer-events: none; /* क्लिक को नहीं रोकेगा */
    }
    
    .fame-loader-bar {
        height: 100%;
        width: 0%;
        /* आपके थीम के हिसाब से ब्लू ग्रेडिएंट */
        background: linear-gradient(to right, #1a56db, #2ebfec, #1a56db);
        box-shadow: 0 0 10px rgba(46, 191, 236, 0.8), 0 0 5px rgba(26, 86, 219, 0.8);
        transition: width 0.3s ease, opacity 0.4s ease;
        border-radius: 0 3px 3px 0;
    }
    /* Custom Alert Box CSS */
.fame-alert-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(13, 23, 42, 0.6); /* Navy blue with transparency */
    backdrop-filter: blur(4px); /* Piche ka background blur karega */
    display: none; /* By default hide rahega */
    justify-content: center;
    align-items: center;
    z-index: 9999999; /* Sabse upar dikhega */
}

.fame-alert-box {
    background: #ffffff;
    padding: 35px 30px;
    border-radius: 20px;
    text-align: center;
    max-width: 380px;
    width: 90%;
    box-shadow: 0 20px 50px rgba(0,0,0,0.2);
    animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes popIn {
    0% { transform: scale(0.7); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.fame-alert-icon { font-size: 3.5rem; margin-bottom: 10px; line-height: 1; }
.fame-alert-icon.success { color: #10b981; } /* Green for success */
.fame-alert-icon.error { color: #ef4444; }   /* Red for error */
.fame-alert-icon.warning { color: #fbc02d; } /* Gold for warning */

.fame-alert-title { color: #0d172a; font-weight: 800; margin-bottom: 10px; font-size: 1.5rem; }
.fame-alert-message { color: #64748b; margin-bottom: 25px; font-size: 15px; }

.fame-alert-btn {
    background: #fbc02d; /* Fame Wala Gold */
    color: #0d172a; /* Navy */
    border: none;
    padding: 10px 40px;
    border-radius: 30px;
    font-weight: bold;
    font-size: 16px;
    transition: 0.3s;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(251, 192, 45, 0.3);
}

.fame-alert-btn:hover {
    background: #f9a825;
    transform: translateY(-2px);
}