diff --git a/i18n/en.yaml b/i18n/en.yaml
index d15ad8c..31fce12 100644
--- a/i18n/en.yaml
+++ b/i18n/en.yaml
@@ -1,7 +1,32 @@
 # header
-header_login: Login
-header_signup: Sign Up
+header_login: Sign in
+header_signup: Create a free account
 header_pricing: Pricing
+header_menu_features: Features
+header_menu_resources: Resources
+
+header_feature_email_aliases: Email Aliases
+header_feature_email_aliases_desc: Protect your inbox with anonymous email addresses
+header_feature_custom_domains: Custom Domains
+header_feature_custom_domains_desc: Use your own domain to create aliases
+header_feature_browser_extensions: Browser Extensions
+header_feature_browser_extensions_desc: Create aliases in one click from Chrome, Firefox, Edge, or Safari
+header_feature_signin_with_sl: Sign in with SimpleLogin
+header_feature_signin_with_sl_desc: Privacy-first login button for your app or website
+
+header_resource_blog: Blog
+header_resource_blog_desc: Stories, tips and privacy guides from our team
+header_resource_documentation: Documentation
+header_resource_documentation_desc: Get the most out of SimpleLogin
+header_resource_faq: FAQ
+header_resource_faq_desc: Answers to the most common questions
+header_resource_forum: Forum
+header_resource_forum_desc: Discuss features, ask questions, share best practices
+header_resource_github: GitHub
+header_resource_github_desc: Review our open-source code and contribute
+header_resource_status: Status
+header_resource_status_desc: Check service uptime and incidents
+header_resource_comparisons: Comparisons
 
 # hero section
 hero: Receive and send emails anonymously
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index d14ef94..5f74b9d 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -228,14 +228,6 @@ <h3 class="h6 text-white">Downloads</h3>
 <!-- JS Plugins Init. -->
 <script>
   $(window).on('load', function () {
-    // initialization of HSMegaMenu component
-    $('.js-mega-menu').HSMegaMenu({
-      event: 'hover',
-      pageContainer: $('.container'),
-      breakpoint: 767.98,
-      hideTimeOut: 0
-    });
-
     // initialization of svg injector module
     $.HSCore.components.HSSVGIngector.init('.js-svg-injector');
   });
@@ -267,6 +259,133 @@ <h3 class="h6 text-white">Downloads</h3>
     $.HSCore.components.HSGoTo.init('.js-go-to');
   });
 </script>
+
+<script>
+  (function () {
+    'use strict';
+
+    var navBar    = document.getElementById('navBar');
+    var closeBtn  = document.querySelector('.sl-drawer-close');
+    var hamburger = document.querySelector('.navbar-toggler');
+    var BREAKPOINT = navBar ? parseInt(navBar.getAttribute('data-breakpoint'), 10) : 1278;
+
+    if (!navBar || !hamburger) return;
+
+    function openDrawer() {
+      navBar.classList.add('is-open');
+      document.body.style.overflow = 'hidden';
+      hamburger.setAttribute('aria-expanded', 'true');
+    }
+
+    function closeDrawer() {
+      navBar.classList.remove('is-open');
+      document.body.style.overflow = '';
+      hamburger.setAttribute('aria-expanded', 'false');
+    }
+
+    hamburger.addEventListener('click', function () {
+      navBar.classList.contains('is-open') ? closeDrawer() : openDrawer();
+    });
+
+    if (closeBtn) closeBtn.addEventListener('click', closeDrawer);
+
+    window.addEventListener('resize', function () {
+      if (window.innerWidth >= BREAKPOINT) closeDrawer();
+    });
+  }());
+</script>
+
+<script>
+  (function () {
+    'use strict';
+
+    var navBar = document.getElementById('navBar');
+    var BREAKPOINT = navBar ? parseInt(navBar.getAttribute('data-breakpoint'), 10) : 1278;
+    var overlay    = document.getElementById('sl-nav-overlay');
+    var panels     = Array.from(document.querySelectorAll('.sl-mega-panel'));
+
+    if (!panels.length) return;
+
+    // Remember original DOM positions so panels can be restored after mobile use
+    var origins = new Map(panels.map(function (p) {
+      return [p, { parent: p.parentNode, next: p.nextSibling }];
+    }));
+
+    var active = { panel: null, trigger: null };
+
+    function isDesktop() {
+      return window.innerWidth >= BREAKPOINT;
+    }
+
+    function restoreOrigin(panel) {
+      var o = origins.get(panel);
+      if (panel.parentNode !== o.parent) {
+        o.parent.insertBefore(panel, o.next);
+      }
+    }
+
+    function positionPanel(panel, trigger) {
+      var rect = trigger.getBoundingClientRect();
+      var left = Math.min(rect.left, window.innerWidth - panel.offsetWidth - 16);
+      panel.style.top  = rect.bottom + 'px';
+      panel.style.left = Math.max(0, left) + 'px';
+    }
+
+    function close() {
+      if (!active.panel) return;
+      active.panel.classList.remove('is-open');
+      active.panel.style.top  = '';
+      active.panel.style.left = '';
+      active.trigger.setAttribute('aria-expanded', 'false');
+      restoreOrigin(active.panel);
+      if (overlay) overlay.classList.remove('is-visible');
+      active.panel = active.trigger = null;
+    }
+
+    function open(panel, trigger) {
+      if (active.panel === panel) { close(); return; }
+      if (active.panel) close();
+
+      if (!isDesktop()) {
+        // Slot panel into the drawer directly after its trigger's <li>
+        trigger.closest('li').insertAdjacentElement('afterend', panel);
+      }
+
+      panel.classList.add('is-open');
+      trigger.setAttribute('aria-expanded', 'true');
+      active.panel   = panel;
+      active.trigger = trigger;
+
+      if (isDesktop()) {
+        positionPanel(panel, trigger);
+        if (overlay) overlay.classList.add('is-visible');
+      }
+    }
+
+    document.addEventListener('click', function (e) {
+      var trigger = e.target.closest('#header [aria-haspopup="true"][aria-controls]');
+
+      if (trigger) {
+        var panel = document.getElementById(trigger.getAttribute('aria-controls'));
+        if (panel && panel.classList.contains('sl-mega-panel')) {
+          e.stopPropagation();
+          open(panel, trigger);
+          return;
+        }
+      }
+
+      if (active.panel && !active.panel.contains(e.target)) close();
+    });
+
+    document.addEventListener('keydown', function (e) {
+      if (e.key === 'Escape') close();
+    });
+
+    if (overlay) overlay.addEventListener('click', close);
+
+    window.addEventListener('resize', close);
+  }());
+</script>
 <script src="/local-storage-polyfill.js"></script>
 
 <!--<script type="text/javascript"
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 4cb4938..26a73dd 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -98,10 +98,10 @@
 
   <link rel="stylesheet" href="/prism.css">
 
