/* Base Strict Monochrome Theme */
        body {
            background-color: #000000;
            color: #FFFFFF;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        /* Card & Surface Gradient (Lighter tone, with border) */
        .card-gradient {
            background: linear-gradient(180deg, #161616 0%, #0d0d0d 100%);
            border: 1px solid rgba(255, 255, 255, 0.12);
        }

        /* Buttons */
        .btn-primary {
            background-color: #FFFFFF;
            color: #000000;
            transition: transform 0.2s ease, opacity 0.2s ease;
        }
        .btn-primary:hover {
            opacity: 0.9;
            transform: scale(1.02);
        }
        .btn-secondary {
            background-color: transparent;
            color: #FFFFFF;
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
            transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
        }
        .btn-secondary:hover {
            background-color: #FFFFFF;
            color: #000000;
            box-shadow: inset 0 0 0 1px #FFFFFF;
        }

        /* Hero Background Effects */
        .hero-bg {
            position: absolute;
            inset: 0;
            z-index: 0;
            overflow: hidden;
            pointer-events: none;
        }
        
        .hero-glow {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 80vw;
            height: 60vh;
            background: radial-gradient(ellipse at top center, #161616 0%, transparent 60%);
        }

        .hero-grid {
            position: absolute;
            inset: 0;
            background-size: 120px 120px;
            background-image: 
                linear-gradient(to right, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
                linear-gradient(to bottom, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
            mask-image: radial-gradient(ellipse 90% 100% at 50% 0%, black 30%, transparent 80%);
            -webkit-mask-image: radial-gradient(ellipse 90% 100% at 50% 0%, black 30%, transparent 80%);
        }

        /* H1 Glitch Effect */
        .glitch {
            position: relative;
            display: inline-block;
        }
        .glitch::before, .glitch::after {
            content: attr(data-text);
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #000000;
            color: #FFFFFF;
            overflow: hidden;
        }
        .glitch::before {
            left: 2px;
            animation: glitch-slice 3s infinite linear alternate-reverse;
        }
        .glitch::after {
            left: -2px;
            animation: glitch-slice 2.5s infinite linear alternate-reverse;
            animation-delay: 0.2s;
        }
        @keyframes glitch-slice {
            0% { clip-path: inset(10% 0 80% 0); transform: translate(-2px, 1px); }
            5% { clip-path: inset(40% 0 10% 0); transform: translate(2px, -1px); }
            10% { clip-path: inset(80% 0 5% 0); transform: translate(-1px, 0); }
            15% { clip-path: inset(100% 0 0% 0); transform: translate(0); }
            100% { clip-path: inset(100% 0 0% 0); transform: translate(0); }
        }

        /* Intersection Observer Animations */
        .reveal {
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .reveal.active {
            opacity: 1;
            transform: translateY(0);
        }

        /* Floating Animation */
        .float-anim {
            animation: floating 4s ease-in-out infinite;
        }
        @keyframes floating {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
            100% { transform: translateY(0px); }
        }


/* Premium Animated Status Cards */
.status-card-new {
    background: linear-gradient(180deg, #101010 0%, #050505 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
    border-radius: 14px;
    position: relative;
    overflow: hidden;
    transition: border-color 0.3s ease;
}
.status-card-new:hover {
    border-color: rgba(255, 255, 255, 0.25);
}

/* Animations */
@keyframes spin-slow {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.spin-dashed {
    animation: spin-slow 4s linear infinite;
}

/* SVG Line Chart Transition */
#live-chart-path, #live-chart-fill {
    transition: d 0.15s linear;
}

/* Bars Transition */
.js-bar {
    transition: height 0.3s ease-out;
}


/* Hide Scrollbar for mobile nav */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Nav Buttons */
.cl-nav-btn {
    color: rgba(255,255,255,0.45);
    background: transparent;
    border: 1px solid transparent;
}
.cl-nav-btn:hover {
    color: rgba(255,255,255,0.8);
    background: rgba(255,255,255,0.03);
}
.cl-nav-btn.active {
    color: #FFFFFF;
    background: linear-gradient(90deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.01) 100%);
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.cl-nav-btn.active .cl-dot {
    background: #FFFFFF;
    box-shadow: 0 0 8px #fff;
}

/* List Items Container */
.cl-item {
    display: flex;
    align-items: flex-start; /* Keeps text aligned at the top if it wraps to 2 lines */
    gap: 10px;
    padding: 6px 0; /* Compact padding */
    border-bottom: 1px solid rgba(255,255,255,0.03);
}
.cl-item:last-child { border-bottom: none; }

/* Icon Box & Badge - Strictly aligned */
.cl-item-icon {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.cl-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border: 1px solid;
    height: 20px; /* Exact same height as icon */
    line-height: 1;
    flex-shrink: 0;
}

/* Colors for Badges and Icons (Using currentColor in SVG makes them match text color) */
.cl-item-icon.added, .cl-badge-added {
    color: #4ade80; 
    background: rgba(74, 222, 128, 0.1); 
    border-color: rgba(74, 222, 128, 0.25);
}
.cl-item-icon.fixed, .cl-badge-fixed {
    color: #fb923c; 
	
    background: rgba(251, 146, 60, 0.1); 
    border-color: rgba(251, 146, 60, 0.25);
}
.cl-badge-fixed  {
margin-left: 30px; 
}
.cl-item-icon.removed, .cl-badge-removed {
    color: #f87171; 
    background: rgba(248, 113, 113, 0.1); 
    border-color: rgba(248, 113, 113, 0.25);
}
.
.cl-item-icon.improved, .cl-badge-improved {
    color: #60a5fa; 
    background: rgba(96, 165, 250, 0.1); 
    border-color: rgba(96, 165, 250, 0.25);
}

/* Animation */
#cl-content > div { animation: clFadeIn 0.25s cubic-bezier(0.4, 0, 0.2, 1); }
@keyframes clFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}


.faq-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-panel.open {
    grid-template-rows: 1fr;
}
.faq-chevron {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-toggle[aria-expanded="true"] .faq-chevron {
    transform: rotate(180deg);
    color: #ffffff;
}