diff --git a/guide/guide-styles.css b/guide/guide-styles.css
index e7fb640..0b90191 100644
--- a/guide/guide-styles.css
+++ b/guide/guide-styles.css
@@ -1,6 +1,100 @@
 /* Mostro Node Guide Styles */
 /* Color scheme matches main site: dark bg #1D212C, green accent #8CC63F / #739C3D */
 
+:root {
+  /* Primary colors */
+  --color-bg-dark: #1D212C;
+  --color-bg-darker: #13151d;
+  --color-bg-sidebar: rgba(16, 18, 25, 0.6);
+  --color-bg-sidebar-solid: rgba(16, 18, 25, 0.97);
+  --color-bg-header: rgba(29, 33, 44, 0.92);
+  --color-bg-collapsible: rgba(16, 18, 25, 0.5);
+  
+  /* Accent colors */
+  /* Mapping to style/styles.css:
+     --color-green-primary = --green (main green)
+     --color-green-dark = --green-hover (darker green for hover states)
+     --color-green-darker = --green-dark (darkest green for back-to-top)
+     --color-green-light = --green-light (lighter green for hover effects)
+  */
+  --color-green-primary: #8CC63F;
+  --color-green-dark: #739C3D;
+  --color-green-darker: #304F00;
+  --color-green-light: #9CD84F;
+  --color-green-bg: rgba(140, 198, 63, 0.1);
+  --color-green-border: rgba(140, 198, 63, 0.15);
+  --color-green-border-light: rgba(140, 198, 63, 0.3);
+  --color-green-border-lighter: rgba(140, 198, 63, 0.12);
+  --color-green-bg-light: rgba(140, 198, 63, 0.08);
+  --color-green-bg-lighter: rgba(140, 198, 63, 0.06);
+  --color-green-bg-hover: rgba(140, 198, 63, 0.04);
+  
+  /* Text colors */
+  --color-text-primary: #d4d4d8;
+  --color-text-light: #e4e4e7;
+  --color-text-lighter: #fff;
+  --color-text-muted: #92949A;
+  --color-divider-subtle: rgba(255, 255, 255, 0.05);
+  
+  /* Utility colors */
+  --color-warning: #fbbf24;
+  --color-warning-bg: rgba(251, 191, 36, 0.08);
+  --color-note: #60a5fa;
+  --color-note-bg: rgba(96, 165, 250, 0.08);
+  --color-easy: #86efac;
+  --color-medium: #fbbf24;
+  --color-hard: #f87171;
+  
+  /* Code syntax colors */
+  --code-comment: #6b7280;
+  --code-keyword: #c084fc;
+  --code-string: #86efac;
+  --code-number: #93c5fd;
+  --code-variable: #fbbf24;
+  
+  /* Spacing */
+  --spacing-xs: 4px;
+  --spacing-sm: 8px;
+  --spacing-sm-plus: 14px;
+  --spacing-md: 16px;
+  --spacing-lg: 24px;
+  --spacing-xl: 32px;
+  --spacing-2xl: 48px;
+  
+  /* Typography */
+  --font-size-xs: 12px;
+  --font-size-sm: 13px;
+  --font-size-base: 14px;
+  --font-size-md: 15px;
+  --font-size-lg: 17px;
+  --font-size-xl: 18px;
+  --font-size-xl-bridge: 19px;
+  --font-size-2xl: 22px;
+  --font-size-3xl: 30px;
+  --font-size-4xl: 42px;
+  
+  /* Layout */
+  --header-height: 60px;
+  --sidebar-width: 280px;
+  --content-max-width: 800px;
+  --guide-area-width: 900px;
+  --border-radius-sm: 3px;
+  --border-radius-md: 4px;
+  --border-radius-lg: 6px;
+  --border-radius-xl: 8px;
+  
+  /* Transitions */
+  --transition-fast: 0.15s;
+  --transition-normal: 0.2s;
+  --transition-slow: 0.3s;
+  
+  /* Z-index layers */
+  --z-header: 100;
+  --z-sidebar: 90;
+  --z-overlay: 80;
+  --z-back-to-top: 70;
+}
+
 * {
   margin: 0;
   padding: 0;
@@ -8,7 +102,7 @@
 }
 
 ::selection {
-  background: #8CC63F;
+  background: var(--color-green-primary);
   color: #000;
 }
 
