<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Studio by Lumos</title>
    
    <style>
        :root {
            --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            --font-secondary: 'arial', 'Space Grotesk', 'Inter';
            --font-logo: 'Inter', 'Space Grotesk';
            --font-size-xs: 0.75rem;
            --font-size-sm: 0.875rem;
            --font-size-base: 1rem;
            --font-size-lg: 1.125rem;
            --font-size-xl: 1.25rem;
            --font-size-2xl: 1.5rem;
            --font-size-3xl: 1.875rem;
            --font-size-4xl: 2.25rem;
            --font-size-5xl: 3rem;
            --font-size-6xl: 3.75rem;
            
            --logo-color: #418ADB;
            
            --spacing-xs: 0.25rem;
            --spacing-sm: 0.5rem;
            --spacing-md: 1rem;
            --spacing-lg: 1.5rem;
            --spacing-xl: 2rem;
            --spacing-2xl: 3rem;
            --spacing-3xl: 4rem;
            --spacing-4xl: 6rem;
            
            --border-radius-sm: 0.25rem;
            --border-radius-md: 0.5rem;
            --border-radius-lg: 0.75rem;
            --border-radius-xl: 1rem;
            
            --transition-fast: 0.15s ease-in-out;
            --transition-normal: 0.3s ease-in-out;
            --transition-slow: 0.5s ease-in-out;
        }

        [data-theme="dark"] {
            --color-primary: #418ADB;
            --color-primary-hover: #00B8E6;
            --color-secondary: #6366F1;
            --color-accent: #F59E0B;
            
            --color-background: #0A0A0A;
            --color-surface: #1A1A1A;
            --color-surface-hover: #2A2A2A;
            --color-border: #333333;
            --color-border-light: #404040;
            
            --color-text-primary: #FFFFFF;
            --color-text-secondary: #B3B3B3;
            --color-text-muted: #808080;
            --color-text-inverse: #FFFFFF;
            
            --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
            --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
            --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.3);
            --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.3);
        }

        [data-theme="light"] {
            --color-primary: #418ADB;
            --color-primary-hover: #00B8E6;
            --color-secondary: #6366F1;
            --color-accent: #F59E0B;
            
            --color-background: #FFFFFF;
            --color-surface: #F8F9FA;
            --color-dark: #454545;
            --color-surface-hover: #E9ECEF;
            --color-border: #E5E7EB;
            --color-border-light: #D1D5DB;
            
            --color-text-primary: #1F2937;
            --color-text-secondary: #4B5563;
            --color-text-muted: #6B7280;
            --color-text-inverse: #FFFFFF;
            
            --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
            --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.1);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: var(--font-primary);
            font-size: var(--font-size-base);
            line-height: 1.6;
            color: var(--color-text-primary);
            background-color: var(--color-background);
            transition: background-color var(--transition-normal), color var(--transition-normal);
            min-height: 100vh;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 var(--spacing-md);
        }

        header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
            background-color: rgba(10, 10, 10, 0.95);
            backdrop-filter: blur(10px);
            border-bottom: none;
            transition: all var(--transition-normal);
        }

        .header-content {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: var(--spacing-md) 0;
        }

        .logo {
            font-family: var(--font-logo);
            font-size: var(--font-size-2xl);
            font-weight: 700;
            color: #FFFFFF;
            text-decoration: none;
            transition: color var(--transition-fast);
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        .logo:hover {
            color: var(--color-primary-hover);
        }

        .logo-icon {
            width: 40px;
            height: 40px;
            background-color: var(--logo-color);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .logo-icon svg {
            width: 18px;
            height: 18px;
            fill: white;
        }

        .nav-menu {
            display: flex;
            list-style: none;
            gap: var(--spacing-xl);
            align-items: center;
        }

        .nav-menu a {
            font-weight: 500;
            color: #B3B3B3;
            text-decoration: none;
            transition: color var(--transition-fast);
            position: relative;
        }

        .nav-menu a:hover,
        .nav-menu a.active {
            color: var(--color-primary);
        }

        .mobile-menu-toggle {
            display: none;
            flex-direction: column;
            gap: 4px;
            background: none;
            border: none;
            cursor: pointer;
            padding: var(--spacing-sm);
        }

        .mobile-menu-toggle span {
            width: 25px;
            height: 2px;
            background-color: #FFFFFF;
            transition: all var(--transition-fast);
        }

        .mobile-menu-toggle.active span:nth-child(1) {
            transform: rotate(45deg) translate(4.5px, 4.5px);
        }

        .mobile-menu-toggle.active span:nth-child(2) {
            opacity: 0;
        }

        .mobile-menu-toggle.active span:nth-child(3) {
            transform: rotate(-45deg) translate(4.5px, -4.5px);
        }

        .mobile-menu {
            display: none;
            position: fixed;
            top: 73px;
            left: 0;
            right: 0;
            background-color: rgba(10, 10, 10, 0.96);
            border-bottom: 1px solid #333333;
            padding: var(--spacing-lg);
            box-shadow: var(--shadow-lg);
            z-index: 999;
            min-height: calc(100vh - 73px);
        }

        .mobile-menu.active {
            display: block;
        }

        .mobile-menu ul {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: var(--spacing-lg);
        }

        .mobile-menu a {
            font-size: var(--font-size-lg);
            font-weight: 500;
            color: #B3B3B3;
            text-decoration: none;
            padding: var(--spacing-sm) 0;
        }

        main {
            margin-top: 73px;
            min-height: calc(100vh - 73px);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: var(--spacing-4xl) var(--spacing-md);
        }

        .hero {
            text-align: center;
            max-width: 900px;
        }

        .hero-logo {
            width: 200px;
            height: 200px;
            background-color: var(--logo-color);
            border-radius: 20px;
            margin: 0 auto 2rem;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 10px 40px rgba(65, 138, 219, 0.2);
        }

        .hero-logo svg {
            width: 90px;
            height: 90px;
            fill: white;
        }

        h1 {
            font-family: var(--font-secondary);
            font-size: var(--font-size-5xl);
            font-weight: 800;
            margin-bottom: 1.5rem;
            line-height: 1.2;
            color: var(--color-text-primary);
        }

        .tagline {
            font-size: var(--font-size-xl);
            color: var(--color-text-secondary);
            margin-bottom: 3rem;
            line-height: 1.6;
        }

        .features {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 1.5rem;
            margin-top: 4rem;
            text-align: left;
        }

        .feature {
            background-color: var(--color-surface);
            padding: 2rem;
            border-radius: var(--border-radius-xl);
            border: 1px solid var(--color-border);
            transition: all var(--transition-normal);
        }

        .feature:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-lg);
        }

        .feature h3 {
            font-size: var(--font-size-lg);
            margin-bottom: 0.5rem;
            color: var(--color-primary);
        }

        .feature p {
            color: var(--color-text-secondary);
            font-size: var(--font-size-sm);
            line-height: 1.6;
        }

        .cta {
            margin-top: 3rem;
        }

        .cta-button {
            display: inline-block;
            background-color: var(--color-primary);
            color: white;
            padding: 1rem 2.5rem;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 600;
            font-size: var(--font-size-lg);
            transition: all var(--transition-normal);
            border: none;
            cursor: pointer;
        }

        .cta-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(65, 138, 219, 0.3);
            background-color: var(--color-primary-hover);
        }

        footer {
            background-color: var(--color-surface);
            border-top: 1px solid var(--color-border);
            padding: var(--spacing-2xl) 0;
            text-align: center;
            margin-top: 0;
            clear: both;
        }

        #desktopFooter {
            display: block;
        }

        #mobileFooter {
            display: none;
        }

        .footer-grid {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: var(--spacing-2xl);
            align-items: start;
            max-width: 750px;
            margin: 0 auto;
            text-align: left;
        }

        .footer-section h6 {
            color: var(--color-text-primary);
            font-size: var(--font-size-sm);
            font-weight: 600;
            margin-bottom: var(--spacing-md);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .footer-text {
            color: var(--color-text-secondary);
            font-size: var(--font-size-sm);
            line-height: 1.6;
        }

        .footer-text p {
            margin-bottom: var(--spacing-xs);
        }

        .footer-text a {
            color: var(--color-text-secondary);
            text-decoration: none;
            transition: color var(--transition-fast);
        }

        .footer-text a:hover {
            color: var(--color-primary);
        }

        .social-links {
            display: flex;
            gap: var(--spacing-md);
            align-items: center;
            flex-wrap: wrap;
        }

        .social-links a {
            color: var(--color-text-secondary);
            font-size: var(--font-size-lg);
            transition: color var(--transition-fast);
        }

        .social-links a:hover {
            color: var(--color-primary);
        }

        @media (max-width: 768px) {
            .nav-menu {
                display: none;
            }

            .mobile-menu-toggle {
                display: flex;
            }

            h1 {
                font-size: var(--font-size-4xl);
            }

            .tagline {
                font-size: var(--font-size-lg);
            }

            .hero-logo {
                width: 150px;
                height: 150px;
            }

            .hero-logo svg {
                width: 65px;
                height: 65px;
            }

            .features {
                grid-template-columns: 1fr;
            }

            #desktopFooter {
                display: none;
            }

            #mobileFooter {
                display: block;
            }

            .mobile-footer-social {
                text-align: center;
                margin-bottom: var(--spacing-xl);
            }

            .mobile-footer-social .social-links {
                justify-content: center;
                gap: var(--spacing-xl);
            }

            .mobile-footer-social .social-links a {
                font-size: var(--font-size-2xl);
            }

            .mobile-footer-contact {
                text-align: center;
                margin-bottom: var(--spacing-lg);
            }

            .mobile-footer-copyright {
                text-align: center;
                color: var(--color-text-secondary);
                font-size: var(--font-size-xs);
                line-height: 1.6;
                border-top: 1px solid var(--color-border);
                padding-top: var(--spacing-md);
            }
        }

        @media (max-width: 480px) {
            h1 {
                font-size: var(--font-size-3xl);
            }
        }
    </style>
