diff --git a/web/fonts/cormorant-garamond-300-normal-cyrillic-ext.woff2 b/web/fonts/cormorant-garamond-300-normal-cyrillic-ext.woff2
deleted file mode 100644
index c56f179..0000000
Binary files a/web/fonts/cormorant-garamond-300-normal-cyrillic-ext.woff2 and /dev/null differ
diff --git a/web/fonts/cormorant-garamond-300-normal-cyrillic.woff2 b/web/fonts/cormorant-garamond-300-normal-cyrillic.woff2
deleted file mode 100644
index 20114e2..0000000
Binary files a/web/fonts/cormorant-garamond-300-normal-cyrillic.woff2 and /dev/null differ
diff --git a/web/fonts/cormorant-garamond-300-normal-latin-ext.woff2 b/web/fonts/cormorant-garamond-300-normal-latin-ext.woff2
deleted file mode 100644
index e90a82d..0000000
Binary files a/web/fonts/cormorant-garamond-300-normal-latin-ext.woff2 and /dev/null differ
diff --git a/web/fonts/cormorant-garamond-300-normal-latin.woff2 b/web/fonts/cormorant-garamond-300-normal-latin.woff2
deleted file mode 100644
index a1828a8..0000000
Binary files a/web/fonts/cormorant-garamond-300-normal-latin.woff2 and /dev/null differ
diff --git a/web/fonts/cormorant-garamond-300-normal-vietnamese.woff2 b/web/fonts/cormorant-garamond-300-normal-vietnamese.woff2
deleted file mode 100644
index 5c747e5..0000000
Binary files a/web/fonts/cormorant-garamond-300-normal-vietnamese.woff2 and /dev/null differ
diff --git a/web/fonts/cormorant-garamond-400-italic-cyrillic-ext.woff2 b/web/fonts/cormorant-garamond-400-italic-cyrillic-ext.woff2
deleted file mode 100644
index df8f2b7..0000000
Binary files a/web/fonts/cormorant-garamond-400-italic-cyrillic-ext.woff2 and /dev/null differ
diff --git a/web/fonts/cormorant-garamond-400-italic-cyrillic.woff2 b/web/fonts/cormorant-garamond-400-italic-cyrillic.woff2
deleted file mode 100644
index 5125407..0000000
Binary files a/web/fonts/cormorant-garamond-400-italic-cyrillic.woff2 and /dev/null differ
diff --git a/web/fonts/cormorant-garamond-400-italic-latin-ext.woff2 b/web/fonts/cormorant-garamond-400-italic-latin-ext.woff2
deleted file mode 100644
index 17d3772..0000000
Binary files a/web/fonts/cormorant-garamond-400-italic-latin-ext.woff2 and /dev/null differ
diff --git a/web/fonts/cormorant-garamond-400-italic-latin.woff2 b/web/fonts/cormorant-garamond-400-italic-latin.woff2
deleted file mode 100644
index d927264..0000000
Binary files a/web/fonts/cormorant-garamond-400-italic-latin.woff2 and /dev/null differ
diff --git a/web/fonts/cormorant-garamond-400-italic-vietnamese.woff2 b/web/fonts/cormorant-garamond-400-italic-vietnamese.woff2
deleted file mode 100644
index efeeada..0000000
Binary files a/web/fonts/cormorant-garamond-400-italic-vietnamese.woff2 and /dev/null differ
diff --git a/web/fonts/dm-sans-300-italic-latin-ext.woff2 b/web/fonts/dm-sans-300-italic-latin-ext.woff2
deleted file mode 100644
index 0a578c0..0000000
Binary files a/web/fonts/dm-sans-300-italic-latin-ext.woff2 and /dev/null differ
diff --git a/web/fonts/dm-sans-300-italic-latin.woff2 b/web/fonts/dm-sans-300-italic-latin.woff2
deleted file mode 100644
index c12ab0d..0000000
Binary files a/web/fonts/dm-sans-300-italic-latin.woff2 and /dev/null differ
diff --git a/web/fonts/dm-sans-300-normal-latin-ext.woff2 b/web/fonts/dm-sans-300-normal-latin-ext.woff2
deleted file mode 100644
index 6e84cba..0000000
Binary files a/web/fonts/dm-sans-300-normal-latin-ext.woff2 and /dev/null differ
diff --git a/web/fonts/dm-sans-300-normal-latin.woff2 b/web/fonts/dm-sans-300-normal-latin.woff2
deleted file mode 100644
index c75f7bf..0000000
Binary files a/web/fonts/dm-sans-300-normal-latin.woff2 and /dev/null differ
diff --git a/web/fonts/fonts_v6.css b/web/fonts/fonts.css
similarity index 100%
rename from web/fonts/fonts_v6.css
rename to web/fonts/fonts.css
diff --git a/web/fonts/fonts_index.css b/web/fonts/fonts_index.css
deleted file mode 100644
index e3ce263..0000000
--- a/web/fonts/fonts_index.css
+++ /dev/null
@@ -1,144 +0,0 @@
-/* latin-ext */
-@font-face {
-  font-family: 'DM Sans';
-  font-style: italic;
-  font-weight: 300;
-  font-display: swap;
-  src: url('dm-sans-300-italic-latin-ext.woff2') format('woff2');
-  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'DM Sans';
-  font-style: italic;
-  font-weight: 300;
-  font-display: swap;
-  src: url('dm-sans-300-italic-latin.woff2') format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'DM Sans';
-  font-style: italic;
-  font-weight: 400;
-  font-display: swap;
-  src: url('dm-sans-300-italic-latin-ext.woff2') format('woff2');
-  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'DM Sans';
-  font-style: italic;
-  font-weight: 400;
-  font-display: swap;
-  src: url('dm-sans-300-italic-latin.woff2') format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'DM Sans';
-  font-style: normal;
-  font-weight: 300;
-  font-display: swap;
-  src: url('dm-sans-300-normal-latin-ext.woff2') format('woff2');
-  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'DM Sans';
-  font-style: normal;
-  font-weight: 300;
-  font-display: swap;
-  src: url('dm-sans-300-normal-latin.woff2') format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'DM Sans';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url('dm-sans-300-normal-latin-ext.woff2') format('woff2');
-  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'DM Sans';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url('dm-sans-300-normal-latin.woff2') format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'DM Sans';
-  font-style: normal;
-  font-weight: 500;
-  font-display: swap;
-  src: url('dm-sans-300-normal-latin-ext.woff2') format('woff2');
-  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'DM Sans';
-  font-style: normal;
-  font-weight: 500;
-  font-display: swap;
-  src: url('dm-sans-300-normal-latin.woff2') format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'DM Sans';
-  font-style: normal;
-  font-weight: 600;
-  font-display: swap;
-  src: url('dm-sans-300-normal-latin-ext.woff2') format('woff2');
-  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'DM Sans';
-  font-style: normal;
-  font-weight: 600;
-  font-display: swap;
-  src: url('dm-sans-300-normal-latin.woff2') format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Instrument Serif';
-  font-style: italic;
-  font-weight: 400;
-  font-display: swap;
-  src: url('instrument-serif-400-italic-latin-ext.woff2') format('woff2');
-  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Instrument Serif';
-  font-style: italic;
-  font-weight: 400;
-  font-display: swap;
-  src: url('instrument-serif-400-italic-latin.woff2') format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Instrument Serif';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url('instrument-serif-400-normal-latin-ext.woff2') format('woff2');
-  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Instrument Serif';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url('instrument-serif-400-normal-latin.woff2') format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
diff --git a/web/fonts/fonts_v2.css b/web/fonts/fonts_v2.css
deleted file mode 100644
index add4856..0000000
--- a/web/fonts/fonts_v2.css
+++ /dev/null
@@ -1,108 +0,0 @@
-/* vietnamese */
-@font-face {
-  font-family: 'Space Mono';
-  font-style: italic;
-  font-weight: 400;
-  font-display: swap;
-  src: url('space-mono-400-italic-vietnamese.woff2') format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Space Mono';
-  font-style: italic;
-  font-weight: 400;
-  font-display: swap;
-  src: url('space-mono-400-italic-latin-ext.woff2') format('woff2');
-  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Space Mono';
-  font-style: italic;
-  font-weight: 400;
-  font-display: swap;
-  src: url('space-mono-400-italic-latin.woff2') format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-/* vietnamese */
-@font-face {
-  font-family: 'Space Mono';
-  font-style: italic;
-  font-weight: 700;
-  font-display: swap;
-  src: url('space-mono-700-italic-vietnamese.woff2') format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Space Mono';
-  font-style: italic;
-  font-weight: 700;
-  font-display: swap;
-  src: url('space-mono-700-italic-latin-ext.woff2') format('woff2');
-  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Space Mono';
-  font-style: italic;
-  font-weight: 700;
-  font-display: swap;
-  src: url('space-mono-700-italic-latin.woff2') format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-/* vietnamese */
-@font-face {
-  font-family: 'Space Mono';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url('space-mono-400-normal-vietnamese.woff2') format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Space Mono';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url('space-mono-400-normal-latin-ext.woff2') format('woff2');
-  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Space Mono';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url('space-mono-400-normal-latin.woff2') format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-/* vietnamese */
-@font-face {
-  font-family: 'Space Mono';
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-  src: url('space-mono-700-normal-vietnamese.woff2') format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Space Mono';
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-  src: url('space-mono-700-normal-latin-ext.woff2') format('woff2');
-  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Space Mono';
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-  src: url('space-mono-700-normal-latin.woff2') format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
diff --git a/web/fonts/fonts_v3.css b/web/fonts/fonts_v3.css
deleted file mode 100644
index 29d5593..0000000
--- a/web/fonts/fonts_v3.css
+++ /dev/null
@@ -1,36 +0,0 @@
-/* latin */
-@font-face {
-  font-family: 'Share Tech Mono';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url('share-tech-mono-400-normal-latin.woff2') format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-/* vietnamese */
-@font-face {
-  font-family: 'VT323';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url('vt323-400-normal-vietnamese.woff2') format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'VT323';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url('vt323-400-normal-latin-ext.woff2') format('woff2');
-  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'VT323';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url('vt323-400-normal-latin.woff2') format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
diff --git a/web/fonts/fonts_v4.css b/web/fonts/fonts_v4.css
deleted file mode 100644
index da8804f..0000000
--- a/web/fonts/fonts_v4.css
+++ /dev/null
@@ -1,405 +0,0 @@
-/* vietnamese */
-@font-face {
-  font-family: 'Fraunces';
-  font-style: italic;
-  font-weight: 400;
-  font-display: swap;
-  src: url('fraunces-400-italic-vietnamese.woff2') format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Fraunces';
-  font-style: italic;
-  font-weight: 400;
-  font-display: swap;
-  src: url('fraunces-400-italic-latin-ext.woff2') format('woff2');
-  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Fraunces';
-  font-style: italic;
-  font-weight: 400;
-  font-display: swap;
-  src: url('fraunces-400-italic-latin.woff2') format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-/* vietnamese */
-@font-face {
-  font-family: 'Fraunces';
-  font-style: italic;
-  font-weight: 500;
-  font-display: swap;
-  src: url('fraunces-400-italic-vietnamese.woff2') format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Fraunces';
-  font-style: italic;
-  font-weight: 500;
-  font-display: swap;
-  src: url('fraunces-400-italic-latin-ext.woff2') format('woff2');
-  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Fraunces';
-  font-style: italic;
-  font-weight: 500;
-  font-display: swap;
-  src: url('fraunces-400-italic-latin.woff2') format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-/* vietnamese */
-@font-face {
-  font-family: 'Fraunces';
-  font-style: normal;
-  font-weight: 300;
-  font-display: swap;
-  src: url('fraunces-300-normal-vietnamese.woff2') format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Fraunces';
-  font-style: normal;
-  font-weight: 300;
-  font-display: swap;
-  src: url('fraunces-300-normal-latin-ext.woff2') format('woff2');
-  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Fraunces';
-  font-style: normal;
-  font-weight: 300;
-  font-display: swap;
-  src: url('fraunces-300-normal-latin.woff2') format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-/* vietnamese */
-@font-face {
-  font-family: 'Fraunces';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url('fraunces-300-normal-vietnamese.woff2') format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Fraunces';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url('fraunces-300-normal-latin-ext.woff2') format('woff2');
-  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Fraunces';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url('fraunces-300-normal-latin.woff2') format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-/* vietnamese */
-@font-face {
-  font-family: 'Fraunces';
-  font-style: normal;
-  font-weight: 500;
-  font-display: swap;
-  src: url('fraunces-300-normal-vietnamese.woff2') format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Fraunces';
-  font-style: normal;
-  font-weight: 500;
-  font-display: swap;
-  src: url('fraunces-300-normal-latin-ext.woff2') format('woff2');
-  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Fraunces';
-  font-style: normal;
-  font-weight: 500;
-  font-display: swap;
-  src: url('fraunces-300-normal-latin.woff2') format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-/* vietnamese */
-@font-face {
-  font-family: 'Fraunces';
-  font-style: normal;
-  font-weight: 600;
-  font-display: swap;
-  src: url('fraunces-300-normal-vietnamese.woff2') format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Fraunces';
-  font-style: normal;
-  font-weight: 600;
-  font-display: swap;
-  src: url('fraunces-300-normal-latin-ext.woff2') format('woff2');
-  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Fraunces';
-  font-style: normal;
-  font-weight: 600;
-  font-display: swap;
-  src: url('fraunces-300-normal-latin.woff2') format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-/* vietnamese */
-@font-face {
-  font-family: 'Fraunces';
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-  src: url('fraunces-300-normal-vietnamese.woff2') format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Fraunces';
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-  src: url('fraunces-300-normal-latin-ext.woff2') format('woff2');
-  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Fraunces';
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-  src: url('fraunces-300-normal-latin.woff2') format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-/* cyrillic-ext */
-@font-face {
-  font-family: 'Plus Jakarta Sans';
-  font-style: italic;
-  font-weight: 400;
-  font-display: swap;
-  src: url('plus-jakarta-sans-400-italic-cyrillic-ext.woff2') format('woff2');
-  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
-}
-/* vietnamese */
-@font-face {
-  font-family: 'Plus Jakarta Sans';
-  font-style: italic;
-  font-weight: 400;
-  font-display: swap;
-  src: url('plus-jakarta-sans-400-italic-vietnamese.woff2') format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Plus Jakarta Sans';
-  font-style: italic;
-  font-weight: 400;
-  font-display: swap;
-  src: url('plus-jakarta-sans-400-italic-latin-ext.woff2') format('woff2');
-  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Plus Jakarta Sans';
-  font-style: italic;
-  font-weight: 400;
-  font-display: swap;
-  src: url('plus-jakarta-sans-400-italic-latin.woff2') format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-/* cyrillic-ext */
-@font-face {
-  font-family: 'Plus Jakarta Sans';
-  font-style: normal;
-  font-weight: 300;
-  font-display: swap;
-  src: url('plus-jakarta-sans-300-normal-cyrillic-ext.woff2') format('woff2');
-  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
-}
-/* vietnamese */
-@font-face {
-  font-family: 'Plus Jakarta Sans';
-  font-style: normal;
-  font-weight: 300;
-  font-display: swap;
-  src: url('plus-jakarta-sans-300-normal-vietnamese.woff2') format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Plus Jakarta Sans';
-  font-style: normal;
-  font-weight: 300;
-  font-display: swap;
-  src: url('plus-jakarta-sans-300-normal-latin-ext.woff2') format('woff2');
-  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Plus Jakarta Sans';
-  font-style: normal;
-  font-weight: 300;
-  font-display: swap;
-  src: url('plus-jakarta-sans-300-normal-latin.woff2') format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-/* cyrillic-ext */
-@font-face {
-  font-family: 'Plus Jakarta Sans';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url('plus-jakarta-sans-300-normal-cyrillic-ext.woff2') format('woff2');
-  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
-}
-/* vietnamese */
-@font-face {
-  font-family: 'Plus Jakarta Sans';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url('plus-jakarta-sans-300-normal-vietnamese.woff2') format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Plus Jakarta Sans';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url('plus-jakarta-sans-300-normal-latin-ext.woff2') format('woff2');
-  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Plus Jakarta Sans';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url('plus-jakarta-sans-300-normal-latin.woff2') format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-/* cyrillic-ext */
-@font-face {
-  font-family: 'Plus Jakarta Sans';
-  font-style: normal;
-  font-weight: 500;
-  font-display: swap;
-  src: url('plus-jakarta-sans-300-normal-cyrillic-ext.woff2') format('woff2');
-  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
-}
-/* vietnamese */
-@font-face {
-  font-family: 'Plus Jakarta Sans';
-  font-style: normal;
-  font-weight: 500;
-  font-display: swap;
-  src: url('plus-jakarta-sans-300-normal-vietnamese.woff2') format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Plus Jakarta Sans';
-  font-style: normal;
-  font-weight: 500;
-  font-display: swap;
-  src: url('plus-jakarta-sans-300-normal-latin-ext.woff2') format('woff2');
-  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Plus Jakarta Sans';
-  font-style: normal;
-  font-weight: 500;
-  font-display: swap;
-  src: url('plus-jakarta-sans-300-normal-latin.woff2') format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-/* cyrillic-ext */
-@font-face {
-  font-family: 'Plus Jakarta Sans';
-  font-style: normal;
-  font-weight: 600;
-  font-display: swap;
-  src: url('plus-jakarta-sans-300-normal-cyrillic-ext.woff2') format('woff2');
-  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
-}
-/* vietnamese */
-@font-face {
-  font-family: 'Plus Jakarta Sans';
-  font-style: normal;
-  font-weight: 600;
-  font-display: swap;
-  src: url('plus-jakarta-sans-300-normal-vietnamese.woff2') format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Plus Jakarta Sans';
-  font-style: normal;
-  font-weight: 600;
-  font-display: swap;
-  src: url('plus-jakarta-sans-300-normal-latin-ext.woff2') format('woff2');
-  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Plus Jakarta Sans';
-  font-style: normal;
-  font-weight: 600;
-  font-display: swap;
-  src: url('plus-jakarta-sans-300-normal-latin.woff2') format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-/* cyrillic-ext */
-@font-face {
-  font-family: 'Plus Jakarta Sans';
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-  src: url('plus-jakarta-sans-300-normal-cyrillic-ext.woff2') format('woff2');
-  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
-}
-/* vietnamese */
-@font-face {
-  font-family: 'Plus Jakarta Sans';
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-  src: url('plus-jakarta-sans-300-normal-vietnamese.woff2') format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Plus Jakarta Sans';
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-  src: url('plus-jakarta-sans-300-normal-latin-ext.woff2') format('woff2');
-  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Plus Jakarta Sans';
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-  src: url('plus-jakarta-sans-300-normal-latin.woff2') format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
diff --git a/web/fonts/fonts_v5.css b/web/fonts/fonts_v5.css
deleted file mode 100644
index c07254c..0000000
--- a/web/fonts/fonts_v5.css
+++ /dev/null
@@ -1,432 +0,0 @@
-/* cyrillic-ext */
-@font-face {
-  font-family: 'Cormorant Garamond';
-  font-style: italic;
-  font-weight: 400;
-  font-display: swap;
-  src: url('cormorant-garamond-400-italic-cyrillic-ext.woff2') format('woff2');
-  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
-}
-/* cyrillic */
-@font-face {
-  font-family: 'Cormorant Garamond';
-  font-style: italic;
-  font-weight: 400;
-  font-display: swap;
-  src: url('cormorant-garamond-400-italic-cyrillic.woff2') format('woff2');
-  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-/* vietnamese */
-@font-face {
-  font-family: 'Cormorant Garamond';
-  font-style: italic;
-  font-weight: 400;
-  font-display: swap;
-  src: url('cormorant-garamond-400-italic-vietnamese.woff2') format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Cormorant Garamond';
-  font-style: italic;
-  font-weight: 400;
-  font-display: swap;
-  src: url('cormorant-garamond-400-italic-latin-ext.woff2') format('woff2');
-  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Cormorant Garamond';
-  font-style: italic;
-  font-weight: 400;
-  font-display: swap;
-  src: url('cormorant-garamond-400-italic-latin.woff2') format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-/* cyrillic-ext */
-@font-face {
-  font-family: 'Cormorant Garamond';
-  font-style: normal;
-  font-weight: 300;
-  font-display: swap;
-  src: url('cormorant-garamond-300-normal-cyrillic-ext.woff2') format('woff2');
-  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
-}
-/* cyrillic */
-@font-face {
-  font-family: 'Cormorant Garamond';
-  font-style: normal;
-  font-weight: 300;
-  font-display: swap;
-  src: url('cormorant-garamond-300-normal-cyrillic.woff2') format('woff2');
-  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-/* vietnamese */
-@font-face {
-  font-family: 'Cormorant Garamond';
-  font-style: normal;
-  font-weight: 300;
-  font-display: swap;
-  src: url('cormorant-garamond-300-normal-vietnamese.woff2') format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Cormorant Garamond';
-  font-style: normal;
-  font-weight: 300;
-  font-display: swap;
-  src: url('cormorant-garamond-300-normal-latin-ext.woff2') format('woff2');
-  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Cormorant Garamond';
-  font-style: normal;
-  font-weight: 300;
-  font-display: swap;
-  src: url('cormorant-garamond-300-normal-latin.woff2') format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-/* cyrillic-ext */
-@font-face {
-  font-family: 'Cormorant Garamond';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url('cormorant-garamond-300-normal-cyrillic-ext.woff2') format('woff2');
-  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
-}
-/* cyrillic */
-@font-face {
-  font-family: 'Cormorant Garamond';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url('cormorant-garamond-300-normal-cyrillic.woff2') format('woff2');
-  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-/* vietnamese */
-@font-face {
-  font-family: 'Cormorant Garamond';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url('cormorant-garamond-300-normal-vietnamese.woff2') format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Cormorant Garamond';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url('cormorant-garamond-300-normal-latin-ext.woff2') format('woff2');
-  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Cormorant Garamond';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url('cormorant-garamond-300-normal-latin.woff2') format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-/* cyrillic-ext */
-@font-face {
-  font-family: 'Cormorant Garamond';
-  font-style: normal;
-  font-weight: 600;
-  font-display: swap;
-  src: url('cormorant-garamond-300-normal-cyrillic-ext.woff2') format('woff2');
-  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
-}
-/* cyrillic */
-@font-face {
-  font-family: 'Cormorant Garamond';
-  font-style: normal;
-  font-weight: 600;
-  font-display: swap;
-  src: url('cormorant-garamond-300-normal-cyrillic.woff2') format('woff2');
-  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-/* vietnamese */
-@font-face {
-  font-family: 'Cormorant Garamond';
-  font-style: normal;
-  font-weight: 600;
-  font-display: swap;
-  src: url('cormorant-garamond-300-normal-vietnamese.woff2') format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Cormorant Garamond';
-  font-style: normal;
-  font-weight: 600;
-  font-display: swap;
-  src: url('cormorant-garamond-300-normal-latin-ext.woff2') format('woff2');
-  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Cormorant Garamond';
-  font-style: normal;
-  font-weight: 600;
-  font-display: swap;
-  src: url('cormorant-garamond-300-normal-latin.woff2') format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-/* cyrillic-ext */
-@font-face {
-  font-family: 'Cormorant Garamond';
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-  src: url('cormorant-garamond-300-normal-cyrillic-ext.woff2') format('woff2');
-  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
-}
-/* cyrillic */
-@font-face {
-  font-family: 'Cormorant Garamond';
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-  src: url('cormorant-garamond-300-normal-cyrillic.woff2') format('woff2');
-  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-/* vietnamese */
-@font-face {
-  font-family: 'Cormorant Garamond';
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-  src: url('cormorant-garamond-300-normal-vietnamese.woff2') format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Cormorant Garamond';
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-  src: url('cormorant-garamond-300-normal-latin-ext.woff2') format('woff2');
-  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Cormorant Garamond';
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-  src: url('cormorant-garamond-300-normal-latin.woff2') format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-/* cyrillic */
-@font-face {
-  font-family: 'Poiret One';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url('poiret-one-400-normal-cyrillic.woff2') format('woff2');
-  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Poiret One';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url('poiret-one-400-normal-latin-ext.woff2') format('woff2');
-  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Poiret One';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url('poiret-one-400-normal-latin.woff2') format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-/* cyrillic-ext */
-@font-face {
-  font-family: 'Raleway';
-  font-style: normal;
-  font-weight: 300;
-  font-display: swap;
-  src: url('raleway-300-normal-cyrillic-ext.woff2') format('woff2');
-  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
-}
-/* cyrillic */
-@font-face {
-  font-family: 'Raleway';
-  font-style: normal;
-  font-weight: 300;
-  font-display: swap;
-  src: url('raleway-300-normal-cyrillic.woff2') format('woff2');
-  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-/* vietnamese */
-@font-face {
-  font-family: 'Raleway';
-  font-style: normal;
-  font-weight: 300;
-  font-display: swap;
-  src: url('raleway-300-normal-vietnamese.woff2') format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Raleway';
-  font-style: normal;
-  font-weight: 300;
-  font-display: swap;
-  src: url('raleway-300-normal-latin-ext.woff2') format('woff2');
-  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Raleway';
-  font-style: normal;
-  font-weight: 300;
-  font-display: swap;
-  src: url('raleway-300-normal-latin.woff2') format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-/* cyrillic-ext */
-@font-face {
-  font-family: 'Raleway';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url('raleway-300-normal-cyrillic-ext.woff2') format('woff2');
-  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
-}
-/* cyrillic */
-@font-face {
-  font-family: 'Raleway';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url('raleway-300-normal-cyrillic.woff2') format('woff2');
-  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-/* vietnamese */
-@font-face {
-  font-family: 'Raleway';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url('raleway-300-normal-vietnamese.woff2') format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Raleway';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url('raleway-300-normal-latin-ext.woff2') format('woff2');
-  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Raleway';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url('raleway-300-normal-latin.woff2') format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-/* cyrillic-ext */
-@font-face {
-  font-family: 'Raleway';
-  font-style: normal;
-  font-weight: 500;
-  font-display: swap;
-  src: url('raleway-300-normal-cyrillic-ext.woff2') format('woff2');
-  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
-}
-/* cyrillic */
-@font-face {
-  font-family: 'Raleway';
-  font-style: normal;
-  font-weight: 500;
-  font-display: swap;
-  src: url('raleway-300-normal-cyrillic.woff2') format('woff2');
-  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-/* vietnamese */
-@font-face {
-  font-family: 'Raleway';
-  font-style: normal;
-  font-weight: 500;
-  font-display: swap;
-  src: url('raleway-300-normal-vietnamese.woff2') format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Raleway';
-  font-style: normal;
-  font-weight: 500;
-  font-display: swap;
-  src: url('raleway-300-normal-latin-ext.woff2') format('woff2');
-  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Raleway';
-  font-style: normal;
-  font-weight: 500;
-  font-display: swap;
-  src: url('raleway-300-normal-latin.woff2') format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-/* cyrillic-ext */
-@font-face {
-  font-family: 'Raleway';
-  font-style: normal;
-  font-weight: 600;
-  font-display: swap;
-  src: url('raleway-300-normal-cyrillic-ext.woff2') format('woff2');
-  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
-}
-/* cyrillic */
-@font-face {
-  font-family: 'Raleway';
-  font-style: normal;
-  font-weight: 600;
-  font-display: swap;
-  src: url('raleway-300-normal-cyrillic.woff2') format('woff2');
-  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-/* vietnamese */
-@font-face {
-  font-family: 'Raleway';
-  font-style: normal;
-  font-weight: 600;
-  font-display: swap;
-  src: url('raleway-300-normal-vietnamese.woff2') format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Raleway';
-  font-style: normal;
-  font-weight: 600;
-  font-display: swap;
-  src: url('raleway-300-normal-latin-ext.woff2') format('woff2');
-  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Raleway';
-  font-style: normal;
-  font-weight: 600;
-  font-display: swap;
-  src: url('raleway-300-normal-latin.woff2') format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
diff --git a/web/fonts/fraunces-300-normal-latin-ext.woff2 b/web/fonts/fraunces-300-normal-latin-ext.woff2
deleted file mode 100644
index b6e3e3a..0000000
Binary files a/web/fonts/fraunces-300-normal-latin-ext.woff2 and /dev/null differ
diff --git a/web/fonts/fraunces-300-normal-latin.woff2 b/web/fonts/fraunces-300-normal-latin.woff2
deleted file mode 100644
index cb295bf..0000000
Binary files a/web/fonts/fraunces-300-normal-latin.woff2 and /dev/null differ
diff --git a/web/fonts/fraunces-300-normal-vietnamese.woff2 b/web/fonts/fraunces-300-normal-vietnamese.woff2
deleted file mode 100644
index 43126c2..0000000
Binary files a/web/fonts/fraunces-300-normal-vietnamese.woff2 and /dev/null differ
diff --git a/web/fonts/fraunces-400-italic-latin-ext.woff2 b/web/fonts/fraunces-400-italic-latin-ext.woff2
deleted file mode 100644
index 2e65049..0000000
Binary files a/web/fonts/fraunces-400-italic-latin-ext.woff2 and /dev/null differ
diff --git a/web/fonts/fraunces-400-italic-latin.woff2 b/web/fonts/fraunces-400-italic-latin.woff2
deleted file mode 100644
index b2cf648..0000000
Binary files a/web/fonts/fraunces-400-italic-latin.woff2 and /dev/null differ
diff --git a/web/fonts/fraunces-400-italic-vietnamese.woff2 b/web/fonts/fraunces-400-italic-vietnamese.woff2
deleted file mode 100644
index ede99e3..0000000
Binary files a/web/fonts/fraunces-400-italic-vietnamese.woff2 and /dev/null differ
diff --git a/web/fonts/instrument-serif-400-italic-latin-ext.woff2 b/web/fonts/instrument-serif-400-italic-latin-ext.woff2
deleted file mode 100644
index 1f71909..0000000
Binary files a/web/fonts/instrument-serif-400-italic-latin-ext.woff2 and /dev/null differ
diff --git a/web/fonts/instrument-serif-400-italic-latin.woff2 b/web/fonts/instrument-serif-400-italic-latin.woff2
deleted file mode 100644
index 197abca..0000000
Binary files a/web/fonts/instrument-serif-400-italic-latin.woff2 and /dev/null differ
diff --git a/web/fonts/instrument-serif-400-normal-latin-ext.woff2 b/web/fonts/instrument-serif-400-normal-latin-ext.woff2
deleted file mode 100644
index 0caad58..0000000
Binary files a/web/fonts/instrument-serif-400-normal-latin-ext.woff2 and /dev/null differ
diff --git a/web/fonts/instrument-serif-400-normal-latin.woff2 b/web/fonts/instrument-serif-400-normal-latin.woff2
deleted file mode 100644
index 0ad6971..0000000
Binary files a/web/fonts/instrument-serif-400-normal-latin.woff2 and /dev/null differ
diff --git a/web/fonts/plus-jakarta-sans-300-normal-cyrillic-ext.woff2 b/web/fonts/plus-jakarta-sans-300-normal-cyrillic-ext.woff2
deleted file mode 100644
index 05b8019..0000000
Binary files a/web/fonts/plus-jakarta-sans-300-normal-cyrillic-ext.woff2 and /dev/null differ
diff --git a/web/fonts/plus-jakarta-sans-300-normal-latin-ext.woff2 b/web/fonts/plus-jakarta-sans-300-normal-latin-ext.woff2
deleted file mode 100644
index f82597c..0000000
Binary files a/web/fonts/plus-jakarta-sans-300-normal-latin-ext.woff2 and /dev/null differ
diff --git a/web/fonts/plus-jakarta-sans-300-normal-latin.woff2 b/web/fonts/plus-jakarta-sans-300-normal-latin.woff2
deleted file mode 100644
index a180dc4..0000000
Binary files a/web/fonts/plus-jakarta-sans-300-normal-latin.woff2 and /dev/null differ
diff --git a/web/fonts/plus-jakarta-sans-300-normal-vietnamese.woff2 b/web/fonts/plus-jakarta-sans-300-normal-vietnamese.woff2
deleted file mode 100644
index 8c846a0..0000000
Binary files a/web/fonts/plus-jakarta-sans-300-normal-vietnamese.woff2 and /dev/null differ
diff --git a/web/fonts/plus-jakarta-sans-400-italic-cyrillic-ext.woff2 b/web/fonts/plus-jakarta-sans-400-italic-cyrillic-ext.woff2
deleted file mode 100644
index e470722..0000000
Binary files a/web/fonts/plus-jakarta-sans-400-italic-cyrillic-ext.woff2 and /dev/null differ
diff --git a/web/fonts/plus-jakarta-sans-400-italic-latin-ext.woff2 b/web/fonts/plus-jakarta-sans-400-italic-latin-ext.woff2
deleted file mode 100644
index b9f5432..0000000
Binary files a/web/fonts/plus-jakarta-sans-400-italic-latin-ext.woff2 and /dev/null differ
diff --git a/web/fonts/plus-jakarta-sans-400-italic-latin.woff2 b/web/fonts/plus-jakarta-sans-400-italic-latin.woff2
deleted file mode 100644
index a23fc2a..0000000
Binary files a/web/fonts/plus-jakarta-sans-400-italic-latin.woff2 and /dev/null differ
diff --git a/web/fonts/plus-jakarta-sans-400-italic-vietnamese.woff2 b/web/fonts/plus-jakarta-sans-400-italic-vietnamese.woff2
deleted file mode 100644
index a67110f..0000000
Binary files a/web/fonts/plus-jakarta-sans-400-italic-vietnamese.woff2 and /dev/null differ
diff --git a/web/fonts/poiret-one-400-normal-cyrillic.woff2 b/web/fonts/poiret-one-400-normal-cyrillic.woff2
deleted file mode 100644
index 45354c0..0000000
Binary files a/web/fonts/poiret-one-400-normal-cyrillic.woff2 and /dev/null differ
diff --git a/web/fonts/poiret-one-400-normal-latin-ext.woff2 b/web/fonts/poiret-one-400-normal-latin-ext.woff2
deleted file mode 100644
index 71619a9..0000000
Binary files a/web/fonts/poiret-one-400-normal-latin-ext.woff2 and /dev/null differ
diff --git a/web/fonts/poiret-one-400-normal-latin.woff2 b/web/fonts/poiret-one-400-normal-latin.woff2
deleted file mode 100644
index c9420ef..0000000
Binary files a/web/fonts/poiret-one-400-normal-latin.woff2 and /dev/null differ
diff --git a/web/fonts/raleway-300-normal-cyrillic-ext.woff2 b/web/fonts/raleway-300-normal-cyrillic-ext.woff2
deleted file mode 100644
index dee82d4..0000000
Binary files a/web/fonts/raleway-300-normal-cyrillic-ext.woff2 and /dev/null differ
diff --git a/web/fonts/raleway-300-normal-cyrillic.woff2 b/web/fonts/raleway-300-normal-cyrillic.woff2
deleted file mode 100644
index 3c14c18..0000000
Binary files a/web/fonts/raleway-300-normal-cyrillic.woff2 and /dev/null differ
diff --git a/web/fonts/raleway-300-normal-latin-ext.woff2 b/web/fonts/raleway-300-normal-latin-ext.woff2
deleted file mode 100644
index 24cc256..0000000
Binary files a/web/fonts/raleway-300-normal-latin-ext.woff2 and /dev/null differ
diff --git a/web/fonts/raleway-300-normal-latin.woff2 b/web/fonts/raleway-300-normal-latin.woff2
deleted file mode 100644
index 67a3b53..0000000
Binary files a/web/fonts/raleway-300-normal-latin.woff2 and /dev/null differ
diff --git a/web/fonts/raleway-300-normal-vietnamese.woff2 b/web/fonts/raleway-300-normal-vietnamese.woff2
deleted file mode 100644
index b566478..0000000
Binary files a/web/fonts/raleway-300-normal-vietnamese.woff2 and /dev/null differ
diff --git a/web/fonts/space-mono-400-italic-latin-ext.woff2 b/web/fonts/space-mono-400-italic-latin-ext.woff2
deleted file mode 100644
index 3ea7e40..0000000
Binary files a/web/fonts/space-mono-400-italic-latin-ext.woff2 and /dev/null differ
diff --git a/web/fonts/space-mono-400-italic-latin.woff2 b/web/fonts/space-mono-400-italic-latin.woff2
deleted file mode 100644
index d9b2583..0000000
Binary files a/web/fonts/space-mono-400-italic-latin.woff2 and /dev/null differ
diff --git a/web/fonts/space-mono-400-italic-vietnamese.woff2 b/web/fonts/space-mono-400-italic-vietnamese.woff2
deleted file mode 100644
index 1cf4768..0000000
Binary files a/web/fonts/space-mono-400-italic-vietnamese.woff2 and /dev/null differ
diff --git a/web/fonts/space-mono-400-normal-latin-ext.woff2 b/web/fonts/space-mono-400-normal-latin-ext.woff2
deleted file mode 100644
index 171ca1a..0000000
Binary files a/web/fonts/space-mono-400-normal-latin-ext.woff2 and /dev/null differ
diff --git a/web/fonts/space-mono-400-normal-latin.woff2 b/web/fonts/space-mono-400-normal-latin.woff2
deleted file mode 100644
index 2752f60..0000000
Binary files a/web/fonts/space-mono-400-normal-latin.woff2 and /dev/null differ
diff --git a/web/fonts/space-mono-400-normal-vietnamese.woff2 b/web/fonts/space-mono-400-normal-vietnamese.woff2
deleted file mode 100644
index f4c014c..0000000
Binary files a/web/fonts/space-mono-400-normal-vietnamese.woff2 and /dev/null differ
diff --git a/web/fonts/space-mono-700-italic-latin-ext.woff2 b/web/fonts/space-mono-700-italic-latin-ext.woff2
deleted file mode 100644
index b58c02d..0000000
Binary files a/web/fonts/space-mono-700-italic-latin-ext.woff2 and /dev/null differ
diff --git a/web/fonts/space-mono-700-italic-latin.woff2 b/web/fonts/space-mono-700-italic-latin.woff2
deleted file mode 100644
index 263487c..0000000
Binary files a/web/fonts/space-mono-700-italic-latin.woff2 and /dev/null differ
diff --git a/web/fonts/space-mono-700-italic-vietnamese.woff2 b/web/fonts/space-mono-700-italic-vietnamese.woff2
deleted file mode 100644
index 6149e5b..0000000
Binary files a/web/fonts/space-mono-700-italic-vietnamese.woff2 and /dev/null differ
diff --git a/web/fonts/space-mono-700-normal-latin-ext.woff2 b/web/fonts/space-mono-700-normal-latin-ext.woff2
deleted file mode 100644
index d7a1592..0000000
Binary files a/web/fonts/space-mono-700-normal-latin-ext.woff2 and /dev/null differ
diff --git a/web/fonts/space-mono-700-normal-latin.woff2 b/web/fonts/space-mono-700-normal-latin.woff2
deleted file mode 100644
index 6563bad..0000000
Binary files a/web/fonts/space-mono-700-normal-latin.woff2 and /dev/null differ
diff --git a/web/fonts/space-mono-700-normal-vietnamese.woff2 b/web/fonts/space-mono-700-normal-vietnamese.woff2
deleted file mode 100644
index 7ddc67d..0000000
Binary files a/web/fonts/space-mono-700-normal-vietnamese.woff2 and /dev/null differ
diff --git a/web/fonts/vt323-400-normal-latin-ext.woff2 b/web/fonts/vt323-400-normal-latin-ext.woff2
deleted file mode 100644
index 5383719..0000000
Binary files a/web/fonts/vt323-400-normal-latin-ext.woff2 and /dev/null differ
diff --git a/web/fonts/vt323-400-normal-latin.woff2 b/web/fonts/vt323-400-normal-latin.woff2
deleted file mode 100644
index fd760b5..0000000
Binary files a/web/fonts/vt323-400-normal-latin.woff2 and /dev/null differ
diff --git a/web/fonts/vt323-400-normal-vietnamese.woff2 b/web/fonts/vt323-400-normal-vietnamese.woff2
deleted file mode 100644
index d9f1698..0000000
Binary files a/web/fonts/vt323-400-normal-vietnamese.woff2 and /dev/null differ
diff --git a/web/index.html b/web/index.html
index fc08993..1592954 100644
--- a/web/index.html
+++ b/web/index.html
@@ -3,9 +3,12 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>DocuMentor — XSL-Transformationen unter Kontrolle</title>
-    <link rel="stylesheet" href="fonts/fonts_index.css">
+    <title>DocuMentor — Industrielle XSL-Transformationskontrolle</title>
+    <link rel="stylesheet" href="fonts/fonts.css">
     <style>
+        /* ============================================================
+           RESET & BASE
+           ============================================================ */
         *, *::before, *::after {
             margin: 0;
             padding: 0;
@@ -13,985 +16,1794 @@
         }
 
         :root {
-            --bg-primary: #06060b;
-            --bg-secondary: #0c0c14;
-            --bg-card: #10101a;
-            --bg-card-hover: #161622;
-            --border: #1a1a2e;
-            --border-light: #2a2a44;
-            --text-primary: #e8e6e1;
-            --text-secondary: #8a8899;
-            --text-muted: #55546a;
-            --accent: #c9a84c;
-            --accent-dim: #a08535;
-            --accent-glow: rgba(201, 168, 76, 0.15);
-            --accent-blue: #4a6fa5;
-            --accent-blue-dim: #3a5a88;
-            --red-soft: #a04040;
-            --green-soft: #408040;
-            --font-display: 'Instrument Serif', Georgia, serif;
-            --font-body: 'DM Sans', system-ui, sans-serif;
+            --concrete-dark: #1a1a1a;
+            --concrete-mid: #2a2a2a;
+            --concrete-light: #3a3a3a;
+            --concrete-surface: #444444;
+            --warning-yellow: #f0c030;
+            --warning-yellow-dim: #e8b800;
+            --safety-orange: #e05020;
+            --steel-text: #b0b0b0;
+            --steel-bright: #d0d0d0;
+            --white: #f0efe8;
+            --grid-line: rgba(240, 192, 48, 0.07);
+            --grid-dot: rgba(240, 192, 48, 0.12);
+            --blueprint-line: rgba(240, 192, 48, 0.15);
+            --led-green: #30e060;
+            --led-red: #e03030;
         }
 
         html {
             scroll-behavior: smooth;
-            scrollbar-width: thin;
-            scrollbar-color: var(--border-light) var(--bg-primary);
+            font-size: 16px;
         }
 
         body {
-            font-family: var(--font-body);
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.7;
+            font-family: 'Barlow', sans-serif;
+            background-color: var(--concrete-dark);
+            color: var(--steel-text);
+            line-height: 1.6;
             overflow-x: hidden;
-            -webkit-font-smoothing: antialiased;
+            /* Concrete texture via noise-like gradient */
+            background-image:
+                repeating-linear-gradient(
+                    0deg,
+                    transparent,
+                    transparent 2px,
+                    rgba(255,255,255,0.008) 2px,
+                    rgba(255,255,255,0.008) 4px
+                ),
+                repeating-linear-gradient(
+                    90deg,
+                    transparent,
+                    transparent 2px,
+                    rgba(255,255,255,0.005) 2px,
+                    rgba(255,255,255,0.005) 4px
+                );
         }
 
-        /* ============ NOISE TEXTURE OVERLAY ============ */
+        /* ============================================================
+           GLOBAL GRID OVERLAY
+           ============================================================ */
         body::before {
             content: '';
-            position: fixed;
-            inset: 0;
-            opacity: 0.025;
-            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
-            background-size: 256px;
-            pointer-events: none;
-            z-index: 9999;
-        }
-
-        /* ============ NAVIGATION ============ */
-        nav {
             position: fixed;
             top: 0;
             left: 0;
-            right: 0;
-            z-index: 100;
-            padding: 1.2rem 2rem;
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            backdrop-filter: blur(20px);
-            background: rgba(6, 6, 11, 0.8);
-            border-bottom: 1px solid transparent;
-            transition: border-color 0.4s ease;
+            width: 100%;
+            height: 100%;
+            pointer-events: none;
+            z-index: 0;
+            background-image:
+                radial-gradient(circle, var(--grid-dot) 1px, transparent 1px);
+            background-size: 40px 40px;
+            opacity: 0.5;
         }
 
-        nav.scrolled {
-            border-bottom-color: var(--border);
+        /* ============================================================
+           UTILITY CLASSES
+           ============================================================ */
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 0 2rem;
+            position: relative;
+            z-index: 1;
         }
 
-        .nav-logo {
-            font-family: var(--font-display);
-            font-size: 1.5rem;
-            color: var(--text-primary);
-            text-decoration: none;
-            letter-spacing: -0.02em;
+        section {
+            position: relative;
+            z-index: 1;
         }
 
-        .nav-logo span {
-            color: var(--accent);
-        }
-
-        .nav-links {
-            display: flex;
-            gap: 2.5rem;
-            list-style: none;
-        }
-
-        .nav-links a {
-            color: var(--text-secondary);
-            text-decoration: none;
-            font-size: 0.85rem;
-            font-weight: 400;
-            letter-spacing: 0.04em;
+        /* ============================================================
+           STENCIL SECTION LABELS
+           ============================================================ */
+        .section-label {
+            font-family: 'Oswald', sans-serif;
+            font-weight: 700;
+            font-size: 0.75rem;
+            letter-spacing: 0.3em;
             text-transform: uppercase;
-            transition: color 0.3s ease;
-        }
-
-        .nav-links a:hover {
-            color: var(--accent);
-        }
-
-        /* ============ HERO ============ */
-        .hero {
-            min-height: 100vh;
+            color: var(--warning-yellow-dim);
             display: flex;
-            flex-direction: column;
             align-items: center;
-            justify-content: center;
-            text-align: center;
-            padding: 8rem 2rem 4rem;
+            gap: 1rem;
+            margin-bottom: 0.75rem;
+        }
+
+        .section-label::before {
+            content: attr(data-num);
+            font-family: 'Share Tech Mono', monospace;
+            font-size: 0.65rem;
+            color: var(--concrete-surface);
+            border: 1px dashed var(--concrete-surface);
+            padding: 0.15rem 0.4rem;
+            letter-spacing: 0.1em;
+        }
+
+        .section-title {
+            font-family: 'Oswald', sans-serif;
+            font-weight: 700;
+            font-size: 2.5rem;
+            color: var(--white);
+            text-transform: uppercase;
+            letter-spacing: 0.05em;
+            line-height: 1.1;
+            margin-bottom: 1rem;
+        }
+
+        .section-subtitle {
+            font-family: 'Barlow', sans-serif;
+            font-weight: 300;
+            font-size: 1.1rem;
+            color: var(--steel-text);
+            max-width: 700px;
+            margin-bottom: 3rem;
+        }
+
+        /* ============================================================
+           HAZARD STRIPE
+           ============================================================ */
+        .hazard-stripe {
+            height: 6px;
+            background: repeating-linear-gradient(
+                -45deg,
+                var(--warning-yellow),
+                var(--warning-yellow) 8px,
+                var(--concrete-dark) 8px,
+                var(--concrete-dark) 16px
+            );
+            width: 100%;
+        }
+
+        .hazard-stripe-thin {
+            height: 3px;
+            background: repeating-linear-gradient(
+                -45deg,
+                var(--warning-yellow-dim),
+                var(--warning-yellow-dim) 5px,
+                var(--concrete-mid) 5px,
+                var(--concrete-mid) 10px
+            );
+            opacity: 0.5;
+        }
+
+        /* ============================================================
+           CORNER BRACKETS (for cards and panels)
+           ============================================================ */
+        .corner-brackets {
             position: relative;
         }
 
-        .hero::before {
+        .corner-brackets::before,
+        .corner-brackets::after {
             content: '';
             position: absolute;
-            top: -20%;
-            left: 50%;
-            transform: translateX(-50%);
-            width: 800px;
-            height: 800px;
-            background: radial-gradient(ellipse, var(--accent-glow) 0%, transparent 70%);
+            width: 16px;
+            height: 16px;
             pointer-events: none;
         }
 
-        .hero-badge {
-            display: inline-flex;
+        .corner-brackets::before {
+            top: -1px;
+            left: -1px;
+            border-top: 2px solid var(--warning-yellow-dim);
+            border-left: 2px solid var(--warning-yellow-dim);
+        }
+
+        .corner-brackets::after {
+            bottom: -1px;
+            right: -1px;
+            border-bottom: 2px solid var(--warning-yellow-dim);
+            border-right: 2px solid var(--warning-yellow-dim);
+        }
+
+        /* ============================================================
+           RIVET DECORATIONS
+           ============================================================ */
+        .riveted {
+            position: relative;
+        }
+
+        .riveted .rivet {
+            position: absolute;
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            background: radial-gradient(circle at 35% 35%, #555, #2a2a2a 60%, #1a1a1a);
+            box-shadow: inset 0 1px 1px rgba(255,255,255,0.15), 0 1px 2px rgba(0,0,0,0.5);
+        }
+
+        .riveted .rivet-tl { top: 10px; left: 10px; }
+        .riveted .rivet-tr { top: 10px; right: 10px; }
+        .riveted .rivet-bl { bottom: 10px; left: 10px; }
+        .riveted .rivet-br { bottom: 10px; right: 10px; }
+
+        /* ============================================================
+           LED INDICATOR
+           ============================================================ */
+        .led {
+            display: inline-block;
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            margin-right: 6px;
+            vertical-align: middle;
+            box-shadow: 0 0 4px currentColor;
+        }
+
+        .led-green {
+            background-color: var(--led-green);
+            color: var(--led-green);
+        }
+
+        .led-yellow {
+            background-color: var(--warning-yellow);
+            color: var(--warning-yellow);
+        }
+
+        .led-orange {
+            background-color: var(--safety-orange);
+            color: var(--safety-orange);
+        }
+
+        /* ============================================================
+           SCROLL REVEAL
+           ============================================================ */
+        .reveal {
+            opacity: 0;
+            transform: translateY(30px);
+            transition: opacity 0.6s linear, transform 0.6s linear;
+        }
+
+        .reveal.from-left {
+            transform: translateX(-40px);
+        }
+
+        .reveal.from-right {
+            transform: translateX(40px);
+        }
+
+        .reveal.from-bottom {
+            transform: translateY(40px);
+        }
+
+        .reveal.visible {
+            opacity: 1;
+            transform: translate(0, 0);
+        }
+
+        /* Staggered delays for children */
+        .reveal-delay-1 { transition-delay: 0.1s; }
+        .reveal-delay-2 { transition-delay: 0.2s; }
+        .reveal-delay-3 { transition-delay: 0.3s; }
+        .reveal-delay-4 { transition-delay: 0.4s; }
+        .reveal-delay-5 { transition-delay: 0.5s; }
+        .reveal-delay-6 { transition-delay: 0.6s; }
+
+        /* ============================================================
+           NAVBAR
+           ============================================================ */
+        .navbar {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            z-index: 1000;
+            background: rgba(26, 26, 26, 0.92);
+            backdrop-filter: blur(10px);
+            border-bottom: 1px solid rgba(240, 192, 48, 0.12);
+        }
+
+        .navbar-inner {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 0 2rem;
+            height: 56px;
+            max-width: 1200px;
+            margin: 0 auto;
+        }
+
+        .navbar-brand {
+            display: flex;
             align-items: center;
             gap: 0.5rem;
-            padding: 0.4rem 1rem;
-            border: 1px solid var(--border-light);
-            border-radius: 100px;
-            font-size: 0.78rem;
-            color: var(--text-secondary);
-            margin-bottom: 2.5rem;
-            background: var(--bg-card);
-            opacity: 0;
-            animation: fadeUp 0.8s ease 0.2s forwards;
+            text-decoration: none;
         }
 
-        .hero-badge .dot {
-            width: 6px;
-            height: 6px;
-            border-radius: 50%;
-            background: var(--accent);
-            animation: pulse 2s ease infinite;
+        .navbar-brand-icon {
+            width: 28px;
+            height: 28px;
+            border: 2px solid var(--warning-yellow);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-family: 'Oswald', sans-serif;
+            font-weight: 700;
+            font-size: 0.85rem;
+            color: var(--warning-yellow);
         }
 
-        .hero h1 {
-            font-family: var(--font-display);
-            font-size: clamp(3.5rem, 8vw, 7rem);
-            font-weight: 400;
-            line-height: 1.05;
-            letter-spacing: -0.03em;
-            margin-bottom: 1.5rem;
-            opacity: 0;
-            animation: fadeUp 0.8s ease 0.4s forwards;
-        }
-
-        .hero h1 em {
-            font-style: italic;
-            color: var(--accent);
-        }
-
-        .hero-sub {
-            max-width: 560px;
+        .navbar-brand-text {
+            font-family: 'Oswald', sans-serif;
+            font-weight: 600;
             font-size: 1.1rem;
-            color: var(--text-secondary);
-            line-height: 1.8;
-            margin-bottom: 3rem;
-            opacity: 0;
-            animation: fadeUp 0.8s ease 0.6s forwards;
+            color: var(--white);
+            letter-spacing: 0.1em;
+            text-transform: uppercase;
+        }
+
+        .navbar-links {
+            display: flex;
+            gap: 2rem;
+            list-style: none;
+        }
+
+        .navbar-links a {
+            font-family: 'Share Tech Mono', monospace;
+            font-size: 0.75rem;
+            color: var(--steel-text);
+            text-decoration: none;
+            text-transform: uppercase;
+            letter-spacing: 0.15em;
+            padding: 0.25rem 0;
+            border-bottom: 1px solid transparent;
+            transition: color 0.2s linear, border-color 0.2s linear;
+        }
+
+        .navbar-links a:hover {
+            color: var(--warning-yellow);
+            border-bottom-color: var(--warning-yellow);
+        }
+
+        .navbar-mobile-toggle {
+            display: none;
+            background: none;
+            border: 1px solid var(--concrete-surface);
+            color: var(--steel-text);
+            padding: 0.4rem 0.6rem;
+            font-family: 'Share Tech Mono', monospace;
+            font-size: 0.75rem;
+            cursor: pointer;
+            text-transform: uppercase;
+            letter-spacing: 0.1em;
+        }
+
+        /* ============================================================
+           HERO SECTION
+           ============================================================ */
+        .hero {
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            padding-top: 56px;
+            position: relative;
+            overflow: hidden;
+            background:
+                linear-gradient(135deg, var(--concrete-dark) 0%, var(--concrete-mid) 50%, var(--concrete-dark) 100%);
+        }
+
+        /* Blueprint grid background for hero */
+        .hero::before {
+            content: '';
+            position: absolute;
+            inset: 0;
+            background-image:
+                linear-gradient(var(--grid-line) 1px, transparent 1px),
+                linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
+            background-size: 80px 80px;
+            opacity: 0.8;
+        }
+
+        /* Crosshair in hero */
+        .hero::after {
+            content: '+';
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            font-family: 'Share Tech Mono', monospace;
+            font-size: 12rem;
+            color: rgba(240, 192, 48, 0.03);
+            pointer-events: none;
+        }
+
+        .hero-content {
+            position: relative;
+            z-index: 2;
+        }
+
+        .hero-panel {
+            background: rgba(26, 26, 26, 0.85);
+            border: 1px solid rgba(240, 192, 48, 0.2);
+            padding: 3rem 3.5rem;
+            position: relative;
+            max-width: 750px;
+        }
+
+        .hero-system-tag {
+            font-family: 'Share Tech Mono', monospace;
+            font-size: 0.7rem;
+            color: var(--concrete-surface);
+            letter-spacing: 0.2em;
+            margin-bottom: 1.5rem;
+            display: flex;
+            align-items: center;
+            gap: 0.75rem;
+        }
+
+        .hero-system-tag .led {
+            animation: led-blink 2s infinite;
+        }
+
+        @keyframes led-blink {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.4; }
+        }
+
+        .hero-title {
+            font-family: 'Oswald', sans-serif;
+            font-weight: 700;
+            font-size: 4.5rem;
+            color: var(--white);
+            text-transform: uppercase;
+            letter-spacing: 0.08em;
+            line-height: 1;
+            margin-bottom: 0.5rem;
+        }
+
+        .hero-title span {
+            color: var(--warning-yellow);
+        }
+
+        .hero-tagline {
+            font-family: 'Barlow Condensed', sans-serif;
+            font-weight: 400;
+            font-size: 1.5rem;
+            color: var(--steel-bright);
+            letter-spacing: 0.05em;
+            margin-bottom: 0.75rem;
+        }
+
+        .hero-desc {
+            font-family: 'Barlow', sans-serif;
+            font-weight: 300;
+            font-size: 1rem;
+            color: var(--steel-text);
+            margin-bottom: 2rem;
+            max-width: 550px;
+            line-height: 1.7;
         }
 
         .hero-actions {
             display: flex;
             gap: 1rem;
-            opacity: 0;
-            animation: fadeUp 0.8s ease 0.8s forwards;
+            flex-wrap: wrap;
         }
 
+        /* BUTTONS */
         .btn-primary {
             display: inline-flex;
             align-items: center;
             gap: 0.5rem;
-            padding: 0.85rem 2rem;
-            background: var(--accent);
-            color: var(--bg-primary);
-            font-family: var(--font-body);
-            font-size: 0.88rem;
+            font-family: 'Oswald', sans-serif;
             font-weight: 600;
+            font-size: 0.9rem;
+            text-transform: uppercase;
+            letter-spacing: 0.15em;
+            padding: 0.85rem 2rem;
+            background: var(--warning-yellow);
+            color: var(--concrete-dark);
             border: none;
-            border-radius: 8px;
             cursor: pointer;
             text-decoration: none;
-            transition: all 0.3s ease;
-            letter-spacing: 0.02em;
+            position: relative;
+            transition: background 0.15s linear, transform 0.1s linear, box-shadow 0.15s linear;
         }
 
         .btn-primary:hover {
-            background: #ddb85c;
+            background: var(--warning-yellow-dim);
             transform: translateY(-1px);
-            box-shadow: 0 8px 30px rgba(201, 168, 76, 0.25);
+            box-shadow: 0 4px 16px rgba(240, 192, 48, 0.25);
+        }
+
+        .btn-primary:active {
+            transform: translateY(1px);
+            box-shadow: none;
         }
 
         .btn-secondary {
             display: inline-flex;
             align-items: center;
             gap: 0.5rem;
+            font-family: 'Oswald', sans-serif;
+            font-weight: 600;
+            font-size: 0.9rem;
+            text-transform: uppercase;
+            letter-spacing: 0.15em;
             padding: 0.85rem 2rem;
             background: transparent;
-            color: var(--text-primary);
-            font-family: var(--font-body);
-            font-size: 0.88rem;
-            font-weight: 500;
-            border: 1px solid var(--border-light);
-            border-radius: 8px;
+            color: var(--steel-bright);
+            border: 1px solid var(--concrete-surface);
             cursor: pointer;
             text-decoration: none;
-            transition: all 0.3s ease;
+            transition: border-color 0.15s linear, color 0.15s linear, transform 0.1s linear;
         }
 
         .btn-secondary:hover {
-            border-color: var(--text-secondary);
-            background: var(--bg-card);
+            border-color: var(--warning-yellow-dim);
+            color: var(--warning-yellow);
+            transform: translateY(-1px);
         }
 
-        /* ============ SCROLL INDICATOR ============ */
-        .scroll-indicator {
+        .btn-secondary:active {
+            transform: translateY(1px);
+        }
+
+        /* Hero measurement marks */
+        .hero-measure {
             position: absolute;
-            bottom: 2rem;
-            left: 50%;
-            transform: translateX(-50%);
-            opacity: 0;
-            animation: fadeUp 0.8s ease 1.2s forwards;
+            font-family: 'Share Tech Mono', monospace;
+            font-size: 0.55rem;
+            color: rgba(240, 192, 48, 0.2);
+            letter-spacing: 0.1em;
         }
 
-        .scroll-indicator .line {
-            width: 1px;
-            height: 48px;
-            background: linear-gradient(to bottom, var(--accent), transparent);
-            margin: 0 auto;
-            animation: scrollLine 2s ease infinite;
+        .hero-measure-top {
+            top: -20px;
+            left: 0;
+            display: flex;
+            align-items: flex-end;
+            gap: 0.5rem;
         }
 
-        /* ============ SECTIONS COMMON ============ */
-        section {
-            padding: 7rem 2rem;
-            max-width: 1200px;
-            margin: 0 auto;
+        .hero-measure-top::before {
+            content: '';
+            display: block;
+            width: 200px;
+            height: 1px;
+            background: rgba(240, 192, 48, 0.15);
         }
 
-        .section-label {
-            font-size: 0.72rem;
-            font-weight: 500;
-            letter-spacing: 0.18em;
-            text-transform: uppercase;
-            color: var(--accent);
-            margin-bottom: 1rem;
+        .hero-measure-right {
+            top: 0;
+            right: -30px;
+            writing-mode: vertical-rl;
         }
 
-        .section-title {
-            font-family: var(--font-display);
-            font-size: clamp(2rem, 4vw, 3.2rem);
-            font-weight: 400;
-            line-height: 1.15;
-            letter-spacing: -0.02em;
-            margin-bottom: 1rem;
-        }
-
-        .section-desc {
-            color: var(--text-secondary);
-            font-size: 1.05rem;
-            max-width: 520px;
-            line-height: 1.8;
-            margin-bottom: 3.5rem;
-        }
-
-        /* ============ FEATURES ============ */
-        .features-grid {
-            display: grid;
-            grid-template-columns: repeat(3, 1fr);
-            gap: 1px;
-            background: var(--border);
-            border: 1px solid var(--border);
-            border-radius: 16px;
-            overflow: hidden;
-        }
-
-        .feature-card {
-            background: var(--bg-card);
-            padding: 2.5rem 2rem;
-            transition: background 0.4s ease;
+        /* ============================================================
+           FEATURES SECTION
+           ============================================================ */
+        .features {
+            padding: 6rem 0;
+            background: var(--concrete-mid);
             position: relative;
         }
 
+        .features::before {
+            content: '';
+            position: absolute;
+            inset: 0;
+            background-image:
+                radial-gradient(circle, var(--grid-dot) 1px, transparent 1px);
+            background-size: 30px 30px;
+            opacity: 0.3;
+        }
+
+        .features-grid {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 1.5rem;
+            position: relative;
+            z-index: 1;
+        }
+
+        .feature-card {
+            background: var(--concrete-dark);
+            border: 1px dashed rgba(240, 192, 48, 0.15);
+            padding: 2rem 1.5rem;
+            position: relative;
+            transition: border-color 0.2s linear, box-shadow 0.2s linear;
+        }
+
         .feature-card:hover {
-            background: var(--bg-card-hover);
+            border-color: rgba(240, 192, 48, 0.4);
+            box-shadow: 0 0 20px rgba(240, 192, 48, 0.05);
+        }
+
+        .feature-card:hover .feature-icon {
+            border-color: var(--warning-yellow);
+            color: var(--warning-yellow);
+        }
+
+        .feature-number {
+            font-family: 'Share Tech Mono', monospace;
+            font-size: 0.6rem;
+            color: var(--concrete-surface);
+            position: absolute;
+            top: 8px;
+            right: 10px;
+            letter-spacing: 0.1em;
         }
 
         .feature-icon {
             width: 44px;
             height: 44px;
-            border-radius: 10px;
+            border: 1px solid var(--concrete-surface);
             display: flex;
             align-items: center;
             justify-content: center;
-            margin-bottom: 1.5rem;
-            font-size: 1.2rem;
-            border: 1px solid var(--border-light);
-            background: var(--bg-secondary);
+            margin-bottom: 1.25rem;
+            font-size: 1.3rem;
+            color: var(--steel-text);
+            transition: border-color 0.2s linear, color 0.2s linear;
         }
 
-        .feature-card h3 {
-            font-family: var(--font-display);
-            font-size: 1.25rem;
-            font-weight: 400;
-            margin-bottom: 0.75rem;
-            letter-spacing: -0.01em;
+        .feature-name {
+            font-family: 'Barlow Condensed', sans-serif;
+            font-weight: 600;
+            font-size: 1.15rem;
+            color: var(--steel-bright);
+            text-transform: uppercase;
+            letter-spacing: 0.05em;
+            margin-bottom: 0.5rem;
         }
 
-        .feature-card p {
-            color: var(--text-secondary);
+        .feature-desc {
+            font-family: 'Barlow', sans-serif;
+            font-weight: 300;
             font-size: 0.9rem;
-            line-height: 1.7;
+            color: var(--steel-text);
+            line-height: 1.6;
         }
 
-        /* ============ WORKFLOW ============ */
-        .workflow-section {
+        /* ============================================================
+           WORKFLOW SECTION
+           ============================================================ */
+        .workflow {
+            padding: 6rem 0;
+            background: var(--concrete-dark);
             position: relative;
         }
 
         .workflow-steps {
             display: grid;
-            grid-template-columns: 1fr;
+            grid-template-columns: repeat(4, 1fr);
             gap: 0;
             position: relative;
-            margin-top: 2rem;
+        }
+
+        /* Connecting line */
+        .workflow-steps::before {
+            content: '';
+            position: absolute;
+            top: 36px;
+            left: 10%;
+            right: 10%;
+            height: 2px;
+            background: repeating-linear-gradient(
+                90deg,
+                var(--warning-yellow-dim) 0,
+                var(--warning-yellow-dim) 8px,
+                transparent 8px,
+                transparent 16px
+            );
+            opacity: 0.3;
+            z-index: 0;
         }
 
         .workflow-step {
-            display: grid;
-            grid-template-columns: 80px 1fr;
-            gap: 2rem;
-            padding: 2.5rem 0;
-            border-bottom: 1px solid var(--border);
+            text-align: center;
             position: relative;
-            opacity: 0;
-            transform: translateY(20px);
-            transition: all 0.6s ease;
-        }
-
-        .workflow-step.visible {
-            opacity: 1;
-            transform: translateY(0);
-        }
-
-        .workflow-step:last-child {
-            border-bottom: none;
+            z-index: 1;
+            padding: 0 1rem;
         }
 
         .step-number {
-            font-family: var(--font-display);
-            font-size: 3rem;
-            color: var(--border-light);
-            line-height: 1;
-            transition: color 0.4s ease;
+            width: 72px;
+            height: 72px;
+            margin: 0 auto 1.5rem;
+            background: var(--concrete-mid);
+            border: 2px solid var(--concrete-surface);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-family: 'Oswald', sans-serif;
+            font-weight: 700;
+            font-size: 1.8rem;
+            color: var(--steel-text);
+            position: relative;
+            transition: border-color 0.3s linear, color 0.3s linear;
         }
 
         .workflow-step:hover .step-number {
-            color: var(--accent);
+            border-color: var(--warning-yellow);
+            color: var(--warning-yellow);
         }
 
-        .step-content h3 {
-            font-family: var(--font-display);
-            font-size: 1.4rem;
-            font-weight: 400;
-            margin-bottom: 0.6rem;
+        .step-number::after {
+            content: '';
+            position: absolute;
+            bottom: -12px;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 2px;
+            height: 12px;
+            background: var(--concrete-surface);
         }
 
-        .step-content p {
-            color: var(--text-secondary);
-            font-size: 0.95rem;
-            max-width: 500px;
+        .step-title {
+            font-family: 'Barlow Condensed', sans-serif;
+            font-weight: 600;
+            font-size: 1.05rem;
+            color: var(--steel-bright);
+            text-transform: uppercase;
+            letter-spacing: 0.05em;
+            margin-bottom: 0.5rem;
         }
 
-        /* ============ DEMO / SCREENSHOT ============ */
-        .demo-section {
-            text-align: center;
+        .step-desc {
+            font-family: 'Barlow', sans-serif;
+            font-weight: 300;
+            font-size: 0.85rem;
+            color: var(--steel-text);
+            line-height: 1.5;
         }
 
-        .demo-window {
-            margin-top: 3rem;
-            border: 1px solid var(--border);
-            border-radius: 16px;
-            overflow: hidden;
-            background: var(--bg-card);
+        /* ============================================================
+           SCREENSHOT / DEMO SECTION
+           ============================================================ */
+        .demo {
+            padding: 6rem 0;
+            background: var(--concrete-mid);
             position: relative;
+            overflow: hidden;
+        }
+
+        .demo-frame {
+            background: var(--concrete-dark);
+            border: 1px solid rgba(240, 192, 48, 0.15);
+            padding: 0;
+            position: relative;
+            max-width: 960px;
+            margin: 0 auto;
         }
 
         .demo-titlebar {
             display: flex;
             align-items: center;
-            gap: 8px;
-            padding: 1rem 1.5rem;
-            border-bottom: 1px solid var(--border);
-            background: var(--bg-secondary);
+            gap: 0.75rem;
+            padding: 0.6rem 1rem;
+            background: rgba(42, 42, 42, 0.9);
+            border-bottom: 1px solid rgba(240, 192, 48, 0.1);
         }
 
-        .demo-dot {
-            width: 12px;
-            height: 12px;
+        .demo-titlebar-dots {
+            display: flex;
+            gap: 6px;
+        }
+
+        .demo-titlebar-dot {
+            width: 10px;
+            height: 10px;
             border-radius: 50%;
-            border: 1px solid var(--border-light);
+            border: 1px solid rgba(255,255,255,0.1);
         }
 
-        .demo-dot:nth-child(1) { background: var(--red-soft); border-color: var(--red-soft); }
-        .demo-dot:nth-child(2) { background: var(--accent-dim); border-color: var(--accent-dim); }
-        .demo-dot:nth-child(3) { background: var(--green-soft); border-color: var(--green-soft); }
+        .demo-titlebar-dot.red { background: #e03030; }
+        .demo-titlebar-dot.yellow { background: var(--warning-yellow); }
+        .demo-titlebar-dot.green { background: var(--led-green); }
 
-        .demo-titlebar span {
-            margin-left: auto;
-            font-size: 0.78rem;
-            color: var(--text-muted);
+        .demo-titlebar-text {
+            font-family: 'Share Tech Mono', monospace;
+            font-size: 0.7rem;
+            color: var(--concrete-surface);
+            letter-spacing: 0.1em;
         }
 
         .demo-content {
-            padding: 3rem;
+            display: flex;
             min-height: 420px;
-            display: grid;
-            grid-template-columns: 240px 1fr;
-            gap: 1px;
-            background: var(--border);
         }
 
+        /* Sidebar mockup */
         .demo-sidebar {
-            background: var(--bg-secondary);
-            padding: 1.5rem;
+            width: 240px;
+            border-right: 1px solid rgba(240, 192, 48, 0.08);
+            padding: 1rem;
+            flex-shrink: 0;
         }
 
-        .demo-sidebar-title {
-            font-size: 0.7rem;
-            font-weight: 500;
-            letter-spacing: 0.12em;
+        .demo-sidebar-label {
+            font-family: 'Share Tech Mono', monospace;
+            font-size: 0.6rem;
+            color: var(--concrete-surface);
             text-transform: uppercase;
-            color: var(--text-muted);
-            margin-bottom: 1rem;
+            letter-spacing: 0.2em;
+            margin-bottom: 0.75rem;
+            padding-bottom: 0.5rem;
+            border-bottom: 1px dashed rgba(240, 192, 48, 0.1);
         }
 
-        .demo-tree {
-            font-size: 0.82rem;
-            color: var(--text-secondary);
-        }
-
-        .demo-tree-item {
-            padding: 0.35rem 0;
+        .tree-item {
+            padding: 0.3rem 0;
             padding-left: 0;
+            font-family: 'Share Tech Mono', monospace;
+            font-size: 0.72rem;
+            color: var(--steel-text);
             display: flex;
             align-items: center;
-            gap: 0.5rem;
-            cursor: default;
-            transition: color 0.2s ease;
+            gap: 0.4rem;
         }
 
-        .demo-tree-item:hover {
-            color: var(--text-primary);
+        .tree-item.level-1 { padding-left: 1rem; }
+        .tree-item.level-2 { padding-left: 2rem; }
+
+        .tree-icon {
+            color: var(--warning-yellow-dim);
+            font-size: 0.65rem;
+            width: 14px;
+            text-align: center;
+            flex-shrink: 0;
         }
 
-        .demo-tree-item.active {
-            color: var(--accent);
+        .tree-item.active {
+            color: var(--warning-yellow);
+            background: rgba(240, 192, 48, 0.05);
+            margin: 0 -0.5rem;
+            padding-left: 2.5rem;
+            padding-right: 0.5rem;
         }
 
-        .demo-tree-item .icon {
-            opacity: 0.5;
-            font-size: 0.75rem;
-        }
-
-        .indent-1 { padding-left: 1.2rem; }
-        .indent-2 { padding-left: 2.4rem; }
-
-        .demo-main {
-            background: var(--bg-card);
-            padding: 2rem;
+        /* Main panels mockup */
+        .demo-panels {
+            flex: 1;
             display: grid;
-            grid-template-columns: repeat(3, 1fr);
-            gap: 1rem;
+            grid-template-columns: 1fr 1fr 1fr;
+            gap: 0;
         }
 
         .demo-panel {
-            border: 1px solid var(--border);
-            border-radius: 8px;
-            overflow: hidden;
+            border-right: 1px solid rgba(240, 192, 48, 0.06);
+            display: flex;
+            flex-direction: column;
+            position: relative;
+        }
+
+        .demo-panel:last-child {
+            border-right: none;
         }
 
         .demo-panel-header {
-            padding: 0.6rem 1rem;
-            font-size: 0.72rem;
-            font-weight: 500;
-            letter-spacing: 0.08em;
+            font-family: 'Share Tech Mono', monospace;
+            font-size: 0.6rem;
+            color: var(--concrete-surface);
             text-transform: uppercase;
-            color: var(--text-muted);
-            border-bottom: 1px solid var(--border);
-            background: var(--bg-secondary);
-        }
-
-        .demo-panel-body {
-            padding: 1.5rem;
-            min-height: 240px;
+            letter-spacing: 0.15em;
+            padding: 0.5rem 0.75rem;
+            border-bottom: 1px solid rgba(240, 192, 48, 0.06);
             display: flex;
             align-items: center;
-            justify-content: center;
-            position: relative;
-        }
-
-        .demo-pdf-placeholder {
-            width: 100%;
-            height: 200px;
-            border: 1px dashed var(--border-light);
-            border-radius: 6px;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            color: var(--text-muted);
-            font-size: 0.8rem;
             gap: 0.5rem;
         }
 
-        .demo-pdf-placeholder .pdf-icon {
-            font-size: 1.8rem;
-            opacity: 0.4;
-        }
-
-        .demo-panel:nth-child(2) .demo-pdf-placeholder {
-            border-color: var(--accent-dim);
-            background: rgba(201, 168, 76, 0.03);
-        }
-
-        .demo-panel:nth-child(2) .demo-pdf-placeholder .pdf-icon {
-            color: var(--accent);
-            opacity: 0.6;
-        }
-
-        /* ============ TECH STACK ============ */
-        .tech-grid {
+        .demo-panel-body {
+            flex: 1;
             display: flex;
-            flex-wrap: wrap;
-            gap: 0.75rem;
-            margin-top: 2rem;
+            align-items: center;
+            justify-content: center;
+            position: relative;
+            overflow: hidden;
         }
 
-        .tech-tag {
-            padding: 0.55rem 1.2rem;
-            background: var(--bg-card);
-            border: 1px solid var(--border);
-            border-radius: 100px;
-            font-size: 0.82rem;
-            color: var(--text-secondary);
-            font-weight: 400;
-            transition: all 0.3s ease;
+        /* Simulated PDF pages */
+        .mock-pdf {
+            width: 70%;
+            height: 80%;
+            background: #f5f5f0;
+            box-shadow: 0 2px 12px rgba(0,0,0,0.3);
+            padding: 12%;
+            display: flex;
+            flex-direction: column;
+            gap: 6px;
         }
 
-        .tech-tag:hover {
-            border-color: var(--accent-dim);
-            color: var(--accent);
+        .mock-pdf-line {
+            height: 3px;
+            background: #c0c0c0;
+            border-radius: 1px;
         }
 
-        /* ============ DOWNLOAD / CTA ============ */
-        .cta-section {
-            text-align: center;
-            padding: 8rem 2rem;
+        .mock-pdf-line.short { width: 60%; }
+        .mock-pdf-line.medium { width: 80%; }
+        .mock-pdf-line.long { width: 95%; }
+        .mock-pdf-line.gap { height: 8px; background: transparent; }
+
+        .mock-pdf-line.diff-add {
+            background: rgba(48, 224, 96, 0.4);
+        }
+
+        .mock-pdf-line.diff-remove {
+            background: rgba(224, 48, 48, 0.3);
+        }
+
+        .mock-pdf-line.diff-change {
+            background: rgba(240, 192, 48, 0.4);
+        }
+
+        /* Middle diff panel overlay */
+        .demo-panel.diff .mock-pdf {
+            background: #f0ece0;
+        }
+
+        /* ============================================================
+           TECH STACK SECTION
+           ============================================================ */
+        .techstack {
+            padding: 6rem 0;
+            background: var(--concrete-dark);
             position: relative;
         }
 
-        .cta-section::before {
-            content: '';
-            position: absolute;
-            bottom: 0;
-            left: 50%;
-            transform: translateX(-50%);
-            width: 600px;
-            height: 600px;
-            background: radial-gradient(ellipse, rgba(74, 111, 165, 0.08) 0%, transparent 70%);
-            pointer-events: none;
+        .tech-grid {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 1rem;
+            justify-content: center;
         }
 
-        .cta-section .section-title {
-            margin-bottom: 1.5rem;
+        .tech-badge {
+            display: flex;
+            align-items: center;
+            gap: 0.6rem;
+            padding: 0.7rem 1.2rem;
+            background: var(--concrete-mid);
+            border: 1px solid rgba(240, 192, 48, 0.1);
+            font-family: 'Share Tech Mono', monospace;
+            font-size: 0.8rem;
+            color: var(--steel-text);
+            letter-spacing: 0.05em;
+            transition: border-color 0.2s linear, color 0.2s linear, transform 0.15s linear;
+            cursor: default;
+            position: relative;
         }
 
-        .cta-section .section-desc {
-            margin: 0 auto 2.5rem;
+        .tech-badge:hover {
+            border-color: var(--warning-yellow-dim);
+            color: var(--warning-yellow);
+            transform: translateY(-2px);
         }
 
-        .install-block {
-            display: inline-flex;
+        .tech-badge .led {
+            flex-shrink: 0;
+        }
+
+        .tech-category {
+            font-family: 'Oswald', sans-serif;
+            font-weight: 600;
+            font-size: 0.7rem;
+            text-transform: uppercase;
+            letter-spacing: 0.2em;
+            color: var(--concrete-surface);
+            text-align: center;
+            width: 100%;
+            margin-top: 1rem;
+            margin-bottom: 0.5rem;
+            display: flex;
             align-items: center;
             gap: 1rem;
-            background: var(--bg-card);
-            border: 1px solid var(--border);
-            border-radius: 12px;
-            padding: 1rem 1.5rem;
-            margin-top: 2rem;
-            font-family: 'DM Mono', 'SF Mono', 'Fira Code', monospace;
-            font-size: 0.88rem;
-            color: var(--text-secondary);
+            justify-content: center;
         }
 
-        .install-block .prompt {
-            color: var(--accent);
+        .tech-category::before,
+        .tech-category::after {
+            content: '';
+            height: 1px;
+            width: 40px;
+            background: var(--concrete-surface);
+        }
+
+        /* ============================================================
+           DOWNLOAD / GETTING STARTED
+           ============================================================ */
+        .download {
+            padding: 6rem 0;
+            background: var(--concrete-mid);
+            position: relative;
+        }
+
+        .download-panel {
+            background: var(--concrete-dark);
+            border: 1px solid rgba(240, 192, 48, 0.15);
+            padding: 3rem;
+            max-width: 800px;
+            margin: 0 auto;
+            position: relative;
+        }
+
+        .install-steps {
+            display: flex;
+            flex-direction: column;
+            gap: 1rem;
+        }
+
+        .install-step {
+            display: flex;
+            align-items: stretch;
+            gap: 1rem;
+        }
+
+        .install-step-num {
+            font-family: 'Oswald', sans-serif;
+            font-weight: 700;
+            font-size: 0.9rem;
+            color: var(--concrete-surface);
+            width: 28px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-shrink: 0;
+            border-right: 2px solid var(--concrete-surface);
+            padding-right: 0.75rem;
+        }
+
+        .install-step-content {
+            flex: 1;
+        }
+
+        .install-step-label {
+            font-family: 'Barlow Condensed', sans-serif;
+            font-weight: 500;
+            font-size: 0.85rem;
+            color: var(--steel-text);
+            text-transform: uppercase;
+            letter-spacing: 0.1em;
+            margin-bottom: 0.4rem;
+        }
+
+        .code-block {
+            background: rgba(26, 26, 26, 0.8);
+            border: 1px solid rgba(240, 192, 48, 0.08);
+            padding: 0.75rem 1rem;
+            font-family: 'Share Tech Mono', monospace;
+            font-size: 0.85rem;
+            color: var(--warning-yellow);
+            overflow-x: auto;
+            position: relative;
+        }
+
+        .code-block .prompt {
+            color: var(--concrete-surface);
             user-select: none;
         }
 
-        .install-block code {
-            color: var(--text-primary);
+        .code-block:hover {
+            border-color: rgba(240, 192, 48, 0.25);
         }
 
-        .copy-btn {
-            background: none;
-            border: 1px solid var(--border-light);
-            color: var(--text-muted);
-            padding: 0.35rem 0.6rem;
-            border-radius: 6px;
+        .download-binaries {
+            margin-top: 2.5rem;
+            padding-top: 2rem;
+            border-top: 1px dashed rgba(240, 192, 48, 0.15);
+        }
+
+        .download-binaries-label {
+            font-family: 'Share Tech Mono', monospace;
+            font-size: 0.65rem;
+            color: var(--concrete-surface);
+            text-transform: uppercase;
+            letter-spacing: 0.2em;
+            margin-bottom: 1rem;
+            display: flex;
+            align-items: center;
+            gap: 0.75rem;
+        }
+
+        .download-binaries-label::before {
+            content: '';
+            display: block;
+            width: 30px;
+            height: 1px;
+            background: var(--concrete-surface);
+        }
+
+        .download-cards {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 1rem;
+        }
+
+        .download-card {
+            background: rgba(42, 42, 42, 0.6);
+            border: 1px solid rgba(240, 192, 48, 0.12);
+            padding: 1.25rem 1.5rem;
+            display: flex;
+            flex-direction: column;
+            gap: 0.75rem;
+            position: relative;
+            transition: border-color 0.2s linear, box-shadow 0.2s linear;
+        }
+
+        .download-card:hover {
+            border-color: rgba(240, 192, 48, 0.35);
+            box-shadow: 0 0 16px rgba(240, 192, 48, 0.06);
+        }
+
+        .download-card-header {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+        }
+
+        .download-card-format {
+            font-family: 'Oswald', sans-serif;
+            font-weight: 700;
+            font-size: 1.1rem;
+            color: var(--steel-bright);
+            text-transform: uppercase;
+            letter-spacing: 0.05em;
+        }
+
+        .download-card-badge {
+            font-family: 'Share Tech Mono', monospace;
+            font-size: 0.6rem;
+            color: var(--warning-yellow-dim);
+            border: 1px solid var(--warning-yellow-dim);
+            padding: 0.15rem 0.5rem;
+            letter-spacing: 0.1em;
+        }
+
+        .download-card-desc {
+            font-family: 'Barlow', sans-serif;
+            font-weight: 300;
+            font-size: 0.85rem;
+            color: var(--steel-text);
+            line-height: 1.5;
+        }
+
+        .download-card-meta {
+            font-family: 'Share Tech Mono', monospace;
+            font-size: 0.65rem;
+            color: var(--concrete-surface);
+            letter-spacing: 0.05em;
+        }
+
+        .btn-download {
+            display: inline-flex;
+            align-items: center;
+            gap: 0.5rem;
+            font-family: 'Oswald', sans-serif;
+            font-weight: 600;
+            font-size: 0.8rem;
+            text-transform: uppercase;
+            letter-spacing: 0.15em;
+            padding: 0.65rem 1.5rem;
+            background: transparent;
+            color: var(--warning-yellow);
+            border: 1px solid var(--warning-yellow-dim);
             cursor: pointer;
+            text-decoration: none;
+            transition: background 0.15s linear, color 0.15s linear, transform 0.1s linear;
+            align-self: flex-start;
+        }
+
+        .btn-download:hover {
+            background: var(--warning-yellow);
+            color: var(--concrete-dark);
+            transform: translateY(-1px);
+        }
+
+        .btn-download:active {
+            transform: translateY(1px);
+        }
+
+        .download-or-divider {
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+            margin: 2rem 0 0.5rem;
+        }
+
+        .download-or-divider::before,
+        .download-or-divider::after {
+            content: '';
+            flex: 1;
+            height: 1px;
+            background: rgba(240, 192, 48, 0.1);
+        }
+
+        .download-or-divider span {
+            font-family: 'Share Tech Mono', monospace;
+            font-size: 0.65rem;
+            color: var(--concrete-surface);
+            letter-spacing: 0.2em;
+            text-transform: uppercase;
+        }
+
+        .requirements-note {
+            margin-top: 2rem;
+            padding: 1rem 1.25rem;
+            border-left: 3px solid var(--safety-orange);
+            background: rgba(224, 80, 32, 0.05);
+            font-family: 'Share Tech Mono', monospace;
             font-size: 0.75rem;
-            transition: all 0.2s ease;
+            color: var(--steel-text);
+            line-height: 1.6;
         }
 
-        .copy-btn:hover {
-            color: var(--text-primary);
-            border-color: var(--text-secondary);
+        .requirements-note strong {
+            color: var(--safety-orange);
+            font-weight: 400;
         }
 
-        /* ============ FOOTER ============ */
-        footer {
-            border-top: 1px solid var(--border);
-            padding: 3rem 2rem;
-            max-width: 1200px;
-            margin: 0 auto;
+        /* ============================================================
+           FOOTER
+           ============================================================ */
+        .footer {
+            padding: 3rem 0 2rem;
+            background: var(--concrete-dark);
+            border-top: 1px solid rgba(240, 192, 48, 0.08);
+            position: relative;
+            z-index: 1;
+        }
+
+        .footer-inner {
             display: flex;
             justify-content: space-between;
             align-items: center;
+            flex-wrap: wrap;
+            gap: 1rem;
         }
 
-        .footer-left {
-            font-family: var(--font-display);
-            font-size: 1.1rem;
-            color: var(--text-muted);
+        .footer-brand {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
         }
 
-        .footer-left span {
-            color: var(--accent-dim);
+        .footer-brand-icon {
+            width: 22px;
+            height: 22px;
+            border: 1.5px solid var(--warning-yellow-dim);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-family: 'Oswald', sans-serif;
+            font-weight: 700;
+            font-size: 0.7rem;
+            color: var(--warning-yellow-dim);
+        }
+
+        .footer-brand-text {
+            font-family: 'Oswald', sans-serif;
+            font-weight: 500;
+            font-size: 0.85rem;
+            color: var(--steel-text);
+            letter-spacing: 0.1em;
+            text-transform: uppercase;
+        }
+
+        .footer-meta {
+            font-family: 'Share Tech Mono', monospace;
+            font-size: 0.65rem;
+            color: var(--concrete-surface);
+            letter-spacing: 0.1em;
+            text-align: right;
         }
 
         .footer-links {
             display: flex;
-            gap: 2rem;
+            gap: 1.5rem;
             list-style: none;
         }
 
         .footer-links a {
-            color: var(--text-muted);
+            font-family: 'Share Tech Mono', monospace;
+            font-size: 0.7rem;
+            color: var(--steel-text);
             text-decoration: none;
-            font-size: 0.82rem;
-            transition: color 0.3s ease;
+            letter-spacing: 0.1em;
+            transition: color 0.2s linear;
         }
 
         .footer-links a:hover {
-            color: var(--text-secondary);
+            color: var(--warning-yellow);
         }
 
-        /* ============ DIVIDER ============ */
+        /* ============================================================
+           DIVIDER
+           ============================================================ */
         .section-divider {
-            max-width: 1200px;
-            margin: 0 auto;
             height: 1px;
-            background: linear-gradient(to right, transparent, var(--border), transparent);
+            background: linear-gradient(90deg,
+                transparent 0%,
+                rgba(240, 192, 48, 0.2) 20%,
+                rgba(240, 192, 48, 0.2) 80%,
+                transparent 100%
+            );
         }
 
-        /* ============ ANIMATIONS ============ */
-        @keyframes fadeUp {
-            from {
-                opacity: 0;
-                transform: translateY(24px);
+        /* ============================================================
+           RESPONSIVE
+           ============================================================ */
+        @media (max-width: 1024px) {
+            .features-grid {
+                grid-template-columns: repeat(2, 1fr);
             }
-            to {
-                opacity: 1;
-                transform: translateY(0);
+
+            .workflow-steps {
+                grid-template-columns: repeat(2, 1fr);
+                gap: 2rem;
+            }
+
+            .workflow-steps::before {
+                display: none;
+            }
+
+            .demo-content {
+                flex-direction: column;
+            }
+
+            .demo-sidebar {
+                width: 100%;
+                border-right: none;
+                border-bottom: 1px solid rgba(240, 192, 48, 0.08);
+                max-height: 180px;
+                overflow: hidden;
+            }
+
+            .demo-panels {
+                grid-template-columns: repeat(3, 1fr);
+                min-height: 300px;
+            }
+
+            section {
+                padding-top: 4rem;
+                padding-bottom: 4rem;
+            }
+
+            .features, .workflow, .demo, .techstack, .download {
+                padding: 4rem 0;
             }
         }
 
-        @keyframes pulse {
-            0%, 100% { opacity: 1; }
-            50% { opacity: 0.4; }
-        }
+        @media (max-width: 768px) {
+            .navbar-links {
+                display: none;
+                position: absolute;
+                top: 56px;
+                left: 0;
+                width: 100%;
+                background: rgba(26, 26, 26, 0.97);
+                flex-direction: column;
+                padding: 1rem 2rem;
+                gap: 0.75rem;
+                border-bottom: 1px solid rgba(240, 192, 48, 0.12);
+            }
 
-        @keyframes scrollLine {
-            0% { opacity: 0; transform: scaleY(0); transform-origin: top; }
-            30% { opacity: 1; transform: scaleY(1); transform-origin: top; }
-            70% { opacity: 1; transform: scaleY(1); transform-origin: bottom; }
-            100% { opacity: 0; transform: scaleY(0); transform-origin: bottom; }
-        }
+            .navbar-links.open {
+                display: flex;
+            }
 
-        .fade-in {
-            opacity: 0;
-            transform: translateY(20px);
-            transition: opacity 0.7s ease, transform 0.7s ease;
-        }
+            .navbar-mobile-toggle {
+                display: block;
+            }
 
-        .fade-in.visible {
-            opacity: 1;
-            transform: translateY(0);
-        }
+            .hero-title {
+                font-size: 2.8rem;
+            }
+
+            .hero-tagline {
+                font-size: 1.2rem;
+            }
+
+            .hero-panel {
+                padding: 2rem 1.5rem;
+            }
+
+            .hero-measure {
+                display: none;
+            }
+
+            .section-title {
+                font-size: 2rem;
+            }
 
-        /* ============ RESPONSIVE ============ */
-        @media (max-width: 900px) {
             .features-grid {
                 grid-template-columns: 1fr;
             }
 
-            .demo-content {
+            .workflow-steps {
                 grid-template-columns: 1fr;
             }
 
-            .demo-sidebar {
-                display: none;
-            }
-
-            .demo-main {
+            .demo-panels {
                 grid-template-columns: 1fr;
+                min-height: auto;
             }
 
-            .nav-links {
-                display: none;
+            .demo-panel {
+                border-right: none;
+                border-bottom: 1px solid rgba(240, 192, 48, 0.06);
+                min-height: 200px;
             }
 
-            footer {
+            .download-panel {
+                padding: 2rem 1.5rem;
+            }
+
+            .footer-inner {
                 flex-direction: column;
-                gap: 1.5rem;
                 text-align: center;
             }
 
-            .workflow-step {
-                grid-template-columns: 50px 1fr;
-                gap: 1rem;
+            .footer-links {
+                flex-wrap: wrap;
+                justify-content: center;
             }
 
-            .step-number {
-                font-size: 2rem;
+            .footer-meta {
+                text-align: center;
+            }
+
+            .features, .workflow, .demo, .techstack, .download {
+                padding: 3rem 0;
+            }
+
+            .section-subtitle {
+                margin-bottom: 2rem;
+            }
+
+            .code-block {
+                font-size: 0.75rem;
+                word-break: break-all;
+            }
+
+            .download-cards {
+                grid-template-columns: 1fr;
             }
         }
 
-        @media (max-width: 600px) {
-            .hero h1 {
-                font-size: 2.8rem;
+        @media (max-width: 480px) {
+            .container {
+                padding: 0 1rem;
+            }
+
+            .hero-title {
+                font-size: 2.2rem;
+            }
+
+            .hero-tagline {
+                font-size: 1.1rem;
+            }
+
+            .hero-panel {
+                padding: 1.5rem 1.25rem;
             }
 
             .hero-actions {
                 flex-direction: column;
-                width: 100%;
-                max-width: 300px;
             }
 
             .btn-primary, .btn-secondary {
+                width: 100%;
                 justify-content: center;
             }
+
+            .section-title {
+                font-size: 1.6rem;
+            }
+
+            .section-subtitle {
+                font-size: 0.95rem;
+            }
+
+            .download-panel {
+                padding: 1.5rem 1rem;
+            }
+
+            .install-step {
+                flex-direction: column;
+                gap: 0.5rem;
+            }
+
+            .install-step-num {
+                border-right: none;
+                border-bottom: 1px solid var(--concrete-surface);
+                padding-right: 0;
+                padding-bottom: 0.5rem;
+                width: auto;
+                justify-content: flex-start;
+            }
+
+            .tech-badge {
+                font-size: 0.7rem;
+                padding: 0.5rem 0.8rem;
+            }
+
+            .features, .workflow, .demo, .techstack, .download {
+                padding: 2.5rem 0;
+            }
+
+            .navbar-inner {
+                padding: 0 1rem;
+            }
         }
     </style>
 </head>
 <body>
 
-    <!-- ============ NAVIGATION ============ -->
-    <nav id="navbar">
-        <a href="#" class="nav-logo">Docu<span>Mentor</span></a>
-        <ul class="nav-links">
-            <li><a href="#features">Features</a></li>
-            <li><a href="#workflow">Workflow</a></li>
-            <li><a href="#demo">Demo</a></li>
-            <li><a href="#download">Download</a></li>
-        </ul>
+    <!-- ============================================================
+         NAVBAR
+         ============================================================ -->
+    <nav class="navbar">
+        <div class="navbar-inner">
+            <a href="#hero" class="navbar-brand">
+                <div class="navbar-brand-icon">D</div>
+                <span class="navbar-brand-text">DocuMentor</span>
+            </a>
+            <button class="navbar-mobile-toggle" id="navToggle">MENU</button>
+            <ul class="navbar-links" id="navLinks">
+                <li><a href="#features">Features</a></li>
+                <li><a href="#workflow">Workflow</a></li>
+                <li><a href="#demo">Demo</a></li>
+                <li><a href="#techstack">Technik</a></li>
+                <li><a href="#download">Download</a></li>
+            </ul>
+        </div>
     </nav>
 
-    <!-- ============ HERO ============ -->
-    <section class="hero">
-        <div class="hero-badge">
-            <span class="dot"></span>
-            Open Source &middot; PySide6 Desktop App
-        </div>
-        <h1>XSL-Transformationen<br>unter <em>Kontrolle</em></h1>
-        <p class="hero-sub">
-            Verwalten, transformieren und vergleichen Sie Ihre XSL-basierten PDF-Dokumente &mdash;
-            mit voller Transparenz bei jeder Änderung.
-        </p>
-        <div class="hero-actions">
-            <a href="#download" class="btn-primary">
-                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M8 2v9m0 0L4.5 7.5M8 11l3.5-3.5M2 13h12"/></svg>
-                Jetzt herunterladen
-            </a>
-            <a href="#features" class="btn-secondary">Mehr erfahren</a>
-        </div>
-        <div class="scroll-indicator">
-            <div class="line"></div>
-        </div>
-    </section>
-
-    <!-- ============ FEATURES ============ -->
-    <div class="section-divider"></div>
-    <section id="features">
-        <div class="fade-in">
-            <p class="section-label">Features</p>
-            <h2 class="section-title">Präzisionswerkzeuge für<br>Dokument-Workflows</h2>
-            <p class="section-desc">
-                Jede Änderung an Ihren XSL-Dateien kann unerwartete Auswirkungen auf Dutzende
-                PDF-Dokumente haben. DocuMentor macht diese sichtbar.
-            </p>
-        </div>
-
-        <div class="features-grid fade-in">
-            <div class="feature-card">
-                <div class="feature-icon">
-                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="var(--accent)" stroke-width="1.3"><path d="M3 4h4v4H3zM3 12h4v4H3zM11 4h6M11 8h4M11 12h6M11 16h3"/></svg>
-                </div>
-                <h3>Hierarchische Baumstruktur</h3>
-                <p>Organisieren Sie XSL-Dateien und ihre XML-Eingaben in einer übersichtlichen, verschachtelten Struktur mit Drag-and-Drop.</p>
-            </div>
-            <div class="feature-card">
-                <div class="feature-icon">
-                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="var(--accent)" stroke-width="1.3"><rect x="2" y="3" width="6" height="8" rx="1"/><rect x="12" y="3" width="6" height="8" rx="1"/><path d="M5 14v3M15 14v3M5 17h10"/></svg>
-                </div>
-                <h3>PDF-Diff-Vergleich</h3>
-                <p>Drei-Panel-Ansicht mit Referenz, Diff und neuer Version. Alpha-Blending hebt Unterschiede visuell hervor.</p>
-            </div>
-            <div class="feature-card">
-                <div class="feature-icon">
-                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="var(--accent)" stroke-width="1.3"><circle cx="10" cy="10" r="7"/><path d="M10 6v4l2.5 2.5"/></svg>
-                </div>
-                <h3>Änderungsverfolgung</h3>
-                <p>Automatische blake2b-Hash-Berechnung erkennt sofort, welche XML-Dateien sich seit dem letzten Durchlauf verändert haben.</p>
-            </div>
-            <div class="feature-card">
-                <div class="feature-icon">
-                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="var(--accent)" stroke-width="1.3"><path d="M3 10h2l2-5 3 10 2-7 2 4h3"/></svg>
-                </div>
-                <h3>Asynchrone Verarbeitung</h3>
-                <p>Hintergrund-Threads halten die Oberfläche reaktionsfähig, auch bei rechenintensiven Transformationen und großen Dateien.</p>
-            </div>
-            <div class="feature-card">
-                <div class="feature-icon">
-                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="var(--accent)" stroke-width="1.3"><ellipse cx="10" cy="6" rx="7" ry="3"/><path d="M3 6v4c0 1.66 3.13 3 7 3s7-1.34 7-3V6M3 10v4c0 1.66 3.13 3 7 3s7-1.34 7-3v-4"/></svg>
-                </div>
-                <h3>PostgreSQL-Integration</h3>
-                <p>Direkte Datenbankanbindung für XML-Daten via ConnectorX und Polars &mdash; performant und typsicher.</p>
-            </div>
-            <div class="feature-card">
-                <div class="feature-icon">
-                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="var(--accent)" stroke-width="1.3"><path d="M4 4h12M4 4v12l4-3h8V4z"/><path d="M7 8h6M7 11h3"/></svg>
-                </div>
-                <h3>Toolchain-Konfiguration</h3>
-                <p>Flexible Verwaltung von Saxon, Apache FOP und diff-pdf. Unterstützt mehrere Versionen parallel.</p>
-            </div>
-        </div>
-    </section>
-
-    <!-- ============ WORKFLOW ============ -->
-    <div class="section-divider"></div>
-    <section id="workflow" class="workflow-section">
-        <div class="fade-in">
-            <p class="section-label">Workflow</p>
-            <h2 class="section-title">Vier Schritte zur Gewissheit</h2>
-            <p class="section-desc">
-                DocuMentor begleitet Sie durch den gesamten Validierungszyklus Ihrer
-                XSL-Transformationen.
-            </p>
-        </div>
-
-        <div class="workflow-steps">
-            <div class="workflow-step">
-                <div class="step-number">01</div>
-                <div class="step-content">
-                    <h3>XSL-Dateien bearbeiten</h3>
-                    <p>Nehmen Sie die benötigten Änderungen an Ihren XSL-Stylesheets vor &mdash; in Ihrem gewohnten Editor.</p>
-                </div>
-            </div>
-            <div class="workflow-step">
-                <div class="step-number">02</div>
-                <div class="step-content">
-                    <h3>Transformation starten</h3>
-                    <p>DocuMentor führt die Transformation über Saxon und Apache FOP durch und generiert die neuen PDF-Dateien.</p>
-                </div>
-            </div>
-            <div class="workflow-step">
-                <div class="step-number">03</div>
-                <div class="step-content">
-                    <h3>PDF-Diff begutachten</h3>
-                    <p>Der visuelle Vergleich zeigt exakt, welche Seiten sich geändert haben und wo die Unterschiede liegen.</p>
-                </div>
-            </div>
-            <div class="workflow-step">
-                <div class="step-number">04</div>
-                <div class="step-content">
-                    <h3>Ergebnis verifizieren</h3>
-                    <p>Prüfen Sie, ob genau die richtigen Dokumente betroffen sind und die Änderungen Ihren Erwartungen entsprechen.</p>
-                </div>
-            </div>
-        </div>
-    </section>
-
-    <!-- ============ DEMO ============ -->
-    <div class="section-divider"></div>
-    <section id="demo" class="demo-section">
-        <div class="fade-in">
-            <p class="section-label">Oberfläche</p>
-            <h2 class="section-title">Alles im Blick</h2>
-            <p class="section-desc" style="margin-left:auto;margin-right:auto;">
-                Baumstruktur, Transformation und PDF-Vergleich &mdash; alles in einem Fenster.
-            </p>
-        </div>
-
-        <div class="demo-window fade-in">
-            <div class="demo-titlebar">
-                <div class="demo-dot"></div>
-                <div class="demo-dot"></div>
-                <div class="demo-dot"></div>
-                <span>DocuMentor &mdash; Projekt: Zeugnisse_WS2025</span>
-            </div>
-            <div class="demo-content">
-                <div class="demo-sidebar">
-                    <div class="demo-sidebar-title">Projektbaum</div>
-                    <div class="demo-tree">
-                        <div class="demo-tree-item">
-                            <span class="icon">&#9660;</span> Urkunden
-                        </div>
-                        <div class="demo-tree-item indent-1">
-                            <span class="icon">&#9660;</span> Bachelor
-                        </div>
-                        <div class="demo-tree-item indent-2 active">
-                            <span class="icon">&#9654;</span> urkunde_ba.xsl
-                        </div>
-                        <div class="demo-tree-item indent-2">
-                            <span class="icon">&#8226;</span> student_123.xml
-                        </div>
-                        <div class="demo-tree-item indent-2">
-                            <span class="icon">&#8226;</span> student_456.xml
-                        </div>
-                        <div class="demo-tree-item indent-1">
-                            <span class="icon">&#9654;</span> Master
-                        </div>
-                        <div class="demo-tree-item">
-                            <span class="icon">&#9654;</span> Zeugnisse
-                        </div>
-                        <div class="demo-tree-item">
-                            <span class="icon">&#9654;</span> Bescheide
-                        </div>
+    <!-- ============================================================
+         HERO
+         ============================================================ -->
+    <section class="hero" id="hero">
+        <div class="container">
+            <div class="hero-content">
+                <div class="hero-panel corner-brackets riveted reveal">
+                    <span class="rivet rivet-tl"></span>
+                    <span class="rivet rivet-tr"></span>
+                    <span class="rivet rivet-bl"></span>
+                    <span class="rivet rivet-br"></span>
+                    <div class="hero-measure hero-measure-top">750px</div>
+                    <div class="hero-measure hero-measure-right">CTRL-PANEL-01</div>
+                    <div class="hero-system-tag">
+                        <span class="led led-green"></span>
+                        SYSTEM AKTIV &mdash; XSL TRANSFORMATIONS-KONTROLLE v2.0
+                    </div>
+                    <h1 class="hero-title">Docu<span>Mentor</span></h1>
+                    <p class="hero-tagline">Industrielle XSL-Transformationskontrolle</p>
+                    <p class="hero-desc">
+                        Desktop-Anwendung zur Verwaltung und Validierung von XSL-Transformationen.
+                        Erkennen Sie jede Auswirkung Ihrer XSL-Änderungen &mdash; bevor es zu spät ist.
+                        PDF-Generierung, Vergleich und Qualitätssicherung in einem Werkzeug.
+                    </p>
+                    <div class="hero-actions">
+                        <a href="#download" class="btn-primary">
+                            &#9660; Installation starten
+                        </a>
+                        <a href="#features" class="btn-secondary">
+                            &#9654; Features erkunden
+                        </a>
                     </div>
                 </div>
-                <div class="demo-main">
-                    <div class="demo-panel">
-                        <div class="demo-panel-header">Referenz</div>
-                        <div class="demo-panel-body">
-                            <div class="demo-pdf-placeholder">
-                                <span class="pdf-icon">&#128196;</span>
-                                PDF-Vorschau
+            </div>
+        </div>
+    </section>
+
+    <div class="hazard-stripe"></div>
+
+    <!-- ============================================================
+         FEATURES
+         ============================================================ -->
+    <section class="features" id="features">
+        <div class="container">
+            <div class="section-label reveal" data-num="SEC-01">Features</div>
+            <h2 class="section-title reveal">Kontrollraum-<br>Funktionen</h2>
+            <p class="section-subtitle reveal">Sechs Kernmodule für die lückenlose Überwachung Ihrer XSL-Transformationen und PDF-Ergebnisse.</p>
+
+            <div class="features-grid">
+                <!-- Feature 1 -->
+                <div class="feature-card corner-brackets reveal from-bottom reveal-delay-1">
+                    <span class="feature-number">F-001</span>
+                    <div class="feature-icon">&#9776;</div>
+                    <div class="feature-name">Hierarchische Baumstruktur</div>
+                    <p class="feature-desc">Organisieren Sie Ihre XSL- und XML-Dateien in einer intuitiven Baumstruktur mit TreeNodes. Drag-and-Drop, Kontextmenüs und Vererbungsdarstellung inklusive.</p>
+                </div>
+
+                <!-- Feature 2 -->
+                <div class="feature-card corner-brackets reveal from-bottom reveal-delay-2">
+                    <span class="feature-number">F-002</span>
+                    <div class="feature-icon">&#9641;</div>
+                    <div class="feature-name">PDF-Diff-Vergleich</div>
+                    <p class="feature-desc">Drei-Panel-Ansicht mit Referenz-, Diff- und Neu-Darstellung. Alpha-Blending, Zoom und Pan für präzise visuelle Qualitätskontrolle.</p>
+                </div>
+
+                <!-- Feature 3 -->
+                <div class="feature-card corner-brackets reveal from-bottom reveal-delay-3">
+                    <span class="feature-number">F-003</span>
+                    <div class="feature-icon">#</div>
+                    <div class="feature-name">Änderungsverfolgung</div>
+                    <p class="feature-desc">Blake2b-Hashing für jede XML-Datei. Automatische Berechnung im Hintergrund erkennt sofort, welche Dateien sich verändert haben.</p>
+                </div>
+
+                <!-- Feature 4 -->
+                <div class="feature-card corner-brackets reveal from-bottom reveal-delay-4">
+                    <span class="feature-number">F-004</span>
+                    <div class="feature-icon">&#8644;</div>
+                    <div class="feature-name">Asynchrone Verarbeitung</div>
+                    <p class="feature-desc">Hintergrund-Threads für Hash-Berechnungen und Datenbankabfragen. Die Benutzeroberfläche bleibt stets reaktionsfähig.</p>
+                </div>
+
+                <!-- Feature 5 -->
+                <div class="feature-card corner-brackets reveal from-bottom reveal-delay-5">
+                    <span class="feature-number">F-005</span>
+                    <div class="feature-icon">&#9107;</div>
+                    <div class="feature-name">PostgreSQL-Integration</div>
+                    <p class="feature-desc">Direkte Datenbankanbindung mit SSL-Unterstützung. SQL-Abfragen via ConnectorX und Polars DataFrames für schnelle Datenverarbeitung.</p>
+                </div>
+
+                <!-- Feature 6 -->
+                <div class="feature-card corner-brackets reveal from-bottom reveal-delay-6">
+                    <span class="feature-number">F-006</span>
+                    <div class="feature-icon">&#9881;</div>
+                    <div class="feature-name">Toolchain-Konfiguration</div>
+                    <p class="feature-desc">Flexible Verwaltung von Saxon, Apache FOP und diff-pdf. Mehrere Versionen parallel konfigurierbar mit ID-basiertem Referenzsystem.</p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <div class="section-divider"></div>
+
+    <!-- ============================================================
+         WORKFLOW
+         ============================================================ -->
+    <section class="workflow" id="workflow">
+        <div class="container">
+            <div class="section-label reveal" data-num="SEC-02">Workflow</div>
+            <h2 class="section-title reveal">Arbeitsablauf</h2>
+            <p class="section-subtitle reveal">Vier Schritte von der XSL-Änderung bis zur verifizierten PDF &mdash; wiederholbar und zuverlässig.</p>
+
+            <div class="workflow-steps">
+                <div class="workflow-step reveal from-left reveal-delay-1">
+                    <div class="step-number">01</div>
+                    <div class="step-title">XSL-Dateien bearbeiten</div>
+                    <p class="step-desc">Führen Sie die benötigten Änderungen an Ihren XSL-Stylesheets durch. DocuMentor Überwacht die Abhängigkeiten.</p>
+                </div>
+                <div class="workflow-step reveal from-left reveal-delay-2">
+                    <div class="step-number">02</div>
+                    <div class="step-title">Transformation starten</div>
+                    <p class="step-desc">Starten Sie die Transformation direkt aus DocuMentor. Saxon und Apache FOP werden automatisch orchestriert.</p>
+                </div>
+                <div class="workflow-step reveal from-right reveal-delay-3">
+                    <div class="step-number">03</div>
+                    <div class="step-title">PDF-Diff begutachten</div>
+                    <p class="step-desc">Vergleichen Sie Referenz- und neue PDF in der Drei-Panel-Ansicht. Abweichungen werden sofort sichtbar.</p>
+                </div>
+                <div class="workflow-step reveal from-right reveal-delay-4">
+                    <div class="step-number">04</div>
+                    <div class="step-title">Ergebnis verifizieren</div>
+                    <p class="step-desc">Prüfen Sie, ob nur die erwarteten PDF-Dateien geändert wurden und das Ergebnis korrekt ist.</p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <div class="hazard-stripe-thin"></div>
+
+    <!-- ============================================================
+         DEMO / SCREENSHOT
+         ============================================================ -->
+    <section class="demo" id="demo">
+        <div class="container">
+            <div class="section-label reveal" data-num="SEC-03">Interface</div>
+            <h2 class="section-title reveal">Kontrollstation</h2>
+            <p class="section-subtitle reveal">Überblick über die Anwendungsoberfläche &mdash; Baumstruktur links, PDF-Vergleich rechts.</p>
+
+            <div class="demo-frame reveal from-bottom">
+                <div class="demo-titlebar">
+                    <div class="demo-titlebar-dots">
+                        <span class="demo-titlebar-dot red"></span>
+                        <span class="demo-titlebar-dot yellow"></span>
+                        <span class="demo-titlebar-dot green"></span>
+                    </div>
+                    <span class="demo-titlebar-text">DocuMentor &mdash; Projekt: Flexnow Urkunden 2026</span>
+                    <span style="margin-left:auto;" class="demo-titlebar-text"><span class="led led-green"></span> BEREIT</span>
+                </div>
+                <div class="demo-content">
+                    <!-- Sidebar -->
+                    <div class="demo-sidebar">
+                        <div class="demo-sidebar-label">Projektbaum</div>
+                        <div class="tree-item">
+                            <span class="tree-icon">&#9660;</span> Urkunden
+                        </div>
+                        <div class="tree-item level-1">
+                            <span class="tree-icon">&#9660;</span> Bachelor
+                        </div>
+                        <div class="tree-item level-2">
+                            <span class="tree-icon">&#9654;</span> urkunde_ba.xsl
+                        </div>
+                        <div class="tree-item level-2 active">
+                            <span class="tree-icon">&#9654;</span> testdaten_ba.xml
+                        </div>
+                        <div class="tree-item level-1">
+                            <span class="tree-icon">&#9660;</span> Master
+                        </div>
+                        <div class="tree-item level-2">
+                            <span class="tree-icon">&#9654;</span> urkunde_ma.xsl
+                        </div>
+                        <div class="tree-item level-2">
+                            <span class="tree-icon">&#9654;</span> testdaten_ma.xml
+                        </div>
+                        <div class="tree-item">
+                            <span class="tree-icon">&#9660;</span> Zeugnisse
+                        </div>
+                        <div class="tree-item level-1">
+                            <span class="tree-icon">&#9654;</span> zeugnis_base.xsl
+                        </div>
+                        <div class="tree-item level-1">
+                            <span class="tree-icon">&#9654;</span> layout_common.xsl
+                        </div>
+                    </div>
+                    <!-- Panels -->
+                    <div class="demo-panels">
+                        <div class="demo-panel">
+                            <div class="demo-panel-header"><span class="led led-green"></span> Referenz-PDF</div>
+                            <div class="demo-panel-body">
+                                <div class="mock-pdf">
+                                    <div class="mock-pdf-line long"></div>
+                                    <div class="mock-pdf-line medium"></div>
+                                    <div class="mock-pdf-line long"></div>
+                                    <div class="mock-pdf-line gap"></div>
+                                    <div class="mock-pdf-line short"></div>
+                                    <div class="mock-pdf-line long"></div>
+                                    <div class="mock-pdf-line medium"></div>
+                                    <div class="mock-pdf-line gap"></div>
+                                    <div class="mock-pdf-line long"></div>
+                                    <div class="mock-pdf-line short"></div>
+                                    <div class="mock-pdf-line long"></div>
+                                    <div class="mock-pdf-line medium"></div>
+                                </div>
                             </div>
                         </div>
-                    </div>
-                    <div class="demo-panel">
-                        <div class="demo-panel-header">Diff</div>
-                        <div class="demo-panel-body">
-                            <div class="demo-pdf-placeholder">
-                                <span class="pdf-icon">&#128269;</span>
-                                Unterschiede
+                        <div class="demo-panel diff">
+                            <div class="demo-panel-header"><span class="led led-yellow"></span> Diff-Ansicht</div>
+                            <div class="demo-panel-body">
+                                <div class="mock-pdf">
+                                    <div class="mock-pdf-line long"></div>
+                                    <div class="mock-pdf-line medium diff-change"></div>
+                                    <div class="mock-pdf-line long"></div>
+                                    <div class="mock-pdf-line gap"></div>
+                                    <div class="mock-pdf-line short diff-remove"></div>
+                                    <div class="mock-pdf-line long diff-add"></div>
+                                    <div class="mock-pdf-line medium"></div>
+                                    <div class="mock-pdf-line gap"></div>
+                                    <div class="mock-pdf-line long diff-change"></div>
+                                    <div class="mock-pdf-line short"></div>
+                                    <div class="mock-pdf-line long"></div>
+                                    <div class="mock-pdf-line medium diff-add"></div>
+                                </div>
                             </div>
                         </div>
-                    </div>
-                    <div class="demo-panel">
-                        <div class="demo-panel-header">Neu</div>
-                        <div class="demo-panel-body">
-                            <div class="demo-pdf-placeholder">
-                                <span class="pdf-icon">&#128196;</span>
-                                PDF-Vorschau
+                        <div class="demo-panel">
+                            <div class="demo-panel-header"><span class="led led-orange"></span> Neue PDF</div>
+                            <div class="demo-panel-body">
+                                <div class="mock-pdf">
+                                    <div class="mock-pdf-line long"></div>
+                                    <div class="mock-pdf-line long"></div>
+                                    <div class="mock-pdf-line long"></div>
+                                    <div class="mock-pdf-line gap"></div>
+                                    <div class="mock-pdf-line medium"></div>
+                                    <div class="mock-pdf-line long"></div>
+                                    <div class="mock-pdf-line medium"></div>
+                                    <div class="mock-pdf-line gap"></div>
+                                    <div class="mock-pdf-line long"></div>
+                                    <div class="mock-pdf-line short"></div>
+                                    <div class="mock-pdf-line long"></div>
+                                    <div class="mock-pdf-line long"></div>
+                                </div>
                             </div>
                         </div>
                     </div>
@@ -1000,99 +1812,230 @@
         </div>
     </section>
 
-    <!-- ============ TECH STACK ============ -->
     <div class="section-divider"></div>
-    <section id="tech">
-        <div class="fade-in">
-            <p class="section-label">Technologie</p>
-            <h2 class="section-title">Bewährter Stack</h2>
-            <p class="section-desc">Aufgebaut auf robusten, etablierten Technologien.</p>
-            <div class="tech-grid">
-                <span class="tech-tag">Python 3</span>
-                <span class="tech-tag">PySide6 / Qt</span>
-                <span class="tech-tag">Saxon XSLT</span>
-                <span class="tech-tag">Apache FOP</span>
-                <span class="tech-tag">diff-pdf</span>
-                <span class="tech-tag">PostgreSQL</span>
-                <span class="tech-tag">Polars</span>
-                <span class="tech-tag">ConnectorX</span>
-                <span class="tech-tag">Pydantic</span>
-                <span class="tech-tag">blake2b Hashing</span>
-                <span class="tech-tag">PyInstaller</span>
+
+    <!-- ============================================================
+         TECH STACK
+         ============================================================ -->
+    <section class="techstack" id="techstack">
+        <div class="container">
+            <div class="section-label reveal" data-num="SEC-04">Technologie</div>
+            <h2 class="section-title reveal">Tech-Stack</h2>
+            <p class="section-subtitle reveal">Bewährte Industriekomponenten für maximale Zuverlässigkeit.</p>
+
+            <div class="tech-grid reveal from-bottom">
+                <div class="tech-category">Kern</div>
+                <div class="tech-badge"><span class="led led-green"></span> Python 3</div>
+                <div class="tech-badge"><span class="led led-green"></span> PySide6 / Qt</div>
+                <div class="tech-badge"><span class="led led-green"></span> Pydantic</div>
+
+                <div class="tech-category">Transformation</div>
+                <div class="tech-badge"><span class="led led-yellow"></span> Saxon XSLT</div>
+                <div class="tech-badge"><span class="led led-yellow"></span> Apache FOP</div>
+                <div class="tech-badge"><span class="led led-yellow"></span> diff-pdf</div>
+
+                <div class="tech-category">Daten</div>
+                <div class="tech-badge"><span class="led led-orange"></span> PostgreSQL</div>
+                <div class="tech-badge"><span class="led led-orange"></span> Polars</div>
+                <div class="tech-badge"><span class="led led-orange"></span> ConnectorX</div>
+
+                <div class="tech-category">Werkzeuge</div>
+                <div class="tech-badge"><span class="led led-green"></span> blake2b</div>
+                <div class="tech-badge"><span class="led led-green"></span> PyInstaller</div>
             </div>
         </div>
     </section>
 
-    <!-- ============ DOWNLOAD / CTA ============ -->
-    <div class="section-divider"></div>
-    <section id="download" class="cta-section">
-        <div class="fade-in">
-            <p class="section-label">Loslegen</p>
-            <h2 class="section-title">Bereit für kontrollierte<br>Transformationen?</h2>
-            <p class="section-desc">
-                DocuMentor ist Open Source. Klonen Sie das Repository und starten Sie in wenigen Minuten.
-            </p>
-            <div class="hero-actions" style="justify-content:center;opacity:1;animation:none;">
-                <a href="https://github.com" class="btn-primary" target="_blank">
-                    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/></svg>
-                    GitHub Repository
-                </a>
-            </div>
-            <div class="install-block fade-in">
-                <span class="prompt">$</span>
-                <code>git clone &amp;&amp; uv sync &amp;&amp; uv run python src/main.py</code>
-                <button class="copy-btn" onclick="copyInstall()" title="Kopieren">
-                    <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="5" y="5" width="9" height="9" rx="1.5"/><path d="M5 11H3.5A1.5 1.5 0 012 9.5v-7A1.5 1.5 0 013.5 1h7A1.5 1.5 0 0112 2.5V5"/></svg>
-                </button>
+    <div class="hazard-stripe"></div>
+
+    <!-- ============================================================
+         DOWNLOAD / GETTING STARTED
+         ============================================================ -->
+    <section class="download" id="download">
+        <div class="container">
+            <div class="section-label reveal" data-num="SEC-05">Installation</div>
+            <h2 class="section-title reveal">Inbetriebnahme</h2>
+            <p class="section-subtitle reveal">Windows-Pakete für den sofortigen Einsatz &mdash; oder drei Befehle aus dem Quellcode.</p>
+
+            <div class="download-panel corner-brackets riveted reveal from-bottom">
+                <span class="rivet rivet-tl"></span>
+                <span class="rivet rivet-tr"></span>
+                <span class="rivet rivet-bl"></span>
+                <span class="rivet rivet-br"></span>
+
+                <!-- 1. Windows Binaries -->
+                <div class="download-binaries" style="margin-top: 0; padding-top: 0; border-top: none;">
+                    <div class="download-binaries-label">Windows — Vorkompilierte Pakete</div>
+                    <div class="download-cards">
+                        <div class="download-card corner-brackets">
+                            <div class="download-card-header">
+                                <span class="download-card-format">&#9662; MSI-Installer</span>
+                                <span class="download-card-badge">EMPFOHLEN</span>
+                            </div>
+                            <p class="download-card-desc">Windows-Installer mit automatischer Einrichtung. Erstellt Startmenü-Einträge und ermöglicht saubere Deinstallation über die Systemsteuerung.</p>
+                            <span class="download-card-meta">DocuMentor-2.0-win64.msi &mdash; ca. 85 MB</span>
+                            <a href="#" class="btn-download">&#9660; MSI herunterladen</a>
+                        </div>
+                        <div class="download-card corner-brackets">
+                            <div class="download-card-header">
+                                <span class="download-card-format">&#9662; ZIP-Archiv</span>
+                                <span class="download-card-badge">PORTABEL</span>
+                            </div>
+                            <p class="download-card-desc">Portable Version ohne Installation. Entpacken und direkt starten &mdash; ideal für eingeschränkte Umgebungen ohne Administratorrechte.</p>
+                            <span class="download-card-meta">DocuMentor-2.0-win64-portable.zip &mdash; ca. 80 MB</span>
+                            <a href="#" class="btn-download">&#9660; ZIP herunterladen</a>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- 2. Hinweis Windows -->
+                <div class="requirements-note">
+                    <strong>HINWEIS:</strong> Die Windows-Pakete enthalten alle Abhängigkeiten inklusive Python-Runtime. Lediglich eine <strong>Java Runtime</strong> (für Saxon) muss separat installiert werden. Für die volle Performance der Pool-Worker wird ein <strong>Java JDK</strong> (statt nur JRE) empfohlen.
+                </div>
+
+                <!-- 3. Quellcode -->
+                <div class="download-or-divider"><span>oder aus Quellcode</span></div>
+
+                <div class="install-steps">
+                    <div class="install-step">
+                        <div class="install-step-num">01</div>
+                        <div class="install-step-content">
+                            <div class="install-step-label">Repository klonen</div>
+                            <div class="code-block"><span class="prompt">$ </span>git clone https://github.com/your-org/xsl-validator.git</div>
+                        </div>
+                    </div>
+                    <div class="install-step">
+                        <div class="install-step-num">02</div>
+                        <div class="install-step-content">
+                            <div class="install-step-label">Abhängigkeiten installieren</div>
+                            <div class="code-block"><span class="prompt">$ </span>uv sync</div>
+                        </div>
+                    </div>
+                    <div class="install-step">
+                        <div class="install-step-num">03</div>
+                        <div class="install-step-content">
+                            <div class="install-step-label">Anwendung starten</div>
+                            <div class="code-block"><span class="prompt">$ </span>uv run python src/main.py</div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- 4. Hinweis Quellcode -->
+                <div class="requirements-note">
+                    <strong>HINWEIS:</strong> Erfordert Python 3.13+, Java Runtime (für Saxon) und den Paketmanager <strong>uv</strong>. Für die volle Performance der Pool-Worker wird ein <strong>Java JDK</strong> (statt nur JRE) empfohlen.
+                </div>
             </div>
         </div>
     </section>
 
-    <!-- ============ FOOTER ============ -->
-    <footer>
-        <div class="footer-left">Docu<span>Mentor</span> &copy; 2025</div>
-        <ul class="footer-links">
-            <li><a href="https://github.com" target="_blank">GitHub</a></li>
-            <li><a href="#features">Features</a></li>
-            <li><a href="#workflow">Workflow</a></li>
-        </ul>
+    <div class="hazard-stripe-thin"></div>
+
+    <!-- ============================================================
+         FOOTER
+         ============================================================ -->
+    <footer class="footer">
+        <div class="container">
+            <div class="footer-inner">
+                <div class="footer-brand">
+                    <div class="footer-brand-icon">D</div>
+                    <span class="footer-brand-text">DocuMentor</span>
+                </div>
+                <ul class="footer-links">
+                    <li><a href="#features">Features</a></li>
+                    <li><a href="#workflow">Workflow</a></li>
+                    <li><a href="#techstack">Technik</a></li>
+                    <li><a href="#download">Download</a></li>
+                </ul>
+                <div class="footer-meta">
+                    SYSTEM // DOCUMENTOR // BUILD 2026.02<br>
+                    PySide6 Desktop-Anwendung // Open Source
+                </div>
+            </div>
+        </div>
     </footer>
 
-    <!-- ============ SCRIPTS ============ -->
+    <!-- ============================================================
+         JAVASCRIPT
+         ============================================================ -->
     <script>
-        // Navbar scroll effect
-        const navbar = document.getElementById('navbar');
-        window.addEventListener('scroll', () => {
-            navbar.classList.toggle('scrolled', window.scrollY > 40);
-        });
+        // ============================================================
+        // Mobile Navigation Toggle
+        // ============================================================
+        (function() {
+            const toggle = document.getElementById('navToggle');
+            const links = document.getElementById('navLinks');
+            if (toggle && links) {
+                toggle.addEventListener('click', function() {
+                    links.classList.toggle('open');
+                    toggle.textContent = links.classList.contains('open') ? 'CLOSE' : 'MENU';
+                });
+                // Close on link click
+                links.querySelectorAll('a').forEach(function(a) {
+                    a.addEventListener('click', function() {
+                        links.classList.remove('open');
+                        toggle.textContent = 'MENU';
+                    });
+                });
+            }
+        })();
 
-        // Intersection Observer for fade-in elements
-        const observer = new IntersectionObserver(
-            (entries) => {
-                entries.forEach(entry => {
+        // ============================================================
+        // Scroll Reveal (mechanical, linear)
+        // ============================================================
+        (function() {
+            const reveals = document.querySelectorAll('.reveal');
+            const observer = new IntersectionObserver(function(entries) {
+                entries.forEach(function(entry) {
                     if (entry.isIntersecting) {
                         entry.target.classList.add('visible');
+                        observer.unobserve(entry.target);
                     }
                 });
-            },
-            { threshold: 0.1, rootMargin: '0px 0px -60px 0px' }
-        );
-
-        document.querySelectorAll('.fade-in, .workflow-step').forEach(el => {
-            observer.observe(el);
-        });
-
-        // Copy install command
-        function copyInstall() {
-            const cmd = 'git clone <repo-url> && cd documentor && uv sync && uv run python src/main.py';
-            navigator.clipboard.writeText(cmd).then(() => {
-                const btn = document.querySelector('.copy-btn');
-                btn.innerHTML = '&#10003;';
-                setTimeout(() => {
-                    btn.innerHTML = '<svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="5" y="5" width="9" height="9" rx="1.5"/><path d="M5 11H3.5A1.5 1.5 0 012 9.5v-7A1.5 1.5 0 013.5 1h7A1.5 1.5 0 0112 2.5V5"/></svg>';
-                }, 2000);
+            }, {
+                threshold: 0.12,
+                rootMargin: '0px 0px -40px 0px'
             });
-        }
+
+            reveals.forEach(function(el) {
+                observer.observe(el);
+            });
+        })();
+
+        // ============================================================
+        // Navbar background on scroll
+        // ============================================================
+        (function() {
+            const navbar = document.querySelector('.navbar');
+            let ticking = false;
+            window.addEventListener('scroll', function() {
+                if (!ticking) {
+                    requestAnimationFrame(function() {
+                        if (window.scrollY > 80) {
+                            navbar.style.borderBottomColor = 'rgba(240, 192, 48, 0.25)';
+                        } else {
+                            navbar.style.borderBottomColor = 'rgba(240, 192, 48, 0.12)';
+                        }
+                        ticking = false;
+                    });
+                    ticking = true;
+                }
+            });
+        })();
+
+        // ============================================================
+        // Smooth scroll for anchor links
+        // ============================================================
+        document.querySelectorAll('a[href^="#"]').forEach(function(anchor) {
+            anchor.addEventListener('click', function(e) {
+                e.preventDefault();
+                var target = document.querySelector(this.getAttribute('href'));
+                if (target) {
+                    var offset = 56; // navbar height
+                    var top = target.getBoundingClientRect().top + window.pageYOffset - offset;
+                    window.scrollTo({ top: top, behavior: 'smooth' });
+                }
+            });
+        });
     </script>
 </body>
 </html>
diff --git a/web/index_v2.html b/web/index_v2.html
deleted file mode 100644
index 4cfd19d..0000000
--- a/web/index_v2.html
+++ /dev/null
@@ -1,1473 +0,0 @@
-<!DOCTYPE html>
-<html lang="de">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>DocuMentor — XSL-Transformationen unter Kontrolle</title>
-    <link rel="stylesheet" href="fonts/fonts_v2.css">
-    <style>
-        *, *::before, *::after {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-
-        :root {
-            --black: #000000;
-            --white: #ffffff;
-            --off-white: #f0f0f0;
-            --neon-red: #ff0033;
-            --neon-red-dim: #cc0029;
-            --gray-dark: #1a1a1a;
-            --gray-mid: #333333;
-            --gray-light: #888888;
-            --border-thick: 4px;
-            --border-thin: 2px;
-            --font-mono: 'Space Mono', 'Courier New', monospace;
-        }
-
-        html {
-            scroll-behavior: auto;
-        }
-
-        body {
-            font-family: var(--font-mono);
-            background: var(--white);
-            color: var(--black);
-            line-height: 1.6;
-            overflow-x: hidden;
-        }
-
-        /* ========== BRUTALIST RESETS ========== */
-
-        ::selection {
-            background: var(--neon-red);
-            color: var(--white);
-        }
-
-        a {
-            color: var(--neon-red);
-            text-decoration: none;
-            border-bottom: var(--border-thin) solid var(--neon-red);
-        }
-
-        a:hover {
-            background: var(--neon-red);
-            color: var(--white);
-        }
-
-        /* ========== GRID OVERLAY ========== */
-
-        body::before {
-            content: '';
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background-image:
-                linear-gradient(90deg, rgba(0,0,0,0.03) 1px, transparent 1px),
-                linear-gradient(0deg, rgba(0,0,0,0.03) 1px, transparent 1px);
-            background-size: 60px 60px;
-            pointer-events: none;
-            z-index: 0;
-        }
-
-        /* ========== NAVIGATION ========== */
-
-        nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            z-index: 1000;
-            background: var(--black);
-            color: var(--white);
-            border-bottom: var(--border-thick) solid var(--neon-red);
-            padding: 0;
-        }
-
-        nav .nav-inner {
-            display: flex;
-            align-items: stretch;
-            justify-content: space-between;
-            max-width: 1400px;
-            margin: 0 auto;
-        }
-
-        nav .nav-brand {
-            font-weight: 700;
-            font-size: 1.1rem;
-            text-transform: uppercase;
-            letter-spacing: 3px;
-            padding: 14px 24px;
-            border-right: var(--border-thin) solid var(--gray-mid);
-            color: var(--white);
-            border-bottom: none;
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-
-        nav .nav-brand span {
-            color: var(--neon-red);
-        }
-
-        nav .nav-links {
-            display: flex;
-            list-style: none;
-            align-items: stretch;
-        }
-
-        nav .nav-links li {
-            border-left: var(--border-thin) solid var(--gray-mid);
-        }
-
-        nav .nav-links a {
-            display: flex;
-            align-items: center;
-            padding: 14px 20px;
-            color: var(--white);
-            text-transform: uppercase;
-            font-size: 0.7rem;
-            letter-spacing: 2px;
-            border-bottom: none;
-            transition: none;
-        }
-
-        nav .nav-links a:hover {
-            background: var(--neon-red);
-            color: var(--white);
-        }
-
-        /* ========== HERO ========== */
-
-        .hero {
-            position: relative;
-            min-height: 100vh;
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            padding: 120px 40px 80px;
-            background: var(--black);
-            color: var(--white);
-            border-bottom: var(--border-thick) solid var(--neon-red);
-            overflow: hidden;
-        }
-
-        .hero::before {
-            content: 'XSL→PDF XSL→PDF XSL→PDF XSL→PDF XSL→PDF XSL→PDF XSL→PDF XSL→PDF XSL→PDF XSL→PDF XSL→PDF XSL→PDF XSL→PDF XSL→PDF XSL→PDF XSL→PDF XSL→PDF XSL→PDF XSL→PDF XSL→PDF';
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 200%;
-            height: 100%;
-            font-size: 1.2rem;
-            color: rgba(255, 255, 255, 0.03);
-            word-break: break-all;
-            line-height: 2;
-            letter-spacing: 8px;
-            pointer-events: none;
-            z-index: 0;
-        }
-
-        .hero-content {
-            position: relative;
-            z-index: 1;
-            max-width: 1400px;
-            margin: 0 auto;
-            width: 100%;
-        }
-
-        .hero-label {
-            display: inline-block;
-            font-size: 0.7rem;
-            text-transform: uppercase;
-            letter-spacing: 4px;
-            border: var(--border-thin) solid var(--neon-red);
-            padding: 6px 16px;
-            margin-bottom: 40px;
-            color: var(--neon-red);
-        }
-
-        .hero h1 {
-            font-family: var(--font-mono);
-            font-size: clamp(3rem, 10vw, 8rem);
-            font-weight: 700;
-            text-transform: uppercase;
-            line-height: 0.95;
-            letter-spacing: -3px;
-            margin-bottom: 40px;
-        }
-
-        .hero h1 .red {
-            color: var(--neon-red);
-            display: block;
-        }
-
-        .hero-tagline {
-            font-size: 1.1rem;
-            max-width: 700px;
-            line-height: 1.8;
-            color: var(--gray-light);
-            border-left: var(--border-thick) solid var(--neon-red);
-            padding-left: 24px;
-            margin-bottom: 50px;
-        }
-
-        .hero-stats {
-            display: flex;
-            gap: 0;
-            border: var(--border-thick) solid var(--white);
-            width: fit-content;
-        }
-
-        .hero-stat {
-            padding: 20px 32px;
-            border-right: var(--border-thin) solid var(--gray-mid);
-            text-align: center;
-        }
-
-        .hero-stat:last-child {
-            border-right: none;
-        }
-
-        .hero-stat .number {
-            font-size: 2rem;
-            font-weight: 700;
-            color: var(--neon-red);
-            display: block;
-        }
-
-        .hero-stat .label {
-            font-size: 0.6rem;
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            color: var(--gray-light);
-        }
-
-        /* ========== SECTION BASE ========== */
-
-        section {
-            position: relative;
-            z-index: 1;
-            padding: 100px 40px;
-        }
-
-        .section-inner {
-            max-width: 1400px;
-            margin: 0 auto;
-        }
-
-        .section-header {
-            margin-bottom: 60px;
-        }
-
-        .section-number {
-            font-size: 0.7rem;
-            text-transform: uppercase;
-            letter-spacing: 4px;
-            color: var(--neon-red);
-            margin-bottom: 12px;
-            display: block;
-        }
-
-        .section-title {
-            font-size: clamp(2rem, 5vw, 3.5rem);
-            font-weight: 700;
-            text-transform: uppercase;
-            letter-spacing: -1px;
-            line-height: 1.1;
-        }
-
-        .section-title .muted {
-            color: var(--gray-light);
-        }
-
-        .section-divider {
-            width: 100%;
-            height: var(--border-thick);
-            background: var(--black);
-            margin-top: 20px;
-        }
-
-        /* ========== FEATURES ========== */
-
-        .features {
-            background: var(--white);
-            border-bottom: var(--border-thick) solid var(--black);
-        }
-
-        .features-grid {
-            display: grid;
-            grid-template-columns: repeat(3, 1fr);
-            border: var(--border-thick) solid var(--black);
-        }
-
-        .feature-card {
-            padding: 40px 32px;
-            border-right: var(--border-thin) solid var(--black);
-            border-bottom: var(--border-thin) solid var(--black);
-            position: relative;
-            transition: none;
-        }
-
-        .feature-card:nth-child(3n) {
-            border-right: none;
-        }
-
-        .feature-card:nth-child(n+4) {
-            border-bottom: none;
-        }
-
-        .feature-card:hover {
-            background: var(--black);
-            color: var(--white);
-        }
-
-        .feature-card:hover .feature-icon {
-            color: var(--neon-red);
-        }
-
-        .feature-card:hover .feature-num {
-            color: var(--neon-red);
-        }
-
-        .feature-icon {
-            font-size: 2.5rem;
-            margin-bottom: 16px;
-            display: block;
-            filter: grayscale(0);
-        }
-
-        .feature-num {
-            font-size: 0.65rem;
-            text-transform: uppercase;
-            letter-spacing: 3px;
-            color: var(--gray-light);
-            margin-bottom: 12px;
-            display: block;
-        }
-
-        .feature-card h3 {
-            font-size: 1.1rem;
-            text-transform: uppercase;
-            letter-spacing: 1px;
-            margin-bottom: 12px;
-            font-weight: 700;
-        }
-
-        .feature-card p {
-            font-size: 0.8rem;
-            line-height: 1.7;
-            color: var(--gray-light);
-        }
-
-        .feature-card:hover p {
-            color: var(--gray-light);
-        }
-
-        /* ========== WORKFLOW ========== */
-
-        .workflow {
-            background: var(--black);
-            color: var(--white);
-            border-bottom: var(--border-thick) solid var(--neon-red);
-        }
-
-        .workflow .section-title {
-            color: var(--white);
-        }
-
-        .workflow .section-divider {
-            background: var(--white);
-        }
-
-        .workflow-steps {
-            display: grid;
-            grid-template-columns: repeat(4, 1fr);
-            gap: 0;
-            border: var(--border-thick) solid var(--white);
-        }
-
-        .workflow-step {
-            padding: 40px 28px;
-            border-right: var(--border-thin) solid var(--gray-mid);
-            position: relative;
-        }
-
-        .workflow-step:last-child {
-            border-right: none;
-        }
-
-        .step-num {
-            font-size: 4rem;
-            font-weight: 700;
-            color: var(--neon-red);
-            line-height: 1;
-            margin-bottom: 20px;
-            display: block;
-        }
-
-        .workflow-step h3 {
-            font-size: 1rem;
-            text-transform: uppercase;
-            letter-spacing: 1px;
-            margin-bottom: 12px;
-            font-weight: 700;
-        }
-
-        .workflow-step p {
-            font-size: 0.78rem;
-            line-height: 1.7;
-            color: var(--gray-light);
-        }
-
-        .workflow-step .arrow {
-            position: absolute;
-            right: -14px;
-            top: 50%;
-            transform: translateY(-50%);
-            font-size: 1.5rem;
-            color: var(--neon-red);
-            z-index: 2;
-        }
-
-        /* ========== DEMO / SCREENSHOT ========== */
-
-        .demo {
-            background: var(--off-white);
-            border-bottom: var(--border-thick) solid var(--black);
-        }
-
-        .demo-mockup {
-            border: var(--border-thick) solid var(--black);
-            background: var(--white);
-            position: relative;
-        }
-
-        .demo-titlebar {
-            background: var(--black);
-            color: var(--white);
-            padding: 10px 20px;
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            font-size: 0.75rem;
-            text-transform: uppercase;
-            letter-spacing: 2px;
-        }
-
-        .demo-dots {
-            display: flex;
-            gap: 8px;
-        }
-
-        .demo-dot {
-            width: 12px;
-            height: 12px;
-            border: var(--border-thin) solid var(--white);
-        }
-
-        .demo-dot.red {
-            background: var(--neon-red);
-            border-color: var(--neon-red);
-        }
-
-        .demo-body {
-            display: grid;
-            grid-template-columns: 260px 1fr;
-            min-height: 500px;
-        }
-
-        .demo-sidebar {
-            border-right: var(--border-thick) solid var(--black);
-            padding: 20px;
-            font-size: 0.72rem;
-            background: var(--off-white);
-        }
-
-        .demo-tree-item {
-            padding: 6px 0;
-            padding-left: 0;
-            border-bottom: 1px solid #ddd;
-        }
-
-        .demo-tree-item.indent-1 { padding-left: 16px; }
-        .demo-tree-item.indent-2 { padding-left: 32px; }
-        .demo-tree-item.indent-3 { padding-left: 48px; }
-
-        .demo-tree-item .icon {
-            margin-right: 6px;
-        }
-
-        .demo-tree-item.active {
-            background: var(--neon-red);
-            color: var(--white);
-            padding: 6px 8px;
-            margin: 0 -20px;
-            padding-left: 52px;
-        }
-
-        .demo-main {
-            display: grid;
-            grid-template-columns: repeat(3, 1fr);
-        }
-
-        .demo-panel {
-            border-right: var(--border-thin) solid var(--black);
-            position: relative;
-            display: flex;
-            flex-direction: column;
-        }
-
-        .demo-panel:last-child {
-            border-right: none;
-        }
-
-        .demo-panel-header {
-            padding: 10px 16px;
-            font-size: 0.65rem;
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            border-bottom: var(--border-thin) solid var(--black);
-            background: var(--off-white);
-            font-weight: 700;
-        }
-
-        .demo-panel-body {
-            flex: 1;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            padding: 30px;
-            position: relative;
-            min-height: 400px;
-        }
-
-        .demo-pdf-placeholder {
-            width: 100%;
-            height: 100%;
-            position: absolute;
-            top: 0;
-            left: 0;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            font-size: 0.7rem;
-            color: var(--gray-light);
-            text-transform: uppercase;
-            letter-spacing: 2px;
-        }
-
-        .demo-pdf-placeholder .pdf-icon {
-            font-size: 3rem;
-            margin-bottom: 12px;
-            opacity: 0.4;
-        }
-
-        .demo-panel.diff .demo-panel-header {
-            background: var(--neon-red);
-            color: var(--white);
-        }
-
-        .demo-panel.diff .demo-pdf-placeholder {
-            background: repeating-linear-gradient(
-                45deg,
-                transparent,
-                transparent 10px,
-                rgba(255, 0, 51, 0.04) 10px,
-                rgba(255, 0, 51, 0.04) 20px
-            );
-        }
-
-        .demo-statusbar {
-            background: var(--black);
-            color: var(--gray-light);
-            padding: 8px 20px;
-            font-size: 0.65rem;
-            display: flex;
-            justify-content: space-between;
-            text-transform: uppercase;
-            letter-spacing: 1px;
-        }
-
-        .demo-statusbar .status-ok {
-            color: #00ff66;
-        }
-
-        /* ========== TECH STACK ========== */
-
-        .tech {
-            background: var(--white);
-            border-bottom: var(--border-thick) solid var(--black);
-        }
-
-        .tech-grid {
-            display: grid;
-            grid-template-columns: repeat(4, 1fr);
-            border: var(--border-thick) solid var(--black);
-        }
-
-        .tech-item {
-            padding: 32px 24px;
-            border-right: var(--border-thin) solid var(--black);
-            border-bottom: var(--border-thin) solid var(--black);
-            text-align: center;
-        }
-
-        .tech-item:nth-child(4n) {
-            border-right: none;
-        }
-
-        .tech-item:nth-child(n+5) {
-            border-bottom: none;
-        }
-
-        .tech-item:hover {
-            background: var(--black);
-            color: var(--white);
-        }
-
-        .tech-item .tech-icon {
-            font-size: 2rem;
-            margin-bottom: 10px;
-            display: block;
-        }
-
-        .tech-item h4 {
-            font-size: 0.85rem;
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            font-weight: 700;
-            margin-bottom: 6px;
-        }
-
-        .tech-item p {
-            font-size: 0.68rem;
-            color: var(--gray-light);
-            letter-spacing: 1px;
-        }
-
-        .tech-item:hover p {
-            color: var(--gray-light);
-        }
-
-        /* ========== DOWNLOAD ========== */
-
-        .download {
-            background: var(--black);
-            color: var(--white);
-            border-bottom: var(--border-thick) solid var(--neon-red);
-        }
-
-        .download .section-title {
-            color: var(--white);
-        }
-
-        .download .section-divider {
-            background: var(--white);
-        }
-
-        .download-content {
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: 0;
-            border: var(--border-thick) solid var(--white);
-        }
-
-        .download-info {
-            padding: 48px 40px;
-            border-right: var(--border-thick) solid var(--white);
-        }
-
-        .download-info h3 {
-            font-size: 1.2rem;
-            text-transform: uppercase;
-            letter-spacing: 1px;
-            margin-bottom: 20px;
-            font-weight: 700;
-        }
-
-        .download-info p {
-            font-size: 0.82rem;
-            line-height: 1.8;
-            color: var(--gray-light);
-            margin-bottom: 24px;
-        }
-
-        .download-info ul {
-            list-style: none;
-            margin-bottom: 32px;
-        }
-
-        .download-info ul li {
-            padding: 8px 0;
-            font-size: 0.78rem;
-            border-bottom: 1px solid var(--gray-mid);
-            display: flex;
-            align-items: center;
-            gap: 10px;
-        }
-
-        .download-info ul li .check {
-            color: var(--neon-red);
-            font-weight: 700;
-        }
-
-        .download-code {
-            padding: 48px 40px;
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-        }
-
-        .code-block {
-            background: var(--gray-dark);
-            border: var(--border-thin) solid var(--gray-mid);
-            padding: 0;
-            margin-bottom: 20px;
-        }
-
-        .code-block-header {
-            padding: 10px 16px;
-            font-size: 0.6rem;
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            color: var(--gray-light);
-            border-bottom: var(--border-thin) solid var(--gray-mid);
-        }
-
-        .code-block pre {
-            padding: 20px;
-            font-family: var(--font-mono);
-            font-size: 0.82rem;
-            line-height: 1.8;
-            overflow-x: auto;
-            color: var(--off-white);
-        }
-
-        .code-block pre .comment {
-            color: var(--gray-light);
-        }
-
-        .code-block pre .cmd {
-            color: var(--neon-red);
-        }
-
-        .btn-brutal {
-            display: inline-block;
-            padding: 16px 32px;
-            background: var(--neon-red);
-            color: var(--white);
-            font-family: var(--font-mono);
-            font-size: 0.8rem;
-            font-weight: 700;
-            text-transform: uppercase;
-            letter-spacing: 3px;
-            border: var(--border-thick) solid var(--white);
-            cursor: pointer;
-            border-bottom: var(--border-thick) solid var(--white);
-            text-align: center;
-        }
-
-        .btn-brutal:hover {
-            background: var(--white);
-            color: var(--black);
-        }
-
-        /* ========== FOOTER ========== */
-
-        footer {
-            background: var(--black);
-            color: var(--white);
-            padding: 0;
-        }
-
-        .footer-inner {
-            max-width: 1400px;
-            margin: 0 auto;
-            display: grid;
-            grid-template-columns: 1fr 1fr 1fr;
-            border-top: var(--border-thick) solid var(--neon-red);
-        }
-
-        .footer-col {
-            padding: 40px 32px;
-            border-right: var(--border-thin) solid var(--gray-mid);
-        }
-
-        .footer-col:last-child {
-            border-right: none;
-        }
-
-        .footer-col h4 {
-            font-size: 0.75rem;
-            text-transform: uppercase;
-            letter-spacing: 3px;
-            margin-bottom: 20px;
-            color: var(--neon-red);
-            font-weight: 700;
-        }
-
-        .footer-col p,
-        .footer-col li {
-            font-size: 0.72rem;
-            line-height: 2;
-            color: var(--gray-light);
-        }
-
-        .footer-col ul {
-            list-style: none;
-        }
-
-        .footer-col a {
-            color: var(--gray-light);
-            border-bottom: 1px solid var(--gray-mid);
-        }
-
-        .footer-col a:hover {
-            color: var(--white);
-            background: var(--neon-red);
-        }
-
-        .footer-bottom {
-            border-top: var(--border-thin) solid var(--gray-mid);
-            padding: 20px 40px;
-            font-size: 0.65rem;
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            color: var(--gray-light);
-            display: flex;
-            justify-content: space-between;
-            max-width: 1400px;
-            margin: 0 auto;
-        }
-
-        /* ========== MARQUEE ========== */
-
-        .marquee-bar {
-            background: var(--neon-red);
-            color: var(--white);
-            padding: 10px 0;
-            overflow: hidden;
-            white-space: nowrap;
-            font-size: 0.7rem;
-            text-transform: uppercase;
-            letter-spacing: 4px;
-            font-weight: 700;
-            border-bottom: var(--border-thick) solid var(--black);
-        }
-
-        .marquee-content {
-            display: inline-block;
-            animation: marquee 20s linear infinite;
-        }
-
-        @keyframes marquee {
-            0% { transform: translateX(0); }
-            100% { transform: translateX(-50%); }
-        }
-
-        /* ========== GLITCH EFFECT ========== */
-
-        .glitch {
-            position: relative;
-        }
-
-        .glitch:hover::before,
-        .glitch:hover::after {
-            content: attr(data-text);
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-        }
-
-        .glitch:hover::before {
-            color: var(--neon-red);
-            z-index: -1;
-            animation: glitch-1 0.3s steps(2) infinite;
-        }
-
-        .glitch:hover::after {
-            color: cyan;
-            z-index: -2;
-            animation: glitch-2 0.3s steps(2) infinite;
-        }
-
-        @keyframes glitch-1 {
-            0% { clip-path: inset(20% 0 60% 0); transform: translate(-3px, 0); }
-            50% { clip-path: inset(50% 0 20% 0); transform: translate(3px, 0); }
-            100% { clip-path: inset(10% 0 70% 0); transform: translate(-2px, 0); }
-        }
-
-        @keyframes glitch-2 {
-            0% { clip-path: inset(60% 0 10% 0); transform: translate(3px, 0); }
-            50% { clip-path: inset(20% 0 50% 0); transform: translate(-3px, 0); }
-            100% { clip-path: inset(70% 0 5% 0); transform: translate(2px, 0); }
-        }
-
-        /* ========== RESPONSIVE ========== */
-
-        @media (max-width: 1024px) {
-            .features-grid {
-                grid-template-columns: repeat(2, 1fr);
-            }
-
-            .feature-card:nth-child(3n) {
-                border-right: var(--border-thin) solid var(--black);
-            }
-
-            .feature-card:nth-child(2n) {
-                border-right: none;
-            }
-
-            .feature-card:nth-child(n+4) {
-                border-bottom: var(--border-thin) solid var(--black);
-            }
-
-            .feature-card:nth-child(n+5) {
-                border-bottom: none;
-            }
-
-            .workflow-steps {
-                grid-template-columns: repeat(2, 1fr);
-            }
-
-            .workflow-step:nth-child(2) .arrow {
-                display: none;
-            }
-
-            .workflow-step {
-                border-bottom: var(--border-thin) solid var(--gray-mid);
-            }
-
-            .tech-grid {
-                grid-template-columns: repeat(2, 1fr);
-            }
-
-            .download-content {
-                grid-template-columns: 1fr;
-            }
-
-            .download-info {
-                border-right: none;
-                border-bottom: var(--border-thick) solid var(--white);
-            }
-
-            .demo-body {
-                grid-template-columns: 1fr;
-            }
-
-            .demo-sidebar {
-                border-right: none;
-                border-bottom: var(--border-thick) solid var(--black);
-            }
-
-            .demo-main {
-                grid-template-columns: 1fr;
-            }
-
-            .demo-panel {
-                border-right: none;
-                border-bottom: var(--border-thin) solid var(--black);
-            }
-
-            .demo-panel-body {
-                min-height: 200px;
-            }
-        }
-
-        @media (max-width: 768px) {
-            section {
-                padding: 60px 20px;
-            }
-
-            .hero {
-                padding: 100px 20px 60px;
-            }
-
-            nav .nav-links {
-                display: none;
-            }
-
-            .features-grid {
-                grid-template-columns: 1fr;
-            }
-
-            .feature-card {
-                border-right: none !important;
-                border-bottom: var(--border-thin) solid var(--black) !important;
-            }
-
-            .feature-card:last-child {
-                border-bottom: none !important;
-            }
-
-            .workflow-steps {
-                grid-template-columns: 1fr;
-            }
-
-            .workflow-step {
-                border-right: none;
-            }
-
-            .workflow-step .arrow {
-                display: none;
-            }
-
-            .tech-grid {
-                grid-template-columns: 1fr;
-            }
-
-            .tech-item {
-                border-right: none !important;
-            }
-
-            .footer-inner {
-                grid-template-columns: 1fr;
-            }
-
-            .footer-col {
-                border-right: none;
-                border-bottom: var(--border-thin) solid var(--gray-mid);
-            }
-
-            .hero-stats {
-                flex-direction: column;
-            }
-
-            .hero-stat {
-                border-right: none;
-                border-bottom: var(--border-thin) solid var(--gray-mid);
-            }
-
-            .hero-stat:last-child {
-                border-bottom: none;
-            }
-        }
-
-        /* ========== BLINK CURSOR ========== */
-
-        .cursor {
-            display: inline-block;
-            width: 3px;
-            height: 1em;
-            background: var(--neon-red);
-            margin-left: 4px;
-            vertical-align: text-bottom;
-            animation: blink 0.7s step-end infinite;
-        }
-
-        @keyframes blink {
-            0%, 100% { opacity: 1; }
-            50% { opacity: 0; }
-        }
-
-        /* ========== SCROLL REVEAL ========== */
-
-        .reveal {
-            opacity: 0;
-            transform: translateY(30px);
-        }
-
-        .reveal.visible {
-            opacity: 1;
-            transform: translateY(0);
-            transition: opacity 0.1s step-end, transform 0.1s step-end;
-        }
-    </style>
-</head>
-<body>
-
-<!-- NAVIGATION -->
-<nav>
-    <div class="nav-inner">
-        <a href="#hero" class="nav-brand"><span>&#9632;</span> DocuMentor</a>
-        <ul class="nav-links">
-            <li><a href="#features">Features</a></li>
-            <li><a href="#workflow">Workflow</a></li>
-            <li><a href="#demo">Demo</a></li>
-            <li><a href="#tech">Tech-Stack</a></li>
-            <li><a href="#download">Download</a></li>
-        </ul>
-    </div>
-</nav>
-
-<!-- HERO -->
-<section class="hero" id="hero">
-    <div class="hero-content">
-        <span class="hero-label">Desktop-Anwendung // PySide6 // Open Source</span>
-        <h1>
-            <span class="glitch" data-text="DOCU">DOCU</span><span class="red glitch" data-text="MENTOR">MENTOR</span>
-        </h1>
-        <p class="hero-tagline">
-            XSL-Transformationen unter Kontrolle. Validieren. Vergleichen. Verifizieren.
-            Die Toolchain für Entwickler, die PDF-Dokumente aus XSL/XML erzeugen
-            und Änderungen lückenlos nachverfolgen muessen.<span class="cursor"></span>
-        </p>
-        <div class="hero-stats">
-            <div class="hero-stat">
-                <span class="number">100+</span>
-                <span class="label">XSL-Dateien</span>
-            </div>
-            <div class="hero-stat">
-                <span class="number">3</span>
-                <span class="label">PDF-Panels</span>
-            </div>
-            <div class="hero-stat">
-                <span class="number">BLAKE2B</span>
-                <span class="label">Hash-Tracking</span>
-            </div>
-            <div class="hero-stat">
-                <span class="number">&infin;</span>
-                <span class="label">Transformationen</span>
-            </div>
-        </div>
-    </div>
-</section>
-
-<!-- MARQUEE -->
-<div class="marquee-bar">
-    <div class="marquee-content">
-        SAXON &bull; APACHE FOP &bull; DIFF-PDF &bull; POSTGRESQL &bull; PYSIDE6 &bull; BLAKE2B &bull; XSL &bull; XML &bull; PDF &bull;
-        SAXON &bull; APACHE FOP &bull; DIFF-PDF &bull; POSTGRESQL &bull; PYSIDE6 &bull; BLAKE2B &bull; XSL &bull; XML &bull; PDF &bull;
-        SAXON &bull; APACHE FOP &bull; DIFF-PDF &bull; POSTGRESQL &bull; PYSIDE6 &bull; BLAKE2B &bull; XSL &bull; XML &bull; PDF &bull;
-        SAXON &bull; APACHE FOP &bull; DIFF-PDF &bull; POSTGRESQL &bull; PYSIDE6 &bull; BLAKE2B &bull; XSL &bull; XML &bull; PDF &bull;
-    </div>
-</div>
-
-<!-- FEATURES -->
-<section class="features" id="features">
-    <div class="section-inner">
-        <div class="section-header reveal">
-            <span class="section-number">01 // Features</span>
-            <h2 class="section-title">Was DocuMentor <span class="muted">leistet</span></h2>
-            <div class="section-divider"></div>
-        </div>
-        <div class="features-grid reveal">
-            <div class="feature-card">
-                <span class="feature-icon">&#9776;</span>
-                <span class="feature-num">Feature 01</span>
-                <h3>Baumstruktur</h3>
-                <p>Hierarchische Organisation von XSL-Transformationen. TreeNode, XslFile und XmlFile bilden eine übersichtliche Projektstruktur. Import- und Include-Abhängigkeiten auf einen Blick.</p>
-            </div>
-            <div class="feature-card">
-                <span class="feature-icon">&#9638;</span>
-                <span class="feature-num">Feature 02</span>
-                <h3>PDF-Diff</h3>
-                <p>Drei-Panel-Ansicht: Referenz, Diff und Neu. Visueller Vergleich mit Alpha-Blending. Änderungen in PDF-Dokumenten sofort erkennen — Pixel für Pixel.</p>
-            </div>
-            <div class="feature-card">
-                <span class="feature-icon">#_</span>
-                <span class="feature-num">Feature 03</span>
-                <h3>Hash-Tracking</h3>
-                <p>BLAKE2B-Hashing zur Änderungsverfolgung von XML-Dateien. Automatische Berechnung beim Laden. 64-Zeichen-Hexdigest in project.yaml persistiert.</p>
-            </div>
-            <div class="feature-card">
-                <span class="feature-icon">&#8644;</span>
-                <span class="feature-num">Feature 04</span>
-                <h3>Async-Verarbeitung</h3>
-                <p>Hintergrund-Threads für Hash-Berechnungen und Datenbank-Abfragen. Die UI bleibt reaktionsfähig — auch bei 100+ Dateien. Abbrechen-Dialog inklusive.</p>
-            </div>
-            <div class="feature-card">
-                <span class="feature-icon">&#9107;</span>
-                <span class="feature-num">Feature 05</span>
-                <h3>PostgreSQL</h3>
-                <p>Datenbankintegration mit Polars und ConnectorX. SSL-Unterstützung. SQL-Abfragen direkt aus der Anwendung. Ergebnisse als DataFrames.</p>
-            </div>
-            <div class="feature-card">
-                <span class="feature-icon">&#9881;</span>
-                <span class="feature-num">Feature 06</span>
-                <h3>Toolchain-Konfig</h3>
-                <p>Zentrale Verwaltung: Java VM, Saxon JAR, Apache FOP, diff-pdf. ID-basierte Referenzierung. Projekte koennen verschiedene Tool-Versionen verwenden.</p>
-            </div>
-        </div>
-    </div>
-</section>
-
-<!-- WORKFLOW -->
-<section class="workflow" id="workflow">
-    <div class="section-inner">
-        <div class="section-header reveal">
-            <span class="section-number">02 // Workflow</span>
-            <h2 class="section-title">Vier Schritte <span style="color:var(--neon-red);">zum Ergebnis</span></h2>
-            <div class="section-divider"></div>
-        </div>
-        <div class="workflow-steps reveal">
-            <div class="workflow-step">
-                <span class="step-num">01</span>
-                <h3>XSL bearbeiten</h3>
-                <p>Änderungen an den XSL-Dateien durchführen. Import- und Include-Verknüpfungen beachten — eine Änderung kann viele Dokumente betreffen.</p>
-                <span class="arrow">&#9654;</span>
-            </div>
-            <div class="workflow-step">
-                <span class="step-num">02</span>
-                <h3>Transformation starten</h3>
-                <p>Saxon führt die XSLT-Transformation durch. Apache FOP erzeugt die PDF-Ausgabe. Alles konfigurierbar über die Toolchain.</p>
-                <span class="arrow">&#9654;</span>
-            </div>
-            <div class="workflow-step">
-                <span class="step-num">03</span>
-                <h3>PDF-Diff begutachten</h3>
-                <p>Die Drei-Panel-Ansicht zeigt Referenz, Differenz und neues Dokument. diff-pdf markiert alle Änderungen visuell.</p>
-                <span class="arrow">&#9654;</span>
-            </div>
-            <div class="workflow-step">
-                <span class="step-num">04</span>
-                <h3>Ergebnis verifizieren</h3>
-                <p>Wurden die richtigen PDFs geändert? Entsprechen die Änderungen den Erwartungen? Bei Bedarf: zurück zu Schritt 1.</p>
-            </div>
-        </div>
-    </div>
-</section>
-
-<!-- DEMO / SCREENSHOT -->
-<section class="demo" id="demo">
-    <div class="section-inner">
-        <div class="section-header reveal">
-            <span class="section-number">03 // Oberfläche</span>
-            <h2 class="section-title">Die Anwendung <span class="muted">im Einsatz</span></h2>
-            <div class="section-divider"></div>
-        </div>
-        <div class="demo-mockup reveal">
-            <div class="demo-titlebar">
-                <div class="demo-dots">
-                    <div class="demo-dot red"></div>
-                    <div class="demo-dot"></div>
-                    <div class="demo-dot"></div>
-                </div>
-                <span>DocuMentor v1.0 — Projekt: Pruefungsdokumente</span>
-                <span style="color:var(--gray-light);">&#9632; PySide6</span>
-            </div>
-            <div class="demo-body">
-                <div class="demo-sidebar">
-                    <div class="demo-tree-item"><span class="icon">&#9660;</span> <strong>Urkunden</strong></div>
-                    <div class="demo-tree-item indent-1"><span class="icon">&#9660;</span> bachelor_urkunde.xsl</div>
-                    <div class="demo-tree-item indent-2"><span class="icon">&#9679;</span> student_01.xml</div>
-                    <div class="demo-tree-item indent-2 active"><span class="icon">&#9679;</span> student_02.xml</div>
-                    <div class="demo-tree-item indent-2"><span class="icon">&#9679;</span> student_03.xml</div>
-                    <div class="demo-tree-item indent-1"><span class="icon">&#9654;</span> master_urkunde.xsl</div>
-                    <div class="demo-tree-item"><span class="icon">&#9660;</span> <strong>Zeugnisse</strong></div>
-                    <div class="demo-tree-item indent-1"><span class="icon">&#9654;</span> zeugnis_ba.xsl</div>
-                    <div class="demo-tree-item indent-1"><span class="icon">&#9654;</span> zeugnis_ma.xsl</div>
-                    <div class="demo-tree-item"><span class="icon">&#9654;</span> <strong>Bescheide</strong></div>
-                </div>
-                <div class="demo-main">
-                    <div class="demo-panel">
-                        <div class="demo-panel-header">Referenz-PDF</div>
-                        <div class="demo-panel-body">
-                            <div class="demo-pdf-placeholder">
-                                <span class="pdf-icon">&#9724;</span>
-                                Referenz
-                            </div>
-                        </div>
-                    </div>
-                    <div class="demo-panel diff">
-                        <div class="demo-panel-header">&#9632; Diff-Ansicht</div>
-                        <div class="demo-panel-body">
-                            <div class="demo-pdf-placeholder">
-                                <span class="pdf-icon">&#9724;</span>
-                                Differenz
-                            </div>
-                        </div>
-                    </div>
-                    <div class="demo-panel">
-                        <div class="demo-panel-header">Neues PDF</div>
-                        <div class="demo-panel-body">
-                            <div class="demo-pdf-placeholder">
-                                <span class="pdf-icon">&#9724;</span>
-                                Neu generiert
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="demo-statusbar">
-                <span>student_02.xml &mdash; BLAKE2B: <span style="color:var(--neon-red);">a3f7c9...</span></span>
-                <span class="status-ok">&#9632; Transformation abgeschlossen</span>
-            </div>
-        </div>
-    </div>
-</section>
-
-<!-- TECH STACK -->
-<section class="tech" id="tech">
-    <div class="section-inner">
-        <div class="section-header reveal">
-            <span class="section-number">04 // Tech-Stack</span>
-            <h2 class="section-title">Gebaut mit <span class="muted">roher Kraft</span></h2>
-            <div class="section-divider"></div>
-        </div>
-        <div class="tech-grid reveal">
-            <div class="tech-item">
-                <span class="tech-icon">&#9670;</span>
-                <h4>Python</h4>
-                <p>Kern-Sprache</p>
-            </div>
-            <div class="tech-item">
-                <span class="tech-icon">&#9635;</span>
-                <h4>PySide6</h4>
-                <p>Qt-GUI-Framework</p>
-            </div>
-            <div class="tech-item">
-                <span class="tech-icon">&#9830;</span>
-                <h4>Saxon</h4>
-                <p>XSLT-Prozessor</p>
-            </div>
-            <div class="tech-item">
-                <span class="tech-icon">&#9646;</span>
-                <h4>Apache FOP</h4>
-                <p>PDF-Erzeugung</p>
-            </div>
-            <div class="tech-item">
-                <span class="tech-icon">&#9644;</span>
-                <h4>diff-pdf</h4>
-                <p>PDF-Vergleich</p>
-            </div>
-            <div class="tech-item">
-                <span class="tech-icon">&#9107;</span>
-                <h4>PostgreSQL</h4>
-                <p>Datenbank</p>
-            </div>
-            <div class="tech-item">
-                <span class="tech-icon">&#9783;</span>
-                <h4>Polars</h4>
-                <p>DataFrames</p>
-            </div>
-            <div class="tech-item">
-                <span class="tech-icon">&#9881;</span>
-                <h4>Pydantic</h4>
-                <p>Konfiguration</p>
-            </div>
-        </div>
-    </div>
-</section>
-
-<!-- DOWNLOAD -->
-<section class="download" id="download">
-    <div class="section-inner">
-        <div class="section-header reveal">
-            <span class="section-number">05 // Loslegen</span>
-            <h2 class="section-title">Jetzt <span style="color:var(--neon-red);">installieren</span></h2>
-            <div class="section-divider"></div>
-        </div>
-        <div class="download-content reveal">
-            <div class="download-info">
-                <h3>Voraussetzungen</h3>
-                <p>DocuMentor läuft auf Linux, Windows und macOS. Die Konfiguration wird plattformspezifisch gespeichert.</p>
-                <ul>
-                    <li><span class="check">[x]</span> Python 3.13+</li>
-                    <li><span class="check">[x]</span> Java VM (für Saxon)</li>
-                    <li><span class="check">[x]</span> Saxon HE/PE/EE JAR</li>
-                    <li><span class="check">[x]</span> Apache FOP</li>
-                    <li><span class="check">[x]</span> diff-pdf</li>
-                    <li><span class="check">[x]</span> PostgreSQL (optional)</li>
-                </ul>
-                <a href="#" class="btn-brutal">Dokumentation</a>
-            </div>
-            <div class="download-code">
-                <div class="code-block">
-                    <div class="code-block-header">Terminal</div>
-                    <pre><span class="comment"># Repository klonen</span>
-<span class="cmd">$</span> git clone https://github.com/user/xsl-validator.git
-<span class="cmd">$</span> cd xsl-validator
-
-<span class="comment"># Abhängigkeiten installieren</span>
-<span class="cmd">$</span> uv sync
-
-<span class="comment"># Anwendung starten</span>
-<span class="cmd">$</span> uv run python src/main.py</pre>
-                </div>
-                <div class="code-block">
-                    <div class="code-block-header">Linting</div>
-                    <pre><span class="cmd">$</span> uv run ruff check
-<span class="cmd">$</span> uv run ruff format</pre>
-                </div>
-            </div>
-        </div>
-    </div>
-</section>
-
-<!-- FOOTER -->
-<footer>
-    <div class="footer-inner">
-        <div class="footer-col">
-            <h4>DocuMentor</h4>
-            <p>Desktop-Anwendung zur Verwaltung und Validierung von XSL-Transformationen. Entwickelt für die kontinuierliche Weiterentwicklung von PDF-Dokumenten in Flexnow.</p>
-        </div>
-        <div class="footer-col">
-            <h4>Links</h4>
-            <ul>
-                <li><a href="#features">Features</a></li>
-                <li><a href="#workflow">Workflow</a></li>
-                <li><a href="#demo">Oberfläche</a></li>
-                <li><a href="#tech">Tech-Stack</a></li>
-                <li><a href="#download">Download</a></li>
-            </ul>
-        </div>
-        <div class="footer-col">
-            <h4>Tech</h4>
-            <ul>
-                <li>PySide6 / Qt</li>
-                <li>Saxon XSLT</li>
-                <li>Apache FOP</li>
-                <li>diff-pdf</li>
-                <li>PostgreSQL / Polars</li>
-            </ul>
-        </div>
-    </div>
-    <div class="footer-bottom">
-        <span>&copy; 2026 DocuMentor</span>
-        <span>Gebaut mit roher Kraft.</span>
-    </div>
-</footer>
-
-<script>
-    // Brutalist scroll reveal — abrupt, no easing
-    document.addEventListener('DOMContentLoaded', () => {
-        const reveals = document.querySelectorAll('.reveal');
-
-        const observer = new IntersectionObserver((entries) => {
-            entries.forEach(entry => {
-                if (entry.isIntersecting) {
-                    entry.target.classList.add('visible');
-                    observer.unobserve(entry.target);
-                }
-            });
-        }, {
-            threshold: 0.15
-        });
-
-        reveals.forEach(el => observer.observe(el));
-    });
-
-    // Nav active state
-    document.addEventListener('scroll', () => {
-        const sections = document.querySelectorAll('section[id]');
-        const links = document.querySelectorAll('.nav-links a');
-        let current = '';
-
-        sections.forEach(section => {
-            const top = section.offsetTop - 80;
-            if (window.scrollY >= top) {
-                current = section.getAttribute('id');
-            }
-        });
-
-        links.forEach(link => {
-            link.style.background = '';
-            link.style.color = '';
-            if (link.getAttribute('href') === '#' + current) {
-                link.style.background = 'var(--neon-red)';
-                link.style.color = 'var(--white)';
-            }
-        });
-    });
-</script>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/web/index_v3.html b/web/index_v3.html
deleted file mode 100644
index 38bedb9..0000000
--- a/web/index_v3.html
+++ /dev/null
@@ -1,1209 +0,0 @@
-<!DOCTYPE html>
-<html lang="de">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>DocuMentor - XSL-Transformations-Toolkit</title>
-    <link rel="stylesheet" href="fonts/fonts_v3.css">
-    <style>
-        *, *::before, *::after {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-
-        :root {
-            --green: #00ff41;
-            --green-dim: #00cc33;
-            --green-dark: #009922;
-            --green-glow: #00ff4180;
-            --green-faint: #00ff4115;
-            --green-subtle: #00ff410a;
-            --bg: #0a0a0a;
-            --bg-light: #0f0f0f;
-            --bg-card: #111111;
-            --border: #00ff4130;
-        }
-
-        html {
-            scroll-behavior: smooth;
-        }
-
-        body {
-            font-family: 'VT323', monospace;
-            background: var(--bg);
-            color: var(--green);
-            font-size: 18px;
-            line-height: 1.6;
-            overflow-x: hidden;
-            position: relative;
-        }
-
-        /* CRT Scan Lines Overlay */
-        body::before {
-            content: '';
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            pointer-events: none;
-            z-index: 9999;
-            background: repeating-linear-gradient(
-                0deg,
-                transparent,
-                transparent 2px,
-                rgba(0, 0, 0, 0.15) 2px,
-                rgba(0, 0, 0, 0.15) 4px
-            );
-        }
-
-        /* CRT Flicker */
-        body::after {
-            content: '';
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            pointer-events: none;
-            z-index: 9998;
-            background: radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,0.4) 100%);
-            animation: flicker 0.08s infinite alternate;
-        }
-
-        @keyframes flicker {
-            0% { opacity: 0.97; }
-            100% { opacity: 1; }
-        }
-
-        /* Matrix Rain Canvas */
-        #matrix-canvas {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            z-index: -1;
-            opacity: 0.06;
-        }
-
-        /* Typing cursor blink */
-        @keyframes blink-caret {
-            0%, 50% { border-color: var(--green); }
-            51%, 100% { border-color: transparent; }
-        }
-
-        @keyframes blink {
-            0%, 50% { opacity: 1; }
-            51%, 100% { opacity: 0; }
-        }
-
-        @keyframes glow-pulse {
-            0%, 100% { text-shadow: 0 0 10px var(--green-glow), 0 0 20px var(--green-glow); }
-            50% { text-shadow: 0 0 20px var(--green-glow), 0 0 40px var(--green-glow), 0 0 60px var(--green-glow); }
-        }
-
-        @keyframes scanline-move {
-            0% { top: -10%; }
-            100% { top: 110%; }
-        }
-
-        @keyframes type-in {
-            from { width: 0; }
-            to { width: 100%; }
-        }
-
-        @keyframes fade-in-up {
-            from { opacity: 0; transform: translateY(30px); }
-            to { opacity: 1; transform: translateY(0); }
-        }
-
-        .cursor-blink {
-            display: inline-block;
-            width: 12px;
-            height: 1.1em;
-            background: var(--green);
-            animation: blink 1s step-end infinite;
-            vertical-align: text-bottom;
-            margin-left: 2px;
-        }
-
-        /* Moving scanline */
-        .scanline-bar {
-            position: fixed;
-            width: 100%;
-            height: 6px;
-            background: linear-gradient(180deg, transparent, var(--green-faint), transparent);
-            z-index: 9997;
-            pointer-events: none;
-            animation: scanline-move 8s linear infinite;
-        }
-
-        /* Navigation */
-        nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            z-index: 1000;
-            background: rgba(10, 10, 10, 0.95);
-            border-bottom: 1px solid var(--border);
-            padding: 12px 0;
-            backdrop-filter: blur(5px);
-        }
-
-        nav .nav-inner {
-            max-width: 1100px;
-            margin: 0 auto;
-            padding: 0 24px;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-
-        nav .logo {
-            font-size: 22px;
-            color: var(--green);
-            text-shadow: 0 0 10px var(--green-glow);
-            letter-spacing: 2px;
-        }
-
-        nav .logo span {
-            color: var(--green-dark);
-        }
-
-        nav ul {
-            list-style: none;
-            display: flex;
-            gap: 24px;
-        }
-
-        nav ul li a {
-            color: var(--green-dim);
-            text-decoration: none;
-            font-family: 'Share Tech Mono', monospace;
-            font-size: 14px;
-            letter-spacing: 1px;
-            transition: color 0.3s, text-shadow 0.3s;
-            text-transform: uppercase;
-        }
-
-        nav ul li a:hover {
-            color: var(--green);
-            text-shadow: 0 0 10px var(--green-glow);
-        }
-
-        .hamburger {
-            display: none;
-            flex-direction: column;
-            gap: 5px;
-            cursor: pointer;
-            background: none;
-            border: none;
-            padding: 4px;
-        }
-
-        .hamburger span {
-            display: block;
-            width: 24px;
-            height: 2px;
-            background: var(--green);
-        }
-
-        /* Sections */
-        section {
-            max-width: 1100px;
-            margin: 0 auto;
-            padding: 100px 24px;
-        }
-
-        .section-label {
-            font-family: 'Share Tech Mono', monospace;
-            font-size: 13px;
-            color: var(--green-dark);
-            letter-spacing: 3px;
-            text-transform: uppercase;
-            margin-bottom: 8px;
-        }
-
-        .section-title {
-            font-size: 36px;
-            color: var(--green);
-            text-shadow: 0 0 15px var(--green-glow);
-            margin-bottom: 40px;
-            line-height: 1.3;
-        }
-
-        .section-title::before {
-            content: '> ';
-            color: var(--green-dark);
-        }
-
-        /* ======================== */
-        /* HERO                     */
-        /* ======================== */
-        #hero {
-            min-height: 100vh;
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            padding-top: 80px;
-            position: relative;
-        }
-
-        .boot-sequence {
-            margin-bottom: 40px;
-        }
-
-        .boot-line {
-            font-family: 'Share Tech Mono', monospace;
-            font-size: 14px;
-            color: var(--green-dark);
-            opacity: 0;
-            transform: translateY(10px);
-            margin-bottom: 4px;
-            letter-spacing: 1px;
-        }
-
-        .boot-line.visible {
-            opacity: 1;
-            transform: translateY(0);
-            transition: opacity 0.3s, transform 0.3s;
-        }
-
-        .boot-line.ok::after {
-            content: ' [OK]';
-            color: var(--green);
-        }
-
-        .boot-line.loading::after {
-            content: ' ...';
-            animation: blink 1s step-end infinite;
-        }
-
-        .hero-title {
-            font-size: clamp(48px, 8vw, 90px);
-            line-height: 1.1;
-            color: var(--green);
-            text-shadow: 0 0 30px var(--green-glow), 0 0 60px rgba(0,255,65,0.3);
-            margin-bottom: 16px;
-            animation: glow-pulse 4s ease-in-out infinite;
-            letter-spacing: 4px;
-        }
-
-        .hero-tagline {
-            font-size: 24px;
-            color: var(--green-dim);
-            margin-bottom: 32px;
-            max-width: 700px;
-        }
-
-        .hero-tagline .typed-text {
-            border-right: 2px solid var(--green);
-            animation: blink-caret 1s step-end infinite;
-            padding-right: 4px;
-        }
-
-        .hero-prompt {
-            font-family: 'Share Tech Mono', monospace;
-            font-size: 15px;
-            color: var(--green-dark);
-            margin-top: 48px;
-        }
-
-        .hero-prompt a {
-            color: var(--green);
-            text-decoration: none;
-            border-bottom: 1px dashed var(--green-dark);
-            transition: text-shadow 0.3s;
-        }
-
-        .hero-prompt a:hover {
-            text-shadow: 0 0 10px var(--green-glow);
-        }
-
-        /* ======================== */
-        /* FEATURES                 */
-        /* ======================== */
-        .features-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
-            gap: 24px;
-        }
-
-        .feature-card {
-            background: var(--bg-card);
-            border: 1px solid var(--border);
-            padding: 28px 24px;
-            position: relative;
-            overflow: hidden;
-            transition: border-color 0.3s, box-shadow 0.3s;
-        }
-
-        .feature-card:hover {
-            border-color: var(--green-dim);
-            box-shadow: 0 0 30px var(--green-subtle), inset 0 0 30px var(--green-subtle);
-        }
-
-        .feature-card::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 2px;
-            background: linear-gradient(90deg, transparent, var(--green-dark), transparent);
-            opacity: 0;
-            transition: opacity 0.3s;
-        }
-
-        .feature-card:hover::before {
-            opacity: 1;
-        }
-
-        .feature-icon {
-            font-size: 28px;
-            margin-bottom: 12px;
-            display: block;
-            color: var(--green);
-            text-shadow: 0 0 10px var(--green-glow);
-            font-family: 'Share Tech Mono', monospace;
-        }
-
-        .feature-card h3 {
-            font-size: 22px;
-            margin-bottom: 10px;
-            color: var(--green);
-        }
-
-        .feature-card h3::before {
-            content: '$ ';
-            color: var(--green-dark);
-            font-size: 18px;
-        }
-
-        .feature-card p {
-            color: var(--green-dim);
-            font-size: 16px;
-            line-height: 1.5;
-        }
-
-        /* ======================== */
-        /* WORKFLOW                 */
-        /* ======================== */
-        .workflow-steps {
-            display: grid;
-            gap: 0;
-            position: relative;
-        }
-
-        .workflow-step {
-            display: grid;
-            grid-template-columns: 60px 1fr;
-            gap: 20px;
-            padding: 28px 0;
-            border-bottom: 1px solid var(--border);
-            position: relative;
-            opacity: 0;
-            transform: translateX(-20px);
-            transition: opacity 0.5s, transform 0.5s;
-        }
-
-        .workflow-step.visible {
-            opacity: 1;
-            transform: translateX(0);
-        }
-
-        .workflow-step:last-child {
-            border-bottom: none;
-        }
-
-        .step-number {
-            width: 50px;
-            height: 50px;
-            border: 2px solid var(--green-dark);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 24px;
-            color: var(--green);
-            text-shadow: 0 0 10px var(--green-glow);
-            position: relative;
-            flex-shrink: 0;
-        }
-
-        .step-number::before {
-            content: '';
-            position: absolute;
-            top: -2px;
-            left: -2px;
-            right: -2px;
-            bottom: -2px;
-            border: 1px solid var(--green-faint);
-        }
-
-        .step-content h3 {
-            font-size: 22px;
-            color: var(--green);
-            margin-bottom: 6px;
-        }
-
-        .step-content p {
-            color: var(--green-dim);
-            font-size: 16px;
-        }
-
-        .step-content .cmd {
-            font-family: 'Share Tech Mono', monospace;
-            font-size: 13px;
-            color: var(--green-dark);
-            margin-top: 8px;
-            background: var(--bg);
-            display: inline-block;
-            padding: 4px 10px;
-            border: 1px solid var(--border);
-        }
-
-        /* ======================== */
-        /* DEMO / TERMINAL OUTPUT   */
-        /* ======================== */
-        .terminal-window {
-            background: var(--bg);
-            border: 1px solid var(--border);
-            overflow: hidden;
-            max-width: 900px;
-            margin: 0 auto;
-        }
-
-        .terminal-header {
-            background: var(--bg-light);
-            padding: 10px 16px;
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            border-bottom: 1px solid var(--border);
-        }
-
-        .terminal-dot {
-            width: 10px;
-            height: 10px;
-            border-radius: 50%;
-            border: 1px solid var(--green-dark);
-        }
-
-        .terminal-dot.r { background: #ff5f5680; border-color: #ff5f56; }
-        .terminal-dot.y { background: #ffbd2e80; border-color: #ffbd2e; }
-        .terminal-dot.g { background: #27c93f80; border-color: #27c93f; }
-
-        .terminal-title {
-            font-family: 'Share Tech Mono', monospace;
-            font-size: 12px;
-            color: var(--green-dark);
-            margin-left: 12px;
-            letter-spacing: 1px;
-        }
-
-        .terminal-body {
-            padding: 20px 24px;
-            font-family: 'Share Tech Mono', monospace;
-            font-size: 14px;
-            line-height: 1.8;
-            min-height: 300px;
-            overflow-x: auto;
-        }
-
-        .terminal-body .prompt {
-            color: var(--green);
-        }
-
-        .terminal-body .cmd-text {
-            color: var(--green);
-        }
-
-        .terminal-body .output {
-            color: var(--green-dim);
-        }
-
-        .terminal-body .success {
-            color: var(--green);
-        }
-
-        .terminal-body .warning {
-            color: #ffbd2e;
-        }
-
-        .terminal-body .info {
-            color: var(--green-dark);
-        }
-
-        .terminal-body .highlight {
-            color: var(--green);
-            text-shadow: 0 0 8px var(--green-glow);
-        }
-
-        .terminal-line {
-            margin-bottom: 2px;
-            white-space: pre;
-        }
-
-        /* ======================== */
-        /* TECH STACK               */
-        /* ======================== */
-        .tech-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-            gap: 16px;
-        }
-
-        .tech-item {
-            background: var(--bg-card);
-            border: 1px solid var(--border);
-            padding: 20px;
-            text-align: center;
-            transition: border-color 0.3s, transform 0.2s;
-        }
-
-        .tech-item:hover {
-            border-color: var(--green-dim);
-            transform: translateY(-2px);
-        }
-
-        .tech-item .tech-name {
-            font-size: 20px;
-            color: var(--green);
-            margin-bottom: 6px;
-            text-shadow: 0 0 8px var(--green-glow);
-        }
-
-        .tech-item .tech-desc {
-            font-family: 'Share Tech Mono', monospace;
-            font-size: 12px;
-            color: var(--green-dark);
-            letter-spacing: 1px;
-            text-transform: uppercase;
-        }
-
-        .tech-item .tech-icon {
-            font-size: 32px;
-            margin-bottom: 10px;
-            display: block;
-        }
-
-        /* ======================== */
-        /* DOWNLOAD / INSTALL       */
-        /* ======================== */
-        #download {
-            text-align: center;
-        }
-
-        .install-block {
-            background: var(--bg-card);
-            border: 1px solid var(--border);
-            padding: 32px;
-            max-width: 700px;
-            margin: 0 auto 32px;
-            text-align: left;
-            position: relative;
-        }
-
-        .install-block .install-label {
-            font-family: 'Share Tech Mono', monospace;
-            font-size: 12px;
-            color: var(--green-dark);
-            letter-spacing: 2px;
-            text-transform: uppercase;
-            margin-bottom: 16px;
-        }
-
-        .install-cmd {
-            font-family: 'Share Tech Mono', monospace;
-            font-size: 16px;
-            color: var(--green);
-            background: var(--bg);
-            padding: 16px 20px;
-            border: 1px solid var(--border);
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            gap: 12px;
-            cursor: pointer;
-            transition: border-color 0.3s;
-            margin-bottom: 12px;
-            flex-wrap: wrap;
-        }
-
-        .install-cmd:hover {
-            border-color: var(--green-dim);
-        }
-
-        .install-cmd .cmd-prefix {
-            color: var(--green-dark);
-            user-select: none;
-        }
-
-        .install-cmd .copy-hint {
-            font-size: 11px;
-            color: var(--green-dark);
-            letter-spacing: 1px;
-            user-select: none;
-        }
-
-        .install-note {
-            font-family: 'Share Tech Mono', monospace;
-            font-size: 13px;
-            color: var(--green-dark);
-            margin-top: 12px;
-        }
-
-        .requirements-list {
-            text-align: left;
-            max-width: 700px;
-            margin: 32px auto 0;
-            font-family: 'Share Tech Mono', monospace;
-            font-size: 14px;
-            color: var(--green-dim);
-        }
-
-        .requirements-list li {
-            list-style: none;
-            padding: 6px 0;
-            border-bottom: 1px solid var(--border);
-        }
-
-        .requirements-list li::before {
-            content: '[+] ';
-            color: var(--green-dark);
-        }
-
-        /* ======================== */
-        /* FOOTER                   */
-        /* ======================== */
-        footer {
-            border-top: 1px solid var(--border);
-            padding: 40px 24px;
-            text-align: center;
-        }
-
-        footer .footer-inner {
-            max-width: 1100px;
-            margin: 0 auto;
-        }
-
-        .footer-ascii {
-            font-family: 'Share Tech Mono', monospace;
-            font-size: 11px;
-            color: var(--green-dark);
-            margin-bottom: 20px;
-            line-height: 1.3;
-            white-space: pre;
-            overflow-x: auto;
-        }
-
-        .footer-links {
-            display: flex;
-            justify-content: center;
-            gap: 24px;
-            margin-bottom: 16px;
-            flex-wrap: wrap;
-        }
-
-        .footer-links a {
-            font-family: 'Share Tech Mono', monospace;
-            font-size: 13px;
-            color: var(--green-dark);
-            text-decoration: none;
-            letter-spacing: 1px;
-            transition: color 0.3s;
-        }
-
-        .footer-links a:hover {
-            color: var(--green);
-        }
-
-        .footer-copy {
-            font-family: 'Share Tech Mono', monospace;
-            font-size: 12px;
-            color: #333;
-            letter-spacing: 1px;
-        }
-
-        /* Scroll animations */
-        .reveal {
-            opacity: 0;
-            transform: translateY(30px);
-            transition: opacity 0.6s ease, transform 0.6s ease;
-        }
-
-        .reveal.visible {
-            opacity: 1;
-            transform: translateY(0);
-        }
-
-        /* Responsive */
-        @media (max-width: 768px) {
-            nav ul {
-                display: none;
-                position: absolute;
-                top: 100%;
-                left: 0;
-                right: 0;
-                background: rgba(10, 10, 10, 0.98);
-                flex-direction: column;
-                padding: 16px 24px;
-                border-bottom: 1px solid var(--border);
-                gap: 16px;
-            }
-
-            nav ul.open {
-                display: flex;
-            }
-
-            .hamburger {
-                display: flex;
-            }
-
-            .hero-title {
-                letter-spacing: 2px;
-            }
-
-            .features-grid {
-                grid-template-columns: 1fr;
-            }
-
-            .workflow-step {
-                grid-template-columns: 50px 1fr;
-                gap: 14px;
-            }
-
-            .tech-grid {
-                grid-template-columns: repeat(2, 1fr);
-            }
-
-            section {
-                padding: 60px 16px;
-            }
-
-            .terminal-body {
-                font-size: 12px;
-                padding: 14px 16px;
-            }
-
-            .footer-ascii {
-                font-size: 8px;
-            }
-        }
-
-        @media (max-width: 480px) {
-            .tech-grid {
-                grid-template-columns: 1fr;
-            }
-        }
-    </style>
-</head>
-<body>
-
-<canvas id="matrix-canvas"></canvas>
-<div class="scanline-bar"></div>
-
-<!-- Navigation -->
-<nav>
-    <div class="nav-inner">
-        <div class="logo"><span>[</span>DocuMentor<span>]</span></div>
-        <button class="hamburger" id="hamburger" aria-label="Menu">
-            <span></span><span></span><span></span>
-        </button>
-        <ul id="nav-links">
-            <li><a href="#features">Features</a></li>
-            <li><a href="#workflow">Workflow</a></li>
-            <li><a href="#demo">Demo</a></li>
-            <li><a href="#techstack">Tech-Stack</a></li>
-            <li><a href="#download">Download</a></li>
-        </ul>
-    </div>
-</nav>
-
-<!-- HERO -->
-<section id="hero">
-    <div class="boot-sequence" id="boot-sequence">
-        <div class="boot-line ok">BIOS POST abgeschlossen</div>
-        <div class="boot-line ok">PySide6 Runtime v6.8 geladen</div>
-        <div class="boot-line ok">Saxon HE 12.5 initialisiert</div>
-        <div class="boot-line ok">Apache FOP 2.10 bereit</div>
-        <div class="boot-line ok">PostgreSQL-Verbindung hergestellt</div>
-        <div class="boot-line ok">XSL-Abhängigkeitsgraph aufgebaut</div>
-        <div class="boot-line ok">blake2b Hash-Engine aktiv</div>
-        <div class="boot-line">System bereit. Starte DocuMentor...</div>
-    </div>
-
-    <h1 class="hero-title">DocuMentor</h1>
-
-    <p class="hero-tagline">
-        <span class="typed-text" id="tagline"></span>
-    </p>
-
-    <p class="hero-prompt">
-        <span style="color:var(--green-dark)">user@documentor:~$</span>
-        <a href="#features">./erkunde_features.sh</a>
-        <span class="cursor-blink"></span>
-    </p>
-</section>
-
-<!-- FEATURES -->
-<section id="features">
-    <div class="section-label">// KERNFUNKTIONEN</div>
-    <h2 class="section-title">Feature-Matrix</h2>
-
-    <div class="features-grid">
-        <div class="feature-card reveal">
-            <span class="feature-icon">[/\]</span>
-            <h3>Baumstruktur</h3>
-            <p>Hierarchische Organisation von XSL-Transformationen mit TreeNode-Architektur. Verwalte komplexe Abhängigkeitsketten über eine intuitive Baumansicht mit Drag-and-Drop.</p>
-        </div>
-
-        <div class="feature-card reveal">
-            <span class="feature-icon">[&lt;&gt;]</span>
-            <h3>PDF-Diff</h3>
-            <p>Visueller Drei-Panel-Vergleich: Referenz, Differenz und Neu. Alpha-Blending Overlay mit Zoom- und Pan-Funktionalitaet zum pixelgenauen Abgleich von PDF-Änderungen.</p>
-        </div>
-
-        <div class="feature-card reveal">
-            <span class="feature-icon">[##]</span>
-            <h3>Hash-Tracking</h3>
-            <p>Automatische blake2b-Hashsummen für alle XML-Dateien. Änderungen werden zuverlässig erkannt und im project.yaml persistent gespeichert.</p>
-        </div>
-
-        <div class="feature-card reveal">
-            <span class="feature-icon">[~~]</span>
-            <h3>Async-Verarbeitung</h3>
-            <p>Nicht-blockierende Hintergrund-Threads für Hash-Berechnung und Datenbankabfragen. Die GUI bleibt stets responsiv - mit Abbrechen-Dialog und Timeout-Steuerung.</p>
-        </div>
-
-        <div class="feature-card reveal">
-            <span class="feature-icon">[db]</span>
-            <h3>PostgreSQL</h3>
-            <p>Native Datenbankintegration mit ConnectorX und Polars DataFrames. SSL-Modus-Unterstützung und asynchrone Verbindungstests inklusive.</p>
-        </div>
-
-        <div class="feature-card reveal">
-            <span class="feature-icon">[=>]</span>
-            <h3>Toolchain-Konfiguration</h3>
-            <p>Flexible Verwaltung von Java VM, Saxon, Apache FOP und diff-pdf. ID-basierte Referenzierung ermöglicht projektübergreifende Konfigurationsprofile.</p>
-        </div>
-    </div>
-</section>
-
-<!-- WORKFLOW -->
-<section id="workflow">
-    <div class="section-label">// ARBEITSABLAUF</div>
-    <h2 class="section-title">Workflow-Pipeline</h2>
-
-    <div class="workflow-steps">
-        <div class="workflow-step reveal">
-            <div class="step-number">01</div>
-            <div class="step-content">
-                <h3>XSL-Dateien bearbeiten</h3>
-                <p>Führe die benötigten Änderungen an den XSL-Stylesheets durch. DocuMentor Überwacht den Abhängigkeitsgraphen von über 100 verknüpften Dateien via xsl:import und xsl:include.</p>
-                <span class="cmd">vim vorlage_urkunde.xsl</span>
-            </div>
-        </div>
-
-        <div class="workflow-step reveal">
-            <div class="step-number">02</div>
-            <div class="step-content">
-                <h3>Transformation starten</h3>
-                <p>Starte die Saxon-Transformation direkt aus dem DocuMentor. Die gesamte Toolchain - von XSLT über FOP bis zur PDF-Generierung - wird automatisch orchestriert.</p>
-                <span class="cmd">saxon -> fop -> pdf-output/</span>
-            </div>
-        </div>
-
-        <div class="workflow-step reveal">
-            <div class="step-number">03</div>
-            <div class="step-content">
-                <h3>PDF-Diff begutachten</h3>
-                <p>Vergleiche die neu generierte PDF mit der Referenzversion im Drei-Panel-Viewer. Visuelles Alpha-Blending hebt jede Änderung hervor - Schrift, Layout, Positionen.</p>
-                <span class="cmd">diff-pdf --view referenz.pdf neu.pdf</span>
-            </div>
-        </div>
-
-        <div class="workflow-step reveal">
-            <div class="step-number">04</div>
-            <div class="step-content">
-                <h3>Ergebnis verifizieren</h3>
-                <p>Prüfe: Wurden nur die beabsichtigten PDF-Dateien geändert? Stimmt die Änderung mit der Erwartung überein? Bei Bedarf: zurück zu Schritt 1.</p>
-                <span class="cmd">status: VERIFIED | RETRY</span>
-            </div>
-        </div>
-    </div>
-</section>
-
-<!-- DEMO -->
-<section id="demo">
-    <div class="section-label">// LIVE-AUSGABE</div>
-    <h2 class="section-title">Terminal-Vorschau</h2>
-
-    <div class="terminal-window reveal">
-        <div class="terminal-header">
-            <div class="terminal-dot r"></div>
-            <div class="terminal-dot y"></div>
-            <div class="terminal-dot g"></div>
-            <span class="terminal-title">documentor@workstation:~/projekte/flexnow</span>
-        </div>
-        <div class="terminal-body" id="terminal-output">
-            <div class="terminal-line"><span class="prompt">user@documentor:~$</span> <span class="cmd-text">documentor --projekt flexnow_urkunden</span></div>
-            <div class="terminal-line"><span class="info">[INFO]</span> <span class="output">Lade project.yaml ...</span></div>
-            <div class="terminal-line"><span class="info">[INFO]</span> <span class="output">Projektverzeichnis: /srv/flexnow/xsl-vorlagen</span></div>
-            <div class="terminal-line"><span class="info">[INFO]</span> <span class="output">Gefundene XSL-Dateien: 147</span></div>
-            <div class="terminal-line"><span class="info">[INFO]</span> <span class="output">Abhängigkeitsgraph: 23 Import-Ketten aufgeloest</span></div>
-            <div class="terminal-line"><span class="info">[INFO]</span> <span class="output">Hash-Berechnung gestartet (blake2b, async) ...</span></div>
-            <div class="terminal-line">&nbsp;</div>
-            <div class="terminal-line"><span class="success">[HASH]</span> <span class="output">urkunde_basis.xml       blake2b:a4f8e2..OK</span></div>
-            <div class="terminal-line"><span class="success">[HASH]</span> <span class="output">zeugnis_master.xml      blake2b:7c3d91..OK</span></div>
-            <div class="terminal-line"><span class="warning">[HASH]</span> <span class="output">bescheid_v3.xml         blake2b:GEÄNDERT</span></div>
-            <div class="terminal-line"><span class="success">[HASH]</span> <span class="output">notenblatt.xml          blake2b:f1b8a0..OK</span></div>
-            <div class="terminal-line">&nbsp;</div>
-            <div class="terminal-line"><span class="info">[XSLT]</span> <span class="output">Saxon HE 12.5 - Transformation läuft ...</span></div>
-            <div class="terminal-line"><span class="info">[FOP ]</span> <span class="output">Apache FOP 2.10 - PDF-Generierung ...</span></div>
-            <div class="terminal-line"><span class="success">[DONE]</span> <span class="highlight">4 PDFs generiert in 3.2s</span></div>
-            <div class="terminal-line">&nbsp;</div>
-            <div class="terminal-line"><span class="info">[DIFF]</span> <span class="output">Vergleiche Referenz <-> Neu ...</span></div>
-            <div class="terminal-line"><span class="success">[DIFF]</span> <span class="output">urkunde_basis.pdf       IDENTISCH</span></div>
-            <div class="terminal-line"><span class="success">[DIFF]</span> <span class="output">zeugnis_master.pdf      IDENTISCH</span></div>
-            <div class="terminal-line"><span class="warning">[DIFF]</span> <span class="highlight">bescheid_v3.pdf         2 Seiten geändert</span></div>
-            <div class="terminal-line"><span class="success">[DIFF]</span> <span class="output">notenblatt.pdf          IDENTISCH</span></div>
-            <div class="terminal-line">&nbsp;</div>
-            <div class="terminal-line"><span class="prompt">user@documentor:~$</span> <span class="cursor-blink"></span></div>
-        </div>
-    </div>
-</section>
-
-<!-- TECH STACK -->
-<section id="techstack">
-    <div class="section-label">// TECHNOLOGIE</div>
-    <h2 class="section-title">Tech-Stack</h2>
-
-    <div class="tech-grid">
-        <div class="tech-item reveal">
-            <span class="tech-icon">Py</span>
-            <div class="tech-name">Python</div>
-            <div class="tech-desc">Laufzeitumgebung</div>
-        </div>
-        <div class="tech-item reveal">
-            <span class="tech-icon">Qt</span>
-            <div class="tech-name">PySide6</div>
-            <div class="tech-desc">GUI-Framework</div>
-        </div>
-        <div class="tech-item reveal">
-            <span class="tech-icon">Sx</span>
-            <div class="tech-name">Saxon</div>
-            <div class="tech-desc">XSLT-Prozessor</div>
-        </div>
-        <div class="tech-item reveal">
-            <span class="tech-icon">Fp</span>
-            <div class="tech-name">Apache FOP</div>
-            <div class="tech-desc">PDF-Generierung</div>
-        </div>
-        <div class="tech-item reveal">
-            <span class="tech-icon">Df</span>
-            <div class="tech-name">diff-pdf</div>
-            <div class="tech-desc">PDF-Vergleich</div>
-        </div>
-        <div class="tech-item reveal">
-            <span class="tech-icon">Pg</span>
-            <div class="tech-name">PostgreSQL</div>
-            <div class="tech-desc">Datenbank</div>
-        </div>
-        <div class="tech-item reveal">
-            <span class="tech-icon">Pl</span>
-            <div class="tech-name">Polars</div>
-            <div class="tech-desc">DataFrames</div>
-        </div>
-        <div class="tech-item reveal">
-            <span class="tech-icon">Pd</span>
-            <div class="tech-name">Pydantic</div>
-            <div class="tech-desc">Konfiguration</div>
-        </div>
-    </div>
-</section>
-
-<!-- DOWNLOAD -->
-<section id="download">
-    <div class="section-label">// INSTALLATION</div>
-    <h2 class="section-title">Erste Schritte</h2>
-
-    <div class="install-block">
-        <div class="install-label">Repository klonen</div>
-        <div class="install-cmd" onclick="copyCmd(this, 'git clone https://github.com/your-org/documentor.git')">
-            <div><span class="cmd-prefix">$ </span>git clone https://github.com/your-org/documentor.git</div>
-            <span class="copy-hint">[KLICK ZUM KOPIEREN]</span>
-        </div>
-
-        <div class="install-label" style="margin-top:20px">Abhängigkeiten installieren</div>
-        <div class="install-cmd" onclick="copyCmd(this, 'cd documentor && uv sync')">
-            <div><span class="cmd-prefix">$ </span>cd documentor && uv sync</div>
-            <span class="copy-hint">[KLICK ZUM KOPIEREN]</span>
-        </div>
-
-        <div class="install-label" style="margin-top:20px">Anwendung starten</div>
-        <div class="install-cmd" onclick="copyCmd(this, 'uv run python src/main.py')">
-            <div><span class="cmd-prefix">$ </span>uv run python src/main.py</div>
-            <span class="copy-hint">[KLICK ZUM KOPIEREN]</span>
-        </div>
-
-        <p class="install-note">// Verwendet den uv-Paketmanager für schnelle, reproduzierbare Builds</p>
-    </div>
-
-    <ul class="requirements-list">
-        <li>Python 3.13 oder höher</li>
-        <li>Java Runtime für Saxon</li>
-        <li>Apache FOP 2.x</li>
-        <li>diff-pdf (optional, für PDF-Vergleich)</li>
-        <li>PostgreSQL-Server (optional, für Datenbankintegration)</li>
-        <li>uv-Paketmanager</li>
-    </ul>
-</section>
-
-<!-- FOOTER -->
-<footer>
-    <div class="footer-inner">
-        <div class="footer-ascii">
- ____                  __  __            _
-|  _ \  ___   ___ _   |  \/  | ___ _ __ | |_ ___  _ __
-| | | |/ _ \ / __| | | | |\/| |/ _ \ '_ \| __/ _ \| '__|
-| |_| | (_) | (__| |_| | |  | |  __/ | | | || (_) | |
-|____/ \___/ \___|\__,_|_|  |_|\___|_| |_|\__\___/|_|
-        </div>
-
-        <div class="footer-links">
-            <a href="#hero">// NACH OBEN</a>
-            <a href="https://github.com/your-org/documentor" target="_blank">// GITHUB</a>
-            <a href="#features">// FEATURES</a>
-            <a href="#download">// DOWNLOAD</a>
-        </div>
-
-        <p class="footer-copy">&copy; 2026 DocuMentor | XSL-Transformations-Toolkit | Gebaut mit PySide6</p>
-    </div>
-</footer>
-
-<script>
-    // ============================
-    // Matrix Rain
-    // ============================
-    const canvas = document.getElementById('matrix-canvas');
-    const ctx = canvas.getContext('2d');
-
-    function resizeCanvas() {
-        canvas.width = window.innerWidth;
-        canvas.height = window.innerHeight;
-    }
-    resizeCanvas();
-    window.addEventListener('resize', resizeCanvas);
-
-    const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789<>/={}[];:\'\"!@#$%^&*()_+-~`|\\'.split('');
-    const fontSize = 14;
-    let columns = Math.floor(canvas.width / fontSize);
-    let drops = Array(columns).fill(1);
-
-    function drawMatrix() {
-        ctx.fillStyle = 'rgba(10, 10, 10, 0.05)';
-        ctx.fillRect(0, 0, canvas.width, canvas.height);
-        ctx.fillStyle = '#00ff41';
-        ctx.font = fontSize + 'px "Share Tech Mono", monospace';
-
-        for (let i = 0; i < drops.length; i++) {
-            const text = chars[Math.floor(Math.random() * chars.length)];
-            ctx.fillText(text, i * fontSize, drops[i] * fontSize);
-
-            if (drops[i] * fontSize > canvas.height && Math.random() > 0.975) {
-                drops[i] = 0;
-            }
-            drops[i]++;
-        }
-    }
-
-    setInterval(drawMatrix, 50);
-
-    window.addEventListener('resize', () => {
-        columns = Math.floor(canvas.width / fontSize);
-        drops = Array(columns).fill(1);
-    });
-
-    // ============================
-    // Boot Sequence Animation
-    // ============================
-    const bootLines = document.querySelectorAll('.boot-line');
-    bootLines.forEach((line, i) => {
-        setTimeout(() => {
-            line.classList.add('visible');
-        }, 300 + i * 250);
-    });
-
-    // ============================
-    // Tagline Typing Effect
-    // ============================
-    const tagline = 'XSL-Transformationen validieren. PDF-Änderungen visualisieren. Qualität sichern.';
-    const taglineEl = document.getElementById('tagline');
-    let charIndex = 0;
-
-    function typeTagline() {
-        if (charIndex < tagline.length) {
-            taglineEl.textContent = tagline.substring(0, charIndex + 1);
-            charIndex++;
-            setTimeout(typeTagline, 35);
-        }
-    }
-
-    // Start typing after boot sequence
-    setTimeout(typeTagline, 300 + bootLines.length * 250 + 500);
-
-    // ============================
-    // Scroll Reveal
-    // ============================
-    const revealElements = document.querySelectorAll('.reveal, .workflow-step');
-
-    const revealObserver = new IntersectionObserver((entries) => {
-        entries.forEach(entry => {
-            if (entry.isIntersecting) {
-                entry.target.classList.add('visible');
-            }
-        });
-    }, {
-        threshold: 0.15,
-        rootMargin: '0px 0px -50px 0px'
-    });
-
-    revealElements.forEach(el => revealObserver.observe(el));
-
-    // ============================
-    // Mobile Nav Toggle
-    // ============================
-    document.getElementById('hamburger').addEventListener('click', () => {
-        document.getElementById('nav-links').classList.toggle('open');
-    });
-
-    // Close nav on link click (mobile)
-    document.querySelectorAll('#nav-links a').forEach(link => {
-        link.addEventListener('click', () => {
-            document.getElementById('nav-links').classList.remove('open');
-        });
-    });
-
-    // ============================
-    // Copy Command to Clipboard
-    // ============================
-    function copyCmd(el, text) {
-        navigator.clipboard.writeText(text).then(() => {
-            const hint = el.querySelector('.copy-hint');
-            const original = hint.textContent;
-            hint.textContent = '[KOPIERT!]';
-            hint.style.color = 'var(--green)';
-            setTimeout(() => {
-                hint.textContent = original;
-                hint.style.color = '';
-            }, 2000);
-        });
-    }
-</script>
-
-</body>
-</html>
diff --git a/web/index_v4.html b/web/index_v4.html
deleted file mode 100644
index c624c6b..0000000
--- a/web/index_v4.html
+++ /dev/null
@@ -1,1230 +0,0 @@
-<!DOCTYPE html>
-<html lang="de">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>DocuMentor — XSL-Transformationen unter Kontrolle</title>
-    <link rel="stylesheet" href="fonts/fonts_v4.css">
-    <style>
-        *, *::before, *::after {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-
-        :root {
-            --bg-primary: #faf8f5;
-            --bg-secondary: #f5f0eb;
-            --bg-card: #ffffff;
-            --bg-card-hover: #fefcfa;
-            --border: #ebe5dc;
-            --border-light: #e2dbd2;
-            --text-primary: #2d2a26;
-            --text-secondary: #6b6560;
-            --text-muted: #9e9690;
-            --accent-lavender: #b8a9d4;
-            --accent-lavender-deep: #8b74b8;
-            --accent-lavender-soft: #ece6f5;
-            --accent-coral: #e8a598;
-            --accent-coral-deep: #d4816f;
-            --accent-coral-soft: #fceee9;
-            --accent-mint: #8ec5b5;
-            --accent-mint-deep: #5ea892;
-            --accent-mint-soft: #e5f4ef;
-            --accent-warm: #d4a76a;
-            --accent-warm-soft: #f5eddf;
-            --shadow-soft: 0 2px 16px rgba(45, 42, 38, 0.05);
-            --shadow-medium: 0 4px 24px rgba(45, 42, 38, 0.08);
-            --shadow-hover: 0 8px 32px rgba(45, 42, 38, 0.1);
-            --radius-sm: 12px;
-            --radius-md: 16px;
-            --radius-lg: 24px;
-            --radius-pill: 100px;
-            --font-display: 'Fraunces', Georgia, serif;
-            --font-body: 'Plus Jakarta Sans', system-ui, sans-serif;
-        }
-
-        html {
-            scroll-behavior: smooth;
-            scrollbar-width: thin;
-            scrollbar-color: var(--border-light) var(--bg-primary);
-        }
-
-        body {
-            font-family: var(--font-body);
-            background: var(--bg-primary);
-            color: var(--text-primary);
-            line-height: 1.7;
-            overflow-x: hidden;
-            -webkit-font-smoothing: antialiased;
-        }
-
-        /* ============ NAVIGATION ============ */
-        nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            z-index: 100;
-            padding: 1rem 2rem;
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            backdrop-filter: blur(20px);
-            background: rgba(250, 248, 245, 0.85);
-            border-bottom: 1px solid transparent;
-            transition: all 0.4s ease;
-        }
-
-        nav.scrolled {
-            border-bottom-color: var(--border);
-            box-shadow: 0 1px 12px rgba(45, 42, 38, 0.04);
-        }
-
-        .nav-logo {
-            font-family: var(--font-display);
-            font-size: 1.5rem;
-            font-weight: 500;
-            color: var(--text-primary);
-            text-decoration: none;
-            letter-spacing: -0.02em;
-        }
-
-        .nav-logo span {
-            color: var(--accent-lavender-deep);
-        }
-
-        .nav-links {
-            display: flex;
-            gap: 2rem;
-            list-style: none;
-        }
-
-        .nav-links a {
-            color: var(--text-secondary);
-            text-decoration: none;
-            font-size: 0.88rem;
-            font-weight: 500;
-            transition: color 0.3s ease;
-            padding: 0.4rem 0.8rem;
-            border-radius: var(--radius-pill);
-        }
-
-        .nav-links a:hover {
-            color: var(--accent-lavender-deep);
-            background: var(--accent-lavender-soft);
-        }
-
-        /* ============ HERO ============ */
-        .hero {
-            min-height: 100vh;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            text-align: center;
-            padding: 8rem 2rem 4rem;
-            position: relative;
-            overflow: hidden;
-        }
-
-        .hero::before {
-            content: '';
-            position: absolute;
-            top: -30%;
-            right: -10%;
-            width: 600px;
-            height: 600px;
-            background: radial-gradient(ellipse, rgba(184, 169, 212, 0.2) 0%, transparent 70%);
-            pointer-events: none;
-        }
-
-        .hero::after {
-            content: '';
-            position: absolute;
-            bottom: -10%;
-            left: -10%;
-            width: 500px;
-            height: 500px;
-            background: radial-gradient(ellipse, rgba(232, 165, 152, 0.15) 0%, transparent 70%);
-            pointer-events: none;
-        }
-
-        .hero-badge {
-            display: inline-flex;
-            align-items: center;
-            gap: 0.6rem;
-            padding: 0.5rem 1.2rem;
-            border: 1px solid var(--border);
-            border-radius: var(--radius-pill);
-            font-size: 0.82rem;
-            font-weight: 500;
-            color: var(--text-secondary);
-            margin-bottom: 2.5rem;
-            background: var(--bg-card);
-            box-shadow: var(--shadow-soft);
-            opacity: 0;
-            animation: fadeUp 0.8s ease 0.2s forwards;
-        }
-
-        .hero-badge .dot {
-            width: 8px;
-            height: 8px;
-            border-radius: 50%;
-            background: var(--accent-mint);
-            animation: pulse 2.5s ease infinite;
-        }
-
-        .hero h1 {
-            font-family: var(--font-display);
-            font-size: clamp(3rem, 7vw, 5.5rem);
-            font-weight: 400;
-            line-height: 1.1;
-            letter-spacing: -0.03em;
-            margin-bottom: 1.5rem;
-            opacity: 0;
-            animation: fadeUp 0.8s ease 0.4s forwards;
-            position: relative;
-        }
-
-        .hero h1 em {
-            font-style: italic;
-            color: var(--accent-lavender-deep);
-        }
-
-        .hero-sub {
-            max-width: 540px;
-            font-size: 1.1rem;
-            color: var(--text-secondary);
-            line-height: 1.8;
-            margin-bottom: 3rem;
-            opacity: 0;
-            animation: fadeUp 0.8s ease 0.6s forwards;
-        }
-
-        .hero-actions {
-            display: flex;
-            gap: 1rem;
-            opacity: 0;
-            animation: fadeUp 0.8s ease 0.8s forwards;
-        }
-
-        .btn-primary {
-            display: inline-flex;
-            align-items: center;
-            gap: 0.5rem;
-            padding: 0.9rem 2rem;
-            background: var(--accent-lavender-deep);
-            color: #fff;
-            font-family: var(--font-body);
-            font-size: 0.9rem;
-            font-weight: 600;
-            border: none;
-            border-radius: var(--radius-pill);
-            cursor: pointer;
-            text-decoration: none;
-            transition: all 0.3s ease;
-            box-shadow: 0 4px 16px rgba(139, 116, 184, 0.25);
-        }
-
-        .btn-primary:hover {
-            background: #7a65a8;
-            transform: translateY(-2px);
-            box-shadow: 0 8px 28px rgba(139, 116, 184, 0.3);
-        }
-
-        .btn-secondary {
-            display: inline-flex;
-            align-items: center;
-            gap: 0.5rem;
-            padding: 0.9rem 2rem;
-            background: var(--bg-card);
-            color: var(--text-primary);
-            font-family: var(--font-body);
-            font-size: 0.9rem;
-            font-weight: 600;
-            border: 1px solid var(--border);
-            border-radius: var(--radius-pill);
-            cursor: pointer;
-            text-decoration: none;
-            transition: all 0.3s ease;
-            box-shadow: var(--shadow-soft);
-        }
-
-        .btn-secondary:hover {
-            border-color: var(--accent-lavender);
-            background: var(--accent-lavender-soft);
-            transform: translateY(-1px);
-        }
-
-        /* ============ SCROLL INDICATOR ============ */
-        .scroll-indicator {
-            position: absolute;
-            bottom: 2.5rem;
-            left: 50%;
-            transform: translateX(-50%);
-            opacity: 0;
-            animation: fadeUp 0.8s ease 1.2s forwards;
-        }
-
-        .scroll-indicator .chevron {
-            width: 28px;
-            height: 28px;
-            border-radius: 50%;
-            background: var(--bg-card);
-            border: 1px solid var(--border);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            animation: bounce 2.5s ease infinite;
-            box-shadow: var(--shadow-soft);
-        }
-
-        .scroll-indicator .chevron svg {
-            color: var(--text-muted);
-        }
-
-        /* ============ SECTIONS COMMON ============ */
-        section {
-            padding: 7rem 2rem;
-            max-width: 1100px;
-            margin: 0 auto;
-        }
-
-        .section-label {
-            display: inline-block;
-            font-size: 0.75rem;
-            font-weight: 600;
-            letter-spacing: 0.14em;
-            text-transform: uppercase;
-            color: var(--accent-lavender-deep);
-            background: var(--accent-lavender-soft);
-            padding: 0.35rem 1rem;
-            border-radius: var(--radius-pill);
-            margin-bottom: 1.2rem;
-        }
-
-        .section-title {
-            font-family: var(--font-display);
-            font-size: clamp(2rem, 4vw, 3rem);
-            font-weight: 400;
-            line-height: 1.2;
-            letter-spacing: -0.02em;
-            margin-bottom: 1rem;
-        }
-
-        .section-desc {
-            color: var(--text-secondary);
-            font-size: 1.05rem;
-            max-width: 520px;
-            line-height: 1.8;
-            margin-bottom: 3.5rem;
-        }
-
-        /* ============ WAVE DIVIDER ============ */
-        .section-divider {
-            max-width: 1100px;
-            margin: 0 auto;
-            height: 1px;
-            background: linear-gradient(to right, transparent, var(--border), transparent);
-        }
-
-        /* ============ FEATURES ============ */
-        .features-grid {
-            display: grid;
-            grid-template-columns: repeat(3, 1fr);
-            gap: 1.25rem;
-        }
-
-        .feature-card {
-            background: var(--bg-card);
-            padding: 2rem 1.75rem;
-            border-radius: var(--radius-lg);
-            border: 1px solid var(--border);
-            box-shadow: var(--shadow-soft);
-            transition: all 0.4s ease;
-            position: relative;
-        }
-
-        .feature-card:hover {
-            transform: translateY(-4px);
-            box-shadow: var(--shadow-hover);
-            border-color: transparent;
-        }
-
-        .feature-card:nth-child(1):hover { border-color: var(--accent-lavender); }
-        .feature-card:nth-child(2):hover { border-color: var(--accent-coral); }
-        .feature-card:nth-child(3):hover { border-color: var(--accent-mint); }
-        .feature-card:nth-child(4):hover { border-color: var(--accent-coral); }
-        .feature-card:nth-child(5):hover { border-color: var(--accent-mint); }
-        .feature-card:nth-child(6):hover { border-color: var(--accent-lavender); }
-
-        .feature-icon {
-            width: 48px;
-            height: 48px;
-            border-radius: var(--radius-md);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            margin-bottom: 1.25rem;
-            font-size: 1.2rem;
-        }
-
-        .feature-card:nth-child(1) .feature-icon { background: var(--accent-lavender-soft); color: var(--accent-lavender-deep); }
-        .feature-card:nth-child(2) .feature-icon { background: var(--accent-coral-soft); color: var(--accent-coral-deep); }
-        .feature-card:nth-child(3) .feature-icon { background: var(--accent-mint-soft); color: var(--accent-mint-deep); }
-        .feature-card:nth-child(4) .feature-icon { background: var(--accent-coral-soft); color: var(--accent-coral-deep); }
-        .feature-card:nth-child(5) .feature-icon { background: var(--accent-mint-soft); color: var(--accent-mint-deep); }
-        .feature-card:nth-child(6) .feature-icon { background: var(--accent-lavender-soft); color: var(--accent-lavender-deep); }
-
-        .feature-card h3 {
-            font-family: var(--font-display);
-            font-size: 1.15rem;
-            font-weight: 500;
-            margin-bottom: 0.6rem;
-            letter-spacing: -0.01em;
-        }
-
-        .feature-card p {
-            color: var(--text-secondary);
-            font-size: 0.88rem;
-            line-height: 1.7;
-        }
-
-        /* ============ WORKFLOW ============ */
-        .workflow-steps {
-            display: grid;
-            grid-template-columns: repeat(4, 1fr);
-            gap: 1.25rem;
-            margin-top: 2rem;
-        }
-
-        .workflow-step {
-            background: var(--bg-card);
-            border-radius: var(--radius-lg);
-            border: 1px solid var(--border);
-            padding: 2rem 1.5rem;
-            text-align: center;
-            box-shadow: var(--shadow-soft);
-            position: relative;
-            opacity: 0;
-            transform: translateY(20px);
-            transition: all 0.6s ease;
-        }
-
-        .workflow-step.visible {
-            opacity: 1;
-            transform: translateY(0);
-        }
-
-        .workflow-step:hover {
-            transform: translateY(-3px);
-            box-shadow: var(--shadow-hover);
-        }
-
-        .workflow-step.visible:hover {
-            transform: translateY(-3px);
-        }
-
-        .step-number {
-            font-family: var(--font-display);
-            font-size: 2.5rem;
-            font-weight: 300;
-            line-height: 1;
-            margin-bottom: 1rem;
-            transition: color 0.3s ease;
-        }
-
-        .workflow-step:nth-child(1) .step-number { color: var(--accent-lavender); }
-        .workflow-step:nth-child(2) .step-number { color: var(--accent-coral); }
-        .workflow-step:nth-child(3) .step-number { color: var(--accent-mint); }
-        .workflow-step:nth-child(4) .step-number { color: var(--accent-warm); }
-
-        .step-connector {
-            display: none;
-        }
-
-        .step-content h3 {
-            font-family: var(--font-display);
-            font-size: 1.1rem;
-            font-weight: 500;
-            margin-bottom: 0.5rem;
-        }
-
-        .step-content p {
-            color: var(--text-secondary);
-            font-size: 0.85rem;
-            line-height: 1.65;
-        }
-
-        /* ============ DEMO / SCREENSHOT ============ */
-        .demo-section {
-            text-align: center;
-        }
-
-        .demo-window {
-            margin-top: 3rem;
-            border: 1px solid var(--border);
-            border-radius: var(--radius-lg);
-            overflow: hidden;
-            background: var(--bg-card);
-            box-shadow: var(--shadow-medium);
-        }
-
-        .demo-titlebar {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            padding: 0.9rem 1.5rem;
-            border-bottom: 1px solid var(--border);
-            background: var(--bg-secondary);
-        }
-
-        .demo-dot {
-            width: 12px;
-            height: 12px;
-            border-radius: 50%;
-        }
-
-        .demo-dot:nth-child(1) { background: var(--accent-coral); }
-        .demo-dot:nth-child(2) { background: var(--accent-warm); }
-        .demo-dot:nth-child(3) { background: var(--accent-mint); }
-
-        .demo-titlebar span {
-            margin-left: auto;
-            font-size: 0.8rem;
-            color: var(--text-muted);
-            font-weight: 500;
-        }
-
-        .demo-content {
-            display: grid;
-            grid-template-columns: 220px 1fr;
-            min-height: 420px;
-        }
-
-        .demo-sidebar {
-            background: var(--bg-secondary);
-            padding: 1.5rem;
-            border-right: 1px solid var(--border);
-        }
-
-        .demo-sidebar-title {
-            font-size: 0.7rem;
-            font-weight: 600;
-            letter-spacing: 0.12em;
-            text-transform: uppercase;
-            color: var(--text-muted);
-            margin-bottom: 1rem;
-        }
-
-        .demo-tree {
-            font-size: 0.82rem;
-            color: var(--text-secondary);
-        }
-
-        .demo-tree-item {
-            padding: 0.35rem 0.5rem;
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-            cursor: default;
-            transition: all 0.2s ease;
-            border-radius: var(--radius-sm);
-        }
-
-        .demo-tree-item:hover {
-            background: rgba(184, 169, 212, 0.1);
-            color: var(--text-primary);
-        }
-
-        .demo-tree-item.active {
-            color: var(--accent-lavender-deep);
-            background: var(--accent-lavender-soft);
-            font-weight: 500;
-        }
-
-        .demo-tree-item .icon {
-            opacity: 0.5;
-            font-size: 0.7rem;
-        }
-
-        .indent-1 { padding-left: 1.5rem; }
-        .indent-2 { padding-left: 2.8rem; }
-
-        .demo-main {
-            padding: 1.5rem;
-            display: grid;
-            grid-template-columns: repeat(3, 1fr);
-            gap: 1rem;
-        }
-
-        .demo-panel {
-            border: 1px solid var(--border);
-            border-radius: var(--radius-md);
-            overflow: hidden;
-            background: var(--bg-card);
-        }
-
-        .demo-panel-header {
-            padding: 0.6rem 1rem;
-            font-size: 0.72rem;
-            font-weight: 600;
-            letter-spacing: 0.08em;
-            text-transform: uppercase;
-            color: var(--text-muted);
-            border-bottom: 1px solid var(--border);
-            background: var(--bg-secondary);
-        }
-
-        .demo-panel-body {
-            padding: 1.5rem;
-            min-height: 240px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        }
-
-        .demo-pdf-placeholder {
-            width: 100%;
-            height: 200px;
-            border: 2px dashed var(--border);
-            border-radius: var(--radius-md);
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            color: var(--text-muted);
-            font-size: 0.82rem;
-            gap: 0.5rem;
-            font-weight: 500;
-        }
-
-        .demo-pdf-placeholder .pdf-icon {
-            font-size: 2rem;
-            opacity: 0.5;
-        }
-
-        .demo-panel:nth-child(1) .demo-pdf-placeholder {
-            border-color: var(--accent-lavender);
-            background: var(--accent-lavender-soft);
-        }
-
-        .demo-panel:nth-child(1) .demo-pdf-placeholder .pdf-icon { color: var(--accent-lavender-deep); opacity: 0.7; }
-
-        .demo-panel:nth-child(2) .demo-pdf-placeholder {
-            border-color: var(--accent-coral);
-            background: var(--accent-coral-soft);
-        }
-
-        .demo-panel:nth-child(2) .demo-pdf-placeholder .pdf-icon { color: var(--accent-coral-deep); opacity: 0.7; }
-
-        .demo-panel:nth-child(3) .demo-pdf-placeholder {
-            border-color: var(--accent-mint);
-            background: var(--accent-mint-soft);
-        }
-
-        .demo-panel:nth-child(3) .demo-pdf-placeholder .pdf-icon { color: var(--accent-mint-deep); opacity: 0.7; }
-
-        /* ============ TECH STACK ============ */
-        .tech-grid {
-            display: flex;
-            flex-wrap: wrap;
-            gap: 0.75rem;
-            margin-top: 2rem;
-        }
-
-        .tech-tag {
-            padding: 0.6rem 1.3rem;
-            background: var(--bg-card);
-            border: 1px solid var(--border);
-            border-radius: var(--radius-pill);
-            font-size: 0.85rem;
-            color: var(--text-secondary);
-            font-weight: 500;
-            transition: all 0.3s ease;
-            box-shadow: var(--shadow-soft);
-            cursor: default;
-        }
-
-        .tech-tag:nth-child(odd):hover {
-            border-color: var(--accent-lavender);
-            color: var(--accent-lavender-deep);
-            background: var(--accent-lavender-soft);
-        }
-
-        .tech-tag:nth-child(even):hover {
-            border-color: var(--accent-mint);
-            color: var(--accent-mint-deep);
-            background: var(--accent-mint-soft);
-        }
-
-        /* ============ DOWNLOAD / CTA ============ */
-        .cta-section {
-            text-align: center;
-            padding: 8rem 2rem;
-            position: relative;
-            overflow: hidden;
-        }
-
-        .cta-section::before {
-            content: '';
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            width: 700px;
-            height: 700px;
-            background: radial-gradient(ellipse, rgba(142, 197, 181, 0.12) 0%, rgba(184, 169, 212, 0.08) 40%, transparent 70%);
-            pointer-events: none;
-        }
-
-        .cta-section .section-title {
-            margin-bottom: 1.5rem;
-        }
-
-        .cta-section .section-desc {
-            margin: 0 auto 2.5rem;
-        }
-
-        .install-block {
-            display: inline-flex;
-            align-items: center;
-            gap: 1rem;
-            background: var(--bg-card);
-            border: 1px solid var(--border);
-            border-radius: var(--radius-lg);
-            padding: 1rem 1.5rem;
-            margin-top: 2rem;
-            font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
-            font-size: 0.85rem;
-            color: var(--text-secondary);
-            box-shadow: var(--shadow-soft);
-        }
-
-        .install-block .prompt {
-            color: var(--accent-lavender-deep);
-            user-select: none;
-            font-weight: 600;
-        }
-
-        .install-block code {
-            color: var(--text-primary);
-        }
-
-        .copy-btn {
-            background: var(--bg-secondary);
-            border: 1px solid var(--border);
-            color: var(--text-muted);
-            padding: 0.4rem 0.7rem;
-            border-radius: var(--radius-sm);
-            cursor: pointer;
-            font-size: 0.75rem;
-            transition: all 0.2s ease;
-        }
-
-        .copy-btn:hover {
-            color: var(--accent-lavender-deep);
-            border-color: var(--accent-lavender);
-            background: var(--accent-lavender-soft);
-        }
-
-        /* ============ FOOTER ============ */
-        footer {
-            border-top: 1px solid var(--border);
-            padding: 3rem 2rem;
-            max-width: 1100px;
-            margin: 0 auto;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-
-        .footer-left {
-            font-family: var(--font-display);
-            font-size: 1.05rem;
-            color: var(--text-muted);
-        }
-
-        .footer-left span {
-            color: var(--accent-lavender-deep);
-        }
-
-        .footer-links {
-            display: flex;
-            gap: 2rem;
-            list-style: none;
-        }
-
-        .footer-links a {
-            color: var(--text-muted);
-            text-decoration: none;
-            font-size: 0.85rem;
-            font-weight: 500;
-            transition: color 0.3s ease;
-        }
-
-        .footer-links a:hover {
-            color: var(--accent-lavender-deep);
-        }
-
-        /* ============ ANIMATIONS ============ */
-        @keyframes fadeUp {
-            from {
-                opacity: 0;
-                transform: translateY(24px);
-            }
-            to {
-                opacity: 1;
-                transform: translateY(0);
-            }
-        }
-
-        @keyframes pulse {
-            0%, 100% { opacity: 1; transform: scale(1); }
-            50% { opacity: 0.5; transform: scale(0.85); }
-        }
-
-        @keyframes bounce {
-            0%, 100% { transform: translateY(0); }
-            50% { transform: translateY(6px); }
-        }
-
-        .fade-in {
-            opacity: 0;
-            transform: translateY(24px);
-            transition: opacity 0.7s ease, transform 0.7s ease;
-        }
-
-        .fade-in.visible {
-            opacity: 1;
-            transform: translateY(0);
-        }
-
-        /* ============ FLOATING SHAPES (decorative) ============ */
-        .deco-shape {
-            position: absolute;
-            border-radius: 50%;
-            pointer-events: none;
-            opacity: 0.5;
-        }
-
-        .deco-1 {
-            width: 300px;
-            height: 300px;
-            background: var(--accent-lavender-soft);
-            top: 15%;
-            right: -5%;
-            filter: blur(60px);
-        }
-
-        .deco-2 {
-            width: 250px;
-            height: 250px;
-            background: var(--accent-coral-soft);
-            bottom: 20%;
-            left: -5%;
-            filter: blur(50px);
-        }
-
-        .deco-3 {
-            width: 200px;
-            height: 200px;
-            background: var(--accent-mint-soft);
-            top: 60%;
-            right: 10%;
-            filter: blur(40px);
-        }
-
-        /* ============ RESPONSIVE ============ */
-        @media (max-width: 900px) {
-            .features-grid {
-                grid-template-columns: repeat(2, 1fr);
-            }
-
-            .workflow-steps {
-                grid-template-columns: repeat(2, 1fr);
-            }
-
-            .demo-content {
-                grid-template-columns: 1fr;
-            }
-
-            .demo-sidebar {
-                display: none;
-            }
-
-            .demo-main {
-                grid-template-columns: 1fr;
-            }
-
-            .nav-links {
-                display: none;
-            }
-
-            footer {
-                flex-direction: column;
-                gap: 1.5rem;
-                text-align: center;
-            }
-        }
-
-        @media (max-width: 600px) {
-            .hero h1 {
-                font-size: 2.5rem;
-            }
-
-            .features-grid {
-                grid-template-columns: 1fr;
-            }
-
-            .workflow-steps {
-                grid-template-columns: 1fr;
-            }
-
-            .hero-actions {
-                flex-direction: column;
-                width: 100%;
-                max-width: 300px;
-            }
-
-            .btn-primary, .btn-secondary {
-                justify-content: center;
-            }
-
-            .install-block {
-                flex-direction: column;
-                text-align: center;
-                gap: 0.5rem;
-            }
-        }
-    </style>
-</head>
-<body>
-
-    <!-- ============ NAVIGATION ============ -->
-    <nav id="navbar">
-        <a href="#" class="nav-logo">Docu<span>Mentor</span></a>
-        <ul class="nav-links">
-            <li><a href="#features">Features</a></li>
-            <li><a href="#workflow">Workflow</a></li>
-            <li><a href="#demo">Vorschau</a></li>
-            <li><a href="#tech">Technologie</a></li>
-            <li><a href="#download">Download</a></li>
-        </ul>
-    </nav>
-
-    <!-- ============ HERO ============ -->
-    <section class="hero">
-        <div class="hero-badge">
-            <span class="dot"></span>
-            Open Source &middot; PySide6 Desktop-Anwendung
-        </div>
-        <h1>XSL-Transformationen<br>unter <em>Kontrolle</em></h1>
-        <p class="hero-sub">
-            Verwalten, transformieren und vergleichen Sie Ihre XSL-basierten PDF-Dokumente &mdash;
-            mit voller Transparenz bei jeder Änderung.
-        </p>
-        <div class="hero-actions">
-            <a href="#download" class="btn-primary">
-                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M8 2v9m0 0L4.5 7.5M8 11l3.5-3.5M2 13h12"/></svg>
-                Jetzt herunterladen
-            </a>
-            <a href="#features" class="btn-secondary">Mehr erfahren</a>
-        </div>
-        <div class="scroll-indicator">
-            <div class="chevron">
-                <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 6l4 4 4-4"/></svg>
-            </div>
-        </div>
-    </section>
-
-    <!-- ============ FEATURES ============ -->
-    <div class="section-divider"></div>
-    <section id="features" style="position:relative;">
-        <div class="deco-shape deco-1"></div>
-        <div class="fade-in">
-            <span class="section-label">Features</span>
-            <h2 class="section-title">Präzisionswerkzeuge für<br>Dokument-Workflows</h2>
-            <p class="section-desc">
-                Jede Änderung an Ihren XSL-Dateien kann unerwartete Auswirkungen auf Dutzende
-                PDF-Dokumente haben. DocuMentor macht diese sichtbar.
-            </p>
-        </div>
-
-        <div class="features-grid fade-in">
-            <div class="feature-card">
-                <div class="feature-icon">
-                    <svg width="22" height="22" viewBox="0 0 22 22" fill="none" stroke="currentColor" stroke-width="1.4"><path d="M4 5h4v4H4zM4 13h4v4H4zM12 5h7M12 9h5M12 13h7M12 17h4"/></svg>
-                </div>
-                <h3>Hierarchische Baumstruktur</h3>
-                <p>Organisieren Sie XSL-Dateien und ihre XML-Eingaben in einer übersichtlichen, verschachtelten Struktur mit Drag-and-Drop.</p>
-            </div>
-            <div class="feature-card">
-                <div class="feature-icon">
-                    <svg width="22" height="22" viewBox="0 0 22 22" fill="none" stroke="currentColor" stroke-width="1.4"><rect x="2" y="3" width="7" height="9" rx="1.5"/><rect x="13" y="3" width="7" height="9" rx="1.5"/><path d="M5.5 15v3M16.5 15v3M5.5 18h11"/></svg>
-                </div>
-                <h3>PDF-Diff-Vergleich</h3>
-                <p>Drei-Panel-Ansicht mit Referenz, Diff und neuer Version. Alpha-Blending hebt Unterschiede visuell hervor.</p>
-            </div>
-            <div class="feature-card">
-                <div class="feature-icon">
-                    <svg width="22" height="22" viewBox="0 0 22 22" fill="none" stroke="currentColor" stroke-width="1.4"><path d="M11 4v7l4 3"/><circle cx="11" cy="11" r="8"/></svg>
-                </div>
-                <h3>Änderungsverfolgung</h3>
-                <p>Automatische blake2b-Hash-Berechnung erkennt sofort, welche XML-Dateien sich seit dem letzten Durchlauf verändert haben.</p>
-            </div>
-            <div class="feature-card">
-                <div class="feature-icon">
-                    <svg width="22" height="22" viewBox="0 0 22 22" fill="none" stroke="currentColor" stroke-width="1.4"><path d="M3 11h2.5l2.5-5 3 10 2.5-7 2 4h3.5"/></svg>
-                </div>
-                <h3>Asynchrone Verarbeitung</h3>
-                <p>Hintergrund-Threads halten die Oberfläche reaktionsfähig, auch bei rechenintensiven Transformationen und großen Dateien.</p>
-            </div>
-            <div class="feature-card">
-                <div class="feature-icon">
-                    <svg width="22" height="22" viewBox="0 0 22 22" fill="none" stroke="currentColor" stroke-width="1.4"><ellipse cx="11" cy="6.5" rx="8" ry="3.5"/><path d="M3 6.5v4.5c0 1.93 3.58 3.5 8 3.5s8-1.57 8-3.5V6.5M3 11v4.5c0 1.93 3.58 3.5 8 3.5s8-1.57 8-3.5V11"/></svg>
-                </div>
-                <h3>PostgreSQL-Integration</h3>
-                <p>Direkte Datenbankanbindung für XML-Daten via ConnectorX und Polars &mdash; performant und typsicher.</p>
-            </div>
-            <div class="feature-card">
-                <div class="feature-icon">
-                    <svg width="22" height="22" viewBox="0 0 22 22" fill="none" stroke="currentColor" stroke-width="1.4"><path d="M6 3h10l2 3v12a2 2 0 01-2 2H6a2 2 0 01-2-2V6l2-3z"/><path d="M9 10h4M9 14h2"/></svg>
-                </div>
-                <h3>Toolchain-Konfiguration</h3>
-                <p>Flexible Verwaltung von Saxon, Apache FOP und diff-pdf. Unterstützt mehrere Versionen parallel.</p>
-            </div>
-        </div>
-    </section>
-
-    <!-- ============ WORKFLOW ============ -->
-    <div class="section-divider"></div>
-    <section id="workflow" style="position:relative;">
-        <div class="deco-shape deco-2"></div>
-        <div class="fade-in">
-            <span class="section-label">Workflow</span>
-            <h2 class="section-title">Vier Schritte zur Gewissheit</h2>
-            <p class="section-desc">
-                DocuMentor begleitet Sie durch den gesamten Validierungszyklus Ihrer
-                XSL-Transformationen.
-            </p>
-        </div>
-
-        <div class="workflow-steps">
-            <div class="workflow-step">
-                <div class="step-number">01</div>
-                <div class="step-content">
-                    <h3>XSL bearbeiten</h3>
-                    <p>Nehmen Sie Änderungen an Ihren XSL-Stylesheets vor &mdash; in Ihrem gewohnten Editor.</p>
-                </div>
-            </div>
-            <div class="workflow-step">
-                <div class="step-number">02</div>
-                <div class="step-content">
-                    <h3>Transformation starten</h3>
-                    <p>DocuMentor führt die Transformation über Saxon und Apache FOP durch.</p>
-                </div>
-            </div>
-            <div class="workflow-step">
-                <div class="step-number">03</div>
-                <div class="step-content">
-                    <h3>PDF-Diff begutachten</h3>
-                    <p>Der visuelle Vergleich zeigt exakt, welche Seiten sich geändert haben.</p>
-                </div>
-            </div>
-            <div class="workflow-step">
-                <div class="step-number">04</div>
-                <div class="step-content">
-                    <h3>Ergebnis verifizieren</h3>
-                    <p>Prüfen Sie, ob genau die richtigen Dokumente betroffen sind.</p>
-                </div>
-            </div>
-        </div>
-    </section>
-
-    <!-- ============ DEMO ============ -->
-    <div class="section-divider"></div>
-    <section id="demo" class="demo-section" style="position:relative;">
-        <div class="deco-shape deco-3"></div>
-        <div class="fade-in">
-            <span class="section-label">Oberfläche</span>
-            <h2 class="section-title">Alles im Blick</h2>
-            <p class="section-desc" style="margin-left:auto;margin-right:auto;">
-                Baumstruktur, Transformation und PDF-Vergleich &mdash; alles in einem Fenster.
-            </p>
-        </div>
-
-        <div class="demo-window fade-in">
-            <div class="demo-titlebar">
-                <div class="demo-dot"></div>
-                <div class="demo-dot"></div>
-                <div class="demo-dot"></div>
-                <span>DocuMentor &mdash; Projekt: Zeugnisse_WS2025</span>
-            </div>
-            <div class="demo-content">
-                <div class="demo-sidebar">
-                    <div class="demo-sidebar-title">Projektbaum</div>
-                    <div class="demo-tree">
-                        <div class="demo-tree-item">
-                            <span class="icon">&#9660;</span> Urkunden
-                        </div>
-                        <div class="demo-tree-item indent-1">
-                            <span class="icon">&#9660;</span> Bachelor
-                        </div>
-                        <div class="demo-tree-item indent-2 active">
-                            <span class="icon">&#9654;</span> urkunde_ba.xsl
-                        </div>
-                        <div class="demo-tree-item indent-2">
-                            <span class="icon">&#8226;</span> student_123.xml
-                        </div>
-                        <div class="demo-tree-item indent-2">
-                            <span class="icon">&#8226;</span> student_456.xml
-                        </div>
-                        <div class="demo-tree-item indent-1">
-                            <span class="icon">&#9654;</span> Master
-                        </div>
-                        <div class="demo-tree-item">
-                            <span class="icon">&#9654;</span> Zeugnisse
-                        </div>
-                        <div class="demo-tree-item">
-                            <span class="icon">&#9654;</span> Bescheide
-                        </div>
-                    </div>
-                </div>
-                <div class="demo-main">
-                    <div class="demo-panel">
-                        <div class="demo-panel-header">Referenz</div>
-                        <div class="demo-panel-body">
-                            <div class="demo-pdf-placeholder">
-                                <span class="pdf-icon">&#128196;</span>
-                                PDF-Vorschau
-                            </div>
-                        </div>
-                    </div>
-                    <div class="demo-panel">
-                        <div class="demo-panel-header">Diff</div>
-                        <div class="demo-panel-body">
-                            <div class="demo-pdf-placeholder">
-                                <span class="pdf-icon">&#128269;</span>
-                                Unterschiede
-                            </div>
-                        </div>
-                    </div>
-                    <div class="demo-panel">
-                        <div class="demo-panel-header">Neu</div>
-                        <div class="demo-panel-body">
-                            <div class="demo-pdf-placeholder">
-                                <span class="pdf-icon">&#128196;</span>
-                                PDF-Vorschau
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </section>
-
-    <!-- ============ TECH STACK ============ -->
-    <div class="section-divider"></div>
-    <section id="tech">
-        <div class="fade-in">
-            <span class="section-label">Technologie</span>
-            <h2 class="section-title">Bewährter Stack</h2>
-            <p class="section-desc">Aufgebaut auf robusten, etablierten Technologien.</p>
-            <div class="tech-grid">
-                <span class="tech-tag">Python 3</span>
-                <span class="tech-tag">PySide6 / Qt</span>
-                <span class="tech-tag">Saxon XSLT</span>
-                <span class="tech-tag">Apache FOP</span>
-                <span class="tech-tag">diff-pdf</span>
-                <span class="tech-tag">PostgreSQL</span>
-                <span class="tech-tag">Polars</span>
-                <span class="tech-tag">ConnectorX</span>
-                <span class="tech-tag">Pydantic</span>
-                <span class="tech-tag">blake2b Hashing</span>
-                <span class="tech-tag">PyInstaller</span>
-            </div>
-        </div>
-    </section>
-
-    <!-- ============ DOWNLOAD / CTA ============ -->
-    <div class="section-divider"></div>
-    <section id="download" class="cta-section">
-        <div class="fade-in">
-            <span class="section-label">Loslegen</span>
-            <h2 class="section-title">Bereit für kontrollierte<br>Transformationen?</h2>
-            <p class="section-desc">
-                DocuMentor ist Open Source. Klonen Sie das Repository und starten Sie in wenigen Minuten.
-            </p>
-            <div class="hero-actions" style="justify-content:center;opacity:1;animation:none;">
-                <a href="https://github.com" class="btn-primary" target="_blank">
-                    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/></svg>
-                    GitHub Repository
-                </a>
-            </div>
-            <div class="install-block fade-in">
-                <span class="prompt">$</span>
-                <code>git clone &amp;&amp; uv sync &amp;&amp; uv run python src/main.py</code>
-                <button class="copy-btn" onclick="copyInstall()" title="Kopieren">
-                    <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="5" y="5" width="9" height="9" rx="1.5"/><path d="M5 11H3.5A1.5 1.5 0 012 9.5v-7A1.5 1.5 0 013.5 1h7A1.5 1.5 0 0112 2.5V5"/></svg>
-                </button>
-            </div>
-        </div>
-    </section>
-
-    <!-- ============ FOOTER ============ -->
-    <footer>
-        <div class="footer-left">Docu<span>Mentor</span> &copy; 2025</div>
-        <ul class="footer-links">
-            <li><a href="https://github.com" target="_blank">GitHub</a></li>
-            <li><a href="#features">Features</a></li>
-            <li><a href="#workflow">Workflow</a></li>
-        </ul>
-    </footer>
-
-    <!-- ============ SCRIPTS ============ -->
-    <script>
-        // Navbar scroll effect
-        const navbar = document.getElementById('navbar');
-        window.addEventListener('scroll', () => {
-            navbar.classList.toggle('scrolled', window.scrollY > 40);
-        });
-
-        // Intersection Observer for fade-in elements
-        const observer = new IntersectionObserver(
-            (entries) => {
-                entries.forEach(entry => {
-                    if (entry.isIntersecting) {
-                        entry.target.classList.add('visible');
-                    }
-                });
-            },
-            { threshold: 0.1, rootMargin: '0px 0px -60px 0px' }
-        );
-
-        document.querySelectorAll('.fade-in, .workflow-step').forEach(el => {
-            observer.observe(el);
-        });
-
-        // Copy install command
-        function copyInstall() {
-            const cmd = 'git clone <repo-url> && cd documentor && uv sync && uv run python src/main.py';
-            navigator.clipboard.writeText(cmd).then(() => {
-                const btn = document.querySelector('.copy-btn');
-                const original = btn.innerHTML;
-                btn.innerHTML = '<svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 8.5l3 3 7-7"/></svg>';
-                btn.style.color = 'var(--accent-mint-deep)';
-                btn.style.borderColor = 'var(--accent-mint)';
-                btn.style.background = 'var(--accent-mint-soft)';
-                setTimeout(() => {
-                    btn.innerHTML = original;
-                    btn.style.color = '';
-                    btn.style.borderColor = '';
-                    btn.style.background = '';
-                }, 2000);
-            });
-        }
-    </script>
-</body>
-</html>
diff --git a/web/index_v5.html b/web/index_v5.html
deleted file mode 100644
index 0128abb..0000000
--- a/web/index_v5.html
+++ /dev/null
@@ -1,1761 +0,0 @@
-<!DOCTYPE html>
-<html lang="de">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>DocuMentor — Elegante XSL-Transformation &amp; PDF-Validierung</title>
-    <link rel="stylesheet" href="fonts/fonts_v5.css">
-    <style>
-        /* ===== RESET & BASE ===== */
-        *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
-
-        :root {
-            --navy-deep: #0d1b2a;
-            --navy-mid: #1b2d45;
-            --navy-light: #243b56;
-            --gold: #d4af37;
-            --gold-light: #e8cc6a;
-            --gold-dark: #b8962e;
-            --gold-pale: #f5e6b8;
-            --cream: #f8f3e6;
-            --white: #ffffff;
-            --text-light: #c8d0da;
-            --font-display: 'Poiret One', cursive;
-            --font-serif: 'Cormorant Garamond', serif;
-            --font-body: 'Raleway', sans-serif;
-        }
-
-        html { scroll-behavior: smooth; }
-
-        body {
-            font-family: var(--font-body);
-            font-weight: 300;
-            background: var(--navy-deep);
-            color: var(--text-light);
-            line-height: 1.7;
-            overflow-x: hidden;
-        }
-
-        /* ===== SHIMMER ANIMATION ===== */
-        @keyframes shimmer {
-            0% { background-position: -200% center; }
-            100% { background-position: 200% center; }
-        }
-
-        @keyframes fadeInUp {
-            from { opacity: 0; transform: translateY(40px); }
-            to { opacity: 1; transform: translateY(0); }
-        }
-
-        @keyframes fanReveal {
-            from { transform: scaleY(0); opacity: 0; }
-            to { transform: scaleY(1); opacity: 1; }
-        }
-
-        @keyframes pulse-gold {
-            0%, 100% { opacity: 0.6; }
-            50% { opacity: 1; }
-        }
-
-        @keyframes rotateIn {
-            from { transform: rotate(-90deg) scale(0); opacity: 0; }
-            to { transform: rotate(0deg) scale(1); opacity: 1; }
-        }
-
-        .shimmer-text {
-            background: linear-gradient(
-                110deg,
-                var(--gold-dark) 0%,
-                var(--gold) 20%,
-                var(--gold-light) 40%,
-                var(--gold-pale) 50%,
-                var(--gold-light) 60%,
-                var(--gold) 80%,
-                var(--gold-dark) 100%
-            );
-            background-size: 200% auto;
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            animation: shimmer 4s linear infinite;
-        }
-
-        .shimmer-border {
-            background: linear-gradient(
-                90deg,
-                var(--gold-dark),
-                var(--gold),
-                var(--gold-light),
-                var(--gold-pale),
-                var(--gold-light),
-                var(--gold),
-                var(--gold-dark)
-            );
-            background-size: 200% auto;
-            animation: shimmer 5s linear infinite;
-        }
-
-        /* ===== GEOMETRIC DECORATIONS ===== */
-        .geo-line {
-            height: 1px;
-            background: linear-gradient(90deg, transparent, var(--gold), transparent);
-            margin: 2rem auto;
-            max-width: 600px;
-        }
-
-        .geo-line-short {
-            height: 1px;
-            width: 80px;
-            background: var(--gold);
-            margin: 1rem auto;
-        }
-
-        .geo-diamond {
-            width: 12px;
-            height: 12px;
-            background: var(--gold);
-            transform: rotate(45deg);
-            margin: 0 auto;
-        }
-
-        .geo-diamond-group {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 1.5rem;
-            margin: 2rem 0;
-        }
-
-        .geo-diamond-group::before,
-        .geo-diamond-group::after {
-            content: '';
-            height: 1px;
-            width: 80px;
-            background: linear-gradient(90deg, transparent, var(--gold));
-        }
-
-        .geo-diamond-group::after {
-            background: linear-gradient(90deg, var(--gold), transparent);
-        }
-
-        /* Sunburst / Fan motif */
-        .sunburst {
-            position: relative;
-            width: 120px;
-            height: 60px;
-            margin: 0 auto 2rem;
-            overflow: hidden;
-        }
-
-        .sunburst::before {
-            content: '';
-            position: absolute;
-            bottom: 0;
-            left: 50%;
-            width: 200px;
-            height: 200px;
-            transform: translateX(-50%);
-            background: repeating-conic-gradient(
-                var(--gold) 0deg 2deg,
-                transparent 2deg 12deg
-            );
-            opacity: 0.3;
-            border-radius: 50%;
-        }
-
-        .fan-decoration {
-            position: relative;
-            width: 200px;
-            height: 100px;
-            margin: 0 auto;
-            overflow: hidden;
-        }
-
-        .fan-decoration::before {
-            content: '';
-            position: absolute;
-            bottom: -100px;
-            left: 50%;
-            transform: translateX(-50%);
-            width: 200px;
-            height: 200px;
-            border-radius: 50%;
-            background: repeating-conic-gradient(
-                from 180deg,
-                rgba(212, 175, 55, 0.15) 0deg 3deg,
-                transparent 3deg 10deg
-            );
-        }
-
-        /* Corner ornaments */
-        .corner-ornament {
-            position: absolute;
-            width: 60px;
-            height: 60px;
-        }
-
-        .corner-ornament::before,
-        .corner-ornament::after {
-            content: '';
-            position: absolute;
-            background: var(--gold);
-        }
-
-        .corner-ornament::before {
-            width: 100%;
-            height: 1px;
-            top: 0;
-        }
-
-        .corner-ornament::after {
-            width: 1px;
-            height: 100%;
-            left: 0;
-        }
-
-        .corner-ornament.top-left { top: 0; left: 0; }
-        .corner-ornament.top-right { top: 0; right: 0; transform: scaleX(-1); }
-        .corner-ornament.bottom-left { bottom: 0; left: 0; transform: scaleY(-1); }
-        .corner-ornament.bottom-right { bottom: 0; right: 0; transform: scale(-1); }
-
-        /* ===== NAVIGATION ===== */
-        nav {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            z-index: 1000;
-            background: rgba(13, 27, 42, 0.92);
-            backdrop-filter: blur(12px);
-            border-bottom: 1px solid rgba(212, 175, 55, 0.2);
-            transition: all 0.3s ease;
-        }
-
-        nav.scrolled {
-            background: rgba(13, 27, 42, 0.98);
-            border-bottom-color: var(--gold);
-        }
-
-        .nav-inner {
-            max-width: 1200px;
-            margin: 0 auto;
-            padding: 1rem 2rem;
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-        }
-
-        .nav-logo {
-            font-family: var(--font-display);
-            font-size: 1.5rem;
-            color: var(--gold);
-            text-decoration: none;
-            letter-spacing: 4px;
-            text-transform: uppercase;
-        }
-
-        .nav-links {
-            display: flex;
-            gap: 2rem;
-            list-style: none;
-        }
-
-        .nav-links a {
-            color: var(--text-light);
-            text-decoration: none;
-            font-size: 0.85rem;
-            font-weight: 400;
-            letter-spacing: 2px;
-            text-transform: uppercase;
-            transition: color 0.3s;
-            position: relative;
-        }
-
-        .nav-links a::after {
-            content: '';
-            position: absolute;
-            bottom: -4px;
-            left: 0;
-            width: 0;
-            height: 1px;
-            background: var(--gold);
-            transition: width 0.3s;
-        }
-
-        .nav-links a:hover { color: var(--gold); }
-        .nav-links a:hover::after { width: 100%; }
-
-        .nav-toggle {
-            display: none;
-            flex-direction: column;
-            gap: 5px;
-            cursor: pointer;
-            background: none;
-            border: none;
-            padding: 4px;
-        }
-
-        .nav-toggle span {
-            width: 24px;
-            height: 1px;
-            background: var(--gold);
-            transition: all 0.3s;
-        }
-
-        /* ===== HERO ===== */
-        .hero {
-            min-height: 100vh;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            position: relative;
-            overflow: hidden;
-            background:
-                radial-gradient(ellipse at 50% 30%, rgba(212, 175, 55, 0.06) 0%, transparent 60%),
-                radial-gradient(ellipse at 50% 80%, rgba(27, 45, 69, 0.5) 0%, transparent 50%),
-                var(--navy-deep);
-        }
-
-        /* Background geometric pattern */
-        .hero::before {
-            content: '';
-            position: absolute;
-            inset: 0;
-            background-image:
-                repeating-linear-gradient(
-                    0deg,
-                    transparent,
-                    transparent 80px,
-                    rgba(212, 175, 55, 0.03) 80px,
-                    rgba(212, 175, 55, 0.03) 81px
-                ),
-                repeating-linear-gradient(
-                    90deg,
-                    transparent,
-                    transparent 80px,
-                    rgba(212, 175, 55, 0.03) 80px,
-                    rgba(212, 175, 55, 0.03) 81px
-                );
-            pointer-events: none;
-        }
-
-        .hero-frame {
-            position: relative;
-            padding: 4rem 5rem;
-            text-align: center;
-            max-width: 900px;
-        }
-
-        /* Art Deco ornamental frame */
-        .hero-frame::before {
-            content: '';
-            position: absolute;
-            inset: 0;
-            border: 1px solid rgba(212, 175, 55, 0.3);
-            pointer-events: none;
-        }
-
-        .hero-frame::after {
-            content: '';
-            position: absolute;
-            inset: 8px;
-            border: 1px solid rgba(212, 175, 55, 0.15);
-            pointer-events: none;
-        }
-
-        .hero-fan {
-            position: absolute;
-            top: -80px;
-            left: 50%;
-            transform: translateX(-50%);
-            width: 300px;
-            height: 160px;
-            overflow: hidden;
-            opacity: 0.25;
-        }
-
-        .hero-fan::before {
-            content: '';
-            position: absolute;
-            bottom: -160px;
-            left: 50%;
-            transform: translateX(-50%);
-            width: 320px;
-            height: 320px;
-            border-radius: 50%;
-            background: repeating-conic-gradient(
-                from 180deg,
-                var(--gold) 0deg 1.5deg,
-                transparent 1.5deg 8deg
-            );
-        }
-
-        .hero-subtitle-top {
-            font-family: var(--font-body);
-            font-size: 0.85rem;
-            font-weight: 400;
-            letter-spacing: 8px;
-            text-transform: uppercase;
-            color: var(--gold);
-            margin-bottom: 1.5rem;
-            opacity: 0;
-            animation: fadeInUp 1s ease 0.3s forwards;
-        }
-
-        .hero-title {
-            font-family: var(--font-display);
-            font-size: clamp(3rem, 7vw, 6rem);
-            letter-spacing: 12px;
-            text-transform: uppercase;
-            line-height: 1.1;
-            margin-bottom: 0.5rem;
-            opacity: 0;
-            animation: fadeInUp 1s ease 0.5s forwards;
-        }
-
-        .hero-tagline {
-            font-family: var(--font-serif);
-            font-size: clamp(1.1rem, 2.5vw, 1.5rem);
-            font-weight: 300;
-            font-style: italic;
-            color: var(--gold-pale);
-            margin-top: 1rem;
-            margin-bottom: 2rem;
-            opacity: 0;
-            animation: fadeInUp 1s ease 0.7s forwards;
-        }
-
-        .hero-deco-line {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 1rem;
-            margin: 1.5rem 0;
-            opacity: 0;
-            animation: fadeInUp 1s ease 0.9s forwards;
-        }
-
-        .hero-deco-line span {
-            height: 1px;
-            width: 100px;
-            background: linear-gradient(90deg, transparent, var(--gold));
-        }
-
-        .hero-deco-line span:last-child {
-            background: linear-gradient(90deg, var(--gold), transparent);
-        }
-
-        .hero-deco-line .diamond-sm {
-            width: 8px;
-            height: 8px;
-            background: var(--gold);
-            transform: rotate(45deg);
-            flex-shrink: 0;
-        }
-
-        .hero-description {
-            font-size: 0.95rem;
-            color: var(--text-light);
-            max-width: 560px;
-            margin: 0 auto 2rem;
-            opacity: 0;
-            animation: fadeInUp 1s ease 1.1s forwards;
-        }
-
-        .hero-cta {
-            display: inline-block;
-            font-family: var(--font-body);
-            font-size: 0.85rem;
-            font-weight: 500;
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            color: var(--navy-deep);
-            background: linear-gradient(135deg, var(--gold), var(--gold-light));
-            padding: 1rem 3rem;
-            text-decoration: none;
-            border: none;
-            cursor: pointer;
-            transition: all 0.4s ease;
-            position: relative;
-            opacity: 0;
-            animation: fadeInUp 1s ease 1.3s forwards;
-        }
-
-        .hero-cta:hover {
-            background: linear-gradient(135deg, var(--gold-light), var(--gold-pale));
-            transform: translateY(-2px);
-            box-shadow: 0 8px 30px rgba(212, 175, 55, 0.3);
-        }
-
-        .hero-cta::before,
-        .hero-cta::after {
-            content: '';
-            position: absolute;
-            width: 12px;
-            height: 12px;
-            border: 1px solid var(--gold);
-            transition: all 0.4s ease;
-        }
-
-        .hero-cta::before {
-            top: -6px;
-            left: -6px;
-            border-right: none;
-            border-bottom: none;
-        }
-
-        .hero-cta::after {
-            bottom: -6px;
-            right: -6px;
-            border-left: none;
-            border-top: none;
-        }
-
-        .hero-cta:hover::before { top: -8px; left: -8px; }
-        .hero-cta:hover::after { bottom: -8px; right: -8px; }
-
-        /* Scroll indicator */
-        .scroll-indicator {
-            position: absolute;
-            bottom: 2rem;
-            left: 50%;
-            transform: translateX(-50%);
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            gap: 0.5rem;
-            opacity: 0;
-            animation: fadeInUp 1s ease 1.6s forwards;
-        }
-
-        .scroll-indicator span {
-            font-size: 0.7rem;
-            letter-spacing: 3px;
-            text-transform: uppercase;
-            color: rgba(212, 175, 55, 0.5);
-        }
-
-        .scroll-indicator .scroll-line {
-            width: 1px;
-            height: 40px;
-            background: linear-gradient(to bottom, var(--gold), transparent);
-            animation: pulse-gold 2s ease infinite;
-        }
-
-        /* ===== SECTION COMMON ===== */
-        section {
-            padding: 6rem 2rem;
-            position: relative;
-        }
-
-        .section-container {
-            max-width: 1200px;
-            margin: 0 auto;
-        }
-
-        .section-header {
-            text-align: center;
-            margin-bottom: 4rem;
-        }
-
-        .section-label {
-            font-family: var(--font-body);
-            font-size: 0.75rem;
-            font-weight: 500;
-            letter-spacing: 6px;
-            text-transform: uppercase;
-            color: var(--gold);
-            margin-bottom: 1rem;
-        }
-
-        .section-title {
-            font-family: var(--font-display);
-            font-size: clamp(2rem, 4vw, 3rem);
-            letter-spacing: 6px;
-            text-transform: uppercase;
-            color: var(--cream);
-            margin-bottom: 0.5rem;
-        }
-
-        /* ===== FEATURES ===== */
-        .features {
-            background:
-                radial-gradient(ellipse at 20% 50%, rgba(27, 45, 69, 0.4) 0%, transparent 50%),
-                radial-gradient(ellipse at 80% 50%, rgba(27, 45, 69, 0.4) 0%, transparent 50%),
-                var(--navy-deep);
-        }
-
-        .features-grid {
-            display: grid;
-            grid-template-columns: repeat(3, 1fr);
-            gap: 2rem;
-        }
-
-        .feature-card {
-            position: relative;
-            padding: 2.5rem 2rem;
-            background: rgba(27, 45, 69, 0.3);
-            border: 1px solid rgba(212, 175, 55, 0.15);
-            text-align: center;
-            transition: all 0.4s ease;
-            overflow: hidden;
-        }
-
-        .feature-card::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 50%;
-            transform: translateX(-50%);
-            width: 60%;
-            height: 2px;
-            background: linear-gradient(90deg, transparent, var(--gold), transparent);
-            opacity: 0;
-            transition: opacity 0.4s ease;
-        }
-
-        .feature-card:hover {
-            background: rgba(27, 45, 69, 0.5);
-            border-color: rgba(212, 175, 55, 0.4);
-            transform: translateY(-4px);
-        }
-
-        .feature-card:hover::before { opacity: 1; }
-
-        .feature-icon {
-            width: 64px;
-            height: 64px;
-            margin: 0 auto 1.5rem;
-            position: relative;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        }
-
-        .feature-icon svg {
-            width: 36px;
-            height: 36px;
-            stroke: var(--gold);
-            stroke-width: 1.5;
-            fill: none;
-        }
-
-        .feature-icon::before {
-            content: '';
-            position: absolute;
-            inset: 0;
-            border: 1px solid rgba(212, 175, 55, 0.3);
-            transform: rotate(45deg);
-            transition: all 0.4s ease;
-        }
-
-        .feature-card:hover .feature-icon::before {
-            border-color: var(--gold);
-            transform: rotate(45deg) scale(1.1);
-        }
-
-        .feature-card h3 {
-            font-family: var(--font-serif);
-            font-size: 1.3rem;
-            font-weight: 600;
-            color: var(--cream);
-            margin-bottom: 0.75rem;
-            letter-spacing: 1px;
-        }
-
-        .feature-card p {
-            font-size: 0.9rem;
-            line-height: 1.6;
-            color: var(--text-light);
-        }
-
-        /* ===== WORKFLOW ===== */
-        .workflow {
-            background:
-                linear-gradient(180deg, var(--navy-deep) 0%, var(--navy-mid) 50%, var(--navy-deep) 100%);
-        }
-
-        .workflow-steps {
-            display: flex;
-            align-items: flex-start;
-            justify-content: center;
-            gap: 0;
-            position: relative;
-        }
-
-        .workflow-step {
-            flex: 1;
-            max-width: 260px;
-            text-align: center;
-            position: relative;
-            padding: 0 1rem;
-        }
-
-        .workflow-step:not(:last-child)::after {
-            content: '';
-            position: absolute;
-            top: 32px;
-            right: -20px;
-            width: 40px;
-            height: 1px;
-            background: var(--gold);
-        }
-
-        .workflow-step:not(:last-child)::before {
-            content: '';
-            position: absolute;
-            top: 28px;
-            right: -16px;
-            width: 8px;
-            height: 8px;
-            border-top: 1px solid var(--gold);
-            border-right: 1px solid var(--gold);
-            transform: rotate(45deg);
-        }
-
-        .step-number {
-            width: 64px;
-            height: 64px;
-            margin: 0 auto 1.5rem;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            position: relative;
-        }
-
-        .step-number::before {
-            content: '';
-            position: absolute;
-            inset: 0;
-            border: 1px solid var(--gold);
-            transform: rotate(45deg);
-        }
-
-        .step-number span {
-            font-family: var(--font-display);
-            font-size: 1.5rem;
-            color: var(--gold);
-        }
-
-        .workflow-step h3 {
-            font-family: var(--font-serif);
-            font-size: 1.2rem;
-            font-weight: 600;
-            color: var(--cream);
-            margin-bottom: 0.75rem;
-        }
-
-        .workflow-step p {
-            font-size: 0.85rem;
-            color: var(--text-light);
-            line-height: 1.6;
-        }
-
-        /* ===== SCREENSHOT / DEMO ===== */
-        .demo {
-            background: var(--navy-deep);
-            overflow: hidden;
-        }
-
-        .demo-mockup {
-            max-width: 900px;
-            margin: 0 auto;
-            position: relative;
-        }
-
-        .mockup-frame {
-            background: var(--navy-mid);
-            border: 1px solid rgba(212, 175, 55, 0.3);
-            border-radius: 4px;
-            overflow: hidden;
-            box-shadow:
-                0 20px 60px rgba(0, 0, 0, 0.4),
-                0 0 80px rgba(212, 175, 55, 0.05);
-        }
-
-        .mockup-titlebar {
-            background: rgba(13, 27, 42, 0.9);
-            padding: 0.75rem 1rem;
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-            border-bottom: 1px solid rgba(212, 175, 55, 0.15);
-        }
-
-        .mockup-dot {
-            width: 10px;
-            height: 10px;
-            border-radius: 50%;
-            border: 1px solid rgba(212, 175, 55, 0.4);
-        }
-
-        .mockup-dot:nth-child(1) { background: rgba(212, 175, 55, 0.3); }
-        .mockup-dot:nth-child(2) { background: rgba(212, 175, 55, 0.2); }
-        .mockup-dot:nth-child(3) { background: rgba(212, 175, 55, 0.1); }
-
-        .mockup-title-text {
-            flex: 1;
-            text-align: center;
-            font-size: 0.75rem;
-            letter-spacing: 2px;
-            color: var(--gold);
-            font-family: var(--font-body);
-        }
-
-        .mockup-body {
-            padding: 1.5rem;
-            display: grid;
-            grid-template-columns: 250px 1fr;
-            gap: 1rem;
-            min-height: 400px;
-        }
-
-        .mockup-sidebar {
-            background: rgba(13, 27, 42, 0.6);
-            border: 1px solid rgba(212, 175, 55, 0.1);
-            border-radius: 2px;
-            padding: 1rem;
-        }
-
-        .mockup-sidebar-title {
-            font-family: var(--font-serif);
-            font-size: 0.8rem;
-            color: var(--gold);
-            letter-spacing: 2px;
-            text-transform: uppercase;
-            margin-bottom: 1rem;
-            padding-bottom: 0.5rem;
-            border-bottom: 1px solid rgba(212, 175, 55, 0.15);
-        }
-
-        .mockup-tree-item {
-            padding: 0.3rem 0;
-            padding-left: 0;
-            font-size: 0.78rem;
-            color: var(--text-light);
-            display: flex;
-            align-items: center;
-            gap: 0.4rem;
-        }
-
-        .mockup-tree-item.indent-1 { padding-left: 1rem; }
-        .mockup-tree-item.indent-2 { padding-left: 2rem; }
-
-        .mockup-tree-icon {
-            width: 6px;
-            height: 6px;
-            border: 1px solid var(--gold);
-            transform: rotate(45deg);
-            flex-shrink: 0;
-        }
-
-        .mockup-tree-icon.filled { background: var(--gold); }
-
-        .mockup-content {
-            display: grid;
-            grid-template-columns: repeat(3, 1fr);
-            gap: 0.75rem;
-        }
-
-        .mockup-panel {
-            background: rgba(13, 27, 42, 0.6);
-            border: 1px solid rgba(212, 175, 55, 0.1);
-            border-radius: 2px;
-            display: flex;
-            flex-direction: column;
-        }
-
-        .mockup-panel-header {
-            padding: 0.5rem 0.75rem;
-            font-size: 0.7rem;
-            letter-spacing: 1px;
-            text-transform: uppercase;
-            color: var(--gold);
-            border-bottom: 1px solid rgba(212, 175, 55, 0.1);
-            text-align: center;
-        }
-
-        .mockup-panel-body {
-            flex: 1;
-            padding: 1rem;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        }
-
-        .mockup-pdf-placeholder {
-            width: 80%;
-            height: 80%;
-            min-height: 200px;
-            border: 1px dashed rgba(212, 175, 55, 0.2);
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            gap: 0.5rem;
-        }
-
-        .mockup-pdf-placeholder svg {
-            width: 32px;
-            height: 32px;
-            stroke: rgba(212, 175, 55, 0.3);
-            stroke-width: 1;
-            fill: none;
-        }
-
-        .mockup-pdf-placeholder span {
-            font-size: 0.65rem;
-            color: rgba(212, 175, 55, 0.3);
-            letter-spacing: 1px;
-        }
-
-        .mockup-panel.diff .mockup-pdf-placeholder {
-            border-color: rgba(212, 175, 55, 0.3);
-            background: rgba(212, 175, 55, 0.02);
-        }
-
-        /* Decorative frame around mockup */
-        .demo-mockup::before,
-        .demo-mockup::after {
-            content: '';
-            position: absolute;
-            width: 40px;
-            height: 40px;
-            border: 1px solid rgba(212, 175, 55, 0.2);
-        }
-
-        .demo-mockup::before {
-            top: -12px;
-            left: -12px;
-            border-right: none;
-            border-bottom: none;
-        }
-
-        .demo-mockup::after {
-            bottom: -12px;
-            right: -12px;
-            border-left: none;
-            border-top: none;
-        }
-
-        /* ===== TECH STACK ===== */
-        .tech-stack {
-            background:
-                radial-gradient(ellipse at 50% 0%, rgba(212, 175, 55, 0.04) 0%, transparent 50%),
-                linear-gradient(180deg, var(--navy-deep) 0%, var(--navy-mid) 50%, var(--navy-deep) 100%);
-        }
-
-        .tech-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
-            gap: 1.5rem;
-            max-width: 800px;
-            margin: 0 auto;
-        }
-
-        .tech-item {
-            text-align: center;
-            padding: 2rem 1rem;
-            background: rgba(13, 27, 42, 0.5);
-            border: 1px solid rgba(212, 175, 55, 0.1);
-            transition: all 0.3s ease;
-            position: relative;
-        }
-
-        .tech-item::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            height: 2px;
-            background: linear-gradient(90deg, transparent, var(--gold), transparent);
-            transform: scaleX(0);
-            transition: transform 0.4s ease;
-        }
-
-        .tech-item:hover {
-            border-color: rgba(212, 175, 55, 0.3);
-            transform: translateY(-2px);
-        }
-
-        .tech-item:hover::before {
-            transform: scaleX(1);
-        }
-
-        .tech-item h4 {
-            font-family: var(--font-serif);
-            font-size: 1.1rem;
-            font-weight: 600;
-            color: var(--gold);
-            margin-bottom: 0.4rem;
-        }
-
-        .tech-item p {
-            font-size: 0.78rem;
-            color: var(--text-light);
-        }
-
-        /* ===== DOWNLOAD / GETTING STARTED ===== */
-        .download {
-            background: var(--navy-deep);
-            position: relative;
-        }
-
-        .download-content {
-            max-width: 700px;
-            margin: 0 auto;
-            text-align: center;
-        }
-
-        .install-card {
-            background: rgba(27, 45, 69, 0.3);
-            border: 1px solid rgba(212, 175, 55, 0.25);
-            padding: 3rem;
-            position: relative;
-            margin-top: 2rem;
-        }
-
-        .install-card .corner-ornament { width: 30px; height: 30px; }
-
-        .install-steps {
-            text-align: left;
-            margin-bottom: 2rem;
-        }
-
-        .install-step {
-            display: flex;
-            align-items: flex-start;
-            gap: 1rem;
-            margin-bottom: 1.5rem;
-        }
-
-        .install-step-num {
-            font-family: var(--font-display);
-            font-size: 1.2rem;
-            color: var(--gold);
-            min-width: 24px;
-        }
-
-        .install-step-text {
-            font-size: 0.9rem;
-            color: var(--text-light);
-        }
-
-        .install-step-text strong {
-            color: var(--cream);
-            font-weight: 500;
-        }
-
-        .code-block {
-            background: rgba(13, 27, 42, 0.8);
-            border: 1px solid rgba(212, 175, 55, 0.15);
-            border-left: 3px solid var(--gold);
-            padding: 1rem 1.5rem;
-            font-family: 'Courier New', monospace;
-            font-size: 0.85rem;
-            color: var(--gold-light);
-            overflow-x: auto;
-            margin: 1rem 0;
-            position: relative;
-        }
-
-        .code-block .comment {
-            color: rgba(200, 208, 218, 0.4);
-        }
-
-        .copy-btn {
-            position: absolute;
-            top: 0.5rem;
-            right: 0.5rem;
-            background: rgba(212, 175, 55, 0.15);
-            border: 1px solid rgba(212, 175, 55, 0.3);
-            color: var(--gold);
-            font-size: 0.7rem;
-            letter-spacing: 1px;
-            text-transform: uppercase;
-            padding: 0.3rem 0.6rem;
-            cursor: pointer;
-            font-family: var(--font-body);
-            transition: all 0.3s;
-        }
-
-        .copy-btn:hover {
-            background: rgba(212, 175, 55, 0.3);
-        }
-
-        .download-link {
-            display: inline-block;
-            font-family: var(--font-body);
-            font-size: 0.85rem;
-            font-weight: 500;
-            letter-spacing: 4px;
-            text-transform: uppercase;
-            color: var(--navy-deep);
-            background: linear-gradient(135deg, var(--gold), var(--gold-light));
-            padding: 1rem 3rem;
-            text-decoration: none;
-            transition: all 0.4s ease;
-            margin-top: 1rem;
-        }
-
-        .download-link:hover {
-            background: linear-gradient(135deg, var(--gold-light), var(--gold-pale));
-            transform: translateY(-2px);
-            box-shadow: 0 8px 30px rgba(212, 175, 55, 0.3);
-        }
-
-        /* ===== FOOTER ===== */
-        footer {
-            background: rgba(13, 27, 42, 0.95);
-            border-top: 1px solid rgba(212, 175, 55, 0.15);
-            padding: 3rem 2rem;
-            text-align: center;
-            position: relative;
-        }
-
-        footer::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 50%;
-            transform: translateX(-50%);
-            width: 200px;
-            height: 1px;
-            background: linear-gradient(90deg, transparent, var(--gold), transparent);
-        }
-
-        .footer-logo {
-            font-family: var(--font-display);
-            font-size: 1.8rem;
-            letter-spacing: 6px;
-            text-transform: uppercase;
-            color: var(--gold);
-            margin-bottom: 1rem;
-        }
-
-        .footer-tagline {
-            font-family: var(--font-serif);
-            font-style: italic;
-            font-size: 0.95rem;
-            color: var(--text-light);
-            margin-bottom: 2rem;
-        }
-
-        .footer-links {
-            display: flex;
-            justify-content: center;
-            gap: 2rem;
-            margin-bottom: 2rem;
-            flex-wrap: wrap;
-        }
-
-        .footer-links a {
-            color: var(--text-light);
-            text-decoration: none;
-            font-size: 0.8rem;
-            letter-spacing: 2px;
-            text-transform: uppercase;
-            transition: color 0.3s;
-        }
-
-        .footer-links a:hover { color: var(--gold); }
-
-        .footer-bottom {
-            font-size: 0.75rem;
-            color: rgba(200, 208, 218, 0.4);
-            letter-spacing: 1px;
-        }
-
-        .footer-deco {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 1rem;
-            margin: 1.5rem 0;
-        }
-
-        .footer-deco span {
-            height: 1px;
-            width: 60px;
-            background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.3));
-        }
-
-        .footer-deco span:last-child {
-            background: linear-gradient(90deg, rgba(212, 175, 55, 0.3), transparent);
-        }
-
-        .footer-deco .diamond-xs {
-            width: 6px;
-            height: 6px;
-            background: var(--gold);
-            transform: rotate(45deg);
-            opacity: 0.5;
-        }
-
-        /* ===== SCROLL REVEAL ===== */
-        .reveal {
-            opacity: 0;
-            transform: translateY(30px);
-            transition: all 0.8s ease;
-        }
-
-        .reveal.visible {
-            opacity: 1;
-            transform: translateY(0);
-        }
-
-        .reveal-delay-1 { transition-delay: 0.1s; }
-        .reveal-delay-2 { transition-delay: 0.2s; }
-        .reveal-delay-3 { transition-delay: 0.3s; }
-        .reveal-delay-4 { transition-delay: 0.4s; }
-        .reveal-delay-5 { transition-delay: 0.5s; }
-        .reveal-delay-6 { transition-delay: 0.6s; }
-
-        /* ===== RESPONSIVE ===== */
-        @media (max-width: 1024px) {
-            .features-grid { grid-template-columns: repeat(2, 1fr); }
-            .mockup-body { grid-template-columns: 1fr; }
-            .mockup-sidebar { display: none; }
-        }
-
-        @media (max-width: 768px) {
-            .nav-links { display: none; }
-            .nav-links.open {
-                display: flex;
-                flex-direction: column;
-                position: absolute;
-                top: 100%;
-                left: 0;
-                right: 0;
-                background: rgba(13, 27, 42, 0.98);
-                padding: 1.5rem 2rem;
-                border-bottom: 1px solid rgba(212, 175, 55, 0.2);
-                gap: 1rem;
-            }
-            .nav-toggle { display: flex; }
-
-            .hero-frame { padding: 3rem 2rem; }
-
-            .features-grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }
-
-            .workflow-steps {
-                flex-direction: column;
-                align-items: center;
-                gap: 2rem;
-            }
-
-            .workflow-step:not(:last-child)::after,
-            .workflow-step:not(:last-child)::before { display: none; }
-
-            .mockup-content { grid-template-columns: 1fr; }
-
-            .tech-grid { grid-template-columns: repeat(2, 1fr); }
-
-            .install-card { padding: 2rem 1.5rem; }
-        }
-
-        @media (max-width: 480px) {
-            section { padding: 4rem 1rem; }
-            .tech-grid { grid-template-columns: 1fr 1fr; gap: 1rem; }
-        }
-    </style>
-</head>
-<body>
-
-    <!-- ===== NAVIGATION ===== -->
-    <nav id="navbar">
-        <div class="nav-inner">
-            <a href="#hero" class="nav-logo">DocuMentor</a>
-            <ul class="nav-links" id="navLinks">
-                <li><a href="#features">Features</a></li>
-                <li><a href="#workflow">Workflow</a></li>
-                <li><a href="#demo">Vorschau</a></li>
-                <li><a href="#tech">Technologie</a></li>
-                <li><a href="#download">Download</a></li>
-            </ul>
-            <button class="nav-toggle" id="navToggle" aria-label="Navigation umschalten">
-                <span></span><span></span><span></span>
-            </button>
-        </div>
-    </nav>
-
-    <!-- ===== HERO ===== -->
-    <section class="hero" id="hero">
-        <div class="hero-fan"></div>
-        <div class="hero-frame">
-            <div class="corner-ornament top-left"></div>
-            <div class="corner-ornament top-right"></div>
-            <div class="corner-ornament bottom-left"></div>
-            <div class="corner-ornament bottom-right"></div>
-
-            <p class="hero-subtitle-top">Pr&auml;zision trifft Eleganz</p>
-
-            <h1 class="hero-title shimmer-text">DocuMentor</h1>
-
-            <p class="hero-tagline">XSL-Transformation &amp; PDF-Validierung &mdash; meisterhaft orchestriert</p>
-
-            <div class="hero-deco-line">
-                <span></span>
-                <div class="diamond-sm"></div>
-                <span></span>
-            </div>
-
-            <p class="hero-description">
-                Die Desktop-Anwendung f&uuml;r Entwickler, die XSL-Transformationen verwalten,
-                PDF-Dokumente generieren und &Auml;nderungen visuell vergleichen m&uuml;ssen &mdash;
-                mit der Pr&auml;zision, die amtliche Dokumente erfordern.
-            </p>
-
-            <a href="#download" class="hero-cta">Jetzt entdecken</a>
-        </div>
-
-        <div class="scroll-indicator">
-            <span>Scrollen</span>
-            <div class="scroll-line"></div>
-        </div>
-    </section>
-
-    <!-- ===== FEATURES ===== -->
-    <section class="features" id="features">
-        <div class="section-container">
-            <div class="section-header reveal">
-                <p class="section-label">Leistungsmerkmale</p>
-                <h2 class="section-title">Features</h2>
-                <div class="geo-diamond-group">
-                    <div class="geo-diamond"></div>
-                </div>
-                <div class="fan-decoration"></div>
-            </div>
-
-            <div class="features-grid">
-                <!-- Feature 1: Baumstruktur -->
-                <div class="feature-card reveal reveal-delay-1">
-                    <div class="feature-icon">
-                        <svg viewBox="0 0 24 24">
-                            <path d="M12 2L12 8M12 8L7 13M12 8L17 13M7 13L7 18M17 13L17 18M4 18L10 18M14 18L20 18"/>
-                        </svg>
-                    </div>
-                    <h3>Hierarchische Baumstruktur</h3>
-                    <p>Organisieren Sie Ihre XSL-Dateien, XML-Quellen und XSLT-Parameter in einer &uuml;bersichtlichen, verschachtelten Baumansicht.</p>
-                </div>
-
-                <!-- Feature 2: PDF-Diff -->
-                <div class="feature-card reveal reveal-delay-2">
-                    <div class="feature-icon">
-                        <svg viewBox="0 0 24 24">
-                            <rect x="2" y="3" width="7" height="10" rx="1"/>
-                            <rect x="15" y="3" width="7" height="10" rx="1"/>
-                            <rect x="8.5" y="7" width="7" height="10" rx="1" stroke-dasharray="2 1"/>
-                            <path d="M8 19L16 19M12 17L12 21"/>
-                        </svg>
-                    </div>
-                    <h3>Visueller PDF-Vergleich</h3>
-                    <p>Drei-Panel-Ansicht mit Referenz, Diff und neuer Version. Alpha-Blending und Zoom f&uuml;r pixelgenaue Inspektion.</p>
-                </div>
-
-                <!-- Feature 3: Hash-Tracking -->
-                <div class="feature-card reveal reveal-delay-3">
-                    <div class="feature-icon">
-                        <svg viewBox="0 0 24 24">
-                            <path d="M4 8L8 4M8 4L12 8M8 4L8 16M20 16L16 20M16 20L12 16M16 20L16 8"/>
-                            <circle cx="4" cy="12" r="2"/>
-                            <circle cx="20" cy="12" r="2"/>
-                        </svg>
-                    </div>
-                    <h3>Hash-basierte &Auml;nderungsverfolgung</h3>
-                    <p>Automatische blake2b-Pr&uuml;fsummen f&uuml;r jede XML-Datei erkennen &Auml;nderungen zuverl&auml;ssig und effizient.</p>
-                </div>
-
-                <!-- Feature 4: Async -->
-                <div class="feature-card reveal reveal-delay-4">
-                    <div class="feature-icon">
-                        <svg viewBox="0 0 24 24">
-                            <circle cx="12" cy="12" r="9"/>
-                            <path d="M12 7L12 12L16 14"/>
-                            <path d="M3 12A9 9 0 0 1 12 3" stroke-dasharray="3 2"/>
-                        </svg>
-                    </div>
-                    <h3>Asynchrone Verarbeitung</h3>
-                    <p>Hintergrund-Threads f&uuml;r Hash-Berechnungen und Datenbankabfragen halten die Benutzeroberfl&auml;che stets reaktionsf&auml;hig.</p>
-                </div>
-
-                <!-- Feature 5: PostgreSQL -->
-                <div class="feature-card reveal reveal-delay-5">
-                    <div class="feature-icon">
-                        <svg viewBox="0 0 24 24">
-                            <ellipse cx="12" cy="6" rx="8" ry="3"/>
-                            <path d="M4 6L4 12C4 13.66 7.58 15 12 15C16.42 15 20 13.66 20 12L20 6"/>
-                            <path d="M4 12L4 18C4 19.66 7.58 21 12 21C16.42 21 20 19.66 20 18L20 12"/>
-                        </svg>
-                    </div>
-                    <h3>PostgreSQL-Integration</h3>
-                    <p>Direkte Datenbankanbindung mit SSL-Unterst&uuml;tzung f&uuml;r dynamische XML-Datenquellen &uuml;ber Polars und ConnectorX.</p>
-                </div>
-
-                <!-- Feature 6: Toolchain -->
-                <div class="feature-card reveal reveal-delay-6">
-                    <div class="feature-icon">
-                        <svg viewBox="0 0 24 24">
-                            <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/>
-                        </svg>
-                    </div>
-                    <h3>Toolchain-Konfiguration</h3>
-                    <p>Flexible Verwaltung von Java VMs, Saxon, Apache FOP und diff-pdf &mdash; alles zentral konfigurierbar.</p>
-                </div>
-            </div>
-        </div>
-    </section>
-
-    <!-- ===== WORKFLOW ===== -->
-    <section class="workflow" id="workflow">
-        <div class="section-container">
-            <div class="section-header reveal">
-                <p class="section-label">Der Prozess</p>
-                <h2 class="section-title">Workflow</h2>
-                <div class="geo-diamond-group">
-                    <div class="geo-diamond"></div>
-                </div>
-            </div>
-
-            <div class="workflow-steps">
-                <div class="workflow-step reveal reveal-delay-1">
-                    <div class="step-number"><span>I</span></div>
-                    <h3>XSL bearbeiten</h3>
-                    <p>F&uuml;hren Sie die ben&ouml;tigten &Auml;nderungen an Ihren XSL-Stylesheets durch &mdash; DocuMentor erkennt die Auswirkungen.</p>
-                </div>
-
-                <div class="workflow-step reveal reveal-delay-2">
-                    <div class="step-number"><span>II</span></div>
-                    <h3>Transformation starten</h3>
-                    <p>Starten Sie die Transformation per Knopfdruck. Saxon und Apache FOP erzeugen die neuen PDF-Dokumente.</p>
-                </div>
-
-                <div class="workflow-step reveal reveal-delay-3">
-                    <div class="step-number"><span>III</span></div>
-                    <h3>PDF-Diff begutachten</h3>
-                    <p>Vergleichen Sie Referenz- und neue Version visuell in der Drei-Panel-Ansicht mit diff-pdf-Unterst&uuml;tzung.</p>
-                </div>
-
-                <div class="workflow-step reveal reveal-delay-4">
-                    <div class="step-number"><span>IV</span></div>
-                    <h3>Ergebnis verifizieren</h3>
-                    <p>Pr&uuml;fen Sie, ob nur die gew&uuml;nschten Dokumente ge&auml;ndert wurden und die &Auml;nderungen korrekt sind.</p>
-                </div>
-            </div>
-        </div>
-    </section>
-
-    <!-- ===== DEMO / SCREENSHOT ===== -->
-    <section class="demo" id="demo">
-        <div class="section-container">
-            <div class="section-header reveal">
-                <p class="section-label">Anwendungsvorschau</p>
-                <h2 class="section-title">Die Oberfl&auml;che</h2>
-                <div class="geo-diamond-group">
-                    <div class="geo-diamond"></div>
-                </div>
-            </div>
-
-            <div class="demo-mockup reveal">
-                <div class="mockup-frame">
-                    <div class="mockup-titlebar">
-                        <div class="mockup-dot"></div>
-                        <div class="mockup-dot"></div>
-                        <div class="mockup-dot"></div>
-                        <span class="mockup-title-text">DocuMentor &mdash; Pr&uuml;fungsverwaltung</span>
-                    </div>
-                    <div class="mockup-body">
-                        <div class="mockup-sidebar">
-                            <div class="mockup-sidebar-title">Projektbaum</div>
-                            <div class="mockup-tree-item">
-                                <div class="mockup-tree-icon filled"></div>
-                                Urkunden
-                            </div>
-                            <div class="mockup-tree-item indent-1">
-                                <div class="mockup-tree-icon"></div>
-                                bachelor_urkunde.xsl
-                            </div>
-                            <div class="mockup-tree-item indent-2">
-                                <div class="mockup-tree-icon filled"></div>
-                                student_001.xml
-                            </div>
-                            <div class="mockup-tree-item indent-2">
-                                <div class="mockup-tree-icon filled"></div>
-                                student_002.xml
-                            </div>
-                            <div class="mockup-tree-item indent-1">
-                                <div class="mockup-tree-icon"></div>
-                                master_urkunde.xsl
-                            </div>
-                            <div class="mockup-tree-item indent-2">
-                                <div class="mockup-tree-icon filled"></div>
-                                student_003.xml
-                            </div>
-                            <div class="mockup-tree-item">
-                                <div class="mockup-tree-icon filled"></div>
-                                Zeugnisse
-                            </div>
-                            <div class="mockup-tree-item indent-1">
-                                <div class="mockup-tree-icon"></div>
-                                zeugnis_ba.xsl
-                            </div>
-                            <div class="mockup-tree-item indent-2">
-                                <div class="mockup-tree-icon filled"></div>
-                                pruefling_001.xml
-                            </div>
-                            <div class="mockup-tree-item">
-                                <div class="mockup-tree-icon filled"></div>
-                                Bescheide
-                            </div>
-                            <div class="mockup-tree-item indent-1">
-                                <div class="mockup-tree-icon"></div>
-                                bescheid_vorlage.xsl
-                            </div>
-                        </div>
-                        <div class="mockup-content">
-                            <div class="mockup-panel">
-                                <div class="mockup-panel-header">Referenz</div>
-                                <div class="mockup-panel-body">
-                                    <div class="mockup-pdf-placeholder">
-                                        <svg viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="8" y1="13" x2="16" y2="13"/><line x1="8" y1="17" x2="14" y2="17"/></svg>
-                                        <span>PDF</span>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="mockup-panel diff">
-                                <div class="mockup-panel-header">Diff</div>
-                                <div class="mockup-panel-body">
-                                    <div class="mockup-pdf-placeholder">
-                                        <svg viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="8" y1="13" x2="16" y2="13" stroke-dasharray="2 2"/><line x1="8" y1="17" x2="14" y2="17" stroke-dasharray="2 2"/></svg>
-                                        <span>Unterschiede</span>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="mockup-panel">
-                                <div class="mockup-panel-header">Neu</div>
-                                <div class="mockup-panel-body">
-                                    <div class="mockup-pdf-placeholder">
-                                        <svg viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="8" y1="13" x2="16" y2="13"/><line x1="8" y1="17" x2="16" y2="17"/></svg>
-                                        <span>PDF</span>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </section>
-
-    <!-- ===== TECH STACK ===== -->
-    <section class="tech-stack" id="tech">
-        <div class="section-container">
-            <div class="section-header reveal">
-                <p class="section-label">Unter der Haube</p>
-                <h2 class="section-title">Technologie-Stack</h2>
-                <div class="geo-diamond-group">
-                    <div class="geo-diamond"></div>
-                </div>
-            </div>
-
-            <div class="tech-grid">
-                <div class="tech-item reveal reveal-delay-1">
-                    <h4>Python</h4>
-                    <p>Kernsprache</p>
-                </div>
-                <div class="tech-item reveal reveal-delay-2">
-                    <h4>PySide6</h4>
-                    <p>Qt-basierte GUI</p>
-                </div>
-                <div class="tech-item reveal reveal-delay-3">
-                    <h4>Saxon</h4>
-                    <p>XSLT-Prozessor</p>
-                </div>
-                <div class="tech-item reveal reveal-delay-4">
-                    <h4>Apache FOP</h4>
-                    <p>PDF-Erzeugung</p>
-                </div>
-                <div class="tech-item reveal reveal-delay-5">
-                    <h4>diff-pdf</h4>
-                    <p>PDF-Vergleich</p>
-                </div>
-                <div class="tech-item reveal reveal-delay-1">
-                    <h4>PostgreSQL</h4>
-                    <p>Datenbank</p>
-                </div>
-                <div class="tech-item reveal reveal-delay-2">
-                    <h4>Polars</h4>
-                    <p>DataFrames</p>
-                </div>
-                <div class="tech-item reveal reveal-delay-3">
-                    <h4>Pydantic</h4>
-                    <p>Konfiguration</p>
-                </div>
-            </div>
-        </div>
-    </section>
-
-    <!-- ===== DOWNLOAD ===== -->
-    <section class="download" id="download">
-        <div class="section-container">
-            <div class="section-header reveal">
-                <p class="section-label">Loslegen</p>
-                <h2 class="section-title">Installation</h2>
-                <div class="geo-diamond-group">
-                    <div class="geo-diamond"></div>
-                </div>
-            </div>
-
-            <div class="download-content reveal">
-                <div class="install-card">
-                    <div class="corner-ornament top-left"></div>
-                    <div class="corner-ornament top-right"></div>
-                    <div class="corner-ornament bottom-left"></div>
-                    <div class="corner-ornament bottom-right"></div>
-
-                    <div class="install-steps">
-                        <div class="install-step">
-                            <span class="install-step-num">1.</span>
-                            <div class="install-step-text">
-                                <strong>Repository klonen</strong>
-                                <div class="code-block">
-                                    <button class="copy-btn" onclick="copyCode(this)">Kopieren</button>
-                                    git clone https://github.com/your-org/xsl-validator.git<br>
-                                    cd xsl-validator
-                                </div>
-                            </div>
-                        </div>
-
-                        <div class="install-step">
-                            <span class="install-step-num">2.</span>
-                            <div class="install-step-text">
-                                <strong>Abh&auml;ngigkeiten installieren</strong>
-                                <div class="code-block">
-                                    <button class="copy-btn" onclick="copyCode(this)">Kopieren</button>
-                                    uv sync
-                                </div>
-                            </div>
-                        </div>
-
-                        <div class="install-step">
-                            <span class="install-step-num">3.</span>
-                            <div class="install-step-text">
-                                <strong>Anwendung starten</strong>
-                                <div class="code-block">
-                                    <button class="copy-btn" onclick="copyCode(this)">Kopieren</button>
-                                    uv run python src/main.py
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div class="geo-line"></div>
-
-                    <p style="font-size: 0.85rem; color: var(--text-light); margin-bottom: 1.5rem;">
-                        Voraussetzungen: Python 3.13+, Java Runtime (f&uuml;r Saxon), Apache FOP, diff-pdf
-                    </p>
-
-                    <a href="https://github.com/your-org/xsl-validator" class="download-link">
-                        Zum Repository
-                    </a>
-                </div>
-            </div>
-        </div>
-    </section>
-
-    <!-- ===== FOOTER ===== -->
-    <footer>
-        <div class="sunburst"></div>
-        <div class="footer-logo">DocuMentor</div>
-        <p class="footer-tagline">Pr&auml;zision in jeder Transformation</p>
-
-        <div class="footer-deco">
-            <span></span>
-            <div class="diamond-xs"></div>
-            <span></span>
-        </div>
-
-        <div class="footer-links">
-            <a href="#features">Features</a>
-            <a href="#workflow">Workflow</a>
-            <a href="#demo">Vorschau</a>
-            <a href="#tech">Technologie</a>
-            <a href="#download">Download</a>
-        </div>
-
-        <div class="footer-deco">
-            <span></span>
-            <div class="diamond-xs"></div>
-            <span></span>
-        </div>
-
-        <p class="footer-bottom">&copy; 2026 DocuMentor &mdash; Elegante XSL-Transformation &amp; PDF-Validierung</p>
-    </footer>
-
-    <!-- ===== JAVASCRIPT ===== -->
-    <script>
-        // Navigation scroll effect
-        const navbar = document.getElementById('navbar');
-        window.addEventListener('scroll', () => {
-            navbar.classList.toggle('scrolled', window.scrollY > 50);
-        });
-
-        // Mobile navigation toggle
-        const navToggle = document.getElementById('navToggle');
-        const navLinks = document.getElementById('navLinks');
-        navToggle.addEventListener('click', () => {
-            navLinks.classList.toggle('open');
-        });
-
-        // Close mobile nav on link click
-        navLinks.querySelectorAll('a').forEach(link => {
-            link.addEventListener('click', () => {
-                navLinks.classList.remove('open');
-            });
-        });
-
-        // Scroll reveal with IntersectionObserver
-        const revealElements = document.querySelectorAll('.reveal');
-        const revealObserver = new IntersectionObserver((entries) => {
-            entries.forEach(entry => {
-                if (entry.isIntersecting) {
-                    entry.target.classList.add('visible');
-                    revealObserver.unobserve(entry.target);
-                }
-            });
-        }, {
-            threshold: 0.15,
-            rootMargin: '0px 0px -50px 0px'
-        });
-
-        revealElements.forEach(el => revealObserver.observe(el));
-
-        // Copy code to clipboard
-        function copyCode(btn) {
-            const codeBlock = btn.parentElement;
-            const text = codeBlock.textContent
-                .replace('Kopieren', '')
-                .trim();
-            navigator.clipboard.writeText(text).then(() => {
-                const original = btn.textContent;
-                btn.textContent = 'Kopiert!';
-                setTimeout(() => { btn.textContent = original; }, 2000);
-            });
-        }
-
-        // Smooth scroll for anchor links
-        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
-            anchor.addEventListener('click', function (e) {
-                e.preventDefault();
-                const target = document.querySelector(this.getAttribute('href'));
-                if (target) {
-                    const offset = navbar.offsetHeight + 20;
-                    const top = target.getBoundingClientRect().top + window.pageYOffset - offset;
-                    window.scrollTo({ top, behavior: 'smooth' });
-                }
-            });
-        });
-    </script>
-</body>
-</html>
diff --git a/web/index_v6.html b/web/index_v6.html
deleted file mode 100644
index 092aedb..0000000
--- a/web/index_v6.html
+++ /dev/null
@@ -1,2041 +0,0 @@
-<!DOCTYPE html>
-<html lang="de">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>DocuMentor — Industrielle XSL-Transformationskontrolle</title>
-    <link rel="stylesheet" href="fonts/fonts_v6.css">
-    <style>
-        /* ============================================================
-           RESET & BASE
-           ============================================================ */
-        *, *::before, *::after {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-
-        :root {
-            --concrete-dark: #1a1a1a;
-            --concrete-mid: #2a2a2a;
-            --concrete-light: #3a3a3a;
-            --concrete-surface: #444444;
-            --warning-yellow: #f0c030;
-            --warning-yellow-dim: #e8b800;
-            --safety-orange: #e05020;
-            --steel-text: #b0b0b0;
-            --steel-bright: #d0d0d0;
-            --white: #f0efe8;
-            --grid-line: rgba(240, 192, 48, 0.07);
-            --grid-dot: rgba(240, 192, 48, 0.12);
-            --blueprint-line: rgba(240, 192, 48, 0.15);
-            --led-green: #30e060;
-            --led-red: #e03030;
-        }
-
-        html {
-            scroll-behavior: smooth;
-            font-size: 16px;
-        }
-
-        body {
-            font-family: 'Barlow', sans-serif;
-            background-color: var(--concrete-dark);
-            color: var(--steel-text);
-            line-height: 1.6;
-            overflow-x: hidden;
-            /* Concrete texture via noise-like gradient */
-            background-image:
-                repeating-linear-gradient(
-                    0deg,
-                    transparent,
-                    transparent 2px,
-                    rgba(255,255,255,0.008) 2px,
-                    rgba(255,255,255,0.008) 4px
-                ),
-                repeating-linear-gradient(
-                    90deg,
-                    transparent,
-                    transparent 2px,
-                    rgba(255,255,255,0.005) 2px,
-                    rgba(255,255,255,0.005) 4px
-                );
-        }
-
-        /* ============================================================
-           GLOBAL GRID OVERLAY
-           ============================================================ */
-        body::before {
-            content: '';
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            pointer-events: none;
-            z-index: 0;
-            background-image:
-                radial-gradient(circle, var(--grid-dot) 1px, transparent 1px);
-            background-size: 40px 40px;
-            opacity: 0.5;
-        }
-
-        /* ============================================================
-           UTILITY CLASSES
-           ============================================================ */
-        .container {
-            max-width: 1200px;
-            margin: 0 auto;
-            padding: 0 2rem;
-            position: relative;
-            z-index: 1;
-        }
-
-        section {
-            position: relative;
-            z-index: 1;
-        }
-
-        /* ============================================================
-           STENCIL SECTION LABELS
-           ============================================================ */
-        .section-label {
-            font-family: 'Oswald', sans-serif;
-            font-weight: 700;
-            font-size: 0.75rem;
-            letter-spacing: 0.3em;
-            text-transform: uppercase;
-            color: var(--warning-yellow-dim);
-            display: flex;
-            align-items: center;
-            gap: 1rem;
-            margin-bottom: 0.75rem;
-        }
-
-        .section-label::before {
-            content: attr(data-num);
-            font-family: 'Share Tech Mono', monospace;
-            font-size: 0.65rem;
-            color: var(--concrete-surface);
-            border: 1px dashed var(--concrete-surface);
-            padding: 0.15rem 0.4rem;
-            letter-spacing: 0.1em;
-        }
-
-        .section-title {
-            font-family: 'Oswald', sans-serif;
-            font-weight: 700;
-            font-size: 2.5rem;
-            color: var(--white);
-            text-transform: uppercase;
-            letter-spacing: 0.05em;
-            line-height: 1.1;
-            margin-bottom: 1rem;
-        }
-
-        .section-subtitle {
-            font-family: 'Barlow', sans-serif;
-            font-weight: 300;
-            font-size: 1.1rem;
-            color: var(--steel-text);
-            max-width: 700px;
-            margin-bottom: 3rem;
-        }
-
-        /* ============================================================
-           HAZARD STRIPE
-           ============================================================ */
-        .hazard-stripe {
-            height: 6px;
-            background: repeating-linear-gradient(
-                -45deg,
-                var(--warning-yellow),
-                var(--warning-yellow) 8px,
-                var(--concrete-dark) 8px,
-                var(--concrete-dark) 16px
-            );
-            width: 100%;
-        }
-
-        .hazard-stripe-thin {
-            height: 3px;
-            background: repeating-linear-gradient(
-                -45deg,
-                var(--warning-yellow-dim),
-                var(--warning-yellow-dim) 5px,
-                var(--concrete-mid) 5px,
-                var(--concrete-mid) 10px
-            );
-            opacity: 0.5;
-        }
-
-        /* ============================================================
-           CORNER BRACKETS (for cards and panels)
-           ============================================================ */
-        .corner-brackets {
-            position: relative;
-        }
-
-        .corner-brackets::before,
-        .corner-brackets::after {
-            content: '';
-            position: absolute;
-            width: 16px;
-            height: 16px;
-            pointer-events: none;
-        }
-
-        .corner-brackets::before {
-            top: -1px;
-            left: -1px;
-            border-top: 2px solid var(--warning-yellow-dim);
-            border-left: 2px solid var(--warning-yellow-dim);
-        }
-
-        .corner-brackets::after {
-            bottom: -1px;
-            right: -1px;
-            border-bottom: 2px solid var(--warning-yellow-dim);
-            border-right: 2px solid var(--warning-yellow-dim);
-        }
-
-        /* ============================================================
-           RIVET DECORATIONS
-           ============================================================ */
-        .riveted {
-            position: relative;
-        }
-
-        .riveted .rivet {
-            position: absolute;
-            width: 8px;
-            height: 8px;
-            border-radius: 50%;
-            background: radial-gradient(circle at 35% 35%, #555, #2a2a2a 60%, #1a1a1a);
-            box-shadow: inset 0 1px 1px rgba(255,255,255,0.15), 0 1px 2px rgba(0,0,0,0.5);
-        }
-
-        .riveted .rivet-tl { top: 10px; left: 10px; }
-        .riveted .rivet-tr { top: 10px; right: 10px; }
-        .riveted .rivet-bl { bottom: 10px; left: 10px; }
-        .riveted .rivet-br { bottom: 10px; right: 10px; }
-
-        /* ============================================================
-           LED INDICATOR
-           ============================================================ */
-        .led {
-            display: inline-block;
-            width: 8px;
-            height: 8px;
-            border-radius: 50%;
-            margin-right: 6px;
-            vertical-align: middle;
-            box-shadow: 0 0 4px currentColor;
-        }
-
-        .led-green {
-            background-color: var(--led-green);
-            color: var(--led-green);
-        }
-
-        .led-yellow {
-            background-color: var(--warning-yellow);
-            color: var(--warning-yellow);
-        }
-
-        .led-orange {
-            background-color: var(--safety-orange);
-            color: var(--safety-orange);
-        }
-
-        /* ============================================================
-           SCROLL REVEAL
-           ============================================================ */
-        .reveal {
-            opacity: 0;
-            transform: translateY(30px);
-            transition: opacity 0.6s linear, transform 0.6s linear;
-        }
-
-        .reveal.from-left {
-            transform: translateX(-40px);
-        }
-
-        .reveal.from-right {
-            transform: translateX(40px);
-        }
-
-        .reveal.from-bottom {
-            transform: translateY(40px);
-        }
-
-        .reveal.visible {
-            opacity: 1;
-            transform: translate(0, 0);
-        }
-
-        /* Staggered delays for children */
-        .reveal-delay-1 { transition-delay: 0.1s; }
-        .reveal-delay-2 { transition-delay: 0.2s; }
-        .reveal-delay-3 { transition-delay: 0.3s; }
-        .reveal-delay-4 { transition-delay: 0.4s; }
-        .reveal-delay-5 { transition-delay: 0.5s; }
-        .reveal-delay-6 { transition-delay: 0.6s; }
-
-        /* ============================================================
-           NAVBAR
-           ============================================================ */
-        .navbar {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            z-index: 1000;
-            background: rgba(26, 26, 26, 0.92);
-            backdrop-filter: blur(10px);
-            border-bottom: 1px solid rgba(240, 192, 48, 0.12);
-        }
-
-        .navbar-inner {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            padding: 0 2rem;
-            height: 56px;
-            max-width: 1200px;
-            margin: 0 auto;
-        }
-
-        .navbar-brand {
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-            text-decoration: none;
-        }
-
-        .navbar-brand-icon {
-            width: 28px;
-            height: 28px;
-            border: 2px solid var(--warning-yellow);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-family: 'Oswald', sans-serif;
-            font-weight: 700;
-            font-size: 0.85rem;
-            color: var(--warning-yellow);
-        }
-
-        .navbar-brand-text {
-            font-family: 'Oswald', sans-serif;
-            font-weight: 600;
-            font-size: 1.1rem;
-            color: var(--white);
-            letter-spacing: 0.1em;
-            text-transform: uppercase;
-        }
-
-        .navbar-links {
-            display: flex;
-            gap: 2rem;
-            list-style: none;
-        }
-
-        .navbar-links a {
-            font-family: 'Share Tech Mono', monospace;
-            font-size: 0.75rem;
-            color: var(--steel-text);
-            text-decoration: none;
-            text-transform: uppercase;
-            letter-spacing: 0.15em;
-            padding: 0.25rem 0;
-            border-bottom: 1px solid transparent;
-            transition: color 0.2s linear, border-color 0.2s linear;
-        }
-
-        .navbar-links a:hover {
-            color: var(--warning-yellow);
-            border-bottom-color: var(--warning-yellow);
-        }
-
-        .navbar-mobile-toggle {
-            display: none;
-            background: none;
-            border: 1px solid var(--concrete-surface);
-            color: var(--steel-text);
-            padding: 0.4rem 0.6rem;
-            font-family: 'Share Tech Mono', monospace;
-            font-size: 0.75rem;
-            cursor: pointer;
-            text-transform: uppercase;
-            letter-spacing: 0.1em;
-        }
-
-        /* ============================================================
-           HERO SECTION
-           ============================================================ */
-        .hero {
-            min-height: 100vh;
-            display: flex;
-            align-items: center;
-            padding-top: 56px;
-            position: relative;
-            overflow: hidden;
-            background:
-                linear-gradient(135deg, var(--concrete-dark) 0%, var(--concrete-mid) 50%, var(--concrete-dark) 100%);
-        }
-
-        /* Blueprint grid background for hero */
-        .hero::before {
-            content: '';
-            position: absolute;
-            inset: 0;
-            background-image:
-                linear-gradient(var(--grid-line) 1px, transparent 1px),
-                linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
-            background-size: 80px 80px;
-            opacity: 0.8;
-        }
-
-        /* Crosshair in hero */
-        .hero::after {
-            content: '+';
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            font-family: 'Share Tech Mono', monospace;
-            font-size: 12rem;
-            color: rgba(240, 192, 48, 0.03);
-            pointer-events: none;
-        }
-
-        .hero-content {
-            position: relative;
-            z-index: 2;
-        }
-
-        .hero-panel {
-            background: rgba(26, 26, 26, 0.85);
-            border: 1px solid rgba(240, 192, 48, 0.2);
-            padding: 3rem 3.5rem;
-            position: relative;
-            max-width: 750px;
-        }
-
-        .hero-system-tag {
-            font-family: 'Share Tech Mono', monospace;
-            font-size: 0.7rem;
-            color: var(--concrete-surface);
-            letter-spacing: 0.2em;
-            margin-bottom: 1.5rem;
-            display: flex;
-            align-items: center;
-            gap: 0.75rem;
-        }
-
-        .hero-system-tag .led {
-            animation: led-blink 2s infinite;
-        }
-
-        @keyframes led-blink {
-            0%, 100% { opacity: 1; }
-            50% { opacity: 0.4; }
-        }
-
-        .hero-title {
-            font-family: 'Oswald', sans-serif;
-            font-weight: 700;
-            font-size: 4.5rem;
-            color: var(--white);
-            text-transform: uppercase;
-            letter-spacing: 0.08em;
-            line-height: 1;
-            margin-bottom: 0.5rem;
-        }
-
-        .hero-title span {
-            color: var(--warning-yellow);
-        }
-
-        .hero-tagline {
-            font-family: 'Barlow Condensed', sans-serif;
-            font-weight: 400;
-            font-size: 1.5rem;
-            color: var(--steel-bright);
-            letter-spacing: 0.05em;
-            margin-bottom: 0.75rem;
-        }
-
-        .hero-desc {
-            font-family: 'Barlow', sans-serif;
-            font-weight: 300;
-            font-size: 1rem;
-            color: var(--steel-text);
-            margin-bottom: 2rem;
-            max-width: 550px;
-            line-height: 1.7;
-        }
-
-        .hero-actions {
-            display: flex;
-            gap: 1rem;
-            flex-wrap: wrap;
-        }
-
-        /* BUTTONS */
-        .btn-primary {
-            display: inline-flex;
-            align-items: center;
-            gap: 0.5rem;
-            font-family: 'Oswald', sans-serif;
-            font-weight: 600;
-            font-size: 0.9rem;
-            text-transform: uppercase;
-            letter-spacing: 0.15em;
-            padding: 0.85rem 2rem;
-            background: var(--warning-yellow);
-            color: var(--concrete-dark);
-            border: none;
-            cursor: pointer;
-            text-decoration: none;
-            position: relative;
-            transition: background 0.15s linear, transform 0.1s linear, box-shadow 0.15s linear;
-        }
-
-        .btn-primary:hover {
-            background: var(--warning-yellow-dim);
-            transform: translateY(-1px);
-            box-shadow: 0 4px 16px rgba(240, 192, 48, 0.25);
-        }
-
-        .btn-primary:active {
-            transform: translateY(1px);
-            box-shadow: none;
-        }
-
-        .btn-secondary {
-            display: inline-flex;
-            align-items: center;
-            gap: 0.5rem;
-            font-family: 'Oswald', sans-serif;
-            font-weight: 600;
-            font-size: 0.9rem;
-            text-transform: uppercase;
-            letter-spacing: 0.15em;
-            padding: 0.85rem 2rem;
-            background: transparent;
-            color: var(--steel-bright);
-            border: 1px solid var(--concrete-surface);
-            cursor: pointer;
-            text-decoration: none;
-            transition: border-color 0.15s linear, color 0.15s linear, transform 0.1s linear;
-        }
-
-        .btn-secondary:hover {
-            border-color: var(--warning-yellow-dim);
-            color: var(--warning-yellow);
-            transform: translateY(-1px);
-        }
-
-        .btn-secondary:active {
-            transform: translateY(1px);
-        }
-
-        /* Hero measurement marks */
-        .hero-measure {
-            position: absolute;
-            font-family: 'Share Tech Mono', monospace;
-            font-size: 0.55rem;
-            color: rgba(240, 192, 48, 0.2);
-            letter-spacing: 0.1em;
-        }
-
-        .hero-measure-top {
-            top: -20px;
-            left: 0;
-            display: flex;
-            align-items: flex-end;
-            gap: 0.5rem;
-        }
-
-        .hero-measure-top::before {
-            content: '';
-            display: block;
-            width: 200px;
-            height: 1px;
-            background: rgba(240, 192, 48, 0.15);
-        }
-
-        .hero-measure-right {
-            top: 0;
-            right: -30px;
-            writing-mode: vertical-rl;
-        }
-
-        /* ============================================================
-           FEATURES SECTION
-           ============================================================ */
-        .features {
-            padding: 6rem 0;
-            background: var(--concrete-mid);
-            position: relative;
-        }
-
-        .features::before {
-            content: '';
-            position: absolute;
-            inset: 0;
-            background-image:
-                radial-gradient(circle, var(--grid-dot) 1px, transparent 1px);
-            background-size: 30px 30px;
-            opacity: 0.3;
-        }
-
-        .features-grid {
-            display: grid;
-            grid-template-columns: repeat(3, 1fr);
-            gap: 1.5rem;
-            position: relative;
-            z-index: 1;
-        }
-
-        .feature-card {
-            background: var(--concrete-dark);
-            border: 1px dashed rgba(240, 192, 48, 0.15);
-            padding: 2rem 1.5rem;
-            position: relative;
-            transition: border-color 0.2s linear, box-shadow 0.2s linear;
-        }
-
-        .feature-card:hover {
-            border-color: rgba(240, 192, 48, 0.4);
-            box-shadow: 0 0 20px rgba(240, 192, 48, 0.05);
-        }
-
-        .feature-card:hover .feature-icon {
-            border-color: var(--warning-yellow);
-            color: var(--warning-yellow);
-        }
-
-        .feature-number {
-            font-family: 'Share Tech Mono', monospace;
-            font-size: 0.6rem;
-            color: var(--concrete-surface);
-            position: absolute;
-            top: 8px;
-            right: 10px;
-            letter-spacing: 0.1em;
-        }
-
-        .feature-icon {
-            width: 44px;
-            height: 44px;
-            border: 1px solid var(--concrete-surface);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            margin-bottom: 1.25rem;
-            font-size: 1.3rem;
-            color: var(--steel-text);
-            transition: border-color 0.2s linear, color 0.2s linear;
-        }
-
-        .feature-name {
-            font-family: 'Barlow Condensed', sans-serif;
-            font-weight: 600;
-            font-size: 1.15rem;
-            color: var(--steel-bright);
-            text-transform: uppercase;
-            letter-spacing: 0.05em;
-            margin-bottom: 0.5rem;
-        }
-
-        .feature-desc {
-            font-family: 'Barlow', sans-serif;
-            font-weight: 300;
-            font-size: 0.9rem;
-            color: var(--steel-text);
-            line-height: 1.6;
-        }
-
-        /* ============================================================
-           WORKFLOW SECTION
-           ============================================================ */
-        .workflow {
-            padding: 6rem 0;
-            background: var(--concrete-dark);
-            position: relative;
-        }
-
-        .workflow-steps {
-            display: grid;
-            grid-template-columns: repeat(4, 1fr);
-            gap: 0;
-            position: relative;
-        }
-
-        /* Connecting line */
-        .workflow-steps::before {
-            content: '';
-            position: absolute;
-            top: 36px;
-            left: 10%;
-            right: 10%;
-            height: 2px;
-            background: repeating-linear-gradient(
-                90deg,
-                var(--warning-yellow-dim) 0,
-                var(--warning-yellow-dim) 8px,
-                transparent 8px,
-                transparent 16px
-            );
-            opacity: 0.3;
-            z-index: 0;
-        }
-
-        .workflow-step {
-            text-align: center;
-            position: relative;
-            z-index: 1;
-            padding: 0 1rem;
-        }
-
-        .step-number {
-            width: 72px;
-            height: 72px;
-            margin: 0 auto 1.5rem;
-            background: var(--concrete-mid);
-            border: 2px solid var(--concrete-surface);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-family: 'Oswald', sans-serif;
-            font-weight: 700;
-            font-size: 1.8rem;
-            color: var(--steel-text);
-            position: relative;
-            transition: border-color 0.3s linear, color 0.3s linear;
-        }
-
-        .workflow-step:hover .step-number {
-            border-color: var(--warning-yellow);
-            color: var(--warning-yellow);
-        }
-
-        .step-number::after {
-            content: '';
-            position: absolute;
-            bottom: -12px;
-            left: 50%;
-            transform: translateX(-50%);
-            width: 2px;
-            height: 12px;
-            background: var(--concrete-surface);
-        }
-
-        .step-title {
-            font-family: 'Barlow Condensed', sans-serif;
-            font-weight: 600;
-            font-size: 1.05rem;
-            color: var(--steel-bright);
-            text-transform: uppercase;
-            letter-spacing: 0.05em;
-            margin-bottom: 0.5rem;
-        }
-
-        .step-desc {
-            font-family: 'Barlow', sans-serif;
-            font-weight: 300;
-            font-size: 0.85rem;
-            color: var(--steel-text);
-            line-height: 1.5;
-        }
-
-        /* ============================================================
-           SCREENSHOT / DEMO SECTION
-           ============================================================ */
-        .demo {
-            padding: 6rem 0;
-            background: var(--concrete-mid);
-            position: relative;
-            overflow: hidden;
-        }
-
-        .demo-frame {
-            background: var(--concrete-dark);
-            border: 1px solid rgba(240, 192, 48, 0.15);
-            padding: 0;
-            position: relative;
-            max-width: 960px;
-            margin: 0 auto;
-        }
-
-        .demo-titlebar {
-            display: flex;
-            align-items: center;
-            gap: 0.75rem;
-            padding: 0.6rem 1rem;
-            background: rgba(42, 42, 42, 0.9);
-            border-bottom: 1px solid rgba(240, 192, 48, 0.1);
-        }
-
-        .demo-titlebar-dots {
-            display: flex;
-            gap: 6px;
-        }
-
-        .demo-titlebar-dot {
-            width: 10px;
-            height: 10px;
-            border-radius: 50%;
-            border: 1px solid rgba(255,255,255,0.1);
-        }
-
-        .demo-titlebar-dot.red { background: #e03030; }
-        .demo-titlebar-dot.yellow { background: var(--warning-yellow); }
-        .demo-titlebar-dot.green { background: var(--led-green); }
-
-        .demo-titlebar-text {
-            font-family: 'Share Tech Mono', monospace;
-            font-size: 0.7rem;
-            color: var(--concrete-surface);
-            letter-spacing: 0.1em;
-        }
-
-        .demo-content {
-            display: flex;
-            min-height: 420px;
-        }
-
-        /* Sidebar mockup */
-        .demo-sidebar {
-            width: 240px;
-            border-right: 1px solid rgba(240, 192, 48, 0.08);
-            padding: 1rem;
-            flex-shrink: 0;
-        }
-
-        .demo-sidebar-label {
-            font-family: 'Share Tech Mono', monospace;
-            font-size: 0.6rem;
-            color: var(--concrete-surface);
-            text-transform: uppercase;
-            letter-spacing: 0.2em;
-            margin-bottom: 0.75rem;
-            padding-bottom: 0.5rem;
-            border-bottom: 1px dashed rgba(240, 192, 48, 0.1);
-        }
-
-        .tree-item {
-            padding: 0.3rem 0;
-            padding-left: 0;
-            font-family: 'Share Tech Mono', monospace;
-            font-size: 0.72rem;
-            color: var(--steel-text);
-            display: flex;
-            align-items: center;
-            gap: 0.4rem;
-        }
-
-        .tree-item.level-1 { padding-left: 1rem; }
-        .tree-item.level-2 { padding-left: 2rem; }
-
-        .tree-icon {
-            color: var(--warning-yellow-dim);
-            font-size: 0.65rem;
-            width: 14px;
-            text-align: center;
-            flex-shrink: 0;
-        }
-
-        .tree-item.active {
-            color: var(--warning-yellow);
-            background: rgba(240, 192, 48, 0.05);
-            margin: 0 -0.5rem;
-            padding-left: 2.5rem;
-            padding-right: 0.5rem;
-        }
-
-        /* Main panels mockup */
-        .demo-panels {
-            flex: 1;
-            display: grid;
-            grid-template-columns: 1fr 1fr 1fr;
-            gap: 0;
-        }
-
-        .demo-panel {
-            border-right: 1px solid rgba(240, 192, 48, 0.06);
-            display: flex;
-            flex-direction: column;
-            position: relative;
-        }
-
-        .demo-panel:last-child {
-            border-right: none;
-        }
-
-        .demo-panel-header {
-            font-family: 'Share Tech Mono', monospace;
-            font-size: 0.6rem;
-            color: var(--concrete-surface);
-            text-transform: uppercase;
-            letter-spacing: 0.15em;
-            padding: 0.5rem 0.75rem;
-            border-bottom: 1px solid rgba(240, 192, 48, 0.06);
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-        }
-
-        .demo-panel-body {
-            flex: 1;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            position: relative;
-            overflow: hidden;
-        }
-
-        /* Simulated PDF pages */
-        .mock-pdf {
-            width: 70%;
-            height: 80%;
-            background: #f5f5f0;
-            box-shadow: 0 2px 12px rgba(0,0,0,0.3);
-            padding: 12%;
-            display: flex;
-            flex-direction: column;
-            gap: 6px;
-        }
-
-        .mock-pdf-line {
-            height: 3px;
-            background: #c0c0c0;
-            border-radius: 1px;
-        }
-
-        .mock-pdf-line.short { width: 60%; }
-        .mock-pdf-line.medium { width: 80%; }
-        .mock-pdf-line.long { width: 95%; }
-        .mock-pdf-line.gap { height: 8px; background: transparent; }
-
-        .mock-pdf-line.diff-add {
-            background: rgba(48, 224, 96, 0.4);
-        }
-
-        .mock-pdf-line.diff-remove {
-            background: rgba(224, 48, 48, 0.3);
-        }
-
-        .mock-pdf-line.diff-change {
-            background: rgba(240, 192, 48, 0.4);
-        }
-
-        /* Middle diff panel overlay */
-        .demo-panel.diff .mock-pdf {
-            background: #f0ece0;
-        }
-
-        /* ============================================================
-           TECH STACK SECTION
-           ============================================================ */
-        .techstack {
-            padding: 6rem 0;
-            background: var(--concrete-dark);
-            position: relative;
-        }
-
-        .tech-grid {
-            display: flex;
-            flex-wrap: wrap;
-            gap: 1rem;
-            justify-content: center;
-        }
-
-        .tech-badge {
-            display: flex;
-            align-items: center;
-            gap: 0.6rem;
-            padding: 0.7rem 1.2rem;
-            background: var(--concrete-mid);
-            border: 1px solid rgba(240, 192, 48, 0.1);
-            font-family: 'Share Tech Mono', monospace;
-            font-size: 0.8rem;
-            color: var(--steel-text);
-            letter-spacing: 0.05em;
-            transition: border-color 0.2s linear, color 0.2s linear, transform 0.15s linear;
-            cursor: default;
-            position: relative;
-        }
-
-        .tech-badge:hover {
-            border-color: var(--warning-yellow-dim);
-            color: var(--warning-yellow);
-            transform: translateY(-2px);
-        }
-
-        .tech-badge .led {
-            flex-shrink: 0;
-        }
-
-        .tech-category {
-            font-family: 'Oswald', sans-serif;
-            font-weight: 600;
-            font-size: 0.7rem;
-            text-transform: uppercase;
-            letter-spacing: 0.2em;
-            color: var(--concrete-surface);
-            text-align: center;
-            width: 100%;
-            margin-top: 1rem;
-            margin-bottom: 0.5rem;
-            display: flex;
-            align-items: center;
-            gap: 1rem;
-            justify-content: center;
-        }
-
-        .tech-category::before,
-        .tech-category::after {
-            content: '';
-            height: 1px;
-            width: 40px;
-            background: var(--concrete-surface);
-        }
-
-        /* ============================================================
-           DOWNLOAD / GETTING STARTED
-           ============================================================ */
-        .download {
-            padding: 6rem 0;
-            background: var(--concrete-mid);
-            position: relative;
-        }
-
-        .download-panel {
-            background: var(--concrete-dark);
-            border: 1px solid rgba(240, 192, 48, 0.15);
-            padding: 3rem;
-            max-width: 800px;
-            margin: 0 auto;
-            position: relative;
-        }
-
-        .install-steps {
-            display: flex;
-            flex-direction: column;
-            gap: 1rem;
-        }
-
-        .install-step {
-            display: flex;
-            align-items: stretch;
-            gap: 1rem;
-        }
-
-        .install-step-num {
-            font-family: 'Oswald', sans-serif;
-            font-weight: 700;
-            font-size: 0.9rem;
-            color: var(--concrete-surface);
-            width: 28px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            flex-shrink: 0;
-            border-right: 2px solid var(--concrete-surface);
-            padding-right: 0.75rem;
-        }
-
-        .install-step-content {
-            flex: 1;
-        }
-
-        .install-step-label {
-            font-family: 'Barlow Condensed', sans-serif;
-            font-weight: 500;
-            font-size: 0.85rem;
-            color: var(--steel-text);
-            text-transform: uppercase;
-            letter-spacing: 0.1em;
-            margin-bottom: 0.4rem;
-        }
-
-        .code-block {
-            background: rgba(26, 26, 26, 0.8);
-            border: 1px solid rgba(240, 192, 48, 0.08);
-            padding: 0.75rem 1rem;
-            font-family: 'Share Tech Mono', monospace;
-            font-size: 0.85rem;
-            color: var(--warning-yellow);
-            overflow-x: auto;
-            position: relative;
-        }
-
-        .code-block .prompt {
-            color: var(--concrete-surface);
-            user-select: none;
-        }
-
-        .code-block:hover {
-            border-color: rgba(240, 192, 48, 0.25);
-        }
-
-        .download-binaries {
-            margin-top: 2.5rem;
-            padding-top: 2rem;
-            border-top: 1px dashed rgba(240, 192, 48, 0.15);
-        }
-
-        .download-binaries-label {
-            font-family: 'Share Tech Mono', monospace;
-            font-size: 0.65rem;
-            color: var(--concrete-surface);
-            text-transform: uppercase;
-            letter-spacing: 0.2em;
-            margin-bottom: 1rem;
-            display: flex;
-            align-items: center;
-            gap: 0.75rem;
-        }
-
-        .download-binaries-label::before {
-            content: '';
-            display: block;
-            width: 30px;
-            height: 1px;
-            background: var(--concrete-surface);
-        }
-
-        .download-cards {
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: 1rem;
-        }
-
-        .download-card {
-            background: rgba(42, 42, 42, 0.6);
-            border: 1px solid rgba(240, 192, 48, 0.12);
-            padding: 1.25rem 1.5rem;
-            display: flex;
-            flex-direction: column;
-            gap: 0.75rem;
-            position: relative;
-            transition: border-color 0.2s linear, box-shadow 0.2s linear;
-        }
-
-        .download-card:hover {
-            border-color: rgba(240, 192, 48, 0.35);
-            box-shadow: 0 0 16px rgba(240, 192, 48, 0.06);
-        }
-
-        .download-card-header {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-        }
-
-        .download-card-format {
-            font-family: 'Oswald', sans-serif;
-            font-weight: 700;
-            font-size: 1.1rem;
-            color: var(--steel-bright);
-            text-transform: uppercase;
-            letter-spacing: 0.05em;
-        }
-
-        .download-card-badge {
-            font-family: 'Share Tech Mono', monospace;
-            font-size: 0.6rem;
-            color: var(--warning-yellow-dim);
-            border: 1px solid var(--warning-yellow-dim);
-            padding: 0.15rem 0.5rem;
-            letter-spacing: 0.1em;
-        }
-
-        .download-card-desc {
-            font-family: 'Barlow', sans-serif;
-            font-weight: 300;
-            font-size: 0.85rem;
-            color: var(--steel-text);
-            line-height: 1.5;
-        }
-
-        .download-card-meta {
-            font-family: 'Share Tech Mono', monospace;
-            font-size: 0.65rem;
-            color: var(--concrete-surface);
-            letter-spacing: 0.05em;
-        }
-
-        .btn-download {
-            display: inline-flex;
-            align-items: center;
-            gap: 0.5rem;
-            font-family: 'Oswald', sans-serif;
-            font-weight: 600;
-            font-size: 0.8rem;
-            text-transform: uppercase;
-            letter-spacing: 0.15em;
-            padding: 0.65rem 1.5rem;
-            background: transparent;
-            color: var(--warning-yellow);
-            border: 1px solid var(--warning-yellow-dim);
-            cursor: pointer;
-            text-decoration: none;
-            transition: background 0.15s linear, color 0.15s linear, transform 0.1s linear;
-            align-self: flex-start;
-        }
-
-        .btn-download:hover {
-            background: var(--warning-yellow);
-            color: var(--concrete-dark);
-            transform: translateY(-1px);
-        }
-
-        .btn-download:active {
-            transform: translateY(1px);
-        }
-
-        .download-or-divider {
-            display: flex;
-            align-items: center;
-            gap: 1rem;
-            margin: 2rem 0 0.5rem;
-        }
-
-        .download-or-divider::before,
-        .download-or-divider::after {
-            content: '';
-            flex: 1;
-            height: 1px;
-            background: rgba(240, 192, 48, 0.1);
-        }
-
-        .download-or-divider span {
-            font-family: 'Share Tech Mono', monospace;
-            font-size: 0.65rem;
-            color: var(--concrete-surface);
-            letter-spacing: 0.2em;
-            text-transform: uppercase;
-        }
-
-        .requirements-note {
-            margin-top: 2rem;
-            padding: 1rem 1.25rem;
-            border-left: 3px solid var(--safety-orange);
-            background: rgba(224, 80, 32, 0.05);
-            font-family: 'Share Tech Mono', monospace;
-            font-size: 0.75rem;
-            color: var(--steel-text);
-            line-height: 1.6;
-        }
-
-        .requirements-note strong {
-            color: var(--safety-orange);
-            font-weight: 400;
-        }
-
-        /* ============================================================
-           FOOTER
-           ============================================================ */
-        .footer {
-            padding: 3rem 0 2rem;
-            background: var(--concrete-dark);
-            border-top: 1px solid rgba(240, 192, 48, 0.08);
-            position: relative;
-            z-index: 1;
-        }
-
-        .footer-inner {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            flex-wrap: wrap;
-            gap: 1rem;
-        }
-
-        .footer-brand {
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-        }
-
-        .footer-brand-icon {
-            width: 22px;
-            height: 22px;
-            border: 1.5px solid var(--warning-yellow-dim);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-family: 'Oswald', sans-serif;
-            font-weight: 700;
-            font-size: 0.7rem;
-            color: var(--warning-yellow-dim);
-        }
-
-        .footer-brand-text {
-            font-family: 'Oswald', sans-serif;
-            font-weight: 500;
-            font-size: 0.85rem;
-            color: var(--steel-text);
-            letter-spacing: 0.1em;
-            text-transform: uppercase;
-        }
-
-        .footer-meta {
-            font-family: 'Share Tech Mono', monospace;
-            font-size: 0.65rem;
-            color: var(--concrete-surface);
-            letter-spacing: 0.1em;
-            text-align: right;
-        }
-
-        .footer-links {
-            display: flex;
-            gap: 1.5rem;
-            list-style: none;
-        }
-
-        .footer-links a {
-            font-family: 'Share Tech Mono', monospace;
-            font-size: 0.7rem;
-            color: var(--steel-text);
-            text-decoration: none;
-            letter-spacing: 0.1em;
-            transition: color 0.2s linear;
-        }
-
-        .footer-links a:hover {
-            color: var(--warning-yellow);
-        }
-
-        /* ============================================================
-           DIVIDER
-           ============================================================ */
-        .section-divider {
-            height: 1px;
-            background: linear-gradient(90deg,
-                transparent 0%,
-                rgba(240, 192, 48, 0.2) 20%,
-                rgba(240, 192, 48, 0.2) 80%,
-                transparent 100%
-            );
-        }
-
-        /* ============================================================
-           RESPONSIVE
-           ============================================================ */
-        @media (max-width: 1024px) {
-            .features-grid {
-                grid-template-columns: repeat(2, 1fr);
-            }
-
-            .workflow-steps {
-                grid-template-columns: repeat(2, 1fr);
-                gap: 2rem;
-            }
-
-            .workflow-steps::before {
-                display: none;
-            }
-
-            .demo-content {
-                flex-direction: column;
-            }
-
-            .demo-sidebar {
-                width: 100%;
-                border-right: none;
-                border-bottom: 1px solid rgba(240, 192, 48, 0.08);
-                max-height: 180px;
-                overflow: hidden;
-            }
-
-            .demo-panels {
-                grid-template-columns: repeat(3, 1fr);
-                min-height: 300px;
-            }
-
-            section {
-                padding-top: 4rem;
-                padding-bottom: 4rem;
-            }
-
-            .features, .workflow, .demo, .techstack, .download {
-                padding: 4rem 0;
-            }
-        }
-
-        @media (max-width: 768px) {
-            .navbar-links {
-                display: none;
-                position: absolute;
-                top: 56px;
-                left: 0;
-                width: 100%;
-                background: rgba(26, 26, 26, 0.97);
-                flex-direction: column;
-                padding: 1rem 2rem;
-                gap: 0.75rem;
-                border-bottom: 1px solid rgba(240, 192, 48, 0.12);
-            }
-
-            .navbar-links.open {
-                display: flex;
-            }
-
-            .navbar-mobile-toggle {
-                display: block;
-            }
-
-            .hero-title {
-                font-size: 2.8rem;
-            }
-
-            .hero-tagline {
-                font-size: 1.2rem;
-            }
-
-            .hero-panel {
-                padding: 2rem 1.5rem;
-            }
-
-            .hero-measure {
-                display: none;
-            }
-
-            .section-title {
-                font-size: 2rem;
-            }
-
-            .features-grid {
-                grid-template-columns: 1fr;
-            }
-
-            .workflow-steps {
-                grid-template-columns: 1fr;
-            }
-
-            .demo-panels {
-                grid-template-columns: 1fr;
-                min-height: auto;
-            }
-
-            .demo-panel {
-                border-right: none;
-                border-bottom: 1px solid rgba(240, 192, 48, 0.06);
-                min-height: 200px;
-            }
-
-            .download-panel {
-                padding: 2rem 1.5rem;
-            }
-
-            .footer-inner {
-                flex-direction: column;
-                text-align: center;
-            }
-
-            .footer-links {
-                flex-wrap: wrap;
-                justify-content: center;
-            }
-
-            .footer-meta {
-                text-align: center;
-            }
-
-            .features, .workflow, .demo, .techstack, .download {
-                padding: 3rem 0;
-            }
-
-            .section-subtitle {
-                margin-bottom: 2rem;
-            }
-
-            .code-block {
-                font-size: 0.75rem;
-                word-break: break-all;
-            }
-
-            .download-cards {
-                grid-template-columns: 1fr;
-            }
-        }
-
-        @media (max-width: 480px) {
-            .container {
-                padding: 0 1rem;
-            }
-
-            .hero-title {
-                font-size: 2.2rem;
-            }
-
-            .hero-tagline {
-                font-size: 1.1rem;
-            }
-
-            .hero-panel {
-                padding: 1.5rem 1.25rem;
-            }
-
-            .hero-actions {
-                flex-direction: column;
-            }
-
-            .btn-primary, .btn-secondary {
-                width: 100%;
-                justify-content: center;
-            }
-
-            .section-title {
-                font-size: 1.6rem;
-            }
-
-            .section-subtitle {
-                font-size: 0.95rem;
-            }
-
-            .download-panel {
-                padding: 1.5rem 1rem;
-            }
-
-            .install-step {
-                flex-direction: column;
-                gap: 0.5rem;
-            }
-
-            .install-step-num {
-                border-right: none;
-                border-bottom: 1px solid var(--concrete-surface);
-                padding-right: 0;
-                padding-bottom: 0.5rem;
-                width: auto;
-                justify-content: flex-start;
-            }
-
-            .tech-badge {
-                font-size: 0.7rem;
-                padding: 0.5rem 0.8rem;
-            }
-
-            .features, .workflow, .demo, .techstack, .download {
-                padding: 2.5rem 0;
-            }
-
-            .navbar-inner {
-                padding: 0 1rem;
-            }
-        }
-    </style>
-</head>
-<body>
-
-    <!-- ============================================================
-         NAVBAR
-         ============================================================ -->
-    <nav class="navbar">
-        <div class="navbar-inner">
-            <a href="#hero" class="navbar-brand">
-                <div class="navbar-brand-icon">D</div>
-                <span class="navbar-brand-text">DocuMentor</span>
-            </a>
-            <button class="navbar-mobile-toggle" id="navToggle">MENU</button>
-            <ul class="navbar-links" id="navLinks">
-                <li><a href="#features">Features</a></li>
-                <li><a href="#workflow">Workflow</a></li>
-                <li><a href="#demo">Demo</a></li>
-                <li><a href="#techstack">Technik</a></li>
-                <li><a href="#download">Download</a></li>
-            </ul>
-        </div>
-    </nav>
-
-    <!-- ============================================================
-         HERO
-         ============================================================ -->
-    <section class="hero" id="hero">
-        <div class="container">
-            <div class="hero-content">
-                <div class="hero-panel corner-brackets riveted reveal">
-                    <span class="rivet rivet-tl"></span>
-                    <span class="rivet rivet-tr"></span>
-                    <span class="rivet rivet-bl"></span>
-                    <span class="rivet rivet-br"></span>
-                    <div class="hero-measure hero-measure-top">750px</div>
-                    <div class="hero-measure hero-measure-right">CTRL-PANEL-01</div>
-                    <div class="hero-system-tag">
-                        <span class="led led-green"></span>
-                        SYSTEM AKTIV &mdash; XSL TRANSFORMATIONS-KONTROLLE v2.0
-                    </div>
-                    <h1 class="hero-title">Docu<span>Mentor</span></h1>
-                    <p class="hero-tagline">Industrielle XSL-Transformationskontrolle</p>
-                    <p class="hero-desc">
-                        Desktop-Anwendung zur Verwaltung und Validierung von XSL-Transformationen.
-                        Erkennen Sie jede Auswirkung Ihrer XSL-Änderungen &mdash; bevor es zu spät ist.
-                        PDF-Generierung, Vergleich und Qualitätssicherung in einem Werkzeug.
-                    </p>
-                    <div class="hero-actions">
-                        <a href="#download" class="btn-primary">
-                            &#9660; Installation starten
-                        </a>
-                        <a href="#features" class="btn-secondary">
-                            &#9654; Features erkunden
-                        </a>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </section>
-
-    <div class="hazard-stripe"></div>
-
-    <!-- ============================================================
-         FEATURES
-         ============================================================ -->
-    <section class="features" id="features">
-        <div class="container">
-            <div class="section-label reveal" data-num="SEC-01">Features</div>
-            <h2 class="section-title reveal">Kontrollraum-<br>Funktionen</h2>
-            <p class="section-subtitle reveal">Sechs Kernmodule für die lückenlose Überwachung Ihrer XSL-Transformationen und PDF-Ergebnisse.</p>
-
-            <div class="features-grid">
-                <!-- Feature 1 -->
-                <div class="feature-card corner-brackets reveal from-bottom reveal-delay-1">
-                    <span class="feature-number">F-001</span>
-                    <div class="feature-icon">&#9776;</div>
-                    <div class="feature-name">Hierarchische Baumstruktur</div>
-                    <p class="feature-desc">Organisieren Sie Ihre XSL- und XML-Dateien in einer intuitiven Baumstruktur mit TreeNodes. Drag-and-Drop, Kontextmenüs und Vererbungsdarstellung inklusive.</p>
-                </div>
-
-                <!-- Feature 2 -->
-                <div class="feature-card corner-brackets reveal from-bottom reveal-delay-2">
-                    <span class="feature-number">F-002</span>
-                    <div class="feature-icon">&#9641;</div>
-                    <div class="feature-name">PDF-Diff-Vergleich</div>
-                    <p class="feature-desc">Drei-Panel-Ansicht mit Referenz-, Diff- und Neu-Darstellung. Alpha-Blending, Zoom und Pan für präzise visuelle Qualitätskontrolle.</p>
-                </div>
-
-                <!-- Feature 3 -->
-                <div class="feature-card corner-brackets reveal from-bottom reveal-delay-3">
-                    <span class="feature-number">F-003</span>
-                    <div class="feature-icon">#</div>
-                    <div class="feature-name">Änderungsverfolgung</div>
-                    <p class="feature-desc">Blake2b-Hashing für jede XML-Datei. Automatische Berechnung im Hintergrund erkennt sofort, welche Dateien sich verändert haben.</p>
-                </div>
-
-                <!-- Feature 4 -->
-                <div class="feature-card corner-brackets reveal from-bottom reveal-delay-4">
-                    <span class="feature-number">F-004</span>
-                    <div class="feature-icon">&#8644;</div>
-                    <div class="feature-name">Asynchrone Verarbeitung</div>
-                    <p class="feature-desc">Hintergrund-Threads für Hash-Berechnungen und Datenbankabfragen. Die Benutzeroberfläche bleibt stets reaktionsfähig.</p>
-                </div>
-
-                <!-- Feature 5 -->
-                <div class="feature-card corner-brackets reveal from-bottom reveal-delay-5">
-                    <span class="feature-number">F-005</span>
-                    <div class="feature-icon">&#9107;</div>
-                    <div class="feature-name">PostgreSQL-Integration</div>
-                    <p class="feature-desc">Direkte Datenbankanbindung mit SSL-Unterstützung. SQL-Abfragen via ConnectorX und Polars DataFrames für schnelle Datenverarbeitung.</p>
-                </div>
-
-                <!-- Feature 6 -->
-                <div class="feature-card corner-brackets reveal from-bottom reveal-delay-6">
-                    <span class="feature-number">F-006</span>
-                    <div class="feature-icon">&#9881;</div>
-                    <div class="feature-name">Toolchain-Konfiguration</div>
-                    <p class="feature-desc">Flexible Verwaltung von Saxon, Apache FOP und diff-pdf. Mehrere Versionen parallel konfigurierbar mit ID-basiertem Referenzsystem.</p>
-                </div>
-            </div>
-        </div>
-    </section>
-
-    <div class="section-divider"></div>
-
-    <!-- ============================================================
-         WORKFLOW
-         ============================================================ -->
-    <section class="workflow" id="workflow">
-        <div class="container">
-            <div class="section-label reveal" data-num="SEC-02">Workflow</div>
-            <h2 class="section-title reveal">Arbeitsablauf</h2>
-            <p class="section-subtitle reveal">Vier Schritte von der XSL-Änderung bis zur verifizierten PDF &mdash; wiederholbar und zuverlässig.</p>
-
-            <div class="workflow-steps">
-                <div class="workflow-step reveal from-left reveal-delay-1">
-                    <div class="step-number">01</div>
-                    <div class="step-title">XSL-Dateien bearbeiten</div>
-                    <p class="step-desc">Führen Sie die benötigten Änderungen an Ihren XSL-Stylesheets durch. DocuMentor Überwacht die Abhängigkeiten.</p>
-                </div>
-                <div class="workflow-step reveal from-left reveal-delay-2">
-                    <div class="step-number">02</div>
-                    <div class="step-title">Transformation starten</div>
-                    <p class="step-desc">Starten Sie die Transformation direkt aus DocuMentor. Saxon und Apache FOP werden automatisch orchestriert.</p>
-                </div>
-                <div class="workflow-step reveal from-right reveal-delay-3">
-                    <div class="step-number">03</div>
-                    <div class="step-title">PDF-Diff begutachten</div>
-                    <p class="step-desc">Vergleichen Sie Referenz- und neue PDF in der Drei-Panel-Ansicht. Abweichungen werden sofort sichtbar.</p>
-                </div>
-                <div class="workflow-step reveal from-right reveal-delay-4">
-                    <div class="step-number">04</div>
-                    <div class="step-title">Ergebnis verifizieren</div>
-                    <p class="step-desc">Prüfen Sie, ob nur die erwarteten PDF-Dateien geändert wurden und das Ergebnis korrekt ist.</p>
-                </div>
-            </div>
-        </div>
-    </section>
-
-    <div class="hazard-stripe-thin"></div>
-
-    <!-- ============================================================
-         DEMO / SCREENSHOT
-         ============================================================ -->
-    <section class="demo" id="demo">
-        <div class="container">
-            <div class="section-label reveal" data-num="SEC-03">Interface</div>
-            <h2 class="section-title reveal">Kontrollstation</h2>
-            <p class="section-subtitle reveal">Überblick über die Anwendungsoberfläche &mdash; Baumstruktur links, PDF-Vergleich rechts.</p>
-
-            <div class="demo-frame reveal from-bottom">
-                <div class="demo-titlebar">
-                    <div class="demo-titlebar-dots">
-                        <span class="demo-titlebar-dot red"></span>
-                        <span class="demo-titlebar-dot yellow"></span>
-                        <span class="demo-titlebar-dot green"></span>
-                    </div>
-                    <span class="demo-titlebar-text">DocuMentor &mdash; Projekt: Flexnow Urkunden 2026</span>
-                    <span style="margin-left:auto;" class="demo-titlebar-text"><span class="led led-green"></span> BEREIT</span>
-                </div>
-                <div class="demo-content">
-                    <!-- Sidebar -->
-                    <div class="demo-sidebar">
-                        <div class="demo-sidebar-label">Projektbaum</div>
-                        <div class="tree-item">
-                            <span class="tree-icon">&#9660;</span> Urkunden
-                        </div>
-                        <div class="tree-item level-1">
-                            <span class="tree-icon">&#9660;</span> Bachelor
-                        </div>
-                        <div class="tree-item level-2">
-                            <span class="tree-icon">&#9654;</span> urkunde_ba.xsl
-                        </div>
-                        <div class="tree-item level-2 active">
-                            <span class="tree-icon">&#9654;</span> testdaten_ba.xml
-                        </div>
-                        <div class="tree-item level-1">
-                            <span class="tree-icon">&#9660;</span> Master
-                        </div>
-                        <div class="tree-item level-2">
-                            <span class="tree-icon">&#9654;</span> urkunde_ma.xsl
-                        </div>
-                        <div class="tree-item level-2">
-                            <span class="tree-icon">&#9654;</span> testdaten_ma.xml
-                        </div>
-                        <div class="tree-item">
-                            <span class="tree-icon">&#9660;</span> Zeugnisse
-                        </div>
-                        <div class="tree-item level-1">
-                            <span class="tree-icon">&#9654;</span> zeugnis_base.xsl
-                        </div>
-                        <div class="tree-item level-1">
-                            <span class="tree-icon">&#9654;</span> layout_common.xsl
-                        </div>
-                    </div>
-                    <!-- Panels -->
-                    <div class="demo-panels">
-                        <div class="demo-panel">
-                            <div class="demo-panel-header"><span class="led led-green"></span> Referenz-PDF</div>
-                            <div class="demo-panel-body">
-                                <div class="mock-pdf">
-                                    <div class="mock-pdf-line long"></div>
-                                    <div class="mock-pdf-line medium"></div>
-                                    <div class="mock-pdf-line long"></div>
-                                    <div class="mock-pdf-line gap"></div>
-                                    <div class="mock-pdf-line short"></div>
-                                    <div class="mock-pdf-line long"></div>
-                                    <div class="mock-pdf-line medium"></div>
-                                    <div class="mock-pdf-line gap"></div>
-                                    <div class="mock-pdf-line long"></div>
-                                    <div class="mock-pdf-line short"></div>
-                                    <div class="mock-pdf-line long"></div>
-                                    <div class="mock-pdf-line medium"></div>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="demo-panel diff">
-                            <div class="demo-panel-header"><span class="led led-yellow"></span> Diff-Ansicht</div>
-                            <div class="demo-panel-body">
-                                <div class="mock-pdf">
-                                    <div class="mock-pdf-line long"></div>
-                                    <div class="mock-pdf-line medium diff-change"></div>
-                                    <div class="mock-pdf-line long"></div>
-                                    <div class="mock-pdf-line gap"></div>
-                                    <div class="mock-pdf-line short diff-remove"></div>
-                                    <div class="mock-pdf-line long diff-add"></div>
-                                    <div class="mock-pdf-line medium"></div>
-                                    <div class="mock-pdf-line gap"></div>
-                                    <div class="mock-pdf-line long diff-change"></div>
-                                    <div class="mock-pdf-line short"></div>
-                                    <div class="mock-pdf-line long"></div>
-                                    <div class="mock-pdf-line medium diff-add"></div>
-                                </div>
-                            </div>
-                        </div>
-                        <div class="demo-panel">
-                            <div class="demo-panel-header"><span class="led led-orange"></span> Neue PDF</div>
-                            <div class="demo-panel-body">
-                                <div class="mock-pdf">
-                                    <div class="mock-pdf-line long"></div>
-                                    <div class="mock-pdf-line long"></div>
-                                    <div class="mock-pdf-line long"></div>
-                                    <div class="mock-pdf-line gap"></div>
-                                    <div class="mock-pdf-line medium"></div>
-                                    <div class="mock-pdf-line long"></div>
-                                    <div class="mock-pdf-line medium"></div>
-                                    <div class="mock-pdf-line gap"></div>
-                                    <div class="mock-pdf-line long"></div>
-                                    <div class="mock-pdf-line short"></div>
-                                    <div class="mock-pdf-line long"></div>
-                                    <div class="mock-pdf-line long"></div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </section>
-
-    <div class="section-divider"></div>
-
-    <!-- ============================================================
-         TECH STACK
-         ============================================================ -->
-    <section class="techstack" id="techstack">
-        <div class="container">
-            <div class="section-label reveal" data-num="SEC-04">Technologie</div>
-            <h2 class="section-title reveal">Tech-Stack</h2>
-            <p class="section-subtitle reveal">Bewährte Industriekomponenten für maximale Zuverlässigkeit.</p>
-
-            <div class="tech-grid reveal from-bottom">
-                <div class="tech-category">Kern</div>
-                <div class="tech-badge"><span class="led led-green"></span> Python 3</div>
-                <div class="tech-badge"><span class="led led-green"></span> PySide6 / Qt</div>
-                <div class="tech-badge"><span class="led led-green"></span> Pydantic</div>
-
-                <div class="tech-category">Transformation</div>
-                <div class="tech-badge"><span class="led led-yellow"></span> Saxon XSLT</div>
-                <div class="tech-badge"><span class="led led-yellow"></span> Apache FOP</div>
-                <div class="tech-badge"><span class="led led-yellow"></span> diff-pdf</div>
-
-                <div class="tech-category">Daten</div>
-                <div class="tech-badge"><span class="led led-orange"></span> PostgreSQL</div>
-                <div class="tech-badge"><span class="led led-orange"></span> Polars</div>
-                <div class="tech-badge"><span class="led led-orange"></span> ConnectorX</div>
-
-                <div class="tech-category">Werkzeuge</div>
-                <div class="tech-badge"><span class="led led-green"></span> blake2b</div>
-                <div class="tech-badge"><span class="led led-green"></span> PyInstaller</div>
-            </div>
-        </div>
-    </section>
-
-    <div class="hazard-stripe"></div>
-
-    <!-- ============================================================
-         DOWNLOAD / GETTING STARTED
-         ============================================================ -->
-    <section class="download" id="download">
-        <div class="container">
-            <div class="section-label reveal" data-num="SEC-05">Installation</div>
-            <h2 class="section-title reveal">Inbetriebnahme</h2>
-            <p class="section-subtitle reveal">Windows-Pakete für den sofortigen Einsatz &mdash; oder drei Befehle aus dem Quellcode.</p>
-
-            <div class="download-panel corner-brackets riveted reveal from-bottom">
-                <span class="rivet rivet-tl"></span>
-                <span class="rivet rivet-tr"></span>
-                <span class="rivet rivet-bl"></span>
-                <span class="rivet rivet-br"></span>
-
-                <!-- 1. Windows Binaries -->
-                <div class="download-binaries" style="margin-top: 0; padding-top: 0; border-top: none;">
-                    <div class="download-binaries-label">Windows — Vorkompilierte Pakete</div>
-                    <div class="download-cards">
-                        <div class="download-card corner-brackets">
-                            <div class="download-card-header">
-                                <span class="download-card-format">&#9662; MSI-Installer</span>
-                                <span class="download-card-badge">EMPFOHLEN</span>
-                            </div>
-                            <p class="download-card-desc">Windows-Installer mit automatischer Einrichtung. Erstellt Startmenü-Einträge und ermöglicht saubere Deinstallation über die Systemsteuerung.</p>
-                            <span class="download-card-meta">DocuMentor-2.0-win64.msi &mdash; ca. 85 MB</span>
-                            <a href="#" class="btn-download">&#9660; MSI herunterladen</a>
-                        </div>
-                        <div class="download-card corner-brackets">
-                            <div class="download-card-header">
-                                <span class="download-card-format">&#9662; ZIP-Archiv</span>
-                                <span class="download-card-badge">PORTABEL</span>
-                            </div>
-                            <p class="download-card-desc">Portable Version ohne Installation. Entpacken und direkt starten &mdash; ideal für eingeschränkte Umgebungen ohne Administratorrechte.</p>
-                            <span class="download-card-meta">DocuMentor-2.0-win64-portable.zip &mdash; ca. 80 MB</span>
-                            <a href="#" class="btn-download">&#9660; ZIP herunterladen</a>
-                        </div>
-                    </div>
-                </div>
-
-                <!-- 2. Hinweis Windows -->
-                <div class="requirements-note">
-                    <strong>HINWEIS:</strong> Die Windows-Pakete enthalten alle Abhängigkeiten inklusive Python-Runtime. Lediglich eine <strong>Java Runtime</strong> (für Saxon) muss separat installiert werden. Für die volle Performance der Pool-Worker wird ein <strong>Java JDK</strong> (statt nur JRE) empfohlen.
-                </div>
-
-                <!-- 3. Quellcode -->
-                <div class="download-or-divider"><span>oder aus Quellcode</span></div>
-
-                <div class="install-steps">
-                    <div class="install-step">
-                        <div class="install-step-num">01</div>
-                        <div class="install-step-content">
-                            <div class="install-step-label">Repository klonen</div>
-                            <div class="code-block"><span class="prompt">$ </span>git clone https://github.com/your-org/xsl-validator.git</div>
-                        </div>
-                    </div>
-                    <div class="install-step">
-                        <div class="install-step-num">02</div>
-                        <div class="install-step-content">
-                            <div class="install-step-label">Abhängigkeiten installieren</div>
-                            <div class="code-block"><span class="prompt">$ </span>uv sync</div>
-                        </div>
-                    </div>
-                    <div class="install-step">
-                        <div class="install-step-num">03</div>
-                        <div class="install-step-content">
-                            <div class="install-step-label">Anwendung starten</div>
-                            <div class="code-block"><span class="prompt">$ </span>uv run python src/main.py</div>
-                        </div>
-                    </div>
-                </div>
-
-                <!-- 4. Hinweis Quellcode -->
-                <div class="requirements-note">
-                    <strong>HINWEIS:</strong> Erfordert Python 3.13+, Java Runtime (für Saxon) und den Paketmanager <strong>uv</strong>. Für die volle Performance der Pool-Worker wird ein <strong>Java JDK</strong> (statt nur JRE) empfohlen.
-                </div>
-            </div>
-        </div>
-    </section>
-
-    <div class="hazard-stripe-thin"></div>
-
-    <!-- ============================================================
-         FOOTER
-         ============================================================ -->
-    <footer class="footer">
-        <div class="container">
-            <div class="footer-inner">
-                <div class="footer-brand">
-                    <div class="footer-brand-icon">D</div>
-                    <span class="footer-brand-text">DocuMentor</span>
-                </div>
-                <ul class="footer-links">
-                    <li><a href="#features">Features</a></li>
-                    <li><a href="#workflow">Workflow</a></li>
-                    <li><a href="#techstack">Technik</a></li>
-                    <li><a href="#download">Download</a></li>
-                </ul>
-                <div class="footer-meta">
-                    SYSTEM // DOCUMENTOR // BUILD 2026.02<br>
-                    PySide6 Desktop-Anwendung // Open Source
-                </div>
-            </div>
-        </div>
-    </footer>
-
-    <!-- ============================================================
-         JAVASCRIPT
-         ============================================================ -->
-    <script>
-        // ============================================================
-        // Mobile Navigation Toggle
-        // ============================================================
-        (function() {
-            const toggle = document.getElementById('navToggle');
-            const links = document.getElementById('navLinks');
-            if (toggle && links) {
-                toggle.addEventListener('click', function() {
-                    links.classList.toggle('open');
-                    toggle.textContent = links.classList.contains('open') ? 'CLOSE' : 'MENU';
-                });
-                // Close on link click
-                links.querySelectorAll('a').forEach(function(a) {
-                    a.addEventListener('click', function() {
-                        links.classList.remove('open');
-                        toggle.textContent = 'MENU';
-                    });
-                });
-            }
-        })();
-
-        // ============================================================
-        // Scroll Reveal (mechanical, linear)
-        // ============================================================
-        (function() {
-            const reveals = document.querySelectorAll('.reveal');
-            const observer = new IntersectionObserver(function(entries) {
-                entries.forEach(function(entry) {
-                    if (entry.isIntersecting) {
-                        entry.target.classList.add('visible');
-                        observer.unobserve(entry.target);
-                    }
-                });
-            }, {
-                threshold: 0.12,
-                rootMargin: '0px 0px -40px 0px'
-            });
-
-            reveals.forEach(function(el) {
-                observer.observe(el);
-            });
-        })();
-
-        // ============================================================
-        // Navbar background on scroll
-        // ============================================================
-        (function() {
-            const navbar = document.querySelector('.navbar');
-            let ticking = false;
-            window.addEventListener('scroll', function() {
-                if (!ticking) {
-                    requestAnimationFrame(function() {
-                        if (window.scrollY > 80) {
-                            navbar.style.borderBottomColor = 'rgba(240, 192, 48, 0.25)';
-                        } else {
-                            navbar.style.borderBottomColor = 'rgba(240, 192, 48, 0.12)';
-                        }
-                        ticking = false;
-                    });
-                    ticking = true;
-                }
-            });
-        })();
-
-        // ============================================================
-        // Smooth scroll for anchor links
-        // ============================================================
-        document.querySelectorAll('a[href^="#"]').forEach(function(anchor) {
-            anchor.addEventListener('click', function(e) {
-                e.preventDefault();
-                var target = document.querySelector(this.getAttribute('href'));
-                if (target) {
-                    var offset = 56; // navbar height
-                    var top = target.getBoundingClientRect().top + window.pageYOffset - offset;
-                    window.scrollTo({ top: top, behavior: 'smooth' });
-                }
-            });
-        });
-    </script>
-</body>
-</html>