body {
            background-color: #FFFFFF;
            color: #0A0A0A;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            overflow-x: hidden; /* Prevent any horizontal scroll */
        }

        /* Large Soft Red Glow */
        .hero-glow {
            position: absolute;
            top: -1300px;
            left: 50%;
            transform: translateX(-50%);
            width: 2000px;
            height: 2000px;
            background: radial-gradient(circle, rgba(203,34,7,0.4) 0%, rgba(255,255,255,0.1) 65%);
            pointer-events: none;
            z-index: 0;
        }

        .hero-grid {
            background-size: 120px 120px;
            background-image: 
                linear-gradient(to right, rgba(0,0,0,0.035) 1px, transparent 1px),
                linear-gradient(to bottom, rgba(0,0,0,0.035) 1px, transparent 1px);
            mask-image: linear-gradient(to bottom, black 0%, transparent 85%);
            -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 85%);
            z-index: -1;
        }

        .glass-header {
            background-color: rgba(255, 255, 255, 0.75);
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
        }

        .bounce-arrow {
            animation: bounce-custom 2s ease-in-out infinite;
        }

        @keyframes bounce-custom {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(6px); }
        }

        /* Button Gradients */
        .btn-primary {
            background: linear-gradient(180deg, #D92B0D 0%, #B81D05 100%);
            box-shadow: 0 2px 10px rgba(203,34,7,0.25), inset 0 1px 0 rgba(255,255,255,0.2);
        }
        .btn-primary:hover {
            background: linear-gradient(180deg, #E63312 0%, #C82106 100%);
            box-shadow: 0 4px 15px rgba(203,34,7,0.35), inset 0 1px 0 rgba(255,255,255,0.2);
        }

        /* Intersection Observer Animations */
        .reveal {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
        }
        .reveal.active {
            opacity: 1;
            transform: translateY(0);
        }

        /* Accordion transition */
        .accordion-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .accordion-chevron {
            transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .accordion-item.active .accordion-chevron {
            transform: rotate(180deg);
        }


 @keyframes widget-eq {
        0%, 100% { height: 6px; }
        50% { height: 20px; }
    }
    @keyframes widget-shimmer {
        0% { background-position: 200% 0; }
        100% { background-position: -200% 0; }
    }
    @keyframes widget-pulse-ring {
        0% { transform: scale(0.8); opacity: 0.8; }
        100% { transform: scale(2.2); opacity: 0; }
    }



    .changelog-sidebar::-webkit-scrollbar,
        .changelog-content::-webkit-scrollbar {
            width: 4px;
        }
        .changelog-sidebar::-webkit-scrollbar-track,
        .changelog-content::-webkit-scrollbar-track {
            background: transparent;
        }
        .changelog-sidebar::-webkit-scrollbar-thumb,
        .changelog-content::-webkit-scrollbar-thumb {
            background: rgba(0,0,0,0.08);
            border-radius: 99px;
        }
        .changelog-sidebar::-webkit-scrollbar-thumb:hover,
        .changelog-content::-webkit-scrollbar-thumb:hover {
            background: rgba(0,0,0,0.15);
        }

        /* Tab states */
        .changelog-tab {
            background: transparent;
        }
        .changelog-tab:hover {
            background: rgba(0,0,0,0.03);
        }
        .changelog-tab.active {
            background: white;
            box-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.04);
        }
        .changelog-tab.active .tab-dot {
            background-color: #CB2207;
            box-shadow: 0 0 6px rgba(203,34,7,0.4);
        }
        .changelog-tab.active .tab-title {
            color: #CB2207;
        }

        /* Panel fade transition */
        .changelog-panel {
            animation: changelogFadeIn 0.25s ease-out;
        }
        @keyframes changelogFadeIn {
            from { opacity: 0; transform: translateY(6px); }
            to { opacity: 1; transform: translateY(0); }
        }