/* ==========================================================================
   ImpactMojo — extracted index.html stylesheet (was 4 inline <style> blocks).
   Concatenated in document order. Cached publicly for 24h via netlify.toml
   /css/* rule, so repeat visits skip the parse + download.
   Generated by Claude on 2026-05-01.
   ========================================================================== */

/* ---------- Block 1 (was inline) ---------- */
* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        :root {
            /* Professional Light Mode Colors - DEFAULT */
            --primary-bg: #FFFFFF;
            --secondary-bg: #F8FAFC;
            --accent-color: #0EA5E9;
            --accent-hover: #0284C7;
            --secondary-accent: #6366F1;
            --success-color: #10B981;
            --warning-color: #F59E0B;
            --danger-color: #EF4444;
            --text-primary: #0F172A;
            --text-secondary: #475569;
            --text-muted: #52627A;
            --card-bg: #FFFFFF;
            --hover-bg: #F1F5F9;
            --border-color: #E2E8F0;
            --gradient-primary: linear-gradient(135deg, #0369A1 0%, #4338CA 100%);
            --gradient-accent: linear-gradient(135deg, #0EA5E9 0%, #10B981 100%);
            --gradient-premium: linear-gradient(135deg, #0EA5E9 0%, #6366F1 100%);
            --nav-bg: rgba(255, 255, 255, 0.95);
            --nav-text: #0F172A;
            --star-color: #FCD34D;
            --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12);
            --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
            --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
            --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
        }

        /* Inline SVG Icon Styles */
.inline-icon {
    display: inline-block;
    vertical-align: middle;
    margin: 0 2px;
    flex-shrink: 0;
}
.inline-icon-sm { width: 14px; height: 14px; }
.inline-icon-md { width: 18px; height: 18px; }
.inline-icon-lg { width: 24px; height: 24px; }

        /* Professional Dark Theme */
        body.dark-mode {
            --primary-bg: #0F172A;
            --secondary-bg: #1E293B;
            --accent-color: #0EA5E9;
            --accent-hover: #0284C7;
            --secondary-accent: #6366F1;
            --success-color: #10B981;
            --warning-color: #F59E0B;
            --danger-color: #EF4444;
            --text-primary: #F1F5F9;
            --text-secondary: #CBD5E1;
            --text-muted: #94A3B8;
            --card-bg: #1E293B;
            --hover-bg: #334155;
            --border-color: #334155;
            --nav-bg: rgba(15, 23, 42, 0.95);
            --nav-text: #F1F5F9;
            --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
            --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
            --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.2);
            --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.3);
        }

        html { scroll-behavior: smooth; }
        section[id] { scroll-margin-top: 80px; }
        /* Defer rendering of below-fold sections until they scroll into view.
           This is a major speed win: the browser skips layout+paint for ~60% of the page. */
        #popular-courses, #labs, #premium,
        #support-us, #about {
            content-visibility: auto;
            contain-intrinsic-size: auto 600px;
        }

        body {
            font-family: 'Amaranth', sans-serif;
            background: var(--primary-bg);
            color: var(--text-primary);
            line-height: 1.6;
            min-height: 100vh;
            transition: all 0.3s ease;
            animation: pageFadeIn 0.4s ease-out;
        }

        @keyframes pageFadeIn {
            from { opacity: 0; transform: translateY(8px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Accessibility: ensure inline links are distinguishable without color alone */
        p a, .hero-credit a { text-decoration: underline; }

        /* Professional Background Pattern */
        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-image: 
                radial-gradient(circle at 20% 50%, rgba(14, 165, 233, 0.05) 0%, transparent 50%),
                radial-gradient(circle at 80% 80%, rgba(99, 102, 241, 0.05) 0%, transparent 50%);
            pointer-events: none;
            z-index: 1;
        }

        /* Container */
        .container {
            position: relative;
            z-index: 2;
            max-width: 1400px;
            margin: 0 auto;
        }

        /* Professional Header & Navigation */
        .header {
            position: fixed; left: 0; right: 0;
            top: 0;
            background: var(--nav-bg);
            backdrop-filter: blur(20px);
            z-index: 1000;
            border-bottom: 1px solid var(--border-color);
            box-shadow: var(--shadow-sm);
        }

        .nav-container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 1rem 1.5rem 0.5rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
        }

        /* Nav wrapper to keep starburst and links together */
        .nav-with-badge {
            display: flex;
            align-items: center;
            gap: 0;
        }

        /* Animated NEW! Sales Burst Badge */
        .new-starburst {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 48px;
            height: 40px;
            margin-right: 8px;
            cursor: pointer;
            text-decoration: none;
            z-index: 10;
            flex-shrink: 0;
            animation: burst-wobble 2s ease-in-out infinite;
        }
        
        .new-starburst::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 100%;
            height: 100%;
            background: #dc2626;
            transform: translate(-50%, -50%);
            clip-path: polygon(
                0% 25%, 5% 15%, 15% 20%, 20% 5%, 30% 15%, 40% 0%, 
                50% 12%, 60% 0%, 70% 15%, 80% 5%, 85% 20%, 95% 15%, 
                100% 25%, 92% 35%, 100% 50%, 92% 65%, 100% 75%, 
                95% 85%, 85% 80%, 80% 95%, 70% 85%, 60% 100%, 
                50% 88%, 40% 100%, 30% 85%, 20% 95%, 15% 80%, 
                5% 85%, 0% 75%, 8% 65%, 0% 50%, 8% 35%
            );
            box-shadow: 0 2px 8px rgba(220, 38, 38, 0.4);
        }
        
        .new-starburst::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: calc(100% - 4px);
            height: calc(100% - 4px);
            background: linear-gradient(145deg, #fef2f2, #ffffff);
            transform: translate(-50%, -50%);
            clip-path: polygon(
                0% 25%, 5% 15%, 15% 20%, 20% 5%, 30% 15%, 40% 0%, 
                50% 12%, 60% 0%, 70% 15%, 80% 5%, 85% 20%, 95% 15%, 
                100% 25%, 92% 35%, 100% 50%, 92% 65%, 100% 75%, 
                95% 85%, 85% 80%, 80% 95%, 70% 85%, 60% 100%, 
                50% 88%, 40% 100%, 30% 85%, 20% 95%, 15% 80%, 
                5% 85%, 0% 75%, 8% 65%, 0% 50%, 8% 35%
            );
        }
        
        .new-starburst-text {
            position: relative;
            z-index: 2;
            font-family: 'Inter', sans-serif;
            font-size: 0.65rem;
            font-weight: 700;
            color: #dc2626;
            text-transform: uppercase;
            letter-spacing: 0.3px;
        }
        
        @keyframes burst-wobble {
            0%, 100% { transform: rotate(-2deg) scale(1); }
            25% { transform: rotate(1deg) scale(1.02); }
            50% { transform: rotate(-1deg) scale(1); }
            75% { transform: rotate(2deg) scale(1.02); }
        }
        
        .new-starburst:hover {
            animation: none;
            transform: scale(1.1);
        }
        
        .new-starburst:hover::before {
            background: #b91c1c;
        }
        
        /* Dark mode burst */
        body.dark-mode .new-starburst::before {
            background: #ef4444;
            box-shadow: 0 2px 12px rgba(239, 68, 68, 0.5);
        }
        
        body.dark-mode .new-starburst::after {
            background: linear-gradient(145deg, #1f1f1f, #2d2d2d);
        }
        
        body.dark-mode .new-starburst-text {
            color: #fecaca;
        }

        /* Professional Logo Design */
        .logo-container {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            text-decoration: none;
            transition: transform 0.3s;
        }

        .logo-container:hover {
            transform: translateY(-2px);
        }

        .logo-svg {
            width: 48px;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .logo-text {
            display: flex;
            flex-direction: column;
        }

        .logo-main {
            font-family: 'Inter', sans-serif;
            font-size: 1.75rem;
            font-weight: 700;
            background: var(--gradient-primary);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            letter-spacing: -0.5px;
            line-height: 1;
        }

        .logo-tagline {
            font-size: 0.75rem;
            color: var(--text-secondary);
            font-weight: 500;
            margin-top: 2px;
            letter-spacing: 0.5px;
            text-transform: uppercase;
        }

        .nav-links {
            display: flex;
            gap: 2rem;
            list-style: none;
            align-items: center;
        }

        .nav-links a {
            color: var(--nav-text);
            text-decoration: none;
            font-weight: 500;
            font-size: 0.95rem;
            transition: all 0.3s;
            opacity: 0.9;
            position: relative;
            cursor: pointer;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .nav-links a::after {
            content: '';
            position: absolute;
            bottom: -4px;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--gradient-primary);
            transition: width 0.3s;
        }

        .nav-links a:hover {
            color: var(--accent-color);
            opacity: 1;
        }

        .nav-links a:hover::after {
            width: 100%;
        }

        /* Dropdown Navigation Styles */
        .nav-links > li {
            position: relative;
        }

        .nav-links > li.has-dropdown > a {
            display: flex;
            align-items: center;
            gap: 0.35rem;
        }

        .nav-links > li.has-dropdown > a::after {
            display: none; /* Remove underline effect for dropdown triggers */
        }

        .dropdown-arrow {
            width: 10px;
            height: 10px;
            transition: transform 0.3s ease;
        }

        .nav-links > li.has-dropdown:hover .dropdown-arrow {
            transform: rotate(180deg);
        }

        .dropdown-menu {
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            min-width: 200px;
            background: var(--nav-bg);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 0.5rem 0;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
            box-shadow: var(--shadow-lg);
            z-index: 1000;
            margin-top: 0.5rem;
        }

        .nav-links > li.has-dropdown:hover .dropdown-menu {
            opacity: 1;
            visibility: visible;
            margin-top: 0.25rem;
        }

        .dropdown-menu li {
            list-style: none;
        }

        .dropdown-menu a {
            display: block;
            padding: 0.75rem 1.25rem;
            color: var(--nav-text);
            text-decoration: none;
            font-weight: 500;
            font-size: 0.9rem;
            transition: all 0.2s ease;
            text-transform: none;
            letter-spacing: 0;
            opacity: 0.85;
            white-space: nowrap;
        }

        .dropdown-menu a:hover {
            background: var(--hover-bg);
            color: var(--accent-color);
            opacity: 1;
            padding-left: 1.5rem;
        }

        .dropdown-menu a::after {
            display: none; /* No underline in dropdowns */
        }

        /* Dropdown divider */
        .dropdown-divider {
            height: 1px;
            background: var(--border-color);
            margin: 0.5rem 0;
        }

        /* Dropdown subgroup label — small caps section header inside long dropdowns */
        .dropdown-label {
            padding: 0.5rem 1rem 0.25rem;
            font-family: 'Inter', sans-serif;
            font-size: 0.65rem;
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: var(--text-muted);
            pointer-events: none;
            user-select: none;
        }
        .dropdown-label:first-child { padding-top: 0.25rem; }

        /* Theme Selector - Three Button Layout */
        .theme-selector {
            display: flex;
            gap: 4px;
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 10px;
            padding: 4px;
        }

        .theme-btn {
            background: transparent;
            border: none;
            color: var(--text-secondary);
            padding: 8px;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
        }

        .theme-btn:hover {
            background: var(--hover-bg);
            color: var(--text-primary);
        }

        .theme-btn.active {
            background: var(--accent-color);
            color: white;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }

        .theme-btn svg {
            width: 18px;
            height: 18px;
        }

        .tour-toggle {
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            color: var(--nav-text);
            padding: 0.625rem;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 42px;
            height: 42px;
            margin-right: 0.5rem;
        }

        .tour-toggle:hover {
            background: var(--accent-color);
            border-color: var(--accent-color);
            color: #fff;
            transform: translateY(-2px);
            box-shadow: var(--shadow-md);
        }

        .nav-buttons {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            width: 100%;
            justify-content: flex-end;
            padding-top: 0.4rem;
            margin-top: 0.25rem;
            border-top: 1px solid var(--border-color);
            order: 10;
        }

        /* Auth Button Styles */
        .auth-btn {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.5rem 1rem;
            border-radius: 8px;
            font-size: 0.875rem;
            font-weight: 500;
            text-decoration: none;
            transition: all 0.2s ease;
            cursor: pointer;
            border: none;
            white-space: nowrap;
        }
        
        .auth-btn-login {
            background: transparent;
            color: var(--text-primary);
            border: 1px solid var(--border-color);
        }
        
        .auth-btn-login:hover {
            background: var(--hover-bg);
            border-color: var(--accent-color);
            color: var(--accent-color);
        }
        
        .auth-btn-signup {
            background: var(--gradient-primary);
            color: white;
            border: none;
        }
        
        .auth-btn-signup:hover {
            opacity: 0.9;
            transform: translateY(-1px);
        }
        
        /* Auth State Visibility */
        .auth-logged-in { display: none !important; }
        .auth-logged-out { display: flex !important; }
        
        body.user-authenticated .auth-logged-in { display: flex !important; }
        body.user-authenticated .auth-logged-out { display: none !important; }
        
        /* User Menu Button */
        .auth-user-menu {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.35rem 0.75rem;
            border-radius: 8px;
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            cursor: pointer;
            transition: all 0.2s ease;
            text-decoration: none;
            color: var(--text-primary);
        }
        
        .auth-user-menu:hover {
            border-color: var(--accent-color);
            background: var(--hover-bg);
        }
        
        .auth-user-avatar {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background: var(--gradient-primary);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 0.75rem;
            font-weight: 600;
            overflow: hidden;
        }
        
        .auth-user-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .auth-user-name {
            font-size: 0.875rem;
            font-weight: 500;
            max-width: 100px;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        /* Premium Badge */
        .auth-premium-badge {
            display: none;
            padding: 0.2rem 0.5rem;
            background: var(--gradient-premium);
            color: white;
            font-size: 0.7rem;
            font-weight: 700;
            border-radius: 4px;
            text-transform: uppercase;
            min-height: 24px;
        }
        
        body.user-premium .auth-premium-badge {
            display: inline-block;
        }
        
        /* Mobile auth buttons */
        @media (max-width: 768px) {
            .auth-btn {
                padding: 0.4rem 0.75rem;
                font-size: 0.8rem;
            }
            
            .auth-user-name {
                display: none;
            }
            
            .auth-user-menu {
                padding: 0.25rem;
            }
        }
        
        @media (max-width: 480px) {
            .auth-btn-login span,
            .auth-btn-signup span {
                display: none;
            }
            
            .auth-btn {
                padding: 0.5rem;
            }
        }

        /* Mobile Menu Toggle */
        .mobile-menu-toggle {
            display: none;
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            color: var(--nav-text);
            padding: 0;
            border-radius: 8px;
            cursor: pointer;
            width: 44px;
            height: 44px;
            align-items: center;
            justify-content: center;
            position: relative;
            flex-direction: column;
            gap: 5px;
            z-index: 9999;
            touch-action: manipulation;
            -webkit-tap-highlight-color: rgba(0,0,0,0.1);
            user-select: none;
            -webkit-user-select: none;
            outline: none;
            -webkit-appearance: none;
            appearance: none;
        }
        
        /* Hide mobile-only elements on desktop */
        .mobile-auth-section,
        .mobile-menu-overlay,
        .mobile-plane {
            display: none !important;
        }
        
        .mobile-menu-toggle:active {
            background: var(--hover-bg, #f0f0f0);
            transform: scale(0.95);
        }
        
        .mobile-menu-toggle .hamburger-line {
            width: 22px;
            height: 2px;
            background: var(--nav-text);
            transition: all 0.3s ease;
            border-radius: 2px;
            pointer-events: none;
            display: block;
        }
        
        .mobile-menu-toggle.active .hamburger-line:nth-child(1) {
            transform: translateY(7px) rotate(45deg);
        }
        
        .mobile-menu-toggle.active .hamburger-line:nth-child(2) {
            opacity: 0;
        }
        
        .mobile-menu-toggle.active .hamburger-line:nth-child(3) {
            transform: translateY(-7px) rotate(-45deg);
        }

        /* Cookie Consent - Minimal Cookie Icon Design */
        .cookie-consent {
            position: fixed;
            bottom: 2rem;
            left: 20px;
            z-index: 9998;
            font-family: 'Amaranth', sans-serif;
            display: block;
        }

        .cookie-icon-btn {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: var(--card-bg);
            border: 2px solid var(--border-color);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
            transition: all 0.3s ease;
            position: relative;
        }

        .cookie-icon-btn:hover {
            transform: scale(1.1);
            border-color: var(--accent-color);
            box-shadow: 0 6px 20px rgba(14, 165, 233, 0.3);
        }

        .cookie-icon-btn svg {
            width: 28px;
            height: 28px;
            fill: var(--warning-color);
        }

        /* Bite mark effect */
        .cookie-icon-btn::after {
            content: '';
            position: absolute;
            top: -2px;
            right: -2px;
            width: 16px;
            height: 16px;
            background: var(--primary-bg);
            border-radius: 50%;
        }

        .cookie-expanded {
            position: absolute;
            bottom: 60px;
            left: 0;
            width: 320px;
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            padding: 1rem;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
            opacity: 0;
            visibility: hidden;
            transform: translateY(-10px) scale(0.95);
            transition: all 0.3s ease;
        }

        .cookie-consent.expanded .cookie-expanded {
            opacity: 1;
            visibility: visible;
            transform: translateY(0) scale(1);
        }

        .cookie-expanded-header {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin-bottom: 0.75rem;
        }

        .cookie-expanded-header svg {
            width: 20px;
            height: 20px;
            fill: var(--warning-color);
        }

        .cookie-expanded-header span {
            font-weight: 600;
            color: var(--text-primary);
            font-size: 0.95rem;
        }

        .cookie-expanded p {
            color: var(--text-secondary);
            font-size: 0.85rem;
            line-height: 1.5;
            margin: 0 0 1rem 0;
        }

        .cookie-expanded-buttons {
            display: flex;
            gap: 0.5rem;
        }

        .cookie-btn-accept {
            flex: 1;
            padding: 0.5rem 1rem;
            background: var(--gradient-primary);
            color: white;
            border: none;
            border-radius: 6px;
            font-size: 0.85rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .cookie-btn-accept:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(14, 165, 233, 0.4);
        }

        .cookie-btn-settings {
            padding: 0.5rem 0.75rem;
            background: transparent;
            color: var(--text-secondary);
            border: 1px solid var(--border-color);
            border-radius: 6px;
            font-size: 0.85rem;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .cookie-btn-settings:hover {
            border-color: var(--text-secondary);
            color: var(--text-primary);
        }

        .cookie-consent.hidden {
            display: none;
        }

        /* Mobile adjustment */
        @media (max-width: 480px) {
            .cookie-consent {
                left: 10px;
                bottom: 1.5rem;
            }
            .cookie-expanded {
                width: calc(100vw - 40px);
                max-width: 300px;
            }
        }

        /* UserWay Accessibility Widget Positioning */
        /* Move UserWay to TOP LEFT to completely avoid toolbox overlap */
        .acsb-trigger,
        #acsb-trigger,
        [data-acsb-trigger],
        .acsb-trigger-wrap,
        div[class*="acsb"],
        .userway_p1 {
            position: fixed !important;
            top: 100px !important;
            left: 20px !important;
            right: auto !important;
            bottom: auto !important;
            z-index: 999 !important;
        }
        
        /* Mobile positioning for UserWay */
        @media (max-width: 768px) {
            .acsb-trigger,
            #acsb-trigger,
            [data-acsb-trigger],
            .acsb-trigger-wrap,
            div[class*="acsb"],
            .userway_p1 {
                top: 80px !important;
                left: 10px !important;
                right: auto !important;
                bottom: auto !important;
            }
        }

        /* Professional Hero Section */
        .hero {
            max-width: 1200px;
            margin: 0 auto;
            padding: 3rem 1.5rem 2rem;
            text-align: center;
        }

        .hero h1 {
            font-family: 'Inter', sans-serif;
            font-size: clamp(2.5rem, 5vw, 4rem);
            font-weight: 700;
            margin-bottom: 1rem;
            background: var(--gradient-primary);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            letter-spacing: -1px;
            line-height: 1.2;
        }

        .hero p {
            font-size: 1.125rem;
            color: var(--text-secondary);
            max-width: 700px;
            margin: 0 auto 1.5rem;
            line-height: 1.8;
        }

        /* Professional Badge */
        .beta-notice {
            background: linear-gradient(135deg, #10B981 0%, #047857 100%);
            color: white;
            padding: 0.75rem 2rem;
            border-radius: 50px;
            margin: 1.5rem auto;
            max-width: 600px;
            text-align: center;
            font-weight: 600;
            box-shadow: var(--shadow-lg);
            display: inline-flex;
            align-items: center;
            gap: 0.75rem;
        }

        /* Professional Star Rating */
        .star-rating {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            margin: 0.75rem 0;
        }

        .stars {
            display: flex;
            gap: 3px;
        }

        .star-icon {
            width: 16px;
            height: 16px;
            fill: var(--star-color);
        }

        .star-icon.empty {
            fill: none;
            stroke: var(--star-color);
            opacity: 0.3;
        }

        .rating-text {
            font-size: 0.875rem;
            color: var(--text-primary);
            font-weight: 600;
        }

        .rating-count {
            font-size: 0.75rem;
            color: var(--text-muted);
        }

        /* Section Styles */
        .section {
            max-width: 1200px;
            margin: 0 auto;
            padding: 4rem 1.5rem;
        }

        .section-title {
            font-family: 'Inter', sans-serif;
            font-size: 2.25rem;
            font-weight: 700;
            margin-bottom: 1rem;
            color: var(--text-primary);
            text-align: center;
            position: relative;
            display: inline-block;
            width: 100%;
        }

        .section-subtitle {
            text-align: center;
            color: var(--text-secondary);
            max-width: 600px;
            margin: 0 auto 3rem;
            font-size: 1rem;
        }

        /* Professional Cards Grid */
        .cards-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
            gap: 2rem;
            margin-top: 2rem;
        }

        .card {
            background: var(--card-bg);
            border-radius: 12px;
            padding: 2rem;
            border: 1px solid var(--border-color);
            transition: all 0.3s;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            box-shadow: var(--shadow-sm);
        }

        .card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: var(--gradient-primary);
            transform: translateX(-100%);
            transition: transform 0.3s;
        }

        .card:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-lg);
            border-color: var(--accent-color);
        }

        .card:hover::before {
            transform: translateX(0);
        }

        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 1rem;
        }

        .card-number {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            background: var(--hover-bg);
            /* WCAG AA: sky-800 #075985 = 7.56:1 on #F1F5F9 hover-bg.
               Was sky-500 #0EA5E9 = 2.53:1 — fails. */
            color: #075985;
            padding: 0.375rem 0.875rem;
            border-radius: 6px;
            font-size: 0.75rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            border: 1px solid var(--border-color);
        }
        body.dark-mode .card-number, [data-theme="dark"] .card-number { color: #7DD3FC; }

        .card-number svg {
            stroke: var(--accent-color);
        }

        .card-number.premium {
            background: var(--gradient-premium);
            color: white;
            border: none;
        }

        .card-number.premium svg {
            stroke: white;
            fill: white;
        }

        /* Premium tooltips moved to V3 section */
        
        [data-required-tier="practitioner"]::before {
            border-color: rgba(14, 165, 233, 0.4);
        }
        
        [data-required-tier="professional"]::before {
            border-color: rgba(99, 102, 241, 0.4);
        }
        
        [data-required-tier="organization"]::before {
            border-color: rgba(245, 158, 11, 0.4);
        }
        
        @media (max-width: 768px) {
            [data-required-tier]::before,
            [data-required-tier]::after {
                display: none;
            }
        }

        .learner-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.375rem;
            background: rgba(16, 185, 129, 0.1);
            color: var(--success-color);
            padding: 0.25rem 0.625rem;
            border-radius: 20px;
            font-size: 0.75rem;
            font-weight: 600;
        }

        .learner-badge svg {
            stroke: var(--success-color);
        }

        .card-title {
            font-size: 1.25rem;
            font-weight: 700;
            margin-bottom: 0.75rem;
            color: var(--text-primary);
            line-height: 1.3;
        }

        .card-description {
            color: var(--text-secondary);
            font-size: 0.95rem;
            line-height: 1.6;
            margin-bottom: 1rem;
        }

        .card-testimonial {
            font-style: italic;
            color: var(--text-muted);
            font-size: 0.875rem;
            margin-top: 1rem;
            padding-top: 1rem;
            border-top: 1px solid var(--border-color);
            position: relative;
        }

        .card-testimonial::before {
            content: '"';
            position: absolute;
            top: 0.5rem;
            left: 0;
            font-size: 2rem;
            color: var(--accent-color);
            opacity: 0.2;
            font-family: 'Amaranth', sans-serif;
        }

        .card-testimonial-author {
            display: block;
            margin-top: 0.5rem;
            font-style: normal;
            font-size: 0.75rem;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .card a {
            color: inherit;
            text-decoration: none;
            display: block;
        }

        /* Coming Soon Section */
        .coming-soon {
            background: var(--card-bg);
            padding: 3rem;
            border-radius: 16px;
            margin: 3rem auto;
            max-width: 1200px;
            border: 1px solid var(--border-color);
            box-shadow: var(--shadow-md);
        }

        .coming-soon h3 {
            color: var(--text-primary);
            margin-bottom: 1rem;
            font-size: 1.75rem;
            display: flex;
            align-items: center;
            gap: 0.75rem;
            justify-content: center;
        }

        .coming-soon-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 1.5rem;
            margin-top: 2rem;
        }

        .coming-soon-item {
            background: var(--hover-bg);
            padding: 1.5rem;
            border-radius: 8px;
            border: 1px solid var(--border-color);
            transition: all 0.3s;
        }

        .coming-soon-item:hover {
            border-color: var(--accent-color);
            transform: translateY(-2px);
            box-shadow: var(--shadow-md);
        }

        .coming-soon-item h4 {
            color: var(--accent-color);
            margin-bottom: 0.5rem;
            font-size: 1.1rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .coming-soon-item p {
            color: var(--text-secondary);
            font-size: 0.875rem;
            line-height: 1.5;
        }

        /* Professional Action Buttons */
        .action-buttons {
            display: flex;
            gap: 1rem;
            justify-content: center;
            flex-wrap: wrap;
            margin: 2rem 0;
        }

        .btn {
            padding: 0.75rem 2rem;
            border-radius: 8px;
            text-decoration: none;
            font-weight: 600;
            transition: all 0.3s;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            cursor: pointer;
            border: none;
            font-family: 'Amaranth', sans-serif;
            font-size: 0.95rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            box-shadow: var(--shadow-sm);
        }

        .btn-primary {
            background: var(--gradient-primary);
            color: white;
        }

        .btn-primary svg {
            stroke: white;
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-lg);
        }

        .btn-secondary {
            background: var(--card-bg);
            color: var(--text-primary);
            border: 2px solid var(--border-color);
        }

        .btn-secondary svg {
            stroke: var(--text-primary);
        }

        .btn-secondary:hover {
            border-color: var(--accent-color);
            background: var(--hover-bg);
            transform: translateY(-2px);
        }

        .btn-premium {
            background: var(--gradient-premium);
            color: white;
        }

        .btn-premium svg {
            stroke: white;
        }

        .btn-premium:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-lg);
        }

        /* Professional Modal Styles */
        .modal {
            display: none;
            position: fixed;
            z-index: 2000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8);
            backdrop-filter: blur(5px);
        }

        .modal-content {
            background: var(--card-bg);
            margin: 3% auto;
            padding: 0;
            border: 1px solid var(--border-color);
            border-radius: 16px;
            width: 90%;
            max-width: 1200px;
            max-height: 85vh;
            overflow: hidden;
            position: relative;
            box-shadow: var(--shadow-xl);
        }

        .modal-header {
            background: var(--gradient-primary);
            padding: 1.5rem 2rem;
            color: white;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-radius: 16px 16px 0 0;
        }

        .modal-header h2 {
            font-size: 1.5rem;
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .close {
            color: white;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
            transition: transform 0.3s;
            background: rgba(255, 255, 255, 0.1);
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            line-height: 1;
        }

        .close:hover {
            transform: rotate(90deg);
            background: rgba(255, 255, 255, 0.2);
        }

        .modal-body {
            padding: 2rem;
            overflow-y: auto;
            max-height: calc(85vh - 100px);
        }

        .modal-grid {
            display: grid;
            gap: 1.5rem;
        }

        .modal-item {
            background: var(--hover-bg);
            padding: 1.25rem;
            border-radius: 8px;
            border: 1px solid var(--border-color);
            transition: all 0.3s;
            display: flex;
            align-items: flex-start;
            gap: 1rem;
        }

        .modal-item:hover {
            border-color: var(--accent-color);
            transform: translateX(4px);
            box-shadow: var(--shadow-md);
        }

        .modal-item-icon {
            width: 40px;
            height: 40px;
            background: var(--gradient-primary);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .modal-item-icon svg {
            width: 20px;
            height: 20px;
            stroke: white;
        }

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

        .modal-item-title {
            color: var(--text-primary);
            font-weight: 600;
            font-size: 1.1rem;
            margin-bottom: 0.25rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .modal-item-description {
            color: var(--text-secondary);
            font-size: 0.875rem;
            line-height: 1.5;
            margin-bottom: 0.75rem;
        }

        .modal-item-meta {
            display: flex;
            gap: 1rem;
            align-items: center;
        }

        .modal-item-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.25rem;
            font-size: 0.75rem;
            color: var(--text-muted);
        }

        .modal-item a {
            color: inherit;
            text-decoration: none;
            display: block;
        }

        .modal-item-link {
            color: var(--accent-color);
            font-weight: 500;
            font-size: 0.875rem;
            display: inline-flex;
            align-items: center;
            gap: 0.25rem;
            text-decoration: none;
        }

        .modal-item-link:hover {
            text-decoration: underline;
        }
        /* Pulsating Live Indicator for Roadmap */
        .live-indicator {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            background: rgba(16, 185, 129, 0.15);
            padding: 0.25rem 0.75rem;
            border-radius: 20px;
            font-size: 0.75rem;
            font-weight: 600;
            color: #10B981;
            margin-left: 0.5rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .live-dot {
            width: 8px;
            height: 8px;
            background: #10B981;
            border-radius: 50%;
            animation: pulse 2s ease-in-out infinite;
        }

        @keyframes pulse {
            0%, 100% {
                opacity: 1;
                transform: scale(1);
            }
            50% {
                opacity: 0.5;
                transform: scale(1.2);
            }
        }

        /* Form Modal Styles */
        .form-group {
            margin-bottom: 1.25rem;
        }

        .form-group label {
            display: block;
            font-weight: 600;
            font-size: 0.9rem;
            color: var(--text-primary);
            margin-bottom: 0.5rem;
        }

        .form-group input,
        .form-group textarea,
        .form-group select {
            width: 100%;
            padding: 0.75rem 1rem;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            font-size: 1rem;
            background: var(--card-bg);
            color: var(--text-primary);
            transition: all 0.2s ease;
        }

        .form-group input:focus,
        .form-group textarea:focus,
        .form-group select:focus {
            outline: none;
            border-color: var(--accent-color);
            box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15);
        }

        .form-group small {
            display: block;
            margin-top: 0.35rem;
            font-size: 0.8rem;
            color: var(--text-muted);
        }

        .form-group select {
            cursor: pointer;
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 1rem center;
            padding-right: 2.5rem;
        }

        .form-submit-btn {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            padding: 0.9rem 1.5rem;
            background: var(--gradient-primary);
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
            margin-top: 1.5rem;
        }

        .form-submit-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
        }

        .form-submit-btn svg {
            flex-shrink: 0;
        }

        /* Support Modal Specific */
        .support-upi-box {
            background: rgba(16, 185, 129, 0.08);
            border: 2px dashed #10B981;
            border-radius: 12px;
            padding: 1.25rem;
            text-align: center;
            margin-bottom: 1.5rem;
        }

        .support-upi-label {
            font-size: 0.8rem;
            font-weight: 600;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 0.5rem;
        }

        .support-upi-id {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .support-upi-id code {
            font-family: 'JetBrains Mono', monospace;
            font-size: 1.4rem;
            font-weight: 700;
            color: #10B981;
        }

        .support-upi-copy {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            padding: 0.5rem 0.9rem;
            background: #10B981;
            color: white;
            border: none;
            border-radius: 6px;
            font-size: 0.85rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .support-upi-copy:hover {
            background: #059669;
        }

        .support-divider {
            display: flex;
            align-items: center;
            text-align: center;
            margin: 1.5rem 0;
            color: var(--text-muted);
            font-size: 0.85rem;
        }

        .support-divider::before,
        .support-divider::after {
            content: '';
            flex: 1;
            border-bottom: 1px solid var(--border-color);
        }

        .support-divider span {
            padding: 0 1rem;
        }

        .file-upload-box {
            position: relative;
            border: 2px dashed var(--border-color);
            border-radius: 8px;
            padding: 1.5rem;
            text-align: center;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .file-upload-box:hover {
            border-color: var(--accent-color);
            background: rgba(14, 165, 233, 0.05);
        }

        .file-upload-box input[type="file"] {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            cursor: pointer;
        }

        .file-upload-label {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.5rem;
            color: var(--text-muted);
        }

        .file-upload-label svg {
            color: var(--accent-color);
        }

        .file-upload-box.has-file {
            border-color: #10B981;
            background: rgba(16, 185, 129, 0.05);
        }

        .file-upload-box.has-file .file-upload-label {
            color: #10B981;
        }

        /* Track quiz CTA + modal - ENHANCED DESIGN */
        .track-quiz-cta {
            padding: 4rem 2rem;
            background: linear-gradient(135deg, 
                rgba(14,165,233,0.15) 0%, 
                rgba(99,102,241,0.15) 50%,
                rgba(16,185,129,0.10) 100%);
            border-top: 2px solid var(--border-color);
            border-bottom: 2px solid var(--border-color);
            margin: 3rem 0;
        }
        .track-quiz-inner {
            max-width: 900px;
            margin: 0 auto;
            text-align: center;
        }
        .track-quiz-inner h2 {
            font-size: 2.5rem;
            margin-bottom: 1rem;
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            background: var(--gradient-primary);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        .track-quiz-inner p {
            color: var(--text-secondary);
            margin-bottom: 2rem;
            font-size: 1.2rem;
            line-height: 1.6;
        }
        .track-quiz-inner .imx-btn {
            font-size: 1.1rem;
            padding: 1rem 2.5rem;
            box-shadow: var(--shadow-lg);
            transition: all 0.3s ease;
        }
        .track-quiz-inner .imx-btn:hover {
            transform: translateY(-3px);
            box-shadow: var(--shadow-xl);
        }
        #trackQuizModal .modal-content {
            max-width: 720px;
            width: 100%;
            margin: 4rem auto 2rem;
        }
        .quiz-modal-body {
            max-width: 720px;
            margin: 0 auto;
        }
        .quiz-question-group {
            margin-bottom: 1.25rem;
            padding: 1rem 1.25rem;
            border-radius: 12px;
            border: 1px solid var(--border-color);
            background: var(--secondary-bg);
        }
        body:not(.dark-mode) .quiz-question-group {
            background: #F8FAFC;
        }
        .quiz-question-group h3 {
            font-size: 1rem;
            margin-bottom: 0.75rem;
        }
        .quiz-options {
            display: grid;
            gap: 0.4rem;
            text-align: left;
        }
        .quiz-option {
            display: flex;
            align-items: flex-start;
            gap: 0.5rem;
            font-size: 0.95rem;
            cursor: pointer;
        }
        .quiz-option input[type="radio"] {
            margin-top: 0.15rem;
        }
        .quiz-actions {
            margin-top: 1.5rem;
            text-align: center;
        }
        .quiz-actions button {
            min-width: 220px;
        }
        .quiz-result {
            margin-top: 1.5rem;
            padding: 1rem 1.25rem;
            border-radius: 12px;
            border: 1px dashed var(--accent-color);
            background: rgba(14,165,233,0.05);
        }
        .quiz-result h3 {
            margin-bottom: 0.5rem;
        }
        .quiz-result p {
            margin-bottom: 0.25rem;
        }


        /* Share Section */
        .share-section {
            background: var(--card-bg);
            padding: 2rem;
            border-radius: 12px;
            border: 1px solid var(--border-color);
            max-width: 600px;
            margin: 3rem auto;
            text-align: center;
            box-shadow: var(--shadow-md);
        }

        .share-section h3 {
            color: var(--text-primary);
            margin-bottom: 0.5rem;
            font-size: 1.5rem;
        }

        .share-section p {
            color: var(--text-secondary);
            margin-bottom: 1.5rem;
        }

        .share-buttons {
            display: flex;
            gap: 1rem;
            justify-content: center;
            flex-wrap: wrap;
        }

        .share-btn {
            padding: 0.625rem 1.5rem;
            border-radius: 8px;
            text-decoration: none;
            color: white;
            font-weight: 500;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            box-shadow: var(--shadow-sm);
        }

        .share-linkedin {
            background: #0A66C2;
        }

        .share-linkedin:hover {
            background: #004182;
            transform: translateY(-2px);
            box-shadow: var(--shadow-md);
        }

        .share-whatsapp {
            background: #25D366;
        }

        .share-whatsapp:hover {
            background: #128C7E;
            transform: translateY(-2px);
            box-shadow: var(--shadow-md);
        }

        /* What's New Section */
        .whats-new-section {
            max-width: 1000px;
            margin: 3rem auto;
            padding: 0 1.5rem;
        }

        .whats-new-header {
            text-align: center;
            margin-bottom: 2rem;
        }

        .whats-new-header h2 {
            font-size: 2rem;
            margin-bottom: 0.5rem;
            background: linear-gradient(135deg, #EC4899, #8B5CF6);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .whats-new-header p {
            color: var(--text-muted);
            font-size: 1.1rem;
        }

        .whats-new-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 1.5rem;
        }

        .whats-new-card {
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 16px;
            padding: 1.5rem;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .whats-new-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: var(--card-accent, linear-gradient(135deg, #3B82F6, #1D4ED8));
        }

        .whats-new-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 24px rgba(0,0,0,0.15);
            border-color: transparent;
        }

        .whats-new-card-icon {
            width: 48px;
            height: 48px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            margin-bottom: 1rem;
        }

        .whats-new-card-title {
            font-size: 1.15rem;
            font-weight: 700;
            color: var(--text-color);
            margin-bottom: 0.5rem;
        }

        .whats-new-card-desc {
            color: var(--text-muted);
            font-size: 0.9rem;
            line-height: 1.6;
            margin-bottom: 1rem;
        }

        .whats-new-card-tag {
            display: inline-block;
            padding: 0.25rem 0.75rem;
            border-radius: 20px;
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .tag-new {
            background: rgba(16, 185, 129, 0.15);
            color: #10B981;
        }

        .tag-improved {
            background: rgba(59, 130, 246, 0.15);
            color: #3B82F6;
        }

        .tag-beta {
            background: rgba(236, 72, 153, 0.15);
            color: #EC4899;
        }

        /* Card accent colors */
        .whats-new-card.card-notes { --card-accent: linear-gradient(135deg, #14B8A6, #0D9488); }
        .whats-new-card.card-streak { --card-accent: linear-gradient(135deg, #EC4899, #DB2777); }
        .whats-new-card.card-pwa { --card-accent: linear-gradient(135deg, #8B5CF6, #6366F1); }
        .whats-new-card.card-tour { --card-accent: linear-gradient(135deg, #F59E0B, #D97706); }
        .whats-new-card.card-compare { --card-accent: linear-gradient(135deg, #8B5CF6, #7C3AED); }
        .whats-new-card.card-bookmarks { --card-accent: linear-gradient(135deg, #F97316, #EA580C); }
        .whats-new-card.card-analytics { --card-accent: linear-gradient(135deg, #6366F1, #4F46E5); }
        .whats-new-card.card-reading { --card-accent: linear-gradient(135deg, #F59E0B, #D97706); }
        .whats-new-card.card-casestudies { --card-accent: linear-gradient(135deg, #10B981, #059669); }
        .whats-new-card.card-devdiscourses { --card-accent: linear-gradient(135deg, #8B5CF6, #6366F1); }

        .whats-new-card-icon.icon-notes { background: rgba(20, 184, 166, 0.15); }
        .whats-new-card-icon.icon-streak { background: rgba(236, 72, 153, 0.15); }
        .whats-new-card-icon.icon-pwa { background: rgba(139, 92, 246, 0.15); }
        .whats-new-card-icon.icon-devdiscourses { background: rgba(139, 92, 246, 0.15); }
        .whats-new-card-icon.icon-tour { background: rgba(245, 158, 11, 0.15); }
        .whats-new-card-icon.icon-compare { background: rgba(139, 92, 246, 0.15); }
        .whats-new-card-icon.icon-bookmarks { background: rgba(249, 115, 22, 0.15); }
        .whats-new-card-icon.icon-analytics { background: rgba(99, 102, 241, 0.15); }
        .whats-new-card-icon.icon-reading { background: rgba(245, 158, 11, 0.15); }

        @media (max-width: 768px) {
            .whats-new-grid {
                grid-template-columns: 1fr;
            }
            
            .whats-new-header h2 {
                font-size: 1.6rem;
            }
        }

        /* Interactive What's New Cards */
        .whats-new-card {
            cursor: pointer;
        }

        .whats-new-card-expand {
            display: none;
            margin-top: 1rem;
            padding-top: 1rem;
            border-top: 1px solid var(--border-color);
        }

        .whats-new-card.expanded .whats-new-card-expand {
            display: block;
            animation: slideDown 0.3s ease;
        }

        @keyframes slideDown {
            from {
                opacity: 0;
                max-height: 0;
            }
            to {
                opacity: 1;
                max-height: 500px;
            }
        }

        .whats-new-card-expand-content {
            color: var(--text-secondary);
            font-size: 0.9rem;
            line-height: 1.7;
            margin-bottom: 1rem;
        }

        .whats-new-card-expand-content ul {
            margin: 0.75rem 0;
            padding-left: 1.25rem;
        }

        .whats-new-card-expand-content li {
            margin-bottom: 0.5rem;
        }

        .whats-new-card-action {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.6rem 1.2rem;
            background: var(--gradient-primary);
            color: white;
            border-radius: 8px;
            font-weight: 600;
            font-size: 0.85rem;
            text-decoration: none;
            transition: all 0.2s ease;
        }

        .whats-new-card-action:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
        }

        .whats-new-card-action svg {
            width: 16px;
            height: 16px;
            stroke: currentColor;
            fill: none;
        }

        .whats-new-toggle-icon {
            position: absolute;
            top: 1.5rem;
            right: 1.5rem;
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-muted);
            transition: transform 0.3s ease;
        }

        .whats-new-card.expanded .whats-new-toggle-icon {
            transform: rotate(180deg);
        }

        .whats-new-toggle-icon svg {
            width: 20px;
            height: 20px;
            stroke: currentColor;
            fill: none;
            stroke-width: 2;
        }

        /* Enhanced Support Section */
        .enhanced-support-section {
            max-width: 1000px;
            margin: 3rem auto;
            padding: 0 1.5rem;
        }

        .enhanced-support-card {
            background: linear-gradient(135deg, rgba(14, 165, 233, 0.08), rgba(99, 102, 241, 0.08));
            border: 1px solid var(--border-color);
            border-radius: 20px;
            padding: 2.5rem;
            text-align: center;
        }

        .enhanced-support-title {
            font-size: 1.75rem;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.75rem;
        }

        .enhanced-support-desc {
            color: var(--text-secondary);
            font-size: 1.1rem;
            max-width: 600px;
            margin: 0 auto 1.5rem;
            line-height: 1.7;
        }

        .support-options {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1.5rem;
            margin-top: 2rem;
        }

        .support-options-grid {
            grid-template-columns: 1fr 1fr;
        }

        .support-option-wide {
            grid-column: span 1;
        }

        @media (max-width: 900px) {
            .support-options-grid {
                grid-template-columns: 1fr;
            }
            .support-option-wide {
                grid-column: span 1;
            }
        }

        .support-title-icon {
            width: 28px;
            height: 28px;
            vertical-align: middle;
            margin-right: 0.5rem;
            color: #ec4899;
        }

        .support-option {
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 16px;
            padding: 1.5rem;
            text-align: center;
            transition: all 0.3s ease;
        }

        .support-option:hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 24px rgba(0,0,0,0.1);
            border-color: var(--accent-color);
        }

        .support-option-highlight {
            border-color: #10B981;
            background: linear-gradient(135deg, rgba(16, 185, 129, 0.05) 0%, rgba(16, 185, 129, 0.02) 100%);
        }

        .support-option-highlight:hover {
            border-color: #10B981;
            box-shadow: 0 12px 24px rgba(16, 185, 129, 0.15);
        }

        .support-option-icon {
            margin-bottom: 1rem;
        }

        .support-option-icon svg {
            width: 48px;
            height: 48px;
            color: var(--accent-color);
        }

        .support-option-title {
            font-weight: 700;
            font-size: 1.1rem;
            color: var(--text-primary);
            margin-bottom: 0.5rem;
        }

        .support-option-desc {
            color: var(--text-muted);
            font-size: 0.9rem;
            line-height: 1.5;
        }

        .support-option-action {
            display: inline-block;
            margin-top: 1rem;
            padding: 0.5rem 1.25rem;
            background: var(--gradient-primary);
            color: white;
            border: none;
            border-radius: 8px;
            font-weight: 600;
            font-size: 0.85rem;
            text-decoration: none;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .support-option-action:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
        }

        .support-option-action-green {
            background: linear-gradient(135deg, #10B981 0%, #059669 100%);
        }

        .support-option-action-green:hover {
            box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
        }

        .support-share-buttons {
            display: flex;
            gap: 0.75rem;
            justify-content: center;
            margin-top: 1rem;
            flex-wrap: wrap;
        }

        .support-share-btn {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.6rem 1.25rem;
            border-radius: 8px;
            font-weight: 600;
            font-size: 0.85rem;
            text-decoration: none;
            color: white;
            transition: all 0.2s ease;
        }

        .support-share-btn svg {
            width: 18px;
            height: 18px;
        }

        .support-share-linkedin {
            background: #0A66C2;
        }

        .support-share-linkedin:hover {
            background: #004182;
            transform: translateY(-2px);
        }

        .support-share-whatsapp {
            /* WCAG AA: white text on emerald-800 #065F46 = 8.27:1.
               Was #25D366 (light green) which is 1.49:1 — fails. */
            background: #065F46;
        }

        .support-share-whatsapp:hover {
            background: #064E3B;
            transform: translateY(-2px);
        }

        .upi-display {
            display: inline-flex;
            align-items: center;
            gap: 0.75rem;
            background: rgba(16, 185, 129, 0.1);
            border: 1px dashed #10B981;
            border-radius: 12px;
            padding: 1rem 1.5rem;
            margin-top: 1rem;
        }

        .upi-display code {
            font-family: 'JetBrains Mono', monospace;
            font-size: 1.25rem;
            color: #10B981;
            font-weight: 700;
        }

        .upi-copy-btn {
            background: #10B981;
            color: white;
            border: none;
            padding: 0.4rem 0.8rem;
            border-radius: 6px;
            cursor: pointer;
            font-size: 0.8rem;
            font-weight: 600;
            transition: all 0.2s ease;
        }

        .upi-copy-btn:hover {
            background: #059669;
        }

        @media (max-width: 768px) {
            .support-options {
                grid-template-columns: 1fr;
            }
            
            .enhanced-support-card {
                padding: 1.5rem;
            }
            
            .enhanced-support-title {
                font-size: 1.4rem;
            }

            .support-share-buttons {
                flex-direction: column;
            }

            .support-share-btn {
                justify-content: center;
            }
        }

        /* Newsletter Section */
        .newsletter-section {
            background: var(--gradient-primary);
            padding: 3rem 2rem;
            border-radius: 16px;
            max-width: 700px;
            margin: 3rem auto;
            text-align: center;
            box-shadow: var(--shadow-lg);
        }

        .newsletter-section h3 {
            color: white;
            margin-bottom: 1rem;
            font-size: 1.75rem;
        }

        .newsletter-section p {
            color: rgba(255, 255, 255, 0.9);
            margin-bottom: 2rem;
        }

        .newsletter-btn {
            background: white;
            color: var(--accent-color);
            padding: 0.875rem 2rem;
            border-radius: 8px;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            font-weight: 600;
            transition: all 0.3s;
            box-shadow: var(--shadow-md);
        }

        .newsletter-btn:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-lg);
        }

        /* WhatsApp PLC Community */
        .whatsapp-plc-section {
            text-align: center;
            padding: 3rem 2rem;
            margin: 2rem auto;
            max-width: 800px;
            background: linear-gradient(135deg, rgba(37, 211, 102, 0.08) 0%, rgba(37, 211, 102, 0.02) 100%);
            border: 2px solid rgba(37, 211, 102, 0.25);
            border-radius: 16px;
            position: relative;
            overflow: hidden;
        }
        .whatsapp-plc-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, #25D366, #128C7E, #075E54);
        }
        .whatsapp-plc-badge {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            background: rgba(37, 211, 102, 0.12);
            color: #25D366;
            padding: 0.3rem 0.8rem;
            border-radius: 20px;
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-bottom: 1rem;
        }
        .whatsapp-plc-section h3 {
            font-size: 1.5rem;
            font-weight: 700;
            margin-bottom: 0.75rem;
            color: var(--text-primary);
        }
        .whatsapp-plc-section p {
            color: var(--text-secondary);
            font-size: 0.95rem;
            line-height: 1.6;
            margin-bottom: 1.5rem;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
        }
        .whatsapp-plc-btn {
            display: inline-flex;
            align-items: center;
            gap: 0.6rem;
            padding: 0.85rem 2rem;
            background: #25D366;
            color: white;
            font-weight: 600;
            font-size: 1rem;
            border-radius: 10px;
            text-decoration: none;
            transition: all 0.3s ease;
            box-shadow: 0 4px 14px rgba(37, 211, 102, 0.3);
        }
        .whatsapp-plc-btn:hover {
            background: #128C7E;
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
        }
        .whatsapp-plc-btn svg {
            width: 22px;
            height: 22px;
            fill: white;
        }
        .whatsapp-plc-features {
            display: flex;
            gap: 1.5rem;
            justify-content: center;
            flex-wrap: wrap;
            margin-top: 1.5rem;
        }
        .whatsapp-plc-feature {
            display: flex;
            align-items: center;
            gap: 0.4rem;
            font-size: 0.82rem;
            color: var(--text-secondary);
        }
        .whatsapp-plc-feature img {
            width: 16px;
            height: 16px;
            opacity: 0.7;
        }
        [data-theme="light"] .whatsapp-plc-section {
            background: linear-gradient(135deg, rgba(37, 211, 102, 0.06) 0%, rgba(37, 211, 102, 0.01) 100%);
        }

        /* Creator Box */
        .creator-box {
            background: var(--card-bg);
            padding: 2.5rem;
            border-radius: 12px;
            border: 1px solid var(--border-color);
            box-shadow: var(--shadow-md);
        }

        .creator-photo {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            margin: 0 auto 1.5rem;
            border: 4px solid var(--accent-color);
            object-fit: cover;
            background: var(--gradient-primary);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            font-weight: 700;
            color: white;
        }

        .creator-box h3 {
            color: var(--text-primary);
            margin-bottom: 0.5rem;
            font-size: 1.5rem;
        }

        .creator-box .title {
            /* WCAG AA: sky-800 #075985 = 7.56:1 on white. Was sky-500 #0EA5E9 = 2.77:1. */
            color: #075985;
            margin-bottom: 1rem;
            font-size: 1rem;
            font-weight: 500;
        }
        body.dark-mode .creator-box .title, [data-theme="dark"] .creator-box .title { color: #7DD3FC; }

        .creator-box p {
            color: var(--text-secondary);
            margin-bottom: 1.5rem;
            line-height: 1.7;
            font-size: 0.95rem;
        }

        .social-links {
            display: flex;
            gap: 1rem;
            justify-content: center;
            flex-wrap: wrap;
        }

        .social-links a {
            color: var(--text-secondary);
            text-decoration: none;
            padding: 0.5rem 1rem;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            transition: all 0.3s;
            font-size: 0.875rem;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }

        .social-links a:hover {
            background: var(--accent-color);
            color: white;
            border-color: var(--accent-color);
        }

        /* Wall of Love */
        .testimonials-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 2rem;
            margin-top: 3rem;
        }

        .testimonial-card {
            background: var(--card-bg);
            padding: 2rem;
            border-radius: 12px;
            border: 1px solid var(--border-color);
            position: relative;
            transition: all 0.3s;
            box-shadow: var(--shadow-sm);
        }

        .testimonial-card:hover {
            transform: translateY(-3px);
            box-shadow: var(--shadow-lg);
        }

        .testimonial-lang {
            display: inline-block;
            background: var(--hover-bg);
            color: var(--accent-color);
            padding: 0.25rem 0.75rem;
            border-radius: 4px;
            font-size: 0.7rem;
            margin-bottom: 1rem;
            text-transform: uppercase;
            font-weight: 600;
            letter-spacing: 0.5px;
        }

        .testimonial-quote {
            color: var(--text-primary);
            font-style: italic;
            line-height: 1.8;
            margin-bottom: 1.5rem;
            position: relative;
            padding-left: 2rem;
        }

        .testimonial-quote::before {
            content: '"';
            position: absolute;
            left: 0;
            top: -10px;
            font-size: 3rem;
            color: var(--accent-color);
            opacity: 0.2;
            font-family: 'Amaranth', sans-serif;
        }

        .testimonial-author {
            color: var(--text-secondary);
            font-size: 0.875rem;
        }

        .testimonial-author strong {
            color: var(--text-primary);
            display: block;
            margin-bottom: 0.25rem;
            font-weight: 600;
        }

        /* Footer */
        .footer {
            background: var(--secondary-bg);
            padding: 3rem 1.5rem 2rem;
            margin-top: 4rem;
            border-top: 1px solid var(--border-color);
        }

        .footer-content {
            max-width: 1200px;
            margin: 0 auto;
        }

        .footer-links {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 2rem;
            margin-bottom: 2rem;
        }

        .footer-section h4 {
            /* WCAG AA: sky-800 #075985 = 7.56:1 on the footer bg.
               Was sky-500 #0EA5E9 which is 2.65:1 — fails. */
            color: #075985;
            margin-bottom: 1rem;
            font-size: 1rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        body.dark-mode .footer-section h4, [data-theme="dark"] .footer-section h4 { color: #7DD3FC; }

        .footer-section ul {
            list-style: none;
        }

        .footer-section li {
            margin-bottom: 0.5rem;
        }

        .footer-section a {
            color: var(--text-secondary);
            text-decoration: none;
            transition: color 0.3s;
            font-size: 0.9rem;
        }

        .footer-section a:hover {
            color: var(--accent-color);
        }

        .footer-bottom {
            border-top: 1px solid var(--border-color);
            padding-top: 2rem;
            margin-top: 2rem;
            text-align: center;
            color: var(--text-secondary);
            font-size: 0.875rem;
        }

        /* Chatbot Modal */
        .chatbot-modal {
            display: none;
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 400px;
            max-width: 90vw;
            height: 600px;
            max-height: 80vh;
            background: var(--card-bg);
            border-radius: 16px;
            box-shadow: var(--shadow-xl);
            z-index: 2000;
            flex-direction: column;
            animation: slideUpChat 0.3s ease;
            border: 1px solid var(--border-color);
        }

        .chatbot-modal.show {
            display: flex;
        }

        @keyframes slideUpChat {
            from { transform: translateY(100%); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }

        .chat-header {
            background: var(--gradient-primary);
            padding: 1rem 1.5rem;
            border-radius: 16px 16px 0 0;
            color: white;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .chat-header h3 {
            margin: 0;
            font-size: 1.125rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .chat-close {
            background: rgba(255, 255, 255, 0.1);
            border: none;
            color: white;
            font-size: 1.25rem;
            cursor: pointer;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            transition: background 0.3s;
        }

        .chat-close:hover {
            background: rgba(255, 255, 255, 0.2);
        }

        .chat-messages {
            flex: 1;
            overflow-y: auto;
            padding: 1rem;
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .message {
            animation: fadeIn 0.3s ease;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .bot-message {
            display: flex;
            gap: 0.75rem;
            align-items: flex-start;
        }

        .bot-avatar {
            width: 35px;
            height: 35px;
            background: var(--gradient-primary);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .bot-bubble {
            background: var(--hover-bg);
            padding: 0.75rem 1rem;
            border-radius: 16px;
            border-top-left-radius: 4px;
            max-width: 80%;
            color: var(--text-primary);
        }

        .user-message {
            display: flex;
            justify-content: flex-end;
        }

        .user-bubble {
            background: var(--gradient-primary);
            color: white;
            padding: 0.75rem 1rem;
            border-radius: 16px;
            border-top-right-radius: 4px;
            max-width: 80%;
        }

        .quick-options {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-top: 0.75rem;
        }

        .quick-option {
            background: var(--card-bg);
            border: 1px solid var(--accent-color);
            color: var(--text-primary);
            padding: 0.5rem 1rem;
            border-radius: 20px;
            cursor: pointer;
            transition: all 0.3s;
            font-size: 0.875rem;
            font-family: inherit;
        }

        .quick-option:hover {
            background: var(--accent-color);
            color: white;
            transform: scale(1.05);
        }

        .chat-input-container {
            padding: 1rem;
            border-top: 1px solid var(--border-color);
            display: flex;
            gap: 0.75rem;
        }

        .chat-input {
            flex: 1;
            background: var(--hover-bg);
            border: 1px solid var(--border-color);
            color: var(--text-primary);
            padding: 0.75rem 1rem;
            border-radius: 24px;
            font-family: inherit;
            font-size: 0.95rem;
        }

        .chat-input:focus {
            outline: none;
            border-color: var(--accent-color);
            box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
        }

        .chat-send {
            background: var(--gradient-primary);
            color: white;
            border: none;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.3s;
        }

        .chat-send:hover {
            transform: scale(1.1);
        }

        /* Coaching Modal Specific Styles */
        .coaching-services-grid {
            display: grid;
            gap: 2rem;
            margin-top: 2rem;
        }

        .service-item {
            background: var(--hover-bg);
            padding: 1.5rem;
            border-radius: 12px;
            border: 1px solid var(--border-color);
        }

        .service-item h4 {
            color: var(--text-primary);
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .service-item p {
            color: var(--text-secondary);
            margin-bottom: 1rem;
        }

        .service-item .price {
            color: var(--accent-color);
            font-weight: 600;
            font-size: 1.2rem;
        }

        .sliding-scale-notice {
            background: rgba(14, 165, 233, 0.1);
            border-left: 4px solid var(--accent-color);
            padding: 1rem;
            border-radius: 8px;
            margin-bottom: 2rem;
        }

        .booking-button-container {
            margin-top: 1rem;
        }

        /* Feedback FAB */
        /* Standalone Mojini FAB - moved into Speed Dial toolbox */
        .feedback-fab {
            display: none; /* Now accessed via Speed Dial toolbox */
        }

        .feedback-fab:hover {
            transform: scale(1.1);
            box-shadow: var(--shadow-xl);
        }

        /* Icon Styles */
        .icon {
            width: 20px;
            height: 20px;
            stroke: currentColor;
            stroke-width: 2;
            fill: none;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        .icon-sm {
            width: 16px;
            height: 16px;
            fill: none;
            stroke: currentColor;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        .icon-lg {
            width: 24px;
            height: 24px;
            fill: none;
            stroke: currentColor;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            /* Fix header alignment - keep all buttons in one row */
            .nav-container {
                flex-wrap: nowrap;
                padding: 0.75rem 1rem;
                gap: 0.5rem;
                position: relative;
                align-items: center;
                justify-content: flex-start;
            }

            /* Mobile NEW burst badge - smaller size */
            .new-starburst {
                width: 38px;
                height: 32px;
                margin-right: 0;
                order: 4;
                flex-shrink: 0;
            }
            
            .new-starburst-text {
                font-size: 0.45rem;
            }
            
            /* On mobile, starburst stays visible in header, nav-links is hidden */
            .nav-with-badge {
                display: contents;
            }

            .nav-buttons {
                display: flex;
                order: 2;
                gap: 0.35rem;
                flex-shrink: 0;
                width: auto;
                border-top: none;
                padding-top: 0;
                margin-top: 0;
            }

            .nav-buttons .tour-toggle,
            .nav-buttons .theme-selector {
                height: 38px;
            }
            
            .nav-buttons .theme-selector {
                padding: 3px;
                gap: 2px;
            }
            
            .nav-buttons .theme-btn {
                width: 32px;
                height: 32px;
                padding: 6px;
            }

            .mobile-menu-toggle {
                display: flex !important;
                order: 3;
                width: 48px;
                height: 48px;
                min-width: 48px;
                min-height: 48px;
                z-index: 9999;
                position: relative;
                flex-shrink: 0;
                margin-left: auto;
            }

            .logo-container {
                order: 1;
                flex: 0 1 auto;
                min-width: 0;
                max-width: 160px;
            }

            .nav-links {
                order: 4;
                display: none;
                position: absolute;
                top: 100%;
                left: 0;
                right: 0;
                background: var(--card-bg);
                flex-direction: column;
                padding: 0.5rem 1rem;
                border-top: 1px solid var(--border-color);
                box-shadow: var(--shadow-lg);
                gap: 0;
                z-index: 2000;
                max-height: calc(100vh - 80px);
                overflow-y: auto;
                overscroll-behavior: contain;
            }

            .nav-links.active {
                display: flex;
            }

            .nav-links > li {
                width: 100%;
                border-bottom: 1px solid var(--border-color);
            }

            .nav-links > li:last-child {
                border-bottom: none;
            }

            .nav-links > li > a {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 1rem 0.5rem;
                width: 100%;
            }

            .nav-links > li.has-dropdown > a {
                justify-content: space-between;
            }

            /* Mobile dropdown - click to expand */
            .dropdown-menu {
                position: static;
                transform: none;
                opacity: 1;
                visibility: visible;
                max-height: 0;
                overflow: hidden;
                transition: max-height 0.3s ease;
                box-shadow: none;
                border: none;
                border-radius: 0;
                margin: 0;
                padding: 0;
                background: var(--secondary-bg);
            }

            .nav-links > li.has-dropdown.open .dropdown-menu {
                max-height: 500px;
                padding: 0.5rem 0;
            }

            .nav-links > li.has-dropdown.open .dropdown-arrow {
                transform: rotate(180deg);
            }

            .dropdown-menu a {
                padding: 0.75rem 1.5rem;
            }

            .dropdown-menu a:hover {
                padding-left: 2rem;
            }
            
            /* Mobile menu overlay */
            .mobile-menu-overlay {
                display: none;
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: rgba(0, 0, 0, 0.5);
                z-index: 1999;
                opacity: 0;
                transition: opacity 0.3s ease;
            }
            
            .mobile-menu-overlay.active {
                display: block;
                opacity: 1;
            }

            .logo-tagline {
                display: none;
            }

            .hero h1 {
                font-size: 2rem;
            }

            .cards-grid {
                grid-template-columns: 1fr !important;
            }

            .modal-grid {
                grid-template-columns: 1fr;
            }

            .testimonials-grid {
                grid-template-columns: 1fr;
            }

            /* Fix FAB buttons horizontal alignment on mobile */
            .imx-speed-dial {
                position: fixed !important;
                bottom: 1.25rem !important;
                right: 3rem !important;
                left: auto !important;
                z-index: 1000;
            }
            
            .imx-speed-dial-toggle {
                width: 52px !important;
                height: 52px !important;
            }

            /* Standalone Mojini FAB removed - now in Speed Dial */
            .feedback-fab {
                display: none !important;
            }

            .imx-speed-dial-label {
                font-size: 0.75rem;
                padding: 0.4rem 0.6rem;
            }
            
            /* ===== MOBILE TOUR STYLES ===== */
            .imx-tour-welcome {
                width: calc(100vw - 2rem);
                max-width: 340px;
                padding: 1.5rem;
                margin: 1rem;
                border-radius: 16px;
            }
            
            .imx-tour-welcome h2 {
                font-size: 1.25rem;
            }
            
            .imx-tour-welcome p {
                font-size: 0.9rem;
                margin-bottom: 1.25rem;
            }
            
            .imx-tour-welcome-buttons {
                flex-direction: column;
                gap: 0.75rem;
            }
            
            .imx-tour-btn-primary,
            .imx-tour-btn-secondary {
                width: 100%;
                padding: 0.75rem 1.5rem;
                font-size: 0.95rem;
                /* Touch-friendly enhancements */
                touch-action: manipulation;
                -webkit-tap-highlight-color: transparent;
            }
            
            .imx-tour-tooltip {
                max-width: calc(100vw - 2rem) !important;
                width: calc(100vw - 2rem) !important;
                padding: 1.25rem;
                border-radius: 14px;
                left: 1rem !important;
                right: 1rem !important;
                margin: 0 auto;
            }
            
            .imx-tour-title {
                font-size: 1rem;
            }
            
            .imx-tour-desc {
                font-size: 0.9rem;
                line-height: 1.5;
                margin-bottom: 1rem;
            }
            
            .imx-tour-step-indicator {
                margin-bottom: 0.75rem;
            }
            
            .imx-tour-actions {
                flex-wrap: wrap;
                gap: 0.5rem;
            }
            
            .imx-tour-nav-buttons {
                gap: 0.5rem;
            }
            
            .imx-tour-prev,
            .imx-tour-next {
                padding: 0.6rem 0.9rem;
                font-size: 0.85rem;
                /* Touch-friendly enhancements */
                touch-action: manipulation;
                -webkit-tap-highlight-color: transparent;
                min-height: 44px;
                min-width: 44px;
            }
            
            .imx-tour-skip {
                padding: 0.5rem 0.75rem;
                font-size: 0.8rem;
                min-height: 44px;
                touch-action: manipulation;
                -webkit-tap-highlight-color: transparent;
            }
            
            /* Hide arrow connectors on mobile - they often get positioned incorrectly */
            .imx-tour-arrow {
                display: none !important;
            }
            
            /* Simplify spotlight on mobile */
            .imx-tour-spotlight {
                border-radius: 8px;
                box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.6), 0 0 20px rgba(14, 165, 233, 0.6), inset 0 0 0 3px rgba(14, 165, 233, 1);
            }
            
            /* Ensure tooltip arrow indicators work on mobile */
            .imx-tour-tooltip::before {
                display: none;
            }
        }
        
        /* Extra small devices - phones in portrait */
        @media (max-width: 480px) {
            .imx-tour-welcome {
                width: calc(100vw - 1.5rem);
                padding: 1.25rem;
            }
            
            .imx-tour-tooltip {
                width: calc(100vw - 1.5rem) !important;
                padding: 1rem;
            }
            
            .imx-tour-title {
                font-size: 0.95rem;
            }
            
            .imx-tour-desc {
                font-size: 0.85rem;
            }
            
            .imx-tour-actions {
                flex-direction: column;
                align-items: stretch;
            }
            
            .imx-tour-nav-buttons {
                justify-content: space-between;
                width: 100%;
            }
            
            .imx-tour-prev,
            .imx-tour-next {
                flex: 1;
                justify-content: center;
            }
        }

/* ImpactLex Banner Styles */
.impactlex-banner {
    max-width: 1200px;
    margin: 0 auto 2rem;
    padding: 0 1.5rem;
}

.impactlex-banner-inner {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.25rem 1.75rem;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.08) 0%, rgba(99, 102, 241, 0.08) 50%, rgba(16, 185, 129, 0.06) 100%);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.impactlex-banner-inner::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
    animation: bannerShine 3s ease-in-out infinite;
}

@keyframes bannerShine {
    0%, 100% { left: -100%; }
    50% { left: 100%; }
}

.impactlex-banner-inner:hover {
    transform: translateY(-2px);
    border-color: var(--accent-color);
    box-shadow: var(--shadow-lg);
}

.impactlex-banner-icon {
    width: 48px;
    height: 48px;
    background: var(--gradient-primary);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.impactlex-banner-icon svg {
    width: 26px;
    height: 26px;
    stroke: white;
    stroke-width: 2;
    fill: none;
}

.impactlex-banner-content {
    flex: 1;
    min-width: 0;
}

.impactlex-banner-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: linear-gradient(135deg, #10B981 0%, #047857 100%);
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.25rem 0.7rem;
    border-radius: 20px;
    margin-bottom: 0.4rem;
}

.impactlex-banner-badge-dot {
    width: 6px;
    height: 6px;
    background: white;
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

.impactlex-banner-title {
    font-family: 'Inter', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.25rem 0;
    line-height: 1.3;
}

.impactlex-banner-title span {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.impactlex-banner-desc {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

.impactlex-banner-cta {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--gradient-primary);
    color: white;
    padding: 0.65rem 1.25rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.85rem;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.impactlex-banner-cta:hover {
    transform: scale(1.03);
    box-shadow: var(--shadow-md);
}

.impactlex-banner-cta svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}

@media (max-width: 768px) {
    .impactlex-banner-inner {
        flex-direction: column;
        text-align: center;
        padding: 1.25rem;
    }
    
    .impactlex-banner-cta {
        width: 100%;
        justify-content: center;
    }
}

/* imx button style */
.imx-btn{display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .7rem;border-radius:999px;border:1px solid var(--border-color);background:var(--card-bg);text-decoration:none;font-size:.85rem}
.imx-btn:hover{transform:translateY(-1px)}
.imx-chip.imx-disabled{opacity:.55;cursor:default}

/* FieldCases Banner */
.casestudies-banner {
    max-width: 1200px;
    margin: 0 auto 2rem;
    padding: 0 1.5rem;
}

.casestudies-banner-inner {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.25rem 1.75rem;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, rgba(239, 68, 68, 0.06) 50%, rgba(249, 115, 22, 0.06) 100%);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.casestudies-banner-inner:hover {
    transform: translateY(-2px);
    border-color: #F59E0B;
    box-shadow: var(--shadow-lg);
}

.casestudies-banner-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #F59E0B 0%, #EF4444 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.casestudies-banner-icon svg {
    width: 26px;
    height: 26px;
    stroke: white;
    stroke-width: 2;
    fill: none;
}

.casestudies-banner-content {
    flex: 1;
    min-width: 0;
}

.casestudies-banner-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
    margin-bottom: 0.4rem;
}

.casestudies-banner-title {
    font-family: 'Inter', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.25rem 0;
    line-height: 1.3;
}

.casestudies-banner-title span {
    background: linear-gradient(135deg, #F59E0B 0%, #EF4444 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.casestudies-banner-desc {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

.casestudies-banner-stats {
    display: flex;
    gap: 1rem;
    margin-top: 0.5rem;
}

.casestudies-banner-stat {
    font-size: 0.75rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.casestudies-banner-stat strong {
    color: #F59E0B;
    font-weight: 700;
}

.casestudies-banner-cta {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: linear-gradient(135deg, #F59E0B 0%, #EF4444 100%);
    color: white;
    padding: 0.65rem 1.25rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.85rem;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.casestudies-banner-cta:hover {
    transform: scale(1.03);
    box-shadow: var(--shadow-md);
}

.casestudies-banner-cta svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}

@media (max-width: 768px) {
    .casestudies-banner-inner {
        flex-direction: column;
        text-align: center;
        padding: 1.25rem;
    }
    .casestudies-banner-cta {
        width: 100%;
        justify-content: center;
    }
    .casestudies-banner-stats {
        justify-content: center;
    }
}

/* DevDiscourses Banner - purple/indigo variant */
.devdiscourses-banner {
    max-width: 1200px;
    margin: 0 auto 2rem;
    padding: 0 1.5rem;
}
.devdiscourses-banner-inner {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.25rem 1.75rem;
    background: linear-gradient(135deg, rgba(139,92,246,0.08) 0%, rgba(99,102,241,0.06) 50%, rgba(79,70,229,0.06) 100%);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}
.devdiscourses-banner-inner:hover {
    transform: translateY(-2px);
    border-color: #8B5CF6;
    box-shadow: var(--shadow-lg);
}
.devdiscourses-banner-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #8B5CF6 0%, #6366F1 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: white;
}
.devdiscourses-banner-icon svg {
    width: 26px;
    height: 26px;
    stroke: white;
    stroke-width: 1.5;
    fill: none;
}
.devdiscourses-banner-icon svg path {
    stroke: white;
}
.devdiscourses-banner-content {
    flex: 1;
    min-width: 0;
}
.devdiscourses-banner-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: linear-gradient(135deg, #8B5CF6 0%, #6366F1 100%);
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
    margin-bottom: 0.4rem;
}
.devdiscourses-banner-title {
    font-family: 'Inter', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.25rem 0;
    line-height: 1.3;
}
.devdiscourses-banner-title span {
    background: linear-gradient(135deg, #8B5CF6 0%, #6366F1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.devdiscourses-banner-desc {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}
.devdiscourses-banner-stats {
    display: flex;
    gap: 1rem;
    margin-top: 0.5rem;
}
.devdiscourses-banner-stat {
    font-size: 0.75rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 0.3rem;
}
.devdiscourses-banner-stat strong {
    color: #8B5CF6;
    font-weight: 700;
}
.devdiscourses-banner-cta {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: linear-gradient(135deg, #8B5CF6 0%, #6366F1 100%);
    color: white;
    padding: 0.65rem 1.25rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.85rem;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.3s ease;
}
.devdiscourses-banner-cta:hover {
    transform: scale(1.03);
    box-shadow: var(--shadow-md);
}
.devdiscourses-banner-cta svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}
@media (max-width: 768px) {
    .devdiscourses-banner-inner {
        flex-direction: column;
        text-align: center;
        padding: 1.25rem;
    }
    .devdiscourses-banner-cta {
        width: 100%;
        justify-content: center;
    }
    .devdiscourses-banner-stats {
        justify-content: center;
    }
}

/* ========================================
   ImpactMojo Features: Bookmarks, Compare, Lo-Fi
   ======================================== */

/* Floating Section Navigator - right-edge dot nav */
.section-nav-float {
    position: fixed;
    right: 4rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 900;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.section-nav-float.visible {
    opacity: 1;
    pointer-events: auto;
}
.section-nav-dot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    text-decoration: none;
    padding: 4px 0;
}
.section-nav-dot-circle {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--border-color, #cbd5e1);
    transition: all 0.25s ease;
    flex-shrink: 0;
}
.section-nav-dot.active .section-nav-dot-circle {
    background: var(--accent-color, #0EA5E9);
    transform: scale(1.4);
    box-shadow: 0 0 6px rgba(14, 165, 233, 0.4);
}
.section-nav-dot:hover .section-nav-dot-circle {
    background: var(--accent-color, #0EA5E9);
    transform: scale(1.2);
}
.section-nav-label {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--text-muted, #52627A);
    white-space: nowrap;
    opacity: 0;
    transform: translateX(4px);
    transition: all 0.2s ease;
    pointer-events: none;
}
.section-nav-dot:hover .section-nav-label {
    opacity: 1;
    transform: translateX(0);
}
@media (max-width: 768px) {
    .section-nav-float { display: none; }
}

/* Floating Action Buttons (FABs) - Bottom Left to avoid MOJINI */
/* Speed Dial FAB Container */
.imx-speed-dial {
    position: fixed;
    bottom: 2rem;
    right: 5rem;
    z-index: 1000;
}

.imx-speed-dial-toggle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #3B82F6, #1D4ED8);
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
    transition: all 0.3s ease;
    position: relative;
    z-index: 10;
}

.imx-speed-dial-toggle:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 25px rgba(59, 130, 246, 0.5);
}

.imx-speed-dial-toggle svg {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: white;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.3s ease;
}

.imx-speed-dial.open .imx-speed-dial-toggle svg {
    transform: rotate(45deg);
}

.imx-speed-dial-toggle .toggle-icon-close {
    display: none;
}

.imx-speed-dial.open .imx-speed-dial-toggle .toggle-icon-tools {
    display: none;
}

.imx-speed-dial.open .imx-speed-dial-toggle .toggle-icon-close {
    display: block;
}

/* Speed Dial Menu */
.imx-speed-dial-menu {
    position: absolute;
    bottom: 70px;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s ease;
}

.imx-speed-dial.open .imx-speed-dial-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Speed Dial Items - label on left, button on right */
.imx-speed-dial-item {
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    gap: 0.75rem;
    opacity: 0;
    transform: translateY(10px) scale(0.8);
    transition: all 0.2s ease;
}

.imx-speed-dial.open .imx-speed-dial-item {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Staggered animation */
.imx-speed-dial.open .imx-speed-dial-item:nth-child(1) { transition-delay: 0.02s; }
.imx-speed-dial.open .imx-speed-dial-item:nth-child(2) { transition-delay: 0.04s; }
.imx-speed-dial.open .imx-speed-dial-item:nth-child(3) { transition-delay: 0.06s; }
.imx-speed-dial.open .imx-speed-dial-item:nth-child(4) { transition-delay: 0.08s; }
.imx-speed-dial.open .imx-speed-dial-item:nth-child(5) { transition-delay: 0.10s; }
.imx-speed-dial.open .imx-speed-dial-item:nth-child(6) { transition-delay: 0.12s; }
.imx-speed-dial.open .imx-speed-dial-item:nth-child(7) { transition-delay: 0.14s; }
.imx-speed-dial.open .imx-speed-dial-item:nth-child(8) { transition-delay: 0.16s; }
.imx-speed-dial.open .imx-speed-dial-item:nth-child(9) { transition-delay: 0.18s; }
.imx-speed-dial.open .imx-speed-dial-item:nth-child(10) { transition-delay: 0.20s; }

.imx-speed-dial-label {
    background: var(--card-bg);
    color: var(--text-primary);
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    border: 1px solid var(--border-color);
}

.imx-speed-dial-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 10px rgba(0,0,0,0.25);
    transition: all 0.2s ease;
    position: relative;
    flex-shrink: 0;
}

.imx-speed-dial-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 5px 15px rgba(0,0,0,0.35);
}

.imx-speed-dial-btn svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: white;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.imx-speed-dial-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: #6B7280 !important;
}

.imx-speed-dial-btn.disabled:hover {
    transform: none;
}

/* Speed Dial Button Colors */
.imx-sd-bookmarks { background: linear-gradient(135deg, #F97316, #EA580C); }
.imx-sd-compare { background: linear-gradient(135deg, #8B5CF6, #7C3AED); }
.imx-sd-lofi { background: linear-gradient(135deg, #10B981, #059669); }
.imx-sd-pomodoro { background: linear-gradient(135deg, #EF4444, #DC2626); }
.imx-sd-analytics { background: linear-gradient(135deg, #8B5CF6, #6366F1); }
.imx-sd-reading { background: linear-gradient(135deg, #F59E0B, #D97706); }
.imx-sd-notes { background: linear-gradient(135deg, #14B8A6, #0D9488); }
.imx-sd-streak { background: linear-gradient(135deg, #EC4899, #DB2777); }

/* ===== PERSONAL NOTES STYLES ===== */
.imx-notes-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: 100%;
}

.imx-notes-toolbar {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

.imx-notes-toolbar input {
    flex: 1;
    min-width: 150px;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--card-bg);
    color: var(--text-color);
    font-size: 0.9rem;
}

.imx-notes-toolbar button {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.2s;
}

.imx-notes-btn-primary {
    background: linear-gradient(135deg, #14B8A6, #0D9488);
    color: white;
}

.imx-notes-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(20, 184, 166, 0.3);
}

.imx-notes-btn-secondary {
    background: var(--border-color);
    color: var(--text-color);
}

.imx-notes-btn-secondary:hover {
    background: var(--text-muted);
    color: white;
}

.imx-notes-list {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-height: 200px;
    max-height: 350px;
}

.imx-note-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 1rem;
    transition: all 0.2s;
}

.imx-note-card:hover {
    border-color: #14B8A6;
    box-shadow: 0 2px 8px rgba(20, 184, 166, 0.1);
}

.imx-note-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.5rem;
}

.imx-note-title {
    font-weight: 600;
    color: var(--text-color);
    font-size: 0.95rem;
}

.imx-note-date {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.imx-note-content {
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

.imx-note-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
}

.imx-note-actions button {
    padding: 0.35rem 0.75rem;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.8rem;
    transition: all 0.2s;
}

.imx-note-edit {
    background: rgba(20, 184, 166, 0.1);
    color: #14B8A6;
}

.imx-note-edit:hover {
    background: #14B8A6;
    color: white;
}

.imx-note-delete {
    background: rgba(239, 68, 68, 0.1);
    color: #EF4444;
}

.imx-note-delete:hover {
    background: #EF4444;
    color: white;
}

.imx-notes-editor {
    display: none;
    flex-direction: column;
    gap: 0.75rem;
}

.imx-notes-editor.active {
    display: flex;
}

.imx-notes-editor input {
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--card-bg);
    color: var(--text-color);
    font-size: 1rem;
    font-weight: 500;
}

.imx-notes-editor textarea {
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--card-bg);
    color: var(--text-color);
    font-size: 0.9rem;
    min-height: 150px;
    resize: vertical;
    font-family: inherit;
    line-height: 1.5;
}

.imx-notes-editor-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}

.imx-notes-empty {
    text-align: center;
    padding: 2rem;
    color: var(--text-muted);
}

.imx-notes-empty svg {
    width: 48px;
    height: 48px;
    stroke: var(--border-color);
    margin-bottom: 1rem;
}

/* ===== LEARNING STREAK STYLES ===== */
.imx-streak-container {
    text-align: center;
}

.imx-streak-hero {
    padding: 1.5rem;
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.1), rgba(219, 39, 119, 0.05));
    border-radius: 16px;
    margin-bottom: 1.5rem;
}

.imx-streak-fire {
    font-size: 4rem;
    margin-bottom: 0.5rem;
}

.imx-streak-count {
    font-size: 3rem;
    font-weight: 700;
    background: linear-gradient(135deg, #EC4899, #DB2777);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.imx-streak-label {
    font-size: 1.1rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

.imx-streak-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.imx-streak-stat {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1rem;
}

.imx-streak-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-color);
}

.imx-streak-stat-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

.imx-streak-calendar {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1rem;
}

.imx-streak-calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.imx-streak-calendar-title {
    font-weight: 600;
    color: var(--text-color);
}

.imx-streak-calendar-nav {
    display: flex;
    gap: 0.5rem;
}

.imx-streak-calendar-nav button {
    width: 32px;
    height: 32px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--card-bg);
    color: var(--text-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.imx-streak-calendar-nav button:hover {
    background: var(--border-color);
}

.imx-streak-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-bottom: 0.5rem;
}

.imx-streak-weekday {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
    text-align: center;
    padding: 0.25rem;
}

.imx-streak-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.imx-streak-day {
    aspect-ratio: 1;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    color: var(--text-muted);
    background: var(--border-color);
    opacity: 0.3;
}

.imx-streak-day.current-month {
    opacity: 1;
    background: rgba(0,0,0,0.05);
}

.imx-streak-day.has-activity {
    background: linear-gradient(135deg, #EC4899, #DB2777);
    color: white;
    font-weight: 600;
}

.imx-streak-day.today {
    box-shadow: 0 0 0 2px #EC4899;
}

.imx-streak-milestones {
    margin-top: 1.5rem;
}

.imx-streak-milestones-title {
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 0.75rem;
    text-align: left;
}

.imx-streak-badges {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
}

.imx-streak-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.75rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    min-width: 70px;
    opacity: 0.4;
    filter: grayscale(1);
    transition: all 0.3s;
}

.imx-streak-badge.earned {
    opacity: 1;
    filter: none;
    border-color: #EC4899;
    box-shadow: 0 2px 8px rgba(236, 72, 153, 0.2);
}

.imx-streak-badge-icon {
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
}

.imx-streak-badge-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-weight: 500;
}

@media (max-width: 768px) {
    .imx-streak-stats {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
    }
    
    .imx-streak-stat {
        padding: 0.75rem 0.5rem;
    }
    
    .imx-streak-stat-value {
        font-size: 1.25rem;
    }
    
    .imx-streak-badges {
        gap: 0.5rem;
    }
    
    .imx-streak-badge {
        min-width: 60px;
        padding: 0.5rem;
    }
}

/* Badge on speed dial buttons */
.imx-speed-dial-btn .imx-fab-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #EF4444;
    color: white;
    font-size: 11px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

.imx-speed-dial-btn .imx-fab-badge:empty {
    display: none;
}

/* Pomodoro active state */
.imx-sd-pomodoro.active {
    animation: pomodoro-pulse 2s ease-in-out infinite;
}

/* Speed Dial Backdrop */
.imx-speed-dial-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.3);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 999;
}

.imx-speed-dial.open ~ .imx-speed-dial-backdrop {
    opacity: 1;
    visibility: visible;
}

/* Card Action Buttons (Save/Compare on each card) */
.imx-card-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.imx-card-btn {
    flex: 1;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--secondary-bg);
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    transition: all 0.2s ease;
}

.imx-card-btn:hover {
    background: var(--hover-bg);
    color: var(--text-primary);
}

.imx-card-btn.active {
    background: var(--accent-color);
    color: white;
    border-color: var(--accent-color);
}

.imx-card-btn svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
}

/* Modal Styles */
.imx-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(4px);
    z-index: 2000;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.imx-modal.active {
    display: flex;
}

.imx-modal-content {
    background: var(--card-bg);
    border-radius: 16px;
    width: 100%;
    max-width: 900px;
    max-height: 85vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 50px rgba(0,0,0,0.4);
}

.imx-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.imx-modal-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.imx-modal-title svg {
    width: 24px;
    height: 24px;
    stroke: var(--accent-color);
    fill: none;
    stroke-width: 2;
}

.imx-modal-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--secondary-bg);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.imx-modal-close:hover {
    background: var(--hover-bg);
    color: var(--text-primary);
}

.imx-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
}

.imx-modal-footer {
    display: flex;
    gap: 1rem;
    padding: 1.5rem;
    border-top: 1px solid var(--border-color);
    justify-content: flex-end;
}

.imx-btn {
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
}

.imx-btn svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
}

.imx-btn-primary {
    background: var(--accent-color);
    color: white;
    border: none;
}

.imx-btn-primary:hover {
    background: var(--accent-hover);
}

.imx-btn-secondary {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.imx-btn-secondary:hover {
    background: var(--hover-bg);
    color: var(--text-primary);
}

.imx-btn-danger {
    background: transparent;
    color: #EF4444;
    border: 1px solid #EF4444;
}

.imx-btn-danger:hover {
    background: #EF4444;
    color: white;
}

/* Bookmarks List */
.imx-bookmarks-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.imx-bookmark-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--secondary-bg);
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.imx-bookmark-info {
    flex: 1;
}

.imx-bookmark-name {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.imx-bookmark-meta {
    font-size: 0.85rem;
    color: var(--text-secondary);
    display: flex;
    gap: 1rem;
}

.imx-bookmark-actions {
    display: flex;
    gap: 0.5rem;
}

.imx-bookmark-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.imx-bookmark-btn svg {
    width: 16px;
    height: 16px;
    stroke: var(--text-secondary);
    fill: none;
    stroke-width: 2;
}

.imx-bookmark-btn:hover {
    background: var(--hover-bg);
}

.imx-bookmark-btn:hover svg {
    stroke: var(--text-primary);
}

.imx-bookmark-btn.delete:hover {
    background: #FEE2E2;
    border-color: #EF4444;
}

.imx-bookmark-btn.delete:hover svg {
    stroke: #EF4444;
}

/* Compare Grid */
.imx-compare-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.imx-compare-card {
    background: var(--secondary-bg);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    padding: 1.5rem;
    position: relative;
}

.imx-compare-remove {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: var(--card-bg);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.imx-compare-remove svg {
    width: 14px;
    height: 14px;
    stroke: var(--text-muted);
    fill: none;
    stroke-width: 2;
}

.imx-compare-remove:hover {
    background: #FEE2E2;
}

.imx-compare-remove:hover svg {
    stroke: #EF4444;
}

.imx-compare-name {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1rem;
    padding-right: 2rem;
}

.imx-compare-row {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.9rem;
}

.imx-compare-row:last-child {
    border-bottom: none;
}

.imx-compare-label {
    color: var(--text-secondary);
}

.imx-compare-value {
    color: var(--text-primary);
    font-weight: 500;
}

.imx-compare-link {
    display: inline-block;
    margin-top: 1rem;
    color: var(--accent-color);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
}

.imx-compare-link:hover {
    text-decoration: underline;
}

/* Lo-Fi Playlists Grid */
.imx-lofi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.imx-lofi-card {
    background: var(--secondary-bg);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    padding: 1.5rem;
    transition: all 0.3s ease;
}

.imx-lofi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.imx-lofi-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, #10B981, #059669);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.imx-lofi-icon svg {
    width: 24px;
    height: 24px;
    stroke: white;
    fill: none;
    stroke-width: 2;
}

.imx-lofi-title {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.imx-lofi-desc {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
    line-height: 1.5;
}

.imx-lofi-links {
    display: flex;
    gap: 0.75rem;
}

.imx-lofi-link {
    flex: 1;
    padding: 0.6rem 1rem;
    border-radius: 8px;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    text-align: center;
    transition: all 0.2s ease;
}

.imx-lofi-link.spotify {
    background: #1DB954;
    color: white;
}

.imx-lofi-link.spotify:hover {
    background: #1AA34A;
}

.imx-lofi-link.youtube {
    background: #FF0000;
    color: white;
}

.imx-lofi-link.youtube:hover {
    background: #CC0000;
}

/* Toast Notifications */
.imx-toast {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--card-bg);
    color: var(--text-primary);
    padding: 1rem 1.5rem;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    z-index: 3000;
    animation: imxToastIn 0.3s ease;
}

.imx-toast.fade-out {
    animation: imxToastOut 0.3s ease forwards;
}

@keyframes imxToastIn {
    from { opacity: 0; transform: translateX(-50%) translateY(20px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes imxToastOut {
    from { opacity: 1; transform: translateX(-50%) translateY(0); }
    to { opacity: 0; transform: translateX(-50%) translateY(20px); }
}

/* Empty State */
.imx-empty {
    text-align: center;
    padding: 3rem 2rem;
    color: var(--text-secondary);
}

.imx-empty svg {
    width: 64px;
    height: 64px;
    stroke: var(--text-muted);
    fill: none;
    stroke-width: 1.5;
    margin-bottom: 1rem;
}

.imx-empty p {
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

.imx-empty small {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* Live Indicator (pulsating dot) */
.live-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(16, 185, 129, 0.15);
    color: #10B981;
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-left: 0.5rem;
}

.live-dot {
    width: 8px;
    height: 8px;
    background: #10B981;
    border-radius: 50%;
    animation: livePulse 1.5s ease-in-out infinite;
}

@keyframes livePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.2); }
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .imx-speed-dial {
        bottom: 1rem;
        right: 1rem;
        left: auto;
    }
    
    .imx-speed-dial-toggle {
        width: 52px;
        height: 52px;
    }
    
    .imx-speed-dial-toggle svg {
        width: 24px;
        height: 24px;
    }
    
    .imx-speed-dial-menu {
        bottom: 62px;
    }
    
    .imx-speed-dial-btn {
        width: 42px;
        height: 42px;
    }
    
    .imx-speed-dial-btn svg {
        width: 18px;
        height: 18px;
    }
    
    .imx-speed-dial-label {
        font-size: 0.8rem;
        padding: 0.4rem 0.6rem;
    }
    
    .imx-modal-content {
        max-height: 90vh;
        border-radius: 12px;
    }
    
    .imx-compare-grid {
        grid-template-columns: 1fr;
    }
    
    .imx-lofi-grid {
        grid-template-columns: 1fr;
    }
}

/* Utility classes - extracted from repeated inline styles */
.imx-star-text{font-size:.875rem;color:var(--text-muted);margin-left:2px}
.imx-card-bubble-tr{position:absolute;top:-20px;right:-20px;width:100px;height:100px;background:rgba(255,255,255,.1);border-radius:50%}
.imx-card-bubble-bl{position:absolute;bottom:-30px;left:-30px;width:80px;height:80px;background:rgba(255,255,255,.05);border-radius:50%}
.imx-card-icon-box{width:56px;height:56px;background:rgba(255,255,255,.2);border-radius:12px;display:flex;align-items:center;justify-content:center}
.imx-card-header-row{display:flex;align-items:center;gap:1rem;position:relative;z-index:1}
.imx-card-modules{display:inline-block;background:rgba(255,255,255,.2);color:#fff;font-size:.7rem;font-weight:600;padding:.25rem .75rem;border-radius:20px;text-transform:uppercase;letter-spacing:.05em}
.imx-card-title{font-family:'Inter',sans-serif;font-size:1.5rem;font-weight:700;color:#fff;margin:1.5rem 0 .5rem;position:relative;z-index:1}
.imx-card-subtitle{color:rgba(255,255,255,.85);font-size:.9rem;margin:0;position:relative;z-index:1}
.imx-card-desc{color:var(--text-secondary,#475569);font-size:.95rem;line-height:1.6;margin:0 0 1.25rem}
.imx-card-features{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.25rem}
.imx-card-footer{display:flex;align-items:center;justify-content:space-between}
.imx-card-time{display:inline-flex;align-items:center;gap:.25rem;color:var(--text-muted, #52627A);font-size:.8rem}
.imx-tag-amber{display:inline-flex;align-items:center;gap:.35rem;background:#FEF3C7;color:#92400E;font-size:.75rem;font-weight:500;padding:.375rem .75rem;border-radius:6px}
.imx-tag-green{display:inline-flex;align-items:center;gap:.35rem;background:#ECFDF5;color:#065F46;font-size:.75rem;font-weight:500;padding:.375rem .75rem;border-radius:6px}
.imx-tag-blue{display:inline-flex;align-items:center;gap:.35rem;background:#E0F2FE;color:#1E40AF;font-size:.75rem;font-weight:500;padding:.375rem .75rem;border-radius:6px}
.imx-tag-muted{display:inline-flex;align-items:center;gap:.35rem;font-size:.75rem;color:var(--text-primary,#0F172A);opacity:.8}

/* ---------- Block 2 (was inline) ---------- */
.imx-container{max-width:1200px;margin:0 auto;padding:0 1rem}
.imx-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.imx-kicker{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary)}
.imx-section-title{margin:.25rem 0 .75rem 0}
.imx-track-card{border:1px solid var(--border-color);border-radius:14px;padding:1rem;background:var(--card-bg);transition:transform .2s ease;cursor:pointer}
.imx-track-card:hover{transform:translateY(-2px)}
.imx-line-icon{width:36px;height:36px;stroke:currentColor;fill:none;stroke-width:1.8;margin-bottom:.5rem}
.imx-track-card h3{margin:.25rem 0;font-size:1.1rem}
.imx-track-card p{margin:0;color:var(--text-secondary);font-size:.95rem}
#imxTrackModal .modal-content{max-width:900px!important;max-height:85vh!important}
#imxTrackModal .modal-body{overflow-y:auto!important;max-height:calc(85vh - 100px)!important}
@media (max-width:768px){#imxTrackModal .modal-content{width:95%!important}}
.imx-roadmap-grid{display:grid;gap:1rem}
.imx-roadmap-row{border:1px dashed var(--border-color);border-radius:12px;padding:.75rem 1rem;background:var(--hover-bg)}
.imx-row-title{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem;color:var(--text-primary)}
.imx-row-title .dot{width:10px;height:10px;border-radius:50%;display:inline-block;background:currentColor}
.imx-chip{background:var(--card-bg);border:1px solid var(--border-color);border-radius:999px;padding:.25rem .6rem;font-size:.85rem;color:var(--text-secondary);display:inline-flex;align-items:center;gap:.35rem}
.imx-chip a{text-decoration:none;color:inherit}
.imx-chips{display:flex;flex-wrap:wrap;gap:.5rem}
/* Filter bar */
.imx-filterbar{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin:.5rem 0 1rem 0}
.imx-filterbar input[type="search"]{flex:1 1 220px;padding:.5rem .75rem;border:1px solid var(--border-color);background:var(--card-bg);color:var(--text-primary);border-radius:10px}
.imx-filterbar .imx-tag{cursor:pointer}
.imx-hidden{display:none!important}

/* ---------- Block 3 (was inline) ---------- */
/* Hamburger Menu - Maximum Priority Fix */
@media (max-width: 768px) {
    button#mobile-menu-btn.mobile-menu-toggle {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        position: relative !important;
        z-index: 99999 !important;
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
        padding: 0 !important;
        margin: 0 !important;
        background: var(--card-bg, #fff) !important;
        border: 2px solid var(--border-color, #e5e5e5) !important;
        border-radius: 8px !important;
        cursor: pointer !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: rgba(0,0,0,0.1) !important;
        user-select: none !important;
        -webkit-user-select: none !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
        flex-shrink: 0 !important;
    }
    
    button#mobile-menu-btn.mobile-menu-toggle .hamburger-line {
        display: block !important;
        width: 22px !important;
        height: 2px !important;
        background: var(--nav-text, #333) !important;
        border-radius: 2px !important;
        pointer-events: none !important;
        transition: all 0.3s ease !important;
    }
    
    button#mobile-menu-btn.mobile-menu-toggle:active {
        transform: scale(0.92) !important;
        background: var(--hover-bg, #f5f5f5) !important;
    }
    
    /* Nav container mobile layout */
    nav.nav-container {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 0.5rem 0.75rem !important;
        gap: 0.5rem !important;
    }
    
    /* Logo should not expand */
    .nav-container .logo-container {
        flex: 0 0 auto !important;
        max-width: 140px !important;
        min-width: 0 !important;
    }
    
    /* FAB Buttons - Perfect Alignment */
    div.imx-speed-dial {
        position: fixed !important;
        bottom: 20px !important;
        right: 16px !important;
        left: auto !important;
        top: auto !important;
        z-index: 1000 !important;
    }
    
    div.imx-speed-dial button.imx-speed-dial-toggle {
        width: 54px !important;
        height: 54px !important;
    }
    
    /* Standalone Mojini FAB hidden - now in toolbox */
    div.feedback-fab#mojini-chat-toggle {
        display: none !important;
    }
}

/* ---------- Block 4 (was inline) ---------- */
/* ================================================
   V3 DESIGN SYSTEM - ORGANIC & PLAYFUL
   Full transformation with paper plane, blobs,
   abstract cards, and Sargam icons
   ================================================ */

/* ---------- FLOATING PAPER PLANE (MAIN - HERO) ---------- */
.v3-paper-plane {
    position: fixed;
    top: 15%;
    right: 8%;
    width: 140px;
    height: 140px;
    opacity: 0.18;
    z-index: 0;
    pointer-events: none;
    animation: v3-fly 25s ease-in-out infinite;
}

@keyframes v3-fly {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    20% { transform: translate(60px, -40px) rotate(12deg); }
    40% { transform: translate(120px, 30px) rotate(-8deg); }
    60% { transform: translate(40px, 60px) rotate(15deg); }
    80% { transform: translate(-30px, 20px) rotate(-5deg); }
}

body.dark-mode .v3-paper-plane {
    opacity: 0.10;
    pointer-events: none;
}

/* Ensure all decorative elements are not clickable in dark mode */
body.dark-mode .v3-organic-bg,
body.dark-mode .v3-blob,
body.dark-mode .v3-floating-elements,
body.dark-mode .v3-sparkle,
body.dark-mode .v3-big-plane {
    pointer-events: none;
}

/* ---------- ORGANIC BACKGROUND BLOBS ---------- */
.v3-organic-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -2;
    overflow: hidden;
}

.v3-blob {
    position: absolute;
    border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;
    animation: v3-morph 20s ease-in-out infinite;
}

.v3-blob-1 {
    top: -120px;
    right: -120px;
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, rgba(14, 165, 233, 0.12) 0%, transparent 70%);
    animation-delay: 0s;
}

.v3-blob-2 {
    bottom: -180px;
    left: -180px;
    width: 550px;
    height: 550px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.10) 0%, transparent 70%);
    border-radius: 41% 59% 38% 62% / 67% 44% 56% 33%;
    animation-delay: -5s;
    animation-direction: reverse;
}

.v3-blob-3 {
    top: 40%;
    left: 60%;
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.08) 0%, transparent 70%);
    border-radius: 52% 48% 61% 39% / 43% 58% 42% 57%;
    animation-delay: -10s;
}

.v3-blob-4 {
    top: 60%;
    right: 20%;
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.06) 0%, transparent 70%);
    border-radius: 38% 62% 45% 55% / 61% 39% 61% 39%;
    animation-delay: -15s;
    animation-direction: reverse;
}

@keyframes v3-morph {
    0%, 100% { 
        transform: translate(0, 0) rotate(0deg) scale(1);
        border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;
    }
    25% { 
        transform: translate(30px, -25px) rotate(5deg) scale(1.05);
        border-radius: 41% 59% 48% 52% / 47% 53% 47% 53%;
    }
    50% { 
        transform: translate(-20px, 35px) rotate(-3deg) scale(0.95);
        border-radius: 54% 46% 38% 62% / 62% 38% 62% 38%;
    }
    75% { 
        transform: translate(25px, 15px) rotate(8deg) scale(1.02);
        border-radius: 48% 52% 59% 41% / 53% 47% 53% 47%;
    }
}

body.dark-mode .v3-blob-1 { background: radial-gradient(circle, rgba(14, 165, 233, 0.06) 0%, transparent 70%); }
body.dark-mode .v3-blob-2 { background: radial-gradient(circle, rgba(99, 102, 241, 0.05) 0%, transparent 70%); }
body.dark-mode .v3-blob-3 { background: radial-gradient(circle, rgba(16, 185, 129, 0.04) 0%, transparent 70%); }
body.dark-mode .v3-blob-4 { background: radial-gradient(circle, rgba(245, 158, 11, 0.03) 0%, transparent 70%); }

/* ---------- FLOATING LEAVES/SPARKLES ---------- */
.v3-floating-elements {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.v3-leaf {
    position: absolute;
    font-size: 1.5rem;
    opacity: 0.15;
    animation: v3-float-leaf 25s ease-in-out infinite;
}

.v3-leaf-1 {
    top: 20%;
    left: 15%;
    color: #0EA5E9;
    animation-delay: 0s;
}

.v3-leaf-2 {
    top: 35%;
    right: 20%;
    color: #6366F1;
    animation-delay: -8s;
}

.v3-leaf-3 {
    bottom: 30%;
    left: 25%;
    color: #10B981;
    animation-delay: -16s;
}

.v3-leaf-4 {
    bottom: 20%;
    right: 15%;
    color: #F59E0B;
    animation-delay: -4s;
}

@keyframes v3-float-leaf {
    0%, 100% { transform: translate(0, 0) rotate(0deg); opacity: 0.15; }
    25% { transform: translate(20px, -30px) rotate(45deg); opacity: 0.25; }
    50% { transform: translate(-15px, 15px) rotate(-30deg); opacity: 0.1; }
    75% { transform: translate(25px, 25px) rotate(60deg); opacity: 0.2; }
}

/* ---------- V3 HERO SECTION ---------- */
.v3-hero {
    position: relative;
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
}

.v3-hero-content {
    position: relative;
    z-index: 2;
    max-width: 650px;
    text-align: center;
}

.v3-hero-eyebrow {
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    /* WCAG AA: sky-800 #075985 = 7.56:1 on white. Was sky-500 #0EA5E9 = 2.77:1. */
    color: #075985;
    margin-bottom: 1.5rem;
    display: inline-block;
    padding: 0.5rem 1.25rem;
    background: rgba(14, 165, 233, 0.1);
    border-radius: 25px;
    border: 2px dashed var(--accent-cyan, #0EA5E9);
    font-weight: 700;
    animation: v3-pulse-border 3s ease-in-out infinite;
}
body.dark-mode .v3-hero-eyebrow, [data-theme="dark"] .v3-hero-eyebrow { color: #7DD3FC; }

@keyframes v3-pulse-border {
    0%, 100% { border-color: rgba(14, 165, 233, 0.8); }
    50% { border-color: rgba(99, 102, 241, 0.8); }
}

.v3-hero-title {
    font-family: 'Inter', sans-serif;
    font-size: clamp(2.5rem, 8vw, 4.5rem) !important;
    font-weight: 900 !important;
    color: var(--text-primary, #0F172A);
    line-height: 1.05 !important;
    margin-bottom: 1.5rem !important;
    letter-spacing: -0.03em;
}

.v3-highlight {
    background: linear-gradient(135deg, #0EA5E9 0%, #6366F1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
    display: inline-block;
}

.v3-highlight::after {
    content: '';
    position: absolute;
    bottom: 8px;
    left: -5px;
    right: -5px;
    height: 14px;
    background: rgba(14, 165, 233, 0.2);
    z-index: -1;
    transform: rotate(-1.5deg);
    border-radius: 4px;
}

.v3-hero-description {
    font-size: 1.3rem !important;
    color: var(--text-secondary, #475569) !important;
    margin-bottom: 2rem !important;
    line-height: 1.7 !important;
    max-width: 550px;
    margin-left: auto;
    margin-right: auto;
}

/* ---------- V3 CATEGORY BADGES ---------- */
.v3-categories {
    padding: 2rem 1rem;
    max-width: 1200px;
    margin: 0 auto 2rem;
}

.v3-category-grid {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}

.v3-category-badge {
    padding: 0.75rem 1.5rem;
    background: var(--card-bg, #FFFFFF);
    border: 2px solid var(--accent-cyan, #0EA5E9);
    border-radius: 30px;
    font-weight: 600;
    color: var(--text-primary, #0F172A);
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: rotate(var(--rotation, 0deg));
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.9rem;
    box-shadow: 3px 3px 0 rgba(14, 165, 233, 0.15);
}

.v3-category-badge:hover {
    transform: rotate(0deg) scale(1.08) translateY(-3px);
    background: var(--accent-cyan, #0EA5E9);
    color: white;
    box-shadow: 6px 6px 0 rgba(14, 165, 233, 0.2);
}

.v3-badge-icon {
    width: 22px;
    height: 22px;
    filter: brightness(0) saturate(100%) invert(57%) sepia(80%) saturate(2000%) hue-rotate(165deg);
    transition: filter 0.3s;
}

.v3-category-badge:hover .v3-badge-icon {
    filter: brightness(0) invert(1);
}

/* ---------- V3 SARGAM INLINE ICONS ---------- */
.v3-inline-icon {
    width: 18px;
    height: 18px;
    vertical-align: middle;
    filter: brightness(0) saturate(100%);
    opacity: 0.7;
    transition: all 0.3s;
}

body.dark-mode .v3-inline-icon {
    filter: brightness(0) invert(1);
}

.v3-card-icon {
    width: 48px;
    height: 48px;
    filter: brightness(0) saturate(100%) invert(57%) sepia(80%) saturate(2000%) hue-rotate(165deg);
}

/* ---------- V3 ABSTRACT CARD STYLING ---------- */
/* Override existing cards with organic, playful shapes */

.course-card,
.game-card,
.lab-card,
.tool-card,
.stat-card,
.testimonial-card,
.imx-track-card,
.premium-card,
.imx-game-card,
.imx-lab-card {
    border: 3px solid var(--border, #E2E8F0) !important;
    border-radius: 20px !important;
    box-shadow: 8px 8px 0 rgba(14, 165, 233, 0.12) !important;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Gradient top bar on cards */
.course-card::before,
.game-card::before,
.lab-card::before,
.imx-game-card::before,
.imx-lab-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 6px !important;
    background: linear-gradient(90deg, #0EA5E9 0%, #6366F1 50%, #10B981 100%) !important;
}

/* Playful rotations on cards */
.course-card:nth-child(odd) { transform: rotate(-0.6deg); }
.course-card:nth-child(even) { transform: rotate(0.6deg); }
.course-card:nth-child(3n) { transform: rotate(-0.3deg); }

.game-card:nth-child(odd) { transform: rotate(0.5deg); }
.game-card:nth-child(even) { transform: rotate(-0.5deg); }

.lab-card:nth-child(odd) { transform: rotate(-0.4deg); }
.lab-card:nth-child(even) { transform: rotate(0.4deg); }

.imx-track-card:nth-child(1) { transform: rotate(-1deg); }
.imx-track-card:nth-child(2) { transform: rotate(0.8deg); }
.imx-track-card:nth-child(3) { transform: rotate(-0.5deg); }
.imx-track-card:nth-child(4) { transform: rotate(1deg); }
.imx-track-card:nth-child(5) { transform: rotate(-0.7deg); }

/* Hover effects - lift and expand shadow */
.course-card:hover,
.game-card:hover,
.lab-card:hover,
.tool-card:hover,
.stat-card:hover,
.testimonial-card:hover,
.imx-track-card:hover,
.premium-card:hover,
.imx-game-card:hover,
.imx-lab-card:hover {
    transform: rotate(0deg) translate(-5px, -5px) !important;
    box-shadow: 14px 14px 0 rgba(14, 165, 233, 0.18) !important;
    border-color: var(--accent-cyan, #0EA5E9) !important;
}

/* Icon wrapper with dashed border */
.course-card .card-icon,
.game-card .card-icon,
.lab-card .card-icon,
.imx-game-card .card-icon,
.imx-lab-card .card-icon {
    padding: 1rem;
    background: rgba(14, 165, 233, 0.08);
    border: 3px dashed var(--accent-cyan, #0EA5E9);
    border-radius: 16px;
    display: inline-flex;
    margin-bottom: 1rem;
}

/* ---------- DASHED DIVIDERS ---------- */
section,
.section {
    border-bottom: none !important;
}

section::after {
    content: '';
    display: block;
    width: 80%;
    max-width: 600px;
    height: 0;
    border-top: 2px dashed rgba(14, 165, 233, 0.2);
    margin: 3rem auto 0;
}

section:last-of-type::after {
    display: none;
}

/* ---------- SECTION HEADERS WITH SPARKLE ---------- */
section h2,
.section-title {
    position: relative;
    display: inline-block;
}

section h2::before,
.section-title::before {
    content: ''; /* sargam flare */
    position: absolute;
    top: -12px;
    left: -28px;
    font-size: 1.3rem;
    color: var(--indigo, #6366F1);
    animation: v3-twinkle 2.5s ease-in-out infinite;
}

@keyframes v3-twinkle {
    0%, 100% { opacity: 1; transform: scale(1) rotate(0deg); }
    50% { opacity: 0.5; transform: scale(0.8) rotate(15deg); }
}

/* ---------- V3 BUTTONS ---------- */
.btn-primary,
.btn.btn-primary,
a.btn-primary {
    box-shadow: 5px 5px 0 rgba(14, 165, 233, 0.3) !important;
    border-radius: 10px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.btn-primary:hover,
.btn.btn-primary:hover,
a.btn-primary:hover {
    transform: translate(-3px, -3px) !important;
    box-shadow: 8px 8px 0 rgba(14, 165, 233, 0.35) !important;
}

.btn-secondary,
.btn.btn-secondary,
a.btn-secondary {
    border: 2px solid currentColor !important;
    border-radius: 10px !important;
    transition: all 0.3s !important;
}

/* ---------- MODALS V3 STYLE ---------- */
.modal-content,
.imx-modal-content {
    border: 3px solid var(--border, #E2E8F0) !important;
    border-radius: 24px !important;
    box-shadow: 20px 20px 0 rgba(14, 165, 233, 0.15) !important;
}

/* ---------- SPEED DIAL V3 ---------- */
.imx-speed-dial-btn,
.imx-speed-dial-fab {
    box-shadow: 6px 6px 0 rgba(14, 165, 233, 0.3) !important;
    transition: all 0.3s !important;
}

.imx-speed-dial-btn:hover,
.imx-speed-dial-fab:hover {
    transform: translate(-3px, -3px) !important;
    box-shadow: 9px 9px 0 rgba(14, 165, 233, 0.35) !important;
}

/* ---------- TESTIMONIAL CARDS ROTATION ---------- */
.testimonial-card:nth-child(odd) { transform: rotate(0.5deg); }
.testimonial-card:nth-child(even) { transform: rotate(-0.5deg); }

/* ---------- FOOTER STARS ---------- */
footer::before {
    content: ''; /* sargam flare */
    display: block;
    text-align: center;
    color: var(--accent-cyan, #0EA5E9);
    font-size: 1.2rem;
    letter-spacing: 1rem;
    padding: 2rem 0 1rem;
    opacity: 0.6;
}

/* ---------- DAILY TIP V3 STYLE ---------- */
.imx-daily-tip {
    border: 2px dashed var(--accent-cyan, #0EA5E9) !important;
    border-radius: 16px !important;
    box-shadow: 5px 5px 0 rgba(14, 165, 233, 0.1) !important;
}

/* ---------- SURPRISE ME BUTTON V3 ---------- */
.imx-surprise-btn {
    border: 2px dashed var(--accent-cyan, #0EA5E9) !important;
    box-shadow: 4px 4px 0 rgba(14, 165, 233, 0.15) !important;
    transition: all 0.3s !important;
}

.imx-surprise-btn:hover {
    transform: translate(-2px, -2px) rotate(-2deg) !important;
    box-shadow: 6px 6px 0 rgba(14, 165, 233, 0.2) !important;
}

/* ---------- IMPACTLEX BANNER V3 ---------- */
.impactlex-banner {
    border: 3px solid var(--border, #E2E8F0) !important;
    border-radius: 20px !important;
    box-shadow: 8px 8px 0 rgba(16, 185, 129, 0.12) !important;
}

.impactlex-banner:hover {
    transform: translate(-4px, -4px) !important;
    box-shadow: 12px 12px 0 rgba(16, 185, 129, 0.18) !important;
}

/* ---------- PREMIUM BADGE SPARKLE ---------- */
.premium-badge::after,
[class*="premium"]::after {
    content: ''; /* sargam flare */
    margin-left: 0.3rem;
    font-size: 0.8em;
    animation: v3-twinkle 2s ease-in-out infinite;
}

/* ---------- RESPONSIVE ADJUSTMENTS ---------- */
@media (max-width: 768px) {
    .v3-paper-plane {
        width: 100px;
        height: 100px;
        top: 10%;
        right: 5%;
        opacity: 0.15;
    }
    
    .v3-blob {
        transform: scale(0.6);
    }
    
    .v3-leaf {
        font-size: 1rem;
    }
    
    .v3-hero-title {
        font-size: 2.2rem !important;
    }
    
    .v3-hero-description {
        font-size: 1.1rem !important;
    }
    
    .v3-category-badge {
        font-size: 0.8rem;
        padding: 0.6rem 1rem;
    }
    
    /* Remove rotations on mobile for cleaner look */
    .course-card,
    .game-card,
    .lab-card,
    .imx-track-card,
    .testimonial-card {
        transform: none !important;
    }
    
    .course-card:hover,
    .game-card:hover,
    .lab-card:hover,
    .imx-track-card:hover {
        transform: translateY(-5px) !important;
    }
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
    body,
    .v3-paper-plane,
    .v3-blob,
    .v3-leaf,
    .v3-hero-eyebrow {
        animation: none !important;
    }
    
    .v3-highlight::after {
        transform: none;
    }
}

/* ---------- PRINT STYLES ---------- */
@media print {
    .v3-paper-plane,
    .v3-organic-bg,
    .v3-floating-elements,
    .v3-categories {
        display: none !important;
    }
}



/* ================================================
   V3 PHASE 2 ENHANCEMENTS
   - Hero CTA speech bubble
   - Premium overlay fix
   - More floating animations
   ================================================ */

/* ---------- HERO CTA WRAPPER ---------- */
.v3-hero-cta-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    margin-top: 2.5rem;
    position: relative;
}

.v3-hero-buttons {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
    justify-content: center;
}

.v3-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 1rem 2rem;
    background: linear-gradient(135deg, #D129C3 0%, #A51D9A 100%);
    color: white;
    text-decoration: none;
    font-weight: 700;
    font-size: 1rem;
    border-radius: 12px;
    box-shadow: 6px 6px 0 rgba(14, 165, 233, 0.3);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid #0EA5E9;
}

.v3-btn-primary:hover {
    transform: translate(-4px, -4px);
    box-shadow: 10px 10px 0 rgba(14, 165, 233, 0.35);
    background: linear-gradient(135deg, #0284C7 0%, #0369A1 100%);
}

.v3-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 1rem 2rem;
    background: var(--card-bg, white);
    color: var(--text-primary, #0F172A);
    text-decoration: none;
    font-weight: 700;
    font-size: 1rem;
    border: 3px solid var(--text-primary, #0F172A);
    border-radius: 12px;
    box-shadow: 4px 4px 0 rgba(15, 23, 42, 0.15);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.v3-btn-secondary:hover {
    transform: translate(-3px, -3px);
    box-shadow: 7px 7px 0 rgba(15, 23, 42, 0.2);
    background: var(--text-primary, #0F172A);
    color: white;
}

.v3-btn-icon {
    width: 22px;
    height: 22px;
    filter: brightness(0) invert(1);
}

.v3-btn-secondary .v3-btn-icon {
    filter: brightness(0);
}

.v3-btn-secondary:hover .v3-btn-icon {
    filter: brightness(0) invert(1);
}

/* ---------- SPEECH BUBBLE CALLOUT ---------- */
.v3-benefits-callout {
    position: relative;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(16, 185, 129, 0.06) 100%);
    border: 2px dashed #10B981;
    border-radius: 20px;
    padding: 1.25rem 1.75rem;
    max-width: 420px;
    transform: rotate(1deg);
    box-shadow: 5px 5px 0 rgba(16, 185, 129, 0.15);
    animation: v3-gentle-wobble 6s ease-in-out infinite;
}

@keyframes v3-gentle-wobble {
    0%, 100% { transform: rotate(1deg); }
    50% { transform: rotate(-0.5deg); }
}

.v3-callout-arrow {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 30px;
}

.v3-callout-arrow::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    height: 20px;
    background: #10B981;
    border-radius: 3px;
}

.v3-callout-arrow::after {
    content: '↓';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.2rem;
    color: #10B981;
    animation: v3-bounce-arrow 1.5s ease-in-out infinite;
}

@keyframes v3-bounce-arrow {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(5px); }
}

.v3-callout-content {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    justify-content: center;
}

.v3-benefit-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary, #0F172A);
}

.v3-benefit-icon {
    width: 18px;
    height: 18px;
    filter: brightness(0) saturate(100%) invert(53%) sepia(89%) saturate(399%) hue-rotate(112deg) brightness(96%) contrast(92%);
}

.v3-callout-footer {
    text-align: center;
    margin-top: 0.75rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: #10B981;
    letter-spacing: 0.02em;
}

/* Premium link under callout */
.v3-premium-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-muted, #64748B);
    text-decoration: none;
    transition: all 0.3s;
}

.v3-premium-link:hover {
    color: var(--accent-cyan, #0EA5E9);
    transform: translateX(5px);
}

.v3-premium-link-icon {
    width: 18px;
    height: 18px;
    filter: brightness(0) saturate(100%) invert(50%) sepia(0%) saturate(0%) hue-rotate(0deg);
    transition: filter 0.3s;
}

.v3-premium-link:hover .v3-premium-link-icon {
    filter: brightness(0) saturate(100%) invert(57%) sepia(80%) saturate(2000%) hue-rotate(165deg);
}


/* ========== PREMIUM TIER CARD STYLING ========== */
/* Overrides use !important to beat js/premium.js injected styles.
   premium.js injects <style id="premium-gating-styles"> at runtime and
   also sets element.style.position = 'relative' inline on each card.
   Overlay: .premium-lock-overlay { position:absolute; inset:0; z-index:20 }
   Badge:   .premium-tier-badge  { position:absolute; top:0.5rem; z-index:10 }
   Border:  .premium-locked::after { position:absolute; inset:0; z-index:5 }  */

/* === CARD SHELL === */
.card[data-required-tier],
.card.premium-locked {
    overflow: hidden !important;
    padding: 1.5rem !important;
}

/* Soften the dashed-border pseudo from premium.js */
.premium-locked::after {
    border-radius: inherit !important;
    border-color: rgba(148, 163, 184, 0.10) !important;
    border-width: 1px !important;
    border-style: solid !important;
}

/* === ALL CARD CONTENT ABOVE OVERLAY === */
.card[data-required-tier] > a {
    position: relative !important;
    z-index: 25 !important;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.card[data-required-tier] .card-header {
    position: relative !important;
    z-index: 25 !important;
    margin-bottom: 0.5rem !important;
}

.card[data-required-tier] .card-title {
    position: relative;
    z-index: 26;
    font-size: 1rem !important;
    font-weight: 700;
    color: var(--text-primary, #f8fafc);
    margin-bottom: 0.25rem;
    line-height: 1.35;
}

.card[data-required-tier] .star-rating {
    position: relative;
    z-index: 26;
    margin-bottom: 0.25rem;
}

.card[data-required-tier] .card-description {
    position: relative;
    z-index: 26;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--text-secondary, #94a3b8);
}

/* Tier badge above overlay */
.premium-tier-badge {
    z-index: 30 !important;
}

/* === OVERLAY: thin bottom strip, not a wall === */
.premium-lock-overlay {
    top: auto !important;
    bottom: 0 !important;
    height: 52px !important;
    border-radius: 0 0 12px 12px !important;
    background: linear-gradient(
        180deg,
        rgba(15, 23, 42, 0.0) 0%,
        rgba(15, 23, 42, 0.85) 40%,
        rgba(15, 23, 42, 0.95) 100%
    ) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    padding-bottom: 0.6rem !important;
}

/* === LOCK CONTENT: hide everything except the CTA button === */
.premium-lock-content {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    max-height: 40px !important;
    overflow: hidden !important;
}

/* Hide ALL direct children */
.premium-lock-content > * {
    display: none !important;
}

/* Show ONLY the CTA (a or button, direct or nested) */
.premium-lock-content > a,
.premium-lock-content > button,
.premium-lock-content > div > a,
.premium-lock-content > div > button,
.premium-lock-content > a[href],
.premium-lock-content [onclick] {
    display: inline-flex !important;
    font-size: 0.72rem !important;
    padding: 0.35rem 1rem !important;
    border-radius: 20px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    white-space: nowrap !important;
    margin: 0 !important;
}
/* If the CTA is inside a wrapper div, show that wrapper */
.premium-lock-content > div:last-child {
    display: flex !important;
    justify-content: center !important;
}

/* === MODAL ITEMS === */
.modal-item[data-required-tier] {
    overflow: hidden !important;
}

/* === GRID: 2-col on desktop, wider cards === */
#premium .cards-grid {
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)) !important;
    gap: 1.5rem !important;
}
#premium .card {
    padding: 1.5rem;
}
#premium .card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}
#premium .card-number,
#premium .learner-badge {
    font-size: 0.72rem;
    white-space: nowrap;
}
#premium .card-title {
    font-size: 1.1rem;
    margin-top: 0.25rem;
}
.imx-premium-tooltip {
    position: fixed;
    max-width: 320px;
    padding: 0.85rem 1.1rem;
    background: rgba(15, 23, 42, 0.97);
    color: #e2e8f0;
    font-size: 0.8rem;
    line-height: 1.5;
    border-radius: 12px;
    border: 1px solid rgba(99, 102, 241, 0.3);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    text-align: left;
    white-space: normal;
}
.imx-premium-tooltip.visible {
    opacity: 1;
    visibility: visible;
}
.imx-premium-tooltip-title {
    font-weight: 700;
    font-size: 0.9rem;
    color: #fff;
    margin-bottom: 0.35rem;
    font-family: 'Inter', sans-serif;
}
.imx-premium-tooltip-desc {
    color: #cbd5e1;
    font-size: 0.78rem;
    line-height: 1.45;
    margin-bottom: 0.5rem;
}
.imx-premium-tooltip-tier {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    background: rgba(99, 102, 241, 0.2);
    color: #a5b4fc;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}


/* ============================================================
   COMPREHENSIVE MOBILE EXPERIENCE - CLEAN & FUNCTIONAL
   Version: 2.0.0 | December 2025
   ============================================================ */

/* 13. Hover tooltip: positioned by JS to avoid overflow:hidden clipping.
   See premium-tooltip script near end of file. */
.card[data-required-tier] {
    cursor: pointer;
}

/* ---------- MOBILE BASE (768px and below) ---------- */
@media screen and (max-width: 768px) {
    
    /* === BODY & SCROLL === */
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        -webkit-overflow-scrolling: touch;
    }
    
    body.menu-open {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
        height: 100% !important;
    }
    
    /* === HEADER === */
    .nav-container {
        padding: 0.5rem 0.75rem !important;
        gap: 0 !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }

    .nav-with-badge {
        display: contents !important;
    }

    .logo-container {
        flex: 0 0 auto !important;
        min-width: 0 !important;
        max-width: 140px !important;
        overflow: hidden;
    }

    .logo {
        flex-shrink: 0;
    }

    .logo img,
    .logo-svg img {
        height: 32px !important;
        width: 32px !important;
    }

    .logo-text {
        font-size: 0.9rem !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .logo-main {
        font-size: 0.9rem !important;
    }

    .logo-tagline {
        display: none !important;
    }

    /* Hide desktop-only nav elements on mobile */
    .auth-btn,
    .nav-container > .auth-btn,
    header .auth-btn:not(.mobile-auth-btn) {
        display: none !important;
    }

    .theme-selector,
    .tour-toggle,
    .new-starburst {
        display: none !important;
    }

    .nav-buttons {
        display: none !important;
    }
    
    /* === HAMBURGER MENU BUTTON === */
    .mobile-menu-toggle,
    #mobile-menu-btn {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 10px !important;
        background: var(--card-bg, #1E293B) !important;
        border: 1px solid var(--border-color, #334155) !important;
        border-radius: 10px !important;
        cursor: pointer !important;
        z-index: 10001 !important;
        position: relative !important;
        touch-action: manipulation !important;
        margin-left: auto !important;
        flex-shrink: 0 !important;
        -webkit-tap-highlight-color: transparent !important;
        flex-shrink: 0 !important;
        margin-left: auto !important;
    }
    
    .mobile-menu-toggle .hamburger-line,
    #mobile-menu-btn .hamburger-line {
        display: block !important;
        width: 22px !important;
        height: 2px !important;
        background: var(--text-primary, #F8FAFC) !important;
        border-radius: 2px !important;
        transition: transform 0.3s ease, opacity 0.3s ease !important;
    }
    
    /* Hamburger X animation */
    .mobile-menu-toggle.active .hamburger-line:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px) !important;
    }
    
    .mobile-menu-toggle.active .hamburger-line:nth-child(2) {
        opacity: 0 !important;
    }
    
    .mobile-menu-toggle.active .hamburger-line:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px) !important;
    }
    
    /* === MOBILE NAVIGATION === */
    .nav-links,
    #navLinks {
        display: none !important;
        position: fixed !important;
        top: 70px !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: calc(100vh - 70px) !important;
        background: var(--primary-bg, #0F172A) !important;
        flex-direction: column !important;
        padding: 1rem !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        z-index: 10000 !important;
        gap: 0 !important;
    }
    
    .nav-links.active,
    #navLinks.active {
        display: flex !important;
    }
    
    .nav-links > li {
        width: 100% !important;
        margin: 0 !important;
        border-bottom: 1px solid var(--border-color, #334155) !important;
    }
    
    .nav-links > li > a {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 1rem !important;
        font-size: 1rem !important;
        color: var(--text-primary, #F8FAFC) !important;
        text-decoration: none !important;
        min-height: 50px !important;
    }
    
    /* Dropdown arrow */
    .nav-links > li.has-dropdown > a::after {
        content: 'â–¼' !important;
        font-size: 0.7rem !important;
        transition: transform 0.3s ease !important;
    }
    
    .nav-links > li.has-dropdown.open > a::after {
        transform: rotate(180deg) !important;
    }
    
    /* Dropdown menu */
    .dropdown-menu,
    .dropdown-content {
        position: static !important;
        display: none !important;
        width: 100% !important;
        background: rgba(0, 0, 0, 0.2) !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }
    
    .nav-links > li.has-dropdown.open .dropdown-menu,
    .nav-links > li.has-dropdown.open .dropdown-content {
        display: block !important;
    }
    
    .dropdown-menu a,
    .dropdown-content a {
        padding: 0.875rem 1rem 0.875rem 2rem !important;
        font-size: 0.95rem !important;
        border-bottom: 1px solid rgba(255,255,255,0.05) !important;
        min-height: 48px !important;
        display: flex !important;
        align-items: center !important;
    }
    
    /* === MOBILE OVERLAY === */
    .mobile-menu-overlay {
        display: none !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: rgba(0, 0, 0, 0.5) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition: opacity 0.3s ease, visibility 0.3s ease !important;
        z-index: 9998 !important;
    }
    
    .mobile-menu-overlay.active {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
    
    /* === MOBILE AUTH BUTTONS (inside nav-links) === */
    .mobile-auth-section {
        display: none !important;
        flex-direction: row !important;
        gap: 0.75rem !important;
        padding: 1rem !important;
        background: var(--card-bg, #1E293B) !important;
        border-radius: 12px !important;
        margin-top: auto !important;
        margin-bottom: 1rem !important;
        list-style: none !important;
        border-bottom: none !important;
    }

    .nav-links.active .mobile-auth-section,
    body.menu-open .mobile-auth-section {
        display: flex !important;
    }
    
    .mobile-auth-btn {
        flex: 1 !important;
        padding: 0.875rem 1rem !important;
        border-radius: 10px !important;
        font-size: 0.95rem !important;
        font-weight: 600 !important;
        text-decoration: none !important;
        text-align: center !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.5rem !important;
        min-height: 48px !important;
    }
    
    .mobile-auth-login {
        background: transparent !important;
        border: 2px solid var(--accent-primary, #6366F1) !important;
        color: var(--text-primary, #F8FAFC) !important;
    }
    
    .mobile-auth-signup {
        background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%) !important;
        border: none !important;
        color: white !important;
    }
    
    /* === HERO SECTION === */
    .hero, .v3-hero {
        padding: 2rem 1rem !important;
        min-height: auto !important;
        text-align: center !important;
    }
    
    .v3-hero-content {
        max-width: 100% !important;
        padding: 0 !important;
    }
    
    .v3-hero-eyebrow {
        font-size: 0.8rem !important;
    }
    
    .v3-hero-title {
        font-size: 1.75rem !important;
        line-height: 1.2 !important;
    }
    
    .v3-hero-subtitle {
        font-size: 1rem !important;
        line-height: 1.5 !important;
    }
    
    /* Hero CTA buttons */
    .v3-hero-cta {
        flex-direction: column !important;
        gap: 0.75rem !important;
        width: 100% !important;
    }
    
    .v3-hero-cta .btn,
    .v3-cta-primary,
    .v3-cta-secondary {
        width: 100% !important;
        padding: 1rem !important;
        font-size: 1rem !important;
        justify-content: center !important;
    }
    
    /* Hide speech bubble on mobile */
    .v3-speech-bubble,
    .v3-callout-bubble {
        display: none !important;
    }
    
    /* === SECTIONS === */
    .section {
        padding: 2rem 1rem !important;
    }
    
    .section-title {
        font-size: 1.5rem !important;
    }
    
    .section-subtitle {
        font-size: 0.95rem !important;
    }
    
    /* === CARDS === */
    .cards-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
        padding: 0 !important;
    }
    
    .card {
        padding: 1.25rem !important;
    }
    
    .card-title {
        font-size: 1.1rem !important;
    }
    
    /* === PREMIUM CARDS - CONTAINED ON MOBILE === */
    .card[data-required-tier] {
        position: relative !important;
        overflow: hidden !important;
        padding: 1.25rem !important;
    }
    .card[data-required-tier] > a {
        position: relative !important;
        z-index: 25 !important;
    }
    .premium-lock-overlay {
        height: 48px !important;
    }
    #premium .cards-grid {
        grid-template-columns: 1fr !important;
    }
    
    /* === HIDE ON MOBILE === */
    .floating-element,
    .v3-big-plane,
    .v3-sparkle,
    .paper-plane,
    .floating-badge,
    .floating-icon,
    .desktop-only,
    .hide-mobile,
    .tour-guide,
    #shepherd-toast,
    .shepherd-modal-overlay-container {
        display: none !important;
    }
    
    /* === SIMPLE MOBILE AIRPLANE === */
    .mobile-plane {
        display: block !important;
        position: fixed;
        bottom: 100px;
        right: -60px;
        width: 40px;
        height: 40px;
        opacity: 0.15;
        pointer-events: none;
        z-index: 1;
        animation: mobile-plane-float 20s ease-in-out infinite;
    }
    
    @keyframes mobile-plane-float {
        0%, 100% {
            transform: translate(0, 0) rotate(-15deg);
            opacity: 0;
        }
        10% {
            opacity: 0.15;
        }
        50% {
            transform: translate(-80vw, -30vh) rotate(-10deg);
            opacity: 0.2;
        }
        90% {
            opacity: 0.15;
        }
    }
    
    /* === THEME SELECTOR — hidden in header, shown inside mobile menu === */
    .theme-selector {
        display: none !important;
    }
    #navLinks.active .theme-selector {
        display: flex !important;
        justify-content: center !important;
        gap: 0.5rem !important;
        padding: 1rem !important;
        border-top: 1px solid var(--border-color, #334155) !important;
        margin-top: auto !important;
    }
    #navLinks.active .theme-selector .theme-btn {
        width: 44px !important;
        height: 44px !important;
    }
    
    /* === COOKIE CONSENT - SIMPLE === */
    .cookie-consent,
    #cookieConsent {
        left: 1rem !important;
        right: 1rem !important;
        bottom: 1rem !important;
        width: auto !important;
        max-width: none !important;
        padding: 1rem !important;
        border-radius: 12px !important;
        flex-direction: column !important;
        gap: 0.75rem !important;
    }
    
    .cookie-consent p,
    #cookieConsent p {
        font-size: 0.85rem !important;
        text-align: center !important;
        margin: 0 !important;
    }
    
    .cookie-consent button,
    #cookieConsent button {
        width: 100% !important;
        padding: 0.75rem !important;
        font-size: 0.9rem !important;
    }
    
    /* === MOJINI CHATBOT - KEEP VISIBLE === */
    .chat-widget,
    #chatWidget,
    .mojini-widget {
        display: block !important;
        bottom: 1rem !important;
        right: 1rem !important;
        z-index: 9999 !important;
    }
    
    .chat-toggle-btn {
        width: 56px !important;
        height: 56px !important;
    }
    
    .chat-popup {
        width: calc(100vw - 2rem) !important;
        max-width: 360px !important;
        height: 60vh !important;
        max-height: 500px !important;
        bottom: 70px !important;
        right: 0 !important;
    }
    
    /* === FOOTER === */
    footer, .footer {
        padding: 2rem 1rem !important;
    }
    
    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
    
    .footer-links {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }
    
    /* === MODAL FIXES === */
    .modal-content {
        width: 95% !important;
        max-width: none !important;
        margin: 1rem !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
    }
    
    /* === PRICING/SIGNUP === */
    .pricing-grid,
    .pricing-cards {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    .pricing-card {
        padding: 1.5rem !important;
    }
    
    .pricing-card .price {
        font-size: 2rem !important;
    }
    
    /* === FORMS === */
    input, textarea, select, button {
        font-size: 16px !important; /* Prevents iOS zoom */
    }
    
    /* === SCROLL FIXES === */
    * {
        -webkit-tap-highlight-color: transparent;
    }
    
    a, button {
        touch-action: manipulation;
    }
}

/* ---------- LIGHT MODE MOBILE FIXES (Light is now default) ---------- */
@media screen and (max-width: 768px) {
    body:not(.dark-mode) .mobile-menu-toggle {
        background: #FFFFFF !important;
        border-color: #E2E8F0 !important;
    }
    
    body:not(.dark-mode) .mobile-menu-toggle .hamburger-line {
        background: #1E293B !important;
    }
    
    body:not(.dark-mode) .nav-links {
        background: #FFFFFF !important;
    }
    
    body:not(.dark-mode) .nav-links > li {
        border-color: #E2E8F0 !important;
    }
    
    body:not(.dark-mode) .nav-links > li > a {
        color: #1E293B !important;
    }
    
    body:not(.dark-mode) .dropdown-content {
        background: #F1F5F9 !important;
    }
    
    body:not(.dark-mode) .mobile-auth-section {
        background: #F1F5F9 !important;
    }
    
    body:not(.dark-mode) .mobile-auth-login {
        color: #1E293B !important;
    }
}

/* ---------- VERY SMALL SCREENS (480px and below) ---------- */
@media screen and (max-width: 480px) {
    .v3-hero-title {
        font-size: 1.5rem !important;
    }
    
    .nav-container {
        padding: 0.5rem 0.75rem !important;
    }
    
    .logo img {
        height: 36px !important;
        width: 36px !important;
    }
    
    .logo-text {
        font-size: 1rem !important;
    }
}

/* ── MOBILE RESPONSIVE ENHANCEMENTS (Option A: make index.html work on phones) ── */
@media screen and (max-width: 768px) {
    /* ── Card grids: force single column ── */
    .cards-grid,
    .modal-grid,
    .card-grid,
    .flagship-grid,
    .imx-resource-grid,
    .imx-premium-tiers,
    .imx-community-grid,
    .support-options-grid,
    .support-options {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }

    /* ── Section padding: tighter on mobile ── */
    .section,
    section {
        padding: 1.5rem 0.75rem !important;
    }

    .section-title {
        font-size: 1.35rem !important;
    }

    .section-subtitle {
        font-size: 0.95rem !important;
        line-height: 1.5 !important;
    }

    /* ── Cards: compact on mobile ── */
    .card {
        padding: 1rem !important;
    }

    .card-title {
        font-size: 1.05rem !important;
    }

    .card-description {
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
        -webkit-line-clamp: 3;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .card-testimonial {
        display: none !important;
    }

    .card-header {
        margin-bottom: 0.5rem !important;
    }

    /* ── Hero: mobile-friendly ── */
    .v3-hero-title {
        font-size: clamp(1.5rem, 6vw, 2.2rem) !important;
        line-height: 1.2 !important;
    }

    .v3-hero-description {
        font-size: 1rem !important;
        line-height: 1.6 !important;
        max-width: 100% !important;
    }

    .v3-hero-cta-wrapper {
        padding: 0 0.5rem !important;
    }

    .v3-hero-buttons {
        flex-direction: column !important;
        gap: 0.5rem !important;
        width: 100% !important;
    }

    .v3-btn-primary,
    .v3-btn-secondary {
        width: 100% !important;
        max-width: 320px !important;
        margin: 0 auto !important;
        font-size: 1rem !important;
        padding: 0.875rem 1.5rem !important;
        min-height: 48px !important;
    }

    /* ── Modals: full-width on mobile ── */
    .modal-content {
        width: 95% !important;
        max-width: 95vw !important;
        margin: 2rem auto !important;
        max-height: 85vh !important;
        overflow-y: auto !important;
    }

    .modal-grid {
        gap: 0.5rem !important;
    }

    .modal-item {
        padding: 1rem !important;
    }

    .modal-item-description {
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* ── Oversized fonts: scale down ── */
    .imx-streak-fire {
        font-size: 2.5rem !important;
    }

    .imx-streak-count {
        font-size: 2rem !important;
    }

    .imx-pomodoro-time {
        font-size: 2.5rem !important;
    }

    .testimonial-quote::before {
        font-size: 2rem !important;
    }

    /* ── Footer: stack on mobile ── */
    .footer-links {
        flex-direction: column !important;
        gap: 1.5rem !important;
    }

    .footer-section {
        text-align: center !important;
    }

    .footer-section ul {
        padding: 0 !important;
    }

    .footer-content {
        padding: 1.5rem 1rem !important;
    }

    /* ── Stats row: 2-col grid ── */
    .stats-row,
    .imx-analytics-stats,
    .imx-streak-stats {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
    }

    /* ── Buttons: touch-friendly ── */
    .btn,
    .action-buttons .btn {
        min-height: 48px !important;
        font-size: 0.95rem !important;
        padding: 0.75rem 1.25rem !important;
    }

    .auth-btn {
        min-height: 40px !important;
    }

    /* ── WhatsApp, newsletter, case study banners ── */
    .impactlex-banner-inner,
    .casestudies-banner-inner,
    .devdiscourses-banner-inner {
        flex-direction: column !important;
        text-align: center !important;
        gap: 0.75rem !important;
        padding: 1rem !important;
    }

    /* ── Learning tracks: single column ── */
    .imx-tracks-compact-grid {
        grid-template-columns: 1fr !important;
    }

    /* ── Flagship courses: compact ── */
    /* Bumped horizontal padding 0.75rem → 1.25rem so cards have proper
       side breathing room on mobile. Earlier 12px gave the impression of
       cards bleeding into the viewport edge. */
    #flagship-courses {
        padding: 2rem 1.25rem !important;
    }

    #flagship-courses h2 {
        font-size: 1.3rem !important;
    }

    .flagship-card {
        padding: 1rem !important;
    }

    .flagship-card h3 {
        font-size: 1.1rem !important;
    }

    /* ── Star ratings in cards: smaller ── */
    .star-rating {
        flex-wrap: wrap !important;
    }

    .stars {
        gap: 1px !important;
    }

    .star-icon {
        width: 14px !important;
        height: 14px !important;
    }

    .rating-text,
    .rating-count {
        font-size: 0.8rem !important;
    }

    /* ── Daily tip: compact ── */
    .imx-daily-tip {
        margin: 0.5rem 0.75rem !important;
        padding: 0.75rem !important;
    }

    /* ── Coaching cards ── */
    .coaching-card,
    .enhanced-support-card {
        padding: 1rem !important;
    }

    /* ── Speed dial: reposition ── */
    .imx-speed-dial {
        bottom: 1rem !important;
        right: 0.75rem !important;
    }

    /* ── Hide decorative elements ── */
    .v3-organic-bg,
    .v3-floating-elements,
    .v3-paper-plane,
    .v3-speech-bubble,
    .v3-callout-bubble,
    .new-starburst {
        display: none !important;
    }
}

/* ── Extra compact for very small phones ── */
@media screen and (max-width: 380px) {
    .cards-grid,
    .modal-grid {
        gap: 0.5rem !important;
    }

    .section,
    section {
        padding: 1rem 0.5rem !important;
    }

    .card {
        padding: 0.75rem !important;
    }

    .v3-hero-title {
        font-size: 1.3rem !important;
    }

    .stats-row,
    .imx-analytics-stats {
        grid-template-columns: 1fr !important;
    }
}

/* END COMPREHENSIVE MOBILE EXPERIENCE */


/* ---------- FLOATING SPARKLES (subtle accents) ---------- */
.v3-sparkle {
    position: absolute;
    font-size: 1rem;
    opacity: 0.12;
    pointer-events: none;
}

.v3-sparkle-1 {
    top: 12%;
    left: 20%;
    color: #0EA5E9;
    animation: v3-twinkle-float 25s ease-in-out infinite;
}

.v3-sparkle-2 {
    bottom: 30%;
    right: 18%;
    color: #6366F1;
    animation: v3-twinkle-float 30s ease-in-out infinite reverse;
    animation-delay: -8s;
}

/* Hide third sparkle - keeping just 2 for subtlety */
.v3-sparkle-3 {
    display: none;
}

@keyframes v3-twinkle-float {
    0%, 100% { 
        transform: translate(0, 0) rotate(0deg) scale(1);
        opacity: 0.08;
    }
    25% { 
        transform: translate(15px, -10px) rotate(45deg) scale(1.1);
        opacity: 0.15;
    }
    50% { 
        transform: translate(-8px, 15px) rotate(90deg) scale(0.95);
        opacity: 0.06;
    }
    75% { 
        transform: translate(10px, 8px) rotate(135deg) scale(1.05);
        opacity: 0.12;
    }
}

/* ---------- ACCENT PAPER PLANE (just 1, smaller) ---------- */
.v3-big-plane {
    position: absolute;
    pointer-events: none;
}

/* Only show first plane as a small accent */
.v3-big-plane-1 {
    bottom: 20%;
    left: 5%;
    width: 80px;
    height: 80px;
    opacity: 0.12;
    animation: v3-plane-fly-1 40s ease-in-out infinite;
}

/* Hide the other planes for cleaner look */
.v3-big-plane-2 {
    display: none;
}

.v3-big-plane-3 {
    display: none;
}

@keyframes v3-plane-fly-1 {
    0%, 100% { 
        transform: translate(0, 0) rotate(-10deg); 
        opacity: 0.10;
    }
    25% { 
        transform: translate(40px, -30px) rotate(5deg); 
        opacity: 0.15;
    }
    50% { 
        transform: translate(70px, 10px) rotate(-5deg); 
        opacity: 0.12;
    }
    75% { 
        transform: translate(30px, 35px) rotate(8deg); 
        opacity: 0.14;
    }
}

@keyframes v3-plane-fly-2 {
    0%, 100% { 
        transform: translate(0, 0) rotate(10deg); 
        opacity: 0.2;
    }
    25% { 
        transform: translate(100px, 40px) rotate(-5deg); 
        opacity: 0.3;
    }
    50% { 
        transform: translate(60px, -50px) rotate(15deg); 
        opacity: 0.2;
    }
    75% { 
        transform: translate(120px, 30px) rotate(-10deg); 
        opacity: 0.35;
    }
}

@keyframes v3-plane-fly-3 {
    0%, 100% { 
        transform: translate(0, 0) rotate(-10deg) scaleX(-1); 
        opacity: 0.2;
    }
    25% { 
        transform: translate(-70px, -40px) rotate(5deg) scaleX(-1); 
        opacity: 0.3;
    }
    50% { 
        transform: translate(-120px, 30px) rotate(-15deg) scaleX(-1); 
        opacity: 0.2;
    }
    75% { 
        transform: translate(-50px, 60px) rotate(8deg) scaleX(-1); 
        opacity: 0.35;
    }
}

/* ---------- FLOATING DOTS ---------- */
.v3-dot {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    pointer-events: none;
    animation: v3-dot-float 20s ease-in-out infinite;
}

.v3-dot-1 {
    top: 12%;
    left: 30%;
    background: #0EA5E9;
    opacity: 0.3;
}

.v3-dot-2 {
    top: 40%;
    right: 25%;
    background: #6366F1;
    opacity: 0.25;
    animation-delay: -4s;
}

.v3-dot-3 {
    bottom: 35%;
    left: 15%;
    background: #10B981;
    opacity: 0.2;
    animation-delay: -8s;
}

@keyframes v3-dot-float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(15px, -20px) scale(1.3); }
    50% { transform: translate(-10px, 10px) scale(0.8); }
    75% { transform: translate(20px, 15px) scale(1.2); }
}

/* ---------- MAKE MAIN PAPER PLANE BIGGER ---------- */
.v3-paper-plane {
    width: 220px !important;
    height: 220px !important;
    opacity: 0.35 !important;
}

/* ---------- MOBILE ADJUSTMENTS ---------- */
@media (max-width: 768px) {
    .v3-hero-cta-wrapper {
        gap: 1.5rem;
    }
    
    .v3-hero-buttons {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }
    
    .v3-btn-primary,
    .v3-btn-secondary {
        width: 100%;
        max-width: 280px;
        justify-content: center;
    }
    
    .v3-benefits-callout {
        transform: rotate(0deg);
        max-width: 320px;
    }
    
    .v3-callout-content {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .v3-mini-plane,
    .v3-shape {
        display: none;
    }
    
    .v3-sparkle {
        font-size: 0.9rem;
    }
    
    .v3-paper-plane {
        width: 120px !important;
        height: 120px !important;
        opacity: 0.2 !important;
    }
}

/* ---------- DARK MODE ADJUSTMENTS ---------- */
body.dark-mode .v3-benefits-callout {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(16, 185, 129, 0.08) 100%);
    border-color: rgba(16, 185, 129, 0.5);
}

body.dark-mode .v3-btn-secondary {
    background: var(--card-bg, #1E293B);
    border-color: #F8FAFC;
    color: #F8FAFC;
}

body.dark-mode .v3-btn-secondary .v3-btn-icon {
    filter: brightness(0) invert(1);
}

/* Fix for v3-btn-secondary hover state in dark mode */
body.dark-mode .v3-btn-secondary:hover {
    background: #F8FAFC;
    color: #0F172A;
}

body.dark-mode .v3-btn-secondary:hover .v3-btn-icon {
    filter: brightness(0);
}

body.dark-mode .v3-benefit-item {
    color: #F1F5F9;
}

/* Ensure callout footer text is visible in dark mode */
body.dark-mode .v3-callout-footer {
    color: #34D399;
}

body.dark-mode .v3-sparkle,
body.dark-mode .v3-shape {
    opacity: 0.06;
}

body.dark-mode .v3-dot {
    opacity: 0.08;
}

/* END V3 PHASE 2 ENHANCEMENTS */






/* ============================================
   RESTORED CSS (was inside old tracks section)
   ============================================ */

.badge{display:inline-block;border:1px solid var(--border-color);border-radius:999px;font-size:.68rem;padding:.15rem .5rem;color:var(--text-secondary);white-space:nowrap;flex:0 0 auto}
  .badge-courses{border-color:#60A5FA33;color:#60A5FA}
  .badge-labs{border-color:#34D39933;color:#34D399}
  .badge-games{border-color:#F59E0B33;color:#F59E0B}
  .badge-premium{border-color:#F472B633;color:#F472B6}
  .badge-resources{border-color:#A78BFA33;color:#A78BFA}
  .imx-actions{margin-top:.75rem;padding-top:.6rem;border-top:1px solid var(--border-color)}
  
/* Floating Section Navigator */
@media (max-width: 900px) {
}

/* Rich Comparison Modal Styles */
.imx-compare-card-rich { padding: 1.5rem; min-height: 400px; }
.imx-compare-type-badge { display: inline-block; padding: 0.25rem 0.75rem; border-radius: 20px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; margin-bottom: 1rem; }
.imx-type-course { background: rgba(14, 165, 233, 0.15); color: #0EA5E9; }
.imx-type-lab { background: rgba(16, 185, 129, 0.15); color: #10B981; }
.imx-type-game { background: rgba(245, 158, 11, 0.15); color: #F59E0B; }
.imx-type-premium { background: rgba(139, 92, 246, 0.15); color: #8B5CF6; }
.imx-compare-description { font-size: 0.85rem; color: var(--text-secondary); margin: 1rem 0; padding: 0.75rem; background: var(--hover-bg); border-radius: 8px; line-height: 1.5; }
.imx-compare-section { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border-color); }
.imx-compare-section-title { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.5rem; }
.imx-compare-objectives { list-style: none; padding: 0; margin: 0; }
.imx-compare-objectives li { font-size: 0.8rem; color: var(--text-secondary); padding: 0.35rem 0; padding-left: 1.25rem; position: relative; }
.imx-compare-objectives li::before { content: '->'; position: absolute; left: 0; color: var(--accent-color); }

/* Pomodoro Timer Animation */
@keyframes pomodoro-pulse {
    0%, 100% { box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4); }
    50% { box-shadow: 0 4px 24px rgba(239, 68, 68, 0.8); }
}

/* Pomodoro Modal Styles */
.imx-pomodoro-display {
    text-align: center;
    padding: 2rem;
    background: var(--hover-bg);
    border-radius: 16px;
    margin-bottom: 1.5rem;
}
.imx-pomodoro-time {
    font-size: 4rem;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-primary);
    letter-spacing: 0.1em;
}
.imx-pomodoro-label {
    font-size: 1rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: 0.5rem;
}
.imx-pomodoro-controls {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}
.imx-pomodoro-btn {
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    border: none;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
}
.imx-pomodoro-btn-start {
    background: linear-gradient(135deg, #10B981, #059669);
    color: white;
}
.imx-pomodoro-btn-start:hover { transform: scale(1.05); }
.imx-pomodoro-btn-pause {
    background: linear-gradient(135deg, #F59E0B, #D97706);
    color: white;
}
.imx-pomodoro-btn-reset {
    background: var(--secondary-bg);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}
.imx-pomodoro-presets {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}
.imx-pomodoro-preset {
    padding: 0.5rem 1rem;
    border-radius: 20px;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    color: var(--text-secondary);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
}
.imx-pomodoro-preset:hover, .imx-pomodoro-preset.active {
    background: var(--accent-color);
    color: white;
    border-color: var(--accent-color);
}
.imx-pomodoro-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}
.imx-pomodoro-stat {
    text-align: center;
}
.imx-pomodoro-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent-color);
}
.imx-pomodoro-stat-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

/* Daily Learning Tip Banner */
.imx-daily-tip {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.1), rgba(99, 102, 241, 0.1));
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1rem 1.5rem;
    margin: 1.5rem auto;
    max-width: 900px;
    display: flex;
    align-items: center;
    gap: 1rem;
}
.imx-daily-tip-icon {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #0EA5E9, #6366F1);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.imx-daily-tip-icon svg {
    width: 20px;
    height: 20px;
    stroke: white;
    fill: none;
}
.imx-daily-tip-content {
    flex: 1;
}
.imx-daily-tip-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent-color);
    font-weight: 600;
    margin-bottom: 0.25rem;
}
.imx-daily-tip-text {
    color: var(--text-primary);
    font-size: 0.95rem;
    line-height: 1.5;
}
.imx-daily-tip-refresh {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 8px;
    transition: all 0.2s ease;
}
.imx-daily-tip-refresh:hover {
    background: var(--hover-bg);
    color: var(--accent-color);
}

/* Surprise Me Button */
.imx-surprise-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, #EC4899, #8B5CF6);
    color: white;
    border: none;
    border-radius: 25px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.95rem;
}
.imx-surprise-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(236, 72, 153, 0.4);
}
.imx-surprise-btn svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
    animation: dice-shake 0.5s ease-in-out;
}
.imx-surprise-btn:hover svg {
    animation: dice-shake 0.5s ease-in-out infinite;
}
@keyframes dice-shake {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-15deg); }
    75% { transform: rotate(15deg); }
}

/* Card Duration Badge */
.card-duration {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    background: var(--hover-bg);
    padding: 0.25rem 0.6rem;
    border-radius: 12px;
    margin-left: auto;
}
.card-duration svg {
    width: 12px;
    height: 12px;
    stroke: currentColor;
    fill: none;
}

/* Copy Citation Button */
.imx-copy-citation {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    background: var(--hover-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.imx-copy-citation:hover {
    background: var(--accent-color);
    color: white;
    border-color: var(--accent-color);
}
.imx-copy-citation.copied {
    background: #10B981;
    color: white;
    border-color: #10B981;
}
.imx-copy-citation svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
}

/* Analytics Modal Styles */
.imx-analytics-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1.5rem; }
.imx-analytics-stat { background: var(--hover-bg); border-radius: 12px; padding: 1.25rem; text-align: center; }
.imx-analytics-stat-value { font-size: 2rem; font-weight: 700; color: var(--accent-color); }
.imx-analytics-stat-label { font-size: 0.8rem; color: var(--text-muted); text-transform: uppercase; margin-top: 0.25rem; }
.imx-analytics-section { margin-top: 1.5rem; }
.imx-analytics-section h4 { font-size: 0.85rem; font-weight: 600; color: var(--text-secondary); margin-bottom: 0.75rem; text-transform: uppercase; }
.imx-analytics-list { list-style: none; padding: 0; margin: 0; }
.imx-analytics-list li { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem; border-radius: 8px; margin-bottom: 0.5rem; background: var(--hover-bg); }
.imx-analytics-item-name { font-weight: 500; color: var(--text-primary); }
.imx-analytics-item-badge { background: var(--accent-color); color: white; padding: 0.2rem 0.6rem; border-radius: 12px; font-size: 0.75rem; font-weight: 600; }
.imx-analytics-item-time { font-size: 0.8rem; color: var(--text-muted); }
.imx-analytics-dates { margin-top: 1.5rem; text-align: center; color: var(--text-muted); }

/* Reading Lists Modal Styles */
.imx-modal-large { max-width: 700px; }
.imx-reading-list { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 12px; margin-bottom: 0.75rem; overflow: hidden; }
.imx-reading-list-header { display: flex; align-items: center; padding: 1rem 1.25rem; cursor: pointer; transition: background 0.2s; }
.imx-reading-list-header:hover { background: var(--hover-bg); }
.imx-reading-list-icon { 
    color: var(--accent-color, #0EA5E9); 
    margin-right: 1rem; 
    flex-shrink: 0;
}
.imx-reading-list-info { flex: 1; }
.imx-reading-list-name { font-weight: 600; color: var(--text-primary); margin-bottom: 0.25rem; }
.imx-reading-list-desc { font-size: 0.85rem; color: var(--text-muted); }
.imx-reading-list-toggle { color: var(--text-muted); font-size: 0.8rem; }
.imx-reading-list-items { padding: 0 1rem 1rem; border-top: 1px solid var(--border-color); background: var(--hover-bg); }
.imx-reading-item { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 0.5rem; border-bottom: 1px solid var(--border-color); text-decoration: none; transition: all 0.2s; }
.imx-reading-item:last-child { border-bottom: none; }
.imx-reading-item:hover { background: rgba(14, 165, 233, 0.1); padding-left: 0.75rem; }
.imx-reading-item-title { color: var(--text-primary); font-weight: 500; }
.imx-reading-item-type { background: rgba(14, 165, 233, 0.15); color: var(--accent-color); padding: 0.2rem 0.6rem; border-radius: 8px; font-size: 0.7rem; font-weight: 600; }

/* Mobile responsive for analytics */
@media (max-width: 600px) {
    .imx-analytics-stats { grid-template-columns: 1fr; }
    .imx-analytics-stat-value { font-size: 1.5rem; }
}

/* ========================================
   SPOTLIGHT TOUR STYLES
   ======================================== */
.imx-tour-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
.imx-tour-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* During Intro.js tour: suppress hover-triggered dropdowns unless tour-opened */
body.introjs-active-tour .nav-links > li.has-dropdown:not(.tour-dropdown-open):hover .dropdown-menu {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.imx-tour-spotlight {
    position: absolute;
    border-radius: 12px;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.15), 0 0 40px rgba(14, 165, 233, 0.8), inset 0 0 0 4px rgba(14, 165, 233, 1);
    transition: all 0.4s ease;
    pointer-events: none;
    background: transparent;
}

/* Pulsing highlight effect for spotlight */
@keyframes spotlightPulse {
    0%, 100% { box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.15), 0 0 40px rgba(14, 165, 233, 0.8), inset 0 0 0 4px rgba(14, 165, 233, 1); }
    50% { box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.15), 0 0 60px rgba(14, 165, 233, 1), inset 0 0 0 4px rgba(14, 165, 233, 1); }
}
.imx-tour-spotlight {
    animation: spotlightPulse 2s ease-in-out infinite;
}

/* Arrow connector from tooltip to spotlight */
.imx-tour-arrow {
    position: absolute;
    z-index: 10003;
    pointer-events: none;
}
.imx-tour-arrow svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}
.imx-tour-arrow path {
    fill: none;
    stroke: var(--accent-color, #0EA5E9);
    stroke-width: 2;
    stroke-dasharray: 6 4;
    animation: imxArrowDash 0.5s linear infinite;
}
.imx-tour-arrow-head {
    fill: var(--accent-color, #0EA5E9);
}
@keyframes imxArrowDash {
    to { stroke-dashoffset: -10; }
}

.imx-tour-tooltip {
    position: absolute;
    background: var(--card-bg, #fff);
    border-radius: 16px;
    padding: 1.5rem;
    max-width: 340px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    z-index: 10001;
    animation: imxTourPop 0.3s ease;
}
@keyframes imxTourPop {
    0% { transform: scale(0.9); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}
.imx-tour-tooltip::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    background: var(--card-bg, #fff);
    transform: rotate(45deg);
}
.imx-tour-tooltip.arrow-top::before { top: -8px; left: 24px; }
.imx-tour-tooltip.arrow-bottom::before { bottom: -8px; left: 24px; }
.imx-tour-tooltip.arrow-left::before { left: -8px; top: 24px; }
.imx-tour-tooltip.arrow-right::before { right: -8px; top: 24px; }
.imx-tour-tooltip.arrow-top-right::before { top: -8px; right: 24px; left: auto; }
.imx-tour-tooltip.arrow-bottom-right::before { bottom: -8px; right: 24px; left: auto; }
.imx-tour-step-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 1rem;
    font-size: 0.85rem;
    color: var(--text-secondary, #666);
}
.imx-tour-step-counter {
    background: var(--accent-color, #0EA5E9);
    color: white;
    padding: 4px 10px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.8rem;
}
.imx-tour-step-progress {
    flex: 1;
    height: 4px;
    background: var(--border-color, #ddd);
    border-radius: 2px;
    overflow: hidden;
}
.imx-tour-step-progress-bar {
    height: 100%;
    background: var(--accent-color, #0EA5E9);
    border-radius: 2px;
    transition: width 0.3s ease;
}
.imx-tour-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border-color, #ddd);
    transition: all 0.2s;
}
.imx-tour-dot.active {
    background: var(--accent-color, #0EA5E9);
    width: 24px;
    border-radius: 4px;
}
.imx-tour-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary, #1a1a2e);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.imx-tour-title svg {
    width: 20px;
    height: 20px;
    color: var(--accent-color, #0EA5E9);
}
.imx-tour-desc {
    font-size: 0.95rem;
    color: var(--text-secondary, #64748b);
    line-height: 1.6;
    margin-bottom: 1.25rem;
}
.imx-tour-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
}
.imx-tour-skip {
    background: none;
    border: none;
    color: var(--text-muted, #52627A);
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0.5rem;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
.imx-tour-skip:hover { color: var(--text-primary, #1a1a2e); }
.imx-tour-skip:active { transform: scale(0.97); }
.imx-tour-nav-buttons {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.imx-tour-prev {
    background: var(--secondary-bg, #f1f5f9);
    color: var(--text-primary, #1a1a2e);
    border: 1px solid var(--border-color, #e2e8f0);
    padding: 0.65rem 1rem;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.9rem;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
.imx-tour-prev:hover {
    background: var(--border-color, #e2e8f0);
}
.imx-tour-prev:active {
    transform: scale(0.97);
}
.imx-tour-next {
    background: linear-gradient(135deg, #0EA5E9, #06B6D4);
    color: white;
    border: none;
    padding: 0.65rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
.imx-tour-next:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.4);
}
.imx-tour-next:active {
    transform: scale(0.97);
}
.imx-tour-welcome {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--card-bg, #fff);
    border-radius: 20px;
    padding: 2.5rem;
    max-width: 440px;
    text-align: center;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.3);
    z-index: 10001;
    animation: imxTourPop 0.4s ease;
}
.imx-tour-welcome-icon {
    margin-bottom: 1rem;
    color: var(--accent-color, #0EA5E9);
}
.imx-tour-welcome h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary, #1a1a2e);
    margin-bottom: 0.75rem;
}
.imx-tour-welcome p {
    color: var(--text-secondary, #64748b);
    margin-bottom: 1.5rem;
    line-height: 1.6;
}
.imx-tour-welcome-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
}
.imx-tour-btn-primary {
    background: linear-gradient(135deg, #0EA5E9, #06B6D4);
    color: white;
    border: none;
    padding: 0.85rem 2rem;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
.imx-tour-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(14, 165, 233, 0.4);
}
.imx-tour-btn-primary:active {
    transform: scale(0.97);
}
.imx-tour-btn-secondary {
    background: var(--hover-bg, #f1f5f9);
    color: var(--text-primary, #1a1a2e);
    border: none;
    padding: 0.85rem 1.5rem;
    border-radius: 10px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
.imx-tour-btn-secondary:hover {
    background: var(--border-color, #e2e8f0);
}
.imx-tour-btn-secondary:active {
    transform: scale(0.97);
}
/* ============================================
   NEW COMPONENT CSS
   ============================================ */

/* Free Resources & Libraries Grid */
.imx-libraries-grid-section { padding: 2rem 0; }
.imx-libraries-grid-section .section-title { text-align: center; }
.imx-libraries-grid-section .section-subtitle { text-align: center; margin-bottom: 1.5rem; }
.imx-libraries-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* Flagship Courses Section */
.imx-flagship-courses { padding: 4rem 2rem; }

/* Roadmap Compact */
.imx-roadmap-compact {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

/* .imx-h2 gradient heading */
.imx-h2 {
  font-family: Inter, system-ui, sans-serif;
  font-size: 1.9rem;
  letter-spacing: .1px;
  margin: .1rem 0 .1rem;
  background: linear-gradient(135deg, #0EA5E9, #6366F1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Modal large variant */
.imx-modal-large .modal-content {
  max-width: 900px;
}



/* === Free Resources Uniform Grid === */
.imx-resource-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
@media (max-width: 900px) { .imx-resource-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .imx-resource-grid { grid-template-columns: 1fr; } }

.imx-resource-card {
  display: flex;
  flex-direction: column;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 1.5rem;
  text-decoration: none;
  color: var(--text-primary);
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
  position: relative;
}
.imx-resource-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  border-color: var(--accent-color);
}
.imx-resource-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1rem;
}
.imx-resource-icon svg {
  stroke: currentColor; fill: none; stroke-width: 1.5;
}
.imx-resource-title {
  font-family: 'Inter', sans-serif;
  font-size: 1.1rem; font-weight: 700;
  margin-bottom: 0.5rem;
}
.imx-resource-desc {
  font-size: 0.82rem; color: var(--text-secondary);
  line-height: 1.55; flex: 1;
}
.imx-resource-stats {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  margin-top: 0.75rem;
  font-size: 0.75rem; color: var(--text-muted);
}
.imx-resource-stats span {
  background: var(--hover-bg); padding: 0.2rem 0.5rem;
  border-radius: 6px;
}
.imx-resource-stats strong { color: var(--text-primary); }
.imx-resource-cta {
  display: inline-flex; align-items: center; gap: 0.3rem;
  margin-top: 1rem;
  font-size: 0.82rem; font-weight: 600;
  /* WCAG AA: sky-800 #075985 = 7.56:1 on white. Was #0EA5E9 = 2.77:1. */
  color: #075985;
}
body.dark-mode .imx-resource-cta,
[data-theme="dark"] .imx-resource-cta { color: #7DD3FC; }
.imx-resource-cta svg {
  stroke: var(--accent-color); fill: none; stroke-width: 2;
}

/* === Quiz CTA Fix === */
.track-quiz-inner .imx-btn {
  display: inline-flex !important;
  font-family: 'Amaranth', sans-serif;
  font-size: 1.1rem;
  padding: 0.9rem 2.25rem;
  background: var(--gradient-primary);
  color: white;
  border: none;
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  transition: all 0.2s;
}
.track-quiz-inner .imx-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-xl);
}

/* === Premium Tiers Box === */
.imx-premium-tiers {
  max-width: 900px;
  margin: 0 auto 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 600px) {
  .imx-premium-tiers { grid-template-columns: 1fr; }
}

/* === Community 3-Card Grid === */
.imx-community-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  align-items: stretch;
}
@media (max-width: 680px) { .imx-community-grid { grid-template-columns: 1fr; } }

.imx-community-card {
  display: flex;
  flex-direction: column;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 1.5rem;
  transition: border-color 0.15s, box-shadow 0.15s;
  font-style: normal;
}
.imx-community-card * {
  font-style: normal;
  text-decoration: none;
}
.imx-community-card:hover {
  border-color: var(--accent-color);
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}
.imx-community-card-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.25rem 0.65rem;
  border-radius: 20px;
  margin-bottom: 0.75rem;
  width: fit-content;
}
.imx-community-card-badge svg {
  stroke: currentColor; fill: none; stroke-width: 1.5;
}
.imx-community-card-title {
  font-family: 'Inter', 'Amaranth', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  font-style: normal;
  margin-bottom: 0.5rem;
  color: var(--text-primary);
}
.imx-community-card-desc {
  font-size: 0.82rem;
  font-style: normal;
  color: var(--text-secondary);
  line-height: 1.55;
  flex: 1;
}
.imx-community-card-features {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
  margin-bottom: 1rem;
}
.imx-community-card-features span {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  color: var(--text-muted);
  background: var(--hover-bg);
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
}
.imx-community-card-features svg {
  stroke: var(--text-muted); fill: none; stroke-width: 1.5;
}
.imx-community-card-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.6rem 1.25rem;
  color: white !important;
  font-weight: 600;
  font-size: 0.85rem;
  font-style: normal;
  border-radius: 8px;
  text-decoration: none !important;
  transition: opacity 0.15s, transform 0.15s;
  margin-top: auto;
  width: fit-content;
}
.imx-community-card-cta:hover {
  opacity: 0.9;
  transform: translateY(-1px);
  text-decoration: none !important;
}
.imx-community-card-cta:visited {
  color: white !important;
  text-decoration: none !important;
}
.imx-community-card-cta--outline {
  background: transparent !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-color);
}
.imx-community-card-cta--outline:hover {
  border-color: var(--accent-color);
  color: var(--accent-color) !important;
}

/* END V3 DESIGN SYSTEM */

/* Accessibility: focus-visible styles */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--accent-color, #0EA5E9);
    outline-offset: 2px;
}

/* Screen-reader only utility */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* ---------- Specials dropdown — accordion subgroups ---------- */
/* Replaces the old flat label rule with a true collapsible accordion.
   Sections are closed by default; click the toggle to open/close. */
.specials-grouped { padding: 0.25rem 0; }
.specials-grouped .dropdown-section {
    border-bottom: 1px solid rgba(148, 163, 184, 0.10);
    list-style: none;
}
.specials-grouped .dropdown-section:last-child { border-bottom: none; }
.specials-grouped .dropdown-section-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.6rem 1rem;
    background: transparent;
    border: none;
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted, #64748B);
    cursor: pointer;
    text-align: left;
    transition: background 0.2s, color 0.2s;
}
.specials-grouped .dropdown-section-toggle:hover {
    background: var(--hover-bg, rgba(14, 165, 233, 0.08));
    color: var(--text-primary, #0F172A);
}
.specials-grouped .dropdown-section-chevron {
    width: 14px;
    height: 14px;
    transition: transform 0.2s ease;
    flex-shrink: 0;
    margin-left: 0.5rem;
}
.specials-grouped .dropdown-section.open .dropdown-section-chevron {
    transform: rotate(180deg);
}
.specials-grouped .dropdown-section-items {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
}
.specials-grouped .dropdown-section.open .dropdown-section-items {
    max-height: 600px;
    padding-bottom: 0.35rem;
}
.specials-grouped .dropdown-section-items li a {
    padding-left: 1.5rem !important;
}

/* ==========================================================================
   Mobile margin safety net (≤768px)
   Several sections were authored with inline padding or zero horizontal
   padding and never got a mobile rule. This block enforces consistent
   side breathing room across the homepage and inner pages without
   touching desktop layouts.
   ========================================================================== */
@media (max-width: 768px) {
    /* Top-level <section> elements get a base side padding floor */
    body > section,
    main > section,
    .imx-libraries-grid-section,
    .imx-tracks-compact,
    .imx-pathways-section,
    .imx-flagship-courses,
    .enhanced-support-section,
    .newsletter-section,
    .whats-new-section,
    .whatsapp-plc-section,
    section.section,
    section[id="community"],
    section[id="quiz"],
    section[id="popular-courses"],
    section[id="labs"],
    section[id="games"],
    section[id="deep-dives"],
    section[id="premium"],
    section[id="about"] {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
    }

    /* Inline-styled section wrappers that set max-width and auto margins
       (the common "centered container" pattern) — make sure they don't
       lose the floor padding. */
    body > section > div[style*="max-width"],
    main > section > div[style*="max-width"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Card grids — ensure they single-column at this width and have a
       minimum gap so cards never visually butt into each other. */
    .cards-grid,
    .imx-libraries-grid,
    .imx-resource-grid,
    .imx-community-grid,
    .imx-premium-tiers,
    .flagship-grid,
    .support-options-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    /* Hero / first-page padding floor */
    .hero, .imx-hero, header.imx-hero, .v3-hero, .hero-section {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
    }

    /* Explicit override for the worst offender (was padding: 2rem 0;) */
    .imx-libraries-grid-section {
        padding: 2rem 1.25rem !important;
    }
}

/* Even tighter floor for very small phones */
@media (max-width: 380px) {
    body > section,
    main > section,
    .imx-libraries-grid-section,
    .hero, .imx-hero, header.imx-hero, .v3-hero {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}