diff --git a/public/css/animations.css b/public/css/animations.css
index 685e6c2..5b57a17 100644
--- a/public/css/animations.css
+++ b/public/css/animations.css
@@ -1,4 +1,8 @@
 @keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(var(--space-md));
+    }
     to {
         opacity: 1;
         transform: translateY(0);
diff --git a/public/css/base.css b/public/css/base.css
index 6f61284..120b941 100644
--- a/public/css/base.css
+++ b/public/css/base.css
@@ -6,15 +6,15 @@
 
 html {
     height: 100%;
-    transition: color var(--transition-speed) ease,
-    background-color var(--transition-speed) ease;
+    font-size: var(--font-size-base);
+    transition: var(--theme-transition);
 }
 
 body {
     font-family: 'Montserrat', 'Open Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
     background: var(--bg-main);
     color: var(--text);
-    line-height: 1.6;
+    line-height: var(--line-height-base);
     min-height: 100vh;
     transition: var(--theme-transition);
     will-change: background-color, color;
@@ -25,46 +25,50 @@ h1, h2, h3 {
 }
 
 h1 {
-    font-size: 2rem;
-    margin-bottom: var(--spacing-lg);
+    font-size: var(--font-size-xxl);
+    margin-bottom: var(--space-lg);
     color: var(--text);
     opacity: 0.85;
-    font-weight: 600;
+    font-weight: var(--font-weight-semibold);
     transition: var(--theme-transition);
 }
 
 h2 {
-    font-size: 2rem;
-    margin-bottom: var(--spacing-lg);
+    font-size: var(--font-size-xl);
+    margin-bottom: var(--space-lg);
     color: var(--text);
+    font-weight: var(--font-weight-medium);
     transition: var(--theme-transition);
 }
 
 h3 {
+    font-size: var(--font-size-lg);
     color: var(--text);
-    margin-bottom: var(--spacing-md);
+    margin-bottom: var(--space-md);
+    font-weight: var(--font-weight-medium);
     transition: var(--theme-transition);
 }
 
 h1.h1-hero {
-    font-size: 2.5rem;
-    margin: var(--spacing-xl);
-    padding: var(--spacing-xl);
+    font-size: var(--font-size-xxxl);
+    margin: var(--space-xl);
+    padding: var(--space-xl);
     color: var(--text);
     opacity: 0.85;
-    font-weight: 100;
+    font-weight: var(--font-weight-light);
     text-align: center;
 }
 
 p {
-    margin-bottom: var(--spacing-md);
+    margin-bottom: var(--space-md);
+    font-size: var(--font-size-md);
     transition: var(--theme-transition);
 }
 
 a {
     color: var(--primary);
     text-decoration: none;
-    transition: var(--theme-transition), opacity var(--transition-speed) ease;
+    transition: var(--theme-transition), opacity var(--transition-speed) var(--transition-timing);
 }
 
 a:hover {
@@ -76,13 +80,13 @@ main {
 }
 
 .container {
-    max-width: 1200px;
+    max-width: var(--content-width-xl);
     margin: 0 auto;
-    padding: 0 var(--spacing-md);
+    padding: 0 var(--container-padding);
 }
 
 section {
-    padding: var(--spacing-xl) 0;
+    padding: var(--section-spacing) 0;
 }
 
 /* Utility classes */
@@ -90,12 +94,12 @@ section {
     text-align: center;
 }
 
-.mb-1 { margin-bottom: var(--spacing-sm); }
-.mb-2 { margin-bottom: var(--spacing-md); }
-.mb-3 { margin-bottom: var(--spacing-lg); }
-.mb-4 { margin-bottom: var(--spacing-xl); }
+.mb-1 { margin-bottom: var(--space-xs); }
+.mb-2 { margin-bottom: var(--space-md); }
+.mb-3 { margin-bottom: var(--space-lg); }
+.mb-4 { margin-bottom: var(--space-xl); }
 
-.mt-1 { margin-top: var(--spacing-sm); }
-.mt-2 { margin-top: var(--spacing-md); }
-.mt-3 { margin-top: var(--spacing-lg); }
-.mt-4 { margin-top: var(--spacing-xl); }
+.mt-1 { margin-top: var(--space-xs); }
+.mt-2 { margin-top: var(--space-md); }
+.mt-3 { margin-top: var(--space-lg); }
+.mt-4 { margin-top: var(--space-xl); }
diff --git a/public/css/components.css b/public/css/components.css
index f9c01c1..ff4d0db 100644
--- a/public/css/components.css
+++ b/public/css/components.css
@@ -1,28 +1,28 @@
 /* Card Base Styles */
 .card-base {
     background: var(--bg-card);
-    padding: var(--spacing-xl);
-    border-radius: var(--border-radius);
+    padding: var(--space-xl);
+    border-radius: var(--radius-md);
     border: 1px solid var(--border-color);
-    transition: transform var(--transition-speed) ease, 
-                border-color var(--transition-speed) ease;
+    transition: transform var(--transition-speed) var(--transition-timing), 
+                border-color var(--transition-speed) var(--transition-timing);
 }
 
 /* Mission Vision Cards */
 .mission-vision {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-    gap: var(--spacing-lg);
-    margin: var(--spacing-xl) 0;
+    gap: var(--space-lg);
+    margin: var(--space-xl) 0;
 }
 
 .tooltip-container {
     background: var(--bg-card);
-    padding: var(--spacing-xl);
-    border-radius: var(--border-radius);
+    padding: var(--space-xl);
+    border-radius: var(--radius-md);
     border: 1px solid var(--border-color);
     cursor: pointer;
-    transition: border-color 0.3s ease;
+    transition: border-color var(--transition-speed) var(--transition-timing);
 }
 
 .tooltip-container:hover {
@@ -31,12 +31,14 @@
 
 .tooltip-container h3 {
     color: var(--primary);
-    margin-bottom: var(--spacing-md);
+    margin-bottom: var(--space-md);
+    font-size: var(--font-size-lg);
+    font-weight: var(--font-weight-medium);
 }
 
 .tooltip-header {
     position: relative;
-    padding-right: 30px;
+    padding-right: var(--space-xl);
 }
 
 .tooltip-header::after {
@@ -45,7 +47,7 @@
     right: 0;
     top: 0;
     color: var(--primary);
-    transition: transform 0.3s ease;
+    transition: transform var(--transition-speed) var(--transition-timing);
 }
 
 .tooltip-container.active .tooltip-header::after {
@@ -56,26 +58,30 @@
     max-height: 0;
     overflow: hidden;
     opacity: 0;
-    transition: max-height 0.3s ease-out, opacity 0.3s ease-out, margin 0.3s ease-out;
+    transition: max-height var(--transition-speed) var(--transition-timing),
+                opacity var(--transition-speed) var(--transition-timing),
+                margin var(--transition-speed) var(--transition-timing);
     margin-top: 0;
+    font-size: var(--font-size-md);
+    line-height: var(--line-height-base);
 }
 
 .tooltip-container.active .tooltip-content {
     max-height: 500px;
     opacity: 1;
-    margin-top: var(--spacing-lg);
-    padding-top: var(--spacing-lg);
+    margin-top: var(--space-lg);
+    padding-top: var(--space-lg);
     border-top: 1px solid var(--border-color);
 }
 
 /* Service Cards */
 .service-card {
     background: var(--bg-card);
-    padding: var(--spacing-xl);
-    border-radius: var(--border-radius);
+    padding: var(--space-xl);
+    border-radius: var(--radius-md);
     border: 1px solid var(--border-color);
-    margin: var(--spacing-lg) 0;
-    transition: border-color 0.3s ease;
+    margin: var(--space-lg) 0;
+    transition: border-color var(--transition-speed) var(--transition-timing);
 }
 
 .service-card:hover {
@@ -84,14 +90,18 @@
 
 .service-card h3 {
     color: var(--primary);
-    margin-bottom: var(--spacing-md);
+    margin-bottom: var(--space-md);
+    font-size: var(--font-size-lg);
+    font-weight: var(--font-weight-medium);
 }
 
 .service-card li {
     list-style: none;
-    margin-bottom: var(--spacing-sm);
+    margin-bottom: var(--space-sm);
     position: relative;
-    padding-left: 1.5em;
+    padding-left: var(--space-lg);
+    font-size: var(--font-size-md);
+    line-height: var(--line-height-base);
 }
 
 .service-card li::before {
@@ -104,12 +114,12 @@
 /* Contact Info Card */
 .contact-info {
     background: var(--bg-card);
-    padding: var(--spacing-xl);
-    border-radius: var(--border-radius);
+    padding: var(--space-xl);
+    border-radius: var(--radius-md);
     border: 1px solid var(--border-color);
-    margin: var(--spacing-xl) 0;
+    margin: var(--space-xl) 0;
     text-align: center;
-    transition: border-color 0.3s ease;
+    transition: border-color var(--transition-speed) var(--transition-timing);
 }
 
 .contact-info:hover {
@@ -117,15 +127,17 @@
 }
 
 .contact-info p {
-    margin-bottom: var(--spacing-lg);
+    margin-bottom: var(--space-lg);
     color: var(--text);
+    font-size: var(--font-size-md);
+    line-height: var(--line-height-base);
 }
 
 .contact-links {
     display: flex;
     flex-direction: column;
     align-items: center;
-    gap: var(--spacing-md);
+    gap: var(--space-md);
 }
 
 .contact-link {
@@ -133,11 +145,12 @@
     text-decoration: none;
     display: flex;
     align-items: center;
-    gap: var(--spacing-sm);
-    padding: var(--spacing-sm) var(--spacing-md);
-    border-radius: var(--border-radius);
-    transition: all 0.3s ease;
+    gap: var(--space-sm);
+    padding: var(--space-sm) var(--space-md);
+    border-radius: var(--radius-md);
+    transition: all var(--transition-speed) var(--transition-timing);
     border: 1px solid transparent;
+    font-size: var(--font-size-md);
 }
 
 .contact-link:hover {
@@ -146,47 +159,48 @@
 }
 
 .contact-link i {
-    font-size: 1.2em;
+    font-size: var(--font-size-lg);
     color: var(--primary);
 }
 
 /* Signal Icon Styles */
 .signal-icon {
     color: var(--primary);
-    width: 1.2em;
-    height: 1.2em;
+    width: var(--font-size-lg);
+    height: var(--font-size-lg);
 }
 
 /* Quote Styles */
 .welcome-quote {
-    font-size: 1.1rem;
+    font-size: var(--font-size-lg);
     text-align: center;
-    padding: var(--spacing-xl);
+    padding: var(--space-xl);
+    line-height: var(--line-height-relaxed);
 }
 
 .logo-sub {
     display: block;
     text-align: center;
-    font-size: 0.9rem;
+    font-size: var(--font-size-sm);
     color: var(--text-muted);
-    margin: var(--spacing-xl) auto;
-    max-width: 800px;
-    line-height: 1.4;
+    margin: var(--space-xl) auto;
+    max-width: var(--content-width-md);
+    line-height: var(--line-height-relaxed);
     font-style: italic;
 }
 
 /* Mobile Optimizations */
 @media (max-width: 768px) {
     .tooltip-container {
-        padding: var(--spacing-lg);
+        padding: var(--space-lg);
     }
 
     .tooltip-content {
-        font-size: 1rem;
-        line-height: 1.6;
+        font-size: var(--font-size-md);
+        line-height: var(--line-height-base);
     }
 
     .service-card {
-        padding: var(--spacing-lg);
+        padding: var(--space-lg);
     }
 }
diff --git a/public/css/footer.css b/public/css/footer.css
index 33c154c..688ee89 100644
--- a/public/css/footer.css
+++ b/public/css/footer.css
@@ -1,46 +1,47 @@
 footer {
     background: var(--bg-card);
-    padding: var(--spacing-xl) var(--spacing-md);
-    margin-top: calc(2 * var(--spacing-xl));
+    padding: var(--space-xl) var(--container-padding);
+    margin-top: var(--space-xxl);
     border-top: 1px solid var(--border-color);
     display: flex;
     flex-direction: column;
     align-items: center;
-    gap: var(--spacing-lg);
+    gap: var(--space-lg);
 }
 
 .contact-block {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
-    gap: var(--spacing-lg);
-    margin-bottom: var(--spacing-sm);
+    gap: var(--space-lg);
+    margin-bottom: var(--space-sm);
 }
 
 .contact-item {
     display: flex;
     align-items: center;
-    gap: var(--spacing-sm);
+    gap: var(--space-sm);
 }
 
 .contact-item i {
     color: var(--primary);
-    font-size: 1.2rem;
+    font-size: var(--font-size-lg);
 }
 
 .contact-item .signal-icon {
     color: var(--primary);
-    width: 1.2rem;
-    height: 1.2rem;
+    width: var(--font-size-lg);
+    height: var(--font-size-lg);
 }
 
 .contact-item a {
     color: var(--text);
     text-decoration: none;
-    transition: all 0.3s ease;
-    padding: 0.3rem 0.5rem;
-    border-radius: var(--border-radius);
+    transition: all var(--transition-speed) var(--transition-timing);
+    padding: var(--space-xxs) var(--space-xs);
+    border-radius: var(--radius-sm);
     background-color: rgba(var(--bg-hover-rgb), 0.4);
+    font-size: var(--font-size-md);
 }
 
 .contact-item a:hover {
@@ -55,17 +56,17 @@ footer {
 
 .social-links {
     display: flex;
-    gap: var(--spacing-lg);
+    gap: var(--space-lg);
     justify-content: center;
 }
 
 .social-links a {
     color: var(--text);
     text-decoration: none;
-    transition: all 0.3s ease;
-    padding: 0.5rem;
-    border-radius: var(--border-radius);
-    font-size: 1.5rem;
+    transition: all var(--transition-speed) var(--transition-timing);
+    padding: var(--space-xs);
+    border-radius: var(--radius-sm);
+    font-size: var(--font-size-xl);
     background-color: rgba(var(--bg-hover-rgb), 0.4);
 }
 
@@ -77,21 +78,21 @@ footer {
 
 .legal-links {
     text-align: center;
-    font-size: 0.95rem;
+    font-size: var(--font-size-sm);
     color: var(--text-muted);
-    padding-top: var(--spacing-md);
+    padding-top: var(--space-md);
 }
 
 .legal-links a {
     color: var(--text);
     text-decoration: none;
-    margin: 0 var(--spacing-sm);
-    transition: all 0.3s ease;
-    padding: 0.4rem 0.8rem;
-    border-radius: var(--border-radius);
+    margin: 0 var(--space-sm);
+    transition: all var(--transition-speed) var(--transition-timing);
+    padding: var(--space-xs) var(--space-sm);
+    border-radius: var(--radius-sm);
     position: relative;
     background-color: rgba(var(--bg-hover-rgb), 0.4);
-    font-weight: 500;
+    font-weight: var(--font-weight-medium);
     letter-spacing: 0.2px;
 }
 
@@ -103,7 +104,7 @@ footer {
     bottom: 0;
     left: 50%;
     background-color: var(--primary);
-    transition: all 0.3s ease;
+    transition: all var(--transition-speed) var(--transition-timing);
     transform: translateX(-50%);
 }
 
@@ -114,5 +115,6 @@ footer {
 }
 
 .legal-links a:hover::after {
-    width: calc(100% - 1.6rem);
+    width: calc(100% - var(--space-xl));
 }
+
diff --git a/public/css/header-line.css b/public/css/header-line.css
index dfebf3b..9321f6f 100644
--- a/public/css/header-line.css
+++ b/public/css/header-line.css
@@ -4,6 +4,8 @@
     left: 0;
     width: 100%;
     height: 1px;
+    z-index: var(--z-above);
+    transition: opacity var(--transition-speed) var(--transition-timing);
     background: linear-gradient(
         90deg,
         var(--primary-gradient-1),
diff --git a/public/css/header.css b/public/css/header.css
index eb66ebb..a528040 100644
--- a/public/css/header.css
+++ b/public/css/header.css
@@ -5,36 +5,38 @@ header {
     background: linear-gradient(90deg, var(--header-gradient-1), var(--header-gradient-2));
     backdrop-filter: blur(10px);
     height: var(--header-height);
-    z-index: 1000;
+    z-index: var(--z-header);
     border-bottom: 1px solid var(--border-color);
     left: 0;
     right: 0;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-    transition: var(--theme-transition), transform 0.7s ease, box-shadow 0.7s ease;
+    transition: var(--theme-transition), transform 0.7s var(--transition-timing), box-shadow 0.7s var(--transition-timing);
     transform: var(--gpu-accelerated);
+    padding-left: var(--safe-area-inset-left);
+    padding-right: var(--safe-area-inset-right);
 }
 
 .header-content {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    max-width: 1100px;
+    max-width: var(--content-width-lg);
     margin: 0 auto;
-    padding: 0 var(--spacing-md);
+    padding: 0 var(--container-padding);
     height: 100%;
 }
 
 .logo-container {
     display: flex;
     align-items: center;
-    gap: var(--spacing-sm);
+    gap: var(--space-sm);
 }
 
 .logo-text {
-    font-size: 1.7rem;
-    font-weight: bold;
+    font-size: var(--font-size-xl);
+    font-weight: var(--font-weight-bold);
     text-align: center;
-    line-height: 1;
+    line-height: var(--line-height-tight);
 }
 
 .logo-text span:nth-child(1) { color: var(--primary-gradient-1); }
@@ -44,19 +46,19 @@ header {
 
 .nav-menu {
     display: flex;
-    gap: var(--spacing-lg);
+    gap: var(--space-lg);
     align-items: center;
-    padding-top: 16px;
+    padding-top: var(--space-md);
 }
 
 .nav-menu a {
     color: var(--text);
     text-decoration: none;
-    font-size: 1.05rem;
-    font-weight: 500;
-    transition: all 0.3s ease;
-    padding: 0.5rem 0.8rem;
-    border-radius: var(--border-radius);
+    font-size: var(--font-size-md);
+    font-weight: var(--font-weight-medium);
+    transition: all var(--transition-speed) var(--transition-timing);
+    padding: var(--space-xs) var(--space-sm);
+    border-radius: var(--radius-md);
     position: relative;
     background-color: rgba(var(--bg-hover-nav));
     letter-spacing: 0.3px;
@@ -70,7 +72,7 @@ header {
     bottom: 0;
     left: 50%;
     background-color: var(--primary);
-    transition: all 0.3s ease;
+    transition: all var(--transition-speed) var(--transition-timing);
     transform: translateX(-50%);
 }
 
@@ -81,7 +83,7 @@ header {
 }
 
 .nav-menu a:hover::after {
-    width: calc(100% - 1.6rem);
+    width: calc(100% - var(--space-xl));
 }
 
 .theme-toggle {
@@ -89,16 +91,16 @@ header {
     border: none;
     color: var(--text);
     cursor: pointer;
-    padding: var(--spacing-sm);
+    padding: var(--space-sm);
     display: flex;
     align-items: center;
     justify-content: center;
     transition: var(--theme-transition);
-    border-radius: var(--border-radius);
+    border-radius: var(--radius-md);
     position: relative;
-    width: 40px;
-    height: 40px;
-    margin-left: var(--spacing-sm);
+    width: calc(var(--space-xl) * 1.25);
+    height: calc(var(--space-xl) * 1.25);
+    margin-left: var(--space-sm);
 }
 
 .theme-toggle:hover {
@@ -109,14 +111,14 @@ header {
 .theme-toggle:focus-visible {
     outline: 2px solid var(--primary);
     outline-offset: 2px;
-    border-radius: var(--border-radius);
+    border-radius: var(--radius-md);
 }
 
 .theme-toggle i {
-    font-size: 1.2rem;
+    font-size: var(--font-size-lg);
     position: absolute;
-    transition: opacity var(--transition-speed) ease,
-                transform var(--transition-speed) ease;
+    transition: opacity var(--transition-speed) var(--transition-timing),
+                transform var(--transition-speed) var(--transition-timing);
     transform: var(--gpu-accelerated);
 }
 
@@ -153,5 +155,5 @@ header {
     border: none;
     color: var(--text);
     cursor: pointer;
-    padding: var(--spacing-sm);
+    padding: var(--space-sm);
 }
diff --git a/public/css/layout.css b/public/css/layout.css
index 613450b..ab0d6a7 100644
--- a/public/css/layout.css
+++ b/public/css/layout.css
@@ -1,24 +1,35 @@
 .container {
-    max-width: 800px;
+    max-width: var(--content-width-lg);
     margin: 0 auto;
-    padding: 0 1rem;
+    padding: 0 var(--container-padding);
 }
 
 main {
-    margin-top: 2rem;
-    padding: 2rem 0;
+    margin-top: var(--space-xl);
+    padding: var(--space-xl) 0;
 }
 
 section {
-    margin: 4rem 0;
+    margin: var(--space-xxl) 0;
     opacity: 0;
-    transform: translateY(20px);
-    animation: fadeIn 0.6s ease forwards;
+    transform: translateY(var(--space-lg));
+    animation: fadeIn var(--transition-speed) var(--transition-timing) forwards;
 }
 
 .mission-vision {
     display: grid;
     grid-template-columns: 1fr 1fr;
-    gap: 2rem;
-    margin: 2rem 0;
+    gap: var(--space-xl);
+    margin: var(--space-xl) 0;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(var(--space-lg));
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
 }
diff --git a/public/css/responsive.css b/public/css/responsive.css
index 5231d03..09dac3a 100644
--- a/public/css/responsive.css
+++ b/public/css/responsive.css
@@ -1,7 +1,7 @@
 /* Tablet Devices */
 @media (max-width: 768px) {
     .container {
-        padding: 0 1.5rem;
+        padding: 0 var(--container-padding);
     }
 
     header {
@@ -9,47 +9,47 @@
     }
 
     .logo-text {
-        font-size: 1.8rem;
+        font-size: var(--font-size-lg);
     }
 
     h1 {
-        font-size: 2rem;
+        font-size: var(--font-size-xl);
     }
 
     h2 {
-        font-size: 1.5rem;
+        font-size: var(--font-size-lg);
     }
 
     .h1-hero {
-        font-size: 2rem !important;
-        margin: 1rem !important;
-        padding: 1rem !important;
+        font-size: var(--font-size-xxl) !important;
+        margin: var(--space-md) !important;
+        padding: var(--space-md) !important;
     }
 
     .mission-vision {
         grid-template-columns: 1fr;
-        gap: 1rem;
+        gap: var(--space-md);
     }
 
     .service-card {
-        padding: 1.5rem;
+        padding: var(--space-lg);
     }
 
     .welcome-quote {
-        font-size: 1rem;
-        padding: 1rem;
+        font-size: var(--font-size-md);
+        padding: var(--space-md);
     }
 
     .logo-sub {
-        font-size: 0.85rem;
-        padding: 1.5rem;
+        font-size: var(--font-size-sm);
+        padding: var(--space-lg);
         margin: 0;
     }
 
     .mobile-menu-toggle {
         display: block;
-        padding: 0.5rem;
-        transition: opacity 0.3s ease;
+        padding: var(--space-xs);
+        transition: opacity var(--transition-speed) var(--transition-timing);
     }
 
     .mobile-menu-toggle:active {
@@ -67,43 +67,59 @@
         flex-direction: column;
         align-items: center;
         border-bottom: 1px solid var(--border-color);
-        padding: 2rem 1rem;
-        gap: 1.5rem;
+        padding: var(--space-xl) var(--space-md);
+        gap: var(--space-lg);
         overflow-y: auto;
         -webkit-overflow-scrolling: touch;
+        z-index: var(--z-header);
     }
 
     .nav-menu.active {
         display: flex;
-        animation: fadeIn 0.3s ease-in-out;
+        animation: fadeIn var(--transition-speed) var(--transition-timing);
     }
 
     .nav-menu a {
-        padding: 0.75rem 1.5rem;
+        padding: var(--space-sm) var(--space-lg);
         width: 100%;
         text-align: center;
-        border-radius: 0.25rem;
-        transition: background-color 0.3s ease;
+        border-radius: var(--radius-sm);
+        transition: background-color var(--transition-speed) var(--transition-timing);
     }
 
     .nav-menu a:hover {
-        background-color: var(--hover-color);
+        background-color: var(--bg-hover-rgb);
     }
 
     .contact-block {
         flex-direction: column;
         align-items: center;
     }
+
+    footer {
+        padding: var(--space-lg) var(--container-padding);
+        gap: var(--space-md);
+    }
+
+    .contact-block {
+        flex-direction: column;
+        gap: var(--space-md);
+    }
+
+    .social-links {
+        gap: var(--space-md);
+    }
+
+    .legal-links a {
+        display: block;
+        margin: var(--space-xs) 0;
+    }
 }
 
 /* Mobile Devices */
 @media (max-width: 480px) {
-    :root {
-        --header-height: 80px;
-    }
-
     .container {
-        padding: 0 1rem;
+        padding: 0 var(--container-padding);
     }
 
     header {
@@ -111,90 +127,86 @@
     }
 
     .logo-text {
-        font-size: 1.6rem;
+        font-size: var(--font-size-lg);
     }
 
     main {
-        margin-top: 1rem;
-        padding: 1rem 0;
+        margin-top: var(--space-md);
+        padding: var(--space-md) 0;
     }
 
     section {
-        margin: 2rem 0;
+        margin: var(--space-xl) 0;
     }
 
     h1.h1-hero {
-        font-size: 1.75rem !important;
-        margin: 0.5rem !important;
-        padding: 0.5rem !important;
+        font-size: var(--font-size-xl) !important;
+        margin: var(--space-xs) !important;
+        padding: var(--space-xs) !important;
     }
 
     .welcome-quote {
-        font-size: 0.95rem;
-        padding: 0.5rem;
-        line-height: 1.5;
+        font-size: var(--font-size-sm);
+        padding: var(--space-xs);
+        line-height: var(--line-height-base);
     }
 
     .service-card {
-        padding: 1.25rem;
-        margin: 1rem 0;
+        padding: var(--space-md);
+        margin: var(--space-md) 0;
     }
 
     .service-card h3 {
-        font-size: 1.2rem;
+        font-size: var(--font-size-lg);
     }
 
     .contact-info {
-        padding: 1.5rem;
-        margin: 1rem 0;
+        padding: var(--space-lg);
+        margin: var(--space-md) 0;
     }
 
     .contact-info a {
-        padding: 0.5rem 0;
-        font-size: 0.95rem;
+        padding: var(--space-xs) 0;
+        font-size: var(--font-size-sm);
     }
 
     .logo-sub {
-        font-size: 0.8rem;
-        line-height: 1.4;
-        padding: 1.5rem;
+        font-size: var(--font-size-xs);
+        line-height: var(--line-height-base);
+        padding: var(--space-lg);
         margin: 0;
     }
 }
 
 /* Small Mobile Devices */
 @media (max-width: 320px) {
-    :root {
-        --header-height: 60px;
-    }
-
     header {
         height: var(--header-height);
     }
 
     .logo-text {
-        font-size: 1.4rem;
+        font-size: var(--font-size-md);
     }
 
     h1.h1-hero {
-        font-size: 1.5rem !important;
+        font-size: var(--font-size-lg) !important;
     }
 
     .service-card {
-        padding: 1rem;
+        padding: var(--space-md);
     }
 
     .contact-info {
-        padding: 1rem;
+        padding: var(--space-md);
     }
 
     .welcome-quote {
-        font-size: 0.9rem;
+        font-size: var(--font-size-xs);
     }
 
     .logo-sub {
-        font-size: 0.75rem;
-        padding: 0.75rem;
+        font-size: var(--font-size-xs);
+        padding: var(--space-sm);
     }
 }
 
@@ -202,7 +214,7 @@
 @media (hover: none) {
     .contact-info a,
     .nav-menu a {
-        padding: 0.75rem;
+        padding: var(--space-sm);
         min-height: 44px;
         display: flex;
         align-items: center;
@@ -225,14 +237,14 @@
 /* Fix for notched phones */
 @supports (padding: max(0px)) {
     header {
-        padding-left: max(1rem, env(safe-area-inset-left));
-        padding-right: max(1rem, env(safe-area-inset-right));
+        padding-left: var(--safe-area-inset-left);
+        padding-right: var(--safe-area-inset-right);
     }
 
     .nav-menu {
-        padding-left: max(1rem, env(safe-area-inset-left));
-        padding-right: max(1rem, env(safe-area-inset-right));
-        padding-bottom: max(1rem, env(safe-area-inset-bottom));
+        padding-left: var(--safe-area-inset-left);
+        padding-right: var(--safe-area-inset-right);
+        padding-bottom: var(--safe-area-inset-bottom);
     }
 }
 
diff --git a/public/css/variables.css b/public/css/variables.css
index 2da77f4..c70ac64 100644
--- a/public/css/variables.css
+++ b/public/css/variables.css
@@ -1,5 +1,66 @@
+/* Base Theme Variables */
 :root {
-    /* Light theme (default) */
+    /* Breakpoints - for reference only, not used as variables */
+    --breakpoint-mobile-sm: 320px;
+    --breakpoint-mobile: 480px;
+    --breakpoint-tablet: 768px;
+    --breakpoint-desktop: 1200px;
+
+    /* Spacing Scale */
+    --space-unit: 0.25rem;
+    --space-xxs: calc(var(--space-unit) * 1);    /* 0.25rem */
+    --space-xs: calc(var(--space-unit) * 2);     /* 0.5rem */
+    --space-sm: calc(var(--space-unit) * 3);     /* 0.75rem */
+    --space-md: calc(var(--space-unit) * 4);     /* 1rem */
+    --space-lg: calc(var(--space-unit) * 6);     /* 1.5rem */
+    --space-xl: calc(var(--space-unit) * 8);     /* 2rem */
+    --space-xxl: calc(var(--space-unit) * 12);   /* 3rem */
+    --space-xxxl: calc(var(--space-unit) * 16);  /* 4rem */
+
+    /* Typography Scale */
+    --font-size-base: 1rem;
+    --font-size-xs: calc(var(--font-size-base) * 0.75);    /* 12px */
+    --font-size-sm: calc(var(--font-size-base) * 0.875);   /* 14px */
+    --font-size-md: var(--font-size-base);                 /* 16px */
+    --font-size-lg: calc(var(--font-size-base) * 1.25);    /* 20px */
+    --font-size-xl: calc(var(--font-size-base) * 1.5);     /* 24px */
+    --font-size-xxl: calc(var(--font-size-base) * 2);      /* 32px */
+    --font-size-xxxl: calc(var(--font-size-base) * 2.5);   /* 40px */
+
+    /* Line Heights */
+    --line-height-tight: 1.2;
+    --line-height-base: 1.6;
+    --line-height-relaxed: 1.8;
+
+    /* Font Weights */
+    --font-weight-light: 300;
+    --font-weight-normal: 400;
+    --font-weight-medium: 500;
+    --font-weight-semibold: 600;
+    --font-weight-bold: 700;
+
+    /* Layout */
+    --container-padding: var(--space-md);
+    --section-spacing: var(--space-xxl);
+    --header-height: 100px;
+    --content-width-sm: 640px;
+    --content-width-md: 768px;
+    --content-width-lg: 1024px;
+    --content-width-xl: 1200px;
+
+    /* Border Radius */
+    --radius-sm: 4px;
+    --radius-md: 8px;
+    --radius-lg: 16px;
+    --radius-pill: 9999px;
+
+    /* Transitions */
+    --transition-speed: 0.3s;
+    --transition-timing: ease;
+    --theme-transition: color var(--transition-speed) var(--transition-timing),
+                       background-color var(--transition-speed) var(--transition-timing);
+
+    /* Light Theme Colors (default) */
     --primary: #3a7be0;
     --primary-gradient-1: #112fcf;
     --primary-gradient-2: #3b3bc8;
@@ -15,8 +76,16 @@
     --border-color: rgba(58, 123, 224, 0.1);
     --bg-hover-rgb: 237, 237, 237;
     --bg-hover-nav: 207, 207, 207;
+
+    /* Z-index Scale */
+    --z-below: -1;
+    --z-normal: 1;
+    --z-above: 10;
+    --z-header: 100;
+    --z-modal: 1000;
 }
 
+/* Dark Theme */
 [data-theme="dark"] {
     --bg-main: #0a0a0a;
     --bg-card: #141414;
@@ -28,18 +97,43 @@
     --bg-hover-nav: 20, 20, 20;
 }
 
-/* Common tokens */
-:root {
-    --spacing-sm: 0.5rem;
-    --spacing-md: 1rem;
-    --spacing-lg: 1.5rem;
-    --spacing-xl: 2rem;
-    --border-radius: 8px;
-    --transition-speed: 0.3s;
-    --header-height: 100px;
-    
-    /* Theme transition with GPU acceleration */
-    --theme-transition: color var(--transition-speed) ease,
-                       background-color var(--transition-speed) ease;
-    --gpu-accelerated: translate3d(0, 0, 0);
+/* Responsive Adjustments */
+@media (max-width: 768px) {
+    :root {
+        /* Tablet Adjustments */
+        --font-size-base: 0.9375rem;
+        --header-height: 80px;
+        --container-padding: var(--space-lg);
+        --section-spacing: var(--space-xl);
+    }
+}
+
+@media (max-width: 480px) {
+    :root {
+        /* Mobile Adjustments */
+        --font-size-base: 0.875rem;
+        --header-height: 70px;
+        --container-padding: var(--space-md);
+        --section-spacing: var(--space-lg);
+    }
+}
+
+@media (max-width: 320px) {
+    :root {
+        /* Small Mobile Adjustments */
+        --font-size-base: 0.8125rem;
+        --header-height: 60px;
+        --container-padding: var(--space-sm);
+        --section-spacing: var(--space-md);
+    }
+}
+
+/* Safe Area Insets for Notched Devices */
+@supports (padding: max(0px)) {
+    :root {
+        --safe-area-inset-top: max(0px, env(safe-area-inset-top));
+        --safe-area-inset-right: max(0px, env(safe-area-inset-right));
+        --safe-area-inset-bottom: max(0px, env(safe-area-inset-bottom));
+        --safe-area-inset-left: max(0px, env(safe-area-inset-left));
+    }
 }
diff --git a/public/impressum.html b/public/impressum.html
index 964d2c9..b1d3b22 100644
--- a/public/impressum.html
+++ b/public/impressum.html
@@ -28,11 +28,11 @@
                     <h2>Angaben gemäß § 5 TMG</h2>
                     <p>7SYS<br>
                     <p>Benjamin Bader<br>
-                    [hidden]<br>
-                    [hidden]</p>
+                    Baden-Württemberg<br>
+                    Germany</p>
 
                     <h3>Kontakt</h3>
-                    <p>Telefon: [hidden]<br>
+                    <p>Signal Messenger<br>
                     E-Mail: info@7sys.de</p>
 
                     <h3>Umsatzsteuer-ID</h3>
@@ -40,9 +40,7 @@
                     DE[hidden]</p>
 
                     <h3>Verantwortlich für den Inhalt nach § 55 Abs. 2 RStV</h3>
-                    <p>Benjamin Bader<br>
-                    [hidden]<br>
-                    [hidden]</p>
+                    <p>Benjamin Bader<br></p>
                 </div>
             </section>
         </div>