@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700;800&display=swap');
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        :root {
            --primary: #6366f1;
            --primary-dark: #4f46e5;
            --sidebar-bg: #5b5fc7;
            --secondary: #f59e0b;
            --accent: #10b981;
            --bg-main: #f8f9fc;
            --bg-card: #ffffff;
            --text-primary: #1e293b;
            --text-secondary: #64748b;
            --border: #e2e8f0;
        }
        
        /* Light Theme (Default) */
        body[data-theme="light"] {
            --bg-main: #f8f9fc;
            --bg-card: #ffffff;
            --text-primary: #1e293b;
            --text-secondary: #64748b;
            --border: #e2e8f0;
        }
        
        /* Dark Theme */
        body[data-theme="dark"] {
            --bg-main: #0f172a;
            --bg-card: #1e293b;
            --text-primary: #f1f5f9;
            --text-secondary: #cbd5e1;
            --border: #334155;
        }
        
        body[data-theme="dark"] .sidebar {
            background: linear-gradient(180deg, #334155 0%, #1e293b 50%, #0f172a 100%);
        }
        
        body[data-theme="dark"] .top-header {
            background: #1e293b;
            border-bottom-color: #334155;
        }
        
        body[data-theme="dark"] .mobile-header {
            background: #1e293b;
            border-bottom-color: #334155;
        }
        
        /* Warm Theme */
        body[data-theme="warm"] {
            --bg-main: #fef3c7;
            --bg-card: #fffbeb;
            --text-primary: #78350f;
            --text-secondary: #92400e;
            --border: #fde68a;
        }
        
        body[data-theme="warm"] .sidebar {
            background: linear-gradient(180deg, #f59e0b 0%, #d97706 50%, #b45309 100%);
        }
        
        body[data-theme="warm"] .top-header {
            background: #fffbeb;
            border-bottom-color: #fde68a;
        }
        
        body[data-theme="warm"] .mobile-header {
            background: #fffbeb;
            border-bottom-color: #fde68a;
        }
        
        body {
            font-family: 'Inter', sans-serif;
            background: var(--bg-main);
            color: var(--text-primary);
            overflow-x: hidden;
            transition: background-color 0.3s ease, color 0.3s ease;
        }
        
        h1, h2, h3, h4, h5 {
            font-family: 'Poppins', sans-serif;
        }
        
        /* Add transition to all elements that use theme colors */
        .top-header,
        .mobile-header,
        .hero-search-section,
        .service-card,
        .quick-card,
        .stat-card,
        .cta-section,
        .search-box,
        .action-btn,
        .sidebar-dropdown,
        .settings-dropdown-sidebar,
        .dropdown-item,
        .sidebar-dropdown-item {
            transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
        }
        
        /* Left Sidebar */
        .sidebar {
            position: fixed;
            left: 0;
            top: 0;
            width: 80px;
            height: 100vh;
            background: linear-gradient(180deg, #6366f1 0%, #5b5fc7 50%, #4f46e5 100%);
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px 0;
            z-index: 100;
            box-shadow: 4px 0 20px rgba(99, 102, 241, 0.15);
        }
        
        .sidebar-btn {
            width: 48px;
            height: 48px;
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            color: rgba(255, 255, 255, 0.7);
            margin-bottom: 12px;
            position: relative;
            border: none;
            background: transparent;
        }
        
        .sidebar-btn:first-child {
            margin-top: 0;
        }
        
        .sidebar-btn:hover {
            background: rgba(255, 255, 255, 0.15);
            color: white;
            transform: scale(1.1);
        }
        
        .sidebar-btn.active {
            background: rgba(255, 255, 255, 0.25);
            color: white;
        }
        
        .sidebar-btn svg {
            width: 24px;
            height: 24px;
        }
        
        .sidebar-spacer {
            flex: 1;
        }
        
        /* Settings Dropdown in Sidebar */
        .settings-dropdown-sidebar {
            position: fixed;
            left: 96px;
            bottom: 80px;
            background: var(--bg-card);
            border: 2px solid var(--border);
            border-radius: 16px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
            min-width: 220px;
            z-index: 1000;
            opacity: 0;
            pointer-events: none;
            transform: translateX(-10px);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .settings-dropdown-sidebar.active {
            opacity: 1;
            pointer-events: all;
            transform: translateX(0);
        }
        
        /* Sidebar Dropdown (Services) */
        .sidebar-dropdown {
            position: fixed;
            left: 96px;
            top: 80px;
            background: var(--bg-card);
            border: 2px solid var(--border);
            border-radius: 16px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
            min-width: 240px;
            z-index: 1000;
            opacity: 0;
            pointer-events: none;
            transform: translateX(-10px);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .sidebar-dropdown.active {
            opacity: 1;
            pointer-events: all;
            transform: translateX(0);
        }
        
        .sidebar-dropdown-header {
            padding: 16px 20px;
            border-bottom: 1px solid var(--border);
        }
        
        .sidebar-dropdown-title {
            font-size: 14px;
            font-weight: 700;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        
        .sidebar-dropdown-items {
            padding: 8px;
        }
        
        .sidebar-dropdown-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 16px;
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.2s;
            color: var(--text-primary);
            text-decoration: none;
            font-size: 15px;
            font-weight: 600;
        }
        
        .sidebar-dropdown-item:hover {
            background: var(--bg-main);
            color: var(--primary);
        }
        
        .sidebar-dropdown-item svg {
            width: 20px;
            height: 20px;
        }
        
        /* Theme Modal */
        .theme-modal-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 2000;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s;
        }
        
        .theme-modal-overlay.active {
            opacity: 1;
            pointer-events: all;
        }
        
        .theme-modal {
            background: var(--bg-card);
            border-radius: 24px;
            padding: 32px;
            max-width: 500px;
            width: 90%;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            transform: scale(0.9);
            transition: transform 0.3s, background-color 0.3s ease;
        }
        
        .theme-modal-overlay.active .theme-modal {
            transform: scale(1);
        }
        
        .theme-modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 32px;
        }
        
        .theme-modal-title {
            font-size: 24px;
            font-weight: 800;
            color: var(--text-primary);
        }
        
        .theme-modal-close {
            width: 36px;
            height: 36px;
            border-radius: 8px;
            background: var(--bg-main);
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
        }
        
        .theme-modal-close:hover {
            background: var(--border);
        }
        
        .theme-modal-close svg {
            width: 20px;
            height: 20px;
            color: var(--text-primary);
        }
        
        .theme-options {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
        }
        
        .theme-option {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .theme-preview {
            width: 100%;
            aspect-ratio: 1;
            border-radius: 16px;
            border: 3px solid transparent;
            transition: all 0.2s;
        }
        
        .theme-option:hover .theme-preview {
            transform: scale(1.05);
        }
        
        .theme-option.active .theme-preview {
            border-color: var(--primary);
        }
        
        .theme-preview.light {
            background: linear-gradient(135deg, #f8f9fc 0%, #ffffff 100%);
            border: 1px solid #e2e8f0;
        }
        
        .theme-preview.dark {
            background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
        }
        
        .theme-preview.warm {
            background: linear-gradient(135deg, #fef3c7 0%, #fffbeb 100%);
            border: 1px solid #fde68a;
        }
        
        .theme-label {
            font-size: 16px;
            font-weight: 600;
            color: var(--text-primary);
            transition: color 0.3s ease;
        }
        
        /* Upgrade Modal */
        .upgrade-modal-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.7);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 3000;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s;
        }
        
        .upgrade-modal-overlay.active {
            opacity: 1;
            pointer-events: all;
        }
        
        .upgrade-modal {
            background: var(--bg-card);
            border-radius: 24px;
            padding: 40px;
            max-width: 900px;
            width: 90%;
            max-height: 90vh;
            overflow-y: auto;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            transform: scale(0.9);
            transition: transform 0.3s, background-color 0.3s ease;
        }
        
        .upgrade-modal-overlay.active .upgrade-modal {
            transform: scale(1);
        }
        
        .upgrade-modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 32px;
        }
        
        .upgrade-modal-title {
            font-size: 28px;
            font-weight: 800;
            color: var(--text-primary);
        }
        
        .upgrade-modal-close {
            width: 36px;
            height: 36px;
            border-radius: 8px;
            background: var(--bg-main);
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
        }
        
        .upgrade-modal-close:hover {
            background: var(--border);
        }
        
        .limit-reached-message {
            text-align: center;
            margin-bottom: 40px;
            padding: 24px;
            background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
            border-radius: 16px;
        }
        
        .limit-icon {
            font-size: 48px;
            margin-bottom: 16px;
        }
        
        .limit-reached-message h3 {
            font-size: 24px;
            font-weight: 800;
            color: #78350f;
            margin-bottom: 8px;
        }
        
        .limit-reached-message p {
            font-size: 16px;
            color: #92400e;
        }
        
        .pricing-comparison {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 24px;
        }
        
        .pricing-card {
            background: var(--bg-main);
            border: 3px solid var(--border);
            border-radius: 20px;
            padding: 32px 24px;
            position: relative;
            transition: all 0.3s;
        }
        
        .pricing-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
        }
        
        .premium-card {
            border-color: var(--primary);
            background: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, rgba(79, 70, 229, 0.05) 100%);
        }
        
        .plan-badge {
            display: inline-block;
            padding: 6px 12px;
            background: var(--text-secondary);
            color: white;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 16px;
        }
        
        .premium-badge {
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
        }
        
        .pricing-card h3 {
            font-size: 24px;
            font-weight: 800;
            color: var(--text-primary);
            margin-bottom: 16px;
        }
        
        .plan-price {
            font-size: 40px;
            font-weight: 900;
            color: var(--primary);
            margin-bottom: 24px;
        }
        
        .plan-price span {
            font-size: 16px;
            font-weight: 600;
            color: var(--text-secondary);
        }
        
        .plan-features {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        
        .plan-features li {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 0;
            font-size: 15px;
            font-weight: 600;
            color: var(--text-primary);
            border-bottom: 1px solid var(--border);
        }
        
        .plan-features li:last-child {
            border-bottom: none;
        }
        
        .plan-features li svg {
            color: var(--accent);
            flex-shrink: 0;
        }
        
        .plan-features li.disabled {
            opacity: 0.5;
        }
        
        .plan-features li.disabled svg {
            color: var(--text-secondary);
        }
        
        .upgrade-btn {
            width: 100%;
            margin-top: 24px;
            padding: 16px 24px;
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
            color: white;
            border: none;
            border-radius: 12px;
            font-size: 16px;
            font-weight: 700;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            transition: all 0.3s;
        }
        
        .upgrade-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(99, 102, 241, 0.4);
        }
        
        /* Usage Indicator */
        .usage-indicator {
            position: fixed;
            top: 100px;
            right: 20px;
            background: var(--bg-card);
            border: 2px solid var(--border);
            border-radius: 50px;
            padding: 12px 20px;
            display: flex;
            align-items: center;
            gap: 12px;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
            z-index: 500;
            transition: all 0.3s;
            cursor: pointer;
        }
        
        .usage-indicator:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
        }
        
        .usage-icon {
            font-size: 20px;
        }
        
        .usage-text {
            font-size: 14px;
            font-weight: 700;
            color: var(--text-primary);
        }
        
        .usage-indicator.warning {
            border-color: var(--secondary);
            animation: pulse 2s infinite;
        }
        
        .usage-indicator.danger {
            border-color: #ef4444;
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0%, 100% {
                box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
            }
            50% {
                box-shadow: 0 4px 16px rgba(239, 68, 68, 0.4);
            }
        }
        
        /* Main Container */
        .main-container {
            margin-left: 80px;
            min-height: 100vh;
        }
        
        /* Top Header */
        .top-header {
            background: var(--bg-card);
            padding: 16px 40px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid var(--border);
        }
        
        .header-logo-area {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .header-logo-icon {
            width: 44px;
            height: 44px;
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 800;
            font-size: 20px;
            color: white;
            font-family: 'Poppins', sans-serif;
        }
        
        .header-logo-text {
            font-size: 24px;
            font-weight: 800;
            color: var(--primary);
            font-family: 'Poppins', sans-serif;
        }
        
        .header-right {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .profile-btn {
            width: 44px;
            height: 44px;
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 800;
            font-size: 18px;
            color: white;
            cursor: pointer;
            border: none;
        }
        
        /* Content Area */
        .content-area {
            padding: 40px;
            max-width: 1400px;
            margin: 0 auto;
        }
        
        /* Hero Search Section */
        .hero-search-section {
            background: var(--bg-card);
            border-radius: 24px;
            padding: 48px 40px;
            margin-bottom: 40px;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
        }
        
        .hero-title {
            font-size: 32px;
            font-weight: 900;
            margin-bottom: 12px;
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 50%, var(--accent) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-align: center;
            transition: opacity 0.3s ease;
        }
        
        .hero-subtitle {
            font-size: 16px;
            color: var(--text-secondary);
            text-align: center;
            margin-bottom: 32px;
            line-height: 1.6;
            transition: opacity 0.3s ease;
        }
        
        .search-box {
            background: var(--bg-main);
            border: 2px solid var(--border);
            border-radius: 16px;
            padding: 16px 24px;
            display: flex;
            align-items: center;
            gap: 16px;
            margin-bottom: 20px;
            transition: all 0.3s;
            min-height: 80px;
        }
        
        .search-box:focus-within {
            border-color: var(--primary);
            box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
        }
        
        /* Learning Mode Dropdown */
        .learning-mode-dropdown-wrapper {
            position: relative;
        }
        
        .learning-mode-btn {
            background: transparent;
            border: none;
            padding: 8px 12px;
            border-radius: 10px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 12px;
            transition: all 0.2s;
            min-width: 220px;
        }
        
        .learning-mode-btn:hover {
            background: var(--bg-card);
        }
        
        .learning-mode-content {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            flex: 1;
        }
        
        .learning-mode-title {
            font-size: 16px;
            font-weight: 700;
            color: var(--text-primary);
            display: block;
        }
        
        .learning-mode-subtitle {
            font-size: 13px;
            color: var(--text-secondary);
            display: block;
        }
        
        .mode-dropdown-arrow {
            color: var(--text-secondary);
            transition: transform 0.3s;
            flex-shrink: 0;
        }
        
        .learning-mode-btn.active .mode-dropdown-arrow {
            transform: rotate(180deg);
        }
        
        /* Learning Mode Menu */
        .learning-mode-menu {
            position: absolute;
            top: calc(100% + 8px);
            left: 0;
            background: var(--bg-card);
            border: 2px solid var(--border);
            border-radius: 16px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
            min-width: 320px;
            z-index: 200;
            opacity: 0;
            pointer-events: none;
            transform: translateY(-10px);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .learning-mode-menu.active {
            opacity: 1;
            pointer-events: all;
            transform: translateY(0);
        }
        
        .mode-option {
            padding: 12px 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            cursor: pointer;
            transition: all 0.2s;
            border-radius: 12px;
            margin: 4px;
        }
        
        .mode-option:hover {
            background: var(--bg-main);
        }
        
        .mode-option.selected {
            background: var(--bg-main);
        }
        
        .mode-info {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }
        
        .mode-name {
            font-size: 15px;
            font-weight: 700;
            color: var(--text-primary);
        }
        
        .mode-desc {
            font-size: 13px;
            color: var(--text-secondary);
        }
        
        .mode-check {
            color: var(--primary);
            opacity: 0;
            transition: opacity 0.2s;
            flex-shrink: 0;
        }
        
        .mode-option.selected .mode-check {
            opacity: 1;
        }
        
        .search-icon {
            color: var(--text-secondary);
        }
        
        .search-input {
            flex: 1;
            border: none;
            background: transparent;
            font-size: 16px;
            color: var(--text-primary);
            outline: none;
            font-family: 'Inter', sans-serif;
        }
        
        .search-input::placeholder {
            color: var(--text-secondary);
        }
        
        .search-actions {
            display: flex;
            gap: 12px;
            align-items: center;
            flex-wrap: wrap;
        }
        
        .action-btn {
            background: var(--bg-card);
            border: 2px solid var(--border);
            padding: 10px 20px;
            border-radius: 10px;
            font-weight: 600;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            gap: 8px;
            color: var(--text-primary);
        }
        
        .action-btn:hover {
            border-color: var(--primary);
            color: var(--primary);
        }
        
        /* Product Dropdown Buttons */
        .product-dropdown-wrapper {
            position: relative;
        }
        
        .product-btn {
            background: var(--primary);
            color: white;
            border: none;
            padding: 10px 16px;
            border-radius: 10px;
            font-weight: 600;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            gap: 8px;
            position: relative;
        }
        
        .product-btn:hover {
            background: var(--primary-dark);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
        }
        
        .product-btn.selected {
            background: var(--accent);
            box-shadow: 0 4px 16px rgba(16, 185, 129, 0.4);
        }
        
        .product-btn.selected::after {
            content: '✓';
            position: absolute;
            top: -4px;
            right: -4px;
            width: 20px;
            height: 20px;
            background: var(--secondary);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: 800;
        }
        
        .product-btn svg {
            color: white;
        }
        
        .dropdown-arrow {
            transition: transform 0.3s;
        }
        
        .product-btn.active .dropdown-arrow {
            transform: rotate(180deg);
        }
        
        .product-dropdown {
            position: absolute;
            top: calc(100% + 8px);
            left: 0;
            background: var(--bg-card);
            border: 2px solid var(--border);
            border-radius: 12px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
            min-width: 180px;
            z-index: 100;
            opacity: 0;
            pointer-events: none;
            transform: translateY(-10px);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .product-dropdown.active {
            opacity: 1;
            pointer-events: all;
            transform: translateY(0);
        }
        
        .product-dropdown-item {
            display: block;
            padding: 12px 16px;
            color: var(--text-primary);
            text-decoration: none;
            font-weight: 600;
            font-size: 14px;
            transition: all 0.2s;
            border-radius: 8px;
            margin: 4px;
            position: relative;
        }
        
        .product-dropdown-item:hover {
            background: var(--bg-main);
            color: var(--primary);
        }
        
        .product-dropdown-item.selected {
            background: var(--primary);
            color: white;
        }
        
        .product-dropdown-item.selected::before {
            content: '✓';
            position: absolute;
            left: 8px;
            font-weight: 800;
        }
        
        .product-dropdown-item.selected {
            padding-left: 28px;
        }
        
        /* Services Grid */
        .services-section {
            margin-bottom: 40px;
        }
        
        .section-title {
            font-size: 20px;
            font-weight: 700;
            margin-bottom: 24px;
            color: var(--text-primary);
        }
        
        .services-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 24px;
            margin-bottom: 40px;
            transition: opacity 0.3s ease;
        }
        
        .service-card {
            background: var(--bg-card);
            border-radius: 20px;
            padding: 32px 28px;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            overflow: hidden;
        }
        
        .service-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            opacity: 0;
            transition: opacity 0.3s;
        }
        
        .service-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 16px 40px rgba(99, 102, 241, 0.2);
        }
        
        .service-card:hover::before {
            opacity: 1;
        }
        
        .service-card:nth-child(1)::before {
            background: linear-gradient(90deg, #f59e0b 0%, #d97706 100%);
        }
        
        .service-card:nth-child(2)::before {
            background: linear-gradient(90deg, #6366f1 0%, #4f46e5 100%);
        }
        
        .service-card:nth-child(3)::before {
            background: linear-gradient(90deg, #10b981 0%, #059669 100%);
        }
        
        .service-icon-wrapper {
            width: 72px;
            height: 72px;
            border-radius: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 36px;
            margin-bottom: 20px;
        }
        
        .service-card:nth-child(1) .service-icon-wrapper {
            background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(245, 158, 11, 0.05) 100%);
        }
        
        .service-card:nth-child(2) .service-icon-wrapper {
            background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(99, 102, 241, 0.05) 100%);
        }
        
        .service-card:nth-child(3) .service-icon-wrapper {
            background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(16, 185, 129, 0.05) 100%);
        }
        
        .service-title {
            font-size: 22px;
            font-weight: 800;
            margin-bottom: 8px;
            color: var(--text-primary);
        }
        
        .service-subtitle {
            font-size: 13px;
            color: var(--text-secondary);
            font-weight: 600;
            margin-bottom: 16px;
        }
        
        .service-description {
            font-size: 15px;
            color: var(--text-secondary);
            line-height: 1.6;
            margin-bottom: 20px;
        }
        
        .service-features {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        
        .service-features li {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 14px;
            color: var(--text-secondary);
            font-weight: 600;
        }
        
        .check-icon {
            width: 20px;
            height: 20px;
            background: linear-gradient(135deg, var(--accent) 0%, #059669 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 12px;
            font-weight: 700;
            flex-shrink: 0;
        }
        
        /* Quick Actions Grid */
        .quick-actions-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            gap: 20px;
        }
        
        .quick-card {
            background: var(--bg-card);
            border-radius: 16px;
            padding: 28px 24px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
            transition: all 0.3s;
            cursor: pointer;
        }
        
        .quick-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 24px rgba(99, 102, 241, 0.15);
        }
        
        .quick-icon {
            width: 56px;
            height: 56px;
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
            margin-bottom: 16px;
        }
        
        .quick-card:nth-child(1) .quick-icon {
            background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(99, 102, 241, 0.05) 100%);
        }
        
        .quick-card:nth-child(2) .quick-icon {
            background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(245, 158, 11, 0.05) 100%);
        }
        
        .quick-card:nth-child(3) .quick-icon {
            background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(16, 185, 129, 0.05) 100%);
        }
        
        .quick-card:nth-child(4) .quick-icon {
            background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(239, 68, 68, 0.05) 100%);
        }
        
        .quick-title {
            font-size: 18px;
            font-weight: 700;
            margin-bottom: 6px;
            color: var(--text-primary);
        }
        
        .quick-description {
            font-size: 14px;
            color: var(--text-secondary);
            line-height: 1.5;
        }
        
        /* CTA Section */
        .cta-section {
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
            border-radius: 24px;
            padding: 48px 40px;
            text-align: center;
            color: white;
            margin-top: 40px;
            position: relative;
            overflow: hidden;
        }
        
        .cta-section::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -30%;
            width: 400px;
            height: 400px;
            background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
            border-radius: 50%;
        }
        
        .cta-content {
            position: relative;
            z-index: 1;
        }
        
        .cta-title {
            font-size: 28px;
            font-weight: 900;
            margin-bottom: 12px;
        }
        
        .cta-description {
            font-size: 16px;
            margin-bottom: 28px;
            opacity: 0.95;
        }
        
        .cta-buttons {
            display: flex;
            gap: 12px;
            justify-content: center;
            flex-wrap: wrap;
        }
        
        .cta-btn {
            background: white;
            color: var(--primary);
            padding: 14px 28px;
            border-radius: 12px;
            font-weight: 700;
            font-size: 15px;
            text-decoration: none;
            transition: all 0.3s;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }
        
        .cta-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
        }
        
        /* Mobile Header */
        .mobile-header {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            background: var(--bg-card);
            padding: 16px 20px;
            border-bottom: 1px solid var(--border);
            z-index: 90;
            align-items: center;
            gap: 16px;
        }
        
        .hamburger-btn {
            width: 44px;
            height: 44px;
            background: var(--bg-main);
            border: 2px solid var(--border);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .hamburger-btn:hover {
            border-color: var(--primary);
        }
        
        .hamburger-btn svg {
            width: 24px;
            height: 24px;
            color: var(--text-primary);
        }
        
        .mobile-logo-area {
            display: flex;
            align-items: center;
            gap: 12px;
            flex: 1;
        }
        
        .mobile-logo-icon {
            width: 44px;
            height: 44px;
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 800;
            font-size: 20px;
            color: white;
            font-family: 'Poppins', sans-serif;
        }
        
        .mobile-logo-text {
            display: flex;
            flex-direction: column;
        }
        
        .mobile-logo-text h1 {
            font-size: 20px;
            font-weight: 800;
            color: var(--primary);
            margin: 0;
            line-height: 1;
        }
        
        .mobile-logo-text span {
            font-size: 11px;
            color: var(--text-secondary);
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        
        /* Mobile Overlay */
        .mobile-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.5);
            z-index: 95;
            opacity: 0;
            transition: opacity 0.3s;
        }
        
        .mobile-overlay.active {
            opacity: 1;
        }
        
        /* Mobile Responsive */
        @media (max-width: 768px) {
            .mobile-header {
                display: flex;
            }
            
            .mobile-overlay {
                display: block;
            }
            
            .sidebar {
                transform: translateX(-100%);
                transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
                z-index: 100;
            }
            
            .sidebar.open {
                transform: translateX(0);
            }
            
            .main-container {
                margin-left: 0;
                padding-top: 76px;
            }
            
            .top-header {
                padding: 12px 20px;
            }
            
            .header-logo-text {
                font-size: 20px;
            }
            
            .header-logo-icon {
                width: 40px;
                height: 40px;
                font-size: 18px;
            }
            
            .profile-btn {
                width: 40px;
                height: 40px;
                font-size: 16px;
            }
            
            .content-area {
                padding: 24px 20px;
            }
            
            .hero-title {
                font-size: 24px;
            }
            
            .services-grid {
                grid-template-columns: 1fr;
            }
            
            .quick-actions-grid {
                grid-template-columns: 1fr;
            }
            
            .search-actions {
                flex-direction: column;
                align-items: stretch;
            }
            
            .product-btn {
                width: 100%;
                justify-content: center;
            }
            
            .product-dropdown {
                left: 0;
                right: 0;
                min-width: auto;
            }
            
            .pricing-comparison {
                grid-template-columns: 1fr;
            }
            
            .upgrade-modal {
                padding: 24px;
                width: 95%;
            }
            
            .upgrade-modal-title {
                font-size: 20px;
            }
            
            .usage-indicator {
                top: 80px;
                right: 10px;
                padding: 8px 12px;
                font-size: 12px;
            }
        }
        
        @media (max-width: 480px) {
            .sidebar-dropdown,
            .settings-dropdown-sidebar {
                left: 88px;
                min-width: 220px;
            }
            
            .header-logo-area {
                gap: 8px;
            }
            
            .search-box {
                flex-direction: column;
                align-items: stretch;
                padding: 12px 16px;
            }
            
            .learning-mode-btn {
                min-width: 100%;
                border-bottom: 1px solid var(--border);
                padding-bottom: 12px;
                margin-bottom: 8px;
            }
            
            .learning-mode-menu {
                left: 0;
                right: 0;
                min-width: auto;
            }
        }
    </style>
