* {

            margin: 0;

            padding: 0;

            box-sizing: border-box;

        }

        

        :root {

            --bg-primary: #0a0a0a;

            --bg-secondary: #111111;

            --bg-card: #1a1a1a;

            --accent-red: #ff0000;

            --accent-red-dark: #cc0000;

            --text-primary: #ffffff;

            --text-secondary: #a0a0a0;

            --border-color: rgba(255, 255, 255, 0.1);

        }

        

        body {

            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

            background: var(--bg-primary);

            color: var(--text-primary);

            line-height: 1.6;

            overflow-x: hidden;

        }

        

        /* Simplified background with subtle gradient */

        .bg-gradient {

            position: fixed;

            top: 0;

            left: 0;

            width: 100%;

            height: 100%;

            z-index: -1;

            opacity: 0.05;

            background: radial-gradient(circle at 30% 40%, var(--accent-red) 0%, transparent 60%),

                        radial-gradient(circle at 70% 70%, var(--accent-red) 0%, transparent 60%);

        }

        

        /* Added container for layout with sidebar */

        .page-container {

            display: flex;

            max-width: 1400px;

            margin: 0 auto;

            padding: 80px 24px 60px;

            gap: 40px;

            position: relative;

        }

        

        /* Added sticky sidebar navigation */

        .sidebar-nav {

            width: 280px;

            flex-shrink: 0;

            position: sticky;

            top: 100px;

            height: fit-content;

            max-height: calc(100vh - 120px);

            overflow-y: auto;

            background: var(--bg-card);

            border: 1px solid var(--border-color);

            border-radius: 16px;

            padding: 24px;

        }

        

        .sidebar-nav h3 {

            font-size: 14px;

            font-weight: 700;

            text-transform: uppercase;

            letter-spacing: 1px;

            color: var(--text-secondary);

            margin-bottom: 16px;

        }

        

        .nav-list {

            list-style: none;

        }

        

        .nav-item {

            margin-bottom: 4px;

        }

        

        .nav-link {

            display: flex;

            align-items: center;

            justify-content: space-between;

            padding: 10px 12px;

            color: var(--text-secondary);

            text-decoration: none;

            font-size: 14px;

            border-radius: 8px;

            transition: all 0.2s ease;

            cursor: pointer;

        }

        

        .nav-link:hover {

            background: rgba(255, 0, 0, 0.1);

            color: var(--text-primary);

        }

        

        .nav-link.active {

            background: rgba(255, 0, 0, 0.15);

            color: var(--accent-red);

            font-weight: 600;

        }

        

        .nav-link-content {

            display: flex;

            align-items: center;

            gap: 10px;

        }

        

        .nav-count {

            display: inline-flex;

            align-items: center;

            justify-content: center;

            min-width: 22px;

            height: 22px;

            padding: 0 6px;

            background: rgba(255, 255, 255, 0.1);

            border-radius: 6px;

            font-size: 11px;

            font-weight: 600;

        }

        

        .nav-link.active .nav-count {

            background: rgba(255, 0, 0, 0.3);

        }

        

        /* More compact container with better spacing */

        main {

            flex: 1; /* Adjusted for sidebar */

            min-width: 0; /* Needed for flex items */

            /* max-width: 900px; Removed as main is now flexible */

            /* margin: 0 auto; Removed as page-container handles centering */

            /* padding: 80px 24px 60px; Removed as page-container handles padding */

        }

        

        /* Cleaner hero section */

        header {

            text-align: center;

            margin-bottom: 60px;

        }

        

        .faq-badge {

            display: inline-flex;

            align-items: center;

            gap: 8px;

            padding: 8px 20px;

            background: rgba(255, 0, 0, 0.1);

            border: 1px solid rgba(255, 0, 0, 0.3);

            border-radius: 50px;

            font-size: 12px;

            font-weight: 600;

            color: var(--accent-red);

            margin-bottom: 20px;

            text-transform: uppercase;

            letter-spacing: 1.2px;

        }

        

        h1 {

            font-size: clamp(32px, 5vw, 48px);

            font-weight: 800;

            margin-bottom: 16px;

            line-height: 1.2;

        }

        

        header p {

            font-size: 18px;

            color: var(--text-secondary);

            max-width: 600px;

            margin: 0 auto 32px;

        }

        

        /* Refined search box */

        .search-container {

            max-width: 600px;

            margin: 0 auto 50px;

            position: relative;

        }

        

        .search-box {

            width: 100%;

            padding: 16px 20px 16px 52px;

            background: var(--bg-card);

            border: 1px solid var(--border-color);

            border-radius: 12px;

            font-size: 16px;

            color: var(--text-primary);

            outline: none;

            transition: all 0.3s ease;

        }

        

        .search-box:focus {

            border-color: var(--accent-red);

            box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.1);

        }

        

        .search-box::placeholder {

            color: var(--text-secondary);

        }

        

        .search-icon {

            position: absolute;

            left: 18px;

            top: 50%;

            transform: translateY(-50%);

            color: var(--text-secondary);

            pointer-events: none;

            transition: color 0.3s ease;

        }

        

        .search-container:focus-within .search-icon {

            color: var(--accent-red);

        }

        

        /* Added popular questions section */

        .popular-section {

            background: linear-gradient(135deg, rgba(255, 0, 0, 0.1) 0%, rgba(255, 0, 0, 0.05) 100%);

            border: 1px solid rgba(255, 0, 0, 0.3);

            border-radius: 16px;

            padding: 32px;

            margin-bottom: 50px;

        }

        

        .popular-header {

            display: flex;

            align-items: center;

            gap: 12px;

            margin-bottom: 24px;

        }

        

        .popular-icon {

            width: 36px;

            height: 36px;

            display: flex;

            align-items: center;

            justify-content: center;

            background: rgba(255, 0, 0, 0.2);

            border-radius: 10px;

            color: var(--accent-red);

        }

        

        .popular-header h2 {

            font-size: 20px;

            font-weight: 700;

            margin: 0;

        }

        

        .popular-questions {

            display: grid;

            gap: 12px;

        }

        

        .popular-question-link {

            display: flex;

            align-items: center;

            gap: 12px;

            padding: 14px 18px;

            background: rgba(0, 0, 0, 0.3);

            border: 1px solid rgba(255, 255, 255, 0.1);

            border-radius: 10px;

            color: var(--text-primary);

            text-decoration: none;

            font-size: 15px;

            transition: all 0.2s ease;

            cursor: pointer;

        }

        

        .popular-question-link:hover {

            background: rgba(0, 0, 0, 0.5);

            border-color: rgba(255, 0, 0, 0.4);

            transform: translateX(4px);

        }

        

        .popular-question-icon {

            color: var(--accent-red);

            flex-shrink: 0;

        }

        

        /* Better organized category sections */

        section {

            margin-bottom: 48px;

            scroll-margin-top: 100px; /* For sidebar navigation */

        }

        

        .category-header {

            display: flex;

            align-items: center;

            gap: 14px;

            margin-bottom: 20px;

            padding-bottom: 12px;

            border-bottom: 1px solid rgba(255, 0, 0, 0.2);

        }

        

        .category-icon {

            width: 40px;

            height: 40px;

            display: flex;

            align-items: center;

            justify-content: center;

            background: rgba(255, 0, 0, 0.15);

            border-radius: 10px;

            color: var(--accent-red);

            flex-shrink: 0;

        }

        

        /* Only style the section titles inside the FAQ category headers */