-  <link rel="stylesheet" href="/custom.css?v=4">
+  <link rel="stylesheet" href="/custom.css?v=8">
 
 </head>
-<body class="d-flex flex-column" style="min-height: 100vh">
+<body class="d-flex flex-column sl-page-shell">
   <!-- Hello bar for announcement -->
 <!--   <div id="hello-bar" class="alert alert-success text-center" role="alert">
   </div> -->
@@ -109,152 +109,247 @@
 
 
   <!-- ========== HEADER ========== -->
-  <header id="header" class="u-header u-header--white-bg-on-scroll u-header--sticky-top-md u-header--bg-transparent"
+    <header id="header" class="u-header u-header--white-bg-on-scroll u-header--sticky-top-md u-header--bg-transparent sl-header-sticky"
           data-header-fix-moment="500"
-          data-header-fix-effect="slide"
-          style="position: static;"
-          >
+      data-header-fix-effect="slide">
     <div class="u-header__section">
-      <div id="logoAndNav" class="container">
+      <div id="logoAndNav" class="container-fluid">
         <!-- Nav -->
-        <nav class="js-mega-menu navbar navbar-expand-md u-header__navbar u-header__navbar--no-space">
+        <nav class="js-mega-menu sl-navbar navbar u-header__navbar u-header__navbar--no-space"
+             aria-label="Main navigation">
+
           <!-- Logo -->
           <a class="navbar-brand u-header__navbar-brand u-header__navbar-brand-center"
-            href='{{ cond (eq .Lang "en") "/" (print "/" .Lang "/") }}'
-            aria-label="SimpleLogin">
+             href='{{ cond (eq .Lang "en") "/" (print "/" .Lang "/") }}'
+             aria-label="SimpleLogin">
             <img src="/logo.svg" alt="SimpleLogin logo">
           </a>
           <!-- End Logo -->
 
-          <!-- Responsive Toggle Button -->
+          <!-- Outside-collapse actions: visible progressively at 640px / 768px, hidden at 1278px+ -->
+          <div class="sl-header-actions ml-auto mr-2">
+            <a class="sl-header-signin-top btn-sign-in nav-link u-header__nav-link"
+               href="https://app.simplelogin.io/auth/login">
+              {{ i18n "header_login" }}
+            </a>
+            <a class="sl-header-cta-top btn btn-create-free-account transition-3d-hover"
+               href="https://app.simplelogin.io/auth/register">
+              {{ i18n "header_signup" }}
+            </a>
+          </div>
+
+          <!-- Hamburger Toggle: visible below 1278px -->
           <button type="button" class="navbar-toggler btn u-hamburger"
                   aria-label="Toggle navigation"
                   aria-expanded="false"
-                  aria-controls="navBar"
-                  data-toggle="collapse"
-                  data-target="#navBar">
+                  aria-controls="navBar">
             <span id="hamburgerTrigger" class="u-hamburger__box">
               <span class="u-hamburger__inner"></span>
             </span>
           </button>
