diff --git a/i18n/en.yaml b/i18n/en.yaml
index d15ad8c..0d83123 100644
--- a/i18n/en.yaml
+++ b/i18n/en.yaml
@@ -1,10 +1,36 @@
 # 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
+hero_highlight_word: anonymously
 
 # script
 seo_script_product: >
@@ -17,12 +43,17 @@ seo_script_howto: >
   </script>
 
 hero_desc: >
-  With  <em data-toggle="tooltip" data-html="true"
-  title="An email alias (or alias for short) is an email address that <b>doesn't store</b> emails: all emails sent to an alias are forwarded to your personal email.">email aliases</em>, you can be anonymous online and protect your inbox
-  against spams and phishing.
-  <a href="https://github.com/simple-login/">Open source</a>. Based in Switzerland.
+  With <em data-toggle="tooltip" data-html="true"
+  title="An email alias (or alias for short) is an email address that <b>doesn't store</b> emails: all emails sent to an alias are forwarded to your personal email.">email aliases</em>, you can stay anonymous online and protect your inbox
+  against spam and phishing.
+  <a href="https://github.com/simple-login/" target="_blank" rel="noopener noreferrer">Open source</a>. Based in Switzerland.
 
-hero_cta: Get your aliases for free >>
+
+hero_cta: Get your aliases for free
+hero_cta_secondary: How it works
+
+hero_stat_value: 1,000,000+
+hero_stat_label: happy users
 
 hero_button_underline: <b>1,000,000+</b> happy users
 
diff --git a/layouts/index.html b/layouts/index.html
index 10e720a..87e932d 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -11,54 +11,55 @@
 <main id="content" role="main">
   <div class="bg-white">
     <!-- Hero Section -->
-    <div class="container mb-3">
-      <div class="row justify-content-lg-between mb-1">
-
-        <!-- Hero text & CTA-->
-        <div class="col-lg-6 mb-1 mb-lg-0 space-top-3">
-
-          <div class="mb-5">
-
-
-            <h1 class="h4 font-weight-semi-bold mb-2" style="color: #ea319f">
-              {{ i18n "hero" }}
+    <section class="container sl-hero-section">
+      <div class="row align-items-lg-center justify-content-lg-between">
+
+        <!-- Hero text & CTA -->
+        <div class="col-lg-6 sl-hero-copy-col">
+          <div class="sl-hero-copy-wrap">
+            <h1 class="sl-hero-headline mb-3">
+              {{ replace (i18n "hero") (i18n "hero_highlight_word") (print "<span class=\"sl-hero-headline-highlight\">" (i18n "hero_highlight_word") "</span>") | safeHTML }}
             </h1>
 
             <div>
               {{ i18n "seo_script_product" | safeHTML }}
             </div>
 
-            <p class="mb-2">
+            <p class="sl-hero-description mb-2">
               {{ i18n "hero_desc" | safeHTML }}
             </p>
 
-          </div>
-
-          <div class="mb-3">
-            <a href="https://app.simplelogin.io/auth/register" class="btn btn-primary btn-wide transition-3d-hover mb-2 mb-sm-0 mr-3">
-              <span style="font-weight: 400;">
+            <div class="sl-hero-cta-row d-flex flex-wrap align-items-center mt-4">
+              <a href="https://app.simplelogin.io/auth/register"
+                 class="btn sl-hero-btn sl-hero-btn-primary rounded-pill">
                 {{ i18n "hero_cta" }}
-              </span>
-            </a>
-          </div>
+              </a>
+              <a href="#how-it-works"
+                 class="btn sl-hero-btn sl-hero-btn-secondary rounded-pill">
+                {{ i18n "hero_cta_secondary" }}
+              </a>
+            </div>
 
-          <div class="mt-2 d-flex" style="height: 18px">
-            <img src="/images/5-stars.svg" style="max-width: 100px;" alt="Five stars">
-            <span class="text-secondary ml-2 align-center" style="font-size: 12px; font-weight: 400">
-              {{ i18n "hero_button_underline" | safeHTML }}
-            </span>
+            <div class="sl-hero-social-proof d-flex align-items-center mt-4">
+              <img src="/images/5-stars.svg" class="sl-hero-stars" alt="" aria-hidden="true">
+              <div class="sl-hero-stat">
+                <div class="sl-hero-stat-value">{{ i18n "hero_stat_value" }}</div>
+                <div class="sl-hero-stat-label">{{ i18n "hero_stat_label" }}</div>
+              </div>
+            </div>
           </div>