@@ -40,16 +134,16 @@ html {
 
 body {
   font-family: 'Roboto Condensed', sans-serif;
-  background-color: #1D212C;
-  color: #d4d4d8;
+  background-color: var(--color-bg-dark);
+  color: var(--color-text-primary);
   line-height: 1.8;
-  font-size: 17px;
+  font-size: var(--font-size-lg);
 }
 
 body::-webkit-scrollbar { width: 7px; }
 body::-webkit-scrollbar-track-piece { background: transparent; }
-body::-webkit-scrollbar-thumb { background: #739C3D; border-radius: 3px; }
-body::-webkit-scrollbar-thumb:hover { background: #9CD84F; }
+body::-webkit-scrollbar-thumb { background: var(--color-green-dark); border-radius: var(--border-radius-sm); }
+body::-webkit-scrollbar-thumb:hover { background: var(--color-green-light); }
 
 /* ===== HEADER ===== */
 .guide-header {
@@ -57,24 +151,24 @@ body::-webkit-scrollbar-thumb:hover { background: #9CD84F; }
   top: 0;
   left: 0;
   right: 0;
-  height: 60px;
-  background: rgba(29, 33, 44, 0.92);
+  height: var(--header-height);
+  background: var(--color-bg-header);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
-  z-index: 100;
-  border-bottom: 1px solid rgba(140, 198, 63, 0.15);
+  z-index: var(--z-header);
+  border-bottom: 1px solid var(--color-green-border);
   display: flex;
   align-items: center;
-  padding: 0 24px;
+  padding: 0 var(--spacing-lg);
 }
 .header-logo {
   display: flex;
   align-items: center;
   text-decoration: none;
-  gap: 12px;
-  color: #fff;
+  gap: var(--spacing-sm);
+  color: var(--color-text-lighter);
   font-weight: bold;
-  font-size: 18px;
+  font-size: var(--font-size-xl);
 }
 .header-logo img {
   height: 36px;
@@ -83,71 +177,71 @@ body::-webkit-scrollbar-thumb:hover { background: #9CD84F; }
   margin-left: auto;
   display: flex;
   align-items: center;
-  gap: 16px;
+  gap: var(--spacing-md);
 }
 
 /* Language switcher */
 .lang-switcher {
   display: flex;
-  gap: 4px;
+  gap: var(--spacing-xs);
 }
 .lang-switcher a {
-  color: #92949A;
+  color: var(--color-text-muted);
   text-decoration: none;
-  padding: 4px 8px;
-  border-radius: 4px;
-  font-size: 14px;
+  padding: var(--spacing-xs) var(--spacing-sm);
+  border-radius: var(--border-radius-md);
+  font-size: var(--font-size-base);
   font-weight: bold;
-  transition: all 0.15s;
+  transition: all var(--transition-fast);
 }
-.lang-switcher a:hover { color: #fff; }
+.lang-switcher a:hover { color: var(--color-text-lighter); }
 .lang-switcher a.active {
-  color: #1D212C;
-  background: #8CC63F;
+  color: var(--color-bg-dark);
+  background: var(--color-green-primary);
 }
 
 /* Mobile TOC toggle */
 .toc-toggle {
   display: none;
-  background: #8CC63F;
-  color: #1D212C;
+  background: var(--color-green-primary);
+  color: var(--color-bg-dark);
   border: none;
-  padding: 6px 14px;
-  border-radius: 6px;
+  padding: var(--spacing-sm) var(--spacing-sm-plus);
+  border-radius: var(--border-radius-lg);
   font-family: 'Roboto Condensed', sans-serif;
   font-weight: bold;
-  font-size: 14px;
+  font-size: var(--font-size-base);
   cursor: pointer;
 }
 
 /* ===== LAYOUT ===== */
 .guide-layout {
   display: flex;
-  margin-top: 60px;
+  margin-top: var(--header-height);
 }
 
 /* ===== SIDEBAR / TOC ===== */
 .guide-sidebar {
   position: fixed;
-  top: 60px;
+  top: var(--header-height);
   left: 0;
-  width: 280px;
-  height: calc(100vh - 60px);
+  width: var(--sidebar-width);
+  height: calc(100vh - var(--header-height));
   overflow-y: auto;
-  padding: 24px 16px;
-  background: rgba(16, 18, 25, 0.6);
-  border-right: 1px solid rgba(140, 198, 63, 0.1);
-  z-index: 50;
+  padding: var(--spacing-lg) var(--spacing-md);
+  background: var(--color-bg-sidebar);
+  border-right: 1px solid var(--color-green-border);
+  z-index: var(--z-sidebar);
 }
-.guide-sidebar::-webkit-scrollbar { width: 4px; }
-.guide-sidebar::-webkit-scrollbar-thumb { background: #739C3D; border-radius: 2px; }
+.guide-sidebar::-webkit-scrollbar { width: var(--spacing-xs); }
+.guide-sidebar::-webkit-scrollbar-thumb { background: var(--color-green-dark); border-radius: 2px; }
 
 .toc-title {
-  color: #8CC63F;
-  font-size: 13px;
+  color: var(--color-green-primary);
+  font-size: var(--font-size-sm);
   text-transform: uppercase;
   letter-spacing: 1.5px;
-  margin-bottom: 16px;
+  margin-bottom: var(--spacing-md);
   font-weight: bold;
 }
 .toc-list {
@@ -158,133 +252,133 @@ body::-webkit-scrollbar-thumb:hover { background: #9CD84F; }
 }
 .toc-list a {
   display: block;
-  color: #92949A;
+  color: var(--color-text-muted);
   text-decoration: none;
   padding: 5px 10px;
-  font-size: 14px;
-  border-radius: 4px;
+  font-size: var(--font-size-base);
+  border-radius: var(--border-radius-md);
   border-left: 2px solid transparent;
-  transition: all 0.15s;
+  transition: all var(--transition-fast);
   line-height: 1.4;
 }
 .toc-list a:hover {
-  color: #fff;
-  background: rgba(140, 198, 63, 0.08);
+  color: var(--color-text-lighter);
+  background: var(--color-green-bg-light);
 }
 .toc-list a.active {
-  color: #8CC63F;
-  border-left-color: #8CC63F;
-  background: rgba(140, 198, 63, 0.08);
+  color: var(--color-green-primary);
+  border-left-color: var(--color-green-primary);
+  background: var(--color-green-bg-light);
 }
 .toc-list .toc-sub {
-  padding-left: 16px;
+  padding-left: var(--spacing-md);
 }
 .toc-list .toc-sub a {
-  font-size: 13px;
+  font-size: var(--font-size-sm);
   padding: 3px 10px;
 }
 
 /* ===== MAIN CONTENT ===== */
 .guide-content {
-  margin-left: 280px;
-  margin-top: 60px;
+  margin-left: var(--sidebar-width);
+  margin-top: var(--header-height);
   flex: 1;
   min-width: 0;
-  padding: 48px 48px 120px;
-  max-width: calc(280px + 900px);
+  padding: var(--spacing-2xl) var(--spacing-2xl) 120px;
+  max-width: calc(var(--sidebar-width) + var(--guide-area-width));
 }
 .guide-content > * {
-  max-width: 800px;
+  max-width: var(--content-max-width);
 }
 
 /* ===== TYPOGRAPHY ===== */
 .guide-content h1 {
-  font-size: 42px;
+  font-size: var(--font-size-4xl);
   font-weight: bold;
-  color: #fff;
-  margin-bottom: 8px;
+  color: var(--color-text-lighter);
+  margin-bottom: var(--spacing-sm);
   line-height: 1.2;
 }
 .guide-version {
-  color: #8CC63F;
-  font-size: 15px;
+  color: var(--color-green-primary);
+  font-size: var(--font-size-md);
   margin-bottom: 40px;
 }
 .guide-content h2 {
-  font-size: 30px;
+  font-size: var(--font-size-3xl);
   font-weight: bold;
-  color: #fff;
+  color: var(--color-text-lighter);
   margin-top: 64px;
   margin-bottom: 20px;
-  padding-bottom: 8px;
-  border-bottom: 2px solid rgba(140, 198, 63, 0.25);
+  padding-bottom: var(--spacing-sm);
+  border-bottom: 2px solid var(--color-green-border);
   line-height: 1.3;
 }
 .guide-content h3 {
-  font-size: 22px;
+  font-size: var(--font-size-2xl);
   font-weight: bold;
-  color: #e4e4e7;
+  color: var(--color-text-light);
   margin-top: 40px;
-  margin-bottom: 14px;
+  margin-bottom: var(--spacing-sm-plus);
   line-height: 1.3;
 }
 .guide-content h4 {
-  font-size: 18px;
+  font-size: var(--font-size-xl);
   font-weight: bold;
-  color: #d4d4d8;
+  color: var(--color-text-primary);
   margin-top: 28px;
   margin-bottom: 10px;
 }
 .guide-content p {
-  margin-bottom: 16px;
+  margin-bottom: var(--spacing-md);
 }
 .guide-content a {
-  color: #8CC63F;
+  color: var(--color-green-primary);
   text-decoration: none;
-  border-bottom: 1px solid rgba(140, 198, 63, 0.3);
-  transition: all 0.15s;
+  border-bottom: 1px solid var(--color-green-border-light);
+  transition: all var(--transition-fast);
 }
 .guide-content a:hover {
-  color: #9CD84F;
-  border-bottom-color: #9CD84F;
+  color: var(--color-green-light);
+  border-bottom-color: var(--color-green-light);
 }
 .guide-content strong {
-  color: #fff;
+  color: var(--color-text-lighter);
   font-weight: bold;
 }
 .guide-content ul, .guide-content ol {
-  margin-bottom: 16px;
-  padding-left: 24px;
+  margin-bottom: var(--spacing-md);
+  padding-left: var(--spacing-lg);
 }
 .guide-content li {
-  margin-bottom: 6px;
+  margin-bottom: var(--spacing-sm);
 }
 .guide-content li::marker {
-  color: #8CC63F;
+  color: var(--color-green-primary);
 }
 .guide-content hr {
   border: none;
-  border-top: 1px solid rgba(140, 198, 63, 0.15);
-  margin: 48px 0;
+  border-top: 1px solid var(--color-green-border);
+  margin: var(--spacing-2xl) 0;
 }
 
 /* ===== CODE BLOCKS ===== */
 .guide-content code {
   font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', Consolas, monospace;
-  font-size: 14px;
+  font-size: var(--font-size-base);
 }
 .guide-content p code, .guide-content li code, .guide-content td code {
-  background: rgba(140, 198, 63, 0.1);
-  color: #8CC63F;
-  padding: 2px 6px;
-  border-radius: 3px;
+  background: var(--color-green-bg);
+  color: var(--color-green-primary);
+  padding: 2px var(--spacing-sm);
+  border-radius: var(--border-radius-sm);
   font-size: 0.9em;
 }
 .code-block {
   position: relative;
-  background: #13151d;
-  border: 1px solid rgba(140, 198, 63, 0.12);
-  border-radius: 8px;
+  background: var(--color-bg-darker);
+  border: 1px solid var(--color-green-border-lighter);
+  border-radius: var(--border-radius-xl);
   margin-bottom: 20px;
   overflow: hidden;
 }
@@ -292,142 +386,142 @@ body::-webkit-scrollbar-thumb:hover { background: #9CD84F; }
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 8px 16px;
-  background: rgba(140, 198, 63, 0.06);
-  border-bottom: 1px solid rgba(140, 198, 63, 0.1);
-  font-size: 12px;
-  color: #92949A;
+  padding: var(--spacing-sm) var(--spacing-md);
+  background: var(--color-green-bg-lighter);
+  border-bottom: 1px solid var(--color-green-border);
+  font-size: var(--font-size-xs);
+  color: var(--color-text-muted);
 }
 .code-block pre {
-  padding: 16px;
+  padding: var(--spacing-md);
   overflow-x: auto;
   margin: 0;
   line-height: 1.6;
 }
 .code-block pre code {
-  color: #d4d4d8;
+  color: var(--color-text-primary);
 }
 .copy-btn {
   background: none;
-  border: 1px solid rgba(140, 198, 63, 0.3);
-  color: #8CC63F;
+  border: 1px solid var(--color-green-border-light);
+  color: var(--color-green-primary);
   padding: 2px 10px;
-  border-radius: 4px;
-  font-size: 12px;
+  border-radius: var(--border-radius-md);
+  font-size: var(--font-size-xs);
   cursor: pointer;
   font-family: 'Roboto Condensed', sans-serif;
-  transition: all 0.15s;
+  transition: all var(--transition-fast);
 }
 .copy-btn:hover {
-  background: rgba(140, 198, 63, 0.15);
+  background: var(--color-green-bg-light);
 }
 
 /* Code syntax coloring */
-.code-block .cm { color: #6b7280; } /* comment */
-.code-block .kw { color: #c084fc; } /* keyword */
-.code-block .st { color: #86efac; } /* string */
-.code-block .nb { color: #93c5fd; } /* number/builtin */
-.code-block .vr { color: #fbbf24; } /* variable */
+.code-block .cm { color: var(--code-comment); } /* comment */
+.code-block .kw { color: var(--code-keyword); } /* keyword */
+.code-block .st { color: var(--code-string); } /* string */
+.code-block .nb { color: var(--code-number); } /* number/builtin */
+.code-block .vr { color: var(--code-variable); } /* variable */
 
 /* ===== TABLES ===== */
 .table-wrapper {
   overflow-x: auto;
   margin-bottom: 20px;
-  border-radius: 8px;
-  border: 1px solid rgba(140, 198, 63, 0.12);
+  border-radius: var(--border-radius-xl);
+  border: 1px solid var(--color-green-border-lighter);
 }
 .guide-content table {
   width: 100%;
   border-collapse: collapse;
-  font-size: 15px;
+  font-size: var(--font-size-md);
 }
 .guide-content thead {
-  background: rgba(140, 198, 63, 0.1);
+  background: var(--color-green-bg);
 }
 .guide-content th {
-  color: #8CC63F;
+  color: var(--color-green-primary);
   font-weight: bold;
   text-align: left;
-  padding: 12px 16px;
-  border-bottom: 1px solid rgba(140, 198, 63, 0.2);
+  padding: var(--spacing-sm) var(--spacing-md);
+  border-bottom: 1px solid var(--color-green-border-light);
   white-space: nowrap;
 }
 .guide-content td {
-  padding: 10px 16px;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+  padding: 10px var(--spacing-md);
+  border-bottom: 1px solid var(--color-divider-subtle);
 }
 .guide-content tbody tr:hover {
-  background: rgba(140, 198, 63, 0.04);
+  background: var(--color-green-bg-hover);
 }
 
 /* ===== CALLOUT BOXES ===== */
 .callout {
-  padding: 16px 20px;
-  border-radius: 8px;
+  padding: var(--spacing-md) 20px;
+  border-radius: var(--border-radius-xl);
   margin-bottom: 20px;
-  font-size: 15px;
+  font-size: var(--font-size-md);
   line-height: 1.7;
   border-left: 4px solid;
 }
 .callout-icon {
-  font-size: 18px;
-  margin-right: 8px;
+  font-size: var(--font-size-xl);
+  margin-right: var(--spacing-sm);
 }
 .callout-title {
   font-weight: bold;
-  margin-bottom: 4px;
+  margin-bottom: var(--spacing-xs);
   display: flex;
   align-items: center;
-  gap: 6px;
+  gap: var(--spacing-sm);
 }
 .callout.tip {
-  background: rgba(140, 198, 63, 0.08);
-  border-left-color: #8CC63F;
+  background: var(--color-green-bg-light);
+  border-left-color: var(--color-green-primary);
 }
-.callout.tip .callout-title { color: #8CC63F; }
+.callout.tip .callout-title { color: var(--color-green-primary); }
 .callout.warning {
-  background: rgba(251, 191, 36, 0.08);
-  border-left-color: #fbbf24;
+  background: var(--color-warning-bg);
+  border-left-color: var(--color-warning);
 }
-.callout.warning .callout-title { color: #fbbf24; }
+.callout.warning .callout-title { color: var(--color-warning); }
 .callout.note {
-  background: rgba(96, 165, 250, 0.08);
-  border-left-color: #60a5fa;
+  background: var(--color-note-bg);
+  border-left-color: var(--color-note);
 }
-.callout.note .callout-title { color: #60a5fa; }
+.callout.note .callout-title { color: var(--color-note); }
 
 /* ===== COLLAPSIBLE SECTIONS ===== */
 details.collapsible {
-  background: rgba(16, 18, 25, 0.5);
-  border: 1px solid rgba(140, 198, 63, 0.15);
-  border-radius: 8px;
+  background: var(--color-bg-collapsible);
+  border: 1px solid var(--color-green-border);
+  border-radius: var(--border-radius-xl);
   margin-bottom: 20px;
   overflow: hidden;
 }
 details.collapsible summary {
-  padding: 16px 20px;
+  padding: var(--spacing-md) 20px;
   cursor: pointer;
   font-weight: bold;
-  color: #fff;
-  font-size: 18px;
+  color: var(--color-text-lighter);
+  font-size: var(--font-size-xl);
   list-style: none;
   display: flex;
   align-items: center;
   gap: 10px;
-  transition: background 0.15s;
+  transition: background var(--transition-fast);
 }
 details.collapsible summary::-webkit-details-marker { display: none; }
 details.collapsible summary::before {
   content: '▶';
-  color: #8CC63F;
-  font-size: 12px;
-  transition: transform 0.2s;
+  color: var(--color-green-primary);
+  font-size: var(--font-size-xs);
+  transition: transform var(--transition-normal);
 }
 details.collapsible[open] summary::before {
   transform: rotate(90deg);
 }
 details.collapsible summary:hover {
-  background: rgba(140, 198, 63, 0.06);
+  background: var(--color-green-bg-lighter);
 }
 details.collapsible .collapsible-content {
   padding: 0 20px 20px;
@@ -435,63 +529,63 @@ details.collapsible .collapsible-content {
 
 /* ===== FLOW DIAGRAM ===== */
 .flow-diagram {
-  background: #13151d;
-  border: 1px solid rgba(140, 198, 63, 0.12);
-  border-radius: 8px;
-  padding: 24px;
+  background: var(--color-bg-darker);
+  border: 1px solid var(--color-green-border-lighter);
+  border-radius: var(--border-radius-xl);
+  padding: var(--spacing-lg);
   margin-bottom: 20px;
   font-family: 'JetBrains Mono', 'Fira Code', monospace;
-  font-size: 14px;
+  font-size: var(--font-size-base);
   line-height: 1.8;
-  color: #d4d4d8;
+  color: var(--color-text-primary);
   overflow-x: auto;
   white-space: pre;
 }
-.flow-diagram .step-num { color: #8CC63F; font-weight: bold; }
-.flow-diagram .arrow { color: #fbbf24; }
-.flow-diagram .check { color: #86efac; }
+.flow-diagram .step-num { color: var(--color-green-primary); font-weight: bold; }
+.flow-diagram .arrow { color: var(--color-warning); }
+.flow-diagram .check { color: var(--color-easy); }
 
 /* ===== DIFFICULTY BADGES ===== */
 .badge {
   display: inline-block;
-  padding: 2px 8px;
-  border-radius: 4px;
-  font-size: 13px;
+  padding: 2px var(--spacing-sm);
+  border-radius: var(--border-radius-md);
+  font-size: var(--font-size-sm);
   font-weight: bold;
 }
-.badge-easy { background: rgba(134, 239, 172, 0.15); color: #86efac; }
-.badge-medium { background: rgba(251, 191, 36, 0.15); color: #fbbf24; }
-.badge-hard { background: rgba(248, 113, 113, 0.15); color: #f87171; }
+.badge-easy { background: rgba(134, 239, 172, 0.15); color: var(--color-easy); }
+.badge-medium { background: rgba(251, 191, 36, 0.15); color: var(--color-medium); }
+.badge-hard { background: rgba(248, 113, 113, 0.15); color: var(--color-hard); }
 
 /* ===== FOOTER ===== */
 .guide-footer {
-  border-top: 1px solid rgba(140, 198, 63, 0.15);
-  padding: 32px 0;
+  border-top: 1px solid var(--color-green-border);
+  padding: var(--spacing-xl) 0;
   margin-top: 64px;
-  color: #92949A;
-  font-size: 14px;
+  color: var(--color-text-muted);
+  font-size: var(--font-size-base);
   text-align: center;
-  max-width: 800px;
+  max-width: var(--content-max-width);
 }
-.guide-footer a { color: #8CC63F; border-bottom: none; }
+.guide-footer a { color: var(--color-green-primary); border-bottom: none; }
 
 /* ===== BACK TO TOP ===== */
 .back-to-top {
   position: fixed;
-  bottom: 24px;
-  right: 24px;
+  bottom: var(--spacing-lg);
+  right: var(--spacing-lg);
   width: 44px;
   height: 44px;
-  background: #304F00;
-  color: #8CC63F;
+  background: var(--color-green-darker);
+  color: var(--color-green-primary);
   border: none;
   border-radius: 50%;
   font-size: 20px;
   cursor: pointer;
   opacity: 0;
   transform: translateY(10px);
-  transition: all 0.2s;
-  z-index: 90;
+  transition: all var(--transition-normal);
+  z-index: var(--z-back-to-top);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -501,8 +595,8 @@ details.collapsible .collapsible-content {
   transform: translateY(0);
 }
 .back-to-top:hover {
-  background: #8CC63F;
-  color: #1D212C;
+  background: var(--color-green-primary);
+  color: var(--color-bg-dark);
 }
 
 /* ===== RESPONSIVE ===== */
@@ -510,17 +604,17 @@ details.collapsible .collapsible-content {
   .guide-sidebar {
     position: fixed;
     left: -300px;
-    width: 280px;
-    transition: left 0.3s;
-    z-index: 90;
-    background: rgba(16, 18, 25, 0.97);
+    width: var(--sidebar-width);
+    transition: left var(--transition-slow);
+    z-index: var(--z-sidebar);
+    background: var(--color-bg-sidebar-solid);
   }
   .guide-sidebar.open {
     left: 0;
   }
   .guide-content {
     margin-left: 0;
-    padding: 32px 24px 100px;
+    padding: var(--spacing-xl) var(--spacing-lg) 100px;
     max-width: 100%;
   }
   .toc-toggle { display: block; }
@@ -529,19 +623,19 @@ details.collapsible .collapsible-content {
     position: fixed;
     inset: 0;
     background: rgba(0,0,0,0.5);
-    z-index: 80;
+    z-index: var(--z-overlay);
   }
   .sidebar-overlay.open { display: block; }
 }
 
 @media screen and (max-width: 640px) {
-  .guide-content { padding: 24px 16px 80px; }
-  .guide-content h1 { font-size: 30px; }
-  .guide-content h2 { font-size: 24px; margin-top: 48px; }
-  .guide-content h3 { font-size: 19px; }
-  .guide-header { padding: 0 12px; }
+  .guide-content { padding: var(--spacing-lg) var(--spacing-md) 80px; }
+  .guide-content h1 { font-size: var(--font-size-3xl); }
+  .guide-content h2 { font-size: var(--font-size-2xl); margin-top: var(--spacing-2xl); }
+  .guide-content h3 { font-size: var(--font-size-xl-bridge); }
+  .guide-header { padding: 0 var(--spacing-sm); }
   .header-logo span { display: none; }
-  .lang-switcher a { padding: 4px 5px; font-size: 13px; }
+  .lang-switcher a { padding: var(--spacing-xs) 5px; font-size: var(--font-size-sm); }
 }
 
 /* Print styles */
@@ -551,4 +645,4 @@ details.collapsible .collapsible-content {
   body { background: #fff; color: #000; }
   .guide-content h1, .guide-content h2, .guide-content h3, .guide-content strong { color: #000; }
   .callout { border: 1px solid #ccc; }
-}
+}
\ No newline at end of file
diff --git a/style/styles.css b/style/styles.css
index 1de8348..51465c7 100644
--- a/style/styles.css
+++ b/style/styles.css
@@ -1,4 +1,41 @@
-/* Reset some default styles for consistent rendering across browsers */
+/* ===================================================================
+   CSS VARIABLES FOR CONSISTENT THEMING
+   =================================================================== */
+:root {
+  /* === COLOR PALETTE === */
+  /* Primary brand colors */
+  --green-primary: #8CC63F;
+  --green-secondary: #9CD84F;
+  --green-dark: #304F00;
+  --green-hover: #739C3D;
+  --green-sponsor: #8CC541;
+
+  /* Background colors */
+  --bg-dark: #1D212C;
+  --bg-darker: #101219;
+
+  /* Text colors */
+  --text-light: #fff;
+  --text-gray: #92949A;
+  --text-dark: #373737;
+
+  /* Accent colors */
+  --purple-accent: #9747FF;
+
+  /* Transitions - Split into duration variables */
+  --transition-duration-fast: .13s;
+  --transition-duration-normal: .3s;
+  --transition-duration-slow: 1s;
+  
+  /* Keep original for backward compatibility where all properties are needed */
+  --transition-fast: all .13s;
+  --transition-normal: all .3s;
+  --transition-slow: all 1s;
+}
+
+/* ===================================================================
+   RESET & BASE STYLES
+   =================================================================== */
 * {
   margin: 0;
   padding: 0;
@@ -16,16 +53,16 @@ body::-webkit-scrollbar-track-piece {
 }
 
 body::-webkit-scrollbar-thumb {
-  background: #739C3D;
+  background: var(--green-hover);
   border-radius: 3px;
 }
 
 body::-webkit-scrollbar-thumb:hover {
-  background: #9CD84F;
+  background: var(--green-secondary);
 }
 
 ::selection {
-  background: #8CC63F;
+  background: var(--green-primary);
   color: #000;
 }
 
@@ -33,12 +70,13 @@ body::-webkit-scrollbar-thumb:hover {
   clear: both;
 }
 
+/* ===================================================================
+   FONT FACES
+   =================================================================== */
 @font-face {
   font-family: 'Roboto Condensed';
   src: url('../assets/fonts/RobotoCondensed-Regular.woff2') format('woff2'),
-    /* Modern Browsers */
     url('../assets/fonts/RobotoCondensed-Regular.woff') format('woff');
-  /* Legacy Browsers */
   font-weight: normal;
   font-style: normal;
 }
@@ -46,9 +84,7 @@ body::-webkit-scrollbar-thumb:hover {
 @font-face {
   font-family: 'Roboto Condensed';
   src: url('../assets/fonts/RobotoCondensed-Italic.woff2') format('woff2'),
-    /* Modern Browsers */
     url('../assets/fonts/RobotoCondensed-Italic.woff') format('woff');
-  /* Legacy Browsers */
   font-weight: normal;
   font-style: italic;
 }
@@ -56,9 +92,7 @@ body::-webkit-scrollbar-thumb:hover {
 @font-face {
   font-family: 'Roboto Condensed';
   src: url('../assets/fonts/RobotoCondensed-BoldItalic.woff2') format('woff2'),
-    /* Modern Browsers */
     url('../assets/fonts/RobotoCondensed-BoldItalic.woff') format('woff');
-  /* Legacy Browsers */
   font-weight: bold;
   font-style: italic;
 }
@@ -66,18 +100,18 @@ body::-webkit-scrollbar-thumb:hover {
 @font-face {
   font-family: 'Roboto Condensed';
   src: url('../assets/fonts/RobotoCondensed-Bold.woff2') format('woff2'),
-    /* Modern Browsers */
     url('../assets/fonts/RobotoCondensed-Bold.woff') format('woff');
-  /* Legacy Browsers */
   font-weight: bold;
   font-style: normal;
 }
 
-/* Apply basic styling to the body */
+/* ===================================================================
+   BODY & TYPOGRAPHY
+   =================================================================== */
 body {
   font-family: 'Roboto Condensed', sans-serif;
-  background-color: #1D212C;
-  color: #fff;
+  background-color: var(--bg-dark);
+  color: var(--text-light);
   line-height: 1.6;
   font-size: 18px;
   margin: 0;
@@ -85,13 +119,9 @@ body {
   scroll-behavior: smooth;
 }
 
-@media screen and (max-width: 1024px) {
-  body {
-    font-size: 16px;
-  }
-}
-
-/* Style the header */
+/* ===================================================================
+   HEADER & NAVIGATION
+   =================================================================== */
 header {
   position: fixed;
   top: 0;
@@ -105,20 +135,10 @@ header {
   z-index: 1;
 }
 
-@media screen and (max-width: 1024px) {
-  header {
-    height: 80px;
-    padding: 0;
-    backdrop-filter: blur(6px);
-    -webkit-backdrop-filter: blur(6px);
-  }
-}
-
 header .container {
   position: relative;
 }
 
-/* Style the navigation menu */
 nav ul {
   list-style: none;
 }
@@ -131,7 +151,7 @@ nav ul li {
 nav ul li a {
   position: relative;
   text-decoration: none;
-  color: #fff;
+  color: var(--text-light);
   font-weight: 400;
   text-transform: uppercase;
   font-size: 16px;
@@ -145,25 +165,15 @@ nav ul li a.active::after {
   left: 0;
   right: 0;
   height: 2px;
-  background: #8CC63F;
+  background: var(--green-primary);
 }
 
-@media screen and (max-width: 1024px) {
-  nav ul li {
-    padding: 10px;
-    font-size: 14px;
-  }
-
-  .navMenu ul li a.active::after {
-    display: none;
-  }
+nav a {
+  transition: var(--transition-fast);
 }
 
-@media screen and (max-width: 480px) {
-  nav ul li {
-    padding: 10px 5px;
-    font-size: 13px;
-  }
+nav a:hover {
+  color: var(--green-primary);
 }
 
 .navMenu {
@@ -172,71 +182,15 @@ nav ul li a.active::after {
   left: 200px;
 }
 
-@media screen and (max-width: 1024px) {
-  .navMenu {
-    top: 0px;
-    left: auto;
-    right: 0px;
-    width: 280px;
-    z-index: 1;
-    padding-top: 80px;
-  }
-
-  .navMenu .menu-button {
-    display: block;
-  }
-
-  .navMenu ul {
-    display: none;
-    border-radius: 10px;
-    overflow: hidden;
-  }
-
-  .navMenu li {
-    display: block;
-    text-align: center;
-    padding: 0;
-    background: #101219;
-  }
-
-  .navMenu li a {
-    display: block;
-    width: 100%;
-    padding: 15px;
-  }
-}
-
 .navLang {
   position: absolute;
   top: 27px;
   right: 0px;
 }
 
-@media screen and (max-width: 1280px) {
-  .navLang {
-    right: 20px;
-  }
-}
-
-@media screen and (max-width: 1024px) {
-  .navLang {
-    left: auto;
-    right: 75px;
-    z-index: 2;
-  }
-
-  .navLang ul li {
-    text-align: center;
-    padding: 15px 9px;
-  }
-}
-
-@media screen and (max-width: 640px) {
-  .navLang ul li {
-    padding: 15px 3px;
-  }
-}
-
+/* ===================================================================
+   MENU BUTTON (HAMBURGER)
+   =================================================================== */
 .menu-button {
   display: none;
   position: absolute;
@@ -244,41 +198,29 @@ nav ul li a.active::after {
   right: 10px;
   width: 60px;
   height: 60px;
-  background: #101219;
+  background: var(--bg-darker);
   border-radius: 10px;
-  transition: all .13s;
-}
-
-@media screen and (max-width: 1024px) {
-  .menu-button {
-    display: block;
-  }
-}
-
-@media screen and (max-width: 640px) {
-  .menu-button {
-    right: 5px;
-  }
+  transition: var(--transition-fast);
 }
 
 .menu-button.expand {
-  background: #8CC63F;
+  background: var(--green-primary);
 }
 
 .menu-button span {
-  background: #fff;
+  background: var(--text-light);
   width: 25px;
   height: 2px;
   position: absolute;
   top: 30px;
   right: 17px;
-  transition: background .3s;
+  transition: background var(--transition-duration-normal);
 }
 
 .menu-button span:before,
 .menu-button span:after {
   content: '';
-  background: #fff;
+  background: var(--text-light);
   width: 25px;
   height: 2px;
   position: absolute;
@@ -328,44 +270,9 @@ nav ul li a.active::after {
   display: block;
 }
 
-nav a {
-  transition: all .13s;
-}
-
-nav a:hover {
-  color: #8CC63F;
-}
-
-
-/* Apply a basic style to headings */
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  margin: 0;
-}
-
-/* Apply styling to paragraphs */
-p {
-  margin: 0 0 20px 0;
-}
-
-/* Add some spacing to top and bottom of elements */
-.margin-top {
-  margin-top: 20px;
-}
-
-.margin-bottom {
-  margin-bottom: 20px;
-}
-
-/* Center-align text */
-.text-center {
-  text-align: center;
-}
-
+/* ===================================================================
+   LOGO
+   =================================================================== */
 .logo {
   width: 120px;
   position: absolute;
@@ -377,27 +284,16 @@ p {
   width: 100%;
 }
 
-@media screen and (max-width: 1280px) {
-  .logo {
-    left: 20px;
-  }
-}
-
-@media screen and (max-width: 1024px) {
-  .logo {
-    top: 17px;
-    width: 100px;
-  }
-}
-
-@media screen and (max-width: 640px) {
-  .logo {
-    top: 20px;
-    left: 13px;
-    width: 90px;
-  }
+/* ===================================================================
+   UTILITY CLASSES
+   =================================================================== */
+.text-center {
+  text-align: center;
 }
 
+/* ===================================================================
+   LAYOUT
+   =================================================================== */
 .section {
   margin-bottom: 100px;
 }
@@ -415,38 +311,17 @@ p {
   padding: 0 40px;
 }
 
-@media screen and (max-width: 1280px) {
-  .container {
-    max-width: 980px;
-    padding: 0 20px;
-  }
-}
-
-@media screen and (max-width: 1024px) {
-  .container {
-    padding-left: 30px;
-    padding-right: 30px;
-  }
-
-  .section {
-    margin-bottom: 50px;
-  }
-}
-
 .body-content {
   background: url('../assets/images/bg-pattern.svg') center left no-repeat;
 }
 
-@media screen and (max-width: 1024px) {
-  .body-content {
-    margin-top: 40px;
-  }
-}
-
 .body-content .container {
-  color: #fff;
+  color: var(--text-light);
 }
 
+/* ===================================================================
+   HERO SECTION
+   =================================================================== */
 .hero-section {
   margin-top: 100px;
   height: 550px;
@@ -462,77 +337,51 @@ p {
   background-size: 60%;
 }
 
-@media screen and (max-width: 1024px) {
-  .hero-section {
-    height: auto;
-    padding-top: 100px;
-    padding-left: 30px;
-    padding-right: 30px;
-    margin-top: 20px;
-    margin-bottom: 80px;
-  }
-
-  .hero-section.hero-top {
-    background-position-y: 40px;
-    background-size: 90%;
-    padding-top: 50%;
-  }
+.main-heading {
+  padding-top: 2em;
 }
 
-@media screen and (max-width: 640px) {
-  .hero-section {
-    min-height: 350px;
-    height: auto;
-    padding-left: 20px;
-    padding-right: 20px;
-    margin-bottom: 0;
-  }
-
-  .hero-section.hero-bottom {
-    min-height: 280px;
-  }
-
-  .hero-section.hero-top {
-    background-position-y: 40px;
-    background-position-x: center;
-    background-size: 110%;
-    padding-top: 57%;
-  }
+.subheading {
+  font-size: 22px;
+  color: var(--text-light);
+  font-weight: 400;
 }
 
 .nostrPurple {
-  color: #9747FF;
+  color: var(--purple-accent);
 }
 
+/* ===================================================================
+   BUTTONS
+   =================================================================== */
 .button {
   display: inline-block;
   padding: 14px 50px;
   text-align: center;
   font-weight: 700;
   font-size: 20px;
-  color: #373737;
-  font-size: 20px;
-  background: #9CD84F;
+  color: var(--text-dark);
+  background: var(--green-secondary);
   text-transform: uppercase;
   cursor: pointer;
   border-radius: 30px;
-  transition: all .13s;
+  transition: var(--transition-fast);
 }
 
 .button:hover {
-  background: #304F00;
-  color: #9CD84F;
+  background: var(--green-dark);
+  color: var(--green-secondary);
 }
 
 .button.secondary {
-  background: #304F00;
-  color: #9CD84F;
+  background: var(--green-dark);
+  color: var(--green-secondary);
   font-size: 18px;
 }
 
 .button.secondary:hover {
-  background: #9CD84F;
-  color: #304F00;
+  background: var(--green-secondary);
+  color: var(--green-dark);
 }
 
 .button.secondary.socials {
@@ -546,162 +395,47 @@ p {
   filter: brightness(40%);
 }
 
-@media screen and (max-width: 1024px) {
-
-  .button,
-  .button.secondary {
-    font-size: 16px;
-  }
+/* ===================================================================
+   IMAGES & COLUMNS
+   =================================================================== */
+.column-image {
+  margin: 0 auto;
+  margin-bottom: 60px;
+  max-width: 70%;
 }
 
-@media screen and (max-width: 1024px) {
-  .button.secondary.socials {
-    margin: 0 5px;
-  }
+/* ===================================================================
+   LINKS
+   =================================================================== */
+.textLink {
+  text-decoration: underline;
 }
 
-h1 {
-  font-size: 58px;
-  font-weight: 700;
-  margin-bottom: 20px;
-  line-height: 1.2;
+.textLink:hover {
+  color: var(--green-secondary);
 }
 
-.main-heading {
-  padding-top: 2em;
+/* ===================================================================
+   FOOTER
+   =================================================================== */
+#socials {
+  text-align: center;
 }
 
-@media screen and (max-width: 1280px) {
-  h1 {
-    font-size: 52px;
-  }
+.footer-menu li {
+  display: inline;
+  padding: 0 10px;
+  font-size: 18px;
 }
 
-@media screen and (max-width: 1024px) {
-  h1 {
-    font-size: 44px;
-  }
-
-  .main-heading {
-    padding-top: 1em;
-    max-width: 70%;
-  }
-}
-
-@media screen and (max-width: 640px) {
-  h1 {
-    font-size: 38px;
-  }
-
-  .main-heading {
-    max-width: 100%;
-  }
-}
-
-h2 {
-  font-size: 64px;
-  font-weight: 700;
-  line-height: 1.2;
-  margin-bottom: 20px;
-}
-
-@media screen and (max-width: 1280px) {
-  h2 {
-    font-size: 58px;
-  }
-}
-
-
-@media screen and (max-width: 1024px) {
-  h2 {
-    font-size: 48px;
-  }
-}
-
-@media screen and (max-width: 640px) {
-  h2 {
-    font-size: 38px;
-  }
-}
-
-h3 {
-  position: relative;
-  font-size: 38px;
-  font-weight: 700;
-  line-height: 1.2;
-}
-
-@media screen and (max-width: 1280px) {
-  h3 {
-    font-size: 32px;
-  }
-}
-
-
-@media screen and (max-width: 1024px) {
-  h3 {
-    font-size: 26px;
-  }
-}
-
-.column-image {
-  margin: 0 auto;
-  margin-bottom: 60px;
-  max-width: 70%;
-}
-
-@media screen and (max-width: 640px) {
-  .column-image {
-    margin-bottom: 0px;
-    max-width: 60%;
-  }
-}
-
-.subheading {
-  font-size: 22px;
-  color: #fff;
-  font-weight: 400;
-}
-
-@media screen and (max-width: 1024px) {
-  .subheading {
-    font-size: 18px;
-  }
-}
-
-.textLink {
-  text-decoration: underline;
-}
-
-.textLink:hover {
-  color: #9CD84F;
-}
-
-#socials {
-  text-align: center;
-}
-
-.footer-menu li {
-  display: inline;
-  padding: 0 10px;
-  font-size: 18px;
-}
-
-@media screen and (max-width: 640px) {
-  .footer-menu li {
-    font-size: 15px;
-  }
-}
-
-.copyright {
-  position: relative;
-  padding: 90px 0;
-  margin-top: 80px;
-  padding-top: 160px;
-  font-size: 16px;
-  color: #92949A;
-  background: -webkit-linear-gradient(0deg, rgba(16, 18, 25, 1) 17%, rgba(16, 18, 25, 0) 100%);
-  background: linear-gradient(0deg, rgba(16, 18, 25, 1) 17%, rgba(16, 18, 25, 0) 100%);
+.copyright {
+  position: relative;
+  padding: 90px 0;
+  margin-top: 80px;
+  padding-top: 160px;
+  font-size: 16px;
+  color: var(--text-gray);
+  background: linear-gradient(0deg, rgba(16, 18, 25, 1) 17%, rgba(16, 18, 25, 0) 100%);
 }
 
 .scroll-up {
@@ -712,24 +446,13 @@ h3 {
   width: 65px;
   height: 65px;
   border-radius: 33px;
-  background: #304F00;
-  color: #8CC63F;
+  background: var(--green-dark);
+  color: var(--green-primary);
   text-align: center;
   line-height: 76px;
   font-size: 16px;
   font-weight: 700;
-  transition: all .13s;
-}
-
-@media screen and (max-width: 640px) {
-  .copyright {
-    padding: 60px 0;
-    font-size: 14px;
-  }
-
-  .scroll-up {
-    top: 0px;
-  }
+  transition: var(--transition-fast);
 }
 
 .scroll-up:hover {
@@ -746,24 +469,25 @@ h3 {
   background: url('../assets/images/top-icon.svg');
 }
 
-.animate-me {
-  opacity: 0;
-  transform: translateY(20px);
-  transition: all 1s;
-}
-
-/* Add more CSS styles for the animated state as needed */
-.animate-me.animate-in {
-  opacity: 1;
-  transform: translateY(0);
+#footer {
+  position: relative;
+  padding-top: 60px;
+  background: url('../assets/images/footer-bg.svg') bottom center no-repeat;
 }
 
-@media screen and (max-width: 640px) {
-  .flex-second {
-    order: 2
-  }
+#footer:after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 200px;
+  background: linear-gradient(0deg, rgb(29 33 44 / 0%) 17%, rgb(29 33 44 / 100%) 100%);
 }
 
+/* ===================================================================
+   SPONSOR BANNER
+   =================================================================== */
 .sponsor-banner {
   position: relative;
   background: rgb(16 18 25 / 60%);
@@ -790,7 +514,7 @@ h3 {
   left: 50px;
   right: 50px;
   height: 2px;
-  background: #92949A;
+  background: var(--text-gray);
 }
 
 .sponsor-banner .grid {
@@ -817,75 +541,29 @@ h3 {
   left: 54%;
   -webkit-transform: translateY(-50%);
   transform: translateY(-50%);
-  color: #8CC541;
+  color: var(--green-sponsor);
   font-size: 26px;
   text-align: left;
   line-height: 1.2;
 }
 
-
-@media screen and (max-width: 1024px) {
-  .sponsor-banner {
-    width: 90%;
-  }
-
-  .sponsor-text {
-    right: 20px;
-    font-size: 22px;
-  }
-
-  .sponsor-banner .column-image {
-    left: 11%;
-    width: 190px;
-  }
-}
-
-@media screen and (max-width: 640px) {
-  .sponsor-banner {
-    height: 500px;
-  }
-
-  .sponsor-banner .column-image {
-    top: 35%;
-    left: 50%;
-    -webkit-transform: translate(-50%, -50%);
-    transform: translate(-50%, -50%);
-  }
-
-  .sponsor-text {
-    top: auto;
-    bottom: 20px;
-    left: 20px;
-    right: 20px;
-    text-align: center;
-    font-size: 18px;
-  }
-}
-
-#footer {
-  position: relative;
-  padding-top: 60px;
-  background: url('../assets/images/footer-bg.svg') bottom center no-repeat;
-}
-
-#footer:after {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 200px;
-  background: -webkit-linear-gradient(0deg, rgb(29 33 44 / 0%) 17%, rgb(29 33 44 / 100%) 100%);
-  background: linear-gradient(0deg, rgb(29 33 44 / 0%) 17%, rgb(29 33 44 / 100%) 100%);
+/* ===================================================================
+   ANIMATIONS
+   =================================================================== */
+.animate-me {
+  opacity: 0;
+  transform: translateY(20px);
+  transition: var(--transition-slow);
 }
 
-@media screen and (max-width: 640px) {
-  .sponsor-banner::after {
-    display: none;
-  }
+.animate-me.animate-in {
+  opacity: 1;
+  transform: translateY(0);
 }
 
-/* FAQ Section */
+/* ===================================================================
+   FAQ SECTION
+   =================================================================== */
 .faq-section h2 {
   margin-bottom: 40px;
 }
@@ -907,7 +585,7 @@ h3 {
   font-weight: 700;
   cursor: pointer;
   list-style: none;
-  transition: color .13s;
+  transition: color var(--transition-duration-fast);
 }
 
 .faq-question::-webkit-details-marker {
@@ -926,7 +604,7 @@ h3 {
   transform: translateY(-50%);
   font-size: 28px;
   font-weight: 400;
-  color: #8CC63F;
+  color: var(--green-primary);
 }
 
 details[open] .faq-question::after {
@@ -934,7 +612,7 @@ details[open] .faq-question::after {
 }
 
 .faq-question:hover {
-  color: #8CC63F;
+  color: var(--green-primary);
 }
 
 .faq-answer {
@@ -951,7 +629,273 @@ details[open] .faq-question::after {
   margin-bottom: 0;
 }
 
+/* ===================================================================
+   MEDIA QUERIES
+   =================================================================== */
+
+/* 1280px breakpoint */
+@media screen and (max-width: 1280px) {
+  .navLang {
+    right: 20px;
+  }
+
+  .logo {
+    left: 20px;
+  }
+
+  .container {
+    max-width: 980px;
+    padding: 0 20px;
+  }
+
+  /* FIXED: Heading hierarchy (h1 > h2) */
+  h1 {
+    font-size: 58px;
+  }
+
+  h2 {
+    font-size: 52px;
+  }
+
+  h3 {
+    font-size: 32px;
+  }
+}
+
+/* 1024px breakpoint */
+@media screen and (max-width: 1024px) {
+  body {
+    font-size: 16px;
+  }
+
+  header {
+    height: 80px;
+    padding: 0;
+    backdrop-filter: blur(6px);
+    -webkit-backdrop-filter: blur(6px);
+  }
+
+  nav ul li {
+    padding: 10px;
+    font-size: 14px;
+  }
+
+  .navMenu ul li a.active::after {
+    display: none;
+  }
+
+  .navMenu {
+    top: 0px;
+    left: auto;
+    right: 0px;
+    width: 280px;
+    z-index: 1;
+    padding-top: 80px;
+  }
+
+  .navMenu .menu-button {
+    display: block;
+  }
+
+  .navMenu ul {
+    display: none;
+    border-radius: 10px;
+    overflow: hidden;
+  }
+
+  .navMenu li {
+    display: block;
+    text-align: center;
+    padding: 0;
+    background: var(--bg-darker);
+  }
+
+  .navMenu li a {
+    display: block;
+    width: 100%;
+    padding: 15px;
+  }
+
+  .navLang {
+    left: auto;
+    right: 75px;
+    z-index: 2;
+  }
+
+  .navLang ul li {
+    text-align: center;
+    padding: 15px 9px;
+  }
+
+  .menu-button {
+    display: block;
+  }
+
+  .logo {
+    top: 17px;
+    width: 100px;
+  }
+
+  .container {
+    padding-left: 30px;
+    padding-right: 30px;
+  }
+
+  .section {
+    margin-bottom: 50px;
+  }
+
+  .body-content {
+    margin-top: 40px;
+  }
+
+  .hero-section {
+    height: auto;
+    padding-top: 100px;
+    padding-left: 30px;
+    padding-right: 30px;
+    margin-top: 20px;
+    margin-bottom: 80px;
+  }
+
+  .hero-section.hero-top {
+    background-position-y: 40px;
+    background-size: 90%;
+    padding-top: 50%;
+  }
+
+  .button,
+  .button.secondary {
+    font-size: 16px;
+  }
+
+  .button.secondary.socials {
+    margin: 0 5px;
+  }
+
+  /* FIXED: Heading hierarchy (h1 > h2) */
+  h1 {
+    font-size: 48px;
+  }
+
+  .main-heading {
+    padding-top: 1em;
+    max-width: 70%;
+  }
+
+  h2 {
+    font-size: 44px;
+  }
+
+  h3 {
+    font-size: 26px;
+  }
+
+  .subheading {
+    font-size: 18px;
+  }
+
+  .sponsor-banner {
+    width: 90%;
+  }
+
+  .sponsor-text {
+    right: 20px;
+    font-size: 22px;
+  }
+
+  .sponsor-banner .column-image {
+    left: 11%;
+    width: 190px;
+  }
+}
+
+/* 640px breakpoint - FIXED with proper heading hierarchy */
 @media screen and (max-width: 640px) {
+  .logo {
+    top: 20px;
+    left: 13px;
+    width: 90px;
+  }
+
+  .hero-section {
+    min-height: 350px;
+    height: auto;
+    padding-left: 20px;
+    padding-right: 20px;
+    margin-bottom: 0;
+  }
+
+  .hero-section.hero-bottom {
+    min-height: 280px;
+  }
+
+  .hero-section.hero-top {
+    background-position-y: 40px;
+    background-position-x: center;
+    background-size: 110%;
+    padding-top: 57%;
+  }
+
+  /* FIXED: Proper heading hierarchy (h1 > h2) */
+  h1 {
+    font-size: 38px;
+  }
+
+  .main-heading {
+    max-width: 100%;
+  }
+
+  h2 {
+    font-size: 34px;  /* WAS 38px, NOW 34px - smaller than h1 */
+  }
+
+  .column-image {
+    margin-bottom: 0px;
+    max-width: 60%;
+  }
+
+  .footer-menu li {
+    font-size: 15px;
+  }
+
+  .copyright {
+    padding: 60px 0;
+    font-size: 14px;
+  }
+
+  .scroll-up {
+    top: 0px;
+  }
+
+  .flex-second {
+    order: 2;
+  }
+
+  .sponsor-banner {
+    height: 500px;
+  }
+
+  .sponsor-banner .column-image {
+    top: 35%;
+    left: 50%;
+    -webkit-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
+  }
+
+  .sponsor-text {
+    top: auto;
+    bottom: 20px;
+    left: 20px;
+    right: 20px;
+    text-align: center;
+    font-size: 18px;
+  }
+
+  .sponsor-banner::after {
+    display: none;
+  }
+
   .faq-question {
     font-size: 17px;
     padding: 16px 50px 16px 18px;
@@ -965,4 +909,20 @@ details[open] .faq-question::after {
     padding: 0 18px 16px 18px;
     font-size: 15px;
   }
+}
+
+/* 480px breakpoint */
+@media screen and (max-width: 480px) {
+  nav ul li {
+    padding: 10px 5px;
+    font-size: 13px;
+  }
+
+  .navLang ul li {
+    padding: 15px 3px;
+  }
+
+  .menu-button {
+    right: 5px;
+  }
 }
\ No newline at end of file