-          <!-- End Responsive Toggle Button -->
-
-          <!-- Navigation -->
-          <div id="navBar" class="collapse navbar-collapse u-header__navbar-collapse">
-            <ul class="js-scroll-nav navbar-nav align-items-md-center u-header__navbar-nav ml-auto">
-
-              <!-- Community Menu -->
-              <li class="nav-item hs-has-mega-menu u-header__nav-item"
-                  data-event="hover"
-                  data-animation-in="slideInUp"
-                  data-animation-out="fadeOut"
-                  data-max-width="600px"
-                  data-position="right">
-                <a id="shopMegaMenu" class="nav-link u-header__nav-link u-header__nav-link-toggle" href="javascript:;" aria-haspopup="true" aria-expanded="false">Community</a>
-
-
-                <div class="hs-mega-menu u-header__sub-menu u-header__mega-menu-position-right-fix--md" aria-labelledby="shopMegaMenu">
-                  <div class="u-header__mega-menu-wrapper">
-
-                    <div class="row p-0">
-                      <div class="col p-0">
-                        <ul class="u-header__sub-menu-nav-group">
-                          <li class="submenu-item p-1">
-                            <a class="nav-link u-header__sub-menu-nav-link" href="/blog/">
-                              <div>
-                                <p class="font-weight-bold mb-1">Blog</p>
-                                <p>
-                                  Stories about our journey to build an open-source tool to protect your privacy, what we've learnt and tips to take control of your privacy.
-                                </p>
-                              </div>
-                            </a>
-                          </li>
-
-                          <li class="submenu-item p-1">
-                            <a class="nav-link u-header__sub-menu-nav-link" href="/docs/">
-                              <div>
-                                <p class="font-weight-bold  mb-1">Documentation</p>
-                                <p>
-                                  How to get the most from SimpleLogin.
-                                </p>
-                              </div>
-                            </a>
-                          </li>
-
-                          <li class="submenu-item p-1">
-                            <a class="nav-link u-header__sub-menu-nav-link" href="https://github.com/simple-login/app">
-                              <div>
-                                <p class="font-weight-bold  mb-1">GitHub Repo</p>
-                                <p>
-                                  Read, review our code, share ideas. Make sure that SimpleLogin is doing what it says.
-                                </p>
-                              </div>
-                            </a>
-                          </li>
-
-                          <li class="submenu-item p-1">
-                            <a class="nav-link u-header__sub-menu-nav-link" href="https://github.com/simple-login/app/discussions">
-                              <div>
-                                <p class="font-weight-bold  mb-1">Forum</p>
-                                <p>
-                                  Discuss about new features, ask questions, share best practices, etc.
-                                </p>
-                              </div>
-                            </a>
-                          </li>
-
-                        </ul>
-
-
-                      </div>
-                    </div>
-                  </div>
-
-                  <div class="p-5" style="background-color: #f8f9fa; border-radius: 5px; box-shadow: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -2px rgb(0 0 0 / 5%);">
-                    <h5>
-                      Comparisons
-                    </h5>
-
-                    <!-- List Group -->
-                    <ul class="list-group list-group-transparent list-group-flush list-group-borderless mb-0">
-                        <li><a class="list-group-item list-group-item-action text-dark" href="/blog/email-alias-vs-plus-sign/">vs Plus Sign (+) Trick </a></li>
-
-                        <li><a class="list-group-item list-group-item-action text-dark" href="/blog/vs-firefox-relay/">vs Firefox Relay</a></li>
-                        <li><a class="list-group-item list-group-item-action text-dark" href="/vs-apple-hide-my-email/">vs Apple's Hide My Email</a></li>
-                    </ul>
-                    <!-- End List Group -->
-
-                  </div>
-                </div>
+          <!-- End Hamburger Toggle -->
+
+          <!-- Navigation Collapse -->
+          <div id="navBar" class="navbar-collapse u-header__navbar-collapse" data-breakpoint="1278">
+
+            <!-- Mobile drawer header: logo + close (hidden at desktop) -->
+            <div class="sl-drawer-header">
+              <a href='{{ cond (eq .Lang "en") "/" (print "/" .Lang "/") }}' aria-label="SimpleLogin">
+                <img src="/logo.svg" alt="SimpleLogin logo" height="28">
+              </a>
+              <button type="button" class="sl-drawer-close" aria-label="Close navigation">
+                <i class="fas fa-times" aria-hidden="true"></i>
+              </button>
+            </div>
+
+            <ul class="js-scroll-nav navbar-nav align-items-md-center u-header__navbar-nav w-100">
+
+              <!-- Features Mega-menu -->
+              <li class="nav-item u-header__nav-item">
+                <button id="featuresMegaMenu"
+                        class="sl-menu-toggle nav-link u-header__nav-link u-header__nav-link-toggle"
+                        type="button"
+                        aria-haspopup="true"
+                        aria-expanded="false"
+                        aria-controls="featuresMegaMenuContent">{{ i18n "header_menu_features" }}</button>
+              </li>
+              <!-- End Features Mega-menu -->
 
+              <!-- Resources Mega-menu -->
+              <li class="nav-item u-header__nav-item">
+                <button id="resourcesMegaMenu"
+                        class="sl-menu-toggle nav-link u-header__nav-link u-header__nav-link-toggle"
+                        type="button"
+                        aria-haspopup="true"
+                        aria-expanded="false"
+                        aria-controls="resourcesMegaMenuContent">{{ i18n "header_menu_resources" }}</button>
               </li>
-              <!-- End Community Menu -->
+              <!-- End Resources Mega-menu -->
 
-              <li class="nav-item u-header__nav-item mr-6">
+              <!-- Pricing: mr-auto pushes Sign in + CTA to the right at desktop -->
+              <li class="nav-item u-header__nav-item sl-nav-pricing">
                 <a class="nav-link u-header__nav-link"
-                  href='{{ cond (eq .Lang "en") "/pricing/" (print "/" .Lang "/pricing/") }}'>
+                   href='{{ cond (eq .Lang "en") "/pricing/" (print "/" .Lang "/pricing/") }}'>
                   {{ i18n "header_pricing" }}
                 </a>
               </li>
 