.category-header h2 {

    font-size: 22px;

    font-weight: 700;

    color: var(--text-primary);

    margin: 0;

    flex: 1;

}



        

        /* Added question count badge to category headers */

        .category-count {

            display: inline-flex;

            align-items: center;

            justify-content: center;

            min-width: 28px;

            height: 28px;

            padding: 0 8px;

            background: rgba(255, 0, 0, 0.2);

            border-radius: 8px;

            font-size: 13px;

            font-weight: 600;

            color: var(--accent-red);

        }

        

        /* Cleaner FAQ items with better spacing */

        article {

            background: var(--bg-card);

            border: 1px solid var(--border-color);

            border-radius: 12px;

            margin-bottom: 12px;

            overflow: hidden;

            transition: all 0.3s ease;

        }

        

        article:hover {

            border-color: rgba(255, 0, 0, 0.3);

            transform: translateY(-2px);

        }

        

        article.active {

            border-color: rgba(255, 0, 0, 0.5);

            box-shadow: 0 4px 20px rgba(255, 0, 0, 0.15);

        }

        

        .faq-question {

            padding: 20px 24px;

            cursor: pointer;

            display: flex;

            justify-content: space-between;

            align-items: center;

            gap: 16px;

            user-select: none;

        }

        

        .faq-question-text {

            font-size: 16px;

            font-weight: 600;

            color: var(--text-primary);

            flex: 1;

        }

        

        .faq-icon-wrapper {

            width: 28px;

            height: 28px;

            display: flex;

            align-items: center;

            justify-content: center;

            background: rgba(255, 0, 0, 0.1);

            border-radius: 6px;

            color: var(--accent-red);

            transition: all 0.3s ease;

            flex-shrink: 0;

        }

        

        article.active .faq-icon-wrapper {

            transform: rotate(180deg);

            background: rgba(255, 0, 0, 0.2);

        }

        

        .faq-answer {

            max-height: 0;

            overflow: hidden;

            transition: max-height 0.4s ease;

        }

        

        article.active .faq-answer {

            max-height: 1000px;

        }

        

        .faq-answer-content {

            padding: 0 24px 20px;

            font-size: 15px;

            line-height: 1.7;

            color: var(--text-secondary);

        }

        

        .faq-answer-content p {

            margin-bottom: 12px;

        }

        

        .faq-answer-content p:last-child {

            margin-bottom: 0;

        }

        

        .faq-answer-content ul {

            margin: 12px 0;

            padding-left: 20px;

        }

        

        .faq-answer-content li {

            margin-bottom: 8px;

        }

        

        .faq-answer-content li::marker {

            color: var(--accent-red);

        }

        

        .faq-answer-content strong {

            color: var(--text-primary);

            font-weight: 600;

        }

        

        /* Refined CTA section */

        .faq-cta {

            text-align: center;

            padding: 50px 40px;

            background: rgba(255, 0, 0, 0.08);

            border: 1px solid rgba(255, 0, 0, 0.3);

            border-radius: 16px;

            margin-top: 60px;

        }

        

        .faq-cta-icon {

            width: 56px;

            height: 56px;

            margin: 0 auto 20px;

            display: flex;

            align-items: center;

            justify-content: center;

            background: rgba(255, 0, 0, 0.15);

            border-radius: 12px;

            color: var(--accent-red);

        }

        

        .faq-cta h2 {

            font-size: 28px;

            font-weight: 700;

            margin-bottom: 12px;

        }

        

        .faq-cta p {

            font-size: 16px;

            color: var(--text-secondary);

            margin-bottom: 28px;

        }

        

        .cta-button {

            display: inline-flex;

            align-items: center;

            gap: 10px;

            padding: 14px 32px;

            background: var(--accent-red);

            color: white;

            text-decoration: none;

            font-weight: 600;

            font-size: 15px;

            border-radius: 10px;

            transition: all 0.3s ease;

        }

        

        .cta-button:hover {

            background: var(--accent-red-dark);

            transform: translateY(-2px);

            box-shadow: 0 6px 20px rgba(255, 0, 0, 0.3);

        }

        

        /* No Results */

        .no-results {

            text-align: center;

            padding: 50px 20px;

            display: none;

        }

        

        .no-results.show {

            display: block;

        }

        

        .no-results-icon {

            width: 70px;

            height: 70px;

            margin: 0 auto 20px;

            display: flex;

            align-items: center;

            justify-content: center;

            background: rgba(255, 0, 0, 0.1);

            border-radius: 50%;

            color: var(--accent-red);

        }

        

        .no-results h3 {

            font-size: 22px;

            margin-bottom: 10px;

        }

        

        .no-results p {

            color: var(--text-secondary);

            font-size: 15px;

        }

        

        /* Scroll to top button */

        .scroll-top {

            position: fixed;

            bottom: 32px;

            right: 32px;

            width: 50px;

            height: 50px;

            background: var(--accent-red);

            border: none;

            border-radius: 50%;

            color: white;

            cursor: pointer;

            display: flex;

            align-items: center;

            justify-content: center;

            opacity: 0;

            visibility: hidden;

            transition: all 0.3s ease;

            box-shadow: 0 4px 15px rgba(255, 0, 0, 0.3);

            z-index: 1000;

        }

        

        .scroll-top.show {

            opacity: 1;

            visibility: visible;

        }

        

        .scroll-top:hover {

            transform: translateY(-4px);

            box-shadow: 0 6px 20px rgba(255, 0, 0, 0.4);

        }

        

        /* Responsive design with mobile-first approach */

        @media (max-width: 1024px) {

            .sidebar-nav {

                display: none; /* Hide sidebar on larger screens */

            }

            

            .page-container {

                padding: 60px 20px 40px; /* Adjust padding */

            }

        }

        

        @media (max-width: 768px) {

            .page-container {

                padding: 60px 16px 40px;

            }

            

            header {

                margin-bottom: 40px;

            }

            

            h1 {

                font-size: 28px;

            }

            

            header p {

                font-size: 16px;

            }

            

            .search-box {

                padding: 14px 18px 14px 48px;

                font-size: 15px;

            }

            

            /* Adjusted popular questions section for smaller screens */

            .popular-section {

                padding: 24px 20px;

                margin-bottom: 40px;

            }

            

            .popular-header h2 {

                font-size: 18px;

            }

            

            .popular-question-link {

                padding: 12px 16px;

                font-size: 14px;

            }

            

            .category-header {

                gap: 12px;

            }

            

            .category-icon {

                width: 36px;

                height: 36px;

            }

            

            h2 {

                font-size: 20px;

            }

            

            /* Adjusted category count badge for smaller screens */

            .category-count {

                min-width: 24px;

                height: 24px;

                font-size: 12px;

            }

            

            .faq-question {

                padding: 18px 20px;

            }

            

            .faq-question-text {

                font-size: 15px;

            }

            

            .faq-answer-content {

                padding: 0 20px 18px;

                font-size: 14px;

            }

            

            .faq-cta {

                padding: 40px 24px;

                margin-top: 50px;

            }

            

            .faq-cta h2 {

                font-size: 24px;

            }

            

            .scroll-top {

                bottom: 20px;

                right: 20px;

                width: 44px;

                height: 44px;

            }

        }