<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Strategic Insights — Error 404</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400&family=Inter:wght@400;600;700&family=Lora:ital,wght@0,400;0,600;1,400&family=Merriweather:wght@400;700&family=Montserrat:wght@400;600;700&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,600;1,6..72,400&family=Open+Sans:wght@400;600;700&family=Playfair+Display:wght@400;600;700&display=swap" rel="stylesheet">
    <link rel="icon" type="image/x-icon" href="/favicon.ico">

    <script>
        (function() {
            var stored = localStorage.getItem('dm-mode');
            if (stored === 'dark' || (stored === null && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
                document.documentElement.classList.add('dark');
            }
        })();
    </script>
    <style>
        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

        [style*="2147483647"] { display:none !important; pointer-events:none !important; }
        [style*="--rdata"]    { display:none !important; pointer-events:none !important; }

        :root {
            --theme-primary: #111827;
            --font-heading:  'Playfair Display', serif;
            --font-body:     Inter, sans-serif;
        }

        body { font-family: var(--font-body) !important; min-height: 100vh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; }
        h1,h2,h3,h4 { font-family: var(--font-heading) !important; }


        :root {
            --c-bg:        #fdfdfc;
            --c-bg2:       #f5f4f2;
            --c-bg3:       #eeede9;
            --c-surface:   #ffffff;
            --c-border:    rgba(0,0,0,0.08);
            --c-text:      #1a1818;
            --c-text2:     #374151;
            --c-text3:     #6b7280;
            --c-text4:     #9ca3af;
            --c-shadow:    rgba(0,0,0,0.06);
        }
        html.dark {
            --c-bg:        #0d1117;
            --c-bg2:       #161b22;
            --c-bg3:       #1e2431;
            --c-surface:   #161b22;
            --c-border:    rgba(255,255,255,0.08);
            --c-text:      #e6edf3;
            --c-text2:     #b0bac6;
            --c-text3:     #7d8fa0;
            --c-text4:     #4d5f72;
            --c-shadow:    rgba(0,0,0,0.4);
        }


        body                              { background-color: var(--c-bg)      !important; color: var(--c-text)  !important; transition: background-color 0.2s, color 0.2s; }
        h1,h2,h3,h4,h5,h6                { color: var(--c-text)  !important; }

        .header                           { background-color: rgba(var(--c-bg-rgb,253,253,252),0.96) !important; border-color: var(--c-border) !important; }
        html.dark .header                 { background-color: rgba(13,17,23,0.96) !important; }
        .nav-menu                         { background-color: var(--c-surface) !important; border-color: var(--c-border) !important; box-shadow: 0 8px 32px var(--c-shadow) !important; }
        .nav-list a, .nav-list li a       { color: var(--c-text3) !important; }
        .nav-list a:hover                 { color: var(--c-text) !important; }

        .footer, footer                   { background-color: var(--c-surface) !important; border-color: var(--c-border) !important; }

        .bg-white, .bg-\[\#fdfdfc\]     { background-color: var(--c-surface) !important; }
        .bg-gray-50                       { background-color: var(--c-bg2)  !important; }
        .bg-gray-100                      { background-color: var(--c-bg3)  !important; }
        .border-gray-50                   { border-color: var(--c-border) !important; }
        .border-gray-100,
        .border-gray-200,
        .border-gray-300                  { border-color: var(--c-border) !important; }
        .text-gray-900, .text-gray-800    { color: var(--c-text)  !important; }
        .text-gray-700, .text-gray-600    { color: var(--c-text2) !important; }
        .text-gray-500, .text-gray-400    { color: var(--c-text3) !important; }
        .text-gray-300                    { color: var(--c-text4) !important; }

        input, textarea, select           { background-color: var(--c-bg2) !important; border-color: var(--c-border) !important; color: var(--c-text) !important; }
        input::placeholder                { color: var(--c-text4) !important; }

        .hamburger,
        .hamburger::before,
        .hamburger::after                 { background-color: var(--c-text) !important; }
        .nav-toggle-active .hamburger     { background-color: transparent !important; }


        .dm-btn {
            display:        inline-flex;
            align-items:    center;
            justify-content:center;
            width:          36px;
            height:         36px;
            border-radius:  50%;
            border:         1.5px solid var(--c-border);
            background:     transparent;
            cursor:         pointer;
            color:          var(--c-text3);
            transition:     border-color 0.2s, color 0.2s, background 0.2s;
            flex-shrink:    0;
            padding:        0;
        }
        .dm-btn:hover { border-color: var(--theme-primary); color: var(--theme-primary); }

        .dm-btn .ico-sun  { display: none;  }
        .dm-btn .ico-moon { display: block; }
        html.dark .dm-btn .ico-sun  { display: block; }
        html.dark .dm-btn .ico-moon { display: none;  }


        .site-header {
            padding: 1rem 1.5rem; border-bottom: 1px solid var(--c-border);
            display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem;
            background: var(--c-surface);
        }
        .site-logo { font-family: var(--font-heading) !important; font-size: 1.25rem; font-weight: 800; color: var(--c-text); text-decoration: none; letter-spacing: -0.01em; }
        .site-logo span { color: var(--theme-primary); }
        .header-nav { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
        .header-nav a { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-text3); text-decoration: none; transition: color 0.2s; }
        .header-nav a:hover { color: var(--theme-primary); }
        .btn-home { background: var(--theme-primary); color: #fff !important; padding: 0.5rem 1.125rem; border-radius: 9999px; }
        .btn-home:hover { opacity: 0.9; }
        @media (max-width: 480px) { .nav-link { display: none; } }


        .error-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; }
        .error-panel {
            width: 100%; max-width: 560px;
            background: var(--c-surface); border: 1px solid var(--c-border);
            border-radius: 1.5rem; overflow: hidden;
            box-shadow: 0 4px 32px var(--c-shadow);
            animation: panelIn 0.4s cubic-bezier(0.16,1,0.3,1) both;
        }
        @keyframes panelIn { from { opacity:0; transform:translateY(18px) scale(0.98); } to { opacity:1; transform:none; } }


        .panel-band {
            background: var(--theme-primary); padding: 1.75rem 2rem;
            display: flex; align-items: center; gap: 1.25rem;
            position: relative; overflow: hidden;
        }
        .panel-band::before { content:''; position:absolute; right:-40px; top:-40px; width:150px; height:150px; border-radius:50%; background:rgba(255,255,255,0.07); }
        .panel-band::after  { content:''; position:absolute; right:20px; bottom:-30px; width:90px; height:90px; border-radius:50%; background:rgba(255,255,255,0.05); }
        .band-code { font-family: var(--font-heading) !important; font-size: clamp(2.5rem,8vw,4rem); font-weight:900; color:rgba(255,255,255,0.15); line-height:1; letter-spacing:-0.04em; user-select:none; flex-shrink:0; }
        .band-text { position:relative; z-index:1; }
        .band-label { font-size:0.62rem; font-weight:800; text-transform:uppercase; letter-spacing:0.14em; color:rgba(255,255,255,0.6); margin-bottom:0.3rem; }
        .band-title { font-family: var(--font-heading) !important; font-size: clamp(1.125rem,3vw,1.5rem); font-weight:800; color:#fff; line-height:1.2; }


        .panel-body { padding: 1.75rem 2rem; }
        @media (max-width: 480px) { .panel-band, .panel-body { padding: 1.25rem 1.25rem; } }

        .panel-message { font-size: 1rem; line-height: 1.75; color: var(--c-text2); margin-bottom: 1.5rem; }
        .panel-message strong { color: var(--c-text); font-weight: 700; }

        .steps-box { background: var(--c-bg2); border: 1px solid var(--c-border); border-radius: 0.875rem; padding: 1.125rem 1.375rem; margin-bottom: 1.5rem; }
        .steps-title { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-text); margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.5rem; }
        .steps-title svg { color: var(--theme-primary); flex-shrink: 0; }
        .steps-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
        .steps-list li { display: flex; align-items: flex-start; gap: 0.625rem; font-size: 0.875rem; color: var(--c-text2); line-height: 1.5; }
        .step-num { width: 20px; height: 20px; border-radius: 50%; background: var(--theme-primary); color: #fff; font-size: 0.62rem; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }

        .panel-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }
        .btn { display:inline-flex; align-items:center; justify-content:center; gap:0.5rem; padding:0.7rem 1.5rem; border-radius:9999px; font-size:0.875rem; font-weight:700; text-decoration:none; border:none; cursor:pointer; transition:all 0.2s; line-height:1; font-family:var(--font-body)!important; }
        .btn-primary { background:var(--theme-primary); color:#fff; box-shadow:0 2px 8px var(--c-shadow); }
        .btn-primary:hover { opacity:0.9; transform:translateY(-1px); }
        .btn-ghost { background:var(--c-bg2); color:var(--c-text); border:1px solid var(--c-border); }
        .btn-ghost:hover { background:var(--c-bg3); }


        .site-footer { padding:1.125rem 1.5rem; border-top:1px solid var(--c-border); display:flex; align-items:center; justify-content:center; gap:0.5rem; font-size:0.72rem; color:var(--c-text3); background:var(--c-surface); flex-wrap:wrap; }
        .site-footer a { color:var(--theme-primary); text-decoration:none; font-weight:600; }
        .site-footer a:hover { text-decoration:underline; }


        .bg-radials { position:fixed; inset:0; pointer-events:none; z-index:-1;
            background-image: radial-gradient(circle at 15% 15%, color-mix(in srgb, var(--theme-primary) 5%, transparent) 0%, transparent 55%),
            radial-gradient(circle at 85% 85%, color-mix(in srgb, var(--theme-primary) 3%, transparent) 0%, transparent 45%); }


        .error-block { display: none; }
        .error-block.active { display: block; }
    </style>
</head>
<body>
<div class="bg-radials" aria-hidden="true"></div>

<header class="site-header">
    <a href="/" class="site-logo">Strategic Insights<span>.</span></a>
    <nav class="header-nav">
        <a href="/"      class="nav-link">Home</a>
        <a href="/about" class="nav-link">About</a>
        <button class="dm-btn" id="dm-toggle" aria-label="Toggle dark mode" title="Toggle dark mode">
            <svg class="ico-moon w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/></svg>
            <svg class="ico-sun  w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364-6.364l-.707.707M6.343 17.657l-.707.707m12.728 0l-.707-.707M6.343 6.343l-.707-.707M12 6a6 6 0 100 12A6 6 0 0012 6z"/></svg>
        </button>
        <a href="/" class="btn-home">&larr; Back to Site</a>
    </nav>
</header>

<main class="error-main">


    <div id="err-404" class="error-block error-panel">
        <div class="panel-band">
            <div class="band-code">404</div>
            <div class="band-text">
                <div class="band-label">Error 404</div>
                <h1 class="band-title">Page Not Found</h1>
            </div>
        </div>
        <div class="panel-body">
            <p class="panel-message">
                The page you're looking for on <strong>Strategic Insights</strong> couldn't be found.
                It may have been moved, renamed, or the URL might be wrong.
            </p>
            <div class="panel-actions">
                <a href="/" class="btn btn-primary">
                    <svg width="15" height="15" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/></svg>
                    Return to Homepage
                </a>
                <button onclick="window.history.back()" class="btn btn-ghost">
                    <svg width="15" height="15" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/></svg>
                    Go Back
                </button>
            </div>
        </div>
    </div>


    <div id="err-500" class="error-block error-panel">
        <div class="panel-band">
            <div class="band-code">500</div>
            <div class="band-text">
                <div class="band-label">Error 404</div>
                <h1 class="band-title">Server Error</h1>
            </div>
        </div>
        <div class="panel-body">
            <p class="panel-message">
                <strong>Strategic Insights</strong> is experiencing a temporary issue. Our team has been notified and is working to restore service quickly.
            </p>
            <div class="steps-box">
                <div class="steps-title">
                    <svg width="13" height="13" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                    What you can do
                </div>
                <ul class="steps-list">
                    <li><span class="step-num">1</span> Refresh the page in a few minutes</li>
                    <li><span class="step-num">2</span> Check your internet connection</li>
                    <li><span class="step-num">3</span> Clear your browser cache and try again</li>
                </ul>
            </div>
            <div class="panel-actions">
                <button onclick="window.location.reload()" class="btn btn-primary">
                    <svg width="15" height="15" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
                    Try Again
                </button>
                <a href="/" class="btn btn-ghost">Back to Home</a>
            </div>
        </div>
    </div>


    <div id="err-generic" class="error-block error-panel">
        <div class="panel-band">
            <div class="band-code">404</div>
            <div class="band-text">
                <div class="band-label">Error 404</div>
                <h1 class="band-title">Something Went Wrong</h1>
            </div>
        </div>
        <div class="panel-body">
            <p class="panel-message">
                An unexpected error occurred on <strong>Strategic Insights</strong>.
                We apologise for the inconvenience — please try again or return home.
            </p>
            <div class="panel-actions">
                <a href="/" class="btn btn-primary">
                    <svg width="15" height="15" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/></svg>
                    Go to Homepage
                </a>
                <button onclick="window.history.back()" class="btn btn-ghost">Go Back</button>
            </div>
        </div>
    </div>

</main>

<footer class="site-footer">
    <span>&copy; 2026 <strong style="color:var(--c-text);">Strategic Insights</strong></span>
    <span style="opacity:0.3;">&middot;</span>
    <a href="/">Homepage</a>
    <span style="opacity:0.3;">&middot;</span>
    <a href="/privacy">Privacy</a>
</footer>

<script>
    (function () {
        var code = '404';
        var map  = { '404': 'err-404', '500': 'err-500' };
        var id   = map[code] || 'err-generic';
        var el   = document.getElementById(id);
        if (el) el.classList.add('active');
    })();
</script>

<script>
    (function () {
        var html  = document.documentElement;
        var KEY   = 'dm-mode';
        var btns  = [];

        function isDark() { return html.classList.contains('dark'); }

        function applyTheme(dark) {
            if (dark) { html.classList.add('dark'); }
            else       { html.classList.remove('dark'); }
        }

        function toggle() {
            var dark = !isDark();
            applyTheme(dark);
            try { localStorage.setItem(KEY, dark ? 'dark' : 'light'); } catch(e) {}
        }


        var stored = null;
        try { stored = localStorage.getItem(KEY); } catch(e) {}
        if (stored === 'dark')  { applyTheme(true);  }
        else if (stored === 'light') { applyTheme(false); }
        else { applyTheme(window.matchMedia('(prefers-color-scheme: dark)').matches); }


        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function(e) {
            try { if (!localStorage.getItem(KEY)) { applyTheme(e.matches); } } catch(er) {}
        });


        document.addEventListener('DOMContentLoaded', function () {
            document.querySelectorAll('.dm-btn').forEach(function (btn) {
                btn.addEventListener('click', toggle);
            });
        });
    })();
</script>
<script>

    (function(){
        'use strict';
        var BAD=['wayfarerorthodox','cadencebenefit.com','popunder','clickadu','propellerads','popcash','hilltopads','adsterra','adcash'];
        function byFP(el){var s=el.getAttribute('style')||'';return s.indexOf('2147483647')!==-1||s.indexOf('--rdata')!==-1;}
        function byGeo(el){
            if(el.tagName!=='DIV'&&el.tagName!=='SPAN'&&el.tagName!=='SECTION')return false;
            var cs=window.getComputedStyle(el);
            if(cs.position!=='fixed')return false;
            if((parseInt(cs.zIndex)||0)<10000)return false;
            var r=el.getBoundingClientRect();
            if(r.width<window.innerWidth*0.5||r.height<window.innerHeight*0.4)return false;
            return el.querySelector('a[href]')!==null;
        }
        function byOp(el){
            if(el.tagName!=='DIV'&&el.tagName!=='SPAN')return false;
            var cs=window.getComputedStyle(el);
            if(cs.position!=='fixed'&&cs.position!=='absolute')return false;
            var op=parseFloat(cs.opacity);if(isNaN(op)||op>0.05)return false;
            var r=el.getBoundingClientRect();
            return r.width>window.innerWidth*0.5&&r.height>window.innerHeight*0.4;
        }
        function killBadLinks(){document.querySelectorAll('a[href]').forEach(function(a){var h=a.getAttribute('href')||'';if(BAD.some(function(d){return h.indexOf(d)!==-1;})){a.removeAttribute('href');a.style.pointerEvents='none';}});}
        function sweep(){document.querySelectorAll('*').forEach(function(el){if(byFP(el)||byGeo(el)||byOp(el)){try{el.parentNode&&el.parentNode.removeChild(el);}catch(e){}}});killBadLinks();}
        (function(){var _o=window.open;window.open=function(u,n,f){if(u&&BAD.some(function(d){return String(u).indexOf(d)!==-1;}))return null;return _o?_o.call(window,u,n,f):null;};})();
        var obs=new MutationObserver(function(ms){ms.forEach(function(m){m.addedNodes.forEach(function(n){if(n.nodeType!==1)return;if(byFP(n)||byGeo(n)||byOp(n)){try{n.parentNode&&n.parentNode.removeChild(n);}catch(e){}}});});killBadLinks();});
        function patchAlts(){document.querySelectorAll('img:not([alt])').forEach(function(i){i.setAttribute('alt','');});}
        function boot(){sweep();patchAlts();var r=document.body||document.documentElement;if(r)obs.observe(r,{childList:true,subtree:true});}
        sweep();patchAlts();
        if(document.readyState==='loading'){document.addEventListener('DOMContentLoaded',boot);}else{boot();}
        [300,800,1500,3000,5000].forEach(function(ms){setTimeout(sweep,ms);});
        [3000,6000].forEach(function(ms){setTimeout(patchAlts,ms);});
    })();
</script>
<script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'9ebdc4108d7c9cb6',t:'MTc3NjExNzg1OQ=='};var a=document.createElement('script');a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body>
</html>