-              <li class="nav-item u-header__nav-item">
-                <a class="nav-link u-header__nav-link" href="https://app.simplelogin.io/auth/login">
-                  {{ i18n "header_login" }}
+              <!-- CTA: in drawer below 640px and inline at 1278px+; hidden 640–1277px (shown outside collapse) -->
+              <li class="sl-nav-cta nav-item u-header__nav-item mr-3">
+                <a class="btn btn-create-free-account" href="https://app.simplelogin.io/auth/register">
+                  {{ i18n "header_signup" }}
                 </a>
               </li>
 
-              <li class="nav-item u-header__nav-item mr-6">
-                <a class="btn btn-primary btn-sm transition-3d-hover" href="https://app.simplelogin.io/auth/register">
-                  {{ i18n "header_signup" }}
+              <!-- Sign in: in drawer below 768px and inline at 1278px+; hidden 768–1277px (shown outside collapse) -->
+              <li class="sl-nav-signin nav-item u-header__nav-item">
+                <a class="btn btn-sign-in u-header__nav-link" href="https://app.simplelogin.io/auth/login">
+                  {{ i18n "header_login" }}
                 </a>
               </li>
 
             </ul>
           </div>
-          <!-- End Navigation -->
+          <!-- End Navigation Collapse -->
+
         </nav>
         <!-- End Nav -->
       </div>
     </div>
   </header>
   <!-- ========== END HEADER ========== -->