</head>
<body>
    <header>
        <div class="container">
            <div class="header-content">
                <a href="#" class="logo">
                    <div class="logo-icon">
                        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path d="M8 5v14l11-7z"/>
                        </svg>
                    </div>
                    <span>Studio by Lumos</span>
                </a>

                <nav class="nav-menu">
                    <a href="https://lumosllc.com">Lumos, LLC</a>
                    <a href="mailto:info@studiobylumos.com">Contact</a>
                    
                    <button id="themeToggle" style="background: none; border: none; cursor: pointer; padding: var(--spacing-sm); border-radius: var(--border-radius-md); transition: background-color var(--transition-fast);">
                        <svg width="20" height="20" fill="none" stroke="#B3B3B3" viewBox="0 0 24 24" id="sunIcon">
                            <circle cx="12" cy="12" r="5"/>
                            <path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/>
                        </svg>
                        <svg width="20" height="20" fill="none" stroke="#B3B3B3" viewBox="0 0 24 24" id="moonIcon" style="display: none;">
                            <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
                        </svg>
                    </button>
                </nav>

                <button class="mobile-menu-toggle" id="mobileMenuToggle">
                    <span></span>
                    <span></span>
                    <span></span>
                </button>
            </div>
        </div>

        <div class="mobile-menu" id="mobileMenu">
            <ul>
                <li><a href="https://lumosllc.com">Lumos, LLC</a></li>
                <li><a href="mailto:info@studiobylumos.com">Contact</a></li>
                <li style="padding-top: var(--spacing-md); border-top: 1px solid #333333; margin-top: var(--spacing-md);">
                    <button id="mobileThemeToggle" style="background: none; border: none; cursor: pointer; color: #B3B3B3; display: flex; align-items: center; gap: var(--spacing-sm); font-size: var(--font-size-lg);">
                        <svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24" id="mobileSunIcon">
                            <circle cx="12" cy="12" r="5"/>
                            <path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/>
                        </svg>
                        <svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24" id="mobileMoonIcon" style="display: none;">
                            <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
                        </svg>
                        <span id="mobileThemeText">Light Mode</span>
                    </button>
                </li>
            </ul>
        </div>
    </header>

    <main>
        <div class="hero">
            <div class="hero-logo">
                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path d="M8 5v14l11-7z"/>
                </svg>
            </div>
            <h1>Studio by Lumos</h1>
            <p class="tagline">Premium production spaces designed for creators, podcasters, and live shopping professionals</p>

            <div class="features">
                <div class="feature">
                    <h3>Main Production Space</h3>
                    <p>Professional CYC and Green Screen walls for film, photography, and video production</p>
                </div>
                <div class="feature">
                    <h3>Podcast Studios</h3>
                    <p>Two fully-equipped podcast recording spaces with professional audio and video equipment</p>
                </div>
                <div class="feature">
                    <h3>Voiceover Booth</h3>
                    <p>Acoustically treated booth perfect for voiceover work and audio recording.  Includes microphone and computer.</p>
                </div>
                <div class="feature">
                    <h3>Livestream Shopping</h3>
                    <p>Three dedicated spaces optimized for livestream shopping and e-commerce content</p>
                </div>
            </div>

            <div class="cta">
                <a href="mailto:info@studiobylumos.com" class="cta-button">Coming Soon - Contact Us</a>
            </div>
        </div>
    </main>

    <footer>
        <div class="container">
            <div id="desktopFooter">
                <div class="footer-grid">
                    <div class="footer-section">
                        <div class="footer-text">
                            <p>&copy; 2025 Lumos LLC.<br>All rights reserved.</p>
                        </div>
                    </div>

                    <div class="footer-section">
                        <h6>Follow Us</h6>
                        <div class="social-links">
                            <a href="http://www.facebook.com/lumosllc/" target="_blank" rel="noopener noreferrer">
                                <svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
                                </svg>
                            </a>
                            <a href="http://twitter.com/lumosllc/" target="_blank" rel="noopener noreferrer">
                                <svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
                                </svg>
                            </a>
                            <a href="http://www.tiktok.com/@lumosllc/" target="_blank" rel="noopener noreferrer">
                                <svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.7579.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z"/>
                            </svg>
                        </a>
                    </div>
                </div>
                
                <div class="mobile-footer-contact">
                    <div class="footer-text" style="line-height: 1.8;">
                        <p><a href="mailto:info@lumosllc.com">info@lumosllc.com</a></p>
                        <p><a href="tel:4242798267">(424) 279-8267</a></p>
                    </div>
                </div>
                
            </div>
        </div>
    </footer>

    <script>
        // ============================================
        // DEFAULT THEME SETTING - CHANGE THIS TO 'light' OR 'dark'
        // ============================================
        const DEFAULT_THEME = 'dark';
        // ============================================

        function setCookie(name, value, days = 365) {
            const expires = new Date();
            expires.setTime(expires.getTime() + (days * 24 * 60 * 60 * 1000));
            document.cookie = `${name}=${value};expires=${expires.toUTCString()};path=/`;
        }
        
        function getCookie(name) {
            const nameEQ = name + "=";
            const ca = document.cookie.split(';');
            for(let i = 0; i < ca.length; i++) {
                let c = ca[i];
                while (c.charAt(0) == ' ') c = c.substring(1, c.length);
                if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
            }
            return null;
        }

        function initThemeToggle() {
            const themeToggle = document.getElementById('themeToggle');
            const mobileThemeToggle = document.getElementById('mobileThemeToggle');
            const html = document.documentElement;
            const sunIcon = document.getElementById('sunIcon');
            const moonIcon = document.getElementById('moonIcon');
            const mobileSunIcon = document.getElementById('mobileSunIcon');
            const mobileMoonIcon = document.getElementById('mobileMoonIcon');
            const mobileThemeText = document.getElementById('mobileThemeText');
            
            let currentTheme = getCookie('theme') || DEFAULT_THEME;
            html.setAttribute('data-theme', currentTheme);
            
            function updateIcons() {
                if (currentTheme === 'light') {
                    sunIcon.style.display = 'none';
                    moonIcon.style.display = 'block';
                    mobileSunIcon.style.display = 'none';
                    mobileMoonIcon.style.display = 'block';
                    mobileThemeText.textContent = 'Dark Mode';
                } else {
                    sunIcon.style.display = 'block';
                    moonIcon.style.display = 'none';
                    mobileSunIcon.style.display = 'block';
                    mobileMoonIcon.style.display = 'none';
                    mobileThemeText.textContent = 'Light Mode';
                }
            }
            
            function toggleTheme() {
                currentTheme = currentTheme === 'light' ? 'dark' : 'light';
                html.setAttribute('data-theme', currentTheme);
                setCookie('theme', currentTheme);
                updateIcons();
            }
            
            updateIcons();
            
            if (themeToggle) {
                themeToggle.addEventListener('click', toggleTheme);
            }
            if (mobileThemeToggle) {
                mobileThemeToggle.addEventListener('click', toggleTheme);
            }
        }
        
        document.addEventListener('DOMContentLoaded', function() {
            initThemeToggle();
            
            const mobileMenuToggle = document.getElementById('mobileMenuToggle');
            const mobileMenu = document.getElementById('mobileMenu');

            if (mobileMenuToggle && mobileMenu) {
                mobileMenuToggle.addEventListener('click', function() {
                    mobileMenuToggle.classList.toggle('active');
                    mobileMenu.classList.toggle('active');
                });

                const mobileLinks = mobileMenu.querySelectorAll('a');
                mobileLinks.forEach(link => {
                    link.addEventListener('click', function() {
                        mobileMenuToggle.classList.remove('active');
                        mobileMenu.classList.remove('active');
                    });
                });

                document.addEventListener('click', function(e) {
                    if (!mobileMenuToggle.contains(e.target) && !mobileMenu.contains(e.target)) {
                        mobileMenuToggle.classList.remove('active');
                        mobileMenu.classList.remove('active');
                    }
                });
            }
        });
    </script>
</body>
</html>