src/components/GlossaryMark.tsx

@@ -48,10 +48,11 @@ export default function GlossaryMark({ id, children }: { id: string; children: R
       className="group relative border-b border-dotted border-sky-500/60 hover:border-sky-400 hover:text-sky-300 transition-colors"
     >
       {children}
+      {/* display:none while hidden: an invisible box would still widen the page on phones */}
       <span
         className={`pointer-events-none absolute bottom-full z-20 mb-2 w-64 rounded-lg
                    border border-slate-700 bg-slate-900 p-3 text-left text-xs font-normal normal-case
-                   text-slate-400 opacity-0 shadow-2xl transition-opacity group-hover:opacity-100
+                   text-slate-400 shadow-2xl hidden group-hover:block group-focus-visible:block
                    ${PLACEMENT_CLASS[placement]}`}
       >
         <span className="mb-1 block font-semibold text-slate-200">{name}</span>

src/components/Nav.tsx

@@ -1,12 +1,16 @@
 import { useState, useRef, useEffect, type ReactNode } from 'react'
 import { Link, useLocation } from 'react-router-dom'
-import { ChevronDownIcon } from '@heroicons/react/24/outline'
+import { Bars3Icon, ChevronDownIcon, XMarkIcon } from '@heroicons/react/24/outline'
 import { useLang } from '../context/LangContext'
 import type { Lang } from '../i18n/translations'
 
 const dropdownItemCls =
   'block px-4 py-2 text-sm text-slate-400 hover:text-slate-100 hover:bg-slate-800 transition-colors'
 
+const mobileItemCls =
+  'block rounded-lg px-3 py-2 text-sm text-slate-300 hover:text-slate-100 hover:bg-slate-800 transition-colors'
+const mobileHeadingCls = 'px-3 pt-4 pb-1 text-xs font-semibold uppercase tracking-widest text-slate-500'
+
 function NavDropdown({
   label,
   active,
@@ -57,6 +61,11 @@ function NavDropdown({
 export default function Nav() {
   const location = useLocation()
   const { lang, setLang, t } = useLang()
+  const [menuOpen, setMenuOpen] = useState(false)
+
+  useEffect(() => {
+    setMenuOpen(false)
+  }, [location.pathname])
 
   const linkCls = (path: string) =>
     `text-sm transition-colors ${
@@ -71,7 +80,7 @@ export default function Nav() {
 
   return (
     <nav className="sticky top-0 z-10 bg-slate-900/80 backdrop-blur border-b border-slate-800">
-      <div className="max-w-7xl mx-auto px-6 h-14 flex items-center gap-8">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 h-14 flex items-center gap-8">
         <Link to="/" className="flex items-center gap-2.5 mr-2">
           <img src="/logo.png" alt="" className="h-7 w-7" aria-hidden="true" />
           <span className="font-semibold text-slate-100 tracking-tight">
@@ -79,6 +88,7 @@ export default function Nav() {
           </span>
         </Link>
 
+        <div className="hidden lg:flex items-center gap-8">
         <Link to="/features" className={linkCls('/features')}>
           {t.nav.features}
         </Link>
@@ -126,17 +136,52 @@ export default function Nav() {
         <Link to="/roadmap" className={linkCls('/roadmap')}>
           {t.nav.roadmap}
         </Link>
+        </div>
 
         <div className="ml-auto flex items-center gap-4">
           <LangSwitch lang={lang} setLang={setLang} />
           <Link
             to="/docs/getting-started"
-            className="inline-flex items-center gap-2 px-4 py-1.5 text-sm rounded-lg bg-sky-600 hover:bg-sky-500 text-white font-medium transition-colors"
+            className="hidden sm:inline-flex items-center gap-2 px-4 py-1.5 text-sm rounded-lg bg-sky-600 hover:bg-sky-500 text-white font-medium transition-colors"
+          >
+            {t.nav.getStarted}
+          </Link>
+          <button
+            onClick={() => setMenuOpen((v) => !v)}
+            aria-expanded={menuOpen}
+            aria-label="Menu"
+            className="lg:hidden -mr-1 p-1 text-slate-400 hover:text-slate-100 transition-colors"
+          >
+            {menuOpen ? <XMarkIcon className="h-6 w-6" /> : <Bars3Icon className="h-6 w-6" />}
+          </button>
+        </div>
+      </div>
+
+      {menuOpen && (
+        <div className="lg:hidden border-t border-slate-800 bg-slate-900 max-h-[calc(100vh-3.5rem)] overflow-y-auto">
+          <div className="px-4 py-3">
+            <Link to="/features" className={mobileItemCls}>{t.nav.features}</Link>
+            <Link to="/drivers" className={mobileItemCls}>{t.nav.drivers}</Link>
+            <Link to="/plugins" className={mobileItemCls}>{t.nav.plugins}</Link>
+            <Link to="/roadmap" className={mobileItemCls}>{t.nav.roadmap}</Link>
+            <p className={mobileHeadingCls}>{t.nav.docs}</p>
+            <Link to="/docs/getting-started" className={mobileItemCls}>{t.nav.docsItems.gettingStarted}</Link>
+            <Link to="/docs/architecture" className={mobileItemCls}>{t.nav.docsItems.architecture}</Link>
+            <Link to="/nis2" className={mobileItemCls}>{t.nav.docsItems.nis2}</Link>
+            <Link to="/glossary" className={mobileItemCls}>{t.nav.docsItems.glossary}</Link>
+            <p className={mobileHeadingCls}>{t.nav.forWhom}</p>
+            <Link to="/for/it-department" className={mobileItemCls}>{t.nav.forItems.itDepartment}</Link>
+            <Link to="/for/it-support" className={mobileItemCls}>{t.nav.forItems.itSupport}</Link>
+            <Link to="/for/msp" className={mobileItemCls}>{t.nav.forItems.msp}</Link>
+            <Link
+              to="/docs/getting-started"
+              className="sm:hidden mt-4 flex justify-center px-4 py-2 text-sm rounded-lg bg-sky-600 hover:bg-sky-500 text-white font-medium transition-colors"
             >
               {t.nav.getStarted}
             </Link>
           </div>
         </div>
+      )}
     </nav>
   )
 }

src/pages/ForItDepartment.tsx

@@ -62,7 +62,7 @@ export default function ForItDepartment() {
           <div className="mb-4 flex h-10 w-10 items-center justify-center rounded-lg bg-sky-600/10">
             <ServerStackIcon className="h-5 w-5 text-sky-400" />
           </div>
-          <h1 className="text-4xl md:text-5xl font-bold text-slate-100 mb-4">{t.forItDepartment.heading}</h1>
+          <h1 className="text-3xl sm:text-4xl md:text-5xl font-bold text-slate-100 mb-4">{t.forItDepartment.heading}</h1>
           <p className="text-base text-slate-400 leading-relaxed max-w-2xl">{linkify(t.forItDepartment.sub)}</p>
         </div>
 

src/pages/ForItSupport.tsx

@@ -62,7 +62,7 @@ export default function ForItSupport() {
           <div className="mb-4 flex h-10 w-10 items-center justify-center rounded-lg bg-sky-600/10">
             <LifebuoyIcon className="h-5 w-5 text-sky-400" />
           </div>
-          <h1 className="text-4xl md:text-5xl font-bold text-slate-100 mb-4">{t.forItSupport.heading}</h1>
+          <h1 className="text-3xl sm:text-4xl md:text-5xl font-bold text-slate-100 mb-4">{t.forItSupport.heading}</h1>
           <p className="text-base text-slate-400 leading-relaxed max-w-2xl">{linkify(t.forItSupport.sub)}</p>
         </div>
 

src/pages/ForMsp.tsx

@@ -62,7 +62,7 @@ export default function ForMsp() {
           <div className="mb-4 flex h-10 w-10 items-center justify-center rounded-lg bg-sky-600/10">
             <BuildingOffice2Icon className="h-5 w-5 text-sky-400" />
           </div>
-          <h1 className="text-4xl md:text-5xl font-bold text-slate-100 mb-4">{t.forMsp.heading}</h1>
+          <h1 className="text-3xl sm:text-4xl md:text-5xl font-bold text-slate-100 mb-4">{t.forMsp.heading}</h1>
           <p className="text-base text-slate-400 leading-relaxed max-w-2xl">{linkify(t.forMsp.sub)}</p>
         </div>
 

src/pages/GettingStarted.tsx

@@ -9,7 +9,7 @@ export default function GettingStarted() {
     <div className="py-24 md:py-40">
       <div className="max-w-2xl mx-auto px-6 text-center">
         <p className="text-sm font-medium text-sky-400 mb-4 font-mono">{t.gettingStarted.label}</p>
-        <h1 className="text-4xl md:text-5xl font-bold text-slate-100 leading-tight mb-6 whitespace-pre-line">
+        <h1 className="text-3xl sm:text-4xl md:text-5xl font-bold text-slate-100 leading-tight mb-6 whitespace-pre-line">
           {t.gettingStarted.heading}
         </h1>
         <p className="text-base text-slate-400 leading-relaxed mb-10">

src/pages/Roadmap.tsx

@@ -187,9 +187,9 @@ export default function Roadmap() {
         <div className="mb-12">
           <h1 className="text-4xl md:text-5xl font-bold text-slate-100 mb-4">{t.roadmap.heading}</h1>
           <p className="text-base text-slate-400 leading-relaxed max-w-xl">
-            {t.roadmap.sub.split('NIS2')[0]}
+            {t.roadmap.sub.slice(0, t.roadmap.sub.indexOf('NIS2'))}
             <Nis2Badge />
-            {t.roadmap.sub.split('NIS2')[1]}
+            {t.roadmap.sub.slice(t.roadmap.sub.indexOf('NIS2') + 'NIS2'.length)}
           </p>
         </div>