</head>
<body>
    <!-- Mobile Header -->
    <div class="mobile-header">
        <button class="hamburger-btn" id="mobileMenuBtn">
            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
            </svg>
        </button>
        <div class="mobile-logo-area">
            <div class="mobile-logo-icon">AL</div>
            <div class="mobile-logo-text">
                <h1>AimLearno</h1>
                <span>Smart Test Prep</span>
            </div>
        </div>
    </div>
    
    <!-- Mobile Overlay -->
    <div class="mobile-overlay" id="mobileOverlay"></div>
    
    <!-- Left Sidebar -->
    <div class="sidebar">
        <!-- Hamburger Menu at TOP of Sidebar -->
        <button class="sidebar-btn" id="sidebarMenuBtn">
            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
            </svg>
        </button>
        
        <!-- Services Dropdown -->
        <div class="sidebar-dropdown" id="sidebarServicesDropdown">
            <div class="sidebar-dropdown-header">
                <div class="sidebar-dropdown-title">Our Services</div>
            </div>
            <div class="sidebar-dropdown-items">
                <a href="#academic" class="sidebar-dropdown-item">
                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
                    </svg>
                    Academic Support
                </a>
                <a href="#test-prep" class="sidebar-dropdown-item">
                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"/>
                    </svg>
                    Test Preparation
                </a>
                <a href="#career" class="sidebar-dropdown-item">
                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
                    </svg>
                    Career Counselling
                </a>
            </div>
        </div>
        
        <button class="sidebar-btn active">
            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
            </svg>
        </button>
        
        <button class="sidebar-btn">
            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
            </svg>
        </button>
        
        <button class="sidebar-btn" onclick="focusSearch()">
            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
            </svg>
        </button>
        
        <div class="sidebar-spacer"></div>
        
        <!-- Settings at Bottom -->
        <button class="sidebar-btn" id="sidebarSettingsBtn">
            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
            </svg>
        </button>
        
        <!-- Settings Dropdown -->
        <div class="settings-dropdown-sidebar" id="sidebarSettingsDropdown">
            <div class="sidebar-dropdown-header">
                <div class="sidebar-dropdown-title">Settings</div>
            </div>
            <div class="sidebar-dropdown-items">
                <button class="sidebar-dropdown-item" id="openThemeModal">
                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"/>
                    </svg>
                    Theme
                </button>
                <button class="sidebar-dropdown-item" id="notificationBtn">
                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/>
                    </svg>
                    Notifications
                </button>
                <button class="sidebar-dropdown-item" id="viewUsageBtn">
                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
                    </svg>
                    View Usage Stats
                </button>
                <button class="sidebar-dropdown-item" id="resetDemoBtn">
                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
                    </svg>
                    Reset Demo (Testing)
                </button>
                <a href="#support" class="sidebar-dropdown-item">
                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z"/>
                    </svg>
                    Help & Support
                </a>
                <a href="#pricing" class="sidebar-dropdown-item">
                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                    Pricing
                </a>
            </div>
        </div>
    </div>
    
    <!-- Theme Modal -->
    <div class="theme-modal-overlay" id="themeModalOverlay">
        <div class="theme-modal">
            <div class="theme-modal-header">
                <h2 class="theme-modal-title">Choose Theme</h2>
                <button class="theme-modal-close" id="closeThemeModal">
                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                    </svg>
                </button>
            </div>
            <div class="theme-options">
                <div class="theme-option active" data-theme="light">
                    <div class="theme-preview light"></div>
                    <div class="theme-label">Light</div>
                </div>
                <div class="theme-option" data-theme="dark">
                    <div class="theme-preview dark"></div>
                    <div class="theme-label">Dark</div>
                </div>
                <div class="theme-option" data-theme="warm">
                    <div class="theme-preview warm"></div>
                    <div class="theme-label">Warm</div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Upgrade Modal -->
    <div class="upgrade-modal-overlay" id="upgradeModalOverlay">
        <div class="upgrade-modal">
            <div class="upgrade-modal-header">
                <h2 class="upgrade-modal-title">🚀 Upgrade to Premium</h2>
                <button class="upgrade-modal-close" id="closeUpgradeModal">
                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                    </svg>
                </button>
            </div>
            
            <div class="upgrade-content">
                <div class="limit-reached-message">
                    <div class="limit-icon">⚠️</div>
                    <h3>You've Reached Your Free Limit!</h3>
                    <p id="limitMessage">You've used all your free questions for today. Upgrade to Premium for unlimited access!</p>
                </div>
                
                <div class="pricing-comparison">
                    <div class="pricing-card free-card">
                        <div class="plan-badge">Current Plan</div>
                        <h3>Free Plan</h3>
                        <div class="plan-price">₹0<span>/month</span></div>
                        <ul class="plan-features">
                            <li><svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/></svg>5 Questions per day</li>
                            <li><svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/></svg>Limited content access</li>
                            <li><svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/></svg>Basic doubt support</li>
                            <li class="disabled"><svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>No practice tests</li>
                            <li class="disabled"><svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>No personalized guidance</li>
                        </ul>
                    </div>
                    
                    <div class="pricing-card premium-card">
                        <div class="plan-badge premium-badge">Recommended</div>
                        <h3>Premium Plan</h3>
                        <div class="plan-price">₹999<span>/month</span></div>
                        <ul class="plan-features">
                            <li><svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/></svg>Unlimited questions</li>
                            <li><svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/></svg>Full content access</li>
                            <li><svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/></svg>Priority doubt support</li>
                            <li><svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/></svg>Unlimited practice tests</li>
                            <li><svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/></svg>1-on-1 mentoring sessions</li>
                            <li><svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/></svg>Performance analytics</li>
                            <li><svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/></svg>Download study materials</li>
                        </ul>
                        <button class="upgrade-btn" id="upgradeNowBtn">
                            <svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
                            </svg>
                            Upgrade Now
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Usage Indicator (Top Right Corner) -->
    <div class="usage-indicator" id="usageIndicator">
        <div class="usage-icon">💬</div>
        <div class="usage-text">
            <span id="usageCount">5</span>/<span id="usageLimit">5</span>
        </div>
    </div>
    
    <!-- Main Container -->
    <div class="main-container">
        <!-- Top Header -->
        <header class="top-header">
            <div class="header-logo-area">
                <div class="header-logo-icon">AL</div>
                <div class="header-logo-text">AimLearno</div>
            </div>
            <div class="header-right">
                <button class="profile-btn">A</button>
            </div>
        </header>
        
        <!-- Content Area -->
        <div class="content-area">
            <!-- Hero Search Section -->
            <div class="hero-search-section">
                <h1 class="hero-title">Master CBSE, IB, JEE & Digital SAT</h1>
                <p class="hero-subtitle">
                    Get personalized academic support, expert test preparation, and professional career counselling from experienced mentors
                </p>
                
                <div class="search-box">
                    <!-- Learning Mode Dropdown -->
                    <div class="learning-mode-dropdown-wrapper">
                        <button class="learning-mode-btn" id="learningModeBtn">
                            <div class="learning-mode-content">
                                <span class="learning-mode-title" id="selectedMode">Content</span>
                                <span class="learning-mode-subtitle">Interactive study materials</span>
                            </div>
                            <svg class="mode-dropdown-arrow" width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                            </svg>
                        </button>
                        
                        <!-- Learning Mode Dropdown Menu -->
                        <div class="learning-mode-menu" id="learningModeMenu">
                            <div class="mode-option" data-mode="content" data-subtitle="Interactive study materials">
                                <div class="mode-info">
                                    <div class="mode-name">Content</div>
                                    <div class="mode-desc">Interactive study materials</div>
                                </div>
                                <svg class="mode-check" width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/>
                                </svg>
                            </div>
                            <div class="mode-option" data-mode="doubt" data-subtitle="Ask questions instantly">
                                <div class="mode-info">
                                    <div class="mode-name">Doubt</div>
                                    <div class="mode-desc">Ask questions instantly</div>
                                </div>
                                <svg class="mode-check" width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/>
                                </svg>
                            </div>
                            <div class="mode-option" data-mode="live-1-1" data-subtitle="Personal mentor sessions">
                                <div class="mode-info">
                                    <div class="mode-name">Live 1-1</div>
                                    <div class="mode-desc">Personal mentor sessions</div>
                                </div>
                                <svg class="mode-check" width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/>
                                </svg>
                            </div>
                            <div class="mode-option" data-mode="guaranteed-result" data-subtitle="Goal-based learning path">
                                <div class="mode-info">
                                    <div class="mode-name">Guaranteed Result</div>
                                    <div class="mode-desc">Goal-based learning path</div>
                                </div>
                                <svg class="mode-check" width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/>
                                </svg>
                            </div>
                        </div>
                    </div>
                    
                    <svg class="search-icon" width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
                    </svg>
                    <input type="text" class="search-input" id="searchInput" placeholder="Ask anything about CBSE, IB, JEE, Digital SAT...">
                </div>
                
                <div class="search-actions">
                    <button class="action-btn">
                        <svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"/>
                        </svg>
                        Attach
                    </button>
                    <button class="action-btn">
                        <svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"/>
                        </svg>
                        Get Started
                    </button>
                    
                    <!-- Academic Dropdown -->
                    <div class="product-dropdown-wrapper">
                        <button class="product-btn" id="academicBtn">
                            <svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
                            </svg>
                            Academic
                            <svg class="dropdown-arrow" width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                            </svg>
                        </button>
                        <div class="product-dropdown" id="academicDropdown">
                            <a href="#cbse" class="product-dropdown-item">CBSE</a>
                            <a href="#ib" class="product-dropdown-item">IB</a>
                        </div>
                    </div>
                    
                    <!-- Test Prep Dropdown -->
                    <div class="product-dropdown-wrapper">
                        <button class="product-btn" id="testPrepBtn">
                            <svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"/>
                            </svg>
                            Test Prep
                            <svg class="dropdown-arrow" width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                            </svg>
                        </button>
                        <div class="product-dropdown" id="testPrepDropdown">
                            <a href="#digital-sat" class="product-dropdown-item">Digital SAT</a>
                            <a href="#jee" class="product-dropdown-item">JEE</a>
                        </div>
                    </div>
                    
                    <!-- Career Counselling Dropdown -->
                    <div class="product-dropdown-wrapper">
                        <button class="product-btn" id="careerBtn">
                            <svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
                            </svg>
                            Career
                            <svg class="dropdown-arrow" width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                            </svg>
                        </button>
                        <div class="product-dropdown" id="careerDropdown">
                            <a href="#stream-selection" class="product-dropdown-item">Stream Selection</a>
                            <a href="#college-guidance" class="product-dropdown-item">College Guidance</a>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Services Section -->
            <div class="services-section">
                <h2 class="section-title">Our Services</h2>
                <div class="services-grid">
                    <!-- Academic Support -->
                    <div class="service-card" id="academic">
                        <div class="service-icon-wrapper">📚</div>
                        <h3 class="service-title">Academic Support</h3>
                        <div class="service-subtitle">CBSE & IB Curriculum</div>
                        <p class="service-description">
                            Comprehensive support for CBSE and IB curricula. Excel in Classes 10 & 12 with personalized guidance.
                        </p>
                        <ul class="service-features">
                            <li>
                                <span class="check-icon">✓</span>
                                CBSE Classes 10 & 12
                            </li>
                            <li>
                                <span class="check-icon">✓</span>
                                IB Curriculum Support
                            </li>
                            <li>
                                <span class="check-icon">✓</span>
                                Math, Physics & Chemistry
                            </li>
                            <li>
                                <span class="check-icon">✓</span>
                                Personalized Tutoring
                            </li>
                        </ul>
                    </div>
                    
                    <!-- Test Preparation -->
                    <div class="service-card" id="test-prep">
                        <div class="service-icon-wrapper">🎯</div>
                        <h3 class="service-title">Test Preparation</h3>
                        <div class="service-subtitle">JEE & Digital SAT</div>
                        <p class="service-description">
                            Specialized coaching for JEE and Digital SAT with proven strategies and expert guidance.
                        </p>
                        <ul class="service-features">
                            <li>
                                <span class="check-icon">✓</span>
                                JEE Main & Advanced
                            </li>
                            <li>
                                <span class="check-icon">✓</span>
                                Digital SAT Coaching
                            </li>
                            <li>
                                <span class="check-icon">✓</span>
                                Mock Tests & Analysis
                            </li>
                            <li>
                                <span class="check-icon">✓</span>
                                Performance Tracking
                            </li>
                        </ul>
                    </div>
                    
                    <!-- Career Counselling -->
                    <div class="service-card" id="career">
                        <div class="service-icon-wrapper">🎓</div>
                        <h3 class="service-title">Career Counselling</h3>
                        <div class="service-subtitle">Expert Guidance</div>
                        <p class="service-description">
                            Professional career guidance for CBSE, IB, JEE, and SAT students. Make informed decisions.
                        </p>
                        <ul class="service-features">
                            <li>
                                <span class="check-icon">✓</span>
                                Stream Selection
                            </li>
                            <li>
                                <span class="check-icon">✓</span>
                                College Selection
                            </li>
                            <li>
                                <span class="check-icon">✓</span>
                                Aptitude Assessment
                            </li>
                            <li>
                                <span class="check-icon">✓</span>
                                Career Path Planning
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            
            <!-- Quick Actions -->
            <div class="services-section">
                <h2 class="section-title">Get Started</h2>
                <div class="quick-actions-grid">
                    <div class="quick-card">
                        <div class="quick-icon">📖</div>
                        <h3 class="quick-title">Start Learning</h3>
                        <p class="quick-description">Begin your journey with expert-guided courses</p>
                    </div>
                    <div class="quick-card">
                        <div class="quick-icon">✍️</div>
                        <h3 class="quick-title">Practice Tests</h3>
                        <p class="quick-description">Take mock exams and improve your scores</p>
                    </div>
                    <div class="quick-card">
                        <div class="quick-icon">🎯</div>
                        <h3 class="quick-title">Study Guide</h3>
                        <p class="quick-description">Access comprehensive study materials</p>
                    </div>
                    <div class="quick-card">
                        <div class="quick-icon">⚡</div>
                        <h3 class="quick-title">Quick Revision</h3>
                        <p class="quick-description">Boost your prep with targeted revision</p>
                    </div>
                </div>
            </div>
            
            <!-- CTA Section -->
            <div class="cta-section">
                <div class="cta-content">
                    <h2 class="cta-title">Ready to Excel in Your Academic Journey?</h2>
                    <p class="cta-description">
                        Get in touch with us today for personalized guidance and expert coaching tailored to your goals.
                    </p>
                    <div class="cta-buttons">
                        <a href="/cdn-cgi/l/email-protection#aec7c0c8c1eecfc7c3c2cbcfdcc0c180cdc1c3" class="cta-btn">
                            <svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
                            </svg>
                            Email Us
                        </a>
                        <a href="tel:+91XXXXXXXXXX" class="cta-btn">
                            <svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
                            </svg>
                            Call Us
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script>
        function focusSearch() {
            document.getElementById('searchInput').focus();
        }
        
        // Smooth scroll for internal links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    target.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                }
            });
        });
        
        // Mobile Menu Toggle
        const mobileMenuBtn = document.getElementById('mobileMenuBtn');
        const sidebar = document.querySelector('.sidebar');
        const mobileOverlay = document.getElementById('mobileOverlay');
        
        function openMobileMenu() {
            sidebar.classList.add('open');
            mobileOverlay.classList.add('active');
            document.body.style.overflow = 'hidden';
        }
        
        function closeMobileMenu() {
            sidebar.classList.remove('open');
            mobileOverlay.classList.remove('active');
            document.body.style.overflow = '';
        }
        
        if (mobileMenuBtn) {
            mobileMenuBtn.addEventListener('click', openMobileMenu);
        }
        
        if (mobileOverlay) {
            mobileOverlay.addEventListener('click', closeMobileMenu);
        }
        
        // Close menu when sidebar button is clicked on mobile
        const sidebarButtons = document.querySelectorAll('.sidebar-btn');
        sidebarButtons.forEach(btn => {
            btn.addEventListener('click', () => {
                if (window.innerWidth <= 768) {
                    closeMobileMenu();
                }
            });
        });
        
        // Sidebar Dropdown Menus
        const sidebarMenuBtn = document.getElementById('sidebarMenuBtn');
        const sidebarServicesDropdown = document.getElementById('sidebarServicesDropdown');
        const sidebarSettingsBtn = document.getElementById('sidebarSettingsBtn');
        const sidebarSettingsDropdown = document.getElementById('sidebarSettingsDropdown');
        
        function closeAllSidebarDropdowns() {
            if (sidebarServicesDropdown) sidebarServicesDropdown.classList.remove('active');
            if (sidebarSettingsDropdown) sidebarSettingsDropdown.classList.remove('active');
        }
        
        // Toggle Services Dropdown in Sidebar
        if (sidebarMenuBtn) {
            sidebarMenuBtn.addEventListener('click', (e) => {
                e.stopPropagation();
                if (sidebarSettingsDropdown) sidebarSettingsDropdown.classList.remove('active');
                sidebarServicesDropdown.classList.toggle('active');
            });
        }
        
        // Toggle Settings Dropdown in Sidebar
        if (sidebarSettingsBtn) {
            sidebarSettingsBtn.addEventListener('click', (e) => {
                e.stopPropagation();
                if (sidebarServicesDropdown) sidebarServicesDropdown.classList.remove('active');
                sidebarSettingsDropdown.classList.toggle('active');
            });
        }
        
        // Close sidebar dropdowns when clicking outside
        document.addEventListener('click', (e) => {
            if (!e.target.closest('.sidebar') && !e.target.closest('.sidebar-dropdown') && !e.target.closest('.settings-dropdown-sidebar')) {
                closeAllSidebarDropdowns();
            }
        });
        
        // Close sidebar dropdowns when clicking dropdown items
        document.querySelectorAll('.sidebar-dropdown-item').forEach(item => {
            item.addEventListener('click', (e) => {
                // Don't close if it's the theme button
                if (!e.target.closest('#openThemeModal')) {
                    closeAllSidebarDropdowns();
                }
            });
        });
        
        // Close dropdowns when clicking dropdown items
        document.querySelectorAll('.sidebar-dropdown-item').forEach(item => {
            item.addEventListener('click', (e) => {
                // Don't close if it's the theme button
                if (!e.target.closest('#openThemeModal')) {
                    closeAllSidebarDropdowns();
                }
            });
        });
        
        // Theme Modal
        const themeModalOverlay = document.getElementById('themeModalOverlay');
        const openThemeModalBtn = document.getElementById('openThemeModal');
        const closeThemeModalBtn = document.getElementById('closeThemeModal');
        const themeOptions = document.querySelectorAll('.theme-option');
        
        // Open Theme Modal
        if (openThemeModalBtn) {
            openThemeModalBtn.addEventListener('click', (e) => {
                e.preventDefault();
                e.stopPropagation();
                themeModalOverlay.classList.add('active');
                closeAllSidebarDropdowns();
            });
        }
        
        // Close Theme Modal
        if (closeThemeModalBtn) {
            closeThemeModalBtn.addEventListener('click', () => {
                themeModalOverlay.classList.remove('active');
            });
        }
        
        // Close on overlay click
        if (themeModalOverlay) {
            themeModalOverlay.addEventListener('click', (e) => {
                if (e.target === themeModalOverlay) {
                    themeModalOverlay.classList.remove('active');
                }
            });
        }
        
        // Theme Selection
        themeOptions.forEach(option => {
            option.addEventListener('click', () => {
                // Remove active class from all
                themeOptions.forEach(opt => opt.classList.remove('active'));
                // Add active to clicked
                option.classList.add('active');
                
                const theme = option.dataset.theme;
                
                // Apply theme immediately
                document.body.setAttribute('data-theme', theme);
                localStorage.setItem('theme', theme);
                
                // Close modal after selection
                setTimeout(() => {
                    themeModalOverlay.classList.remove('active');
                }, 300);
                
                console.log('Theme changed to:', theme);
            });
        });
        
        // Load saved theme on page load
        const savedTheme = localStorage.getItem('theme') || 'light';
        document.body.setAttribute('data-theme', savedTheme);
        themeOptions.forEach(option => {
            if (option.dataset.theme === savedTheme) {
                option.classList.add('active');
            }
        });
        
        // Notification button (placeholder)
        const notificationBtn = document.getElementById('notificationBtn');
        if (notificationBtn) {
            notificationBtn.addEventListener('click', () => {
                alert('Notifications feature coming soon!');
                closeAllSidebarDropdowns();
            });
        }
        
        // Product Dropdowns - Initialize after DOM is ready
        function initializeProductDropdowns() {
            console.log('Initializing product dropdowns...');
            
            const academicBtn = document.getElementById('academicBtn');
            const academicDropdown = document.getElementById('academicDropdown');
            const testPrepBtn = document.getElementById('testPrepBtn');
            const testPrepDropdown = document.getElementById('testPrepDropdown');
            const careerBtn = document.getElementById('careerBtn');
            const careerDropdown = document.getElementById('careerDropdown');
            
            console.log('Academic Button:', academicBtn);
            console.log('Academic Dropdown:', academicDropdown);
            console.log('Test Prep Button:', testPrepBtn);
            console.log('Career Button:', careerBtn);
            
            function closeAllProductDropdowns() {
                if (academicDropdown) academicDropdown.classList.remove('active');
                if (testPrepDropdown) testPrepDropdown.classList.remove('active');
                if (careerDropdown) careerDropdown.classList.remove('active');
                if (academicBtn) academicBtn.classList.remove('active');
                if (testPrepBtn) testPrepBtn.classList.remove('active');
                if (careerBtn) careerBtn.classList.remove('active');
            }
            
            // Academic Dropdown
            if (academicBtn && academicDropdown) {
                console.log('Adding click handler to Academic button');
                academicBtn.addEventListener('click', (e) => {
                    console.log('Academic button clicked!');
                    e.stopPropagation();
                    const isActive = academicDropdown.classList.contains('active');
                    closeAllProductDropdowns();
                    if (!isActive) {
                        console.log('Opening academic dropdown');
                        academicDropdown.classList.add('active');
                        academicBtn.classList.add('active');
                    }
                });
            } else {
                console.error('Academic button or dropdown not found!');
            }
            
            // Test Prep Dropdown
            if (testPrepBtn && testPrepDropdown) {
                console.log('Adding click handler to Test Prep button');
                testPrepBtn.addEventListener('click', (e) => {
                    console.log('Test Prep button clicked!');
                    e.stopPropagation();
                    const isActive = testPrepDropdown.classList.contains('active');
                    closeAllProductDropdowns();
                    if (!isActive) {
                        console.log('Opening test prep dropdown');
                        testPrepDropdown.classList.add('active');
                        testPrepBtn.classList.add('active');
                    }
                });
            } else {
                console.error('Test Prep button or dropdown not found!');
            }
            
            // Career Dropdown
            if (careerBtn && careerDropdown) {
                console.log('Adding click handler to Career button');
                careerBtn.addEventListener('click', (e) => {
                    console.log('Career button clicked!');


/* ====================================================================== */
/* LAYOUT FIX - Added to make product buttons horizontal */
/* ====================================================================== */

/* Product Selection Area - Layout Fix */
/* Add this to your main.css file OR upload as separate file */

.product-selection-area {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

/* Additional styles for better product buttons */
.product-item-icon {
    font-size: 28px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-main);
    border-radius: 12px;
}

.product-item-content {
    flex: 1;
}

.product-item-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.product-item-subtitle {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
}

.product-dropdown-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border);
}

.product-dropdown-item:last-child {
    border-bottom: none;
}

.product-dropdown-item:hover {
    background: var(--bg-main);
}

.product-dropdown-item.selected {
    background: rgba(99, 102, 241, 0.1);
    border-left: 4px solid var(--primary);
}

/* Learning Mode Styles */
.learning-mode-dropdown-wrapper {
    position: relative;
}

.learning-mode-btn {
    background: transparent;
    border: none;
    padding: 8px 12px;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.2s;
    min-width: 220px;
}

.learning-mode-btn:hover {
    background: var(--bg-card);
}

.learning-mode-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1;
}

.learning-mode-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

.learning-mode-subtitle {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1;
    margin-top: 4px;
}

.mode-dropdown-arrow {
    transition: transform 0.3s;
    color: var(--text-secondary);
}

.learning-mode-btn.active .mode-dropdown-arrow {
    transform: rotate(180deg);
}

/* Learning Mode Menu */
.learning-mode-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    background: var(--bg-card);
    border: 2px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    min-width: 320px;
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 8px;
}

.learning-mode-menu.active {
    opacity: 1;
    pointer-events: all;
    transform: translateY(0);
}

.mode-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: 4px;
}

.mode-option:last-child {
    margin-bottom: 0;
}

.mode-option:hover {
    background: var(--bg-main);
}

.mode-option.active {
    background: rgba(99, 102, 241, 0.1);
}

.mode-info {
    flex: 1;
}

.mode-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.mode-desc {
    font-size: 13px;
    color: var(--text-secondary);
}

.mode-check {
    color: var(--primary);
    opacity: 0;
    transition: opacity 0.2s;
}

.mode-option.active .mode-check {
    opacity: 1;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .product-selection-area {
        flex-direction: column;
        width: 100%;
    }
    
    .product-dropdown-wrapper {
        width: 100%;
    }
    
    .product-btn {
        width: 100%;
        justify-content: space-between;
    }
    
    .product-dropdown {
        width: 100%;
    }
    
    .learning-mode-btn {
        min-width: 180px;
    }
    
    .learning-mode-menu {
        min-width: 280px;
    }
}