-
         </div>
         <!-- End Hero text & CTA -->
 
-        <div class="col-lg-6 mt-3">
-          <!-- SVG Illustration -->
-          <img src="/images/hero.svg" class="w-100" alt="Hero Image - Different email address for each website">
+        <div class="col-lg-6 d-none d-md-block sl-hero-media-col">
+          <div class="sl-hero-illustration-bg">
+            <div class="sl-hero-illustration-card">
+              <img src="/images/hero.svg" class="w-100 sl-hero-illustration" alt="" aria-hidden="true">
+            </div>
+          </div>
         </div>
       </div>
-
-    </div>
+    </section>
   </div>
   <!-- End Hero Section -->
 
@@ -150,7 +151,7 @@ <h2 class="u-divider u-divider--text" style="font-weight: 500">{{ i18n "seen_on"
   <!-- End SVG Top Shape -->
 
   <!-- How it works Section -->
-  <div class="bg-light" style="min-height: 50vh;">
+  <div id="how-it-works" class="bg-light" style="min-height: 50vh;">
     <div class="container space-md-1 pt-4 pb-7">
       <!-- Title -->
       <div class="w-md-80 w-lg-70 text-center mx-md-auto mb-2 py-5">
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..05531be 100644
--- a/static/custom.css
+++ b/static/custom.css
@@ -150,5 +150,836 @@ 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: var(--sl-drawer-bg);
+    transition: background-color 0.2s ease, border-color 0.2s ease;
+}
+
+header .btn-create-free-account:hover {
+    background-color: var(--sl-submenu-accent-hover);
+    border-color: var(--sl-submenu-accent-hover);
+  color: var(--sl-drawer-bg);
+}
+
+header .btn-create-free-account:focus,
+header .btn-create-free-account:active {
+  color: var(--sl-drawer-bg);
+}
+
+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: var(--sl-submenu-accent-hover);
+  border-color: var(--sl-submenu-accent-hover);
+  color: var(--sl-drawer-bg);
+  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: var(--sl-drawer-bg);
+}
+
+
+/* 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-hover: #d1287f;
+  --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);
+
+  --sl-hero-bg: #fff;
+  --sl-hero-ink: #1a1a2e;
+  --sl-hero-body: #2d3748;
+  --sl-hero-muted: #6c7480;
+  --sl-hero-surface: #f8f9fb;
+  --sl-hero-border-soft: rgba(26, 32, 44, 0.08);
+  --sl-hero-shadow-accent: 0 8px 24px rgba(234, 49, 159, 0.28);
+  --sl-hero-shadow-accent-hover: 0 12px 28px rgba(234, 49, 159, 0.34);
+  --sl-hero-shadow-secondary: 0 12px 24px rgba(26, 26, 46, 0.12);
+  --sl-hero-shadow-soft: 0 24px 48px rgba(17, 22, 34, 0.10);
+}
+
+/* ——— 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.75rem 1.5rem;
+    text-align: center;
+    text-decoration: none;
+    width: 100%;
+  }
+
+  .sl-nav-cta .btn {
+    background-color: var(--sl-submenu-accent);
+    border-color: var(--sl-submenu-accent);
+    color: var(--sl-drawer-bg);
+    transition: all 0.2s ease;
+    box-shadow: 0 2px 8px rgba(234, 49, 159, 0.25);
+  }
+
+  .sl-nav-cta .btn:active {
+    color: var(--sl-drawer-bg);
+    transform: scale(0.98);
+  }
+
+  .sl-nav-cta .btn:hover,
+  .sl-nav-cta .btn:focus {
+    color: var(--sl-drawer-bg);
+  }
+
+  /* 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: var(--sl-drawer-bg);
+    color: var(--sl-submenu-accent);
+  }
+
+  .sl-navbar .u-header__navbar-nav .sl-nav-signin .btn-sign-in:active {
+    background-color: var(--sl-submenu-accent-hover);
+    border-color: var(--sl-submenu-accent-hover);
+    color: var(--sl-drawer-bg);
+  }
+
+  .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: var(--sl-submenu-accent-hover);
+    border-color: var(--sl-submenu-accent-hover);
+    color: var(--sl-drawer-bg);
+    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;
+}
+
+/* =========================================================
+  HERO V2
+  ========================================================= */
+
+.sl-hero-section {
+  background: var(--sl-hero-bg);
+  padding-bottom: 2rem;
+  padding-top: 5rem;
+}
+
+.sl-hero-copy-col {
+  align-items: center;
+  display: flex;
+}
+
+.sl-hero-copy-wrap {
+  max-width: 38rem;
+}
+
+.sl-hero-headline {
+  color: var(--sl-hero-ink);
+  font-size: clamp(2.5rem, 5.2vw, 3.5rem);
+  font-weight: 800;
+  letter-spacing: -0.03em;
+  line-height: 1.1;
+  margin-bottom: 1rem;
+}
+
+.sl-hero-headline-highlight {
+  color: var(--sl-submenu-accent);
+}
+
+.sl-hero-description {
+  color: var(--sl-hero-body);
+  font-size: 1rem;
+  line-height: 1.7;
+  margin-bottom: 0.75rem;
+}
+
+.sl-hero-cta-row {
+  gap: 0.75rem;
+}
+
+.sl-hero-btn {
+  align-items: center;
+  display: inline-flex;
+  font-size: 1rem;
+  font-weight: 600;
+  gap: 0.5rem;
+  justify-content: center;
+  min-height: 44px;
+  min-width: 210px;
+  padding: 0.75rem 1.5rem;
+  transition: transform 0.2s ease,
+    box-shadow 0.2s ease,
+    background-color 0.2s ease,
+    color 0.2s ease,
+    border-color 0.2s ease;
+}
+
+.sl-hero-btn-primary {
+  background: var(--sl-submenu-accent-hover);
+  border: 1px solid var(--sl-submenu-accent-hover);
+  box-shadow: var(--sl-hero-shadow-accent);
+  color: var(--sl-hero-bg);
+}
+
+.sl-hero-btn-primary:hover,
+.sl-hero-btn-primary:focus {
+  background: var(--sl-submenu-accent-dark);
+  border-color: var(--sl-submenu-accent-dark);
+  box-shadow: var(--sl-hero-shadow-accent-hover);
+  color: var(--sl-hero-bg);
+  transform: translateY(-1px);
+}
+
+.sl-hero-btn:focus-visible {
+  outline: 2px solid var(--sl-hero-ink);
+  outline-offset: 2px;
+}
+
+.sl-hero-btn-secondary {
+  background: transparent;
+  border: 1px solid var(--sl-hero-ink);
+  color: var(--sl-hero-ink);
+}
+
+.sl-hero-btn-secondary:hover,
+.sl-hero-btn-secondary:focus {
+  background: var(--sl-hero-surface);
+  border-color: var(--sl-hero-ink);
+  box-shadow: var(--sl-hero-shadow-secondary);
+  color: var(--sl-hero-ink);
+  transform: translateY(-1px);
+}
+
+.sl-hero-social-proof {
+  gap: 1rem;
+  margin-top: 2rem;
+}
+
+.sl-hero-stars {
+  height: auto;
+  width: 112px;
+}
+
+.sl-hero-stat {
+  display: flex;
+  flex-direction: column;
+  line-height: 1.1;
+}
+
+.sl-hero-stat-value {
+  color: var(--sl-submenu-accent);
+  font-size: clamp(2rem, 4vw, 2.25rem);
+  font-weight: 800;
+}
+
+.sl-hero-stat-label {
+  color: var(--sl-hero-muted);
+  font-size: 0.75rem;
+  letter-spacing: 0.02em;
+  margin-top: 0.25rem;
+  text-transform: uppercase;
+}
+
+.sl-hero-media-col {
+  display: flex;
+  justify-content: center;
+}
+
+.sl-hero-illustration-bg {
+  background: linear-gradient(145deg, var(--sl-submenu-accent-light) 0%, var(--sl-hero-surface) 100%);
+  border-radius: 16px;
+  padding: 1rem;
+  width: 100%;
+}
+
+.sl-hero-illustration-card {
+  background: var(--sl-hero-bg);
+  border-radius: 16px;
+  border: 1px solid var(--sl-hero-border-soft);
+  box-shadow: var(--sl-hero-shadow-soft);
+  overflow: hidden;
+  padding: 0.75rem;
+}
+
+.sl-hero-illustration {
+  border-radius: 12px;
+  display: block;
+}
+
+@media (max-width: 991px) {
+  .sl-hero-section {
+    padding-bottom: 1rem;
+    padding-top: 3rem;
+  }
+
+  .sl-hero-btn {
+    width: 100%;
+  }
 }
\ No newline at end of file