{"id":9,"date":"2026-07-27T14:00:57","date_gmt":"2026-07-27T14:00:57","guid":{"rendered":"https:\/\/officeodyssey.maudenatasha.com\/?page_id=9"},"modified":"2026-09-18T14:34:23","modified_gmt":"2026-09-18T14:34:23","slug":"home","status":"publish","type":"page","link":"https:\/\/officeodyssey.maudenatasha.com\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n \t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Office Odyssey \u2014 Official Game Landing Page<\/title>\r\n <meta name=\"description\" content=\"Official website for Maude Natasha: Office Odyssey \u2014 A cinematic educational gaming experience of ambition, strategy, and triumph.\">\r\n\r\n <!-- Preconnect & DNS-Prefetch for high-speed delivery -->\r\n <link rel=\"preconnect\" href=\"https:\/\/officeodyssey.maudenatasha.com\" crossorigin>\r\n <link rel=\"dns-prefetch\" href=\"https:\/\/officeodyssey.maudenatasha.com\">\r\n\r\n <!-- Silent Asset Prefetch: Caches files in background without running audio -->\r\n <link rel=\"prefetch\" href=\"https:\/\/officeodyssey.maudenatasha.com\/game\/index.html\" as=\"document\">\r\n\r\n <!-- Google Fonts -->\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700&family=Orbitron:wght@600;700;800;900&family=Outfit:wght@400;600;700;800&display=swap\" rel=\"stylesheet\">\r\n \r\n <!-- GSAP & ScrollTrigger -->\r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.5\/gsap.min.js\"><\/script>\r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.12.5\/ScrollTrigger.min.js\"><\/script>\r\n\r\n <style>\r\n \/* ==========================================================================\r\n OFFICE ODYSSEY \u2014 AAA GAMING LANDING PAGE (WORDPRESS SCOPED: #maude-natasha-game)\r\n ========================================================================== *\/\r\n\r\n html, body {\r\n margin: 0;\r\n padding: 0;\r\n background-color: #ebf3fa;\r\n }\r\n\r\n #maude-natasha-game {\r\n --font-display: 'Orbitron', 'Outfit', sans-serif;\r\n --font-body: 'Inter', sans-serif;\r\n\r\n --bg-dark: #ebf3fa;\r\n --bg-card: #ffffff;\r\n --bg-glass: rgba(2, 132, 199, 0.04);\r\n\r\n --accent-gold: #d97706;\r\n --accent-gold-glow: rgba(217, 119, 6, 0.3);\r\n --accent-cyan: #0284c7;\r\n --accent-pink: #e11d48;\r\n --accent-purple: #7c3aed;\r\n\r\n --text-main: #0f172a;\r\n --text-muted: #334155;\r\n --text-dim: #64748b;\r\n\r\n box-sizing: border-box;\r\n background-color: #ebf3fa;\r\n color: var(--text-main);\r\n font-family: var(--font-body);\r\n line-height: 1.6;\r\n position: relative;\r\n width: 100%;\r\n margin: 0;\r\n padding: 0;\r\n overflow-x: hidden;\r\n -webkit-font-smoothing: antialiased;\r\n }\r\n\r\n #maude-natasha-game *,\r\n #maude-natasha-game *::before,\r\n #maude-natasha-game *::after {\r\n box-sizing: inherit;\r\n margin: 0;\r\n padding: 0;\r\n border: none;\r\n outline: none;\r\n }\r\n\r\n #maude-natasha-game ::selection {\r\n background-color: var(--accent-gold);\r\n color: #000;\r\n }\r\n\r\n #maude-natasha-game ::-webkit-scrollbar {\r\n width: 8px;\r\n }\r\n #maude-natasha-game ::-webkit-scrollbar-track {\r\n background: var(--bg-dark);\r\n }\r\n #maude-natasha-game ::-webkit-scrollbar-thumb {\r\n background: rgba(255, 200, 55, 0.3);\r\n border-radius: 4px;\r\n }\r\n #maude-natasha-game ::-webkit-scrollbar-thumb:hover {\r\n background: var(--accent-gold);\r\n }\r\n\r\n \/* CONTAINER & UTILITY *\/\r\n #maude-natasha-game .g-container {\r\n max-width: 1320px;\r\n margin: 0 auto;\r\n padding: 0 24px;\r\n width: 100%;\r\n }\r\n\r\n #maude-natasha-game .g-section {\r\n padding: 110px 0;\r\n position: relative;\r\n }\r\n\r\n #maude-natasha-game .g-badge {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 8px;\r\n padding: 6px 16px;\r\n border-radius: 50px;\r\n background: rgba(255, 200, 55, 0.08);\r\n color: var(--accent-gold);\r\n font-family: var(--font-display);\r\n font-size: 0.72rem;\r\n letter-spacing: 2.5px;\r\n text-transform: uppercase;\r\n margin-bottom: 16px;\r\n }\r\n\r\n #maude-natasha-game .g-title {\r\n font-family: var(--font-display);\r\n font-size: clamp(2.2rem, 5vw, 3.6rem);\r\n font-weight: 800;\r\n letter-spacing: -1px;\r\n line-height: 1.1;\r\n color: #0f172a;\r\n text-transform: uppercase;\r\n margin-bottom: 20px;\r\n }\r\n\r\n #maude-natasha-game .g-desc {\r\n font-size: clamp(1rem, 2vw, 1.15rem);\r\n color: var(--text-muted);\r\n max-width: 640px;\r\n margin-bottom: 30px;\r\n }\r\n\r\n \/* PLAY BUTTON *\/\r\n #maude-natasha-game .mn-play-btn {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 12px;\r\n padding: 18px 40px;\r\n border-radius: 6px;\r\n background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);\r\n color: #ffffff;\r\n font-family: var(--font-display);\r\n font-size: 0.9rem;\r\n font-weight: 800;\r\n letter-spacing: 2px;\r\n text-transform: uppercase;\r\n text-decoration: none;\r\n cursor: pointer;\r\n box-shadow: 0 8px 30px rgba(217, 119, 6, 0.35);\r\n transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n #maude-natasha-game .mn-play-btn::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: -100%;\r\n width: 100%;\r\n height: 100%;\r\n background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);\r\n transition: left 0.6s ease;\r\n }\r\n #maude-natasha-game .mn-play-btn:hover::before {\r\n left: 100%;\r\n }\r\n #maude-natasha-game .mn-play-btn span {\r\n transition: transform 0.3s ease;\r\n font-size: 1.1rem;\r\n }\r\n #maude-natasha-game .mn-play-btn:hover {\r\n transform: translateY(-3px) scale(1.02);\r\n box-shadow: 0 12px 40px rgba(217, 119, 6, 0.5);\r\n background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);\r\n }\r\n #maude-natasha-game .mn-play-btn:hover span {\r\n transform: translateX(6px);\r\n }\r\n\r\n \/* SECONDARY BUTTON *\/\r\n #maude-natasha-game .mn-btn-secondary {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 10px;\r\n padding: 16px 32px;\r\n border-radius: 6px;\r\n background: #0f172a;\r\n color: #ffffff;\r\n border: 1px solid #0f172a;\r\n font-family: var(--font-display);\r\n font-size: 0.8rem;\r\n font-weight: 700;\r\n letter-spacing: 1.5px;\r\n text-transform: uppercase;\r\n text-decoration: none;\r\n transition: all 0.3s ease;\r\n box-shadow: 0 4px 15px rgba(15, 23, 42, 0.2);\r\n }\r\n #maude-natasha-game .mn-btn-secondary:hover {\r\n background: #1e293b;\r\n color: #ffffff;\r\n border-color: #1e293b;\r\n transform: translateY(-3px);\r\n box-shadow: 0 8px 25px rgba(15, 23, 42, 0.35);\r\n }\r\n\r\n \/* NAVIGATION *\/\r\n #maude-natasha-game .g-nav {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n height: 80px;\r\n z-index: 10000;\r\n transition: background 0.4s ease, backdrop-filter 0.4s ease;\r\n }\r\n #maude-natasha-game .g-nav.scrolled {\r\n background: rgba(255, 255, 255, 0.98);\r\n backdrop-filter: blur(16px);\r\n -webkit-backdrop-filter: blur(16px);\r\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);\r\n border-bottom: 1px solid #e2e8f0;\r\n }\r\n #maude-natasha-game .g-nav-container {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n height: 100%;\r\n }\r\n #maude-natasha-game .g-logo {\r\n font-family: var(--font-display);\r\n font-size: 1.15rem;\r\n font-weight: 900;\r\n letter-spacing: 3px;\r\n color: #ffffff;\r\n text-decoration: none;\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n transition: color 0.3s ease;\r\n }\r\n #maude-natasha-game .g-logo span {\r\n color: var(--accent-gold);\r\n }\r\n #maude-natasha-game .g-nav.scrolled .g-logo {\r\n color: #0f172a;\r\n }\r\n #maude-natasha-game .g-logo-icon {\r\n width: 38px;\r\n height: 38px;\r\n border-radius: 8px;\r\n background: linear-gradient(135deg, var(--accent-gold), var(--accent-pink));\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: #ffffff;\r\n font-family: var(--font-display);\r\n font-weight: 900;\r\n font-size: 0.95rem;\r\n box-shadow: 0 4px 15px rgba(217, 119, 6, 0.3);\r\n }\r\n\r\n #maude-natasha-game .g-nav-links {\r\n display: flex;\r\n align-items: center;\r\n gap: 36px;\r\n list-style: none;\r\n }\r\n #maude-natasha-game .g-nav-link {\r\n font-family: var(--font-display);\r\n font-size: 0.76rem;\r\n font-weight: 700;\r\n letter-spacing: 2px;\r\n color: #ffffff;\r\n text-decoration: none;\r\n text-transform: uppercase;\r\n transition: color 0.3s ease;\r\n padding: 8px 0;\r\n position: relative;\r\n }\r\n #maude-natasha-game .g-nav-link:hover {\r\n color: var(--accent-gold);\r\n }\r\n #maude-natasha-game .g-nav.scrolled .g-nav-link {\r\n color: #0f172a;\r\n font-weight: 700;\r\n }\r\n #maude-natasha-game .g-nav.scrolled .g-nav-link:hover {\r\n color: #d97706;\r\n }\r\n\r\n #maude-natasha-game .g-mobile-btn {\r\n display: none;\r\n background: rgba(255, 255, 255, 0.2);\r\n border: 1px solid rgba(255, 255, 255, 0.35);\r\n border-radius: 8px;\r\n color: #ffffff;\r\n font-size: 1.4rem;\r\n width: 44px;\r\n height: 44px;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n }\r\n #maude-natasha-game .g-nav.scrolled .g-mobile-btn {\r\n background: #0f172a;\r\n color: #ffffff;\r\n border: 1px solid #0f172a;\r\n box-shadow: 0 4px 15px rgba(15, 23, 42, 0.25);\r\n }\r\n\r\n #maude-natasha-game .g-mobile-drawer {\r\n position: fixed;\r\n inset: 0;\r\n background: rgba(255, 255, 255, 0.98);\r\n backdrop-filter: blur(20px);\r\n -webkit-backdrop-filter: blur(20px);\r\n z-index: 9999;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 28px;\r\n opacity: 0;\r\n visibility: hidden;\r\n transition: opacity 0.3s ease, visibility 0.3s ease;\r\n }\r\n #maude-natasha-game .g-mobile-drawer.open {\r\n opacity: 1;\r\n visibility: visible;\r\n }\r\n #maude-natasha-game .g-mobile-drawer .g-nav-link {\r\n color: #0f172a;\r\n font-size: 1.25rem;\r\n font-weight: 800;\r\n letter-spacing: 3px;\r\n }\r\n #maude-natasha-game .g-mobile-drawer .g-nav-link:hover {\r\n color: #d97706;\r\n }\r\n\r\n \/* SECTION 1 \u2014 HERO *\/\r\n #maude-natasha-game .g-hero {\r\n min-height: 100vh;\r\n display: flex;\r\n align-items: center;\r\n position: relative;\r\n padding-top: 80px;\r\n overflow: hidden;\r\n }\r\n #maude-natasha-game .g-hero-bg {\r\n position: absolute;\r\n inset: 0;\r\n z-index: 0;\r\n }\r\n #maude-natasha-game .g-hero-bg-img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n object-position: center;\r\n filter: brightness(0.55) contrast(1.1);\r\n }\r\n #maude-natasha-game .g-hero-overlay {\r\n position: absolute;\r\n inset: 0;\r\n background: linear-gradient(to bottom, rgba(6, 7, 11, 0.5) 0%, rgba(6, 7, 11, 0.7) 60%, rgba(6, 7, 11, 0.95) 100%);\r\n z-index: 1;\r\n }\r\n #maude-natasha-game .g-hero-content {\r\n position: relative;\r\n z-index: 2;\r\n max-width: 900px;\r\n }\r\n #maude-natasha-game .g-hero-tagline {\r\n font-family: var(--font-display);\r\n font-size: clamp(0.85rem, 1.5vw, 1.05rem);\r\n font-weight: 700;\r\n letter-spacing: 4px;\r\n color: var(--accent-gold);\r\n text-transform: uppercase;\r\n margin-bottom: 16px;\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n }\r\n #maude-natasha-game .g-hero-tagline::before {\r\n content: '';\r\n width: 28px;\r\n height: 2px;\r\n background: var(--accent-gold);\r\n }\r\n #maude-natasha-game .g-hero-title {\r\n font-family: var(--font-display);\r\n font-size: clamp(3rem, 8vw, 6rem);\r\n font-weight: 900;\r\n line-height: 1.02;\r\n letter-spacing: -2px;\r\n color: #fff;\r\n text-transform: uppercase;\r\n margin-bottom: 24px;\r\n text-shadow: 0 10px 40px rgba(0,0,0,0.9);\r\n }\r\n #maude-natasha-game .g-hero-title span {\r\n background: linear-gradient(135deg, #fff 0%, var(--accent-gold) 60%, var(--accent-pink) 100%);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n }\r\n #maude-natasha-game .g-hero .g-desc {\r\n color: #cbd5e1;\r\n font-size: clamp(1.05rem, 2vw, 1.25rem);\r\n font-weight: 500;\r\n line-height: 1.6;\r\n text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);\r\n max-width: 650px;\r\n margin-bottom: 32px;\r\n }\r\n\r\n #maude-natasha-game .g-hero-scroll-indicator {\r\n position: absolute;\r\n bottom: 30px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n z-index: 2;\r\n font-family: var(--font-display);\r\n font-size: 0.7rem;\r\n letter-spacing: 2px;\r\n color: var(--text-dim);\r\n text-transform: uppercase;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n gap: 8px;\r\n animation: mnBounce 2s infinite;\r\n }\r\n @keyframes mnBounce {\r\n 0%, 20%, 50%, 80%, 100% { transform: translate(-50%, 0); }\r\n 40% { transform: translate(-50%, -8px); }\r\n 60% { transform: translate(-50%, -4px); }\r\n }\r\n\r\n \/* SECTION 2 \u2014 GAME INFORMATION *\/\r\n #maude-natasha-game #game-info {\r\n background: radial-gradient(circle at 15% 50%, rgba(2, 132, 199, 0.08), transparent 50%),\r\n radial-gradient(circle at 85% 50%, rgba(217, 119, 6, 0.08), transparent 50%),\r\n #f8fafc;\r\n }\r\n #maude-natasha-game .g-info-grid {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 70px;\r\n align-items: center;\r\n }\r\n #maude-natasha-game .g-info-visual-wrap {\r\n position: relative;\r\n }\r\n #maude-natasha-game .g-info-visual-glow {\r\n position: absolute;\r\n inset: -20px;\r\n background: radial-gradient(circle at center, var(--accent-gold-glow) 0%, transparent 70%);\r\n z-index: 0;\r\n filter: blur(20px);\r\n opacity: 0.7;\r\n }\r\n #maude-natasha-game .g-info-visual {\r\n position: relative;\r\n z-index: 1;\r\n background: #ffffff;\r\n border-radius: 16px;\r\n overflow: hidden;\r\n border: 1px solid #e2e8f0;\r\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);\r\n transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);\r\n }\r\n #maude-natasha-game .g-info-visual:hover {\r\n transform: translateY(-8px) scale(1.01);\r\n box-shadow: 0 15px 35px rgba(2, 132, 199, 0.12);\r\n }\r\n\r\n #maude-natasha-game .g-cover-tag {\r\n position: absolute;\r\n top: 20px;\r\n left: 24px;\r\n z-index: 3;\r\n padding: 6px 14px;\r\n background: rgba(6, 7, 11, 0.85);\r\n backdrop-filter: blur(10px);\r\n border-radius: 50px;\r\n font-family: var(--font-display);\r\n font-size: 0.65rem;\r\n letter-spacing: 1.5px;\r\n color: var(--accent-gold);\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n }\r\n #maude-natasha-game .g-tag-dot {\r\n width: 6px;\r\n height: 6px;\r\n border-radius: 50%;\r\n background: var(--accent-cyan);\r\n box-shadow: 0 0 8px var(--accent-cyan);\r\n }\r\n #maude-natasha-game .g-img-wrap {\r\n position: relative;\r\n width: 100%;\r\n height: 380px;\r\n overflow: hidden;\r\n }\r\n #maude-natasha-game .g-info-img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n object-position: center;\r\n display: block;\r\n transition: transform 0.6s ease;\r\n }\r\n #maude-natasha-game .g-info-visual:hover .g-info-img {\r\n transform: scale(1.05);\r\n }\r\n #maude-natasha-game .g-vignette-overlay {\r\n position: absolute;\r\n inset: 0;\r\n background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, transparent 30%, transparent 70%, rgba(0, 0, 0, 0.15) 100%);\r\n pointer-events: none;\r\n z-index: 2;\r\n }\r\n #maude-natasha-game .g-cover-footer {\r\n padding: 16px 24px;\r\n background: #f1f5f9;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n font-family: var(--font-display);\r\n font-size: 0.72rem;\r\n letter-spacing: 1.5px;\r\n color: #334155;\r\n position: relative;\r\n z-index: 3;\r\n border-top: 1px solid #e2e8f0;\r\n }\r\n\r\n #maude-natasha-game .g-feature-pills {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 10px;\r\n margin-bottom: 24px;\r\n }\r\n #maude-natasha-game .g-feature-pill {\r\n padding: 6px 14px;\r\n border-radius: 6px;\r\n background: #f1f5f9;\r\n border: 1px solid #e2e8f0;\r\n font-family: var(--font-display);\r\n font-size: 0.72rem;\r\n letter-spacing: 1px;\r\n color: #0f172a;\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 6px;\r\n }\r\n #maude-natasha-game .g-meta-grid {\r\n display: grid;\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 16px;\r\n margin: 28px 0 36px;\r\n }\r\n #maude-natasha-game .g-meta-tile {\r\n background: #ffffff;\r\n border: 1px solid #e2e8f0;\r\n border-left: 4px solid var(--accent-gold);\r\n border-radius: 8px;\r\n padding: 16px 20px;\r\n box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);\r\n transition: all 0.3s ease;\r\n }\r\n #maude-natasha-game .g-meta-tile:hover {\r\n transform: translateX(4px);\r\n box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);\r\n }\r\n #maude-natasha-game .g-meta-lbl {\r\n font-family: var(--font-display);\r\n font-size: 0.65rem;\r\n letter-spacing: 2px;\r\n color: var(--accent-gold);\r\n text-transform: uppercase;\r\n margin-bottom: 4px;\r\n display: flex;\r\n align-items: center;\r\n gap: 6px;\r\n }\r\n #maude-natasha-game .g-meta-val {\r\n font-family: var(--font-display);\r\n font-size: 0.95rem;\r\n font-weight: 700;\r\n color: #0f172a;\r\n }\r\n #maude-natasha-game .g-action-btns {\r\n display: flex;\r\n flex-wrap: wrap;\r\n align-items: center;\r\n gap: 20px;\r\n }\r\n\r\n \/* SECTION 3 \u2014 ABOUT THE GAME *\/\r\n #maude-natasha-game #about-game {\r\n background: linear-gradient(135deg, #e4eef9 0%, #f4f8fc 100%);\r\n }\r\n #maude-natasha-game .g-about-grid {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 70px;\r\n align-items: center;\r\n }\r\n #maude-natasha-game .g-about-divider {\r\n width: 80px;\r\n height: 3px;\r\n background: linear-gradient(90deg, var(--accent-gold), transparent);\r\n margin: 20px 0 30px;\r\n border-radius: 2px;\r\n }\r\n #maude-natasha-game .g-about-img-frame {\r\n position: relative;\r\n background: #ffffff;\r\n border-radius: 16px;\r\n border: 1px solid #e2e8f0;\r\n overflow: hidden;\r\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);\r\n }\r\n #maude-natasha-game .g-about-img-frame img {\r\n width: 100%;\r\n height: auto;\r\n display: block;\r\n transition: transform 0.6s ease;\r\n }\r\n #maude-natasha-game .g-about-img-frame:hover img {\r\n transform: scale(1.04);\r\n }\r\n\r\n \/* SECTION 4 \u2014 GAMEPLAY FEATURES *\/\r\n #maude-natasha-game .g-features-grid {\r\n margin-top: 50px;\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 24px;\r\n }\r\n #maude-natasha-game .g-feature-card {\r\n background: #ffffff !important;\r\n border: 1px solid #e2e8f0;\r\n border-radius: 16px;\r\n padding: 32px 28px;\r\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);\r\n transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;\r\n position: relative;\r\n overflow: hidden;\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n #maude-natasha-game .g-feature-card::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n height: 3px;\r\n background: linear-gradient(90deg, var(--accent-gold), var(--accent-cyan));\r\n opacity: 0.6;\r\n }\r\n #maude-natasha-game .g-feature-card:hover {\r\n transform: translateY(-8px);\r\n box-shadow: 0 20px 45px rgba(0, 0, 0, 0.1), 0 0 25px rgba(217, 119, 6, 0.15);\r\n }\r\n\r\n #maude-natasha-game .g-feature-icon-box {\r\n width: 54px;\r\n height: 54px;\r\n border-radius: 12px;\r\n background: rgba(255, 200, 55, 0.12);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: var(--accent-gold);\r\n margin-bottom: 22px;\r\n transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;\r\n }\r\n #maude-natasha-game .g-feature-card:hover .g-feature-icon-box {\r\n transform: scale(1.1);\r\n background: var(--accent-gold);\r\n color: #06070b;\r\n box-shadow: 0 0 20px var(--accent-gold-glow);\r\n }\r\n #maude-natasha-game .g-feature-icon-box svg {\r\n width: 26px;\r\n height: 26px;\r\n fill: currentColor;\r\n }\r\n\r\n #maude-natasha-game .g-feature-card-title {\r\n font-family: var(--font-display);\r\n font-size: 1.15rem;\r\n font-weight: 800;\r\n color: #0f172a;\r\n margin-bottom: 10px;\r\n text-transform: uppercase;\r\n }\r\n #maude-natasha-game .g-feature-card-desc {\r\n font-size: 0.9rem;\r\n color: var(--text-muted);\r\n line-height: 1.55;\r\n }\r\n\r\n \/* SECTION 4.5 \u2014 TWO MINI GAMES *\/\r\n #maude-natasha-game #mini-games {\r\n background: #f8fafc;\r\n }\r\n #maude-natasha-game .g-minigames-grid {\r\n display: grid;\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 32px;\r\n margin-top: 50px;\r\n }\r\n #maude-natasha-game .g-minigame-card {\r\n background: #ffffff;\r\n border-radius: 20px;\r\n border: 1px solid #e2e8f0;\r\n overflow: hidden;\r\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);\r\n transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.4s ease;\r\n display: flex;\r\n flex-direction: column;\r\n position: relative;\r\n }\r\n #maude-natasha-game .g-minigame-card:hover {\r\n transform: translateY(-8px);\r\n border-color: var(--accent-gold);\r\n box-shadow: 0 20px 45px rgba(0, 0, 0, 0.1);\r\n }\r\n #maude-natasha-game .g-minigame-visual {\r\n position: relative;\r\n height: 250px;\r\n overflow: hidden;\r\n }\r\n #maude-natasha-game .g-minigame-img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);\r\n }\r\n #maude-natasha-game .g-minigame-card:hover .g-minigame-img {\r\n transform: scale(1.06);\r\n }\r\n #maude-natasha-game .g-minigame-badge {\r\n position: absolute;\r\n top: 16px;\r\n left: 16px;\r\n z-index: 3;\r\n padding: 6px 14px;\r\n background: rgba(255, 255, 255, 0.9);\r\n backdrop-filter: blur(10px);\r\n border-radius: 50px;\r\n font-family: var(--font-display);\r\n font-size: 0.65rem;\r\n letter-spacing: 1.5px;\r\n color: var(--accent-cyan);\r\n border: 1px solid rgba(2, 132, 199, 0.3);\r\n text-transform: uppercase;\r\n font-weight: 700;\r\n }\r\n #maude-natasha-game .g-minigame-body {\r\n padding: 30px 28px;\r\n display: flex;\r\n flex-direction: column;\r\n flex-grow: 1;\r\n }\r\n #maude-natasha-game .g-minigame-title {\r\n font-family: var(--font-display);\r\n font-size: 1.35rem;\r\n font-weight: 800;\r\n color: #0f172a;\r\n margin-bottom: 12px;\r\n text-transform: uppercase;\r\n }\r\n #maude-natasha-game .g-minigame-desc {\r\n font-size: 0.92rem;\r\n color: var(--text-muted);\r\n line-height: 1.6;\r\n margin-bottom: 20px;\r\n }\r\n\r\n \/* SECTION 5 \u2014 VISUAL SHOWCASE *\/\r\n #maude-natasha-game #showcase {\r\n background: #ffffff;\r\n position: relative;\r\n }\r\n #maude-natasha-game .g-carousel-wrapper {\r\n position: relative;\r\n margin-top: 40px;\r\n padding: 0 10px;\r\n }\r\n #maude-natasha-game .g-carousel-container {\r\n overflow: hidden;\r\n width: 100%;\r\n border-radius: 16px;\r\n }\r\n #maude-natasha-game .g-carousel-track {\r\n display: flex;\r\n gap: 20px;\r\n transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);\r\n will-change: transform;\r\n }\r\n #maude-natasha-game .g-carousel-slide {\r\n flex: 0 0 calc(33.333% - 13.33px);\r\n height: 340px;\r\n border-radius: 16px;\r\n overflow: hidden;\r\n position: relative;\r\n background: #ffffff;\r\n border: 1px solid #e2e8f0;\r\n box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);\r\n transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;\r\n }\r\n #maude-natasha-game .g-carousel-slide:hover {\r\n border-color: #0284c7;\r\n box-shadow: 0 10px 30px rgba(2, 132, 199, 0.15);\r\n transform: translateY(-4px);\r\n }\r\n #maude-natasha-game .g-carousel-img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);\r\n }\r\n #maude-natasha-game .g-carousel-slide:hover .g-carousel-img {\r\n transform: scale(1.06);\r\n }\r\n #maude-natasha-game .g-carousel-controls {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 20px;\r\n margin-top: 32px;\r\n }\r\n #maude-natasha-game .g-carousel-btn {\r\n width: 48px;\r\n height: 48px;\r\n border-radius: 50%;\r\n background: #ffffff;\r\n border: 2px solid #cbd5e1;\r\n color: #0f172a;\r\n font-size: 1.5rem;\r\n font-weight: 800;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);\r\n line-height: 1;\r\n }\r\n #maude-natasha-game .g-carousel-btn:hover {\r\n background: #0284c7;\r\n color: #ffffff;\r\n border-color: #0284c7;\r\n box-shadow: 0 8px 25px rgba(2, 132, 199, 0.35);\r\n transform: scale(1.1);\r\n }\r\n #maude-natasha-game .g-carousel-dots {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n }\r\n #maude-natasha-game .g-carousel-dot {\r\n width: 10px;\r\n height: 10px;\r\n border-radius: 50%;\r\n background: #cbd5e1;\r\n border: none;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n padding: 0;\r\n }\r\n #maude-natasha-game .g-carousel-dot.active {\r\n background: #d97706;\r\n width: 28px;\r\n border-radius: 10px;\r\n box-shadow: 0 4px 12px rgba(217, 119, 6, 0.35);\r\n }\r\n\r\n \/* SECTION 6 \u2014 PROFESSIONAL FOOTER *\/\r\n #maude-natasha-game .g-footer {\r\n padding: 80px 0 40px;\r\n background: #0f172a;\r\n border-top: 1px solid #1e293b;\r\n color: #cbd5e1;\r\n }\r\n #maude-natasha-game .g-footer-grid {\r\n display: grid;\r\n grid-template-columns: 2fr 1fr 1.5fr 1fr;\r\n gap: 48px;\r\n margin-bottom: 60px;\r\n }\r\n #maude-natasha-game .g-footer-brand-desc {\r\n font-size: 0.9rem;\r\n color: #94a3b8;\r\n line-height: 1.6;\r\n margin: 16px 0 24px;\r\n max-width: 320px;\r\n }\r\n #maude-natasha-game .g-footer-col-title {\r\n font-family: var(--font-display);\r\n font-size: 0.85rem;\r\n font-weight: 800;\r\n letter-spacing: 2px;\r\n color: #e2e8f0;\r\n text-transform: uppercase;\r\n margin-bottom: 24px;\r\n position: relative;\r\n }\r\n #maude-natasha-game .g-footer-col-title::after {\r\n content: '';\r\n display: block;\r\n width: 28px;\r\n height: 2px;\r\n background: var(--accent-gold);\r\n margin-top: 8px;\r\n }\r\n #maude-natasha-game .g-footer-links {\r\n list-style: none;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 12px;\r\n }\r\n #maude-natasha-game .g-footer-link {\r\n color: #cbd5e1;\r\n text-decoration: none;\r\n font-size: 0.9rem;\r\n font-weight: 500;\r\n transition: color 0.3s ease, transform 0.3s ease;\r\n display: inline-block;\r\n }\r\n #maude-natasha-game .g-footer-link:hover {\r\n color: var(--accent-gold);\r\n transform: translateX(4px);\r\n }\r\n #maude-natasha-game .g-footer-contact-item {\r\n display: flex;\r\n align-items: flex-start;\r\n gap: 12px;\r\n margin-bottom: 16px;\r\n }\r\n #maude-natasha-game .g-footer-contact-icon {\r\n font-size: 1.2rem;\r\n color: var(--accent-gold);\r\n flex-shrink: 0;\r\n }\r\n #maude-natasha-game .g-footer-lbl {\r\n font-family: var(--font-display);\r\n font-size: 0.68rem;\r\n font-weight: 700;\r\n color: #94a3b8;\r\n letter-spacing: 1.5px;\r\n text-transform: uppercase;\r\n margin-bottom: 2px;\r\n }\r\n #maude-natasha-game .g-footer-val {\r\n font-family: var(--font-display);\r\n font-size: 0.95rem;\r\n font-weight: 700;\r\n color: #cbd5e1;\r\n letter-spacing: 0.5px;\r\n }\r\n #maude-natasha-game .g-footer-val-link {\r\n font-size: 0.9rem;\r\n font-weight: 600;\r\n color: #cbd5e1;\r\n text-decoration: none;\r\n transition: color 0.3s ease;\r\n }\r\n #maude-natasha-game .g-footer-val-link:hover {\r\n color: var(--accent-gold);\r\n text-decoration: underline;\r\n }\r\n #maude-natasha-game .g-footer-connect-desc {\r\n font-size: 0.88rem;\r\n color: #94a3b8;\r\n margin-bottom: 18px;\r\n line-height: 1.5;\r\n }\r\n #maude-natasha-game .g-footer-socials {\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n flex-wrap: wrap;\r\n }\r\n #maude-natasha-game .g-footer-social-btn {\r\n width: 42px;\r\n height: 42px;\r\n border-radius: 10px;\r\n background: rgba(255, 255, 255, 0.08);\r\n border: 1px solid rgba(255, 255, 255, 0.15);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: #cbd5e1;\r\n text-decoration: none;\r\n transition: all 0.3s ease;\r\n }\r\n #maude-natasha-game .g-footer-social-btn:hover {\r\n background: var(--accent-gold);\r\n color: #0f172a;\r\n border-color: var(--accent-gold);\r\n transform: translateY(-4px);\r\n box-shadow: 0 8px 20px rgba(217, 119, 6, 0.35);\r\n }\r\n #maude-natasha-game .g-footer-social-btn svg {\r\n width: 18px;\r\n height: 18px;\r\n fill: currentColor;\r\n }\r\n #maude-natasha-game .g-footer-bottom {\r\n padding-top: 30px;\r\n border-top: 1px solid rgba(255, 255, 255, 0.1);\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n flex-wrap: wrap;\r\n gap: 20px;\r\n }\r\n #maude-natasha-game .g-footer-copy {\r\n font-size: 0.85rem;\r\n color: #94a3b8;\r\n font-weight: 500;\r\n }\r\n\r\n \/* RESPONSIVE STYLES *\/\r\n @media (max-width: 1024px) {\r\n #maude-natasha-game .g-info-grid,\r\n #maude-natasha-game .g-about-grid,\r\n #maude-natasha-game .g-minigames-grid { grid-template-columns: 1fr; gap: 50px; }\r\n #maude-natasha-game .g-features-grid { grid-template-columns: repeat(2, 1fr); }\r\n #maude-natasha-game .g-carousel-slide { flex: 0 0 calc(50% - 10px); height: 300px; }\r\n #maude-natasha-game .g-footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }\r\n }\r\n\r\n @media (max-width: 768px) {\r\n #maude-natasha-game .g-nav-links { display: none; }\r\n #maude-natasha-game .g-mobile-btn { display: flex; }\r\n #maude-natasha-game .g-features-grid { grid-template-columns: 1fr; }\r\n #maude-natasha-game .g-meta-grid { grid-template-columns: 1fr; }\r\n #maude-natasha-game .g-carousel-slide { flex: 0 0 100%; height: 260px; }\r\n #maude-natasha-game .g-footer-grid { grid-template-columns: 1fr; gap: 32px; }\r\n #maude-natasha-game .g-footer-bottom { flex-direction: column; text-align: center; justify-content: center; }\r\n #maude-natasha-game .g-action-btns { flex-direction: column; align-items: stretch; }\r\n }\r\n\r\n \/* ==========================================================================\r\n FAST GAME MODAL CONTAINER (ZERO BACKGROUND AUDIO EXECUTION)\r\n ========================================================================== *\/\r\n #maude-natasha-game #mn-game-shell {\r\n position: fixed;\r\n left: 0;\r\n top: 0;\r\n width: 100vw;\r\n height: 100vh;\r\n opacity: 0;\r\n visibility: hidden;\r\n pointer-events: none;\r\n z-index: 999999;\r\n background: #000000;\r\n transition: opacity 0.25s ease, visibility 0.25s ease;\r\n }\r\n\r\n #maude-natasha-game #mn-game-shell.active {\r\n opacity: 1;\r\n visibility: visible;\r\n pointer-events: auto;\r\n }\r\n\r\n #maude-natasha-game #mn-game-shell iframe#mnGameIframe {\r\n width: 100vw;\r\n height: 100vh;\r\n border: none;\r\n outline: none;\r\n display: block;\r\n margin: 0;\r\n padding: 0;\r\n z-index: 1;\r\n }\r\n\r\n \/* FLOATING EXIT GAME BUTTON *\/\r\n #maude-natasha-game .mn-game-float-bar {\r\n position: fixed;\r\n top: 20px;\r\n right: 24px;\r\n z-index: 1000010;\r\n pointer-events: none;\r\n opacity: 0;\r\n transition: opacity 0.25s ease;\r\n }\r\n\r\n #maude-natasha-game #mn-game-shell.active .mn-game-float-bar {\r\n pointer-events: auto;\r\n opacity: 1;\r\n }\r\n\r\n #maude-natasha-game .mn-game-exit-btn {\r\n background: rgba(255, 42, 133, 0.9);\r\n border: 1px solid rgba(255, 255, 255, 0.3);\r\n color: #ffffff;\r\n font-family: var(--font-display);\r\n font-size: 0.8rem;\r\n font-weight: 800;\r\n letter-spacing: 1.5px;\r\n padding: 10px 22px;\r\n border-radius: 30px;\r\n cursor: pointer;\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 8px;\r\n backdrop-filter: blur(12px);\r\n box-shadow: 0 8px 25px rgba(255, 42, 133, 0.4), 0 4px 15px rgba(0,0,0,0.5);\r\n transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);\r\n }\r\n\r\n #maude-natasha-game .mn-game-exit-btn:hover {\r\n background: #ff2a85;\r\n transform: translateY(-2px) scale(1.04);\r\n box-shadow: 0 12px 30px rgba(255, 42, 133, 0.6);\r\n border-color: #ffffff;\r\n }\r\n\r\n \/* BRANDED FAST LOADER *\/\r\n #maude-natasha-game #mnGameLoader {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100vw;\r\n height: 100vh;\r\n background: radial-gradient(circle at center, #0e121e 0%, #040508 100%);\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n z-index: 1000005;\r\n pointer-events: none;\r\n opacity: 0;\r\n transition: opacity 0.3s ease, visibility 0.3s ease;\r\n }\r\n\r\n #maude-natasha-game #mn-game-shell.active #mnGameLoader {\r\n opacity: 1;\r\n pointer-events: auto;\r\n }\r\n\r\n #maude-natasha-game #mn-game-shell.active #mnGameLoader.loaded {\r\n opacity: 0;\r\n visibility: hidden;\r\n pointer-events: none;\r\n }\r\n\r\n @media (max-width: 768px) {\r\n #maude-natasha-game .mn-game-float-bar {\r\n top: 12px;\r\n right: 12px;\r\n }\r\n #maude-natasha-game .mn-game-exit-btn {\r\n padding: 6px 14px;\r\n font-size: 0.68rem;\r\n letter-spacing: 1px;\r\n }\r\n }\r\n\r\n #maude-natasha-game .mn-loader-logo {\r\n width: 70px;\r\n height: 70px;\r\n border-radius: 18px;\r\n background: linear-gradient(135deg, var(--accent-gold), #e6a100);\r\n color: #06070b;\r\n font-family: var(--font-display);\r\n font-size: 1.8rem;\r\n font-weight: 900;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n box-shadow: 0 0 40px var(--accent-gold-glow);\r\n margin-bottom: 24px;\r\n animation: loaderPulse 2s infinite ease-in-out;\r\n }\r\n\r\n @keyframes loaderPulse {\r\n 0%, 100% { transform: scale(1); box-shadow: 0 0 30px var(--accent-gold-glow); }\r\n 50% { transform: scale(1.08); box-shadow: 0 0 50px var(--accent-gold-glow), 0 0 20px var(--accent-cyan); }\r\n }\r\n\r\n #maude-natasha-game .mn-loader-title {\r\n font-family: var(--font-display);\r\n font-size: 1.4rem;\r\n font-weight: 800;\r\n color: #fff;\r\n letter-spacing: 3px;\r\n margin-bottom: 8px;\r\n text-transform: uppercase;\r\n }\r\n\r\n #maude-natasha-game .mn-loader-status {\r\n font-size: 0.85rem;\r\n color: var(--text-muted);\r\n letter-spacing: 1.5px;\r\n margin-bottom: 24px;\r\n font-family: var(--font-display);\r\n }\r\n\r\n #maude-natasha-game .mn-progress-track {\r\n width: 280px;\r\n height: 8px;\r\n background: rgba(255, 255, 255, 0.08);\r\n border-radius: 10px;\r\n border: 1px solid rgba(255, 200, 55, 0.3);\r\n overflow: hidden;\r\n position: relative;\r\n }\r\n\r\n #maude-natasha-game .mn-progress-fill {\r\n height: 100%;\r\n width: 0%;\r\n background: linear-gradient(90deg, var(--accent-gold), var(--accent-cyan));\r\n border-radius: 10px;\r\n box-shadow: 0 0 15px var(--accent-gold-glow);\r\n transition: width 0.1s linear;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div id=\"maude-natasha-game\">\r\n\r\n <!-- GAME SHELL MODAL -->\r\n <div id=\"mn-game-shell\" aria-hidden=\"true\">\r\n\r\n <!-- FAST LOADING OVERLAY -->\r\n <div id=\"mnGameLoader\">\r\n <div class=\"mn-loader-logo\">OO<\/div>\r\n <div class=\"mn-loader-title\">OFFICE ODYSSEY<\/div>\r\n <div class=\"mn-loader-status\" id=\"mnLoaderStatus\">STARTING GAME...<\/div>\r\n <div class=\"mn-progress-track\">\r\n <div class=\"mn-progress-fill\" id=\"mnProgressFill\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- FLOATING EXIT BUTTON -->\r\n <div class=\"mn-game-float-bar\">\r\n <button class=\"mn-game-exit-btn\" id=\"mnGameCloseBtn\" title=\"Exit Game & Stop Music\">\u2715 EXIT GAME<\/button>\r\n <\/div>\r\n\r\n <!-- FAST-LOADING IFRAME -->\r\n <iframe id=\"mnGameIframe\"\r\n src=\"\"\r\n data-src=\"https:\/\/officeodyssey.maudenatasha.com\/game\/index.html\"\r\n allow=\"fullscreen; keyboard-map; autoplay\"\r\n title=\"Office Odyssey Official Game\">\r\n <\/iframe>\r\n\r\n <\/div>\r\n\r\n <!-- NAVIGATION -->\r\n <nav class=\"g-nav\" id=\"gNav\">\r\n <div class=\"g-container g-nav-container\">\r\n <a href=\"#home\" class=\"g-logo\" aria-label=\"Office Odyssey Home\">\r\n <div class=\"g-logo-icon\">OO<\/div>\r\n OFFICE <span>ODYSSEY<\/span>\r\n <\/a>\r\n\r\n <ul class=\"g-nav-links\">\r\n <li><a href=\"#game-info\" class=\"g-nav-link\">GAME<\/a><\/li>\r\n <li><a href=\"#about-game\" class=\"g-nav-link\">ABOUT<\/a><\/li>\r\n <li><a href=\"#features\" class=\"g-nav-link\">FEATURES<\/a><\/li>\r\n <li><a href=\"#mini-games\" class=\"g-nav-link\">MINI GAMES<\/a><\/li>\r\n <li><a href=\"#showcase\" class=\"g-nav-link\">SHOWCASE<\/a><\/li>\r\n <\/ul>\r\n\r\n <button class=\"g-mobile-btn\" id=\"gMobileBtn\" aria-label=\"Toggle Menu\">\u2630<\/button>\r\n <\/div>\r\n <\/nav>\r\n\r\n <!-- Mobile Drawer -->\r\n <div class=\"g-mobile-drawer\" id=\"gMobileDrawer\">\r\n <a href=\"#game-info\" class=\"g-nav-link g-mobile-link\">GAME<\/a>\r\n <a href=\"#about-game\" class=\"g-nav-link g-mobile-link\">ABOUT<\/a>\r\n <a href=\"#features\" class=\"g-nav-link g-mobile-link\">FEATURES<\/a>\r\n <a href=\"#mini-games\" class=\"g-nav-link g-mobile-link\">MINI GAMES<\/a>\r\n <a href=\"#showcase\" class=\"g-nav-link g-mobile-link\">SHOWCASE<\/a>\r\n <\/div>\r\n\r\n <!-- SECTION 1 \u2014 HERO -->\r\n <section class=\"g-hero\" id=\"home\">\r\n <div class=\"g-hero-bg\">\r\n <img decoding=\"async\" src=\"https:\/\/officeodyssey.maudenatasha.com\/wp-content\/uploads\/2026\/07\/77104.jpg\" alt=\"Office Odyssey Hero Artwork\" class=\"g-hero-bg-img\" id=\"gHeroBgImg\">\r\n <\/div>\r\n <div class=\"g-hero-overlay\"><\/div>\r\n\r\n <div class=\"g-container\">\r\n <div class=\"g-hero-content\">\r\n <div class=\"g-hero-tagline\">MAUDE NATASHA PRESENTS<\/div>\r\n <h1 class=\"g-hero-title\">OFFICE <span>ODYSSEY<\/span><\/h1>\r\n <p class=\"g-desc\">\r\n A cinematic educational gaming experience of ambition, strategy, and triumph.\r\n <\/p>\r\n\r\n <!-- PLAY NOW BUTTON -->\r\n <a href=\"#play\" class=\"mn-play-btn\" id=\"heroPlayBtn\" data-mode=\"runner\">\r\n PLAY NOW\r\n <span>\u2192<\/span>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"g-hero-scroll-indicator\">\r\n SCROLL TO EXPLORE\r\n <span>\u2193<\/span>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- SECTION 2 \u2014 GAME INFORMATION -->\r\n <section class=\"g-section\" id=\"game-info\">\r\n <div class=\"g-container\">\r\n <div class=\"g-info-grid\">\r\n \r\n <div class=\"g-info-visual-wrap\">\r\n <div class=\"g-info-visual-glow\"><\/div>\r\n <div class=\"g-info-visual\">\r\n <div class=\"g-cover-tag\">\r\n <span class=\"g-tag-dot\"><\/span> OFFICIAL GAME COVER\r\n <\/div>\r\n\r\n <div class=\"g-img-wrap\">\r\n <img decoding=\"async\" src=\"https:\/\/officeodyssey.maudenatasha.com\/wp-content\/uploads\/2026\/07\/77102.jpg\" alt=\"Office Odyssey Game Cover\" class=\"g-info-img\">\r\n <div class=\"g-vignette-overlay\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"g-cover-footer\">\r\n <span style=\"color:var(--accent-gold); font-weight:700;\">OFFICE ODYSSEY<\/span>\r\n <span>UNITY\u00ae ENGINE<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"g-info-content\">\r\n <div class=\"g-badge\">GAME OVERVIEW<\/div>\r\n <h2 class=\"g-title\">THE GAME<\/h2>\r\n\r\n <div class=\"g-feature-pills\">\r\n <span class=\"g-feature-pill\">\u2605 100\/100 Efficiency<\/span>\r\n <span class=\"g-feature-pill\">\ud83c\udfae Unity\u00ae Engine<\/span>\r\n <span class=\"g-feature-pill\">\ud83c\udfc6 Career Platformer<\/span>\r\n <span class=\"g-feature-pill\">\u26a1 Interactive Story<\/span>\r\n <\/div>\r\n\r\n <p class=\"g-desc\" style=\"margin-bottom: 20px;\">\r\n <strong>Maude Natasha: Office Odyssey<\/strong> bridges corporate leadership, operational strategy, and engaging platformer mechanics into a groundbreaking interactive journey.\r\n <\/p>\r\n\r\n <div class=\"g-meta-grid\">\r\n <div class=\"g-meta-tile\">\r\n <div class=\"g-meta-lbl\">\ud83d\udcbb DEVELOPER'S TEAM<\/div>\r\n <div class=\"g-meta-val\">MAUDE NATASHA & ARIF RAZA<\/div>\r\n <\/div>\r\n <div class=\"g-meta-tile\">\r\n <div class=\"g-meta-lbl\">\ud83d\udc51 OWNER<\/div>\r\n <div class=\"g-meta-val\">MAUDE NATASHA<\/div>\r\n <\/div>\r\n <div class=\"g-meta-tile\">\r\n <div class=\"g-meta-lbl\">\ud83c\udfe2 COMPANY<\/div>\r\n <div class=\"g-meta-val\">MAUDE GAMES<\/div>\r\n <\/div>\r\n <div class=\"g-meta-tile\">\r\n <div class=\"g-meta-lbl\">\u26a1 VERSION<\/div>\r\n <div class=\"g-meta-val\">1.0.0 (Unity\u00ae)<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"g-action-btns\">\r\n <a href=\"#play\" class=\"mn-play-btn\" data-mode=\"runner\">\r\n PLAY NOW\r\n <span>\u2192<\/span>\r\n <\/a>\r\n\r\n <a href=\"https:\/\/officeodyssey.maudenatasha.com\/?page_id=50\" class=\"mn-btn-secondary\">\r\n CREDITS & COPYRIGHT \u2192\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- SECTION 3 \u2014 ABOUT THE GAME -->\r\n <section class=\"g-section\" id=\"about-game\">\r\n <div class=\"g-container\">\r\n <div class=\"g-about-grid\">\r\n \r\n <div class=\"g-about-content\">\r\n <div class=\"g-badge\">CONCEPT & WORLD<\/div>\r\n <h2 class=\"g-title\">ABOUT<br>THE GAME<\/h2>\r\n <div class=\"g-about-divider\"><\/div>\r\n\r\n <p class=\"g-desc\" style=\"margin-bottom: 18px;\">\r\n Office Odyssey transforms real-world corporate strategy, leadership, and operational challenges into high-octane interactive game stages.\r\n <\/p>\r\n <p class=\"g-desc\">\r\n Players step into an empowering narrative where every setback is a setup for a comeback. From closing leads against rejection walls to stabilizing automated data streams, experience a game built to inspire grit and triumph.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"g-about-visual-wrap\">\r\n <div class=\"g-about-img-frame\">\r\n <img decoding=\"async\" src=\"https:\/\/officeodyssey.maudenatasha.com\/wp-content\/uploads\/2026\/07\/77103.jpg\" alt=\"Office Odyssey Story Scene\" class=\"g-about-img\">\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- SECTION 4 \u2014 GAMEPLAY FEATURES -->\r\n <section class=\"g-section\" id=\"features\">\r\n <div class=\"g-container\">\r\n <div class=\"g-badge\">GAMEPLAY MECHANICS<\/div>\r\n <h2 class=\"g-title\">GAMEPLAY FEATURES<\/h2>\r\n <p class=\"g-desc\">Discover the core interactive mechanics, levels, and executive challenges built into Office Odyssey.<\/p>\r\n\r\n <div class=\"g-features-grid\">\r\n \r\n <div class=\"g-feature-card\">\r\n <div class=\"g-feature-icon-box\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z\"\/><\/svg>\r\n <\/div>\r\n <div class=\"g-feature-card-title\">SALES BREAK-IN & LEADS<\/div>\r\n <div class=\"g-feature-card-desc\">Overcome cold rejection walls, close high-value leads, avoid MLM traps, and collect credibility stars to build your corporate standing.<\/div>\r\n <\/div>\r\n\r\n <div class=\"g-feature-card\">\r\n <div class=\"g-feature-icon-box\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.07.62-.07.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z\"\/><\/svg>\r\n <\/div>\r\n <div class=\"g-feature-card-title\">AUTOMATION & SOP LABS<\/div>\r\n <div class=\"g-feature-card-desc\">Traverse SOP factories and high-tech data streams while gathering workflow gears to stabilize enterprise infrastructure.<\/div>\r\n <\/div>\r\n\r\n <div class=\"g-feature-card\">\r\n <div class=\"g-feature-icon-box\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M21 16v-2l-8-5V3.5c0-.83-.67-1.5-1.5-1.5S10 2.67 10 3.5V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5l8 2.5z\"\/><\/svg>\r\n <\/div>\r\n <div class=\"g-feature-card-title\">GLOBAL LAX EXPEDITION<\/div>\r\n <div class=\"g-feature-card-desc\">Manage flight departure schedules, collect baggage items, and maintain 100\/100 operational efficiency across global hubs.<\/div>\r\n <\/div>\r\n\r\n <div class=\"g-feature-card\">\r\n <div class=\"g-feature-icon-box\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-2 16l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z\"\/><\/svg>\r\n <\/div>\r\n <div class=\"g-feature-card-title\">COMPLIANCE & AUDIT COMMAND<\/div>\r\n <div class=\"g-feature-card-desc\">Conduct comprehensive workplace audits, master Privacy Law & HIPAA compliance, and unlock Executive Strategist Mode.<\/div>\r\n <\/div>\r\n\r\n <div class=\"g-feature-card\">\r\n <div class=\"g-feature-icon-box\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M19 5h-2V3H7v2H5c-1.1 0-2 .9-2 2v1c0 2.55 1.92 4.63 4.39 4.94.63 1.5 1.98 2.63 3.61 2.96V19H7v2h10v-2h-4v-2.1c1.63-.33 2.98-1.46 3.61-2.96C19.08 12.63 21 10.55 21 8V7c0-1.1-.9-2-2-2zM5 8V7h2v3.82C5.84 10.4 5 9.3 5 8zm14 0c0 1.3-.84 2.4-2 2.82V7h2v1z\"\/><\/svg>\r\n <\/div>\r\n <div class=\"g-feature-card-title\">CHECKPOINTS & CERTIFICATES<\/div>\r\n <div class=\"g-feature-card-desc\">Earn real-world certification badges including Google Digital Marketing Fundamentals and CompTIA A+ technical progress.<\/div>\r\n <\/div>\r\n\r\n <div class=\"g-feature-card\">\r\n <div class=\"g-feature-icon-box\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 6v3l4-4-4-4v3c-4.42 0-8 3.58-8 8 0 1.57.46 3.03 1.24 4.26L6.7 17.72C6.25 16.6 6 15.33 6 14c0-3.31 2.69-6 6-6zm6.76 1.74L17.3 9.28c.45 1.12.7 2.39.7 3.72 0 3.31-2.69 6-6 6v-3l-4 4 4 4v-3c4.42 0 8-3.58 8-8 0-1.57-.46-3.03-1.24-4.26z\"\/><\/svg>\r\n <\/div>\r\n <div class=\"g-feature-card-title\">RESPAWN & RESILIENCE<\/div>\r\n <div class=\"g-feature-card-desc\">Every setback is a setup for a comeback. Leverage failure as data to restart stronger and finish every executive level.<\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- SECTION 4.5 \u2014 TWO MINI GAMES -->\r\n <section class=\"g-section\" id=\"mini-games\">\r\n <div class=\"g-container\">\r\n <div style=\"text-align: center; max-width: 680px; margin: 0 auto 40px;\">\r\n <div class=\"g-badge\">BONUS EXPERIENCES<\/div>\r\n <h2 class=\"g-title\">TWO MINI GAMES. ONE EXPERIENCE.<\/h2>\r\n <p class=\"g-desc\" style=\"margin: 0 auto;\">\r\n Office Odyssey incorporates two specialized mini-games designed to test different facets of executive leadership, high-speed platforming, and operational strategy.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"g-minigames-grid\">\r\n <div class=\"g-minigame-card\">\r\n <div class=\"g-minigame-visual\">\r\n <span class=\"g-minigame-badge\">MINI GAME 01<\/span>\r\n <img decoding=\"async\" src=\"https:\/\/officeodyssey.maudenatasha.com\/wp-content\/uploads\/2026\/07\/77079.jpg\" alt=\"Office Runner Mini Game\" class=\"g-minigame-img\">\r\n <div class=\"g-vignette-overlay\"><\/div>\r\n <\/div>\r\n <div class=\"g-minigame-body\">\r\n <h3 class=\"g-minigame-title\">OFFICE RUNNER<\/h3>\r\n <p class=\"g-minigame-desc\">\r\n Take control in fast-paced executive platforming challenges. Sprint through corporate hallways, dodge rejection barriers, and close high-value sales leads against the clock.\r\n <\/p>\r\n <div style=\"margin-top: auto; display: flex; align-items: center; justify-content: space-between;\">\r\n <span class=\"g-feature-pill\">\u26a1 Action Platformer<\/span>\r\n <a href=\"#play\" class=\"g-nav-link mn-play-link\" data-mode=\"runner\" style=\"color: var(--accent-gold); font-size: 0.72rem;\">PLAY RUNNER \u2192<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"g-minigame-card\">\r\n <div class=\"g-minigame-visual\">\r\n <span class=\"g-minigame-badge\">MINI GAME 02<\/span>\r\n <img decoding=\"async\" src=\"https:\/\/officeodyssey.maudenatasha.com\/wp-content\/uploads\/2026\/07\/77099.jpg\" alt=\"SOP & Audit Tactics Mini Game\" class=\"g-minigame-img\">\r\n <div class=\"g-vignette-overlay\"><\/div>\r\n <\/div>\r\n <div class=\"g-minigame-body\">\r\n <h3 class=\"g-minigame-title\">SOP & AUDIT TACTICS<\/h3>\r\n <p class=\"g-minigame-desc\">\r\n Navigate procedural lab environments and compliance puzzles. Gather workflow gears, audit data streams, and stabilize enterprise SOPs to maintain peak efficiency.\r\n <\/p>\r\n <div style=\"margin-top: auto; display: flex; align-items: center; justify-content: space-between;\">\r\n <span class=\"g-feature-pill\">\ud83e\udde0 Strategic Puzzles<\/span>\r\n <a href=\"#play\" class=\"g-nav-link mn-play-link\" data-mode=\"tactics\" style=\"color: var(--accent-cyan); font-size: 0.72rem;\">PLAY TACTICS \u2192<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- SECTION 5 \u2014 VISUAL SHOWCASE CAROUSEL -->\r\n <section class=\"g-section\" id=\"showcase\">\r\n <div class=\"g-container\">\r\n <div style=\"text-align: center; max-width: 600px; margin: 0 auto 10px;\">\r\n <div class=\"g-badge\">CINEMATIC ARCHIVE<\/div>\r\n <h2 class=\"g-title\">VISUAL SHOWCASE<\/h2>\r\n <p class=\"g-desc\" style=\"margin: 0 auto;\">Explore the high-definition scenes, environments, and strategic levels of Office Odyssey.<\/p>\r\n <\/div>\r\n\r\n <div class=\"g-carousel-wrapper\" id=\"gShowcaseCarousel\">\r\n <div class=\"g-carousel-container\">\r\n <div class=\"g-carousel-track\" id=\"gCarouselTrack\">\r\n <div class=\"g-carousel-slide\">\r\n <img decoding=\"async\" src=\"https:\/\/officeodyssey.maudenatasha.com\/wp-content\/uploads\/2026\/07\/77076.jpg\" alt=\"Office Odyssey Scene 1\" class=\"g-carousel-img\">\r\n <\/div>\r\n <div class=\"g-carousel-slide\">\r\n <img decoding=\"async\" src=\"https:\/\/officeodyssey.maudenatasha.com\/wp-content\/uploads\/2026\/07\/77077.jpg\" alt=\"Office Odyssey Scene 2\" class=\"g-carousel-img\">\r\n <\/div>\r\n <div class=\"g-carousel-slide\">\r\n <img decoding=\"async\" src=\"https:\/\/officeodyssey.maudenatasha.com\/wp-content\/uploads\/2026\/07\/77078.jpg\" alt=\"Office Odyssey Scene 3\" class=\"g-carousel-img\">\r\n <\/div>\r\n <div class=\"g-carousel-slide\">\r\n <img decoding=\"async\" src=\"https:\/\/officeodyssey.maudenatasha.com\/wp-content\/uploads\/2026\/07\/77081.jpg\" alt=\"Office Odyssey Scene 4\" class=\"g-carousel-img\">\r\n <\/div>\r\n <div class=\"g-carousel-slide\">\r\n <img decoding=\"async\" src=\"https:\/\/officeodyssey.maudenatasha.com\/wp-content\/uploads\/2026\/07\/77101.jpg\" alt=\"Office Odyssey Scene 5\" class=\"g-carousel-img\">\r\n <\/div>\r\n <div class=\"g-carousel-slide\">\r\n <img decoding=\"async\" src=\"https:\/\/officeodyssey.maudenatasha.com\/wp-content\/uploads\/2026\/07\/77105.jpg\" alt=\"Office Odyssey Scene 6\" class=\"g-carousel-img\">\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"g-carousel-controls\">\r\n <button class=\"g-carousel-btn\" id=\"gCarouselPrev\" aria-label=\"Previous Slide\">\u2039<\/button>\r\n <div class=\"g-carousel-dots\" id=\"gCarouselDots\"><\/div>\r\n <button class=\"g-carousel-btn\" id=\"gCarouselNext\" aria-label=\"Next Slide\">\u203a<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- SECTION 6 \u2014 PROFESSIONAL FOOTER -->\r\n <footer class=\"g-footer\">\r\n <div class=\"g-container\">\r\n <div class=\"g-footer-grid\">\r\n <div class=\"g-footer-col\">\r\n <a href=\"#home\" class=\"g-logo\" aria-label=\"Office Odyssey Home\">\r\n <div class=\"g-logo-icon\">OO<\/div>\r\n OFFICE <span>ODYSSEY<\/span>\r\n <\/a>\r\n <p class=\"g-footer-brand-desc\">\r\n A cinematic educational gaming experience of ambition, corporate strategy, and executive triumph built on Unity\u00ae.\r\n <\/p>\r\n <a href=\"#play\" class=\"mn-play-btn\" data-mode=\"runner\" style=\"padding: 12px 24px; font-size: 0.75rem;\">\r\n PLAY NOW <span>\u2192<\/span>\r\n <\/a>\r\n <\/div>\r\n\r\n <div class=\"g-footer-col\">\r\n <h4 class=\"g-footer-col-title\">NAVIGATION<\/h4>\r\n <ul class=\"g-footer-links\">\r\n <li><a href=\"#game-info\" class=\"g-footer-link\">Game Overview<\/a><\/li>\r\n <li><a href=\"#about-game\" class=\"g-footer-link\">About Concept<\/a><\/li>\r\n <li><a href=\"#features\" class=\"g-footer-link\">Gameplay Features<\/a><\/li>\r\n <li><a href=\"#mini-games\" class=\"g-footer-link\">Two Mini Games<\/a><\/li>\r\n <li><a href=\"#showcase\" class=\"g-footer-link\">Visual Showcase<\/a><\/li>\r\n <li><a href=\"https:\/\/officeodyssey.maudenatasha.com\/?page_id=50\" class=\"g-footer-link\">Credits & Copyright<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n <div class=\"g-footer-col\">\r\n <h4 class=\"g-footer-col-title\">CONTACT & STUDIO<\/h4>\r\n <div class=\"g-footer-contact-item\">\r\n <span class=\"g-footer-contact-icon\">\u2709<\/span>\r\n <div>\r\n <div class=\"g-footer-lbl\">SUPPORT EMAIL<\/div>\r\n <a href=\"mailto:info@seekemhub.com\" class=\"g-footer-val-link\">info@seekemhub.com<\/a>\r\n <\/div>\r\n <\/div>\r\n <div class=\"g-footer-contact-item\">\r\n <span class=\"g-footer-contact-icon\">\ud83d\udc51<\/span>\r\n <div>\r\n <div class=\"g-footer-lbl\">OWNER<\/div>\r\n <span class=\"g-footer-val\">MAUDE NATASHA<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"g-footer-contact-item\">\r\n <span class=\"g-footer-contact-icon\">\ud83d\udcbb<\/span>\r\n <div>\r\n <div class=\"g-footer-lbl\">DEVELOPER'S TEAM<\/div>\r\n <span class=\"g-footer-val\">MAUDE NATASHA & ARIF RAZA<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"g-footer-contact-item\">\r\n <span class=\"g-footer-contact-icon\">\ud83c\udfe2<\/span>\r\n <div>\r\n <div class=\"g-footer-lbl\">COMPANY<\/div>\r\n <span class=\"g-footer-val\">MAUDE GAMES<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"g-footer-col\">\r\n <h4 class=\"g-footer-col-title\">CONNECT<\/h4>\r\n <p class=\"g-footer-connect-desc\">\r\n Follow official channels for updates and release announcements.\r\n <\/p>\r\n <div class=\"g-footer-socials\">\r\n <a href=\"https:\/\/instagram.com\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"g-footer-social-btn\" aria-label=\"Instagram\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z\"\/><\/svg>\r\n <\/a>\r\n <a href=\"https:\/\/linkedin.com\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"g-footer-social-btn\" aria-label=\"LinkedIn\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14m-.5 15.5v-5.3a3.26 3.26 0 0 0-3.26-3.26c-.85 0-1.84.52-2.28 1.3v-1.11h-2.79v8.37h2.79v-4.93c0-.77.62-1.4 1.39-1.4a1.4 1.4 0 0 1 1.4 1.4v4.93h2.75M6.88 8.56a1.68 1.68 0 0 0 1.68-1.68c0-.93-.75-1.69-1.68-1.69a1.69 1.69 0 0 0-1.69 1.69c0 .93.76 1.68 1.69 1.68m1.39 9.94v-8.37H5.5v8.37h2.77z\"\/><\/svg>\r\n <\/a>\r\n <a href=\"https:\/\/tiktok.com\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"g-footer-social-btn\" aria-label=\"TikTok\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.2 1.74 2.89 2.89 0 0 1 2.31-4.64 2.93 2.93 0 0 1 .88.13V9.4a6.84 6.84 0 0 0-1-.05A6.33 6.33 0 0 0 3 15.68 6.34 6.34 0 0 0 9.34 22a6.34 6.34 0 0 0 6.33-6.33V9.05a8.16 8.16 0 0 0 4.67 1.47V7.07a4.86 4.86 0 0 1-.75-.38z\"\/><\/svg>\r\n <\/a>\r\n <a href=\"https:\/\/x.com\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"g-footer-social-btn\" aria-label=\"X (Twitter)\">\r\n <svg 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>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"g-footer-bottom\">\r\n <div class=\"g-footer-copy\">\r\n \u00a9 2026 Office Odyssey. All rights reserved. Designed for Maude Natasha.\r\n <\/div>\r\n <a href=\"https:\/\/officeodyssey.maudenatasha.com\/?page_id=50\" class=\"mn-btn-secondary\" style=\"padding: 10px 22px; font-size: 0.72rem;\">\r\n CREDITS & COPYRIGHT \u2192\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/footer>\r\n\r\n<\/div>\r\n\r\n<script>\r\n \/\/ ==========================================================================\r\n \/\/ OFFICE ODYSSEY \u2014 HIGH SPEED CONTROLLER\r\n \/\/ ==========================================================================\r\n\r\n document.addEventListener('DOMContentLoaded', () => {\r\n\r\n const nav = document.getElementById('gNav');\r\n window.addEventListener('scroll', () => {\r\n if (window.scrollY > 40) nav.classList.add('scrolled');\r\n else nav.classList.remove('scrolled');\r\n });\r\n\r\n const mobileBtn = document.getElementById('gMobileBtn');\r\n const mobileDrawer = document.getElementById('gMobileDrawer');\r\n const mobileLinks = document.querySelectorAll('#maude-natasha-game .g-mobile-link');\r\n\r\n if (mobileBtn && mobileDrawer) {\r\n mobileBtn.addEventListener('click', () => {\r\n mobileDrawer.classList.toggle('open');\r\n mobileBtn.textContent = mobileDrawer.classList.contains('open') ? '\u2715' : '\u2630';\r\n });\r\n\r\n mobileLinks.forEach(link => {\r\n link.addEventListener('click', () => {\r\n mobileDrawer.classList.remove('open');\r\n mobileBtn.textContent = '\u2630';\r\n });\r\n });\r\n }\r\n\r\n \/\/ GSAP Animations\r\n if (typeof gsap !== 'undefined') {\r\n gsap.registerPlugin(ScrollTrigger);\r\n\r\n gsap.from('#maude-natasha-game .g-hero-content', {\r\n duration: 1.2,\r\n y: 40,\r\n opacity: 0,\r\n ease: 'power3.out'\r\n });\r\n\r\n gsap.from('#maude-natasha-game .g-info-visual-wrap', {\r\n scrollTrigger: { trigger: '#game-info', start: 'top 80%' },\r\n duration: 1,\r\n x: -40,\r\n opacity: 0,\r\n ease: 'power3.out'\r\n });\r\n\r\n gsap.from('#maude-natasha-game .g-about-content', {\r\n scrollTrigger: { trigger: '#about-game', start: 'top 80%' },\r\n duration: 1,\r\n y: 30,\r\n opacity: 0,\r\n ease: 'power3.out'\r\n });\r\n\r\n gsap.from('#maude-natasha-game .g-feature-card', {\r\n scrollTrigger: { trigger: '#features', start: 'top 85%' },\r\n duration: 0.8,\r\n y: 30,\r\n stagger: 0.1,\r\n ease: 'power2.out'\r\n });\r\n\r\n gsap.from('#maude-natasha-game .g-minigame-card', {\r\n scrollTrigger: { trigger: '#mini-games', start: 'top 85%' },\r\n duration: 0.9,\r\n y: 40,\r\n stagger: 0.15,\r\n ease: 'power3.out'\r\n });\r\n }\r\n\r\n \/\/ Showcase Carousel\r\n const track = document.getElementById('gCarouselTrack');\r\n const prevBtn = document.getElementById('gCarouselPrev');\r\n const nextBtn = document.getElementById('gCarouselNext');\r\n const dotsContainer = document.getElementById('gCarouselDots');\r\n const wrapper = document.getElementById('gShowcaseCarousel');\r\n\r\n if (track && prevBtn && nextBtn && dotsContainer) {\r\n const slides = Array.from(track.children);\r\n let currentIndex = 0;\r\n let autoplayTimer = null;\r\n\r\n function getVisibleCount() {\r\n if (window.innerWidth <= 640) return 1;\r\n if (window.innerWidth <= 1024) return 2;\r\n return 3;\r\n }\r\n\r\n function getMaxIndex() {\r\n return Math.max(0, slides.length - getVisibleCount());\r\n }\r\n\r\n function createDots() {\r\n dotsContainer.innerHTML = '';\r\n const maxIdx = getMaxIndex();\r\n for (let i = 0; i <= maxIdx; i++) {\r\n const dot = document.createElement('button');\r\n dot.className = `g-carousel-dot ${i === currentIndex ? 'active' : ''}`;\r\n dot.setAttribute('aria-label', `Go to slide ${i + 1}`);\r\n dot.addEventListener('click', () => {\r\n currentIndex = i;\r\n updateCarousel();\r\n resetAutoplay();\r\n });\r\n dotsContainer.appendChild(dot);\r\n }\r\n }\r\n\r\n function updateCarousel() {\r\n const maxIdx = getMaxIndex();\r\n if (currentIndex > maxIdx) currentIndex = 0;\r\n if (currentIndex < 0) currentIndex = maxIdx;\r\n\r\n const slideWidth = slides[0].getBoundingClientRect().width;\r\n const gap = 20;\r\n const moveAmount = (slideWidth + gap) * currentIndex;\r\n\r\n track.style.transform = `translateX(-${moveAmount}px)`;\r\n\r\n const dots = Array.from(dotsContainer.children);\r\n dots.forEach((dot, index) => {\r\n dot.classList.toggle('active', index === currentIndex);\r\n });\r\n }\r\n\r\n prevBtn.addEventListener('click', () => {\r\n currentIndex--;\r\n if (currentIndex < 0) currentIndex = getMaxIndex();\r\n updateCarousel();\r\n resetAutoplay();\r\n });\r\n\r\n nextBtn.addEventListener('click', () => {\r\n currentIndex++;\r\n if (currentIndex > getMaxIndex()) currentIndex = 0;\r\n updateCarousel();\r\n resetAutoplay();\r\n });\r\n\r\n function startAutoplay() {\r\n if (autoplayTimer) clearInterval(autoplayTimer);\r\n autoplayTimer = setInterval(() => {\r\n currentIndex++;\r\n if (currentIndex > getMaxIndex()) currentIndex = 0;\r\n updateCarousel();\r\n }, 4000);\r\n }\r\n\r\n function resetAutoplay() {\r\n startAutoplay();\r\n }\r\n\r\n if (wrapper) {\r\n wrapper.addEventListener('mouseenter', () => clearInterval(autoplayTimer));\r\n wrapper.addEventListener('mouseleave', startAutoplay);\r\n }\r\n\r\n window.addEventListener('resize', () => {\r\n createDots();\r\n updateCarousel();\r\n });\r\n\r\n createDots();\r\n updateCarousel();\r\n startAutoplay();\r\n }\r\n\r\n \/\/ ==========================================================================\r\n \/\/ SILENT PRE-WARM ENGINE (PRE-FETCHES GAME DATA TO DISK CACHE SAFELY)\r\n \/\/ ==========================================================================\r\n const GAME_URL = 'https:\/\/officeodyssey.maudenatasha.com\/game\/index.html';\r\n\r\n \/\/ Silently warm up cache 1.5 seconds after landing page is displayed\r\n setTimeout(() => {\r\n try {\r\n fetch(GAME_URL, { mode: 'no-cors', cache: 'force-cache' }).catch(() => {});\r\n } catch(e) {}\r\n }, 1500);\r\n\r\n \/\/ ==========================================================================\r\n \/\/ FAST GAME MODAL CONTROLLER\r\n \/\/ ==========================================================================\r\n const gameShell = document.getElementById('mn-game-shell');\r\n const gameIframe = document.getElementById('mnGameIframe');\r\n const gameLoader = document.getElementById('mnGameLoader');\r\n const progressFill = document.getElementById('mnProgressFill');\r\n const loaderStatus = document.getElementById('mnLoaderStatus');\r\n const closeBtn = document.getElementById('mnGameCloseBtn');\r\n\r\n let gameIsVisible = false;\r\n let loaderInterval = null;\r\n\r\n function startFastLoader() {\r\n if (!gameLoader || !progressFill || !loaderStatus) return;\r\n gameLoader.classList.remove('loaded');\r\n progressFill.style.width = '0%';\r\n loaderStatus.textContent = 'CONNECTING TO GAME...';\r\n\r\n clearInterval(loaderInterval);\r\n let pct = 0;\r\n loaderInterval = setInterval(() => {\r\n pct += Math.floor(Math.random() * 20) + 15;\r\n if (pct >= 90) {\r\n pct = 90;\r\n clearInterval(loaderInterval);\r\n }\r\n progressFill.style.width = pct + '%';\r\n if (pct < 40) loaderStatus.textContent = 'LOADING ASSETS...';\r\n else loaderStatus.textContent = 'LAUNCHING GAME...';\r\n }, 60);\r\n }\r\n\r\n function finishFastLoader() {\r\n clearInterval(loaderInterval);\r\n if (!gameLoader) return;\r\n if (progressFill) progressFill.style.width = '100%';\r\n if (loaderStatus) loaderStatus.textContent = 'GAME READY!';\r\n setTimeout(() => {\r\n gameLoader.classList.add('loaded');\r\n }, 180);\r\n }\r\n\r\n if (gameIframe) {\r\n gameIframe.addEventListener('load', () => {\r\n if (!gameIframe.src || gameIframe.src === 'about:blank' || gameIframe.src === window.location.href) {\r\n return;\r\n }\r\n if (gameIsVisible) {\r\n finishFastLoader();\r\n }\r\n });\r\n }\r\n\r\n function openGame() {\r\n if (!gameShell || !gameIframe) return;\r\n if (gameIsVisible) return;\r\n\r\n \/\/ Load iframe on demand\r\n const targetUrl = gameIframe.getAttribute('data-src') || GAME_URL;\r\n if (!gameIframe.src || gameIframe.src === 'about:blank' || !gameIframe.src.includes('officeodyssey.maudenatasha.com')) {\r\n gameIframe.src = targetUrl;\r\n }\r\n\r\n gameShell.setAttribute('aria-hidden', 'false');\r\n gameShell.classList.add('active');\r\n document.body.style.overflow = 'hidden';\r\n gameIsVisible = true;\r\n\r\n startFastLoader();\r\n }\r\n\r\n function closeGame() {\r\n if (!gameShell) return;\r\n\r\n gameShell.classList.remove('active');\r\n gameShell.setAttribute('aria-hidden', 'true');\r\n document.body.style.overflow = '';\r\n gameIsVisible = false;\r\n\r\n \/\/ STOP AUDIO INSTANTLY: Destroy iframe audio thread\r\n if (gameIframe) {\r\n gameIframe.src = 'about:blank';\r\n }\r\n\r\n if (gameLoader) gameLoader.classList.remove('loaded');\r\n clearInterval(loaderInterval);\r\n\r\n if (window.location.hash.startsWith('#play')) {\r\n history.pushState('', document.title, window.location.pathname + window.location.search);\r\n }\r\n\r\n const hero = document.getElementById('home');\r\n if (hero) hero.scrollIntoView({ behavior: 'smooth' });\r\n }\r\n\r\n \/\/ Bind Play buttons\r\n document.querySelectorAll('.mn-play-btn, .mn-play-link, [href=\"#play\"]').forEach(btn => {\r\n btn.addEventListener('click', (e) => {\r\n e.preventDefault();\r\n window.location.hash = 'play';\r\n openGame();\r\n });\r\n });\r\n\r\n if (closeBtn) {\r\n closeBtn.addEventListener('click', (e) => {\r\n e.preventDefault();\r\n closeGame();\r\n });\r\n }\r\n\r\n function checkHashRoute() {\r\n const hash = window.location.hash;\r\n if (hash === '#play' || hash === '#play-runner' || hash === '#play-tactics') {\r\n if (!gameIsVisible) openGame();\r\n } else {\r\n if (gameIsVisible) closeGame();\r\n }\r\n }\r\n\r\n window.addEventListener('hashchange', checkHashRoute);\r\n window.addEventListener('popstate', checkHashRoute);\r\n\r\n checkHashRoute();\r\n });\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Office Odyssey \u2014 Official Game Landing Page OO OFFICE ODYSSEY STARTING GAME… \u2715 EXIT GAME OO OFFICE ODYSSEY GAME ABOUT […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-9","page","type-page","status-publish","hentry"],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/officeodyssey.maudenatasha.com\/index.php?rest_route=\/wp\/v2\/pages\/9","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/officeodyssey.maudenatasha.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/officeodyssey.maudenatasha.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/officeodyssey.maudenatasha.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/officeodyssey.maudenatasha.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=9"}],"version-history":[{"count":76,"href":"https:\/\/officeodyssey.maudenatasha.com\/index.php?rest_route=\/wp\/v2\/pages\/9\/revisions"}],"predecessor-version":[{"id":157,"href":"https:\/\/officeodyssey.maudenatasha.com\/index.php?rest_route=\/wp\/v2\/pages\/9\/revisions\/157"}],"wp:attachment":[{"href":"https:\/\/officeodyssey.maudenatasha.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=9"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}