+
+  <div id="featuresMegaMenuContent" class="sl-mega-panel" aria-labelledby="featuresMegaMenu">
+    <div class="u-header__mega-menu-wrapper">
+      <ul class="u-header__sub-menu-nav-group p-0 m-0" role="list">
+
+        <li class="submenu-item" role="listitem">
+          <a class="nav-link u-header__sub-menu-nav-link" href="/" aria-label="Email Aliases">
+            <span class="sl-submenu-icon" aria-hidden="true"><i class="fas fa-at"></i></span>
+            <span>
+              <span class="sl-sumbenu-title font-weight-medium d-block mb-1">{{ i18n "header_feature_email_aliases" }}</span>
+              <span class="sl-submenu-desc" aria-hidden="true">{{ i18n "header_feature_email_aliases_desc" }}</span>
+            </span>
+          </a>
+        </li>
+
+        <li class="submenu-item" role="listitem">
+          <a class="nav-link u-header__sub-menu-nav-link" href="/docs/" aria-label="Custom Domains">
+            <span class="sl-submenu-icon" aria-hidden="true"><i class="fas fa-globe"></i></span>
+            <span>
+              <span class="sl-sumbenu-title font-weight-medium d-block mb-1">{{ i18n "header_feature_custom_domains" }}</span>
+              <span class="sl-submenu-desc" aria-hidden="true">{{ i18n "header_feature_custom_domains_desc" }}</span>
+            </span>
+          </a>
+        </li>
+
+        <li class="submenu-item" role="listitem">
+          <a class="nav-link u-header__sub-menu-nav-link" href="/docs/" aria-label="Browser Extensions">
+            <span class="sl-submenu-icon" aria-hidden="true"><i class="fas fa-puzzle-piece"></i></span>
+            <span>
+              <span class="sl-sumbenu-title font-weight-medium d-block mb-1">{{ i18n "header_feature_browser_extensions" }}</span>
+              <span class="sl-submenu-desc" aria-hidden="true">{{ i18n "header_feature_browser_extensions_desc" }}</span>
+            </span>
+          </a>
+        </li>
+
+        <li class="submenu-item" role="listitem">
+          <a class="nav-link u-header__sub-menu-nav-link" href="/developer/" aria-label="Sign in with SimpleLogin">
+            <span class="sl-submenu-icon" aria-hidden="true"><i class="fas fa-key"></i></span>
+            <span>
+              <span class="sl-sumbenu-title font-weight-medium d-block mb-1">{{ i18n "header_feature_signin_with_sl" }}</span>
+              <span class="sl-submenu-desc" aria-hidden="true">{{ i18n "header_feature_signin_with_sl_desc" }}</span>
+            </span>
+          </a>
+        </li>
+
+      </ul>
+    </div>
+  </div>
+
+  <div id="resourcesMegaMenuContent" class="sl-mega-panel" aria-labelledby="resourcesMegaMenu">
+    <div class="u-header__mega-menu-wrapper pl-0">
+      <div class="row no-gutters">
+
+        <div class="col-7 sl-submenu-main-col py-0">
+          <ul class="u-header__sub-menu-nav-group p-0 m-0" role="list">
+
+            <li class="submenu-item" role="listitem">
+              <a class="nav-link u-header__sub-menu-nav-link" href="/blog/" aria-label="Blog">
+                <span class="sl-submenu-icon" aria-hidden="true"><i class="fas fa-rss"></i></span>
+                <span>
+                  <span class="sl-sumbenu-title font-weight-medium d-block mb-1">{{ i18n "header_resource_blog" }}</span>
+                  <span class="sl-submenu-desc" aria-hidden="true">{{ i18n "header_resource_blog_desc" }}</span>
+                </span>
+              </a>
+            </li>
+
+            <li class="submenu-item" role="listitem">
+              <a class="nav-link u-header__sub-menu-nav-link" href="/docs/" aria-label="Documentation">
+                <span class="sl-submenu-icon" aria-hidden="true"><i class="fas fa-book-open"></i></span>
+                <span>
+                  <span class="sl-sumbenu-title font-weight-medium d-block mb-1">{{ i18n "header_resource_documentation" }}</span>
+                  <span class="sl-submenu-desc" aria-hidden="true">{{ i18n "header_resource_documentation_desc" }}</span>
+                </span>
+              </a>
+            </li>
+
+            <li class="submenu-item" role="listitem">
+              <a class="nav-link u-header__sub-menu-nav-link"
+                 href='{{ cond (eq .Lang "en") "/faq/" (print "/" .Lang "/faq/") }}'
+                 aria-label="FAQ">
+                <span class="sl-submenu-icon" aria-hidden="true"><i class="fas fa-question-circle"></i></span>
+                <span>
+                  <span class="sl-sumbenu-title font-weight-medium d-block mb-1">{{ i18n "header_resource_faq" }}</span>
+                  <span class="sl-submenu-desc" aria-hidden="true">{{ i18n "header_resource_faq_desc" }}</span>
+                </span>
+              </a>
+            </li>
+
+            <li class="submenu-item" role="listitem">
+              <a class="nav-link u-header__sub-menu-nav-link" href="https://github.com/simple-login/app/discussions" aria-label="Forum">
+                <span class="sl-submenu-icon" aria-hidden="true"><i class="far fa-comments"></i></span>
+                <span>
+                  <span class="sl-sumbenu-title font-weight-medium d-block mb-1">{{ i18n "header_resource_forum" }}</span>
+                  <span class="sl-submenu-desc" aria-hidden="true">{{ i18n "header_resource_forum_desc" }}</span>
+                </span>
+              </a>
+            </li>
+
+            <li class="submenu-item" role="listitem">
+              <a class="nav-link u-header__sub-menu-nav-link" href="https://github.com/simple-login/app" aria-label="GitHub">
+                <span class="sl-submenu-icon" aria-hidden="true"><i class="fab fa-github"></i></span>
+                <span>
+                  <span class="sl-sumbenu-title font-weight-medium d-block mb-1">{{ i18n "header_resource_github" }}</span>
+                  <span class="sl-submenu-desc" aria-hidden="true">{{ i18n "header_resource_github_desc" }}</span>
+                </span>
+              </a>
+            </li>
+
+            <li class="submenu-item" role="listitem">
+              <a class="nav-link u-header__sub-menu-nav-link" href="https://status.simplelogin.io" aria-label="Status">
+                <span class="sl-submenu-icon" aria-hidden="true"><i class="fas fa-heartbeat"></i></span>
+                <span>
+                  <span class="sl-sumbenu-title font-weight-medium d-block mb-1">{{ i18n "header_resource_status" }}</span>
+                  <span class="sl-submenu-desc" aria-hidden="true">{{ i18n "header_resource_status_desc" }}</span>
+                </span>
+              </a>
+            </li>
+
+          </ul>
+        </div>
+
+        <div class="col-5 sl-submenu-sidebar rounded-4">
+          <p class="text-uppercase font-weight-bold text-muted sl-submenu-sidebar-title mb-3 mx-3">{{ i18n "header_resource_comparisons" }}</p>
+          <ul class="list-group list-group-transparent list-group-flush list-group-borderless mb-0 mx-3" role="list">
+            <li><a class="list-group-item list-group-item-action text-dark small" href="/blog/email-alias-vs-plus-sign/">vs Plus Sign (+) Trick</a></li>
+            <li><a class="list-group-item list-group-item-action text-dark small" href="/blog/vs-firefox-relay/">vs Firefox Relay</a></li>
+            <li><a class="list-group-item list-group-item-action text-dark small" href="/vs-apple-hide-my-email/">vs Apple's Hide My Email</a></li>
+          </ul>
+        </div>
+
+      </div>
+    </div>
+  </div>
+
+  <div id="sl-nav-overlay" class="sl-nav-overlay" aria-hidden="true"></div>
diff --git a/static/custom.css b/static/custom.css
index 9f0d256..c8ac0d4 100644
--- a/static/custom.css
+++ b/static/custom.css
@@ -150,5 +150,661 @@ img {
 }
 
 .submenu-item:hover {
-    background-color: #e1e3eb;
+    background-color: var(--sl-submenu-accent-light);
+}
+
+/* Header Nav */
+
+header nav .u-header__nav-link {
+    color: #1a202c;
+    transition: all 0.2s ease;
+}
+
+header nav .u-header__nav-item:hover > .u-header__nav-link,
+header nav .u-header__nav-item:focus-within > .u-header__nav-link {
+  color: var(--sl-submenu-accent);
+}
+
+header .btn-create-free-account,
+header nav .btn-sign-in {
+  border-radius: 16px;
+  font-size: 0.9em;
+  padding: 0.25rem 1rem;
+  text-decoration: none;
+}
+
+header .btn-create-free-account {
+    background-color: var(--sl-submenu-accent);
+    border-color: var(--sl-submenu-accent);
+    color: #fff;
+    transition: background-color 0.2s ease, border-color 0.2s ease;
+}
+
+header .btn-create-free-account:hover {
+    background-color: #d1287f;
+    border-color: #d1287f;
+  color: #fff;
+}
+
+header .btn-create-free-account:focus,
+header .btn-create-free-account:active {
+  color: #fff;
+}
+
+header nav .btn-sign-in {
+  background-color: #fff;
+  color: var(--sl-submenu-accent);
+}
+
+header nav .btn-sign-in:hover,
+header nav .btn-sign-in:focus,
+header nav .btn-sign-in:active {
+  background-color: #d1287f;
+  border-color: #d1287f;
+  color: #fff;
+  text-decoration: none;
+}
+
+header nav .u-header__nav-item.sl-nav-signin:hover > .btn-sign-in,
+header nav .u-header__nav-item.sl-nav-signin:focus-within > .btn-sign-in {
+  color: #fff;
+}
+
+
+/* custom container */
+
+.container-fluid {
+    padding-left: 1rem;
+    padding-right: 1rem;
+}
+
+@media screen and (min-width: 992px) {
+    .container-fluid {
+        padding-left: 4rem;
+        padding-right: 4rem;
+    }
+}
+
+/* Navbar */
+
+#header .navbar-nav {
+    width: 100%;
+}
+
+/* ============================================
+   HEADER — Modern Navigation
+   ============================================
+   Breakpoints (min-width, mobile-first):
+     <1278px → Full-screen drawer navigation
+     1278px+ → Full inline nav, no hamburger
+
+   CSS custom properties cannot be used inside
+   @media rules (spec limitation). Breakpoint
+   values are literals; all other design tokens
+   live in :root.
+   ============================================ */
+
+:root {
+  --sl-bp-cta:        640px;
+  --sl-bp-signin:     768px;
+  --sl-bp-nav:        1278px;
+  --sl-header-z:       100;
+  --sl-overlay-bg:     rgba(0, 0, 0, 0.40);
+  --sl-drawer-bg:      #fff;
+  --sl-drawer-border:  #e9ecef;
+  --sl-drawer-sep:     #f0f2f5;
+  --sl-drawer-shadow:  0 8px 20px rgba(0, 0, 0, 0.1);
+  --sl-submenu-bg:     #f8f9fa;
+  --sl-submenu-accent: #ea319f;
+  --sl-submenu-accent-light: #fdeaf5;
+  --sl-submenu-accent-dark:  #8f165c;
+  --sl-submenu-desc:   #4f5458;
+  --sl-submenu-radius: 8px;
+  --sl-flyout-shadow:  0 10px 30px rgba(0, 0, 0, 0.12);
+}
+
+/* ——— Always-on base rules ——— */
+
+#header .u-header__navbar {
+  padding: 16px;
+}
+
+#header {
+  z-index: var(--sl-header-z);
+}
+
+.sl-page-shell {
+  min-height: 100vh;
+}
+
+.sl-header-sticky {
+  position: sticky;
+  top: 0;
+}
+
+.sl-menu-toggle {
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+}
+
+/* Single source of truth for top-level mega-menu chevrons */
+.sl-navbar .u-header__nav-link-toggle::after {
+  content: '\f078';
+  color: var(--sl-submenu-accent);
+  flex-shrink: 0;
+  font-family: 'Font Awesome 5 Free';
+  font-size: 0.95rem;
+  font-weight: 900;
+  line-height: 1;
+  margin-left: 0.75rem;
+  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.sl-navbar .u-header__nav-link-toggle[aria-expanded="true"]::after {
+  transform: rotate(180deg);
+}
+
+.sl-header-actions {
+  align-items: center;
+  display: flex;
+  gap: 0.5rem;
+}
+
+.sl-header-cta-top,
+.sl-header-signin-top {
+  display: none;
+}
+
+/* =============================================
+   MEGA-MENU PANELS
+   Panels live outside the header in the DOM so
+   they are not trapped in its stacking context.
+   z-index 102 > overlay 101 > header 100.
+   ============================================= */
+
+.sl-mega-panel {
+  background: var(--sl-drawer-bg);
+  border-radius: var(--sl-submenu-radius);
+  box-shadow: var(--sl-flyout-shadow);
+  display: none;
+  overflow: hidden;
+  position: fixed;
+  z-index: 102;
+}
+
+.sl-mega-panel.is-open {
+  display: block;
+}
+
+/* On mobile the panel is moved into the nav drawer by JS;
+   fixed positioning must be reset to flow naturally. */
+@media (max-width: 1277px) {
+  .sl-mega-panel {
+    border-top: 1px solid var(--sl-drawer-border);
+    box-shadow: none;
+    position: static;
+    width: 100%;
+  }
+
+  .sl-mega-panel .u-header__mega-menu-wrapper {
+    padding: 0;
+  }
+
+  .sl-submenu-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .sl-mega-panel .u-header__sub-menu-nav-link {
+    padding: 0.625rem 1.5rem;
+  }
+
+  .sl-submenu-sidebar {
+    display: none;
+  }
+
+  #resourcesMegaMenuContent .row {
+    display: block;
+  }
+
+  #resourcesMegaMenuContent .col-7 {
+    flex: 0 0 100%;
+    max-width: 100%;
+    padding: 0;
+  }
+}
+
+@media (min-width: 1278px) {
+  .sl-mega-panel .u-header__mega-menu-wrapper {
+    padding: 12px;
+  }
+
+  .sl-submenu-grid {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .sl-mega-panel .u-header__sub-menu-nav-link {
+    padding: 0.625rem 0.75rem;
+  }
+
+  .sl-submenu-sidebar {
+    display: block;
+  }
+
+  #resourcesMegaMenuContent .row {
+    display: flex;
+  }
+
+  #resourcesMegaMenuContent .col-7 {
+    flex: 0 0 58.333%;
+    max-width: 58.333%;
+    padding: 1rem;
+  }
+
+  .sl-submenu-main-col {
+    padding: 1rem;
+  }
+
+  .sl-submenu-sidebar {
+    padding: 1rem;
+  }
+}
+
+/* =============================================
+   SUBMENU SHARED STYLES
+   ============================================= */
+
+.sl-submenu-grid {
+  display: grid;
+  gap: 0.25rem;
+  list-style: none;
+}
+
+.sl-mega-panel .u-header__sub-menu-nav-link {
+  align-items: flex-start;
+  display: flex;
+  gap: 0.75rem;
+}
+
+.sl-mega-panel .u-header__sub-menu-nav-link .sl-sumbenu-title {
+  color: var(--sl-submenu-accent-dark);
+}
+
+.sl-mega-panel .u-header__sub-menu-nav-link:hover .sl-sumbenu-title {
+  color: var(--sl-submenu-accent);
+}
+
+.sl-mega-panel .u-header__sub-menu-nav-link:hover,
+.sl-mega-panel .u-header__sub-menu-nav-link:focus {
+  color: var(--sl-submenu-accent);
+}
+
+.sl-submenu-icon {
+  align-items: center;
+  color: var(--sl-submenu-accent);
+  display: flex;
+  font-size: 1rem;
+  justify-content: center;
+  margin-top: 2px;
+  min-width: 20px;
+  width: 20px;
+}
+
+.sl-submenu-desc {
+  color: var(--sl-submenu-desc);
+  display: block;
+  font-size: 0.9rem;
+  font-weight: 400;
+  line-height: 1.4;
+  margin-top: 1px;
+}
+
+.sl-submenu-sidebar {
+  background-color: var(--sl-submenu-bg);
+  border-radius: 0 var(--sl-submenu-radius) var(--sl-submenu-radius) 0;
+}
+
+.sl-submenu-sidebar-title {
+  font-size: 0.7rem;
+  letter-spacing: 0.05em;
+}
+
+/* =============================================
+   MOBILE DRAWER — Full-screen drawer < 1278px
+   ============================================= */
+
+@media (max-width: 1277px) {
+  .sl-navbar .u-header__navbar-nav .sl-nav-pricing {
+    margin-right: 0;
+  }
+
+  #navBar {
+    background: var(--sl-drawer-bg);
+    bottom: 0;
+    display: flex;
+    flex-direction: column;
+    left: 0;
+    opacity: 0;
+    overflow: hidden;
+    pointer-events: none;
+    position: fixed;
+    right: 0;
+    top: 0;
+    transform: translateY(-10px);
+    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
+    visibility: hidden;
+    z-index: 103;
+  }
+
+  #navBar.is-open {
+    opacity: 1;
+    pointer-events: auto;
+    transform: translateY(0);
+    visibility: visible;
+  }
+
+  /* Drawer logo + close row */
+  .sl-drawer-header {
+    align-items: center;
+    background: var(--sl-drawer-bg);
+    border-bottom: 1px solid var(--sl-drawer-border);
+    display: flex;
+    flex-shrink: 0;
+    justify-content: space-between;
+    padding: 1rem 1.5rem;
+    width: 100%;
+  }
+
+  .sl-drawer-close {
+    align-items: center;
+    background: transparent;
+    border: none;
+    border-radius: 8px;
+    color: #4a5568;
+    cursor: pointer;
+    display: flex;
+    font-size: 1.1rem;
+    height: 36px;
+    justify-content: center;
+    padding: 0;
+    transition: background 0.15s ease, color 0.15s ease;
+    width: 36px;
+  }
+
+  .sl-drawer-close:hover {
+    background: var(--sl-drawer-sep);
+    color: #1a202c;
+  }
+
+  /* Overlay for drawer (slightly more opaque) */
+  .sl-nav-overlay {
+    background: rgba(0, 0, 0, 0.50);
+    z-index: 102;
+  }
+
+  .sl-nav-overlay.is-visible {
+    opacity: 1;
+    visibility: visible;
+  }
+
+  /* Nav items: scrollable middle area */
+  .sl-navbar .u-header__navbar-nav {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    gap: 0;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .sl-navbar .u-header__navbar-nav > .u-header__nav-item,
+  .sl-navbar .u-header__navbar-nav > .sl-mega-panel {
+    width: 100%;
+  }
+
+  .sl-navbar .u-header__navbar-nav > .u-header__nav-item {
+    border-bottom: 1px solid var(--sl-drawer-sep);
+    width: 100%;
+  }
+
+  /* Normalize horizontal gutters for Features, Resources and Pricing */
+  .sl-navbar #featuresMegaMenu,
+  .sl-navbar #resourcesMegaMenu,
+  .sl-navbar .u-header__navbar-nav > .u-header__nav-item:nth-child(3) > .u-header__nav-link {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+  }
+
+  /* Nav links with improved spacing */
+  .sl-navbar .u-header__navbar-nav .u-header__nav-link {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+    padding: 1.1rem 1.5rem;
+    width: 100%;
+    font-weight: 500;
+    color: #1a202c;
+    font-size: 1rem;
+    letter-spacing: 0.3px;
+    transition: background-color 0.15s ease;
+  }
+
+  .sl-navbar .u-header__navbar-nav .u-header__nav-link:active,
+  .sl-navbar .u-header__navbar-nav .u-header__nav-link:focus {
+    background-color: #f0f2f5;
+  }
+
+  /* =============================================
+     ACTION BUTTONS SECTION
+     ============================================= */
+
+  /* CTA button — Create free account */
+  .sl-nav-cta {
+    width: 100%;
+    padding: 0.75rem 1.5rem;
+    background: transparent;
+    border: none;
+  }
+
+  .sl-nav-cta .btn {
+    border-radius: 16px;
+    display: block;
+    font-size: 1rem;
+    font-weight: 600;
+    margin: 0;
+    padding: 0.85rem 1.5rem;
+    text-align: center;
+    text-decoration: none;
+    width: 100%;
+  }
+
+  .sl-navbar .u-header__navbar-nav .sl-nav-signin .btn-sign-in {
+    border-radius: 16px;
+    display: block;
+    font-size: 1rem;
+    font-weight: 600;
+    justify-content: center;
+    padding: 0.85rem 1.5rem;
+    text-align: center;
+    text-decoration: none;
+    width: 100%;
+  }
+
+  .sl-nav-cta .btn {
+    background-color: #ea319f;
+    border-color: #ea319f;
+    color: #fff;
+    transition: all 0.2s ease;
+    box-shadow: 0 2px 8px rgba(234, 49, 159, 0.25);
+  }
+
+  .sl-nav-cta .btn:active {
+    color: #fff;
+    transform: scale(0.98);
+  }
+
+  .sl-nav-cta .btn:hover,
+  .sl-nav-cta .btn:focus {
+    color: #fff;
+  }
+
+  /* Sign in button — outline style */
+  .sl-nav-signin {
+    width: 100%;
+    border: 0;
+    padding: 0 1.5rem 0.75rem 1.5rem;
+  }
+
+  .sl-navbar .u-header__navbar-nav .sl-nav-signin .btn-sign-in {
+    border: 2px solid var(--sl-submenu-accent);
+    background-color: #fff;
+    color: var(--sl-submenu-accent);
+  }
+
+  .sl-navbar .u-header__navbar-nav .sl-nav-signin .btn-sign-in:active {
+    background-color: #d1287f;
+    border-color: #d1287f;
+    color: #fff;
+  }
+
+  .sl-navbar .u-header__navbar-nav .sl-nav-signin .btn-sign-in:hover,
+  .sl-navbar .u-header__navbar-nav .sl-nav-signin .btn-sign-in:focus {
+    background-color: #d1287f;
+    border-color: #d1287f;
+    color: #fff;
+    text-decoration: none;
+  }
+
+  /* =============================================
+     DRAWER MENU CONTENT
+     ============================================= */
+
+  /* Mega-menu panels in drawer mode */
+  .sl-mega-panel {
+    border-radius: 0;
+  }
+
+  .sl-mega-panel .u-header__mega-menu-wrapper {
+    padding: 0 1.5rem;
+  }
+
+  /* Features and Resources list items */
+  .sl-mega-panel .u-header__sub-menu-nav-link {
+    padding: 0.875rem 0;
+    gap: 0.875rem;
+  }
+
+  .sl-submenu-desc {
+    display: none; /* Hide descriptions in drawer to save space */
+  }
+
+  .sl-submenu-icon {
+    font-size: 1rem;
+    min-width: 24px;
+    width: 24px;
+  }
+
+  .sl-submenu-sidebar {
+    display: none; /* Hide comparisons sidebar in drawer */
+  }
+
+}
+
+/* Hide mobile-only drawer elements at desktop */
+@media (min-width: 1278px) {
+  .sl-drawer-header {
+    display: none;
+  }
+}
+
+/* 640px+: show top CTA and hide drawer CTA item */
+@media (min-width: 640px) and (max-width: 1277px) {
+  .sl-header-cta-top {
+    align-items: center;
+    display: inline-flex;
+  }
+
+  .sl-nav-cta {
+    display: none;
+  }
+}
+
+/* 768px+: show top Sign in and hide drawer Sign in item */
+@media (min-width: 768px) and (max-width: 1277px) {
+  .sl-header-signin-top {
+    align-items: center;
+    display: inline-flex;
+  }
+
+  .sl-nav-signin {
+    display: none;
+  }
+}
+
+/* =============================================
+   1278px — Full inline nav, no hamburger
+   ============================================= */
+
+@media (min-width: 1278px) {
+  .sl-navbar .navbar-toggler {
+    display: none;
+  }
+
+  /* ID selector (specificity 1,0,0) overrides Bootstrap's
+     .collapse:not(.show) { display: none } */
+  #navBar {
+    display: flex;
+    flex-basis: auto;
+    flex-grow: 1;
+  }
+
+  .sl-navbar .navbar-nav {
+    align-items: center;
+    flex-direction: row;
+  }
+
+  .sl-navbar .navbar-nav .u-header__nav-item > .u-header__nav-link {
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+
+  .sl-navbar .u-header__navbar-nav .sl-nav-pricing {
+    margin-right: auto;
+  }
+
+  .sl-header-actions {
+    display: none;
+  }
+
+  .sl-nav-cta,
+  .sl-nav-signin {
+    display: list-item;
+  }
+
+  .sl-nav-cta .btn {
+    display: inline-block;
+    margin: 0;
+    width: auto;
+  }
+}
+
+/* =============================================
+   NAV OVERLAY
+   z-index 101: above header (100), below panels (102)
+   ============================================= */
+
+.sl-nav-overlay {
+  background: var(--sl-overlay-bg);
+  cursor: pointer;
+  inset: 0;
+  opacity: 0;
+  position: fixed;
+  transition: opacity 0.25s ease, visibility 0.25s ease;
+  visibility: hidden;
+  z-index: 101;
+}
+
+.sl-nav-overlay.is-visible {
+  opacity: 1;
+  visibility: visible;
 }
\ No newline at end of file